@material/web 2.4.2-nightly.2fe7e22.0 → 2.4.2-nightly.3758f46.0

package/labs/gb/components/button/_button-tokens.scss

@@ -25,18 +25,6 @@
   --container-shape: var(--md-sys-shape-corner-md);
 }
 
-@mixin square {
-  --container-shape: var(--md-sys-shape-corner-md);
-}
-
-@mixin selected-square {
-  --container-shape: calc(var(--container-height) / 2);
-}
-
-@mixin pressed {
-  --container-shape: var(--md-sys-shape-corner-sm);
-}
-
 @mixin filled {
   --container-color: var(--md-sys-color-primary);
   --icon-color: var(--md-sys-color-on-primary);
@@ -132,14 +120,6 @@
   --container-shape: var(--md-sys-shape-corner-lg);
 }
 
-@mixin md-square {
-  --container-shape: var(--md-sys-shape-corner-lg);
-}
-
-@mixin md-pressed {
-  --container-shape: var(--md-sys-shape-corner-md);
-}
-
 @mixin lg {
   --container-height: 96px;
   --icon-label-space: 12px;
@@ -154,14 +134,6 @@
   --container-shape: var(--md-sys-shape-corner-xl);
 }
 
-@mixin lg-square {
-  --container-shape: var(--md-sys-shape-corner-xl);
-}
-
-@mixin lg-pressed {
-  --container-shape: var(--md-sys-shape-corner-lg);
-}
-
 @mixin xl {
   --container-height: 136px;
   --icon-label-space: 16px;
@@ -176,11 +148,39 @@
   --container-shape: var(--md-sys-shape-corner-xl);
 }
 
