@material/web 2.4.2-nightly.7619df0.0 → 2.4.2-nightly.7d7cbf4.0

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

@@ -0,0 +1,202 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --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;
+}
+
+@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,UCNF,+BACA,yBACA,qDACA,2BACA,kBACA,6BACA,qBACA,mBACA,oBDCE,qDCGF,iDACA,0CDDE,0BCKF,+CACA,6CDJI,2ECQJ,yDACA,qDDNI,wECUJ,+CACA,6CDPE,yBCWF,2DACA,yDDVI,uECcJ,iDACA,+CDXE,4BCeF,qDACA,qDDdI,0ECkBJ,uDACA,qDDfE,4BCmBF,qDDjBI,0ECqBJ,0CDjBE,sBCqBF,yBACA,kBACA,qBACA,sBDtBI,8CC0BJ,qBACA,sBDxBI,4CC4BJ,sBACA,uBDzBE,sBC6BF,yBACA,qBACA,sBD7BI,8CCiCJ,qBACA,sBD/BI,4CCmCJ,sBACA,uBDhCE,sBCoCF,yBACA,sBACA,uBDpCI,8CCwCJ,sBACA,uBDtCI,4CC0CJ,sBACA,uBDxCI,oEC4CJ,iDDxCE,sBC4CF,yBACA,kBACA,sBACA,uBD7CI,8CCiDJ,sBACA,uBD/CI,4CCmDJ,sBACA,qBACA,uBDlDI,oECsDJ,iDDlDE,sBCsDF,0BACA,kBACA,sBACA,qBACA,uBDxDI,8CC4DJ,sBACA,uBD1DI,4CC8DJ,sBACA,uBD5DI,oECgEJ,iDD5DE,0BCgEF,iDD9DI,8CCkEJ,iDD/DI,8CCmEJ,iDDhEI,8CCoEJ,iDDjEI,wECqEJ,qDDjEE,+DCqEF,iDDnEI,mFCuEJ,iDDpEI,mFCwEJ,iDDrEI,mFCyEJ,iDDrEE,kCCyEF,wEACA,mEDtEE,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("@material/web/labs/gb/components/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 '@material/web/internal/events/dispatch-hooks.js';
+import { focusRingClasses } from '@material/web/labs/gb/components/focus/focus-ring.js';
+import { rippleClasses, setupRipple, } from '@material/web/labs/gb/components/ripple/ripple.js';
+import { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
+import { PSEUDO_CLASSES, isDisabled, } from '@material/web/labs/gb/components/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

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '@material/web/internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {\n  rippleClasses,\n  setupRipple,\n} from '@material/web/labs/gb/components/ripple/ripple.js';\nimport {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {\n  PSEUDO_CLASSES,\n  isDisabled,\n} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Icon Button color configuration types. */\nexport type IconButtonColor = 'filled' | 'tonal' | 'outlined' | 'standard';\n\n/** Icon Button color configurations. */\nexport const ICON_BUTTON_COLORS = {\n  filled: 'filled',\n  tonal: 'tonal',\n  outlined: 'outlined',\n  standard: 'standard',\n} as const;\n\n/** Icon Button size configuration types. */\nexport type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Icon Button size configurations. */\nexport const ICON_BUTTON_SIZES = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\n/** Icon Button width configuration types. */\nexport type IconButtonWidth = 'narrow' | 'wide' | '';\n\n/** Icon Button width configurations. */\nexport const ICON_BUTTON_WIDTHS = {\n  narrow: 'narrow',\n  wide: 'wide',\n} as const;\n\n/** Icon Button classes. */\nexport const ICON_BUTTON_CLASSES = {\n  iconBtn: 'icon-btn',\n  iconBtnFilled: 'icon-btn-filled',\n  iconBtnTonal: 'icon-btn-tonal',\n  iconBtnOutlined: 'icon-btn-outlined',\n  iconBtnStandard: 'icon-btn-standard',\n  iconBtnXs: 'icon-btn-xs',\n  iconBtnSm: 'icon-btn-sm',\n  iconBtnMd: 'icon-btn-md',\n  iconBtnLg: 'icon-btn-lg',\n  iconBtnXl: 'icon-btn-xl',\n  iconBtnSquare: 'icon-btn-square',\n  iconBtnNarrow: 'icon-btn-narrow',\n  iconBtnWide: 'icon-btn-wide',\n  iconBtnUnselected: 'icon-btn-unselected',\n  iconBtnSelected: 'icon-btn-selected',\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `iconButtonClasses()` function. */\nexport interface IconButtonClassesState {\n  /** The color of the icon button. */\n  color?: IconButtonColor;\n  /** The size of the icon button. */\n  size?: IconButtonSize;\n  /** The width of the icon button. */\n  width?: IconButtonWidth;\n  /** Whether the icon button is a square shape. */\n  square?: boolean;\n  /** Whether the toggle button is selected, if not undefined. */\n  selected?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the icon button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the icon button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function iconButtonClasses({\n  color,\n  size,\n  width,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}: IconButtonClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [ICON_BUTTON_CLASSES.iconBtn]: true,\n    [ICON_BUTTON_CLASSES.iconBtnFilled]: color === ICON_BUTTON_COLORS.filled,\n    [ICON_BUTTON_CLASSES.iconBtnTonal]: color === ICON_BUTTON_COLORS.tonal,\n    [ICON_BUTTON_CLASSES.iconBtnOutlined]:\n      color === ICON_BUTTON_COLORS.outlined,\n    [ICON_BUTTON_CLASSES.iconBtnStandard]:\n      color === ICON_BUTTON_COLORS.standard || !color,\n    [ICON_BUTTON_CLASSES.iconBtnXs]: size === ICON_BUTTON_SIZES.xs,\n    [ICON_BUTTON_CLASSES.iconBtnSm]: size === ICON_BUTTON_SIZES.sm || !size,\n    [ICON_BUTTON_CLASSES.iconBtnMd]: size === ICON_BUTTON_SIZES.md,\n    [ICON_BUTTON_CLASSES.iconBtnLg]: size === ICON_BUTTON_SIZES.lg,\n    [ICON_BUTTON_CLASSES.iconBtnXl]: size === ICON_BUTTON_SIZES.xl,\n    [ICON_BUTTON_CLASSES.iconBtnNarrow]: width === ICON_BUTTON_WIDTHS.narrow,\n    [ICON_BUTTON_CLASSES.iconBtnWide]: width === ICON_BUTTON_WIDTHS.wide,\n    [ICON_BUTTON_CLASSES.iconBtnSquare]: square,\n    [ICON_BUTTON_CLASSES.iconBtnUnselected]: selected === false,\n    [ICON_BUTTON_CLASSES.iconBtnSelected]: selected === true,\n    [ICON_BUTTON_CLASSES.active]: active,\n    [ICON_BUTTON_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up icon button functionality for the given element.\n *\n * @param iconButton The element on which to set up icon button functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupIconButton(\n  iconButton: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupDispatchHooks(iconButton, 'click');\n  setupRipple(iconButton, opts);\n  iconButton.addEventListener(\n    'click',\n    (event) => {\n      if (isDisabled(iconButton)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      afterDispatch(event, () => {\n        const isToggle = iconButton.hasAttribute('aria-pressed');\n        if (event.defaultPrevented || !isToggle) {\n          return;\n        }\n\n        const isPressed = iconButton.ariaPressed === 'true';\n        iconButton.ariaPressed = String(!isPressed);\n        iconButton.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        iconButton.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds icon button styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${iconButton({color: 'filled'})}\">\n *   <md-icon>favorite</md-icon>\n * </button>`;\n * ```\n */\nexport const iconButton = createClassMapDirective({\n  getClasses: iconButtonClasses,\n  setupElement: setupIconButton,\n});\n"]}

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

@@ -0,0 +1,153 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'icon-button-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.icon-btn {
+  .icon-btn {
+    & {
+      @include icon-button-tokens.root;
+    }
+    &:is(.icon-btn-selected, [aria-pressed='true']) {
+      @include icon-button-tokens.selected;
+    }
+    &.icon-btn-filled {
+      @include icon-button-tokens.filled;
+      &:where(.icon-btn-unselected, [aria-pressed='false']) {
+        @include icon-button-tokens.filled-unselected;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.filled-selected;
+      }
+    }
+    &.icon-btn-tonal {
+      @include icon-button-tokens.tonal;
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.tonal-selected;
+      }
+    }
+    &.icon-btn-outlined {
+      @include icon-button-tokens.outlined;
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.outlined-selected;
+      }
+    }
+    &.icon-btn-standard {
+      @include icon-button-tokens.standard;
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.standard-selected;
+      }
+    }
+    &.icon-btn-xs {
+      @include icon-button-tokens.xs;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.xs-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.xs-wide;
+      }
+    }
+    &.icon-btn-sm {
+      @include icon-button-tokens.sm;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.sm-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.sm-wide;
+      }
+    }
+    &.icon-btn-md {
+      @include icon-button-tokens.md;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.md-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.md-wide;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.md-selected;
+      }
+    }
+    &.icon-btn-lg {
+      @include icon-button-tokens.lg;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.lg-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.lg-wide;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.lg-selected;
+      }
+    }
+    &.icon-btn-xl {
+      @include icon-button-tokens.xl;
+      &:where(.icon-btn-narrow) {
+        @include icon-button-tokens.xl-narrow;
+      }
+      &:where(.icon-btn-wide) {
+        @include icon-button-tokens.xl-wide;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.xl-selected;
+      }
+    }
+    &.icon-btn-square {
+      @include icon-button-tokens.square;
+      &:where(.icon-btn-md) {
+        @include icon-button-tokens.square-md;
+      }
+      &:where(.icon-btn-lg) {
+        @include icon-button-tokens.square-lg;
+      }
+      &:where(.icon-btn-xl) {
+        @include icon-button-tokens.square-xl;
+      }
+      &:where(.icon-btn-selected, [aria-pressed='true']) {
+        @include icon-button-tokens.square-selected;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include icon-button-tokens.pressed;
+      &:where(.icon-btn-md) {
+        @include icon-button-tokens.pressed-md;
+      }
+      &:where(.icon-btn-lg) {
+        @include icon-button-tokens.pressed-lg;
+      }
+      &:where(.icon-btn-xl) {
+        @include icon-button-tokens.pressed-xl;
+      }
+    }
+    &:is(:disabled, .disabled) {
+      @include icon-button-tokens.disabled;
+    }
+
+    & {
+      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);
+    }
+
+    &:not(.icon-btn-narrow, .icon-btn-wide) {
+      aspect-ratio: 1;
+    }
+
+    &:is(.icon-btn-narrow, .icon-btn-wide) {
+      padding-inline: var(--leading-space) var(--trailing-space);
+    }
+  }
+}