@tylertech/forge 3.4.1 → 3.5.0

package/esm/core/utils/a11y-utils.d.ts

@@ -11,6 +11,17 @@
  * Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
  * The original source code can be found at: [GitHub](https://github.com/material-components/material-web/blob/main/internal/aria/aria.ts)
  */
+/**
+ * Augment ElementInternals to support `CustomStateSet`.
+ */
+declare global {
+    interface CustomStateSet extends Set<string> {
+        forEach(callbackfn: (value: string, key: string, parent: CustomStateSet) => void, thisArg?: any): void;
+    }
+    interface ElementInternals {
+        readonly states: CustomStateSet;
+    }
+}
 /**
  * Reflective ARIA property name types.
  */
@@ -26,7 +37,7 @@ export declare const ARIA_PROPERTIES: ARIAProperty[];
 /**
  * ARIA role values.
  */
-export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
+export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'meter' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
 /**
  * Strictly typed ARIA properties.
  */
@@ -124,3 +135,11 @@ export type DefaultAriaOptions = {
  * }
  */
 export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, { setAttribute }?: DefaultAriaOptions): void;
+/**
+ * Adds or removes a state from an element's custom state set.
+ *
+ * @param internals - The element's internals object.
+ * @param state - The name of the custom state to toggle.
+ * @param value - Whether to add or remove the state.
+ */
+export declare function toggleState(internals: ElementInternals, state: string, value: boolean): void;

package/esm/core/utils/a11y-utils.js

@@ -69,8 +69,8 @@ const ARIA_ATTRIBUTES_TO_PROPERTIES = {
     'aria-colindex': 'ariaColIndex',
     'aria-colspan': 'ariaColSpan',
     'aria-current': 'ariaCurrent',
-    'aria-disabled': 'ariaDisabled',
     'aria-description': 'ariaDescription',
+    'aria-disabled': 'ariaDisabled',
     'aria-expanded': 'ariaExpanded',
     'aria-haspopup': 'ariaHasPopup',
     'aria-hidden': 'ariaHidden',
@@ -166,3 +166,28 @@ export function setDefaultAria(element, internals, properties, { setAttribute }
         }
     });
 }
+/**
+ * Adds or removes a state from an element's custom state set.
+ *
+ * @param internals - The element's internals object.
+ * @param state - The name of the custom state to toggle.
+ * @param value - Whether to add or remove the state.
+ */
+export function toggleState(internals, state, value) {
+    if (value) {
+        try {
+            internals.states.add(state);
+        }
+        catch {
+            internals.states.add(`--${state}`);
+        }
+    }
+    else {
+        try {
+            internals.states.delete(state);
+        }
+        catch {
+            internals.states.delete(`--${state}`);
+        }
+    }
+}

package/esm/divider/divider.js

@@ -8,7 +8,7 @@ import { attachShadowTemplate, coerceBoolean, customElement } from '@tylertech/f
 import { BaseComponent } from '../core/base/base-component';
 import { DIVIDER_CONSTANTS } from './divider-constants';
 const template = '<template><div class=\"forge-divider\" part=\"root\"></div></template>';