-@mixin xl-square {
+@mixin square {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin square-md {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin square-lg {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-xl {
   --container-shape: var(--md-sys-shape-corner-xl);
 }
 
-@mixin xl-pressed {
+@mixin square-selected {
+  --container-shape: calc(var(--container-height) / 2);
+}
+
+@mixin pressed {
+  --container-shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin pressed-md {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin pressed-lg {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin pressed-xl {
   --container-shape: var(--md-sys-shape-corner-lg);
 }
 

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-square{--container-shape: var(--md-sys-shape-corner-md)}.btn:is(.btn-selected,[aria-pressed=true]):where(.btn-square){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.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-md:where(.btn-square){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-md:where(:is(:active,.active):not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-md)}.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-lg:where(.btn-square){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-lg:where(:is(:active,.active):not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-lg)}.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-xl:where(.btn-square){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl:where(:is(:active,.active):not(:disabled,.disabled)){--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-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 */

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,KCLA,+BACA,yBACA,wDACA,qDACA,mBACA,6BACA,wBACA,2BACA,kBACA,+CACA,iEACA,iCACA,mBACA,iCACA,oBDPE,2CCWF,iDDRE,gBCYF,iDDTE,8DCaF,qDDVE,0DCcF,iDDXE,gBCeF,+CACA,6CACA,mDDfI,4DCmBJ,yDACA,qDACA,2DDlBI,yDCsBJ,+CACA,6CACA,mDDpBE,kBCwBF,6DACA,wDACA,0CACA,gDDzBI,2DC6BJ,+CACA,6CACA,mDD3BE,eC+BF,2DACA,yDACA,+DD/BI,wDCmCJ,iDACA,+CACA,qDDjCE,kBCqCF,qDACA,2DACA,qDACA,qBDtCI,iCC0CJ,qBDvCI,iCC2CJ,qBDxCI,2DC4CJ,uDACA,qDACA,2DD1CE,cC8CF,gDACA,0CACA,iDD7CE,YCiDF,yBACA,sBACA,uBDhDE,YCoDF,yBACA,sBACA,uBDnDE,YCuDF,yBACA,sBACA,uBACA,kBACA,+CACA,iED1DI,qDC8DJ,iDD3DI,+BC+DJ,iDD5DI,iECgEJ,iDD5DE,YCgEF,yBACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDpEI,qDCwEJ,iDDrEI,+BCyEJ,iDDtEI,iEC0EJ,iDDtEE,YC0EF,0BACA,yBACA,kBACA,sBACA,uBACA,kDACA,oED9EI,qDCkFJ,iDD/EI,+BCmFJ,iDDhFI,iECoFJ,iDDhFE,6BCoFF,wEACA,wDACA,mEACA,yEDnFE,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,KCLA,+BACA,yBACA,wDACA,qDACA,mBACA,6BACA,wBACA,2BACA,kBACA,+CACA,iEACA,iCACA,mBACA,iCACA,oBDPE,2CCWF,iDDRE,gBCYF,+CACA,6CACA,mDDZI,4DCgBJ,yDACA,qDACA,2DDfI,yDCmBJ,+CACA,6CACA,mDDjBE,kBCqBF,6DACA,wDACA,0CACA,gDDtBI,2DC0BJ,+CACA,6CACA,mDDxBE,eC4BF,2DACA,yDACA,+DD5BI,wDCgCJ,iDACA,+CACA,qDD9BE,kBCkCF,qDACA,2DACA,qDACA,qBDnCI,iCCuCJ,qBDpCI,iCCwCJ,qBDrCI,2DCyCJ,uDACA,qDACA,2DDvCE,cC2CF,gDACA,0CACA,iDD1CE,YC8CF,yBACA,sBACA,uBD7CE,YCiDF,yBACA,sBACA,uBDhDE,YCoDF,yBACA,sBACA,uBACA,kBACA,+CACA,iEDvDI,qDC2DJ,iDDvDE,YC2DF,yBACA,yBACA,kBACA,sBACA,uBACA,kDACA,oED/DI,qDCmEJ,iDD/DE,YCmEF,0BACA,yBACA,kBACA,sBACA,uBACA,kDACA,oEDvEI,qDC2EJ,iDDvEE,gBC2EF,iDDzEI,+BC6EJ,iDD1EI,+BC8EJ,iDD3EI,+BC+EJ,iDD5EI,yDCgFJ,qDD5EE,0DCgFF,iDD9EI,yECkFJ,iDD/EI,yECmFJ,iDDhFI,yECoFJ,iDDhFE,6BCoFF,wEACA,wDACA,mEACA,yEDnFE,KACE,oBACA,mBACA,uBACA,mCACA,4BACA,0DACA,uDACA,qCACA,sCACA,wCACA,8BACA,uBACA,0CACA,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-square{--container-shape: var(--md-sys-shape-corner-md)}.btn:is(.btn-selected,[aria-pressed=true]):where(.btn-square){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.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-md:where(.btn-square){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-md:where(:is(:active,.active):not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-md)}.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-lg:where(.btn-square){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-lg:where(:is(:active,.active):not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-lg)}.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-xl:where(.btn-square){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl:where(:is(:active,.active):not(:disabled,.disabled)){--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-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}}
 `;
 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-square{--container-shape: var(--md-sys-shape-corner-md)}.btn:is(.btn-selected,[aria-pressed=true]):where(.btn-square){--container-shape: calc(var(--container-height) / 2)}.btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.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-md:where(.btn-square){--container-shape: var(--md-sys-shape-corner-lg)}.btn.btn-md:where(:is(:active,.active):not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-md)}.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-lg:where(.btn-square){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-lg:where(:is(:active,.active):not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-lg)}.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-xl:where(.btn-square){--container-shape: var(--md-sys-shape-corner-xl)}.btn.btn-xl:where(:is(:active,.active):not(:disabled,.disabled)){--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-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"]}

package/labs/gb/components/button/button.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { AsyncDirective, AttributePart, DirectiveParameters } from 'lit/async-directive.js';
 import { type ClassInfo } from 'lit/directives/class-map.js';
 /** Button color configuration types. */
 export type ButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';
@@ -75,19 +74,6 @@ export declare function buttonClasses({ color, size, square, selected, active, d
 export declare function setupButton(button: HTMLElement, opts?: {
     signal?: AbortSignal;
 }): void;
-/** The state provided to the `button()` directive. */
-export interface ButtonDirectiveState extends ButtonClassesState {
-    /** Additional classes to apply to the element. */
-    classes?: ClassInfo;
-}
-declare class ButtonDirective extends AsyncDirective {
-    private element?;
-    private cleanup?;
-    render(state?: ButtonDirectiveState): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
-    update({ element }: AttributePart, [state]: DirectiveParameters<this>): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
-    protected disconnected(): void;
-    protected reconnected(): void;
-}
 /**
  * A Lit directive that adds button styling and functionality to its element.
  *
@@ -96,5 +82,4 @@ declare class ButtonDirective extends AsyncDirective {
  * html`<button class="${button({color: 'filled'})}">Filled</button>`;
  * ```
  */
-export declare const button: (state?: ButtonDirectiveState) => import("lit-html/directive.js").DirectiveResult<typeof ButtonDirective>;
-export {};
+export declare const button: (state?: ButtonClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -3,12 +3,11 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { afterDispatch, setupDispatchHooks, } from '@material/web/internal/events/dispatch-hooks.js';
-import { focusRingClasses } from '@material/web/labs/gb/components/focus/focus-ring.js';
-import { rippleClasses, setupRipple, } from '@material/web/labs/gb/components/ripple/ripple.js';
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import { AsyncDirective, directive, } from 'lit/async-directive.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { isDisabled, PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
 /** Button color configurations. */
 export const BUTTON_COLORS = {
     filled: 'filled',
@@ -86,7 +85,7 @@ export function setupButton(button, opts) {
         // event listeners as well as prevent the default action. This is because
         // the underlying element may not actually be `:disabled`, such as an
         // anchor tag or a soft-disabled button.
-        if (button.matches(`.${BUTTON_CLASSES.disabled},[aria-disabled="true"]`)) {
+        if (isDisabled(button)) {
             event.stopImmediatePropagation();
             event.preventDefault();
             return;
@@ -105,31 +104,6 @@ export function setupButton(button, opts) {
         });
     }, opts);
 }
-class ButtonDirective extends AsyncDirective {
-    render(state = {}) {
-        return classMap({
-            ...(state.classes || {}),
-            ...buttonClasses(state),
-        });
-    }
-    update({ element }, [state]) {
-        if (this.isConnected && element !== this.element) {
-            this.element = element;
-            this.disconnected();
-            this.reconnected();
-        }
-        return this.render(state);
-    }
-    disconnected() {
-        this.cleanup?.abort();
-    }
-    reconnected() {
-        if (this.element) {
-            this.cleanup = new AbortController();
-            setupButton(this.element, { signal: this.cleanup.signal });
-        }
-    }
-}
 /**
  * A Lit directive that adds button styling and functionality to its element.
  *
@@ -138,5 +112,8 @@ class ButtonDirective extends AsyncDirective {
  * html`<button class="${button({color: 'filled'})}">Filled</button>`;
  * ```
  */
-export const button = directive(ButtonDirective);
+export const button = createClassMapDirective({
+    getClasses: buttonClasses,
+    setupElement: setupButton,
+});
 //# sourceMappingURL=button.js.map

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 {\n  afterDispatch,\n  setupDispatchHooks,\n} from '@material/web/internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {\n  rippleClasses,\n  setupRipple,\n} from '@material/web/labs/gb/components/ripple/ripple.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {\n  AsyncDirective,\n  AttributePart,\n  directive,\n  DirectiveParameters,\n} from 'lit/async-directive.js';\nimport {classMap, type ClassInfo} from 'lit/directives/class-map.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 (\n        button.matches(`.${BUTTON_CLASSES.disabled},[aria-disabled=\"true\"]`)\n      ) {\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/** The state provided to the `button()` directive. */\nexport interface ButtonDirectiveState extends ButtonClassesState {\n  /** Additional classes to apply to the element. */\n  classes?: ClassInfo;\n}\n\nclass ButtonDirective extends AsyncDirective {\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  render(state: ButtonDirectiveState = {}) {\n    return classMap({\n      ...(state.classes || {}),\n      ...buttonClasses(state),\n    });\n  }\n\n  override update(\n    {element}: AttributePart,\n    [state]: DirectiveParameters<this>,\n  ) {\n    if (this.isConnected && element !== this.element) {\n      this.element = element as HTMLElement;\n      this.disconnected();\n      this.reconnected();\n    }\n\n    return this.render(state);\n  }\n\n  protected override disconnected() {\n    this.cleanup?.abort();\n  }\n\n  protected override reconnected() {\n    if (this.element) {\n      this.cleanup = new AbortController();\n      setupButton(this.element, {signal: this.cleanup.signal});\n    }\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 = directive(ButtonDirective);\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,\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

@@ -14,15 +14,6 @@
     &:is(.btn-selected, [aria-pressed='true']) {
       @include button-tokens.selected;
     }
-    &.btn-square {
-      @include button-tokens.square;
-    }
-    &:is(.btn-selected, [aria-pressed='true']):where(.btn-square) {
-      @include button-tokens.selected-square;
-    }
-    &:is(:active, .active):where(:not(:disabled, .disabled)) {
-      @include button-tokens.pressed;
-    }
     &.btn-filled {
       @include button-tokens.filled;
       &:where(.btn-unselected, [aria-pressed='false']) {
@@ -70,35 +61,44 @@
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.md-selected;
       }
-      &:where(.btn-square) {
-        @include button-tokens.md-square;
-      }
-      &:where(:is(:active, .active):not(:disabled, .disabled)) {
-        @include button-tokens.md-pressed;
-      }
     }
     &.btn-lg {
       @include button-tokens.lg;
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.lg-selected;
       }
-      &:where(.btn-square) {
-        @include button-tokens.lg-square;
-      }
-      &:where(:is(:active, .active):not(:disabled, .disabled)) {
-        @include button-tokens.lg-pressed;
-      }
     }
     &.btn-xl {
       @include button-tokens.xl;
       &:where(.btn-selected, [aria-pressed='true']) {
         @include button-tokens.xl-selected;
       }
-      &:where(.btn-square) {
-        @include button-tokens.xl-square;
+    }
+    &.btn-square {
+      @include button-tokens.square;
+      &:where(.btn-md) {
+        @include button-tokens.square-md;
       }
-      &:where(:is(:active, .active):not(:disabled, .disabled)) {
-        @include button-tokens.xl-pressed;
+      &:where(.btn-lg) {
+        @include button-tokens.square-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.square-xl;
+      }
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.square-selected;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include button-tokens.pressed;
+      &:where(.btn-md) {
+        @include button-tokens.pressed-md;
+      }
+      &:where(.btn-lg) {
+        @include button-tokens.pressed-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.pressed-xl;
       }
     }
     &:is(:disabled, .disabled) {

package/labs/gb/components/button/md-button.d.ts

@@ -10,7 +10,7 @@ declare global {
         'md-button': Button;
     }
 }
-declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/form-submitter.js").FormSubmitter>>;
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
 /**
  * A Material Design button.
  */

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

@@ -4,17 +4,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
-import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
-import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
-import { mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
-import { mixinFormSubmitter } from '@material/web/labs/behaviors/form-submitter.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
-// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
-import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
-// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
+import { mixinElementInternals } from '../../../behaviors/element-internals.js';
+import { mixinFormAssociated } from '../../../behaviors/form-associated.js';
+import { mixinFormSubmitter } from '../../../behaviors/form-submitter.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
 import buttonStyles from './button.css' with { type: 'css' }; // github-only
 // import buttonStyles from './button.cssresult.js'; // google3-only
 import { button } from './button.js';

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

@@ -1 +1 @@
-{"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-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 {ARIAMixinStrict} from '@material/web/internal/aria/aria.js';\nimport {mixinDelegatesAria} from '@material/web/internal/aria/delegate.js';\nimport {redispatchEvent} from '@material/web/internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '@material/web/labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '@material/web/labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '@material/web/labs/behaviors/form-submitter.js';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only\nimport buttonStyles from './button.css' with {type: 'css'}; // github-only\n// import buttonStyles from './button.cssresult.js'; // google3-only\n\nimport {button} from './button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design button. */\n    'md-button': Button;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n */\n@customElement('md-button')\nexport class Button 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    buttonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * The color of the button.\n   */\n  @property()\n  color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' = 'text';\n\n  /**\n   * The size of the button.\n   */\n  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Changes the shape of the button to be square.\n   */\n  @property({type: Boolean}) square = false;\n\n  /**\n   * A string indicating the behavior of the button.\n   *\n   * - \"submit\" (default): A button that submits its associated form.\n   * - \"reset\": A button that resets its associated form.\n   * - \"button\": A normal button.\n   * - \"toggle\": A toggle button using the `selected` property.\n   * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n   */\n  @property({noAccessor: true})\n  override get type(): string {\n    return this.href ? 'link' : super.type;\n  }\n  override set type(type: string) {\n    if (this.href && type !== 'link') {\n      return;\n    }\n    super.type = type;\n  }\n\n  /**\n   * Whether or not the button is \"soft-disabled\" (disabled but still\n   * focusable).\n   *\n   * Use this when a button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * Whether or not the button is selected, when `type=\"toggle\"`.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the button is used as a link (`href` is set).\n   */\n  @property() download = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected override render() {\n    const classes = button({\n      color: this.color,\n      size: this.size,\n      square: this.square,\n      // Emulate `:disabled` when soft-disabled\n      disabled: this.softDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    if (this.type === 'link') {\n      return html`<a\n        part=\"btn\"\n        class=${classes}\n        href=${this.href}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-haspopup=${ariaHasPopup || nothing}\n        aria-expanded=${ariaExpanded || nothing}\n        aria-disabled=${this.disabled || this.softDisabled || nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        <slot></slot>\n      </a>`;\n    }\n\n    return html`<button\n      part=\"btn\"\n      class=${classes}\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled || nothing}\n      aria-label=${ariaLabel || nothing}\n      aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n      aria-haspopup=${ariaHasPopup || nothing}\n      aria-expanded=${ariaExpanded || nothing}\n      @change=${this.handleChange}>\n      <slot></slot>\n    </button>`;\n  }\n\n  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}
+{"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-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 {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} 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 {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {mixinFormAssociated} from '../../../behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '../../../behaviors/form-submitter.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 buttonStyles from './button.css' with {type: 'css'}; // github-only\n// import buttonStyles from './button.cssresult.js'; // google3-only\n\nimport {button} from './button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design button. */\n    'md-button': Button;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n */\n@customElement('md-button')\nexport class Button 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    buttonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * The color of the button.\n   */\n  @property()\n  color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' = 'text';\n\n  /**\n   * The size of the button.\n   */\n  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Changes the shape of the button to be square.\n   */\n  @property({type: Boolean}) square = false;\n\n  /**\n   * A string indicating the behavior of the button.\n   *\n   * - \"submit\" (default): A button that submits its associated form.\n   * - \"reset\": A button that resets its associated form.\n   * - \"button\": A normal button.\n   * - \"toggle\": A toggle button using the `selected` property.\n   * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n   */\n  @property({noAccessor: true})\n  override get type(): string {\n    return this.href ? 'link' : super.type;\n  }\n  override set type(type: string) {\n    if (this.href && type !== 'link') {\n      return;\n    }\n    super.type = type;\n  }\n\n  /**\n   * Whether or not the button is \"soft-disabled\" (disabled but still\n   * focusable).\n   *\n   * Use this when a button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * Whether or not the button is selected, when `type=\"toggle\"`.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the button is used as a link (`href` is set).\n   */\n  @property() download = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected override render() {\n    const classes = button({\n      color: this.color,\n      size: this.size,\n      square: this.square,\n      // Emulate `:disabled` when soft-disabled\n      disabled: this.softDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    if (this.type === 'link') {\n      return html`<a\n        part=\"btn\"\n        class=${classes}\n        href=${this.href}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-haspopup=${ariaHasPopup || nothing}\n        aria-expanded=${ariaExpanded || nothing}\n        aria-disabled=${this.disabled || this.softDisabled || nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        <slot></slot>\n      </a>`;\n    }\n\n    return html`<button\n      part=\"btn\"\n      class=${classes}\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled || nothing}\n      aria-label=${ariaLabel || nothing}\n      aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n      aria-haspopup=${ariaHasPopup || nothing}\n      aria-expanded=${ariaExpanded || nothing}\n      @change=${this.handleChange}>\n      <slot></slot>\n    </button>`;\n  }\n\n  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}

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

@@ -3,7 +3,6 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Directive } from 'lit/directive.js';
 import { type ClassInfo } from 'lit/directives/class-map.js';
 /** Card color configuration types. */
 export type CardColor = 'elevated' | 'filled' | 'outlined';
@@ -43,14 +42,6 @@ export interface CardClassesState {
  * @return An object of class names and truthy values if they apply.
  */
 export declare function cardClasses({ color, interactive, hover, focus, disabled, }?: CardClassesState): ClassInfo;
-/** The state provided to the `card()` directive. */
-export interface CardDirectiveState extends CardClassesState {
-    /** Additional classes to apply to the element. */
-    classes?: ClassInfo;
-}
-declare class CardDirective extends Directive {
-    render(state?: CardDirectiveState): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
-}
 /**
  * A Lit directive that adds card styling and functionality to its element.
  *
@@ -63,5 +54,4 @@ declare class CardDirective extends Directive {
  * `
  * ```
  */
-export declare const card: (state?: CardDirectiveState) => import("lit-html/directive.js").DirectiveResult<typeof CardDirective>;
-export {};
+export declare const card: (state?: CardClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -3,10 +3,9 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { FOCUS_RING_CLASSES } from '@material/web/labs/gb/components/focus/focus-ring.js';
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import { Directive, directive } from 'lit/directive.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { FOCUS_RING_CLASSES } from '../focus/focus-ring.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
 /** Card color configurations. */
 export const CARD_COLORS = {
     elevated: 'elevated',
@@ -41,14 +40,6 @@ export function cardClasses({ color, interactive = false, hover = false, focus =
         [CARD_CLASSES.disabled]: disabled,
     };
 }
-class CardDirective extends Directive {
-    render(state = {}) {
-        return classMap({
-            ...(state.classes || {}),
-            ...cardClasses(state),
-        });
-    }
-}
 /**
  * A Lit directive that adds card styling and functionality to its element.
  *
@@ -61,5 +52,7 @@ class CardDirective extends Directive {
  * `
  * ```
  */
-export const card = directive(CardDirective);
+export const card = createClassMapDirective({
+    getClasses: cardClasses,
+});
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,kBAAkB,EAAC,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AACzF,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAC,QAAQ,EAAiB,MAAM,6BAA6B,CAAC;AAKrE,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;CACZ,CAAC;AAEX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,MACI,EAAE;IACtB,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,WAAW;QAChD,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,QAAQ;QAC3D,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,MAAM;QACvD,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,QAAQ,IAAI,CAAC,KAAK;QACrE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK;QAC3B,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK;QAC3B,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ;KAClC,CAAC;AACJ,CAAC;AAQD,MAAM,aAAc,SAAQ,SAAS;IACnC,MAAM,CAAC,QAA4B,EAAE;QACnC,OAAO,QAAQ,CAAC;YACd,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;YACxB,GAAG,WAAW,CAAC,KAAK,CAAC;SACtB,CAAC,CAAC;IACL,CAAC;CACF;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {FOCUS_RING_CLASSES} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {Directive, directive} from 'lit/directive.js';\nimport {classMap, type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Card color configuration types. */\nexport type CardColor = 'elevated' | 'filled' | 'outlined';\n\n/** Card color configurations. */\nexport const CARD_COLORS = {\n  elevated: 'elevated',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\n/** Card classes. */\nexport const CARD_CLASSES = {\n  card: 'card',\n  cardElevated: 'card-elevated',\n  cardFilled: 'card-filled',\n  cardOutlined: 'card-outlined',\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `cardClasses()` function. */\nexport interface CardClassesState {\n  /** The color of the card. */\n  color?: CardColor;\n  /** Whether the card is interactive. */\n  interactive?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the card classes to apply to an element based on the given state.\n *\n * @param state The state of the card.\n * @return An object of class names and truthy values if they apply.\n */\nexport function cardClasses({\n  color,\n  interactive = false,\n  hover = false,\n  focus = false,\n  disabled = false,\n}: CardClassesState = {}): ClassInfo {\n  return {\n    [FOCUS_RING_CLASSES.focusRingOuter]: interactive,\n    [CARD_CLASSES.card]: true,\n    [CARD_CLASSES.cardElevated]: color === CARD_COLORS.elevated,\n    [CARD_CLASSES.cardFilled]: color === CARD_COLORS.filled,\n    [CARD_CLASSES.cardOutlined]: color === CARD_COLORS.outlined || !color,\n    [CARD_CLASSES.hover]: hover,\n    [CARD_CLASSES.focus]: focus,\n    [CARD_CLASSES.disabled]: disabled,\n  };\n}\n\n/** The state provided to the `card()` directive. */\nexport interface CardDirectiveState extends CardClassesState {\n  /** Additional classes to apply to the element. */\n  classes?: ClassInfo;\n}\n\nclass CardDirective extends Directive {\n  render(state: CardDirectiveState = {}) {\n    return classMap({\n      ...(state.classes || {}),\n      ...cardClasses(state),\n    });\n  }\n}\n\n/**\n * A Lit directive that adds card styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"${card({color: 'filled'})} flex flex-row p-4\">\n *     Card content\n *   </div>\n * `\n * ```\n */\nexport const card = directive(CardDirective);\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,kBAAkB,EAAC,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAK3D,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;CACZ,CAAC;AAEX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,MACI,EAAE;IACtB,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,WAAW;QAChD,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,QAAQ;QAC3D,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,MAAM;QACvD,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,QAAQ,IAAI,CAAC,KAAK;QACrE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK;QAC3B,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK;QAC3B,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ;KAClC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;CACxB,CAAC,CAAC","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 {FOCUS_RING_CLASSES} from '../focus/focus-ring.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Card color configuration types. */\nexport type CardColor = 'elevated' | 'filled' | 'outlined';\n\n/** Card color configurations. */\nexport const CARD_COLORS = {\n  elevated: 'elevated',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\n/** Card classes. */\nexport const CARD_CLASSES = {\n  card: 'card',\n  cardElevated: 'card-elevated',\n  cardFilled: 'card-filled',\n  cardOutlined: 'card-outlined',\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `cardClasses()` function. */\nexport interface CardClassesState {\n  /** The color of the card. */\n  color?: CardColor;\n  /** Whether the card is interactive. */\n  interactive?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the card classes to apply to an element based on the given state.\n *\n * @param state The state of the card.\n * @return An object of class names and truthy values if they apply.\n */\nexport function cardClasses({\n  color,\n  interactive = false,\n  hover = false,\n  focus = false,\n  disabled = false,\n}: CardClassesState = {}): ClassInfo {\n  return {\n    [FOCUS_RING_CLASSES.focusRingOuter]: interactive,\n    [CARD_CLASSES.card]: true,\n    [CARD_CLASSES.cardElevated]: color === CARD_COLORS.elevated,\n    [CARD_CLASSES.cardFilled]: color === CARD_COLORS.filled,\n    [CARD_CLASSES.cardOutlined]: color === CARD_COLORS.outlined || !color,\n    [CARD_CLASSES.hover]: hover,\n    [CARD_CLASSES.focus]: focus,\n    [CARD_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * A Lit directive that adds card styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"${card({color: 'filled'})} flex flex-row p-4\">\n *     Card content\n *   </div>\n * `\n * ```\n */\nexport const card = createClassMapDirective({\n  getClasses: cardClasses,\n});\n"]}