@material/web 2.4.2-nightly.f6c1871.0 → 2.4.2-nightly.fd17013.0

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

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

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

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

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

@@ -54,4 +54,4 @@ export declare function cardClasses({ color, interactive, hover, focus, disabled
  * `
  * ```
  */
-export declare const card: (state?: CardClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+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,9 +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 { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.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',

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,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAC9F,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAMzF,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 {FOCUS_RING_CLASSES} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {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/**\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"]}
+{"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.js

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
-import { ripple } from '@material/web/labs/gb/components/ripple/ripple.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
-// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
-import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
-// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { ripple } from '../ripple/ripple.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 cardStyles from './card.css' with { type: 'css' }; // github-only
 // import cardStyles from './card.cssresult.js'; // google3-only
 import { card } from './card.js';

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

@@ -1 +1 @@
-{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAC,MAAM,EAAC,MAAM,mDAAmD,CAAC;AACzE,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,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,gEAAgE;AAEhE,OAAO,EAAiB,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/C,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEjD;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAA5B;;QAqBL,6BAA6B;QACjB,UAAK,GAAc,UAAU,CAAC;QAE1C,oCAAoC;QACT,aAAQ,GAAG,KAAK,CAAC;QAE5C,uCAAuC;QACZ,gBAAW,GAAG,KAAK,CAAC;IAsBjD,CAAC;IApBoB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QACA,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;cAGA,MAAM,EAAE;yBACG,IAAI,CAAC,QAAQ;0BACZ,SAAS,IAAI,OAAO,aAAa;YACnD,CAAC,CAAC,OAAO;;WAEN,CAAC;IACV,CAAC;;AAhDD,kBAAkB;AACF,sBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,WAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAGU;IAAX,QAAQ,EAAE;mCAA+B;AAGf;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAGjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAqB;AA5BpC,IAAI;IADhB,aAAa,CAAC,SAAS,CAAC;GACZ,IAAI,CAkDhB","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 {ripple} from '@material/web/labs/gb/components/ripple/ripple.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 cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design card component. */\n    'md-card': Card;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n */\n@customElement('md-card')\nexport class Card extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .card {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"md-card.js","sourceRoot":"","sources":["md-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,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,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAC;AAE3C,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,gEAAgE;AAEhE,OAAO,EAAiB,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/C,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEjD;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAA5B;;QAqBL,6BAA6B;QACjB,UAAK,GAAc,UAAU,CAAC;QAE1C,oCAAoC;QACT,aAAQ,GAAG,KAAK,CAAC;QAE5C,uCAAuC;QACZ,gBAAW,GAAG,KAAK,CAAC;IAsBjD,CAAC;IApBoB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;SAC9B,CAAC;QACA,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;cAGA,MAAM,EAAE;yBACG,IAAI,CAAC,QAAQ;0BACZ,SAAS,IAAI,OAAO,aAAa;YACnD,CAAC,CAAC,OAAO;;WAEN,CAAC;IACV,CAAC;;AAhDD,kBAAkB;AACF,sBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,WAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAGU;IAAX,QAAQ,EAAE;mCAA+B;AAGf;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAGjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAqB;AA5BpC,IAAI;IADhB,aAAa,CAAC,SAAS,CAAC;GACZ,IAAI,CAkDhB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design card component. */\n    'md-card': Card;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n */\n@customElement('md-card')\nexport class Card extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .card {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/labs/gb/components/checkbox/checkbox.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.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none}.checkbox::before{content:"";box-sizing:border-box;width:var(--container-size);height:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}.checkbox:is(:checked,.checked)::before{content:"check"}.checkbox:is(:indeterminate,.indeterminate)::before{content:"remove"}}/*# sourceMappingURL=checkbox.css.map */
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;margin:0;--icon: "check"}.checkbox:is(:indeterminate,.indeterminate)::before{--icon: "remove"}.checkbox::before{content:var(--icon);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;aspect-ratio:1;width:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font)}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}}/*# sourceMappingURL=checkbox.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,yBDCE,4BCGF,oDACA,mFAIA,8EAIA,iDACA,gDDDE,8DCKF,mBACA,+CACA,6CDJI,mFCQJ,iDDJI,qFCQJ,oDDHE,gCCOF,+CACA,2CDLI,uFCSJ,6CACA,2CDLE,kCCSF,sEDNI,yFCUJ,wEACA,0CDNE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aAEA,kBACE,WACA,sBACA,4BACA,6BACA,kCACA,qCACA,uDACA,wBACA,gCACA,2BACA,cAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA,8DAGF,wCACE,gBAGF,oDACE","file":"checkbox.css"}
+{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,yBDCE,4BCGF,oDACA,mFAIA,8EAIA,iDACA,gDDDE,8DCKF,mBACA,+CACA,6CDJI,mFCQJ,iDDJI,qFCQJ,oDDHE,gCCOF,+CACA,2CDLI,uFCSJ,6CACA,2CDLE,kCCSF,sEDNI,yFCUJ,wEACA,0CDNE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,SACA,gBAEA,oDACE,iBAGF,kBACE,oBACA,oBACA,mBACA,uBACA,sBACA,gBACA,eACA,4BACA,kCACA,qCACA,uDACA,wBACA,4CAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"checkbox.css"}

package/labs/gb/components/checkbox/checkbox.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.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none}.checkbox::before{content:"";box-sizing:border-box;width:var(--container-size);height:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}.checkbox:is(:checked,.checked)::before{content:"check"}.checkbox:is(:indeterminate,.indeterminate)::before{content:"remove"}}
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;margin:0;--icon: "check"}.checkbox:is(:indeterminate,.indeterminate)::before{--icon: "remove"}.checkbox::before{content:var(--icon);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;aspect-ratio:1;width:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font)}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}}
 `;
 export default styles.styleSheet;
 //# sourceMappingURL=checkbox.cssresult.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cssresult.js","sourceRoot":"","sources":["checkbox.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,uEAAuE;AACvE,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/checkbox/checkbox.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.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none}.checkbox::before{content:\"\";box-sizing:border-box;width:var(--container-size);height:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1}.checkbox::after{content:\"\";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}.checkbox:is(:checked,.checked)::before{content:\"check\"}.checkbox:is(:indeterminate,.indeterminate)::before{content:\"remove\"}}\n`;\nexport default styles.styleSheet!;\n"]}
+{"version":3,"file":"checkbox.cssresult.js","sourceRoot":"","sources":["checkbox.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,uEAAuE;AACvE,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/checkbox/checkbox.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.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;margin:0;--icon: \"check\"}.checkbox:is(:indeterminate,.indeterminate)::before{--icon: \"remove\"}.checkbox::before{content:var(--icon);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;aspect-ratio:1;width:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font)}.checkbox::after{content:\"\";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -56,4 +56,4 @@ export declare function setupCheckbox(checkbox: HTMLElement, opts?: {
  * html`<input type="checkbox" class="${checkbox()}">`;
  * ```
  */
-export declare const checkbox: (state?: CheckboxClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+export declare const checkbox: (state?: CheckboxClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -3,10 +3,10 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-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 { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
 /** Checkbox classes. */
 export const CHECKBOX_CLASSES = {
     checkbox: 'checkbox',

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,sDAAsD,CAAC;AACtF,OAAO,EACL,aAAa,EACb,WAAW,GACZ,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAC,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAC9F,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAGzF,wBAAwB;AACxB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,aAAa,EAAE,cAAc,CAAC,aAAa;IAC3C,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAoBX;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,IAAI;QACjC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa;QAC/C,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,QAAQ;QACrC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM;KAClC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\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 {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Checkbox classes. */\nexport const CHECKBOX_CLASSES = {\n  checkbox: 'checkbox',\n  invalid: PSEUDO_CLASSES.invalid,\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  checked: PSEUDO_CLASSES.checked,\n  indeterminate: PSEUDO_CLASSES.indeterminate,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `checkboxClasses()` function. */\nexport interface CheckboxClassesState {\n  /** Emulates `:invalid`. */\n  invalid?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:indeterminate`. */\n  indeterminate?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the checkbox classes to apply to an element based on the given state.\n *\n * @param state The state of the checkbox.\n * @return An object of class names and truthy values if they apply.\n */\nexport function checkboxClasses({\n  invalid = false,\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  indeterminate = false,\n  disabled = false,\n}: CheckboxClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [CHECKBOX_CLASSES.checkbox]: true,\n    [CHECKBOX_CLASSES.checked]: checked,\n    [CHECKBOX_CLASSES.indeterminate]: indeterminate,\n    [CHECKBOX_CLASSES.disabled]: disabled,\n    [CHECKBOX_CLASSES.invalid]: invalid,\n    [CHECKBOX_CLASSES.hover]: hover,\n    [CHECKBOX_CLASSES.focus]: focus,\n    [CHECKBOX_CLASSES.active]: active,\n  };\n}\n\n/**\n * Sets up checkbox functionality for the given element.\n *\n * @param checkbox The element on which to set up checkbox functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupCheckbox(\n  checkbox: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(checkbox, opts);\n}\n\n/**\n * A Lit directive that adds checkbox styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<input type=\"checkbox\" class=\"${checkbox()}\">`;\n * ```\n */\nexport const checkbox = createClassMapDirective({\n  getClasses: checkboxClasses,\n  setupElement: setupCheckbox,\n});\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAE3D,wBAAwB;AACxB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,aAAa,EAAE,cAAc,CAAC,aAAa;IAC3C,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAoBX;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,IAAI;QACjC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa;QAC/C,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,QAAQ;QACrC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM;KAClC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,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 {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Checkbox classes. */\nexport const CHECKBOX_CLASSES = {\n  checkbox: 'checkbox',\n  invalid: PSEUDO_CLASSES.invalid,\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  checked: PSEUDO_CLASSES.checked,\n  indeterminate: PSEUDO_CLASSES.indeterminate,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `checkboxClasses()` function. */\nexport interface CheckboxClassesState {\n  /** Emulates `:invalid`. */\n  invalid?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:indeterminate`. */\n  indeterminate?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the checkbox classes to apply to an element based on the given state.\n *\n * @param state The state of the checkbox.\n * @return An object of class names and truthy values if they apply.\n */\nexport function checkboxClasses({\n  invalid = false,\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  indeterminate = false,\n  disabled = false,\n}: CheckboxClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [CHECKBOX_CLASSES.checkbox]: true,\n    [CHECKBOX_CLASSES.checked]: checked,\n    [CHECKBOX_CLASSES.indeterminate]: indeterminate,\n    [CHECKBOX_CLASSES.disabled]: disabled,\n    [CHECKBOX_CLASSES.invalid]: invalid,\n    [CHECKBOX_CLASSES.hover]: hover,\n    [CHECKBOX_CLASSES.focus]: focus,\n    [CHECKBOX_CLASSES.active]: active,\n  };\n}\n\n/**\n * Sets up checkbox functionality for the given element.\n *\n * @param checkbox The element on which to set up checkbox functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupCheckbox(\n  checkbox: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(checkbox, opts);\n}\n\n/**\n * A Lit directive that adds checkbox styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<input type=\"checkbox\" class=\"${checkbox()}\">`;\n * ```\n */\nexport const checkbox = createClassMapDirective({\n  getClasses: checkboxClasses,\n  setupElement: setupCheckbox,\n});\n"]}

package/labs/gb/components/checkbox/checkbox.scss

@@ -64,19 +64,27 @@
       height: 48px;
       background-image: none;
       outline: none;
+      margin: 0;
+      --icon: 'check';
+
+      &:is(:indeterminate, .indeterminate)::before {
+        --icon: 'remove';
+      }
 
       &::before {
-        content: '';
+        content: var(--icon);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         box-sizing: border-box;
+        overflow: hidden;
+        aspect-ratio: 1;
         width: var(--container-size);
-        height: var(--container-size);
         background: var(--container-color);
         border-radius: var(--container-shape);
         border: var(--outline-width) solid var(--outline-color);
         color: var(--icon-color);
-        font-family: var(--md-icon-font);
-        font-size: var(--icon-size);
-        line-height: 1;
+        font: var(--icon-size) / 1 var(--md-icon-font);
       }
 
       &::after {
@@ -92,14 +100,6 @@
         transition: var(--ripple-transition);
         animation: var(--ripple-animation), var(--focus-ring-animation);
       }
-
-      &:is(:checked, .checked)::before {
-        content: 'check';
-      }
-
-      &:is(:indeterminate, .indeterminate)::before {
-        content: 'remove';
-      }
     }
   }
 }

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

@@ -3,17 +3,17 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
-import { getFormState, getFormValue } from '@material/web/labs/behaviors/form-associated.js';
-import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
 import { CSSResultOrNative, LitElement } from 'lit';
+import { createValidator, getValidityAnchor } from '../../../behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '../../../behaviors/form-associated.js';
+import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.js';
 declare global {
     interface HTMLElementTagNameMap {
         /** A Material Design checkbox component. */
         'md-checkbox': Checkbox;
     }
 }
-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/constraint-validation.js").ConstraintValidation>>;
+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/constraint-validation.js").ConstraintValidation>>;
 /**
  * A Material Design checkbox component.
  */

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

@@ -4,18 +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 { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
-import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
-import { getFormState, getFormValue, mixinFormAssociated, } from '@material/web/labs/behaviors/form-associated.js';
-import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
-// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
-import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
-// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
+import { mixinElementInternals } from '../../../behaviors/element-internals.js';
+import { getFormState, getFormValue, mixinFormAssociated, } from '../../../behaviors/form-associated.js';
+import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.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 checkboxStyles from './checkbox.css' with { type: 'css' }; // github-only
 // import checkboxStyles from './checkbox.cssresult.js'; // google3-only
 import { checkbox } from './checkbox.js';

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

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

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

@@ -41,4 +41,4 @@ export declare function dividerClasses({ vertical, }?: DividerClassesState): Cla
  * `;
  * ```
  */
-export declare const divider: (state?: DividerClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+export declare const divider: (state?: DividerClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/divider/divider.js

@@ -3,7 +3,7 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
+import { createClassMapDirective } from '../shared/directives.js';
 /** Divider classes. */
 export const DIVIDER_CLASSES = {
     divider: 'divider',

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

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAG9F,uBAAuB;AACvB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,kBAAkB;CAC3B,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,GAAG,KAAK,MACO,EAAE;IACzB,OAAO;QACL,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,IAAI;QAC/B,CAAC,eAAe,CAAC,eAAe,CAAC,EAAE,QAAQ;KAC5C,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,uBAAuB,CAAC;IAC7C,UAAU,EAAE,cAAc;CAC3B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Divider classes. */\nexport const DIVIDER_CLASSES = {\n  divider: 'divider',\n  dividerVertical: 'divider-vertical',\n} as const;\n\n/** The state provided to the `dividerClasses()` function. */\nexport interface DividerClassesState {\n  /** Whether the divider is vertical. */\n  vertical?: boolean;\n}\n\n/**\n * Returns the divider classes to apply to an element based on the given state.\n *\n * @param state The state of the divider.\n * @return An object of class names and truthy values if they apply.\n */\nexport function dividerClasses({\n  vertical = false,\n}: DividerClassesState = {}): ClassInfo {\n  return {\n    [DIVIDER_CLASSES.divider]: true,\n    [DIVIDER_CLASSES.dividerVertical]: vertical,\n  };\n}\n\n/**\n * A Lit directive that adds divider styling to its element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"flex flex-col\">\n *     <div>Vertical</div>\n *     <hr class=\"${divider()}\">\n *     <div>Items</div>\n *   </div>\n *\n *   <div class=\"flex flex-row\">\n *     <div>Horizontal</div>\n *     <hr class=\"${divider({vertical: true})}\">\n *     <div>Items</div>\n *   </div>\n * `;\n * ```\n */\nexport const divider = createClassMapDirective({\n  getClasses: dividerClasses,\n});\n"]}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAEhE,uBAAuB;AACvB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,kBAAkB;CAC3B,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,GAAG,KAAK,MACO,EAAE;IACzB,OAAO;QACL,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,IAAI;QAC/B,CAAC,eAAe,CAAC,eAAe,CAAC,EAAE,QAAQ;KAC5C,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,uBAAuB,CAAC;IAC7C,UAAU,EAAE,cAAc;CAC3B,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 {createClassMapDirective} from '../shared/directives.js';\n\n/** Divider classes. */\nexport const DIVIDER_CLASSES = {\n  divider: 'divider',\n  dividerVertical: 'divider-vertical',\n} as const;\n\n/** The state provided to the `dividerClasses()` function. */\nexport interface DividerClassesState {\n  /** Whether the divider is vertical. */\n  vertical?: boolean;\n}\n\n/**\n * Returns the divider classes to apply to an element based on the given state.\n *\n * @param state The state of the divider.\n * @return An object of class names and truthy values if they apply.\n */\nexport function dividerClasses({\n  vertical = false,\n}: DividerClassesState = {}): ClassInfo {\n  return {\n    [DIVIDER_CLASSES.divider]: true,\n    [DIVIDER_CLASSES.dividerVertical]: vertical,\n  };\n}\n\n/**\n * A Lit directive that adds divider styling to its element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"flex flex-col\">\n *     <div>Vertical</div>\n *     <hr class=\"${divider()}\">\n *     <div>Items</div>\n *   </div>\n *\n *   <div class=\"flex flex-row\">\n *     <div>Horizontal</div>\n *     <hr class=\"${divider({vertical: true})}\">\n *     <div>Items</div>\n *   </div>\n * `;\n * ```\n */\nexport const divider = createClassMapDirective({\n  getClasses: dividerClasses,\n});\n"]}

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

@@ -81,4 +81,4 @@ export declare function setupFab(fab: HTMLElement, opts?: {
  * `;
  * ```
  */
-export declare const fab: (state?: FabClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+export declare const fab: (state?: FabClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/fab/fab.js

@@ -3,10 +3,10 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-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 { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
 /** Fab color configurations. */
 export const FAB_COLORS = {
     primary: 'primary',

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

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,sDAAsD,CAAC;AACtF,OAAO,EACL,aAAa,EACb,WAAW,GACZ,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAC,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAC9F,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAezF,gCAAgC;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,SAAS;IAClB,gBAAgB,EAAE,mBAAmB;IACrC,SAAS,EAAE,WAAW;IACtB,kBAAkB,EAAE,qBAAqB;IACzC,QAAQ,EAAE,UAAU;IACpB,iBAAiB,EAAE,oBAAoB;CAC/B,CAAC;AAEX,+BAA+B;AAC/B,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,SAAS;IAClB,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAC;AAEX,mBAAmB;AACnB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,KAAK;IACV,UAAU,EAAE,aAAa;IACzB,mBAAmB,EAAE,uBAAuB;IAC5C,YAAY,EAAE,eAAe;IAC7B,qBAAqB,EAAE,yBAAyB;IAChD,WAAW,EAAE,cAAc;IAC3B,oBAAoB,EAAE,wBAAwB;IAC9C,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;CACrB,CAAC;AAcX;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,MACK,EAAE;IACrB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,IAAI;QACvB,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,OAAO;QACtD,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAC/B,KAAK,KAAK,UAAU,CAAC,gBAAgB,IAAI,CAAC,KAAK;QACjD,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS;QAC1D,CAAC,WAAW,CAAC,qBAAqB,CAAC,EACjC,KAAK,KAAK,UAAU,CAAC,kBAAkB;QACzC,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,QAAQ;QACxD,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,iBAAiB;QAC1E,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE;QAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE;QAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,KAAK;QAC1B,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM;KAC7B,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,GAAgB,EAChB,IAA6B;IAE7B,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,uBAAuB,CAAC;IACzC,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,QAAQ;CACvB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\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 {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Fab color configuration types. */\nexport type FabColor =\n  | 'primary'\n  | 'primary-container'\n  | 'secondary'\n  | 'secondary-container'\n  | 'tertiary'\n  | 'tertiary-container';\n\n/** Fab size configuration types. */\nexport type FabSize = 'default' | 'md' | 'lg';\n\n/** Fab color configurations. */\nexport const FAB_COLORS = {\n  primary: 'primary',\n  primaryContainer: 'primary-container',\n  secondary: 'secondary',\n  secondaryContainer: 'secondary-container',\n  tertiary: 'tertiary',\n  tertiaryContainer: 'tertiary-container',\n} as const;\n\n/** Fab size configurations. */\nexport const FAB_SIZES = {\n  default: 'default',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\n/** Fab classes. */\nexport const FAB_CLASSES = {\n  fab: 'fab',\n  fabPrimary: 'fab-primary',\n  fabPrimaryContainer: 'fab-primary-container',\n  fabSecondary: 'fab-secondary',\n  fabSecondaryContainer: 'fab-secondary-container',\n  fabTertiary: 'fab-tertiary',\n  fabTertiaryContainer: 'fab-tertiary-container',\n  fabMd: 'fab-md',\n  fabLg: 'fab-lg',\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n} as const;\n\n/** The state provided to the `fabClasses()` function. */\nexport interface FabClassesState {\n  /** The color of the fab. */\n  color?: FabColor;\n  /** The size of the fab. */\n  size?: FabSize;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n}\n\n/**\n * Returns the fab classes to apply to an element based on the given state.\n *\n * @param state The state of the fab.\n * @return An object of class names and truthy values if they apply.\n */\nexport function fabClasses({\n  color,\n  size,\n  hover = false,\n  active = false,\n}: FabClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [FAB_CLASSES.fab]: true,\n    [FAB_CLASSES.fabPrimary]: color === FAB_COLORS.primary,\n    [FAB_CLASSES.fabPrimaryContainer]:\n      color === FAB_COLORS.primaryContainer || !color,\n    [FAB_CLASSES.fabSecondary]: color === FAB_COLORS.secondary,\n    [FAB_CLASSES.fabSecondaryContainer]:\n      color === FAB_COLORS.secondaryContainer,\n    [FAB_CLASSES.fabTertiary]: color === FAB_COLORS.tertiary,\n    [FAB_CLASSES.fabTertiaryContainer]: color === FAB_COLORS.tertiaryContainer,\n    [FAB_CLASSES.fabMd]: size === FAB_SIZES.md,\n    [FAB_CLASSES.fabLg]: size === FAB_SIZES.lg,\n    [FAB_CLASSES.hover]: hover,\n    [FAB_CLASSES.active]: active,\n  };\n}\n\n/**\n * Sets up fab functionality for the given element.\n *\n * @param fab The element on which to set up fab functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupFab(\n  fab: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(fab, opts);\n}\n\n/**\n * A Lit directive that adds fab styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <button class=\"${fab()}\">\n *     <md-icon>add</md-icon>\n *   </button>\n *\n *   <button class=\"${fab()}\">\n *     <md-icon>add</md-icon>\n *     Extended\n *   </button>\n * `;\n * ```\n */\nexport const fab = createClassMapDirective({\n  getClasses: fabClasses,\n  setupElement: setupFab,\n});\n"]}
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAc3D,gCAAgC;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,SAAS;IAClB,gBAAgB,EAAE,mBAAmB;IACrC,SAAS,EAAE,WAAW;IACtB,kBAAkB,EAAE,qBAAqB;IACzC,QAAQ,EAAE,UAAU;IACpB,iBAAiB,EAAE,oBAAoB;CAC/B,CAAC;AAEX,+BAA+B;AAC/B,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,SAAS;IAClB,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAC;AAEX,mBAAmB;AACnB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,KAAK;IACV,UAAU,EAAE,aAAa;IACzB,mBAAmB,EAAE,uBAAuB;IAC5C,YAAY,EAAE,eAAe;IAC7B,qBAAqB,EAAE,yBAAyB;IAChD,WAAW,EAAE,cAAc;IAC3B,oBAAoB,EAAE,wBAAwB;IAC9C,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;CACrB,CAAC;AAcX;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,MACK,EAAE;IACrB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,IAAI;QACvB,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,OAAO;QACtD,CAAC,WAAW,CAAC,mBAAmB,CAAC,EAC/B,KAAK,KAAK,UAAU,CAAC,gBAAgB,IAAI,CAAC,KAAK;QACjD,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,SAAS;QAC1D,CAAC,WAAW,CAAC,qBAAqB,CAAC,EACjC,KAAK,KAAK,UAAU,CAAC,kBAAkB;QACzC,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,QAAQ;QACxD,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,iBAAiB;QAC1E,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE;QAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,SAAS,CAAC,EAAE;QAC1C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,KAAK;QAC1B,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM;KAC7B,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CACtB,GAAgB,EAChB,IAA6B;IAE7B,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,uBAAuB,CAAC;IACzC,UAAU,EAAE,UAAU;IACtB,YAAY,EAAE,QAAQ;CACvB,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 {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Fab color configuration types. */\nexport type FabColor =\n  | 'primary'\n  | 'primary-container'\n  | 'secondary'\n  | 'secondary-container'\n  | 'tertiary'\n  | 'tertiary-container';\n\n/** Fab size configuration types. */\nexport type FabSize = 'default' | 'md' | 'lg';\n\n/** Fab color configurations. */\nexport const FAB_COLORS = {\n  primary: 'primary',\n  primaryContainer: 'primary-container',\n  secondary: 'secondary',\n  secondaryContainer: 'secondary-container',\n  tertiary: 'tertiary',\n  tertiaryContainer: 'tertiary-container',\n} as const;\n\n/** Fab size configurations. */\nexport const FAB_SIZES = {\n  default: 'default',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\n/** Fab classes. */\nexport const FAB_CLASSES = {\n  fab: 'fab',\n  fabPrimary: 'fab-primary',\n  fabPrimaryContainer: 'fab-primary-container',\n  fabSecondary: 'fab-secondary',\n  fabSecondaryContainer: 'fab-secondary-container',\n  fabTertiary: 'fab-tertiary',\n  fabTertiaryContainer: 'fab-tertiary-container',\n  fabMd: 'fab-md',\n  fabLg: 'fab-lg',\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n} as const;\n\n/** The state provided to the `fabClasses()` function. */\nexport interface FabClassesState {\n  /** The color of the fab. */\n  color?: FabColor;\n  /** The size of the fab. */\n  size?: FabSize;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n}\n\n/**\n * Returns the fab classes to apply to an element based on the given state.\n *\n * @param state The state of the fab.\n * @return An object of class names and truthy values if they apply.\n */\nexport function fabClasses({\n  color,\n  size,\n  hover = false,\n  active = false,\n}: FabClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [FAB_CLASSES.fab]: true,\n    [FAB_CLASSES.fabPrimary]: color === FAB_COLORS.primary,\n    [FAB_CLASSES.fabPrimaryContainer]:\n      color === FAB_COLORS.primaryContainer || !color,\n    [FAB_CLASSES.fabSecondary]: color === FAB_COLORS.secondary,\n    [FAB_CLASSES.fabSecondaryContainer]:\n      color === FAB_COLORS.secondaryContainer,\n    [FAB_CLASSES.fabTertiary]: color === FAB_COLORS.tertiary,\n    [FAB_CLASSES.fabTertiaryContainer]: color === FAB_COLORS.tertiaryContainer,\n    [FAB_CLASSES.fabMd]: size === FAB_SIZES.md,\n    [FAB_CLASSES.fabLg]: size === FAB_SIZES.lg,\n    [FAB_CLASSES.hover]: hover,\n    [FAB_CLASSES.active]: active,\n  };\n}\n\n/**\n * Sets up fab functionality for the given element.\n *\n * @param fab The element on which to set up fab functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupFab(\n  fab: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(fab, opts);\n}\n\n/**\n * A Lit directive that adds fab styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <button class=\"${fab()}\">\n *     <md-icon>add</md-icon>\n *   </button>\n *\n *   <button class=\"${fab()}\">\n *     <md-icon>add</md-icon>\n *     Extended\n *   </button>\n * `;\n * ```\n */\nexport const fab = createClassMapDirective({\n  getClasses: fabClasses,\n  setupElement: setupFab,\n});\n"]}

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

@@ -6,10 +6,10 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } 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 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 fabStyles from './fab.css' with { type: 'css' }; // github-only
 // import {styles as fabStyles} from './fab.cssresult.js'; // google3-only
 import { fab } from './fab.js';

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

@@ -1 +1 @@
-{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,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,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAS1D;;GAEG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,QAAQ,CAAC;GACX,GAAG,CAyBf","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} 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 fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design fab component. */\n    'md-fab': Fab;\n  }\n}\n\n/**\n * A Material Design fab component.\n */\n@customElement('md-fab')\nexport class Fab extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    fabStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .fab {\n        flex: 1;\n      }\n    `,\n  ];\n\n  @property() color: FabColor = 'primary-container';\n  @property() size: FabSize = 'default';\n\n  protected override render() {\n    return html`<button\n      part=\"fab\"\n      class=\"${fab({color: this.color, size: this.size})}\">\n      <slot></slot>\n    </button>`;\n  }\n}\n"]}
+{"version":3,"file":"md-fab.js","sourceRoot":"","sources":["md-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAS1D;;GAEG;AAEI,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAA5B;;QAeO,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,UAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;kCAAuC;AACtC;IAAX,QAAQ,EAAE;iCAA2B;AAhB3B,GAAG;IADf,aAAa,CAAC,QAAQ,CAAC;GACX,GAAG,CAyBf","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design fab component. */\n    'md-fab': Fab;\n  }\n}\n\n/**\n * A Material Design fab component.\n */\n@customElement('md-fab')\nexport class Fab extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    fabStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .fab {\n        flex: 1;\n      }\n    `,\n  ];\n\n  @property() color: FabColor = 'primary-container';\n  @property() size: FabSize = 'default';\n\n  protected override render() {\n    return html`<button\n      part=\"fab\"\n      class=\"${fab({color: this.color, size: this.size})}\">\n      <slot></slot>\n    </button>`;\n  }\n}\n"]}