@material/web 2.4.2-nightly.a589695.0 → 2.4.2-nightly.b4af72e.0

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

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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-gb-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("../../../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.
+ *
+ * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
+ * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
+ * @csspart checkbox - The checkbox's root element.
+ * @cssprop --container-color
+ * @cssprop --container-shape
+ * @cssprop --container-size
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
+ */
+export declare class Checkbox extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultOrNative[];
+    /**
+     * Whether or not the checkbox is invalid.
+     */
+    error: boolean;
+    /**
+     * Whether or not the checkbox is selected.
+     */
+    checked: boolean;
+    /**
+     * The default checked state of the checkbox.
+     */
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    /**
+     * Whether or not the checkbox is indeterminate.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+     */
+    indeterminate: boolean;
+    /**
+     * When true, require the checkbox to be selected when participating in
+     * form submission.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+     */
+    required: boolean;
+    /**
+     * The value of the checkbox that is submitted with a form when selected.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+     */
+    value: string;
+    private readonly input;
+    /**
+     * Mimics the behavior of <input> dirty checkedness, where the `checked`
+     * attribute only updates the checked state if the checkbox has not been
+     * interacted with.
+     *
+     * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+     */
+    private dirtyCheckedness;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleInput;
+    private handleChange;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    [getFormValue](): string;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator;
+    [getValidityAnchor](): HTMLInputElement;
+}
+export {};

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

