fix(button): allow overriding padding and gap

More customization and necessary prep to move styles to host for host aria and text wrapping customization.

PiperOrigin-RevId: 580565272

button/internal/_shared.scss

@@ -13,11 +13,16 @@
 
 @mixin styles() {
   :host {
+    box-sizing: border-box;
     cursor: pointer;
     display: inline-flex;
+    gap: 8px;
     height: var(--_container-height);
     min-width: 64px;
     outline: none;
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+    position: relative;
     font-family: var(--_label-text-font);
     font-size: var(--_label-text-size);
     line-height: var(--_label-text-line-height);
@@ -64,23 +69,19 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-sizing: border-box;
     border: none;
     outline: none;
     -webkit-appearance: none;
     vertical-align: middle;
     background: transparent;
     text-decoration: none;
     width: 100%;
-    position: relative;
     z-index: 0; // Place content on top of elevation and ripple
     height: 100%;
     font: inherit;
     color: var(--_label-text-color);
-    // TODO(b/181413732): Verify token below are named correctly
-    padding-inline-start: var(--_leading-space);
-    padding-inline-end: var(--_trailing-space);
-    gap: 8px;
+    padding: 0;
+    gap: inherit;
 
     &::-moz-focus-inner {
       padding: 0;
@@ -139,13 +140,12 @@
     z-index: -1; // Place behind content
   }
 
-  // TODO(b/181413732): Verify token below are named correctly
-  .icon-leading {
+  :host([has-icon]:not([trailing-icon])) {
     padding-inline-start: var(--_with-leading-icon-leading-space);
     padding-inline-end: var(--_with-leading-icon-trailing-space);
   }
 
-  .icon-trailing {
+  :host([has-icon][trailing-icon]) {
     padding-inline-start: var(--_with-trailing-icon-leading-space);
     padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }

button/internal/button.ts

@@ -9,7 +9,6 @@ import '../../ripple/ripple.js';
 
 import {html, isServer, LitElement, nothing} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
-import {classMap} from 'lit/directives/class-map.js';
 import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
@@ -71,12 +70,14 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
    *
    * _Note:_ Link buttons cannot have trailing icons.
    */
-  @property({type: Boolean, attribute: 'trailing-icon'}) trailingIcon = false;
+  @property({type: Boolean, attribute: 'trailing-icon', reflect: true})
+  trailingIcon = false;
 
   /**
    * Whether to display the icon or not.
    */
-  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;
+  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =
+    false;
 
   @property() type: FormSubmitterType = 'submit';
 
@@ -125,7 +126,7 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
     const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
     return staticHtml`
       <${button}
-        class="button ${classMap(this.getRenderClasses())}"
+        class="button"
         ?disabled=${isDisabled}
         aria-label="${ariaLabel || nothing}"
         aria-haspopup="${ariaHasPopup || nothing}"
@@ -135,13 +136,6 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
       >${this.renderContent()}</${button}>`;
   }
 
-  protected getRenderClasses() {
-    return {
-      'icon-leading': !this.trailingIcon && this.hasIcon,
-      'icon-trailing': this.trailingIcon && this.hasIcon,
-    };
-  }
-
   protected renderElevation?(): unknown;
 
   protected renderOutline?(): unknown;