@material/web 2.5.1-nightly.56a486b.0 → 2.5.1-nightly.703aed2.0

package/labs/aria/pseudo-classes.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Returns whether the element is disabled.
+ *
+ * Checks if the element matches any of the following:
+ * - `.disabled` class
+ * - `:disabled` pseudo-class
+ * - `:state(disabled)` pseudo-class
+ * - `[disabled]` attribute
+ * - `[aria-disabled=true]` attribute
+ *
+ * @param element The element to check.
+ * @return true if the element is disabled.
+ */
+export function isDisabled(element) {
+    return element.matches('.disabled,:disabled,:state(disabled),[disabled],[aria-disabled=true]');
+}
+//# sourceMappingURL=pseudo-classes.js.map

package/labs/aria/pseudo-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo-classes.js","sourceRoot":"","sources":["pseudo-classes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB;IACzC,OAAO,OAAO,CAAC,OAAO,CACpB,sEAAsE,CACvE,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Returns whether the element is disabled.\n *\n * Checks if the element matches any of the following:\n * - `.disabled` class\n * - `:disabled` pseudo-class\n * - `:state(disabled)` pseudo-class\n * - `[disabled]` attribute\n * - `[aria-disabled=true]` attribute\n *\n * @param element The element to check.\n * @return true if the element is disabled.\n */\nexport function isDisabled(element: Element): boolean {\n  return element.matches(\n    '.disabled,:disabled,:state(disabled),[disabled],[aria-disabled=true]',\n  );\n}\n"]}

package/labs/aria/tabs/tab.js

