Fix button start/end slot margins, add reduce-left-padding flag (#26431)

* Fix button start/end slot margins, add reduce-left-padding flag

* Always reduce padding when icons are there

* Revert icon padding changes

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -2,13 +2,13 @@ import { mdiDelete, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../src/components/ha-button";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-settings-row";
+import "../../../../src/components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   addHassioDockerRegistry,

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -7,10 +7,14 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-tooltip";
-import "../../../../src/components/ha-svg-icon";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-md-list";
+import "../../../../src/components/ha-md-list-item";
+import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-textfield";
+import type { HaTextField } from "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-tooltip";
 import type {
   HassioAddonInfo,
   HassioAddonRepository,
@@ -24,10 +28,6 @@ import {
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioRepositoryDialogParams } from "./show-dialog-repositories";
-import type { HaTextField } from "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-textfield";
-import "../../../../src/components/ha-md-list";
-import "../../../../src/components/ha-md-list-item";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {

src/components/ha-button.ts

@@ -211,6 +211,13 @@ export class HaButton extends Button {
         .button.disabled {
           opacity: 1;
         }
+
+        slot[name="start"]::slotted(*) {
+          margin-inline-end: 4px;
+        }
+        slot[name="end"]::slotted(*) {
+          margin-inline-start: 4px;
+        }
       `,
     ];
   }

src/components/ha-multi-textfield.ts

@@ -7,8 +7,8 @@ import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-button";
 import "./ha-icon-button";
-import "./ha-textfield";
 import "./ha-input-helper-text";
+import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-multi-textfield")
@@ -79,6 +79,7 @@ class HaMultiTextField extends LitElement {
           @click=${this._addItem}
           .disabled=${this.disabled}
         >
+          <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
           ${this.addLabel ??
           (this.label
             ? this.hass?.localize("ui.components.multi-textfield.add_item", {
@@ -86,7 +87,6 @@ class HaMultiTextField extends LitElement {
               })
             : this.hass?.localize("ui.common.add")) ??
           "Add"}
-          <ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
         </ha-button>
       </div>
       ${this.helper

src/components/media-player/ha-media-player-browse.ts

@@ -18,9 +18,9 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { debounce } from "../../common/util/debounce";
 import { isUnavailableState } from "../../data/entity";
 import type {
-  MediaPlayerItem,
   MediaPickedEvent,
   MediaPlayerBrowseAction,
+  MediaPlayerItem,
   MediaPlayerLayoutType,
 } from "../../data/media-player";
 import {
@@ -32,6 +32,7 @@ import { browseLocalMediaPlayer } from "../../data/media_source";
 import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../resources/styles";
+import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
 import {
   brandsUrl,
@@ -44,16 +45,15 @@ import "../ha-alert";
 import "../ha-button";
 import "../ha-button-menu";
 import "../ha-card";
-import "../ha-spinner";
 import "../ha-fab";
 import "../ha-icon-button";
-import "../ha-svg-icon";
-import "../ha-tooltip";
 import "../ha-list";
 import "../ha-list-item";
+import "../ha-spinner";
+import "../ha-svg-icon";
+import "../ha-tooltip";
 import "./ha-browse-media-tts";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
-import { loadVirtualizer } from "../../resources/virtualizer";
 
 declare global {
   interface HASSDomEvents {

src/panels/config/automation/action/ha-automation-action.ts

@@ -317,9 +317,6 @@ export default class HaAutomationAction extends LitElement {
       display: block;
       scroll-margin-top: 48px;
     }
-    ha-svg-icon {
-      height: 20px;
-    }
     .handle {
       padding: 12px;
       cursor: move; /* fallback if grab cursor is unsupported */

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -345,9 +345,6 @@ export default class HaAutomationCondition extends LitElement {
     .buttons {
       order: 1;
     }
-    ha-svg-icon {
-      height: 20px;
-    }
     .handle {
       padding: 12px;
       cursor: move; /* fallback if grab cursor is unsupported */

src/panels/config/automation/option/ha-automation-option.ts

@@ -255,9 +255,6 @@ export default class HaAutomationOption extends LitElement {
       display: block;
       scroll-margin-top: 48px;
     }
-    ha-svg-icon {
-      height: 20px;
-    }
     .handle {
       padding: 12px;
       cursor: move; /* fallback if grab cursor is unsupported */

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -296,9 +296,6 @@ export default class HaAutomationTrigger extends LitElement {
       display: block;
       scroll-margin-top: 48px;
     }
-    ha-svg-icon {
-      height: 20px;
-    }
     .handle {
       padding: 12px;
       cursor: move; /* fallback if grab cursor is unsupported */

src/panels/config/integrations/ha-config-integration-page.ts

@@ -17,6 +17,10 @@ import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import {
+  PROTOCOL_INTEGRATIONS,
+  protocolIntegrationPicked,
+} from "../../../common/integrations/protocolIntegrationPicked";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
@@ -64,10 +68,6 @@ import "./ha-config-entry-row";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
 import { showAddIntegrationDialog } from "./show-add-integration-dialog";
 import { showPickConfigEntryDialog } from "./show-pick-config-entry-dialog";
-import {
-  PROTOCOL_INTEGRATIONS,
-  protocolIntegrationPicked,
-} from "../../../common/integrations/protocolIntegrationPicked";
 
 export const renderConfigEntryError = (
   hass: HomeAssistant,