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

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;
+    }
+  }
+}

package/labs/gb/components/iconbutton/_icon-button-tokens.scss

@@ -0,0 +1,204 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: transparent;
+  --container-height: auto;
+  --container-shape: calc(var(--container-height) / 2);
+  --icon-color: currentColor;
+  --icon-size: 24px;
+  --outline-color: transparent;
+  --outline-width: 1px;
+  --leading-space: 0;
+  --trailing-space: 0;
+  // LINT.ThenChange(md-icon-button.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin selected {
+  --container-shape: var(--md-sys-shape-corner-md);
+  --icon-color: var(--md-sys-color-primary);
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+}
+
+@mixin filled-unselected {
+  --container-color: var(--md-sys-color-surface-container);
+  --icon-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin filled-selected {
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+}
+
+@mixin tonal {
+  --container-color: var(--md-sys-color-secondary-container);
+  --icon-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin tonal-selected {
+  --container-color: var(--md-sys-color-secondary);
+  --icon-color: var(--md-sys-color-on-secondary);
+}
+
+@mixin outlined {
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --outline-color: var(--md-sys-color-outline-variant);
+}
+
+@mixin outlined-selected {
+  --container-color: var(--md-sys-color-inverse-surface);
+  --icon-color: var(--md-sys-color-inverse-on-surface);
+}
+
+@mixin standard {
+  --icon-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin standard-selected {
+  --icon-color: var(--md-sys-color-primary);
+}
+
+@mixin xs {
+  --container-height: 32px;
+  --icon-size: 20px;
+  --leading-space: 6px;
+  --trailing-space: 6px;
+}
+
+@mixin xs-narrow {
+  --leading-space: 4px;
+  --trailing-space: 4px;
+}
+
+@mixin xs-wide {
+  --leading-space: 10px;
+  --trailing-space: 10px;
+}
+
+@mixin sm {
+  --container-height: 40px;
+  --leading-space: 8px;
+  --trailing-space: 8px;
+}
+
+@mixin sm-narrow {
+  --leading-space: 4px;
+  --trailing-space: 4px;
+}
+
+@mixin sm-wide {
+  --leading-space: 14px;
+  --trailing-space: 14px;
+}
+
+@mixin md {
+  --container-height: 56px;
+  --leading-space: 16px;
+  --trailing-space: 16px;
+}
+
+@mixin md-narrow {
+  --leading-space: 12px;
+  --trailing-space: 12px;
+}
+
+@mixin md-wide {
+  --leading-space: 24px;
+  --trailing-space: 24px;
+}
+
+@mixin md-selected {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin lg {
+  --container-height: 96px;
+  --icon-size: 32px;
+  --leading-space: 32px;
+  --trailing-space: 32px;
+}
+
+@mixin lg-narrow {
+  --leading-space: 16px;
+  --trailing-space: 16px;
+}
+
+@mixin lg-wide {
+  --leading-space: 48px;
+  --outline-width: 2px;
+  --trailing-space: 48px;
+}
+
+@mixin lg-selected {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin xl {
+  --container-height: 136px;
+  --icon-size: 40px;
+  --leading-space: 48px;
+  --outline-width: 3px;
+  --trailing-space: 48px;
+}
+
+@mixin xl-narrow {
+  --leading-space: 32px;
+  --trailing-space: 32px;
+}
+
+@mixin xl-wide {
+  --leading-space: 72px;
+  --trailing-space: 72px;
+}
+
+@mixin xl-selected {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin square-md {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin square-lg {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-xl {
+  --container-shape: var(--md-sys-shape-corner-xl);
+}
+
+@mixin square-selected {
+  --container-shape: calc(var(--container-height) / 2);
+}
+
+@mixin pressed {
+  --container-shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin pressed-md {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin pressed-lg {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin pressed-xl {
+  --container-shape: var(--md-sys-shape-corner-lg);
+}
+
+@mixin disabled {
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}

package/labs/gb/components/iconbutton/icon-button.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--outline-color: transparent;--outline-width: 1px;--leading-space: 0;--trailing-space: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--outline-width: 2px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}}/*# sourceMappingURL=icon-button.css.map */

package/labs/gb/components/iconbutton/icon-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["icon-button.scss","_icon-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCLF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,yEAKA,iDACA,0CDHE,0BCOF,+CACA,6CDNI,2ECUJ,yDACA,qDDRI,wECYJ,+CACA,6CDTE,yBCaF,2DACA,yDDZI,uECgBJ,iDACA,+CDbE,4BCiBF,qDACA,qDDhBI,0ECoBJ,uDACA,qDDjBE,4BCqBF,qDDnBI,0ECuBJ,0CDnBE,sBCuBF,yBACA,kBACA,qBACA,sBDxBI,8CC4BJ,qBACA,sBD1BI,4CC8BJ,sBACA,uBD3BE,sBC+BF,yBACA,qBACA,sBD/BI,8CCmCJ,qBACA,sBDjCI,4CCqCJ,sBACA,uBDlCE,sBCsCF,yBACA,sBACA,uBDtCI,8CC0CJ,sBACA,uBDxCI,4CC4CJ,sBACA,uBD1CI,oEC8CJ,iDD1CE,sBC8CF,yBACA,kBACA,sBACA,uBD/CI,8CCmDJ,sBACA,uBDjDI,4CCqDJ,sBACA,qBACA,uBDpDI,oECwDJ,iDDpDE,sBCwDF,0BACA,kBACA,sBACA,qBACA,uBD1DI,8CC8DJ,sBACA,uBD5DI,4CCgEJ,sBACA,uBD9DI,oECkEJ,iDD9DE,0BCkEF,iDDhEI,8CCoEJ,iDDjEI,8CCqEJ,iDDlEI,8CCsEJ,iDDnEI,wECuEJ,qDDnEE,+DCuEF,iDDrEI,mFCyEJ,iDDtEI,mFC0EJ,iDDvEI,mFC2EJ,iDDvEE,kCC2EF,wEACA,mEDxEE,UACE,oBACA,mBACA,wCACA,uDACA,qCACA,+BACA,wBACA,WACE,iFAEF,iCAGF,+CACE,eAGF,8CACE","file":"icon-button.css"}

package/labs/gb/components/iconbutton/icon-button.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/iconbutton/icon-button.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/iconbutton/icon-button.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--outline-color: transparent;--outline-width: 1px;--leading-space: 0;--trailing-space: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--outline-width: 2px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=icon-button.cssresult.js.map

package/labs/gb/components/iconbutton/icon-button.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.cssresult.js","sourceRoot":"","sources":["icon-button.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4EAA4E;AAC5E,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/iconbutton/icon-button.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.ripple, md.comp.focus-ring;@layer md.comp.icon-btn{.icon-btn{--container-color: transparent;--container-height: auto;--container-shape: calc(var(--container-height) / 2);--icon-color: currentColor;--icon-size: 24px;--outline-color: transparent;--outline-width: 1px;--leading-space: 0;--trailing-space: 0}.icon-btn:is(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-md);--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-filled{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-filled:where(.icon-btn-unselected,[aria-pressed=false]){--container-color: var(--md-sys-color-surface-container);--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-filled:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.icon-btn.icon-btn-tonal{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container)}.icon-btn.icon-btn-tonal:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary)}.icon-btn.icon-btn-outlined{--icon-color: var(--md-sys-color-on-surface-variant);--outline-color: var(--md-sys-color-outline-variant)}.icon-btn.icon-btn-outlined:where(.icon-btn-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-inverse-surface);--icon-color: var(--md-sys-color-inverse-on-surface)}.icon-btn.icon-btn-standard{--icon-color: var(--md-sys-color-on-surface-variant)}.icon-btn.icon-btn-standard:where(.icon-btn-selected,[aria-pressed=true]){--icon-color: var(--md-sys-color-primary)}.icon-btn.icon-btn-xs{--container-height: 32px;--icon-size: 20px;--leading-space: 6px;--trailing-space: 6px}.icon-btn.icon-btn-xs:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-xs:where(.icon-btn-wide){--leading-space: 10px;--trailing-space: 10px}.icon-btn.icon-btn-sm{--container-height: 40px;--leading-space: 8px;--trailing-space: 8px}.icon-btn.icon-btn-sm:where(.icon-btn-narrow){--leading-space: 4px;--trailing-space: 4px}.icon-btn.icon-btn-sm:where(.icon-btn-wide){--leading-space: 14px;--trailing-space: 14px}.icon-btn.icon-btn-md{--container-height: 56px;--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-md:where(.icon-btn-narrow){--leading-space: 12px;--trailing-space: 12px}.icon-btn.icon-btn-md:where(.icon-btn-wide){--leading-space: 24px;--trailing-space: 24px}.icon-btn.icon-btn-md:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-lg{--container-height: 96px;--icon-size: 32px;--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-lg:where(.icon-btn-narrow){--leading-space: 16px;--trailing-space: 16px}.icon-btn.icon-btn-lg:where(.icon-btn-wide){--leading-space: 48px;--outline-width: 2px;--trailing-space: 48px}.icon-btn.icon-btn-lg:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-xl{--container-height: 136px;--icon-size: 40px;--leading-space: 48px;--outline-width: 3px;--trailing-space: 48px}.icon-btn.icon-btn-xl:where(.icon-btn-narrow){--leading-space: 32px;--trailing-space: 32px}.icon-btn.icon-btn-xl:where(.icon-btn-wide){--leading-space: 72px;--trailing-space: 72px}.icon-btn.icon-btn-xl:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square{--container-shape: var(--md-sys-shape-corner-md)}.icon-btn.icon-btn-square:where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn.icon-btn-square:where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-xl)}.icon-btn.icon-btn-square:where(.icon-btn-selected,[aria-pressed=true]){--container-shape: calc(var(--container-height) / 2)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)){--container-shape: var(--md-sys-shape-corner-sm)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-md){--container-shape: var(--md-sys-shape-corner-md)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-lg){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:active,.active):where(:not(:disabled,.disabled)):where(.icon-btn-xl){--container-shape: var(--md-sys-shape-corner-lg)}.icon-btn:is(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 10%);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.icon-btn{display:inline-grid;place-items:center;background-color:var(--container-color);border:var(--outline-width) solid var(--outline-color);border-radius:var(--container-shape);height:var(--container-height);color:var(--icon-color);transition:border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),var(--ripple-transition);--md-icon-size: var(--icon-size)}.icon-btn:not(.icon-btn-narrow,.icon-btn-wide){aspect-ratio:1}.icon-btn:is(.icon-btn-narrow,.icon-btn-wide){padding-inline:var(--leading-space) var(--trailing-space)}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/iconbutton/icon-button.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Icon Button color configuration types. */
+export type IconButtonColor = 'filled' | 'tonal' | 'outlined' | 'standard';
+/** Icon Button color configurations. */
+export declare const ICON_BUTTON_COLORS: {
+    readonly filled: "filled";
+    readonly tonal: "tonal";
+    readonly outlined: "outlined";
+    readonly standard: "standard";
+};
+/** Icon Button size configuration types. */
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Icon Button size configurations. */
+export declare const ICON_BUTTON_SIZES: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+};
+/** Icon Button width configuration types. */
+export type IconButtonWidth = 'narrow' | 'wide' | '';
+/** Icon Button width configurations. */
+export declare const ICON_BUTTON_WIDTHS: {
+    readonly narrow: "narrow";
+    readonly wide: "wide";
+};
+/** Icon Button classes. */
+export declare const ICON_BUTTON_CLASSES: {
+    iconBtn: string;
+    iconBtnFilled: string;
+    iconBtnTonal: string;
+    iconBtnOutlined: string;
+    iconBtnStandard: string;
+    iconBtnXs: string;
+    iconBtnSm: string;
+    iconBtnMd: string;
+    iconBtnLg: string;
+    iconBtnXl: string;
+    iconBtnSquare: string;
+    iconBtnNarrow: string;
+    iconBtnWide: string;
+    iconBtnUnselected: string;
+    iconBtnSelected: string;
+    active: string;
+    disabled: string;
+};
+/** The state provided to the `iconButtonClasses()` function. */
+export interface IconButtonClassesState {
+    /** The color of the icon button. */
+    color?: IconButtonColor;
+    /** The size of the icon button. */
+    size?: IconButtonSize;
+    /** The width of the icon button. */
+    width?: IconButtonWidth;
+    /** Whether the icon button is a square shape. */
+    square?: boolean;
+    /** Whether the toggle button is selected, if not undefined. */
+    selected?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the icon button classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the icon button.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function iconButtonClasses({ color, size, width, square, selected, active, disabled, }?: IconButtonClassesState): ClassInfo;
+/**
+ * Sets up icon button functionality for the given element.
+ *
+ * @param iconButton The element on which to set up icon button functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupIconButton(iconButton: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds icon button styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<button class="${iconButton({color: 'filled'})}">
+ *   <md-icon>favorite</md-icon>
+ * </button>`;
+ * ```
+ */
+export declare const iconButton: (state?: IconButtonClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/iconbutton/icon-button.js

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES, isDisabled } from '../shared/pseudo-classes.js';
+/** Icon Button color configurations. */
+export const ICON_BUTTON_COLORS = {
+    filled: 'filled',
+    tonal: 'tonal',
+    outlined: 'outlined',
+    standard: 'standard',
+};
+/** Icon Button size configurations. */
+export const ICON_BUTTON_SIZES = {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+};
+/** Icon Button width configurations. */
+export const ICON_BUTTON_WIDTHS = {
+    narrow: 'narrow',
+    wide: 'wide',
+};
+/** Icon Button classes. */
+export const ICON_BUTTON_CLASSES = {
+    iconBtn: 'icon-btn',
+    iconBtnFilled: 'icon-btn-filled',
+    iconBtnTonal: 'icon-btn-tonal',
+    iconBtnOutlined: 'icon-btn-outlined',
+    iconBtnStandard: 'icon-btn-standard',
+    iconBtnXs: 'icon-btn-xs',
+    iconBtnSm: 'icon-btn-sm',
+    iconBtnMd: 'icon-btn-md',
+    iconBtnLg: 'icon-btn-lg',
+    iconBtnXl: 'icon-btn-xl',
+    iconBtnSquare: 'icon-btn-square',
+    iconBtnNarrow: 'icon-btn-narrow',
+    iconBtnWide: 'icon-btn-wide',
+    iconBtnUnselected: 'icon-btn-unselected',
+    iconBtnSelected: 'icon-btn-selected',
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the icon button classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the icon button.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function iconButtonClasses({ color, size, width, square = false, selected, active = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [ICON_BUTTON_CLASSES.iconBtn]: true,
+        [ICON_BUTTON_CLASSES.iconBtnFilled]: color === ICON_BUTTON_COLORS.filled,
+        [ICON_BUTTON_CLASSES.iconBtnTonal]: color === ICON_BUTTON_COLORS.tonal,
+        [ICON_BUTTON_CLASSES.iconBtnOutlined]: color === ICON_BUTTON_COLORS.outlined,
+        [ICON_BUTTON_CLASSES.iconBtnStandard]: color === ICON_BUTTON_COLORS.standard || !color,
+        [ICON_BUTTON_CLASSES.iconBtnXs]: size === ICON_BUTTON_SIZES.xs,
+        [ICON_BUTTON_CLASSES.iconBtnSm]: size === ICON_BUTTON_SIZES.sm || !size,
+        [ICON_BUTTON_CLASSES.iconBtnMd]: size === ICON_BUTTON_SIZES.md,
+        [ICON_BUTTON_CLASSES.iconBtnLg]: size === ICON_BUTTON_SIZES.lg,
+        [ICON_BUTTON_CLASSES.iconBtnXl]: size === ICON_BUTTON_SIZES.xl,
+        [ICON_BUTTON_CLASSES.iconBtnNarrow]: width === ICON_BUTTON_WIDTHS.narrow,
+        [ICON_BUTTON_CLASSES.iconBtnWide]: width === ICON_BUTTON_WIDTHS.wide,
+        [ICON_BUTTON_CLASSES.iconBtnSquare]: square,
+        [ICON_BUTTON_CLASSES.iconBtnUnselected]: selected === false,
+        [ICON_BUTTON_CLASSES.iconBtnSelected]: selected === true,
+        [ICON_BUTTON_CLASSES.active]: active,
+        [ICON_BUTTON_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up icon button functionality for the given element.
+ *
+ * @param iconButton The element on which to set up icon button functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupIconButton(iconButton, opts) {
+    setupDispatchHooks(iconButton, 'click');
+    setupRipple(iconButton, opts);
+    iconButton.addEventListener('click', (event) => {
+        if (isDisabled(iconButton)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+        afterDispatch(event, () => {
+            const isToggle = iconButton.hasAttribute('aria-pressed');
+            if (event.defaultPrevented || !isToggle) {
+                return;
+            }
+            const isPressed = iconButton.ariaPressed === 'true';
+            iconButton.ariaPressed = String(!isPressed);
+            iconButton.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            iconButton.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+    }, opts);
+}
+/**
+ * A Lit directive that adds icon button styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<button class="${iconButton({color: 'filled'})}">
+ *   <md-icon>favorite</md-icon>
+ * </button>`;
+ * ```
+ */
+export const iconButton = createClassMapDirective({
+    getClasses: iconButtonClasses,
+    setupElement: setupIconButton,
+});
+//# sourceMappingURL=icon-button.js.map