-const styles = ':host{--_divider-margin:var(--forge-divider-margin, 0)}:host{display:block;contain:content;margin:var(--_divider-margin)}:host([hidden]){display:none}.forge-divider{--_divider-color:var(--forge-divider-color, var(--forge-theme-outline, #e0e0e0));--_divider-width:var(--forge-divider-width, var(--forge-border-thin, 1px));--_divider-border-style:var(--forge-divider-border-style, solid)}.forge-divider{border:none;border-bottom-color:var(--_divider-color);border-bottom-width:var(--_divider-width);border-bottom-style:var(--_divider-border-style);height:0}:host([vertical]){display:inline-block;height:100%}:host([vertical]) .forge-divider{border:none;border-right-color:var(--_divider-color);border-right-width:var(--_divider-width);border-right-style:var(--_divider-border-style);height:100%;width:0}';
+const styles = ':host{--_divider-margin:var(--forge-divider-margin, 0)}:host{display:block;margin:var(--_divider-margin)}:host([hidden]){display:none}.forge-divider{--_divider-color:var(--forge-divider-color, var(--forge-theme-outline, #e0e0e0));--_divider-width:var(--forge-divider-width, var(--forge-border-thin, 1px));--_divider-border-style:var(--forge-divider-border-style, solid)}.forge-divider{border:none;border-bottom-color:var(--_divider-color);border-bottom-width:var(--_divider-width);border-bottom-style:var(--_divider-border-style);height:0}:host([vertical]){display:inline-block;height:100%}:host([vertical]) .forge-divider{border:none;border-right-color:var(--_divider-color);border-right-width:var(--_divider-width);border-right-style:var(--_divider-border-style);height:100%;width:0}';
 /**
  * @tag forge-divider
  *

package/esm/drawer/drawer/drawer.js

@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate } from '@tylertech/forge-core';
 import { DRAWER_CONSTANTS } from './drawer-constants';
 import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
 const template = '<template><div class=\"forge-drawer\" part=\"root\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></template>';
-const styles = ':host{display:flex;flex-direction:column;box-sizing:border-box;height:100%;overflow:hidden!important;--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){:host([open]){transform:translateZ(0)}}}';
+const styles = ':host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}:host([open]){transform:translateZ(0)}';
 /**
  * @tag forge-drawer
  *

package/esm/drawer/mini-drawer/mini-drawer.d.ts

@@ -20,6 +20,7 @@ declare global {
  * @attribute {boolean} [hover=false] - The drawer will expand open when hovered.
  *
  * @cssproperty --forge-mini-drawer-width - The width of the drawer.
+ * @cssproperty --forge-mini-drawer-min-width - The minimum width of the drawer. Defaults to match the width.
  * @cssproperty --forge-mini-drawer-hover-width - The width of the drawer when hovered.
  * @cssproperty --forge-mini-drawer-transition-duration - The transition duration of the drawer.
  * @cssproperty --forge-mini-drawer-transition-easing - The transition timing function of the drawer.

package/esm/drawer/mini-drawer/mini-drawer.js

@@ -8,7 +8,7 @@ import { attachShadowTemplate, customElement } from '@tylertech/forge-core';
 import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
 import { MINI_DRAWER_CONSTANTS } from './mini-drawer-constants';
 const template = '<template><div class=\"root\" part=\"root\"><div class=\"forge-drawer mini\" part=\"container\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></div></template>';
-const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:flex;flex-direction:column;box-sizing:border-box;height:100%;overflow:hidden!important;width:var(--_mini-drawer-width);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width)!important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto;overflow:overlay}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.root{z-index:var(--forge-z-index-surface,1);height:100%}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface,1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}';
+const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);--_mini-drawer-min-width:var(--forge-mini-drawer-min-width, var(--_mini-drawer-width));--_mini-drawer-hover-width:var(--forge-mini-drawer-hover-width, var(--forge-drawer-width, 256px));--_mini-drawer-transition-duration:var(--forge-mini-drawer-transition-duration, var(--forge-animation-duration-short4, 200ms));--_mini-drawer-transition-easing:var(--forge-mini-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_mini-drawer-transition-delay:var(--forge-mini-drawer-transition-delay, 300ms);--_mini-drawer-hover-transition-duration:var(--forge-mini-drawer-hover-transition-duration, var(--forge-animation-duration-medium2, 300ms));--_mini-drawer-hover-transition-easing:var(--forge-mini-drawer-hover-transition-easing, var(--_mini-drawer-transition-easing));--_mini-drawer-hover-transition-delay:var(--forge-mini-drawer-hover-transition-delay, var(--forge-animation-duration-medium2, 300ms))}:host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;width:var(--_mini-drawer-width);overflow:visible!important;--forge-divider-margin:4px 0}:host([direction=right]){min-width:var(--_mini-drawer-width);width:auto}:host([direction=right]) .root{position:relative}:host(:not([open])){display:none}:host([hover]) .right{position:absolute;right:0}:host([hover]) .forge-drawer:hover{width:var(--_mini-drawer-hover-width)!important;transition:width var(--_mini-drawer-hover-transition-duration) var(--_mini-drawer-hover-transition-easing) var(--_mini-drawer-hover-transition-delay)}:host([hover]) .forge-drawer:hover .content{overflow:auto;overflow:overlay}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.root{z-index:var(--forge-z-index-surface,1);height:100%;min-width:var(--_mini-drawer-min-width)}.forge-drawer.mini{width:var(--_mini-drawer-width);z-index:var(--forge-z-index-surface,1);transition:width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing)}.forge-drawer.mini .content{overflow:hidden}.forge-drawer.closed{width:0}';
 /**
  * @tag forge-mini-drawer
  *
@@ -17,6 +17,7 @@ const styles = ':host{--_mini-drawer-width:var(--forge-mini-drawer-width, 56px);
  * @attribute {boolean} [hover=false] - The drawer will expand open when hovered.
  *
  * @cssproperty --forge-mini-drawer-width - The width of the drawer.
+ * @cssproperty --forge-mini-drawer-min-width - The minimum width of the drawer. Defaults to match the width.
  * @cssproperty --forge-mini-drawer-hover-width - The width of the drawer when hovered.
  * @cssproperty --forge-mini-drawer-transition-duration - The transition duration of the drawer.
  * @cssproperty --forge-mini-drawer-transition-easing - The transition timing function of the drawer.

package/esm/file-picker/file-picker-adapter.d.ts

@@ -6,6 +6,7 @@
 import { IFilePickerComponent } from './file-picker';
 import { BaseAdapter, IBaseAdapter } from '../core';
 export interface IFilePickerAdapter extends IBaseAdapter {
+    destroy(): void;
     registerButtonSlotListener(listener: (evt: Event) => void): void;
     registerInputChangeListener(listener: (evt: Event) => void): void;
     registerDragEnterListener(listener: (evt: DragEvent) => void): void;
@@ -32,6 +33,7 @@ export declare class FilePickerAdapter extends BaseAdapter<IFilePickerComponent>
     private _input;
     private _inputEventListener;
     constructor(component: IFilePickerComponent);
+    destroy(): void;
     registerButtonSlotListener(listener: (evt: Event) => void): void;
     registerInputChangeListener(listener: (evt: Event) => void): void;
     registerDragEnterListener(listener: (evt: DragEvent) => void): void;

package/esm/file-picker/file-picker-adapter.js

@@ -18,6 +18,12 @@ export class FilePickerAdapter extends BaseAdapter {
         };
         this._container.addEventListener('click', this._inputEventListener);
     }
+    destroy() {
+        if (this._inputEventListener) {
+            this._container.removeEventListener('click', this._inputEventListener);
+            this._inputEventListener = undefined;
+        }
+    }
     registerButtonSlotListener(listener) {
         this._buttonSlot.addEventListener('slotchange', listener);
     }

package/esm/file-picker/file-picker-core.js

@@ -33,6 +33,7 @@ export class FilePickerCore {
         this._isInitialized = true;
     }
     destroy() {
+        this._adapter.destroy();
         this._isInitialized = false;
     }
     _onButtonSlotChanged(evt) {

package/esm/icon-button/icon-button.js

@@ -14,7 +14,7 @@ import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
 import { IconButtonCore } from './icon-button-core';
 import { IconButtonAdapter } from './icon-button-adapter';
 const template = '<template><div class=\"forge-icon-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"on\"></slot><slot name=\"end\"></slot><slot name=\"badge\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
-const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-background-color:var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}::slotted(a){height:100%;width:100%;outline:0;border-radius:var(--_icon-button-shape);padding-inline:var(--_icon-button-padding);display:flex;align-items:center;justify-content:center;gap:var(--_icon-button-gap);color:var(--_icon-button-icon-color);text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}::slotted([slot=badge]){position:absolute;top:0;left:60%;z-index:1;pointer-events:none}::slotted(forge-badge[slot=badge][dot]){top:8px}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge]:not([dot])){top:-25%}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge][dot]){top:0}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_icon-button-icon-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #213189));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #19441b));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #19441b))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #5f0011));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #712700));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #712700))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #0b3768));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #0b3768))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
+const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-gap, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-background-color:var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);align-items:center;justify-content:center;gap:var(--_icon-button-gap);box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);user-select:none;transition-property:box-shadow,background;transition-duration:var(--_icon-button-transition-duration);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}::slotted(a){height:100%;width:100%;outline:0;border-radius:var(--_icon-button-shape);padding-inline:var(--_icon-button-padding);display:flex;align-items:center;justify-content:center;gap:var(--_icon-button-gap);color:var(--_icon-button-icon-color);text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}::slotted([slot=badge]){position:absolute;top:0;left:60%;z-index:1;pointer-events:none}::slotted(forge-badge[slot=badge][dot]){top:8px}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge]:not([dot])){top:-25%}:host(:is([dense],[density=small],[density=medium])) ::slotted(forge-badge[slot=badge][dot]){top:0}:host(:is([dense],[density=small])) ::slotted(forge-badge[slot=badge]){--forge-typography-label1-line-height:normal;--forge-badge-height:auto}::slotted(forge-circular-progress){--forge-circular-progress-indicator-color:var(--_icon-button-icon-color);--forge-circular-progress-track-color:transparent;--forge-circular-progress-size:1em}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #8a6804));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #8a6804))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #213189));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #213189))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #19441b));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #19441b))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #5f0011));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #5f0011))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #712700));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #712700))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #0b3768));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #0b3768))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
 /**
  * @tag forge-icon-button
  *

package/esm/index.d.ts

@@ -36,12 +36,14 @@ export * from './focus-indicator';
 export * from './icon';
 export * from './icon-button';
 export * from './inline-message';
+export * from './key';
 export * from './keyboard-shortcut';
 export * from './label';
 export * from './label-value';
 export * from './linear-progress';
 export * from './list';
 export * from './menu';
+export * from './meter';
 export * from './open-icon';
 export * from './overlay';
 export * from './page-state';

package/esm/index.js

@@ -41,6 +41,7 @@ import { FocusIndicatorComponent } from './focus-indicator';
 import { IconComponent } from './icon';
 import { IconButtonComponent } from './icon-button';
 import { InlineMessageComponent } from './inline-message';
+import { KeyComponent, KeyItemComponent } from './key';
 import { KeyboardShortcutComponent } from './keyboard-shortcut';
 import { LabelComponent } from './label';
 import { LabelValueComponent } from './label-value';
@@ -48,6 +49,7 @@ import { LinearProgressComponent } from './linear-progress';
 import { ListComponent } from './list';
 import { ListItemComponent } from './list/list-item';
 import { MenuComponent } from './menu';
+import { MeterComponent, MeterGroupComponent } from './meter';
 import { OpenIconComponent } from './open-icon';
 import { OverlayComponent } from './overlay';
 import { PageStateComponent } from './page-state';
@@ -111,12 +113,14 @@ export * from './focus-indicator';
 export * from './icon';
 export * from './icon-button';
 export * from './inline-message';
+export * from './key';
 export * from './keyboard-shortcut';
 export * from './label';
 export * from './label-value';
 export * from './linear-progress';
 export * from './list';
 export * from './menu';
+export * from './meter';
 export * from './open-icon';
 export * from './overlay';
 export * from './page-state';
@@ -187,13 +191,17 @@ const CUSTOM_ELEMENTS = [
     IconButtonComponent,
     IconComponent,
     InlineMessageComponent,
+    KeyComponent,
     KeyboardShortcutComponent,
+    KeyItemComponent,
     LabelComponent,
     LabelValueComponent,
     LinearProgressComponent,
     ListComponent,
     ListItemComponent,
     MenuComponent,
+    MeterComponent,
+    MeterGroupComponent,
     MiniDrawerComponent,
     ModalDrawerComponent,
     OpenIconComponent,

package/esm/key/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './key';
+export * from './key-item';

package/esm/key/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './key';
+export * from './key-item';

package/esm/key/key/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './key';
+export declare function defineKeyComponent(): void;

package/esm/key/key/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { tryDefine } from '@tylertech/forge-core';
+import { KeyComponent } from './key';
+export * from './key';
+export function defineKeyComponent() {
+    tryDefine('forge-key', KeyComponent);
+}

package/esm/key/key/key.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * @tag forge-key
+ *
+ * @summary Keys present key items to label a chart or data visualization.
+ *
+ * @slot - The default slot for key items.
+ *
+ * @cssproperty --forge-key-gap - The spacing between key items.
+ * @cssproperty --forge-key-direction - The direction that items are laid out in the key.
+ *
+ * @csspart root - The root element.
+ */
+export declare class KeyComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _internals;
+    constructor();
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-key': KeyComponent;
+    }
+}