@@ -46,9 +46,14 @@ export class AriaTabElement extends baseClass {
         return this[internals].ariaSelected === 'true';
     }
     set selected(value) {
+        const oldValue = this.selected;
         value = Boolean(value); // coerce for safety
         this[internals].ariaSelected = String(value);
         this[toggleState]('selected', value);
+        // Request update manually for Lit 2 compatibility, where user-defined
+        // accessors are not automatically wrapped by createProperty().
+        // May be removed once Lit 2 is no longer supported.
+        this.requestUpdate('selected', oldValue);
     }
     constructor() {
         super();

package/labs/aria/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.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, CSSResultGroup, html, isServer, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../internal/events/dispatch-hooks.js';\nimport {queryAssociatedById} from '../../aria/query-associated.js';\nimport {\n  mixinCustomStateSet,\n  toggleState,\n} from '../../behaviors/custom-state-set.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../behaviors/focusable.js';\n\nconst baseClass = mixinFocusable(\n  mixinCustomStateSet(mixinElementInternals(LitElement)),\n);\n\n/**\n * An ARIA tab element.\n *\n * @cssstate selected - Whether the tab is selected.\n */\nexport class AriaTabElement extends baseClass {\n  static override styles: CSSResultGroup = css`\n    :host {\n      display: inline-block;\n      cursor: pointer;\n    }\n  `;\n\n  /**\n   * ID of the associated `md-aria-tabpanel` element.\n   */\n  @property({type: String, reflect: true, noAccessor: true})\n  get tabpanel(): string {\n    return this.tabpanelElement?.id || '';\n  }\n  set tabpanel(value: string) {\n    this.tabpanelElement = queryAssociatedById(this, value);\n  }\n\n  /**\n   * The tabpanel element that is controlled by this tab.\n   */\n  get tabpanelElement(): Element | null {\n    return this[internals].ariaControlsElements?.[0] || null;\n  }\n  set tabpanelElement(value: Element | null) {\n    const previousValue = this.tabpanelElement;\n    if (value === previousValue) return;\n    this[internals].ariaControlsElements = value ? [value] : [];\n  }\n\n  /**\n   * Whether the tab is selected.\n   */\n  @property({type: Boolean, reflect: true})\n  get selected(): boolean {\n    return this[internals].ariaSelected === 'true';\n  }\n  set selected(value: boolean) {\n    value = Boolean(value); // coerce for safety\n    this[internals].ariaSelected = String(value);\n    this[toggleState]('selected', value);\n  }\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'tab';\n    setupDispatchHooks(this, 'keydown');\n    this.addEventListener('keydown', (event: KeyboardEvent) => {\n      afterDispatch(event, () => {\n        if (event.defaultPrevented) {\n          return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n          // Prevent default behavior such as scrolling when pressing spacebar.\n          event.preventDefault();\n          this.click();\n        }\n      });\n    });\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.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, CSSResultGroup, html, isServer, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../internal/events/dispatch-hooks.js';\nimport {queryAssociatedById} from '../../aria/query-associated.js';\nimport {\n  mixinCustomStateSet,\n  toggleState,\n} from '../../behaviors/custom-state-set.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../behaviors/focusable.js';\n\nconst baseClass = mixinFocusable(\n  mixinCustomStateSet(mixinElementInternals(LitElement)),\n);\n\n/**\n * An ARIA tab element.\n *\n * @cssstate selected - Whether the tab is selected.\n */\nexport class AriaTabElement extends baseClass {\n  static override styles: CSSResultGroup = css`\n    :host {\n      display: inline-block;\n      cursor: pointer;\n    }\n  `;\n\n  /**\n   * ID of the associated `md-aria-tabpanel` element.\n   */\n  @property({type: String, reflect: true, noAccessor: true})\n  get tabpanel(): string {\n    return this.tabpanelElement?.id || '';\n  }\n  set tabpanel(value: string) {\n    this.tabpanelElement = queryAssociatedById(this, value);\n  }\n\n  /**\n   * The tabpanel element that is controlled by this tab.\n   */\n  get tabpanelElement(): Element | null {\n    return this[internals].ariaControlsElements?.[0] || null;\n  }\n  set tabpanelElement(value: Element | null) {\n    const previousValue = this.tabpanelElement;\n    if (value === previousValue) return;\n    this[internals].ariaControlsElements = value ? [value] : [];\n  }\n\n  /**\n   * Whether the tab is selected.\n   */\n  @property({type: Boolean, reflect: true})\n  get selected(): boolean {\n    return this[internals].ariaSelected === 'true';\n  }\n  set selected(value: boolean) {\n    const oldValue = this.selected;\n    value = Boolean(value); // coerce for safety\n    this[internals].ariaSelected = String(value);\n    this[toggleState]('selected', value);\n    // Request update manually for Lit 2 compatibility, where user-defined\n    // accessors are not automatically wrapped by createProperty().\n    // May be removed once Lit 2 is no longer supported.\n    this.requestUpdate('selected', oldValue);\n  }\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'tab';\n    setupDispatchHooks(this, 'keydown');\n    this.addEventListener('keydown', (event: KeyboardEvent) => {\n      afterDispatch(event, () => {\n        if (event.defaultPrevented) {\n          return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n          // Prevent default behavior such as scrolling when pressing spacebar.\n          event.preventDefault();\n          this.click();\n        }\n      });\n    });\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/labs/gb/components/appbar/app-bar.css

@@ -1,4 +1,4 @@
 /*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}/*# sourceMappingURL=app-bar.css.map */
+ */@layer md.sys;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);-webkit-font-smoothing:antialiased;transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}/*# sourceMappingURL=app-bar.css.map */

package/labs/gb/components/appbar/app-bar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["app-bar.scss","_app-bar-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEE,SCGA,oBAEA,+CAEA,wDAEA,yBAEA,mDAEA,2CAEA,kBACA,oBACA,yBACA,6BACA,qBAEA,qDAEA,wCAEA,6CAEA,uDAEA,yDAEA,+DAEA,0CAEA,oDAEA,8CAEA,4DAEA,8DAEA,yCDxCA,YC8CA,0BAEA,6CAEA,uDAEA,+DAEA,6CAEA,uDAEA,+DDvDA,YC4DA,0BAEA,6CAEA,uDAEA,+DAEA,4CAEA,sDAEA,8DDrEA,uBC0EA,0BDvEA,kCC4EA,0BDzEA,gBC8EA,yDAEA,yBAEA,mDAEA,8CAEA,wDAEA,gEAEA,sDAEA,yCAEA,0CD3FA,kBCgGA,yDAEA,wDD/FA,iCCoGA,iED/FA,SACE,sBACA,aACA,kBACA,WACA,mCACA,wCACA,qCACA,sCACA,yBACA,WACE,wEAGF,0DAIF,4BAEE,mBACA,mBACA,8BAIF,wBAEE,sBACA,8BACA,oBAEA,0DACE,aACA,mBACA,mBACA,8BACA,gBACA,WAGF,gEACE,aACA,sBACA,yBACA,oBACA,oBACA,cACA,aAKJ,mCAEE,aACA,mBACA,6BACA,cAGF,iBACE,gCAGF,kBACE,iCAGF,uBACE,aACA,sBACA,uBACA,cACA,YACA,gBAGF,mCACE,kBAGF,eACE,SACA,kBACA,0CACA,qCACA,yBACA,mBACA,gBACA,uBAEA,4BACE,SACA,aACA,gCACA,uBACA,cAIJ,kBACE,SACA,eACA,qBACA,6CACA,wCACA,4BACA,mBACA,gBACA,uBAEA,+BACE,SACA,aACA,gCACA,uBACA,cAIJ,0BACE,aACA,cACA,mBACA,YACA","file":"app-bar.css"}
+{"version":3,"sourceRoot":"","sources":["app-bar.scss","_app-bar-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEE,SCGA,oBAEA,+CAEA,wDAEA,yBAEA,mDAEA,2CAEA,kBACA,oBACA,yBACA,6BACA,qBAEA,qDAEA,wCAEA,6CAEA,uDAEA,yDAEA,+DAEA,0CAEA,oDAEA,8CAEA,4DAEA,8DAEA,yCDxCA,YC8CA,0BAEA,6CAEA,uDAEA,+DAEA,6CAEA,uDAEA,+DDvDA,YC4DA,0BAEA,6CAEA,uDAEA,+DAEA,4CAEA,sDAEA,8DDrEA,uBC0EA,0BDvEA,kCC4EA,0BDzEA,gBC8EA,yDAEA,yBAEA,mDAEA,8CAEA,wDAEA,gEAEA,sDAEA,yCAEA,0CD3FA,kBCgGA,yDAEA,wDD/FA,iCCoGA,iED/FA,SACE,sBACA,aACA,kBACA,WACA,mCACA,wCACA,qCACA,sCACA,yBACA,mCACA,WACE,wEAGF,0DAIF,4BAEE,mBACA,mBACA,8BAIF,wBAEE,sBACA,8BACA,oBAEA,0DACE,aACA,mBACA,mBACA,8BACA,gBACA,WAGF,gEACE,aACA,sBACA,yBACA,oBACA,oBACA,cACA,aAKJ,mCAEE,aACA,mBACA,6BACA,cAGF,iBACE,gCAGF,kBACE,iCAGF,uBACE,aACA,sBACA,uBACA,cACA,YACA,gBAGF,mCACE,kBAGF,eACE,SACA,kBACA,0CACA,qCACA,yBACA,mBACA,gBACA,uBAEA,4BACE,SACA,aACA,gCACA,uBACA,cAIJ,kBACE,SACA,eACA,qBACA,6CACA,wCACA,4BACA,mBACA,gBACA,uBAEA,+BACE,SACA,aACA,gCACA,uBACA,cAIJ,0BACE,aACA,cACA,mBACA,YACA","file":"app-bar.css"}

package/labs/gb/components/appbar/app-bar.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;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}
+ */@layer md.sys;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);-webkit-font-smoothing:antialiased;transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}
 `;
 export default styles.styleSheet;
 //# sourceMappingURL=app-bar.cssresult.js.map

package/labs/gb/components/appbar/app-bar.cssresult.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-bar.cssresult.js","sourceRoot":"","sources":["app-bar.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oEAAoE;AACpE,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/appbar/app-bar.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;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}\n`;\nexport default styles.styleSheet!;\n"]}
+{"version":3,"file":"app-bar.cssresult.js","sourceRoot":"","sources":["app-bar.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oEAAoE;AACpE,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/appbar/app-bar.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;@layer md.comp.app-bar{.app-bar{--avatar-size: 32px;--container-color: var(--md-sys-color-surface);--container-elevation: var(--md-sys-elevation-shadow-0);--container-height: 64px;--container-shape: var(--md-sys-shape-corner-none);--icon-button-space: var(--md-sys-space-0);--icon-size: 24px;--label-text: unset;--label-text-axes: unset;--label-text-tracking: unset;--label-color: unset;--leading-icon-color: var(--md-sys-color-on-surface);--leading-space: var(--md-sys-space-50);--subtitle: var(--md-sys-typescale-label-md);--subtitle-axes: var(--md-sys-typescale-label-md-axes);--subtitle-color: var(--md-sys-color-on-surface-variant);--subtitle-tracking: var(--md-sys-typescale-label-md-tracking);--title: var(--md-sys-typescale-title-lg);--title-axes: var(--md-sys-typescale-title-lg-axes);--title-color: var(--md-sys-color-on-surface);--title-tracking: var(--md-sys-typescale-title-lg-tracking);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-space: var(--md-sys-space-50)}.app-bar-md{--container-height: 112px;--subtitle: var(--md-sys-typescale-label-lg);--subtitle-axes: var(--md-sys-typescale-label-lg-axes);--subtitle-tracking: var(--md-sys-typescale-label-lg-tracking);--title: var(--md-sys-typescale-headline-md);--title-axes: var(--md-sys-typescale-headline-md-axes);--title-tracking: var(--md-sys-typescale-headline-md-tracking)}.app-bar-lg{--container-height: 120px;--subtitle: var(--md-sys-typescale-title-md);--subtitle-axes: var(--md-sys-typescale-title-md-axes);--subtitle-tracking: var(--md-sys-typescale-title-md-tracking);--title: var(--md-sys-typescale-display-sm);--title-axes: var(--md-sys-typescale-display-sm-axes);--title-tracking: var(--md-sys-typescale-display-sm-tracking)}.app-bar-with-subtitle{--container-height: 136px}.app-bar-with-subtitle.app-bar-lg{--container-height: 152px}.app-bar-search{--container-color: var(--md-sys-color-surface-container);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-full);--label-text: var(--md-sys-typescale-body-lg);--label-text-axes: var(--md-sys-typescale-body-lg-axes);--label-text-tracking: var(--md-sys-typescale-body-lg-tracking);--label-color: var(--md-sys-color-on-surface-variant);--leading-space: var(--md-sys-space-100);--trailing-space: var(--md-sys-space-100)}.app-bar-scrolled{--container-color: var(--md-sys-color-surface-container);--container-elevation: var(--md-sys-elevation-shadow-2)}.app-bar-scrolled.app-bar-search{--container-color: var(--md-sys-color-surface-container-highest)}.app-bar{box-sizing:border-box;display:flex;position:relative;width:100%;min-height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--title-color);-webkit-font-smoothing:antialiased;transition:background-color 200ms ease,box-shadow 200ms ease,min-height 200ms ease;padding-inline:var(--leading-space) var(--trailing-space)}.app-bar-sm,.app-bar-search{flex-direction:row;align-items:center;justify-content:space-between}.app-bar-md,.app-bar-lg{flex-direction:column;justify-content:space-between;align-items:stretch}.app-bar-md .app-bar-top-row,.app-bar-lg .app-bar-top-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:64px;width:100%}.app-bar-md .app-bar-bottom-row,.app-bar-lg .app-bar-bottom-row{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;padding-inline:12px;flex:1 1 auto;min-height:0}.app-bar-leading,.app-bar-trailing{display:flex;align-items:center;gap:var(--icon-button-space);flex-shrink:0}.app-bar-leading{color:var(--leading-icon-color)}.app-bar-trailing{color:var(--trailing-icon-color)}.app-bar-title-wrapper{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;overflow:hidden}.app-bar-sm .app-bar-title-wrapper{margin-inline:4px}.app-bar-title{margin:0;font:var(--title);font-variation-settings:var(--title-axes);letter-spacing:var(--title-tracking);color:var(--title-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-title ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-subtitle{margin:0;margin-top:2px;font:var(--subtitle);font-variation-settings:var(--subtitle-axes);letter-spacing:var(--subtitle-tracking);color:var(--subtitle-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-bar-subtitle ::slotted(*){margin:0;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit}.app-bar-search-container{display:flex;flex:1 1 auto;align-items:center;min-width:0;margin-inline:8px}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/appbar/app-bar.scss

@@ -46,6 +46,7 @@
     border-radius: var(--container-shape);
     box-shadow: var(--container-elevation);
     color: var(--title-color);
+    -webkit-font-smoothing: antialiased;
     transition:
       background-color 200ms ease,
       box-shadow 200ms ease,

package/labs/gb/components/badge/badge.css

@@ -1,4 +1,4 @@
 /*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}/*# sourceMappingURL=badge.css.map */
+ */@layer md.sys;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box;-webkit-font-smoothing:antialiased}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}/*# sourceMappingURL=badge.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["badge.scss","_badge-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,qBAEI,OCNF,6CACA,yCACA,YACA,iDACA,+CACA,iEACA,yDDIE,OACE,oBACA,mBACA,uBACA,wCACA,2BACA,mBACA,kBACA,sBAEA,YACE,aAKJ,mBChBF,aDkBI,WACA,sBACA,cAEA,8BACA,uBACA,0CACA,+CAEA,wBACE","file":"badge.css"}
+{"version":3,"sourceRoot":"","sources":["badge.scss","_badge-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,qBAEI,OCNF,6CACA,yCACA,YACA,iDACA,+CACA,iEACA,yDDIE,OACE,oBACA,mBACA,uBACA,wCACA,2BACA,mBACA,kBACA,sBACA,mCAEA,YACE,aAKJ,mBCjBF,aDmBI,WACA,sBACA,cAEA,8BACA,uBACA,0CACA,+CAEA,wBACE","file":"badge.css"}

package/labs/gb/components/badge/badge.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;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}
+ */@layer md.sys;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box;-webkit-font-smoothing:antialiased}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}
 `;
 export default styles.styleSheet;
 //# sourceMappingURL=badge.cssresult.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.cssresult.js","sourceRoot":"","sources":["badge.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iEAAiE;AACjE,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/badge/badge.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;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}\n`;\nexport default styles.styleSheet!;\n"]}