@@ -0,0 +1,188 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+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';
+// Separate variable needed for closure.
+const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
+/**
+ * A Material Design checkbox component.
+ *
+ * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed
+ * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles
+ * @csspart checkbox - The checkbox's root element.
+ * @cssprop --container-color
+ * @cssprop --container-shape
+ * @cssprop --container-size
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
+ */
+let Checkbox = class Checkbox extends baseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not the checkbox is invalid.
+         */
+        this.error = false;
+        /**
+         * Whether or not the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Whether or not the checkbox is indeterminate.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+         */
+        this.indeterminate = false;
+        /**
+         * When true, require the checkbox to be selected when participating in
+         * form submission.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+         */
+        this.required = false;
+        /**
+         * The value of the checkbox that is submitted with a form when selected.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+         */
+        this.value = 'on';
+        /**
+         * Mimics the behavior of <input> dirty checkedness, where the `checked`
+         * attribute only updates the checked state if the checkbox has not been
+         * interacted with.
+         *
+         * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+         */
+        this.dirtyCheckedness = false;
+    }
+    /**
+     * The default checked state of the checkbox.
+     */
+    get defaultChecked() {
+        return this.hasAttribute('checked');
+    }
+    set defaultChecked(value) {
+        this.toggleAttribute('checked', value || false);
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel, ariaInvalid } = this;
+        return html `
+      <input
+        part="checkbox"
+        class="${checkbox({ invalid: this.error })}"
+        type="checkbox"
+        aria-checked=${this.indeterminate ? 'mixed' : nothing}
+        aria-label=${ariaLabel || nothing}
+        aria-invalid=${ariaInvalid || this.error || nothing}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        .indeterminate=${this.indeterminate}
+        .checked=${this.checked}
+        @input=${this.handleInput}
+        @change=${this.handleChange} />
+    `;
+    }
+    handleInput(event) {
+        this.dirtyCheckedness = true;
+        const target = event.target;
+        this.checked = target.checked;
+        this.indeterminate = target.indeterminate;
+        // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+    }
+    handleChange(event) {
+        this.dirtyCheckedness = true;
+        // <input> 'change' event is not composed, re-dispatch it.
+        redispatchEvent(this, event);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'checked' && this.dirtyCheckedness) {
+            // The 'checked' attribute does not update checkboxes that have been
+            // interacted with.
+            return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    [getFormValue]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
+    formResetCallback() {
+        this.dirtyCheckedness = false;
+        this.checked = this.defaultChecked;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    [createValidator]() {
+        return new CheckboxValidator(() => this);
+    }
+    [getValidityAnchor]() {
+        return this.input;
+    }
+};
+/** @nocollapse */
+Checkbox.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+Checkbox.styles = [
+    focusRingStyles,
+    rippleStyles,
+    checkboxStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .checkbox {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    property()
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    query('input', true)
+], Checkbox.prototype, "input", void 0);
+Checkbox = __decorate([
+    customElement('md-gb-checkbox')
+], Checkbox);
+export { Checkbox };
+//# sourceMappingURL=md-checkbox.js.map

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

@@ -0,0 +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 {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-gb-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 * @fires {InputEvent} input - Fired when the checkbox is checked or unchecked. --bubbles --composed\n * @fires {Event} change - Fired when the checkbox is checked or unchecked. --bubbles\n * @csspart checkbox - The checkbox's root element.\n * @cssprop --container-color\n * @cssprop --container-shape\n * @cssprop --container-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\n@customElement('md-gb-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-tokens.scss

@@ -0,0 +1,11 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --color: var(--md-sys-color-outline-variant);
+  --thickness: 1px;
+  // LINT.ThenChange(md-divider.ts) keep in sync with `@cssprop` jsdoc tags
+}

package/labs/gb/components/divider/divider.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.divider{.divider{--color: var(--md-sys-color-outline-variant);--thickness: 1px;box-sizing:border-box;border:none;margin:unset}.divider:not(.divider-vertical){border-bottom:var(--thickness) solid var(--color);width:100%}.divider.divider-vertical{border-inline-end:var(--thickness) solid var(--color);min-height:100%}}/*# sourceMappingURL=divider.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["divider.scss","_divider-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEI,SCLF,6CACA,iBDOI,sBACA,YACA,aAGF,gCACE,kDACA,WAGF,0BACE,sDACA","file":"divider.css"}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/divider/divider.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.divider{.divider{--color: var(--md-sys-color-outline-variant);--thickness: 1px;box-sizing:border-box;border:none;margin:unset}.divider:not(.divider-vertical){border-bottom:var(--thickness) solid var(--color);width:100%}.divider.divider-vertical{border-inline-end:var(--thickness) solid var(--color);min-height:100%}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=divider.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.cssresult.js","sourceRoot":"","sources":["divider.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qEAAqE;AACrE,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/divider/divider.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys;@layer md.comp.divider{.divider{--color: var(--md-sys-color-outline-variant);--thickness: 1px;box-sizing:border-box;border:none;margin:unset}.divider:not(.divider-vertical){border-bottom:var(--thickness) solid var(--color);width:100%}.divider.divider-vertical{border-inline-end:var(--thickness) solid var(--color);min-height:100%}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Divider classes. */
+export declare const DIVIDER_CLASSES: {
+    readonly divider: "divider";
+    readonly dividerVertical: "divider-vertical";
+};
+/** The state provided to the `dividerClasses()` function. */
+export interface DividerClassesState {
+    /** Whether the divider is vertical. */
+    vertical?: boolean;
+}
+/**
+ * Returns the divider classes to apply to an element based on the given state.
+ *
+ * @param state The state of the divider.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function dividerClasses({ vertical, }?: DividerClassesState): ClassInfo;
+/**
+ * A Lit directive that adds divider styling to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="flex flex-col">
+ *     <div>Vertical</div>
+ *     <hr class="${divider()}">
+ *     <div>Items</div>
+ *   </div>
+ *
+ *   <div class="flex flex-row">
+ *     <div>Horizontal</div>
+ *     <hr class="${divider({vertical: true})}">
+ *     <div>Items</div>
+ *   </div>
+ * `;
+ * ```
+ */
+export declare const divider: (state?: DividerClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClassMapDirective } from '../shared/directives.js';
+/** Divider classes. */
+export const DIVIDER_CLASSES = {
+    divider: 'divider',
+    dividerVertical: 'divider-vertical',
+};
+/**
+ * Returns the divider classes to apply to an element based on the given state.
+ *
+ * @param state The state of the divider.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function dividerClasses({ vertical = false, } = {}) {
+    return {
+        [DIVIDER_CLASSES.divider]: true,
+        [DIVIDER_CLASSES.dividerVertical]: vertical,
+    };
+}
+/**
+ * A Lit directive that adds divider styling to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="flex flex-col">
+ *     <div>Vertical</div>
+ *     <hr class="${divider()}">
+ *     <div>Items</div>
+ *   </div>
+ *
+ *   <div class="flex flex-row">
+ *     <div>Horizontal</div>
+ *     <hr class="${divider({vertical: true})}">
+ *     <div>Items</div>
+ *   </div>
+ * `;
+ * ```
+ */
+export const divider = createClassMapDirective({
+    getClasses: dividerClasses,
+});
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"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/divider/divider.scss

@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'divider-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.divider {
+  .divider {
+    & {
+      @include divider-tokens.root;
+
+      box-sizing: border-box;
+      border: none;
+      margin: unset; // Remove <hr> margins
+    }
+
+    &:not(.divider-vertical) {
+      border-bottom: var(--thickness) solid var(--color);
+      width: 100%;
+    }
+
+    &.divider-vertical {
+      border-inline-end: var(--thickness) solid var(--color);
+      min-height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design divider component. */
+        'md-gb-divider': Divider;
+    }
+}
+/**
+ * A Material Design divider component.
+ *
+ * @csspart divider - The divider element.
+ * @cssprop --color
+ * @cssprop --thickness
+ */
+export declare class Divider extends LitElement {
+    static styles: CSSResultOrNative[];
+    /**
+     * Whether or not the divider is vertical.
+     */
+    vertical: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import dividerStyles from './divider.css' with { type: 'css' }; // github-only
+// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only
+import { divider } from './divider.js';
+/**
+ * A Material Design divider component.
+ *
+ * @csspart divider - The divider element.
+ * @cssprop --color
+ * @cssprop --thickness
+ */
+let Divider = class Divider extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not the divider is vertical.
+         */
+        this.vertical = false;
+    }
+    render() {
+        return html `<div part="divider" class="${divider(this)}"></div>`;
+    }
+};
+Divider.styles = [
+    dividerStyles,
+    css `
+      :host {
+        display: flex;
+      }
+      .divider {
+        flex: 1;
+      }
+      :host(:not([vertical])) {
+        width: 100%;
+      }
+      :host([vertical]) {
+        min-height: 100%;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "vertical", void 0);
+Divider = __decorate([
+    customElement('md-gb-divider')
+], Divider);
+export { Divider };
+//# sourceMappingURL=md-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-divider.js","sourceRoot":"","sources":["md-divider.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,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AASrC;;;;;;GAMG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAmBL;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACnE,CAAC;;AAzBe,cAAM,GAAwB;IAC5C,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBqB,CAgBpB;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAkB;AAtBhD,OAAO;IADnB,aAAa,CAAC,eAAe,CAAC;GAClB,OAAO,CA2BnB","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 dividerStyles from './divider.css' with {type: 'css'}; // github-only\n// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only\n\nimport {divider} from './divider.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design divider component. */\n    'md-gb-divider': Divider;\n  }\n}\n\n/**\n * A Material Design divider component.\n *\n * @csspart divider - The divider element.\n * @cssprop --color\n * @cssprop --thickness\n */\n@customElement('md-gb-divider')\nexport class Divider extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    dividerStyles,\n    css`\n      :host {\n        display: flex;\n      }\n      .divider {\n        flex: 1;\n      }\n      :host(:not([vertical])) {\n        width: 100%;\n      }\n      :host([vertical]) {\n        min-height: 100%;\n      }\n    `,\n  ];\n\n  /**\n   * Whether or not the divider is vertical.\n   */\n  @property({type: Boolean, reflect: true}) vertical = false;\n\n  protected override render() {\n    return html`<div part=\"divider\" class=\"${divider(this)}\"></div>`;\n  }\n}\n"]}

