@material/web 2.4.2-nightly.e5ed2fe.0 → 2.4.2-nightly.f57b157.0

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;

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

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

package/labs/gb/components/fab/fab.scss

@@ -0,0 +1,77 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'fab-tokens';
+// go/keep-sorted end
+
+// TODO: add any md.comp dependencies (e.g. md.comp.ripple)
+@layer md.sys, md.comp.dependencies;
+@layer md.comp.fab {
+  .fab {
+    & {
+      @include fab-tokens.root;
+    }
+
+    &:is(:hover, .hover) {
+      @include fab-tokens.hovered;
+    }
+
+    &:is(:active, .active) {
+      @include fab-tokens.pressed;
+    }
+
+    &.fab-primary-container {
+      @include fab-tokens.primary-container;
+    }
+
+    &.fab-primary {
+      @include fab-tokens.primary;
+    }
+
+    &.fab-secondary-container {
+      @include fab-tokens.secondary-container;
+    }
+
+    &.fab-secondary {
+      @include fab-tokens.secondary;
+    }
+
+    &.fab-tertiary-container {
+      @include fab-tokens.tertiary-container;
+    }
+
+    &.fab-tertiary {
+      @include fab-tokens.tertiary;
+    }
+
+    &.fab-md {
+      @include fab-tokens.md;
+    }
+
+    &.fab-lg {
+      @include fab-tokens.lg;
+    }
+
+    & {
+      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);
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type FabColor, type FabSize } from './fab.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design fab component. */
+        'md-fab': Fab;
+    }
+}
+/**
+ * A Material Design fab component.
+ */
+export declare class Fab extends LitElement {
+    static styles: CSSResultOrNative[];
+    color: FabColor;
+    size: FabSize;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,56 @@
+/**
+ * @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 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.
+ */
+let Fab = class Fab 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>`;
+    }
+};
+Fab.styles = [
+    focusRingStyles,
+    rippleStyles,
+    fabStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .fab {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property()
+], Fab.prototype, "color", void 0);
+__decorate([
+    property()
+], Fab.prototype, "size", void 0);
+Fab = __decorate([
+    customElement('md-fab')
+], Fab);
+export { Fab };
+//# sourceMappingURL=md-fab.js.map

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

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

package/labs/gb/components/focus/focus-ring.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.focus-ring{.focus-ring-outer,.focus-ring-inner{--focus-ring-outline: none;--focus-ring-offset: 0;--focus-ring-animation: none;outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);animation:var(--focus-ring-animation),var(--ripple-animation, none)}.focus-ring-outer:is(:focus-visible,.focus-visible),.focus-ring-outer:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-outer,:host(:focus-visible) .focus-ring-outer.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: 2px;--focus-ring-animation: focus-ring-outer-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}.focus-ring-inner:is(:focus-visible,.focus-visible),.focus-ring-inner:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-inner,:host(:focus-visible) .focus-ring-inner.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: -3px;--focus-ring-animation: focus-ring-inner-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}@keyframes focus-ring-outer-grow{from{outline-width:0}to{outline-width:8px}}@keyframes focus-ring-outer-shrink{from{outline-width:8px}}@keyframes focus-ring-inner-grow{from{outline-width:0;outline-offset:0}to{outline-width:8px;outline-offset:-8px}}@keyframes focus-ring-inner-shrink{from{outline-width:8px;outline-offset:-8px}}}/*# sourceMappingURL=focus-ring.css.map */

package/labs/gb/components/focus/focus-ring.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["focus-ring.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,0BACE,oCAEE,2BACA,uBACA,6BAEA,kCACA,wCACA,oEAaA,uNAIE,8DACA,yBACA,+IAOF,uNAIE,8DACA,0BACA,+IAMJ,iCACE,KACE,gBAGF,GACE,mBAIJ,mCACE,KACE,mBAIJ,iCACE,KACE,gBACA,iBAEF,GACE,kBACA,qBAIJ,mCACE,KACE,kBACA","file":"focus-ring.css"}

package/labs/gb/components/focus/focus-ring.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/focus/focus-ring.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.focus-ring{.focus-ring-outer,.focus-ring-inner{--focus-ring-outline: none;--focus-ring-offset: 0;--focus-ring-animation: none;outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);animation:var(--focus-ring-animation),var(--ripple-animation, none)}.focus-ring-outer:is(:focus-visible,.focus-visible),.focus-ring-outer:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-outer,:host(:focus-visible) .focus-ring-outer.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: 2px;--focus-ring-animation: focus-ring-outer-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}.focus-ring-inner:is(:focus-visible,.focus-visible),.focus-ring-inner:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-inner,:host(:focus-visible) .focus-ring-inner.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: -3px;--focus-ring-animation: focus-ring-inner-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}@keyframes focus-ring-outer-grow{from{outline-width:0}to{outline-width:8px}}@keyframes focus-ring-outer-shrink{from{outline-width:8px}}@keyframes focus-ring-inner-grow{from{outline-width:0;outline-offset:0}to{outline-width:8px;outline-offset:-8px}}@keyframes focus-ring-inner-shrink{from{outline-width:8px;outline-offset:-8px}}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=focus-ring.cssresult.js.map

package/labs/gb/components/focus/focus-ring.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.cssresult.js","sourceRoot":"","sources":["focus-ring.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,sEAAsE;AACtE,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/focus/focus-ring.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.focus-ring{.focus-ring-outer,.focus-ring-inner{--focus-ring-outline: none;--focus-ring-offset: 0;--focus-ring-animation: none;outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);animation:var(--focus-ring-animation),var(--ripple-animation, none)}.focus-ring-outer:is(:focus-visible,.focus-visible),.focus-ring-outer:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-outer,:host(:focus-visible) .focus-ring-outer.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: 2px;--focus-ring-animation: focus-ring-outer-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}.focus-ring-inner:is(:focus-visible,.focus-visible),.focus-ring-inner:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-inner,:host(:focus-visible) .focus-ring-inner.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: -3px;--focus-ring-animation: focus-ring-inner-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}@keyframes focus-ring-outer-grow{from{outline-width:0}to{outline-width:8px}}@keyframes focus-ring-outer-shrink{from{outline-width:8px}}@keyframes focus-ring-inner-grow{from{outline-width:0;outline-offset:0}to{outline-width:8px;outline-offset:-8px}}@keyframes focus-ring-inner-shrink{from{outline-width:8px;outline-offset:-8px}}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/focus/focus-ring.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Focus ring type configuration types. */
+export type FocusRingType = 'outer' | 'inner';
+/** Focus ring type configurations. */
+export declare const FOCUS_RING_TYPES: {
+    readonly outer: "outer";
+    readonly inner: "inner";
+};
+/** Focus ring classes. */
+export declare const FOCUS_RING_CLASSES: {
+    focusRingOuter: string;
+    focusRingInner: string;
+    focusRingTarget: string;
+    focusRingHost: string;
+    focusVisible: string;
+};
+/** The state provided to the `focusRingClasses()` function. */
+export interface FocusRingClassesState {
+    /** The type of focus ring. Defaults to outer. */
+    type?: FocusRingType;
+    /** Emulates `:focus-visible`. */
+    focusVisible?: boolean;
+}
+/**
+ * Returns the focus ring classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the focus ring.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function focusRingClasses({ type, focusVisible, }?: FocusRingClassesState): ClassInfo;

package/labs/gb/components/focus/focus-ring.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
+/** Focus ring type configurations. */
+export const FOCUS_RING_TYPES = {
+    outer: 'outer',
+    inner: 'inner',
+};
+/** Focus ring classes. */
+export const FOCUS_RING_CLASSES = {
+    focusRingOuter: 'focus-ring-outer',
+    focusRingInner: 'focus-ring-inner',
+    focusRingTarget: 'focus-ring-target',
+    focusRingHost: 'focus-ring-host',
+    focusVisible: PSEUDO_CLASSES.focusVisible,
+};
+/**
+ * Returns the focus ring classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the focus ring.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function focusRingClasses({ type = FOCUS_RING_TYPES.outer, focusVisible = false, } = {}) {
+    return {
+        [FOCUS_RING_CLASSES.focusRingOuter]: type === FOCUS_RING_TYPES.outer || !type,
+        [FOCUS_RING_CLASSES.focusRingInner]: type === FOCUS_RING_TYPES.inner,
+        [FOCUS_RING_CLASSES.focusVisible]: focusVisible,
+    };
+}
+//# sourceMappingURL=focus-ring.js.map

package/labs/gb/components/focus/focus-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAK3D,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,0BAA0B;AAC1B,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,cAAc,EAAE,kBAAkB;IAClC,cAAc,EAAE,kBAAkB;IAClC,eAAe,EAAE,mBAAmB;IACpC,aAAa,EAAE,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,YAAY;CAC1C,CAAC;AAUF;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,GAAG,gBAAgB,CAAC,KAAK,EAC7B,YAAY,GAAG,KAAK,MACK,EAAE;IAC3B,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EACjC,IAAI,KAAK,gBAAgB,CAAC,KAAK,IAAI,CAAC,IAAI;QAC1C,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,gBAAgB,CAAC,KAAK;QACpE,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,YAAY;KAChD,CAAC;AACJ,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 {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Focus ring type configuration types. */\nexport type FocusRingType = 'outer' | 'inner';\n\n/** Focus ring type configurations. */\nexport const FOCUS_RING_TYPES = {\n  outer: 'outer',\n  inner: 'inner',\n} as const;\n\n/** Focus ring classes. */\nexport const FOCUS_RING_CLASSES = {\n  focusRingOuter: 'focus-ring-outer',\n  focusRingInner: 'focus-ring-inner',\n  focusRingTarget: 'focus-ring-target',\n  focusRingHost: 'focus-ring-host',\n  focusVisible: PSEUDO_CLASSES.focusVisible,\n};\n\n/** The state provided to the `focusRingClasses()` function. */\nexport interface FocusRingClassesState {\n  /** The type of focus ring. Defaults to outer. */\n  type?: FocusRingType;\n  /** Emulates `:focus-visible`. */\n  focusVisible?: boolean;\n}\n\n/**\n * Returns the focus ring classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the focus ring.\n * @return An object of class names and truthy values if they apply.\n */\nexport function focusRingClasses({\n  type = FOCUS_RING_TYPES.outer,\n  focusVisible = false,\n}: FocusRingClassesState = {}): ClassInfo {\n  return {\n    [FOCUS_RING_CLASSES.focusRingOuter]:\n      type === FOCUS_RING_TYPES.outer || !type,\n    [FOCUS_RING_CLASSES.focusRingInner]: type === FOCUS_RING_TYPES.inner,\n    [FOCUS_RING_CLASSES.focusVisible]: focusVisible,\n  };\n}\n"]}

package/labs/gb/components/focus/focus-ring.scss

@@ -0,0 +1,91 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use '../../../../tokens/versions/latest/sass/md-sys-state-focus-indicator';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.focus-ring {
+  .focus-ring-outer,
+  .focus-ring-inner {
+    --focus-ring-outline: none;
+    --focus-ring-offset: 0;
+    --focus-ring-animation: none;
+
+    outline: var(--focus-ring-outline);
+    outline-offset: var(--focus-ring-offset);
+    animation: var(--focus-ring-animation), var(--ripple-animation, none);
+  }
+
+  // Focus rings support the following DOM use cases:
+  // 1. Focus ring and interactive element are the same.
+  // 2. Focus ring is a parent of a child interactive `.focus-ring-target`.
+  // 3. Focus ring is a child of a parent interactive `.focus-ring-target`.
+  // 4. Focus ring has `.focus-ring-host` and is a within an interactive shadow DOM host.
+  //
+  // Pseudo class emulation is only needed for the focus ring element, not for
+  // the target or host elements.
+
+  .focus-ring-outer {
+    &:is(:focus-visible, .focus-visible),
+    &:has(.focus-ring-target:focus-visible),
+    .focus-ring-target:focus-visible &,
+    :host(:focus-visible) &.focus-ring-host {
+      --focus-ring-outline: #{md-sys-state-focus-indicator.$thickness} solid var(--md-sys-color-secondary);
+      --focus-ring-offset: #{md-sys-state-focus-indicator.$outer-offset};
+      --focus-ring-animation: focus-ring-outer-grow 150ms
+          cubic-bezier(0.2, 0, 0, 1),
+        focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1);
+    }
+  }
+
+  .focus-ring-inner {
+    &:is(:focus-visible, .focus-visible),
+    &:has(.focus-ring-target:focus-visible),
+    .focus-ring-target:focus-visible &,
+    :host(:focus-visible) &.focus-ring-host {
+      --focus-ring-outline: #{md-sys-state-focus-indicator.$thickness} solid var(--md-sys-color-secondary);
+      --focus-ring-offset: #{md-sys-state-focus-indicator.$inner-offset};
+      --focus-ring-animation: focus-ring-inner-grow 150ms
+          cubic-bezier(0.2, 0, 0, 1),
+        focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1);
+    }
+  }
+
+  @keyframes focus-ring-outer-grow {
+    from {
+      outline-width: 0;
+    }
+
+    to {
+      outline-width: 8px;
+    }
+  }
+
+  @keyframes focus-ring-outer-shrink {
+    from {
+      outline-width: 8px;
+    }
+  }
+
+  @keyframes focus-ring-inner-grow {
+    from {
+      outline-width: 0;
+      outline-offset: 0;
+    }
+    to {
+      outline-width: 8px;
+      outline-offset: -8px;
+    }
+  }
+
+  @keyframes focus-ring-inner-shrink {
+    from {
+      outline-width: 8px;
+      outline-offset: -8px;
+    }
+  }
+}