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

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

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 '@material/web/labs/gb/components/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;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAMzF,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 {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.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;
+    }
+  }
+}

package/labs/gb/components/radio/_radio-tokens.scss

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --icon-size: 20px;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --state-layer-shape: 50%;
+  --state-layer-size: 40px;
+}
+
+@mixin hovered {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin focused {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin pressed {
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected {
+  --icon-color: var(--md-sys-color-primary);
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected-pressed {
+  --state-layer-color: var(--md-sys-color-on-surface);
+}
+
+@mixin disabled {
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}

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

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '@material/web/labs/behaviors/form-associated.js';
+import { RadioValidator } from '@material/web/labs/behaviors/validators/radio-validator.js';
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design radio component. */
+        'md-radio': Radio;
+    }
+}
+declare const radioBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & (abstract new (...args: any[]) => import("@material/web/labs/behaviors/focusable.js").Focusable) & typeof LitElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/constraint-validation.js").ConstraintValidation>;
+/**
+ * A Material Design radio component.
+ */
+export declare class Radio extends radioBaseClass {
+    static styles: CSSResultOrNative[];
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked(): boolean;
+    set checked(checked: boolean);
+    /**
+     * The default checked state of the radio.
+     */
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    /**
+     * Whether or not the radio is required. If any radio is required in a group,
+     * all radios are implicitly required.
+     */
+    required: boolean;
+    /**
+     * The element value to use in form submission when checked.
+     */
+    value: string;
+    private readonly radio;
+    private readonly selectionController;
+    /**
+     * Mimics the behavior of <input> dirty checkedness, where the `checked`
+     * attribute only updates the checked state if the radio has not been
+     * interacted with.
+     *
+     * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+     */
+    private dirtyCheckedness;
+    private isFocused;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    [getFormValue](): string;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): RadioValidator;
+    [getValidityAnchor](): HTMLElement;
+}
+export {};

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

@@ -0,0 +1,186 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { afterDispatch, setupDispatchHooks, } from '@material/web/internal/events/dispatch-hooks.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
+import { internals, mixinElementInternals, } from '@material/web/labs/behaviors/element-internals.js';
+import { mixinFocusable } from '@material/web/labs/behaviors/focusable.js';
+import { getFormState, getFormValue, mixinFormAssociated, } from '@material/web/labs/behaviors/form-associated.js';
+import { RadioValidator } from '@material/web/labs/behaviors/validators/radio-validator.js';
+import { SingleSelectionController } from '@material/web/radio/internal/single-selection-controller.js';
+import { css, html, isServer, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import radioStyles from './radio.css' with { type: 'css' }; // github-only
+// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only
+import { radio } from './radio.js';
+// Separate variable needed for closure.
+const radioBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))));
+/**
+ * A Material Design radio component.
+ */
+let Radio = class Radio extends radioBaseClass {
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked() {
+        return this[internals].ariaChecked === 'true';
+    }
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
+            return;
+        }
+        this[internals].ariaChecked = String(checked);
+        this.requestUpdate('checked', wasChecked);
+        this.selectionController.handleCheckedChange();
+    }
+    /**
+     * The default checked state of the radio.
+     */
+    get defaultChecked() {
+        return this.hasAttribute('checked');
+    }
+    set defaultChecked(value) {
+        this.toggleAttribute('checked', value || false);
+    }
+    constructor() {
+        super();
+        /**
+         * Whether or not the radio is required. If any radio is required in a group,
+         * all radios are implicitly required.
+         */
+        this.required = false;
+        /**
+         * The element value to use in form submission when checked.
+         */
+        this.value = 'on';
+        this.selectionController = new SingleSelectionController(this);
+        /**
+         * Mimics the behavior of <input> dirty checkedness, where the `checked`
+         * attribute only updates the checked state if the radio has not been
+         * interacted with.
+         *
+         * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+         */
+        this.dirtyCheckedness = false;
+        this.isFocused = false;
+        if (isServer)
+            return;
+        this[internals].role = 'radio';
+        this.addController(this.selectionController);
+        setupDispatchHooks(this, 'click', 'keydown');
+        this.addEventListener('click', (event) => {
+            // Return if disabled, or already checked since clicking on a checked
+            // radio does not dispatch events.
+            if (this.disabled || this.checked)
+                return;
+            afterDispatch(event, () => {
+                if (event.defaultPrevented)
+                    return;
+                // Per spec, clicking on a radio input always selects it.
+                this.checked = true;
+                this.dirtyCheckedness = true;
+                this.dispatchEvent(new Event('change', { bubbles: true }));
+                this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            });
+        });
+        this.addEventListener('keydown', (event) => {
+            afterDispatch(event, () => {
+                if (event.key !== ' ' || event.defaultPrevented) {
+                    return;
+                }
+                this.click();
+            });
+        });
+        this.addEventListener('focus', () => {
+            this.isFocused = true;
+        });
+        this.addEventListener('blur', () => {
+            this.isFocused = false;
+        });
+    }
+    render() {
+        return html `<div
+      part="radio"
+      class="ripple-host focus-ring-host ${radio({
+            checked: this.checked,
+            disabled: this.disabled,
+            focus: this.isFocused,
+        })}"></div>`;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'checked' && this.dirtyCheckedness) {
+            // The 'checked' attribute does not update radios that have been
+            // interacted with.
+            return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    [getFormValue]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
+    formResetCallback() {
+        this.dirtyCheckedness = false;
+        this.checked = this.defaultChecked;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    [createValidator]() {
+        return new RadioValidator(() => {
+            if (!this.selectionController) {
+                // Validation runs on superclass construction, so selection controller
+                // might not actually be ready until this class constructs.
+                return [this];
+            }
+            return this.selectionController.controls;
+        });
+    }
+    [getValidityAnchor]() {
+        return this.radio;
+    }
+};
+Radio.styles = [
+    focusRingStyles,
+    rippleStyles,
+    radioStyles,
+    css `
+      :host {
+        display: inline-flex;
+        outline: none;
+      }
+      .radio {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], Radio.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean })
+], Radio.prototype, "required", void 0);
+__decorate([
+    property()
+], Radio.prototype, "value", void 0);
+__decorate([
+    query('.radio', true)
+], Radio.prototype, "radio", void 0);
+__decorate([
+    state()
+], Radio.prototype, "isFocused", void 0);
+Radio = __decorate([
+    customElement('md-radio')
+], Radio);
+export { Radio };
+//# sourceMappingURL=md-radio.js.map