+{"version":3,"file":"badge.cssresult.js","sourceRoot":"","sources":["badge.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iEAAiE;AACjE,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/badge/badge.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;@layer md.comp.badge{.badge{--container-color: var(--md-sys-color-error);--shape: var(--md-sys-shape-corner-full);--size: 6px;--label-text-color: var(--md-sys-color-on-error);--label-text: var(--md-sys-typescale-label-sm);--label-text-tracking: var(--md-sys-typescale-label-sm-tracking);--label-text-axes: var(--md-sys-typescale-label-sm-axes)}.badge{display:inline-flex;align-items:center;justify-content:center;background-color:var(--container-color);border-radius:var(--shape);height:var(--size);width:var(--size);box-sizing:border-box;-webkit-font-smoothing:antialiased}.badge slot{display:none}.badge.badge-large{--size: 16px;width:auto;min-width:var(--size);padding:0 4px;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes)}.badge.badge-large slot{display:contents}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/badge/badge.scss

@@ -23,6 +23,7 @@
       height: var(--size);
       width: var(--size);
       box-sizing: border-box;
+      -webkit-font-smoothing: antialiased;
 
       slot {
         display: none;

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

@@ -71,6 +71,8 @@ export declare class ButtonElement extends baseClass {
     softDisabled: boolean;
     /**
      * Whether or not the button is selected, when `type="toggle"`.
+     *
+     * TODO: replace reflected `[selected]` with `:state(selected)`
      */
     selected: boolean;
     /**

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

@@ -75,6 +75,8 @@ export class ButtonElement extends baseClass {
         this.softDisabled = false;
         /**
          * Whether or not the button is selected, when `type="toggle"`.
+         *
+         * TODO: replace reflected `[selected]` with `:state(selected)`
          */
         this.selected = false;
         /**
@@ -159,6 +161,7 @@ export class ButtonElement extends baseClass {
             color: this.color,
             size: this.size,
             square: this.square,
+            selected: this.type === 'toggle' ? this.selected : undefined,
             // Emulate `:disabled` when soft-disabled
             disabled: this.softDisabled,
             classes: {
@@ -232,9 +235,19 @@ ButtonElement.styles = [
     buttonStyles,
     css `
       :host {
+        --md-icon-fill: 1;
         display: inline-flex;
         isolation: isolate;
       }
+
+      :host([type='toggle']:not([selected])) {
+        --md-icon-fill: 0;
+      }
+
+      :host([type='toggle'][selected]) {
+        --md-icon-fill: 1;
+      }
+
       .btn {
         flex: 1;
         position: relative;
@@ -275,13 +288,13 @@ __decorate([
     property({ type: Boolean })
 ], ButtonElement.prototype, "square", void 0);
 __decorate([
-    property({ noAccessor: true })
+    property({ noAccessor: true, reflect: true })
 ], ButtonElement.prototype, "type", null);
 __decorate([
     property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
 ], ButtonElement.prototype, "softDisabled", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], ButtonElement.prototype, "selected", void 0);
 __decorate([
     property()

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

@@ -1 +1 @@
-{"version":3,"file":"button-element.js","sourceRoot":"","sources":["button-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 {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\n\nimport {safeHref} from '../../../../internal/directives/safe-href.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\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\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n *\n * @slot - Used to display a label and optional icon.\n * @slot container - Used to set a custom background container for the button.\n * @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles\n * @csspart btn - The button's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-label-space\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-axes\n * @cssprop --label-text-color\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --md-icon-fill\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --trailing-space\n */\nexport class ButtonElement 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    buttonStyles,\n    css`\n      :host {\n        display: inline-flex;\n        isolation: isolate;\n      }\n      .btn {\n        flex: 1;\n        position: relative;\n      }\n      .btn:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .btn.btn-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  /**\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  /**\n   * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is\n   * set.\n   */\n  @property() rel = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when\n   * `href` is set.\n   */\n  @property() referrerPolicy = '';\n\n  private lastFiredEnabledState?: boolean;\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 (\n      changedProperties.has('disabled') ||\n      changedProperties.has('softDisabled')\n    ) {\n      this.dispatchSetEnabledEvent();\n    }\n  }\n\n  private dispatchSetEnabledEvent() {\n    const enabled = !(this.disabled || this.softDisabled);\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 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      classes: {\n        'btn-hide-outline': this.hideOutline,\n      },\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=${safeHref(this.href)}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        rel=${this.rel || nothing}\n        referrerpolicy=${this.referrerPolicy || 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        <slot\n          name=\"container\"\n          ${hasSlotted()}\n          @slotchange=${this.handleContainerSlotChange}></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      <slot\n        name=\"container\"\n        ${hasSlotted()}\n        @slotchange=${this.handleContainerSlotChange}></slot>\n    </button>`;\n  }\n\n  private handleContainerSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    const enabled = !(this.disabled || this.softDisabled);\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  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}
+{"version":3,"file":"button-element.js","sourceRoot":"","sources":["button-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 {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\n\nimport {safeHref} from '../../../../internal/directives/safe-href.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\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\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n *\n * @slot - Used to display a label and optional icon.\n * @slot container - Used to set a custom background container for the button.\n * @fires {InputEvent} input - Fired when a toggle button is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles\n * @csspart btn - The button's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-label-space\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-axes\n * @cssprop --label-text-color\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --md-icon-fill\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --trailing-space\n */\nexport class ButtonElement 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    buttonStyles,\n    css`\n      :host {\n        --md-icon-fill: 1;\n        display: inline-flex;\n        isolation: isolate;\n      }\n\n      :host([type='toggle']:not([selected])) {\n        --md-icon-fill: 0;\n      }\n\n      :host([type='toggle'][selected]) {\n        --md-icon-fill: 1;\n      }\n\n      .btn {\n        flex: 1;\n        position: relative;\n      }\n      .btn:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .btn.btn-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  /**\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, reflect: 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   * TODO: replace reflected `[selected]` with `:state(selected)`\n   */\n  @property({type: Boolean, reflect: true}) 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  /**\n   * Sets the underlying `HTMLAnchorElement`'s `rel` attribute when `href` is\n   * set.\n   */\n  @property() rel = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `referrerpolicy` attribute when\n   * `href` is set.\n   */\n  @property() referrerPolicy = '';\n\n  private lastFiredEnabledState?: boolean;\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 (\n      changedProperties.has('disabled') ||\n      changedProperties.has('softDisabled')\n    ) {\n      this.dispatchSetEnabledEvent();\n    }\n  }\n\n  private dispatchSetEnabledEvent() {\n    const enabled = !(this.disabled || this.softDisabled);\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 classes = button({\n      color: this.color,\n      size: this.size,\n      square: this.square,\n      selected: this.type === 'toggle' ? this.selected : undefined,\n      // Emulate `:disabled` when soft-disabled\n      disabled: this.softDisabled,\n      classes: {\n        'btn-hide-outline': this.hideOutline,\n      },\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=${safeHref(this.href)}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        rel=${this.rel || nothing}\n        referrerpolicy=${this.referrerPolicy || 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        <slot\n          name=\"container\"\n          ${hasSlotted()}\n          @slotchange=${this.handleContainerSlotChange}></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      <slot\n        name=\"container\"\n        ${hasSlotted()}\n        @slotchange=${this.handleContainerSlotChange}></slot>\n    </button>`;\n  }\n\n  private handleContainerSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    const enabled = !(this.disabled || this.softDisabled);\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  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}

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-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);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,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,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-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);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-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);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.scss

@@ -117,6 +117,7 @@
       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/buttongroup/_button-group-tokens.scss

@@ -0,0 +1,123 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --between-space: 8px;
+  --pressed-item-width-multiplier: 1.15;
+  --motion-spring-fast-spatial: linear(
+    0,
+    0.099,
+    0.317,
+    0.561,
+    0.775,
+    0.934,
+    1.034,
+    1.083,
+    1.095,
+    1.084,
+    1.063,
+    1.04,
+    1.02,
+    1.005,
+    0.996,
+    0.992,
+    0.991,
+    0.992,
+    0.994,
+    0.996,
+    1
+  );
+  --motion-spring-fast-spatial-duration: 350ms;
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+  --pressed-inner-corner-size: var(--md-sys-shape-corner-xs);
+  --outer-corner-size: calc(var(--container-height) / 2);
+  --outer-corner-square-size: var(--md-sys-shape-corner-sm);
+  // LINT.ThenChange(button-group-element.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin standard-xs {
+  --between-space: 18px;
+}
+
+@mixin standard-sm {
+  --between-space: 12px;
+}
+
+@mixin standard-md {
+  --between-space: 8px;
+}
+
+@mixin standard-lg {
+  --between-space: 8px;
+}
+
+@mixin standard-xl {
+  --between-space: 8px;
+}
+
+@mixin connected {
+  --between-space: 2px;
+}
+
+@mixin inner-corner-xs {
+  // Design override of GM3 v35: inner corners for XS are 4px (corner-xs)
+  --inner-corner-size: var(--md-sys-shape-corner-xs);
+  --pressed-inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin inner-corner-sm {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+  --pressed-inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin inner-corner-md {
+  --inner-corner-size: var(--md-sys-shape-corner-sm);
+  --pressed-inner-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin inner-corner-lg {
+  --inner-corner-size: var(--md-sys-shape-corner-lg);
+  --pressed-inner-corner-size: var(--md-sys-shape-corner-md);
+}
+
+@mixin inner-corner-xl {
+  --inner-corner-size: var(--md-sys-shape-corner-lg-increased);
+  --pressed-inner-corner-size: var(--md-sys-shape-corner-lg);
+}
+
+@mixin outer-corner-round {
+  --outer-corner-size: calc(var(--container-height) / 2);
+}
+
+@mixin outer-corner-square-xs {
+  // Design override of GM3 v35: outer corner square XS is 4px (corner-xs)
+  --outer-corner-square-size: var(--md-sys-shape-corner-xs);
+  --outer-corner-size: var(--md-sys-shape-corner-xs);
+}
+
+@mixin outer-corner-square-sm {
+  // Design override of GM3 v35: outer corner square SM is 8px (corner-sm)
+  --outer-corner-square-size: var(--md-sys-shape-corner-sm);
+  --outer-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin outer-corner-square-md {
+  // Design override of GM3 v35: outer corner square MD is 8px (corner-sm)
+  --outer-corner-square-size: var(--md-sys-shape-corner-sm);
+  --outer-corner-size: var(--md-sys-shape-corner-sm);
+}
+
+@mixin outer-corner-square-lg {
+  // Design override of GM3 v35: outer corner square LG is 16px (corner-lg)
+  --outer-corner-square-size: var(--md-sys-shape-corner-lg);
+  --outer-corner-size: var(--md-sys-shape-corner-lg);
+}
+
+@mixin outer-corner-square-xl {
+  // Design override of GM3 v35: outer corner square XL is 20px (corner-lg-increased)
+  --outer-corner-square-size: var(--md-sys-shape-corner-lg-increased);
+  --outer-corner-size: var(--md-sys-shape-corner-lg-increased);
+}