package/labs/gb/components/fab/_fab-tokens.scss

@@ -0,0 +1,86 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-3);
+  --container-height: 56px;
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --icon-color: currentColor;
+  --icon-label-space: 12px;
+  --icon-size: 24px;
+  --label-text: var(--md-sys-typescale-label-lg);
+  --label-text-color: currentColor;
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  --leading-space: 16px;
+  --trailing-space: 16px;
+  // LINT.ThenChange(md-fab.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin hovered {
+  --container-elevation: var(--md-sys-elevation-shadow-4);
+}
+
+@mixin pressed {
+  --container-elevation: var(--md-sys-elevation-shadow-3);
+}
+
+@mixin primary-container {
+  --container-color: var(--md-sys-color-primary-container);
+  --icon-color: var(--md-sys-color-on-primary-container);
+  --label-text-color: var(--md-sys-color-on-primary-container);
+}
+
+@mixin primary {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+  --label-text-color: var(--md-sys-color-on-primary);
+}
+
+@mixin secondary-container {
+  --container-color: var(--md-sys-color-secondary-container);
+  --icon-color: var(--md-sys-color-on-secondary-container);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin secondary {
+  --container-color: var(--md-sys-color-secondary);
+  --icon-color: var(--md-sys-color-on-secondary);
+  --label-text-color: var(--md-sys-color-on-secondary);
+}
+
+@mixin tertiary-container {
+  --container-color: var(--md-sys-color-tertiary-container);
+  --icon-color: var(--md-sys-color-on-tertiary-container);
+  --label-text-color: var(--md-sys-color-on-tertiary-container);
+}
+
+@mixin tertiary {
+  --container-color: var(--md-sys-color-tertiary);
+  --icon-color: var(--md-sys-color-on-tertiary);
+  --label-text-color: var(--md-sys-color-on-tertiary);
+}
+
+@mixin md {
+  --container-height: 80px;
+  --container-shape: var(--md-sys-shape-corner-lg-increased);
+  --icon-size: 28px;
+  --label-text: var(--md-sys-typescale-title-lg);
+  --label-text-tracking: var(--md-sys-typescale-title-lg-tracking);
+  --leading-space: 26px;
+  --trailing-space: 26px;
+}
+
+@mixin lg {
+  --container-height: 96px;
+  --container-shape: var(--md-sys-shape-corner-xl);
+  --icon-label-space: 16px;
+  --icon-size: 36px;
+  --label-text: var(--md-sys-typescale-headline-sm);
+  --label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);
+  --leading-space: 28px;
+  --trailing-space: 28px;
+}