package/esm/key/key/key.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { setDefaultAria } from '../../core/utils/a11y-utils';
+const styles = ':host{display:block}.forge-key{--_key-gap:var(--forge-key-gap, var(--forge-spacing-medium, 16px));--_key-direction:var(--forge-key-direction, row)}.forge-key{box-sizing:border-box;display:flex;flex-direction:var(--_key-direction);gap:var(--_key-gap);flex-wrap:wrap}';
+/**
+ * @tag forge-key
+ *
+ * @summary Keys present key items to label a chart or data visualization.
+ *
+ * @slot - The default slot for key items.
+ *
+ * @cssproperty --forge-key-gap - The spacing between key items.
+ * @cssproperty --forge-key-direction - The direction that items are laid out in the key.
+ *
+ * @csspart root - The root element.
+ */
+let KeyComponent = class KeyComponent extends LitElement {
+    constructor() {
+        super();
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setDefaultAria(this, this._internals, {
+            role: 'list'
+        });
+    }
+    /* @internal */
+    render() {
+        return html `<div part="root" class="forge-key"><slot></slot></div>`;
+    }
+};
+KeyComponent.styles = unsafeCSS(styles);
+KeyComponent = __decorate([
+    customElement('forge-key')
+], KeyComponent);
+export { KeyComponent };

