@maicol07/material-web 2.3.0 → 2.5.1

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

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

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

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { 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
+ */
+export class DividerElement 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>`;
+    }
+}
+/** @nocollapse */
+DividerElement.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 })
+], DividerElement.prototype, "vertical", void 0);
+//# sourceMappingURL=divider-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider-element.js","sourceRoot":"","sources":["divider-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAErC;;;;;;GAMG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAoBE;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACnE,CAAC;;AA1BD,kBAAkB;AACF,qBAAM,GAAwB;IAC5C,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBqB,CAgBpB;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAAkB","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 {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\n/**\n * A Material Design divider component.\n *\n * @csspart divider - The divider element.\n * @cssprop --color\n * @cssprop --thickness\n */\nexport class DividerElement extends LitElement {\n  /** @nocollapse */\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/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.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

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-gb-divider.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { DividerElement } from './divider-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design component. */
+        'md-gb-divider': DividerElement;
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { DividerElement } from './divider-element.js';
+customElements.define('md-gb-divider', DividerElement);
+//# sourceMappingURL=md-gb-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-divider.js","sourceRoot":"","sources":["md-gb-divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AASpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {DividerElement} from './divider-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-divider': DividerElement;\n  }\n}\n\ncustomElements.define('md-gb-divider', DividerElement);\n"]}

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

@@ -0,0 +1,89 @@
+//
+// 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-axes: var(--md-sys-typescale-label-lg-axes);
+  --label-text-color: currentColor;
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  --leading-space: 16px;
+  --trailing-space: 16px;
+  // LINT.ThenChange(fab-element.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-axes: var(--md-sys-typescale-title-lg-axes);
+  --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-axes: var(--md-sys-typescale-headline-sm-axes);
+  --label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);
+  --leading-space: 28px;
+  --trailing-space: 28px;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type FabColor, type FabSize } from './fab.js';
+/**
+ * A Material Design fab component.
+ *
+ * @slot - Used to display an icon and optional label.
+ * @csspart fab - The FAB's root element.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-color
+ * @cssprop --icon-label-space
+ * @cssprop --icon-size
+ * @cssprop --label-text
+ * @cssprop --label-text-axes
+ * @cssprop --label-text-color
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ */
+export declare class FabElement extends LitElement {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    color: FabColor;
+    size: FabSize;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.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 fabStyles from './fab.css' with { type: 'css' }; // github-only
+// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only
+import { fab } from './fab.js';
+/**
+ * A Material Design fab component.
+ *
+ * @slot - Used to display an icon and optional label.
+ * @csspart fab - The FAB's root element.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-color
+ * @cssprop --icon-label-space
+ * @cssprop --icon-size
+ * @cssprop --label-text
+ * @cssprop --label-text-axes
+ * @cssprop --label-text-color
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ */
+export class FabElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = 'primary-container';
+        this.size = 'default';
+    }
+    render() {
+        return html `<button
+      part="fab"
+      class="${fab({ color: this.color, size: this.size })}">
+      <slot></slot>
+    </button>`;
+    }
+}
+/** @nocollapse */
+FabElement.styles = [
+    focusRingStyles,
+    rippleStyles,
+    fabStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .fab {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property()
+], FabElement.prototype, "color", void 0);
+__decorate([
+    property()
+], FabElement.prototype, "size", void 0);
+//# sourceMappingURL=fab-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-element.js","sourceRoot":"","sources":["fab-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,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,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAgBc,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;;AAxBD,kBAAkB;AACF,iBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;yCAAuC;AACtC;IAAX,QAAQ,EAAE;wCAA2B","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 {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\n/**\n * A Material Design fab component.\n *\n * @slot - Used to display an icon and optional label.\n * @csspart fab - The FAB's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-label-space\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-axes\n * @cssprop --label-text-color\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\nexport class FabElement extends LitElement {\n  /** @nocollapse */\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"]}

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-axes: var(--md-sys-typescale-label-lg-axes);--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-axes: var(--md-sys-typescale-title-lg-axes);--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-axes: var(--md-sys-typescale-headline-sm-axes);--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);font-variation-settings:var(--label-text-axes);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,KCNF,+BACA,wDACA,yBACA,iDACA,2BACA,yBACA,kBACA,+CACA,yDACA,iCACA,iEACA,sBACA,uBDFE,uBCOF,wDDHE,yBCOF,wDDHE,2BCOF,yDACA,uDACA,6DDLE,iBCSF,+CACA,6CACA,mDDPE,6BCWF,2DACA,yDACA,+DDTE,mBCaF,iDACA,+CACA,qDDXE,4BCeF,0DACA,wDACA,8DDbE,kBCiBF,gDACA,8CACA,oDDfE,YCmBF,yBACA,2DACA,kBACA,+CACA,yDACA,iEACA,sBACA,uBDtBE,YC0BF,yBACA,iDACA,yBACA,kBACA,kDACA,4DACA,oEACA,sBACA,uBD9BE,KACE,gBACA,YACA,oBACA,mBACA,4BACA,+BACA,wCACA,qCACA,sCACA,8BACA,uBACA,0CACA,+CACA,0DACA,8DACA,mCACA","file":"fab.css"}

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

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

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-axes: var(--md-sys-typescale-label-lg-axes);--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-axes: var(--md-sys-typescale-title-lg-axes);--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-axes: var(--md-sys-typescale-headline-sm-axes);--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);font-variation-settings:var(--label-text-axes);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-axes: var(--md-sys-typescale-label-lg-axes);--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-axes: var(--md-sys-typescale-title-lg-axes);--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-axes: var(--md-sys-typescale-headline-sm-axes);--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);font-variation-settings:var(--label-text-axes);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,84 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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;
+/**
+ * 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?: FabClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;