@material/web 2.5.1-nightly.b4de401.0 → 2.5.1-nightly.bd360db.0

package/labs/gb/components/button/button.css

@@ -1,4 +1,4 @@
 /*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.button{.btn{--container-color: transparent;--container-height: auto;--container-elevation: var(--md-sys-elevation-shadow-0);--container-shape: calc(var(--container-height) / 2);--outline-width: 0;--outline-color: transparent;--icon-label-space: 8px;--icon-color: currentColor;--icon-size: 20px;--label-text: var(--md-sys-typescale-label-lg);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--label-text-color: currentColor;--leading-space: 0;--state-layer-color: transparent;--trailing-space: 0}.btn:is(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-filled:where(.btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant)}.btn.btn-filled:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1);--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary)}.btn.btn-elevated:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.btn.btn-tonal:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.btn.btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px}.btn.btn-outlined:where(.btn-lg){--outline-width: 2px}.btn.btn-outlined:where(.btn-xl){--outline-width: 3px}.btn.btn-outlined:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface);--label-text-color: var(--md-sys-color-inverse-on-surface)}.btn.btn-text{--label-text-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.btn.btn-xs{--container-height: 32px;--leading-space: 12px;--trailing-space: 12px}.btn.btn-sm{--container-height: 40px;--leading-space: 16px;--trailing-space: 16px}.btn.btn-md{--container-height: 56px;--leading-space: 24px;--trailing-space: 24px;--icon-size: 24px;--label-text: var(--md-sys-typescale-title-md);--label-text-tracking: var(--md-sys-typescale-title-md-tracking)}.btn.btn-md:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-lg{--container-height: 96px;--icon-label-space: 12px;--icon-size: 32px;--leading-space: 48px;--trailing-space: 48px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking)}.btn.btn-lg:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl{--container-height: 136px;--icon-label-space: 16px;--icon-size: 40px;--leading-space: 64px;--trailing-space: 64px;--label-text: var(--md-sys-typescale-headline-lg);--label-text-tracking: var(--md-sys-typescale-headline-lg-tracking)}.btn.btn-xl:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square{--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-square:where(.btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-square:where(.btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-md){--container-shape: var(--md-sys-shape-corner-md)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--container-elevation: var(--md-sys-elevation-shadow-0);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--container-height);gap:var(--icon-label-space);padding-inline:var(--leading-space) var(--trailing-space);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.btn:not(:disabled,.disabled){cursor:pointer}}/*# sourceMappingURL=button.css.map */
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.button{.btn{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-label-space: 8px;--icon-size: 20px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--state-layer-color: transparent;--trailing-space: 0}.btn:where(.btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.btn:is(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--md-icon-fill: 1}.btn.btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-filled:where(.btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant)}.btn.btn-filled:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1);--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary)}.btn.btn-elevated:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.btn.btn-tonal:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.btn.btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.btn.btn-outlined:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface);--label-text-color: var(--md-sys-color-inverse-on-surface)}.btn.btn-text{--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.btn.btn-xs{--container-height: 32px;--leading-space: 12px;--outline-width: 1px;--trailing-space: 12px}.btn.btn-sm{--container-height: 40px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.btn.btn-md{--container-height: 56px;--icon-size: 24px;--label-text: var(--md-sys-typescale-title-md);--label-text-axes: var(--md-sys-typescale-title-md-axes);--label-text-tracking: var(--md-sys-typescale-title-md-tracking);--leading-space: 24px;--outline-width: 1px;--trailing-space: 24px}.btn.btn-md:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-lg{--container-height: 96px;--icon-label-space: 12px;--icon-size: 32px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-axes: var(--md-sys-typescale-headline-sm-axes);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 48px;--outline-width: 2px;--trailing-space: 48px}.btn.btn-lg:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl{--container-height: 136px;--icon-label-space: 16px;--icon-size: 40px;--label-text: var(--md-sys-typescale-headline-lg);--label-text-axes: var(--md-sys-typescale-headline-lg-axes);--label-text-tracking: var(--md-sys-typescale-headline-lg-tracking);--leading-space: 64px;--outline-width: 3px;--trailing-space: 64px}.btn.btn-xl:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square{--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-square:where(.btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-square:where(.btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-md){--container-shape: var(--md-sys-shape-corner-md)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--container-elevation: var(--md-sys-elevation-shadow-0);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--container-height);gap:var(--icon-label-space);padding-inline:var(--leading-space) var(--trailing-space);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);-webkit-font-smoothing:antialiased;transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.btn:not(:disabled,.disabled){cursor:pointer}}/*# sourceMappingURL=button.css.map */

package/labs/gb/components/button/button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["button.scss","_button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBACE,KCJA,+BACA,yBACA,wDACA,qDACA,mBACA,6BACA,wBACA,2BACA,kBACA,+CACA,iEACA,iCACA,mBACA,iCACA,oBDRE,2CCaF,iDDVE,gBCcF,+CACA,6CACA,mDDdI,4DCkBJ,yDACA,qDACA,2DDjBI,yDCqBJ,+CACA,6CACA,mDDnBE,kBCuBF,6DACA,wDACA,0CACA,gDDxBI,2DC4BJ,+CACA,6CACA,mDD1BE,eC8BF,2DACA,yDACA,+DD9BI,wDCkCJ,iDACA,+CACA,qDDhCE,kBCoCF,qDACA,2DACA,qDACA,qBDrCI,iCCyCJ,qBDtCI,iCC0CJ,qBDvCI,2DC2CJ,uDACA,qDACA,2DDzCE,cC6CF,gDACA,0CACA,iDD5CE,YCgDF,yBACA,sBACA,uBD/CE,YCmDF,yBACA,sBACA,uBDlDE,YCsDF,yBACA,sBACA,uBACA,kBACA,+CACA,iEDzDI,qDC6DJ,iDDzDE,YC6DF,yBACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDjEI,qDCqEJ,iDDjEE,YCqEF,0BACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDzEI,qDC6EJ,iDDzEE,gBC6EF,iDD3EI,+BC+EJ,iDD5EI,+BCgFJ,iDD7EI,+BCiFJ,iDD9EI,yDCkFJ,qDD9EE,0DCkFF,iDDhFI,yECoFJ,iDDjFI,yECqFJ,iDDlFI,yECsFJ,iDDlFE,6BCsFF,wEACA,wDACA,mEACA,yEDrFE,KACE,oBACA,mBACA,uBACA,mCACA,4BACA,0DACA,uDACA,qCACA,sCACA,wCACA,8BACA,uBACA,0CACA,WACE,iFAEF,mCACA,iCAEF,8BACE","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["button.scss","_button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBACE,KCJA,+BACA,wDACA,yBACA,qDACA,2BACA,wBACA,kBACA,+CACA,yDACA,iCACA,iEACA,mBACA,kBACA,6BACA,mBACA,iCACA,oBDVE,iDCeF,kBDZE,2CCgBF,iDACA,kBDdE,gBCkBF,+CACA,6CACA,mDDlBI,4DCsBJ,yDACA,qDACA,2DDrBI,yDCyBJ,+CACA,6CACA,mDDvBE,kBC2BF,6DACA,wDACA,0CACA,gDD5BI,2DCgCJ,+CACA,6CACA,mDD9BE,eCkCF,2DACA,yDACA,+DDlCI,wDCsCJ,iDACA,+CACA,qDDpCE,kBCwCF,qDACA,2DACA,qDDxCI,2DC4CJ,uDACA,qDACA,2DD1CE,cC8CF,0CACA,gDACA,iDD7CE,YCiDF,yBACA,sBACA,qBACA,uBDjDE,YCqDF,yBACA,sBACA,qBACA,uBDrDE,YCyDF,yBACA,kBACA,+CACA,yDACA,iEACA,sBACA,qBACA,uBD9DI,qDCkEJ,iDD9DE,YCkEF,yBACA,yBACA,kBACA,kDACA,4DACA,oEACA,sBACA,qBACA,uBDxEI,qDC4EJ,iDDxEE,YC4EF,0BACA,yBACA,kBACA,kDACA,4DACA,oEACA,sBACA,qBACA,uBDlFI,qDCsFJ,iDDlFE,gBCsFF,iDDpFI,+BCwFJ,iDDrFI,+BCyFJ,iDDtFI,+BC0FJ,iDDvFI,yDC2FJ,qDDvFE,0DC2FF,iDDzFI,yEC6FJ,iDD1FI,yEC8FJ,iDD3FI,yEC+FJ,iDD3FE,6BC+FF,wEACA,wDACA,mEACA,yED9FE,KACE,oBACA,mBACA,uBACA,mCACA,4BACA,0DACA,uDACA,qCACA,sCACA,wCACA,8BACA,uBACA,0CACA,+CACA,mCACA,WACE,iFAEF,mCACA,iCAEF,8BACE","file":"button.css"}

package/labs/gb/components/button/button.cssresult.js

@@ -8,7 +8,7 @@ import { css } from 'lit';
 export const styles = css `/*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.button{.btn{--container-color: transparent;--container-height: auto;--container-elevation: var(--md-sys-elevation-shadow-0);--container-shape: calc(var(--container-height) / 2);--outline-width: 0;--outline-color: transparent;--icon-label-space: 8px;--icon-color: currentColor;--icon-size: 20px;--label-text: var(--md-sys-typescale-label-lg);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--label-text-color: currentColor;--leading-space: 0;--state-layer-color: transparent;--trailing-space: 0}.btn:is(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-filled:where(.btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant)}.btn.btn-filled:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1);--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary)}.btn.btn-elevated:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.btn.btn-tonal:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.btn.btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px}.btn.btn-outlined:where(.btn-lg){--outline-width: 2px}.btn.btn-outlined:where(.btn-xl){--outline-width: 3px}.btn.btn-outlined:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface);--label-text-color: var(--md-sys-color-inverse-on-surface)}.btn.btn-text{--label-text-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.btn.btn-xs{--container-height: 32px;--leading-space: 12px;--trailing-space: 12px}.btn.btn-sm{--container-height: 40px;--leading-space: 16px;--trailing-space: 16px}.btn.btn-md{--container-height: 56px;--leading-space: 24px;--trailing-space: 24px;--icon-size: 24px;--label-text: var(--md-sys-typescale-title-md);--label-text-tracking: var(--md-sys-typescale-title-md-tracking)}.btn.btn-md:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-lg{--container-height: 96px;--icon-label-space: 12px;--icon-size: 32px;--leading-space: 48px;--trailing-space: 48px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking)}.btn.btn-lg:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl{--container-height: 136px;--icon-label-space: 16px;--icon-size: 40px;--leading-space: 64px;--trailing-space: 64px;--label-text: var(--md-sys-typescale-headline-lg);--label-text-tracking: var(--md-sys-typescale-headline-lg-tracking)}.btn.btn-xl:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square{--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-square:where(.btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-square:where(.btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-md){--container-shape: var(--md-sys-shape-corner-md)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--container-elevation: var(--md-sys-elevation-shadow-0);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--container-height);gap:var(--icon-label-space);padding-inline:var(--leading-space) var(--trailing-space);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.btn:not(:disabled,.disabled){cursor:pointer}}
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.button{.btn{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-label-space: 8px;--icon-size: 20px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--state-layer-color: transparent;--trailing-space: 0}.btn:where(.btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.btn:is(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--md-icon-fill: 1}.btn.btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-filled:where(.btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant)}.btn.btn-filled:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1);--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary)}.btn.btn-elevated:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.btn.btn-tonal:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.btn.btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.btn.btn-outlined:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface);--label-text-color: var(--md-sys-color-inverse-on-surface)}.btn.btn-text{--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.btn.btn-xs{--container-height: 32px;--leading-space: 12px;--outline-width: 1px;--trailing-space: 12px}.btn.btn-sm{--container-height: 40px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.btn.btn-md{--container-height: 56px;--icon-size: 24px;--label-text: var(--md-sys-typescale-title-md);--label-text-axes: var(--md-sys-typescale-title-md-axes);--label-text-tracking: var(--md-sys-typescale-title-md-tracking);--leading-space: 24px;--outline-width: 1px;--trailing-space: 24px}.btn.btn-md:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-lg{--container-height: 96px;--icon-label-space: 12px;--icon-size: 32px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-axes: var(--md-sys-typescale-headline-sm-axes);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 48px;--outline-width: 2px;--trailing-space: 48px}.btn.btn-lg:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl{--container-height: 136px;--icon-label-space: 16px;--icon-size: 40px;--label-text: var(--md-sys-typescale-headline-lg);--label-text-axes: var(--md-sys-typescale-headline-lg-axes);--label-text-tracking: var(--md-sys-typescale-headline-lg-tracking);--leading-space: 64px;--outline-width: 3px;--trailing-space: 64px}.btn.btn-xl:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square{--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-square:where(.btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-square:where(.btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-md){--container-shape: var(--md-sys-shape-corner-md)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--container-elevation: var(--md-sys-elevation-shadow-0);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--container-height);gap:var(--icon-label-space);padding-inline:var(--leading-space) var(--trailing-space);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);-webkit-font-smoothing:antialiased;transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.btn:not(:disabled,.disabled){cursor:pointer}}
 `;
 export default styles.styleSheet;
 //# sourceMappingURL=button.cssresult.js.map

package/labs/gb/components/button/button.cssresult.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.cssresult.js","sourceRoot":"","sources":["button.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/button/button.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.button{.btn{--container-color: transparent;--container-height: auto;--container-elevation: var(--md-sys-elevation-shadow-0);--container-shape: calc(var(--container-height) / 2);--outline-width: 0;--outline-color: transparent;--icon-label-space: 8px;--icon-color: currentColor;--icon-size: 20px;--label-text: var(--md-sys-typescale-label-lg);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--label-text-color: currentColor;--leading-space: 0;--state-layer-color: transparent;--trailing-space: 0}.btn:is(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-filled:where(.btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant)}.btn.btn-filled:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1);--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary)}.btn.btn-elevated:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.btn.btn-tonal:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.btn.btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px}.btn.btn-outlined:where(.btn-lg){--outline-width: 2px}.btn.btn-outlined:where(.btn-xl){--outline-width: 3px}.btn.btn-outlined:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface);--label-text-color: var(--md-sys-color-inverse-on-surface)}.btn.btn-text{--label-text-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.btn.btn-xs{--container-height: 32px;--leading-space: 12px;--trailing-space: 12px}.btn.btn-sm{--container-height: 40px;--leading-space: 16px;--trailing-space: 16px}.btn.btn-md{--container-height: 56px;--leading-space: 24px;--trailing-space: 24px;--icon-size: 24px;--label-text: var(--md-sys-typescale-title-md);--label-text-tracking: var(--md-sys-typescale-title-md-tracking)}.btn.btn-md:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-lg{--container-height: 96px;--icon-label-space: 12px;--icon-size: 32px;--leading-space: 48px;--trailing-space: 48px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking)}.btn.btn-lg:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl{--container-height: 136px;--icon-label-space: 16px;--icon-size: 40px;--leading-space: 64px;--trailing-space: 64px;--label-text: var(--md-sys-typescale-headline-lg);--label-text-tracking: var(--md-sys-typescale-headline-lg-tracking)}.btn.btn-xl:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square{--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-square:where(.btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-square:where(.btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-md){--container-shape: var(--md-sys-shape-corner-md)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--container-elevation: var(--md-sys-elevation-shadow-0);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--container-height);gap:var(--icon-label-space);padding-inline:var(--leading-space) var(--trailing-space);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.btn:not(:disabled,.disabled){cursor:pointer}}\n`;\nexport default styles.styleSheet!;\n"]}
+{"version":3,"file":"button.cssresult.js","sourceRoot":"","sources":["button.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/button/button.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.button{.btn{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-label-space: 8px;--icon-size: 20px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 0;--md-icon-fill: 1;--outline-color: transparent;--outline-width: 0;--state-layer-color: transparent;--trailing-space: 0}.btn:where(.btn-unselected,[aria-pressed=false]){--md-icon-fill: 0}.btn:is(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--md-icon-fill: 1}.btn.btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-filled:where(.btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant)}.btn.btn-filled:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1);--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary)}.btn.btn-elevated:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.btn.btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.btn.btn-tonal:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.btn.btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--label-text-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.btn.btn-outlined:where(.btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface);--label-text-color: var(--md-sys-color-inverse-on-surface)}.btn.btn-text{--icon-color: var(--md-sys-color-primary);--label-text-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.btn.btn-xs{--container-height: 32px;--leading-space: 12px;--outline-width: 1px;--trailing-space: 12px}.btn.btn-sm{--container-height: 40px;--leading-space: 16px;--outline-width: 1px;--trailing-space: 16px}.btn.btn-md{--container-height: 56px;--icon-size: 24px;--label-text: var(--md-sys-typescale-title-md);--label-text-axes: var(--md-sys-typescale-title-md-axes);--label-text-tracking: var(--md-sys-typescale-title-md-tracking);--leading-space: 24px;--outline-width: 1px;--trailing-space: 24px}.btn.btn-md:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-lg{--container-height: 96px;--icon-label-space: 12px;--icon-size: 32px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-axes: var(--md-sys-typescale-headline-sm-axes);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 48px;--outline-width: 2px;--trailing-space: 48px}.btn.btn-lg:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl{--container-height: 136px;--icon-label-space: 16px;--icon-size: 40px;--label-text: var(--md-sys-typescale-headline-lg);--label-text-axes: var(--md-sys-typescale-headline-lg-axes);--label-text-tracking: var(--md-sys-typescale-headline-lg-tracking);--leading-space: 64px;--outline-width: 3px;--trailing-space: 64px}.btn.btn-xl:where(.btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square{--container-shape: var(--md-sys-shape-corner-md)}.btn.btn-square:where(.btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-square:where(.btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-square:where(.btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-md){--container-shape: var(--md-sys-shape-corner-md)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--container-elevation: var(--md-sys-elevation-shadow-0);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--container-height);gap:var(--icon-label-space);padding-inline:var(--leading-space) var(--trailing-space);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);-webkit-font-smoothing:antialiased;transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}.btn:not(:disabled,.disabled){cursor:pointer}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/button/button.js

@@ -102,7 +102,7 @@ export function setupButton(button, opts) {
             button.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
             button.dispatchEvent(new Event('change', { bubbles: true }));
         });
-    }, opts);
+    }, { ...opts, capture: true });
 }
 /**
  * A Lit directive that adds button styling and functionality to its element.

package/labs/gb/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {isDisabled, PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Button color configuration types. */\nexport type ButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';\n\n/** Button color configurations. */\nexport const BUTTON_COLORS = {\n  filled: 'filled',\n  elevated: 'elevated',\n  tonal: 'tonal',\n  outlined: 'outlined',\n  text: 'text',\n} as const;\n\n/** Button size configuration types. */\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Button size configurations. */\nexport const BUTTON_SIZES = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\n/** Button classes. */\nexport const BUTTON_CLASSES = {\n  btn: 'btn',\n  btnFilled: 'btn-filled',\n  btnElevated: 'btn-elevated',\n  btnTonal: 'btn-tonal',\n  btnOutlined: 'btn-outlined',\n  btnText: 'btn-text',\n  btnXs: 'btn-xs',\n  btnSm: 'btn-sm',\n  btnMd: 'btn-md',\n  btnLg: 'btn-lg',\n  btnXl: 'btn-xl',\n  btnSquare: 'btn-square',\n  btnUnselected: 'btn-unselected',\n  btnSelected: 'btn-selected',\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `buttonClasses()` function. */\nexport interface ButtonClassesState {\n  /** The color of the button. */\n  color?: ButtonColor;\n  /** The size of the button. */\n  size?: ButtonSize;\n  /** Whether the button is a square shape. */\n  square?: boolean;\n  /** Whether the toggle button is selected, if not undefined. */\n  selected?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the button classes to apply to an element based on the given state.\n *\n * @param state The state of the button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function buttonClasses({\n  color,\n  size,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}: ButtonClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [BUTTON_CLASSES.btn]: true,\n    [BUTTON_CLASSES.btnFilled]: color === BUTTON_COLORS.filled,\n    [BUTTON_CLASSES.btnElevated]: color === BUTTON_COLORS.elevated,\n    [BUTTON_CLASSES.btnTonal]: color === BUTTON_COLORS.tonal,\n    [BUTTON_CLASSES.btnOutlined]: color === BUTTON_COLORS.outlined,\n    [BUTTON_CLASSES.btnText]: color === BUTTON_COLORS.text || !color,\n    [BUTTON_CLASSES.btnXs]: size === BUTTON_SIZES.xs,\n    [BUTTON_CLASSES.btnSm]: size === BUTTON_SIZES.sm || !size,\n    [BUTTON_CLASSES.btnMd]: size === BUTTON_SIZES.md,\n    [BUTTON_CLASSES.btnLg]: size === BUTTON_SIZES.lg,\n    [BUTTON_CLASSES.btnXl]: size === BUTTON_SIZES.xl,\n    [BUTTON_CLASSES.btnSquare]: square,\n    [BUTTON_CLASSES.btnUnselected]: selected === false,\n    [BUTTON_CLASSES.btnSelected]: selected === true,\n    [BUTTON_CLASSES.active]: active,\n    [BUTTON_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up button functionality for the given element.\n *\n * @param button The element on which to set up button functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupButton(\n  button: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupDispatchHooks(button, 'click');\n  setupRipple(button, opts);\n  button.addEventListener(\n    'click',\n    (event) => {\n      // When disabled, explicitly prevent the click from propagating to other\n      // event listeners as well as prevent the default action. This is because\n      // the underlying element may not actually be `:disabled`, such as an\n      // anchor tag or a soft-disabled button.\n      if (isDisabled(button)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      afterDispatch(event, () => {\n        const isToggle =\n          button.hasAttribute('aria-pressed') ||\n          button.matches(\n            `.${BUTTON_CLASSES.btnSelected},.${BUTTON_CLASSES.btnUnselected}`,\n          );\n        if (event.defaultPrevented || !isToggle) {\n          return;\n        }\n\n        const isPressed = button.ariaPressed === 'true';\n        button.ariaPressed = String(!isPressed);\n        // Mimic native browser input and change event behavior.\n        button.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        button.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds button styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${button({color: 'filled'})}\">Filled</button>`;\n * ```\n */\nexport const button = createClassMapDirective({\n  getClasses: buttonClasses,\n  setupElement: setupButton,\n});\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {isDisabled, PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Button color configuration types. */\nexport type ButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';\n\n/** Button color configurations. */\nexport const BUTTON_COLORS = {\n  filled: 'filled',\n  elevated: 'elevated',\n  tonal: 'tonal',\n  outlined: 'outlined',\n  text: 'text',\n} as const;\n\n/** Button size configuration types. */\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Button size configurations. */\nexport const BUTTON_SIZES = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\n/** Button classes. */\nexport const BUTTON_CLASSES = {\n  btn: 'btn',\n  btnFilled: 'btn-filled',\n  btnElevated: 'btn-elevated',\n  btnTonal: 'btn-tonal',\n  btnOutlined: 'btn-outlined',\n  btnText: 'btn-text',\n  btnXs: 'btn-xs',\n  btnSm: 'btn-sm',\n  btnMd: 'btn-md',\n  btnLg: 'btn-lg',\n  btnXl: 'btn-xl',\n  btnSquare: 'btn-square',\n  btnUnselected: 'btn-unselected',\n  btnSelected: 'btn-selected',\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `buttonClasses()` function. */\nexport interface ButtonClassesState {\n  /** The color of the button. */\n  color?: ButtonColor;\n  /** The size of the button. */\n  size?: ButtonSize;\n  /** Whether the button is a square shape. */\n  square?: boolean;\n  /** Whether the toggle button is selected, if not undefined. */\n  selected?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the button classes to apply to an element based on the given state.\n *\n * @param state The state of the button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function buttonClasses({\n  color,\n  size,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}: ButtonClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [BUTTON_CLASSES.btn]: true,\n    [BUTTON_CLASSES.btnFilled]: color === BUTTON_COLORS.filled,\n    [BUTTON_CLASSES.btnElevated]: color === BUTTON_COLORS.elevated,\n    [BUTTON_CLASSES.btnTonal]: color === BUTTON_COLORS.tonal,\n    [BUTTON_CLASSES.btnOutlined]: color === BUTTON_COLORS.outlined,\n    [BUTTON_CLASSES.btnText]: color === BUTTON_COLORS.text || !color,\n    [BUTTON_CLASSES.btnXs]: size === BUTTON_SIZES.xs,\n    [BUTTON_CLASSES.btnSm]: size === BUTTON_SIZES.sm || !size,\n    [BUTTON_CLASSES.btnMd]: size === BUTTON_SIZES.md,\n    [BUTTON_CLASSES.btnLg]: size === BUTTON_SIZES.lg,\n    [BUTTON_CLASSES.btnXl]: size === BUTTON_SIZES.xl,\n    [BUTTON_CLASSES.btnSquare]: square,\n    [BUTTON_CLASSES.btnUnselected]: selected === false,\n    [BUTTON_CLASSES.btnSelected]: selected === true,\n    [BUTTON_CLASSES.active]: active,\n    [BUTTON_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up button functionality for the given element.\n *\n * @param button The element on which to set up button functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupButton(\n  button: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupDispatchHooks(button, 'click');\n  setupRipple(button, opts);\n  button.addEventListener(\n    'click',\n    (event) => {\n      // When disabled, explicitly prevent the click from propagating to other\n      // event listeners as well as prevent the default action. This is because\n      // the underlying element may not actually be `:disabled`, such as an\n      // anchor tag or a soft-disabled button.\n      if (isDisabled(button)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      afterDispatch(event, () => {\n        const isToggle =\n          button.hasAttribute('aria-pressed') ||\n          button.matches(\n            `.${BUTTON_CLASSES.btnSelected},.${BUTTON_CLASSES.btnUnselected}`,\n          );\n        if (event.defaultPrevented || !isToggle) {\n          return;\n        }\n\n        const isPressed = button.ariaPressed === 'true';\n        button.ariaPressed = String(!isPressed);\n        // Mimic native browser input and change event behavior.\n        button.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        button.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    {...opts, capture: true},\n  );\n}\n\n/**\n * A Lit directive that adds button styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${button({color: 'filled'})}\">Filled</button>`;\n * ```\n */\nexport const button = createClassMapDirective({\n  getClasses: buttonClasses,\n  setupElement: setupButton,\n});\n"]}

package/labs/gb/components/button/button.scss

@@ -11,6 +11,9 @@
 @layer md.comp.button {
   .btn {
     @include button-tokens.root;
+    &:where(.btn-unselected, [aria-pressed='false']) {
+      @include button-tokens.unselected;
+    }
     &:is(.btn-selected, [aria-pressed='true']) {
       @include button-tokens.selected;
     }
@@ -37,12 +40,6 @@
     }
     &.btn-outlined {
       @include button-tokens.outlined;
-      &:where(.btn-lg) {
-        @include button-tokens.outlined-lg;
-      }
-      &:where(.btn-xl) {
-        @include button-tokens.outlined-xl;
-      }
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.outlined-selected;
       }
@@ -119,6 +116,8 @@
       color: var(--label-text-color);
       font: var(--label-text);
       letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+      -webkit-font-smoothing: antialiased;
       transition:
         border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),
         var(--ripple-transition);

package/labs/gb/components/card/card-element.d.ts

@@ -23,6 +23,7 @@ declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinRe
 export declare class CardElement extends baseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
+    /** @nocollapse */
     static styles: CSSResultOrNative[];
     private hideOutline;
     private lastFiredEnabledState?;

package/labs/gb/components/card/card-element.js

@@ -118,6 +118,7 @@ CardElement.shadowRootOptions = {
     mode: 'open',
     delegatesFocus: true,
 };
+/** @nocollapse */
 CardElement.styles = [
     focusRingStyles,
     rippleStyles,

package/labs/gb/components/card/card-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-element.js","sourceRoot":"","sources":["card-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  css,\n  CSSResultOrNative,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n *\n * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.\n * @slot container - Used to set a custom background container for the card.\n * @csspart card - The card's root element.\n * @csspart card-btn - The card's main action button, when interactive.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n */\nexport class CardElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n        isolation: isolate;\n      }\n      .card {\n        flex: 1;\n        position: relative;\n      }\n      .card:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .card.card-hide-outline {\n        --outline-color: transparent;\n        --container-elevation: var(--md-sys-elevation-shadow-0);\n      }\n      slot[name='container'] {\n        display: block;\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        --color: var(--container-color);\n        z-index: -1;\n        transition: inherit;\n      }\n      slot[name='container']::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  @state() private hideOutline = false;\n\n  private lastFiredEnabledState?: boolean;\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'md-gb:set-show-outline',\n      this.handleSetShowOutline,\n    );\n  }\n\n  private readonly handleSetShowOutline = (event: Event) => {\n    const customEvent = event as CustomEvent<{shown: boolean}>;\n    this.hideOutline = !customEvent.detail.shown;\n  };\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this.dispatchSetEnabledEvent();\n    }\n  }\n\n  private dispatchSetEnabledEvent() {\n    const enabled = !this.disabled;\n\n    if (this.lastFiredEnabledState === enabled) return;\n\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"container\"]',\n    ) as HTMLSlotElement;\n    if (slot) {\n      for (const element of slot.assignedElements({flatten: true})) {\n        element.dispatchEvent(\n          new CustomEvent('md-gb:set-enabled', {\n            detail: {enabled},\n          }),\n        );\n      }\n    }\n    this.lastFiredEnabledState = enabled;\n  }\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n        classes: {\n          'card-hide-outline': this.hideOutline,\n        },\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n      <slot\n        name=\"container\"\n        ${hasSlotted()}\n        @slotchange=${this.handleContainerSlotChange}></slot>\n    </div>`;\n  }\n\n  private handleContainerSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    const enabled = !this.disabled;\n\n    for (const element of slot.assignedElements({flatten: true})) {\n      element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n      element.dispatchEvent(\n        new CustomEvent('md-gb:set-enabled', {\n          detail: {enabled},\n        }),\n      );\n    }\n  }\n}\n"]}
+{"version":3,"file":"card-element.js","sourceRoot":"","sources":["card-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,gEAAgE;AAEhE,OAAO,EAAiB,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/C,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEjD;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,WAAY,SAAQ,SAAS;IAA1C;;QA6CmB,gBAAW,GAAG,KAAK,CAAC;QAIrC,6BAA6B;QACjB,UAAK,GAAc,UAAU,CAAC;QAE1C,oCAAoC;QACT,aAAQ,GAAG,KAAK,CAAC;QAE5C,uCAAuC;QACZ,gBAAW,GAAG,KAAK,CAAC;QAe9B,yBAAoB,GAAG,CAAC,KAAY,EAAE,EAAE;YACvD,MAAM,WAAW,GAAG,KAAsC,CAAC;YAC3D,IAAI,CAAC,WAAW,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/C,CAAC,CAAC;IAuEJ,CAAC;IAvFU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC7E,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CACtB,wBAAwB,EACxB,IAAI,CAAC,oBAAoB,CAC1B,CAAC;IACJ,CAAC;IAOkB,OAAO,CAAC,iBAAiC;QAC1D,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,uBAAuB;QAC7B,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE/B,IAAI,IAAI,CAAC,qBAAqB,KAAK,OAAO;YAAE,OAAO;QAEnD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACzC,wBAAwB,CACN,CAAC;QACrB,IAAI,IAAI,EAAE,CAAC;YACT,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE,CAAC;gBAC7D,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAC,OAAO,EAAC;iBAClB,CAAC,CACH,CAAC;YACJ,CAAC;QACH,CAAC;QACD,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;IACvC,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,OAAO,EAAE;gBACP,mBAAmB,EAAE,IAAI,CAAC,WAAW;aACtC;SACF,CAAC;QACA,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;cAGA,MAAM,EAAE;yBACG,IAAI,CAAC,QAAQ;0BACZ,SAAS,IAAI,OAAO,aAAa;YACnD,CAAC,CAAC,OAAO;;;;UAIP,UAAU,EAAE;sBACA,IAAI,CAAC,yBAAyB;WACzC,CAAC;IACV,CAAC;IAEO,yBAAyB,CAAC,KAAY;QAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAE7C,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE/B,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE,CAAC;YAC7D,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,6BAA6B,CAAC,CAAC,CAAC;YACtE,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,mBAAmB,EAAE;gBACnC,MAAM,EAAE,EAAC,OAAO,EAAC;aAClB,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;;AA/ID,kBAAkB;AACF,6BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEF,kBAAkB;AACF,kBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,AAnCqB,CAmCpB;AAEe;IAAhB,KAAK,EAAE;gDAA6B;AAKzB;IAAX,QAAQ,EAAE;0CAA+B;AAGf;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;6CAAkB;AAGjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAqB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  css,\n  CSSResultOrNative,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n *\n * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.\n * @slot container - Used to set a custom background container for the card.\n * @csspart card - The card's root element.\n * @csspart card-btn - The card's main action button, when interactive.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n */\nexport class CardElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n        isolation: isolate;\n      }\n      .card {\n        flex: 1;\n        position: relative;\n      }\n      .card:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .card.card-hide-outline {\n        --outline-color: transparent;\n        --container-elevation: var(--md-sys-elevation-shadow-0);\n      }\n      slot[name='container'] {\n        display: block;\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        --color: var(--container-color);\n        z-index: -1;\n        transition: inherit;\n      }\n      slot[name='container']::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  @state() private hideOutline = false;\n\n  private lastFiredEnabledState?: boolean;\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'md-gb:set-show-outline',\n      this.handleSetShowOutline,\n    );\n  }\n\n  private readonly handleSetShowOutline = (event: Event) => {\n    const customEvent = event as CustomEvent<{shown: boolean}>;\n    this.hideOutline = !customEvent.detail.shown;\n  };\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this.dispatchSetEnabledEvent();\n    }\n  }\n\n  private dispatchSetEnabledEvent() {\n    const enabled = !this.disabled;\n\n    if (this.lastFiredEnabledState === enabled) return;\n\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"container\"]',\n    ) as HTMLSlotElement;\n    if (slot) {\n      for (const element of slot.assignedElements({flatten: true})) {\n        element.dispatchEvent(\n          new CustomEvent('md-gb:set-enabled', {\n            detail: {enabled},\n          }),\n        );\n      }\n    }\n    this.lastFiredEnabledState = enabled;\n  }\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n        classes: {\n          'card-hide-outline': this.hideOutline,\n        },\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n      <slot\n        name=\"container\"\n        ${hasSlotted()}\n        @slotchange=${this.handleContainerSlotChange}></slot>\n    </div>`;\n  }\n\n  private handleContainerSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    const enabled = !this.disabled;\n\n    for (const element of slot.assignedElements({flatten: true})) {\n      element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n      element.dispatchEvent(\n        new CustomEvent('md-gb:set-enabled', {\n          detail: {enabled},\n        }),\n      );\n    }\n  }\n}\n"]}

