fix(tabs): allow changing tab padding

PiperOrigin-RevId: 577030425

tabs/internal/_tab.scss

@@ -18,10 +18,20 @@
 @mixin styles() {
   :host {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
     outline: none;
+    padding: 0 16px;
+    position: relative;
     -webkit-tap-highlight-color: transparent;
     vertical-align: middle;
     user-select: none;
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
+    color: var(--_label-text-color);
+    z-index: 0; // Ensure this is a stacking context so the indicator displays
 
     @include ripple.theme(
       (
@@ -45,24 +55,6 @@
     margin-bottom: calc(var(--_active-indicator-height) + 1px);
   }
 
-  .button {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    width: 100%;
-    position: relative;
-    padding: 0 16px;
-    margin: 0;
-    z-index: 0; // Ensure this is a stacking context so the indicator displays
-    font-family: var(--_label-text-font);
-    font-size: var(--_label-text-size);
-    line-height: var(--_label-text-line-height);
-    font-weight: var(--_label-text-weight);
-    color: var(--_label-text-color);
-  }
-
   .button::before {
     background: var(--_container-color);
     content: '';
@@ -105,7 +97,7 @@
   }
 
   // unselected states
-  .button ::slotted([slot='icon']) {
+  ::slotted([slot='icon']) {
     display: inline-flex;
     position: relative;
     writing-mode: horizontal-tb;
@@ -116,29 +108,28 @@
     height: var(--_icon-size);
   }
 
-  .button:hover {
+  :host(:hover) {
     color: var(--_hover-label-text-color);
     cursor: pointer;
   }
 
-  .button:hover ::slotted([slot='icon']) {
+  :host(:hover) ::slotted([slot='icon']) {
     color: var(--_hover-icon-color);
   }
 
-  .button:focus {
+  :host(:focus) {
     color: var(--_focus-label-text-color);
   }
 
-  .button:focus ::slotted([slot='icon']) {
+  :host(:focus) ::slotted([slot='icon']) {
     color: var(--_focus-icon-color);
   }
 
-  .button:active {
+  :host(:active) {
     color: var(--_pressed-label-text-color);
-    outline: none;
   }
 
-  .button:active ::slotted([slot='icon']) {
+  :host(:active) ::slotted([slot='icon']) {
     color: var(--_pressed-icon-color);
   }
 
@@ -146,7 +137,7 @@
   :host([active]) .indicator {
     opacity: 1;
   }
-  :host([active]) .button {
+  :host([active]) {
     color: var(--_active-label-text-color);
     @include elevation.theme(
       (
@@ -164,32 +155,32 @@
     );
   }
 
-  :host([active]) .button ::slotted([slot='icon']) {
+  :host([active]) ::slotted([slot='icon']) {
     color: var(--_active-icon-color);
   }
 
   // selected states
-  :host([active]) .button:hover {
+  :host([active]:hover) {
     color: var(--_active-hover-label-text-color);
   }
 
-  :host([active]) .button:hover ::slotted([slot='icon']) {
+  :host([active]:hover) ::slotted([slot='icon']) {
     color: var(--_active-hover-icon-color);
   }
 
-  :host([active]) .button:focus {
+  :host([active]:focus) {
     color: var(--_active-focus-label-text-color);
   }
 
-  :host([active]) .button:focus ::slotted([slot='icon']) {
+  :host([active]:focus) ::slotted([slot='icon']) {
     color: var(--_active-focus-icon-color);
   }
 
-  :host([active]) .button:active {
+  :host([active]:active) {
     color: var(--_active-pressed-label-text-color);
   }
 
-  :host([active]) .button:active ::slotted([slot='icon']) {
+  :host([active]:active) ::slotted([slot='icon']) {
     color: var(--_active-pressed-icon-color);
   }
 

tabs/internal/tab.ts

@@ -16,7 +16,7 @@ import {
   queryAssignedNodes,
   state,
 } from 'lit/decorators.js';
-import {classMap} from 'lit/directives/class-map.js';
+import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 import {
   polyfillARIAMixin,
@@ -105,7 +105,7 @@ export class Tab extends tabBaseClass {
 
   protected override render() {
     const indicator = html`<div class="indicator"></div>`;
-    return html` <div
+    return html`<div
       class="button"
       role="presentation"
       @click=${this.handleContentClick}>
@@ -123,7 +123,7 @@ export class Tab extends tabBaseClass {
     </div>`;
   }
 
-  protected getContentClasses() {
+  protected getContentClasses(): ClassInfo {
     return {
       'has-icon': this.hasIcon,
       'has-label': !this.iconOnly,