@material/web 2.4.2-nightly.2fe7e22.0 → 2.4.2-nightly.5088d91.0

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

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

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

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

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

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

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

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

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

@@ -3,14 +3,14 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { CSSResultOrNative, LitElement } from 'lit';
+import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         /** A Material Design button. */
         'md-button': Button;
     }
 }
-declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/form-submitter.js").FormSubmitter>>;
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
 /**
  * A Material Design button.
  */
@@ -18,6 +18,7 @@ export declare class Button extends baseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
     static styles: CSSResultOrNative[];
+    private hideOutline;
     /**
      * The color of the button.
      */
@@ -69,7 +70,14 @@ export declare class Button extends baseClass {
      * include `_blank` to open in a new tab.
      */
     target: '_blank' | '_parent' | '_self' | '_top' | '';
+    private lastFiredEnabledState?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleSetShowOutline;
+    protected updated(changedProperties: PropertyValues): void;
+    private dispatchSetEnabledEvent;
     protected render(): import("lit-html").TemplateResult<1>;
+    private handleContainerSlotChange;
     private handleChange;
 }
 export {};

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

@@ -4,17 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
-import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
-import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
-import { mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
-import { mixinFormSubmitter } from '@material/web/labs/behaviors/form-submitter.js';
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
-// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
-import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
-// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
+import { mixinElementInternals } from '../../../behaviors/element-internals.js';
+import { mixinFormAssociated } from '../../../behaviors/form-associated.js';
+import { mixinFormSubmitter } from '../../../behaviors/form-submitter.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
+import { hasSlotted } from '../shared/has-slotted.js';
 import buttonStyles from './button.css' with { type: 'css' }; // github-only
 // import buttonStyles from './button.cssresult.js'; // google3-only
 import { button } from './button.js';
@@ -26,6 +27,7 @@ const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixi
 let Button = class Button extends baseClass {
     constructor() {
         super(...arguments);
+        this.hideOutline = false;
         /**
          * The color of the button.
          */
@@ -66,6 +68,10 @@ let Button = class Button extends baseClass {
          * include `_blank` to open in a new tab.
          */
         this.target = '';
+        this.handleSetShowOutline = (event) => {
+            const customEvent = event;
+            this.hideOutline = !customEvent.detail.shown;
+        };
     }
     /**
      * A string indicating the behavior of the button.
@@ -85,6 +91,35 @@ let Button = class Button extends baseClass {
         }
         super.type = type;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('softDisabled')) {
+            this.dispatchSetEnabledEvent();
+        }
+    }
+    dispatchSetEnabledEvent() {
+        const enabled = !(this.disabled || this.softDisabled);
+        if (this.lastFiredEnabledState === enabled)
+            return;
+        const slot = this.shadowRoot?.querySelector('slot[name="container"]');
+        if (slot) {
+            for (const element of slot.assignedElements({ flatten: true })) {
+                element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
+                    detail: { enabled },
+                }));
+            }
+        }
+        this.lastFiredEnabledState = enabled;
+    }
     render() {
         const classes = button({
             color: this.color,
@@ -92,6 +127,9 @@ let Button = class Button extends baseClass {
             square: this.square,
             // Emulate `:disabled` when soft-disabled
             disabled: this.softDisabled,
+            classes: {
+                'btn-hide-outline': this.hideOutline,
+            },
         });
         // Needed for closure conformance
         const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
@@ -108,6 +146,10 @@ let Button = class Button extends baseClass {
         aria-disabled=${this.disabled || this.softDisabled || nothing}
         tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>
         <slot></slot>
+        <slot
+          name="container"
+          ${hasSlotted()}
+          @slotchange=${this.handleContainerSlotChange}></slot>
       </a>`;
         }
         return html `<button
@@ -121,8 +163,22 @@ let Button = class Button extends baseClass {
       aria-expanded=${ariaExpanded || nothing}
       @change=${this.handleChange}>
       <slot></slot>
+      <slot
+        name="container"
+        ${hasSlotted()}
+        @slotchange=${this.handleContainerSlotChange}></slot>
     </button>`;
     }
+    handleContainerSlotChange(event) {
+        const slot = event.target;
+        const enabled = !(this.disabled || this.softDisabled);
+        for (const element of slot.assignedElements({ flatten: true })) {
+            element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));
+            element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
+                detail: { enabled },
+            }));
+        }
+    }
     handleChange(event) {
         this.selected = event.target.ariaPressed === 'true';
         redispatchEvent(this, event);
@@ -140,12 +196,37 @@ Button.styles = [
     css `
       :host {
         display: inline-flex;
+        isolation: isolate;
       }
       .btn {
         flex: 1;
+        position: relative;
+      }
+      .btn:has([name='container'].has-slotted) {
+        background-color: transparent;
+      }
+      .btn.btn-hide-outline {
+        --outline-color: transparent;
+      }
+      slot[name='container'] {
+        display: block;
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        --color: var(--container-color);
+        z-index: -1;
+        transition: inherit;
+      }
+      slot[name='container']::slotted(*) {
+        width: 100%;
+        height: 100%;
       }
     `,
 ];
+__decorate([
+    state()
+], Button.prototype, "hideOutline", void 0);
 __decorate([
     property()
 ], Button.prototype, "color", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAC,eAAe,EAAC,MAAM,mDAAmD,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAC,MAAM,mDAAmD,CAAC;AACxF,OAAO,EAAC,mBAAmB,EAAC,MAAM,iDAAiD,CAAC;AACpF,OAAO,EAAC,kBAAkB,EAAC,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,eAAe,MAAM,uDAAuD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtH,gHAAgH;AAChH,OAAO,YAAY,MAAM,oDAAoD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAChH,0GAA0G;AAC1G,OAAO,YAAY,MAAM,cAAc,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC1E,oEAAoE;AAEpE,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AASnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,kBAAkB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC3E,CAAC;AAEF;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAqBL;;WAEG;QAEH,UAAK,GAA0D,MAAM,CAAC;QAEtE;;WAEG;QACS,SAAI,GAAqC,IAAI,CAAC;QAE1D;;WAEG;QACwB,WAAM,GAAG,KAAK,CAAC;QAsB1C;;;;;;;WAOG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAErB;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;;;WAIG;QACS,aAAQ,GAAG,EAAE,CAAC;QAE1B;;;WAGG;QACS,WAAM,GAAiD,EAAE,CAAC;IA+CxE,CAAC;IAnGC;;;;;;;;OAQG;IAEH,IAAa,IAAI;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IACzC,CAAC;IACD,IAAa,IAAI,CAAC,IAAY;QAC5B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;IACpB,CAAC;IAoCkB,MAAM;QACvB,MAAM,OAAO,GAAG,MAAM,CAAC;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,yCAAyC;YACzC,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC,CAAC;QAEH,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAC,GAAG,IAAuB,CAAC;QACxE,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA;;gBAED,OAAO;eACR,IAAI,CAAC,IAAI;mBACL,IAAI,CAAC,QAAQ,IAAI,OAAO;iBAC1B,IAAI,CAAC,MAAM,IAAI,OAAO;qBAClB,SAAS,IAAI,OAAO;wBACjB,YAAY,IAAI,OAAO;wBACvB,YAAY,IAAI,OAAO;wBACvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO;mBAClD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;WAE1D,CAAC;QACR,CAAC;QAED,OAAO,IAAI,CAAA;;cAED,OAAO;kBACH,IAAI,CAAC,QAAQ;sBACT,IAAI,CAAC,YAAY,IAAI,OAAO;mBAC/B,SAAS,IAAI,OAAO;qBAClB,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBAC/C,YAAY,IAAI,OAAO;sBACvB,YAAY,IAAI,OAAO;gBAC7B,IAAI,CAAC,YAAY;;cAEnB,CAAC;IACb,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,CAAC,QAAQ,GAAI,KAAK,CAAC,MAAsB,CAAC,WAAW,KAAK,MAAM,CAAC;QACrE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;;AAtID,kBAAkB;AACF,wBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,aAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,YAAY;IACZ,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAMF;IADC,QAAQ,EAAE;qCAC2D;AAK1D;IAAX,QAAQ,EAAE;oCAA+C;AAK/B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAgB;AAY1C;IADC,QAAQ,CAAC,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC;kCAG5B;AAiBD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAChD;AAKM;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;wCAAkB;AAKhC;IAAX,QAAQ,EAAE;oCAAW;AAOV;IAAX,QAAQ,EAAE;wCAAe;AAMd;IAAX,QAAQ,EAAE;sCAA2D;AAzF3D,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CAwIlB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ARIAMixinStrict} from '@material/web/internal/aria/aria.js';\nimport {mixinDelegatesAria} from '@material/web/internal/aria/delegate.js';\nimport {redispatchEvent} from '@material/web/internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '@material/web/labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '@material/web/labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '@material/web/labs/behaviors/form-submitter.js';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only\nimport buttonStyles from './button.css' with {type: 'css'}; // github-only\n// import buttonStyles from './button.cssresult.js'; // google3-only\n\nimport {button} from './button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design button. */\n    'md-button': Button;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n */\n@customElement('md-button')\nexport class Button extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * The color of the button.\n   */\n  @property()\n  color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' = 'text';\n\n  /**\n   * The size of the button.\n   */\n  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Changes the shape of the button to be square.\n   */\n  @property({type: Boolean}) square = false;\n\n  /**\n   * A string indicating the behavior of the button.\n   *\n   * - \"submit\" (default): A button that submits its associated form.\n   * - \"reset\": A button that resets its associated form.\n   * - \"button\": A normal button.\n   * - \"toggle\": A toggle button using the `selected` property.\n   * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n   */\n  @property({noAccessor: true})\n  override get type(): string {\n    return this.href ? 'link' : super.type;\n  }\n  override set type(type: string) {\n    if (this.href && type !== 'link') {\n      return;\n    }\n    super.type = type;\n  }\n\n  /**\n   * Whether or not the button is \"soft-disabled\" (disabled but still\n   * focusable).\n   *\n   * Use this when a button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * Whether or not the button is selected, when `type=\"toggle\"`.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the button is used as a link (`href` is set).\n   */\n  @property() download = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected override render() {\n    const classes = button({\n      color: this.color,\n      size: this.size,\n      square: this.square,\n      // Emulate `:disabled` when soft-disabled\n      disabled: this.softDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    if (this.type === 'link') {\n      return html`<a\n        part=\"btn\"\n        class=${classes}\n        href=${this.href}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-haspopup=${ariaHasPopup || nothing}\n        aria-expanded=${ariaExpanded || nothing}\n        aria-disabled=${this.disabled || this.softDisabled || nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        <slot></slot>\n      </a>`;\n    }\n\n    return html`<button\n      part=\"btn\"\n      class=${classes}\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled || nothing}\n      aria-label=${ariaLabel || nothing}\n      aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n      aria-haspopup=${ariaHasPopup || nothing}\n      aria-expanded=${ariaExpanded || nothing}\n      @change=${this.handleChange}>\n      <slot></slot>\n    </button>`;\n  }\n\n  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}
+{"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAC,mBAAmB,EAAC,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAC,kBAAkB,EAAC,MAAM,sCAAsC,CAAC;AAExE,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAE5E,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,YAAY,MAAM,cAAc,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC1E,oEAAoE;AAEpE,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AASnC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,kBAAkB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC3E,CAAC;AAEF;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QA2CY,gBAAW,GAAG,KAAK,CAAC;QAErC;;WAEG;QAEH,UAAK,GAA0D,MAAM,CAAC;QAEtE;;WAEG;QACS,SAAI,GAAqC,IAAI,CAAC;QAE1D;;WAEG;QACwB,WAAM,GAAG,KAAK,CAAC;QAsB1C;;;;;;;WAOG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAErB;;WAEG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;;;WAIG;QACS,aAAQ,GAAG,EAAE,CAAC;QAE1B;;;WAGG;QACS,WAAM,GAAiD,EAAE,CAAC;QAiBrD,yBAAoB,GAAG,CAAC,KAAY,EAAE,EAAE;YACvD,MAAM,WAAW,GAAG,KAAsC,CAAC;YAC3D,IAAI,CAAC,WAAW,GAAG,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC;QAC/C,CAAC,CAAC;IAuGJ,CAAC;IA/KC;;;;;;;;OAQG;IAEH,IAAa,IAAI;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IACzC,CAAC;IACD,IAAa,IAAI,CAAC,IAAY;QAC5B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;IACpB,CAAC;IAsCQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAC7E,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CACtB,wBAAwB,EACxB,IAAI,CAAC,oBAAoB,CAC1B,CAAC;IACJ,CAAC;IAOkB,OAAO,CAAC,iBAAiC;QAC1D,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IACE,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;YACjC,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,EACrC,CAAC;YACD,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,uBAAuB;QAC7B,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QAEtD,IAAI,IAAI,CAAC,qBAAqB,KAAK,OAAO;YAAE,OAAO;QAEnD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACzC,wBAAwB,CACN,CAAC;QACrB,IAAI,IAAI,EAAE,CAAC;YACT,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE,CAAC;gBAC7D,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAC,OAAO,EAAC;iBAClB,CAAC,CACH,CAAC;YACJ,CAAC;QACH,CAAC;QACD,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;IACvC,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG,MAAM,CAAC;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,yCAAyC;YACzC,QAAQ,EAAE,IAAI,CAAC,YAAY;YAC3B,OAAO,EAAE;gBACP,kBAAkB,EAAE,IAAI,CAAC,WAAW;aACrC;SACF,CAAC,CAAC;QAEH,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,YAAY,EAAC,GAAG,IAAuB,CAAC;QACxE,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA;;gBAED,OAAO;eACR,IAAI,CAAC,IAAI;mBACL,IAAI,CAAC,QAAQ,IAAI,OAAO;iBAC1B,IAAI,CAAC,MAAM,IAAI,OAAO;qBAClB,SAAS,IAAI,OAAO;wBACjB,YAAY,IAAI,OAAO;wBACvB,YAAY,IAAI,OAAO;wBACvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO;mBAClD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;;;YAIzD,UAAU,EAAE;wBACA,IAAI,CAAC,yBAAyB;WAC3C,CAAC;QACR,CAAC;QAED,OAAO,IAAI,CAAA;;cAED,OAAO;kBACH,IAAI,CAAC,QAAQ;sBACT,IAAI,CAAC,YAAY,IAAI,OAAO;mBAC/B,SAAS,IAAI,OAAO;qBAClB,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;sBAC/C,YAAY,IAAI,OAAO;sBACvB,YAAY,IAAI,OAAO;gBAC7B,IAAI,CAAC,YAAY;;;;UAIvB,UAAU,EAAE;sBACA,IAAI,CAAC,yBAAyB;cACtC,CAAC;IACb,CAAC;IAEO,yBAAyB,CAAC,KAAY;QAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAE7C,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QAEtD,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE,CAAC;YAC7D,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,6BAA6B,CAAC,CAAC,CAAC;YACtE,OAAO,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,mBAAmB,EAAE;gBACnC,MAAM,EAAE,EAAC,OAAO,EAAC;aAClB,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,CAAC,QAAQ,GAAI,KAAK,CAAC,MAAsB,CAAC,WAAW,KAAK,MAAM,CAAC;QACrE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;;AA1OD,kBAAkB;AACF,wBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,aAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,YAAY;IACZ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BF;CACF,AAlCqB,CAkCpB;AAEe;IAAhB,KAAK,EAAE;2CAA6B;AAMrC;IADC,QAAQ,EAAE;qCAC2D;AAK1D;IAAX,QAAQ,EAAE;oCAA+C;AAK/B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAgB;AAY1C;IADC,QAAQ,CAAC,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC;kCAG5B;AAiBD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAChD;AAKM;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;wCAAkB;AAKhC;IAAX,QAAQ,EAAE;oCAAW;AAOV;IAAX,QAAQ,EAAE;wCAAe;AAMd;IAAX,QAAQ,EAAE;sCAA2D;AAjH3D,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CA4OlB","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 {customElement, 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 {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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design button. */\n    'md-button': Button;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n */\n@customElement('md-button')\nexport class Button extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    css`\n      :host {\n        display: inline-flex;\n        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      }\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  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=${this.href}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-haspopup=${ariaHasPopup || nothing}\n        aria-expanded=${ariaExpanded || nothing}\n        aria-disabled=${this.disabled || this.softDisabled || nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        <slot></slot>\n        <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/card/card.d.ts

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

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

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

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

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

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

@@ -3,7 +3,7 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { CSSResultOrNative, LitElement } from 'lit';
+import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
 import { type CardColor } from './card.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -19,12 +19,20 @@ export declare class Card extends baseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
     static styles: CSSResultOrNative[];
+    private hideOutline;
+    private lastFiredEnabledState?;
     /** The color of the card. */
     color: CardColor;
     /** Whether the card is disabled. */
     disabled: boolean;
     /** Whether the card is interactive. */
     interactive: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleSetShowOutline;
+    protected updated(changedProperties: PropertyValues): void;
+    private dispatchSetEnabledEvent;
     protected render(): import("lit-html").TemplateResult<1>;
+    private handleContainerSlotChange;
 }
 export {};