package/labs/gb/components/checkbox/checkbox-element.d.ts

@@ -28,6 +28,7 @@ declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinRe
 export declare class CheckboxElement extends baseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
+    /** @nocollapse */
     static styles: CSSResultOrNative[];
     /**
      * Whether or not the checkbox is invalid.

package/labs/gb/components/checkbox/checkbox-element.js

@@ -150,6 +150,7 @@ CheckboxElement.shadowRootOptions = {
     mode: 'open',
     delegatesFocus: true,
 };
+/** @nocollapse */
 CheckboxElement.styles = [
     focusRingStyles,
     rippleStyles,

package/labs/gb/components/checkbox/checkbox-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-element.js","sourceRoot":"","sources":["checkbox-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A Material Design checkbox component.\n *\n * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed\n * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles\n * @csspart checkbox - The checkbox's root element.\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --container-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\nexport class CheckboxElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    checkboxStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .checkbox {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * Whether or not the checkbox is invalid.\n   */\n  @property({type: Boolean}) error = false;\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * The default checked state of the checkbox.\n   */\n  get defaultChecked(): boolean {\n    return this.hasAttribute('checked');\n  }\n  set defaultChecked(value: boolean) {\n    this.toggleAttribute('checked', value || false);\n  }\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @query('input', true)\n  private readonly input!: HTMLInputElement | null;\n  /**\n   * Mimics the behavior of <input> dirty checkedness, where the `checked`\n   * attribute only updates the checked state if the checkbox has not been\n   * interacted with.\n   *\n   * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n   */\n  private dirtyCheckedness = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    return html`\n      <input\n        part=\"checkbox\"\n        class=\"${checkbox({invalid: this.error})}\"\n        type=\"checkbox\"\n        aria-checked=${this.indeterminate ? 'mixed' : nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-invalid=${ariaInvalid || this.error || nothing}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        .indeterminate=${this.indeterminate}\n        .checked=${this.checked}\n        @input=${this.handleInput}\n        @change=${this.handleChange} />\n    `;\n  }\n\n  private handleInput(event: Event) {\n    this.dirtyCheckedness = true;\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    this.dirtyCheckedness = true;\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (name === 'checked' && this.dirtyCheckedness) {\n      // The 'checked' attribute does not update checkboxes that have been\n      // interacted with.\n      return;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    this.dirtyCheckedness = false;\n    this.checked = this.defaultChecked;\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  override [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}
+{"version":3,"file":"checkbox-element.js","sourceRoot":"","sources":["checkbox-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A Material Design checkbox component.\n *\n * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed\n * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles\n * @csspart checkbox - The checkbox's root element.\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --container-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\nexport class CheckboxElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    checkboxStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .checkbox {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * Whether or not the checkbox is invalid.\n   */\n  @property({type: Boolean}) error = false;\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * The default checked state of the checkbox.\n   */\n  get defaultChecked(): boolean {\n    return this.hasAttribute('checked');\n  }\n  set defaultChecked(value: boolean) {\n    this.toggleAttribute('checked', value || false);\n  }\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @query('input', true)\n  private readonly input!: HTMLInputElement | null;\n  /**\n   * Mimics the behavior of <input> dirty checkedness, where the `checked`\n   * attribute only updates the checked state if the checkbox has not been\n   * interacted with.\n   *\n   * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n   */\n  private dirtyCheckedness = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    return html`\n      <input\n        part=\"checkbox\"\n        class=\"${checkbox({invalid: this.error})}\"\n        type=\"checkbox\"\n        aria-checked=${this.indeterminate ? 'mixed' : nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-invalid=${ariaInvalid || this.error || nothing}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        .indeterminate=${this.indeterminate}\n        .checked=${this.checked}\n        @input=${this.handleInput}\n        @change=${this.handleChange} />\n    `;\n  }\n\n  private handleInput(event: Event) {\n    this.dirtyCheckedness = true;\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    this.dirtyCheckedness = true;\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (name === 'checked' && this.dirtyCheckedness) {\n      // The 'checked' attribute does not update checkboxes that have been\n      // interacted with.\n      return;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    this.dirtyCheckedness = false;\n    this.checked = this.defaultChecked;\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  override [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}

package/labs/gb/components/chip/_chip-tokens.scss

@@ -0,0 +1,167 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Auto-generated by cascade_tokens
+// Add `// EDIT:` comments for manual adjustments.
+//
+// --prefix=md.comp.chip
+// --states="hovered|focused|pressed|dragged,:unselected|selected,:filter|input,with-leading-icon|with-avatar,with-trailing-icon,disabled"
+// --exclude=motion,state-layer,indicator
+
+@mixin root {
+  // LINT.IfChange
+  --avatar-opacity: unset;
+  // md.comp.chip.avatar.shape
+  --avatar-shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.avatar.size
+  --avatar-size: 24px;
+  --container-color: unset;
+  // md.comp.chip.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  // --container-opacity: unset; // EDIT: unused
+  // md.comp.chip.gap.horizontal
+  --gap-horizontal: var(--md-sys-space-50);
+  // md.comp.chip.height
+  --height: 32px;
+  // md.comp.chip.label-text
+  --label-text: var(--md-sys-typescale-label-lg);
+  // ┌┄ md.comp.chip.label-text
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
+  // md.comp.chip.unselected.label-text.color
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  // --label-text-opacity: unset; // EDIT: unused
+  // ┌┄ md.comp.chip.label-text
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  // md.comp.chip.unselected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-surface-variant);
+  // --leading-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.leading-icon.size
+  --leading-icon-size: 18px;
+  // md.comp.chip.unselected.outline.color
+  --outline-color: var(--md-sys-color-outline-variant);
+  // --outline-opacity: unset; // EDIT: unused
+  // md.comp.chip.unselected.outline.width
+  --outline-width: 1px;
+  // md.comp.chip.padding.bottom
+  --padding-bottom: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.leading
+  --padding-leading: var(--md-sys-space-200);
+  // md.comp.chip.padding.top
+  --padding-top: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.trailing
+  --padding-trailing: var(--md-sys-space-200);
+  // md.comp.chip.unselected.shape
+  --shape: var(--md-sys-shape-corner-md);
+  // md.comp.chip.unselected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  // --trailing-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.trailing-icon.size
+  --trailing-icon-size: 18px;
+  // LINT.ThenChange(md-gb-chip.ts) sync with `@cssprop` jsdoc tags
+}
+
+@mixin pressed {
+  // md.comp.chip.pressed.shape
+  --shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin dragged {
+  // md.comp.chip.dragged.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-4);
+}
+
+@mixin selected {
+  // md.comp.chip.selected.container.color
+  --container-color: var(--md-sys-color-secondary-container);
+  // md.comp.chip.selected.label-text.color
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.outline.width
+  --outline-width: 0px;
+  // md.comp.chip.selected.shape
+  --shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.selected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin input {
+  // md.comp.chip.input.padding.leading
+  --padding-leading: var(--md-sys-space-150);
+  // md.comp.chip.input.padding.trailing
+  --padding-trailing: var(--md-sys-space-150);
+}
+
+@mixin with-leading-icon {
+  // md.comp.chip.with-leading-icon.padding.leading
+  --padding-leading: var(--md-sys-space-100);
+}
+
+@mixin with-avatar {
+  // md.comp.chip.with-avatar.padding.leading
+  --padding-leading: var(--md-sys-space-50);
+}
+
+@mixin with-trailing-icon {
+  // md.comp.chip.with-trailing-icon.padding.trailing
+  --padding-trailing: var(--md-sys-space-100);
+}
+
+@mixin disabled {
+  // md.comp.chip.disabled.avatar.opacity
+  --avatar-opacity: 0.38;
+  // ┌ md.comp.chip.disabled.label-text.opacity
+  // md.comp.chip.disabled.label-text.color
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.disabled.leading-icon.opacity
+  // md.comp.chip.disabled.leading-icon.color
+  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.unselected.disabled.outline.opacity
+  // md.comp.chip.unselected.disabled.outline.color
+  --outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.1);
+  // ┌ md.comp.chip.disabled.trailing-icon.opacity
+  // md.comp.chip.disabled.trailing-icon.color
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+}
+
+@mixin disabled-selected {
+  // ┌ md.comp.chip.selected.disabled.container.opacity
+  // md.comp.chip.selected.disabled.container.color
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.12);
+}
+
+// EDIT: Manual adjustments
+@mixin filter {
+  // Hoisted to root, so empty here to satisfy chip.scss mapping
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-surface-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin tonal {
+  --container-color: var(--md-sys-color-secondary-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  --outline-width: 0;
+}
+
+@mixin outlined {
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-color: var(--md-sys-color-outline);
+  --outline-width: 1px;
+}

package/labs/gb/components/chip/chip-element.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type ChipColor, type ChipType } from './chip.js';
+/**
+ * A Material Design Expressive Chip component (`md-gb-chip`).
+ *
+ * @slot - Used to display the chip label text.
+ * @slot icon - Used to display an optional leading icon, checkmark, or avatar.
+ * @slot remove-icon - Used to display the trailing remove button icon when `removable="true"`.
+ * @fires {Event} remove - Fired when the remove action is triggered on a removable chip. --bubbles --composed
+ * @fires {Event} change - Fired when a filter/toggle chip's selection state changes. --bubbles
+ * @fires {InputEvent} input - Fired when a filter/toggle chip's selection state changes. --bubbles --composed
+ * @csspart chip - The root container element.
+ * @cssprop --avatar-opacity
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-size
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-opacity
+ * @cssprop --gap-horizontal
+ * @cssprop --height
+ * @cssprop --label-text
+ * @cssprop --label-text-color
+ * @cssprop --label-text-opacity
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-opacity
+ * @cssprop --leading-icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-opacity
+ * @cssprop --outline-width
+ * @cssprop --padding-bottom
+ * @cssprop --padding-leading
+ * @cssprop --padding-top
+ * @cssprop --padding-trailing
+ * @cssprop --shape
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-opacity
+ * @cssprop --trailing-icon-size
+ */
+export declare class ChipElement extends LitElement {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    /** The color emphasis of the chip. Defaults to `outlined`. */
+    color: ChipColor;
+    /** The functional behavior type of the chip (`action`, `filter`, `toggle`, `link`). */
+    type: ChipType;
+    /** Whether the filter or toggle chip is selected. */
+    selected: boolean;
+    /** Whether the chip is removable. */
+    removable: boolean;
+    /** Whether the chip is disabled. */
+    disabled: boolean;
+    /** Whether the chip is soft-disabled (`aria-disabled="true"` while preserving focusability). */
+    softDisabled: boolean;
+    /** The URL destination if `type="link"` or if `href` is set. */
+    href: string;
+    /** Where to display the linked `href` URL for a link chip. */
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is
+     * set.
+     */
+    rel: string;
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when
+     * `href` is set.
+     */
+    referrerPolicy: string;
+    private hasLeadingIcon;
+    private hasAvatar;
+    private hasRemoveIcon;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    private renderLeadingIcon;
+    private renderRemoveButton;
+    private handleIconSlotChange;
+    private handleRemoveIconSlotChange;
+    private handleChange;
+    private handleRemove;
+}