package/labs/gb/components/fab/fab.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.dependencies;@layer md.comp.fab{.fab{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-3);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-lg);--icon-color: currentColor;--icon-label-space: 12px;--icon-size: 24px;--label-text: var(--md-sys-typescale-label-lg);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 16px;--trailing-space: 16px}.fab:is(:hover,.hover){--container-elevation: var(--md-sys-elevation-shadow-4)}.fab:is(:active,.active){--container-elevation: var(--md-sys-elevation-shadow-3)}.fab.fab-primary-container{--container-color: var(--md-sys-color-primary-container);--icon-color: var(--md-sys-color-on-primary-container);--label-text-color: var(--md-sys-color-on-primary-container)}.fab.fab-primary{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.fab.fab-secondary-container{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.fab.fab-secondary{--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.fab.fab-tertiary-container{--container-color: var(--md-sys-color-tertiary-container);--icon-color: var(--md-sys-color-on-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container)}.fab.fab-tertiary{--container-color: var(--md-sys-color-tertiary);--icon-color: var(--md-sys-color-on-tertiary);--label-text-color: var(--md-sys-color-on-tertiary)}.fab.fab-md{--container-height: 80px;--container-shape: var(--md-sys-shape-corner-lg-increased);--icon-size: 28px;--label-text: var(--md-sys-typescale-title-lg);--label-text-tracking: var(--md-sys-typescale-title-lg-tracking);--leading-space: 26px;--trailing-space: 26px}.fab.fab-lg{--container-height: 96px;--container-shape: var(--md-sys-shape-corner-xl);--icon-label-space: 16px;--icon-size: 36px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 28px;--trailing-space: 28px}.fab{appearance:none;border:none;display:inline-flex;align-items:center;gap:var(--icon-label-space);height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);padding-inline:var(--leading-space) var(--trailing-space);animation:var(--ripple-animation),var(--focus-ring-animation);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}}/*# sourceMappingURL=fab.css.map */