package/esm/key/key-item/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './key-item';
+export declare function defineKeyItemComponent(): void;

package/esm/key/key-item/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { tryDefine } from '@tylertech/forge-core';
+import { KeyItemComponent } from './key-item';
+export * from './key-item';
+export function defineKeyItemComponent() {
+    tryDefine('forge-key-item', KeyItemComponent);
+}

package/esm/key/key-item/key-item.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * @tag forge-key-item
+ *
+ * @summary Key items label a chart or data visualization.
+ *
+ * @slot - The default slot for the label.
+ * @slot icon - The icon to display.
+ * @slot value - The value to display.
+ *
+ * @cssproperty --forge-key-item-icon-color - The color of the icon.
+ * @cssproperty --forge-key-item-label-color - The color of the label.
+ * @cssproperty --forge-key-item-value-color - The color of the value.
+ * @cssproperty --forge-key-item-gap - The spacing between the icon and label.
+ * @cssproperty --forge-key-item-icon-size - The size of the icon.
+ *
+ * @csspart root - The root element.
+ * @csspart icon - The icon element.
+ * @csspart label - The label element.
+ * @csspart value - The value element.
+ */
+export declare class KeyItemComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the label and value dislay on one line.
+     * @default false
+     * @attribute
+     */
+    inline: boolean;
+    private _hasValue;
+    private _valueNodes;
+    private _internals;
+    constructor();
+    connectedCallback(): void;
+    render(): TemplateResult;
+    private _handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-key-item': KeyItemComponent;
+    }
+}