@material/web 2.4.2-nightly.082faad.0 → 2.4.2-nightly.2fe7e22.0

package/labs/gb/components/divider/_divider-tokens.scss

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --color: var(--md-sys-color-outline-variant);
+  --thickness: 1px;
+}

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,SCNF,6CACA,iBDQI,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,54 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Directive } from 'lit/directive.js';
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** 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;
+/** The state provided to the `divider()` directive. */
+export interface DividerDirectiveState extends DividerClassesState {
+    /** Additional classes to apply to the element. */
+    classes?: ClassInfo;
+}
+declare class DividerDirective extends Directive {
+    render(state?: DividerDirectiveState): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+}
+/**
+ * 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?: DividerDirectiveState) => import("lit-html/directive.js").DirectiveResult<typeof DividerDirective>;
+export {};

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Directive, directive } from 'lit/directive.js';
+import { classMap } from 'lit/directives/class-map.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,
+    };
+}
+class DividerDirective extends Directive {
+    render(state = {}) {
+        return classMap({
+            ...(state.classes || {}),
+            ...dividerClasses(state),
+        });
+    }
+}
+/**
+ * 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 = directive(DividerDirective);
+//# 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;AAEH,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAC,QAAQ,EAAiB,MAAM,6BAA6B,CAAC;AAErE,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;AAQD,MAAM,gBAAiB,SAAQ,SAAS;IACtC,MAAM,CAAC,QAA+B,EAAE;QACtC,OAAO,QAAQ,CAAC;YACd,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;YACxB,GAAG,cAAc,CAAC,KAAK,CAAC;SACzB,CAAC,CAAC;IACL,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Directive, directive} from 'lit/directive.js';\nimport {classMap, 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/** The state provided to the `divider()` directive. */\nexport interface DividerDirectiveState extends DividerClassesState {\n  /** Additional classes to apply to the element. */\n  classes?: ClassInfo;\n}\n\nclass DividerDirective extends Directive {\n  render(state: DividerDirectiveState = {}) {\n    return classMap({\n      ...(state.classes || {}),\n      ...dividerClasses(state),\n    });\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 = directive(DividerDirective);\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,23 @@
+/**
+ * @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-divider': Divider;
+    }
+}
+/**
+ * A Material Design divider component.
+ */
+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,51 @@
+/**
+ * @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.
+ */
+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-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;;GAEG;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,YAAY,CAAC;GACf,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-divider': Divider;\n  }\n}\n\n/**\n * A Material Design divider component.\n */\n@customElement('md-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,84 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --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;
+}
+
+@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 */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["fab.scss","_fab-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAUA,oCACA,mBAEI,KCPF,+BACA,wDACA,yBACA,iDACA,2BACA,yBACA,kBACA,+CACA,iCACA,iEACA,sBACA,8CAIA,iFAIA,mFAIA,yDACA,uDACA,6DDFE,iBCMF,+CACA,6CACA,mDDJE,6BCQF,2DACA,yDACA,+DDNE,mBCUF,iDACA,+CACA,qDDRE,4BCYF,0DACA,wDACA,8DDVE,kBCcF,gDACA,8CACA,oDDZE,YCgBF,yBACA,2DACA,kBACA,+CACA,iEACA,sBACA,uBDlBE,YCsBF,yBACA,iDACA,yBACA,kBACA,kDACA,oEACA,sBACA,uBDzBE,KACE,gBACA,YACA,oBACA,mBACA,4BACA,+BACA,wCACA,qCACA,sCACA,8BACA,uBACA,0CACA,0DACA,8DACA,mCACA","file":"fab.css"}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/fab/fab.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * 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)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=fab.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab.cssresult.js","sourceRoot":"","sources":["fab.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,6DAA6D;AAC7D,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/fab/fab.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.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)}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AsyncDirective, AttributePart, DirectiveParameters } from 'lit/async-directive.js';
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Fab color configuration types. */
+export type FabColor = 'primary' | 'primary-container' | 'secondary' | 'secondary-container' | 'tertiary' | 'tertiary-container';
+/** Fab size configuration types. */
+export type FabSize = 'default' | 'md' | 'lg';
+/** Fab color configurations. */
+export declare const FAB_COLORS: {
+    readonly primary: "primary";
+    readonly primaryContainer: "primary-container";
+    readonly secondary: "secondary";
+    readonly secondaryContainer: "secondary-container";
+    readonly tertiary: "tertiary";
+    readonly tertiaryContainer: "tertiary-container";
+};
+/** Fab size configurations. */
+export declare const FAB_SIZES: {
+    readonly default: "default";
+    readonly md: "md";
+    readonly lg: "lg";
+};
+/** Fab classes. */
+export declare const FAB_CLASSES: {
+    readonly fab: "fab";
+    readonly fabPrimary: "fab-primary";
+    readonly fabPrimaryContainer: "fab-primary-container";
+    readonly fabSecondary: "fab-secondary";
+    readonly fabSecondaryContainer: "fab-secondary-container";
+    readonly fabTertiary: "fab-tertiary";
+    readonly fabTertiaryContainer: "fab-tertiary-container";
+    readonly fabMd: "fab-md";
+    readonly fabLg: "fab-lg";
+    readonly hover: string;
+    readonly active: string;
+};
+/** The state provided to the `fabClasses()` function. */
+export interface FabClassesState {
+    /** The color of the fab. */
+    color?: FabColor;
+    /** The size of the fab. */
+    size?: FabSize;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+}
+/**
+ * Returns the fab classes to apply to an element based on the given state.
+ *
+ * @param state The state of the fab.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function fabClasses({ color, size, hover, active, }?: FabClassesState): ClassInfo;
+/**
+ * Sets up fab functionality for the given element.
+ *
+ * @param fab The element on which to set up fab functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupFab(fab: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/** The state provided to the `fab()` directive. */
+export interface FabDirectiveState extends FabClassesState {
+    /** Additional classes to apply to the element. */
+    classes?: ClassInfo;
+}
+declare class FabDirective extends AsyncDirective {
+    private element?;
+    private cleanup?;
+    render(state?: FabDirectiveState): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+    update({ element }: AttributePart, [state]: DirectiveParameters<this>): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+    protected disconnected(): void;
+    protected reconnected(): void;
+}
+/**
+ * A Lit directive that adds fab styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <button class="${fab()}">
+ *     <md-icon>add</md-icon>
+ *   </button>
+ *
+ *   <button class="${fab()}">
+ *     <md-icon>add</md-icon>
+ *     Extended
+ *   </button>
+ * `;
+ * ```
+ */
+export declare const fab: (state?: FabDirectiveState) => import("lit-html/directive.js").DirectiveResult<typeof FabDirective>;
+export {};

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

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * 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 { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+import { AsyncDirective, directive, } from 'lit/async-directive.js';
+import { classMap } from 'lit/directives/class-map.js';
+/** Fab color configurations. */
+export const FAB_COLORS = {
+    primary: 'primary',
+    primaryContainer: 'primary-container',
+    secondary: 'secondary',
+    secondaryContainer: 'secondary-container',
+    tertiary: 'tertiary',
+    tertiaryContainer: 'tertiary-container',
+};
+/** Fab size configurations. */
+export const FAB_SIZES = {
+    default: 'default',
+    md: 'md',
+    lg: 'lg',
+};
+/** Fab classes. */
+export const FAB_CLASSES = {
+    fab: 'fab',
+    fabPrimary: 'fab-primary',
+    fabPrimaryContainer: 'fab-primary-container',
+    fabSecondary: 'fab-secondary',
+    fabSecondaryContainer: 'fab-secondary-container',
+    fabTertiary: 'fab-tertiary',
+    fabTertiaryContainer: 'fab-tertiary-container',
+    fabMd: 'fab-md',
+    fabLg: 'fab-lg',
+    hover: PSEUDO_CLASSES.hover,
+    active: PSEUDO_CLASSES.active,
+};
+/**
+ * Returns the fab classes to apply to an element based on the given state.
+ *
+ * @param state The state of the fab.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function fabClasses({ color, size, hover = false, active = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [FAB_CLASSES.fab]: true,
+        [FAB_CLASSES.fabPrimary]: color === FAB_COLORS.primary,
+        [FAB_CLASSES.fabPrimaryContainer]: color === FAB_COLORS.primaryContainer || !color,
+        [FAB_CLASSES.fabSecondary]: color === FAB_COLORS.secondary,
+        [FAB_CLASSES.fabSecondaryContainer]: color === FAB_COLORS.secondaryContainer,
+        [FAB_CLASSES.fabTertiary]: color === FAB_COLORS.tertiary,
+        [FAB_CLASSES.fabTertiaryContainer]: color === FAB_COLORS.tertiaryContainer,
+        [FAB_CLASSES.fabMd]: size === FAB_SIZES.md,
+        [FAB_CLASSES.fabLg]: size === FAB_SIZES.lg,
+        [FAB_CLASSES.hover]: hover,
+        [FAB_CLASSES.active]: active,
+    };
+}
+/**
+ * Sets up fab functionality for the given element.
+ *
+ * @param fab The element on which to set up fab functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupFab(fab, opts) {
+    setupRipple(fab, opts);
+}
+class FabDirective extends AsyncDirective {
+    render(state = {}) {
+        return classMap({
+            ...(state.classes || {}),
+            ...fabClasses(state),
+        });
+    }
+    update({ element }, [state]) {
+        if (this.isConnected && element !== this.element) {
+            this.element = element;
+            this.disconnected();
+            this.reconnected();
+        }
+        return this.render(state);
+    }
+    disconnected() {
+        this.cleanup?.abort();
+    }
+    reconnected() {
+        if (this.element) {
+            this.cleanup = new AbortController();
+            setupFab(this.element, { signal: this.cleanup.signal });
+        }
+    }
+}
+/**
+ * A Lit directive that adds fab styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <button class="${fab()}">
+ *     <md-icon>add</md-icon>
+ *   </button>
+ *
+ *   <button class="${fab()}">
+ *     <md-icon>add</md-icon>
+ *     Extended
+ *   </button>
+ * `;
+ * ```
+ */
+export const fab = directive(FabDirective);
+//# sourceMappingURL=fab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.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 {focusRingClasses} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {\n  rippleClasses,\n  setupRipple,\n} from '@material/web/labs/gb/components/ripple/ripple.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {\n  AsyncDirective,\n  AttributePart,\n  directive,\n  DirectiveParameters,\n} from 'lit/async-directive.js';\nimport {classMap, type ClassInfo} from 'lit/directives/class-map.js';\n\n/** 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/** The state provided to the `fab()` directive. */\nexport interface FabDirectiveState extends FabClassesState {\n  /** Additional classes to apply to the element. */\n  classes?: ClassInfo;\n}\n\nclass FabDirective extends AsyncDirective {\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  render(state: FabDirectiveState = {}) {\n    return classMap({\n      ...(state.classes || {}),\n      ...fabClasses(state),\n    });\n  }\n\n  override update(\n    {element}: AttributePart,\n    [state]: DirectiveParameters<this>,\n  ) {\n    if (this.isConnected && element !== this.element) {\n      this.element = element as HTMLElement;\n      this.disconnected();\n      this.reconnected();\n    }\n\n    return this.render(state);\n  }\n\n  protected override disconnected() {\n    this.cleanup?.abort();\n  }\n\n  protected override reconnected() {\n    if (this.element) {\n      this.cleanup = new AbortController();\n      setupFab(this.element, {signal: this.cleanup.signal});\n    }\n  }\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 = directive(FabDirective);\n"]}