@material/web 2.4.2-nightly.e16e2f6.0 → 2.4.2-nightly.e58e4e8.0

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-fab.js","sourceRoot":"","sources":["md-gb-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAS5C,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {FabElement} from './fab-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-fab': FabElement;\n  }\n}\n\ncustomElements.define('md-gb-fab', FabElement);\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;
+    }
+  }
+}

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-element.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import type { IconButtonColor, IconButtonSize, IconButtonWidth } from './icon-button.js';
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/form-submitter.js").FormSubmitter>>;
+/**
+ * A Material Design icon button component.
+ *
+ * @slot - Used to display an icon.
+ * @fires {InputEvent} input - Fired when a toggle icon button is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when a toggle button is selected or unselected. --bubbles
+ * @csspart icon-btn - The icon button's root element.
+ * @cssprop --container-color
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ */
+export declare class IconButtonElement extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultOrNative[];
+    /**
+     * The color of the button.
+     */
+    color: IconButtonColor;
+    /**
+     * The size of the button.
+     */
+    size: IconButtonSize;
+    /**
+     * Changes the shape of the button to be square.
+     */
+    square: boolean;
+    /**
+     * Changes the width of the button.
+     */
+    width: IconButtonWidth;
+    /**
+     * A string indicating the behavior of the button.
+     *
+     * - "submit" (default): A button that submits its associated form.
+     * - "reset": A button that resets its associated form.
+     * - "button": A normal button.
+     * - "toggle": A toggle button using the `selected` property.
+     * - "link": An anchor link (`<a>`). Type is always "link" when `href` is set.
+     */
+    get type(): string;
+    set type(type: string);
+    /**
+     * Whether or not the button is "soft-disabled" (disabled but still
+     * focusable).
+     */
+    softDisabled: boolean;
+    /**
+     * Whether or not the button is selected, when `type="toggle"`.
+     */
+    selected: boolean;
+    /**
+     * The URL that the link button points to.
+     */
+    href: string;
+    /**
+     * The filename to use when downloading the linked resource.
+     */
+    download: string;
+    /**
+     * Where to display the linked `href` URL for a link button.
+     */
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+}
+export {};