@tylertech/forge 3.11.0 → 3.12.1

package/esm/core/testing/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare function tryCleanupPopovers(): void;
+export declare function isVisibleInScrollContainer(scrollContainer: HTMLElement, element: HTMLElement): boolean;

package/esm/core/testing/utils.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export function tryCleanupPopovers() {
+    const popovers = Array.from(document.querySelectorAll('forge-popover'));
+    popovers.forEach(p => p.remove());
+}
+export function isVisibleInScrollContainer(scrollContainer, element) {
+    const elemTop = element.offsetTop - scrollContainer.offsetTop;
+    const elemBottom = elemTop + element.offsetHeight;
+    return elemTop >= scrollContainer.scrollTop && elemBottom <= scrollContainer.scrollTop + scrollContainer.offsetHeight;
+}

package/esm/date-picker/date-picker.d.ts

@@ -19,7 +19,7 @@ declare global {
     }
 }
 /**
- * @summary A date input component with an integrated calendar popup for selecting single dates with keyboard and mouse interaction support.
+ * @summary A date input component with an integrated calendar popup for selecting single dates.
  *
  * @tag forge-date-picker
  *

package/esm/date-picker/date-picker.js

@@ -18,7 +18,7 @@ import { DatePickerCore } from './date-picker-core';
 const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
- * @summary A date input component with an integrated calendar popup for selecting single dates with keyboard and mouse interaction support.
+ * @summary A date input component with an integrated calendar popup for selecting single dates.
  *
  * @tag forge-date-picker
  *

package/esm/dialog/dialog.d.ts

@@ -50,7 +50,7 @@ declare const DialogComponent_base: import("..").AbstractConstructor<import("../
 /**
  * @tag forge-dialog
  *
- * @summary Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions.
+ * @summary Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions. Dialogs can be modal or non-modal.
  *
  * @dependency forge-backdrop
  *

package/esm/dialog/dialog.js

@@ -19,7 +19,7 @@ const styles = '@keyframes forge-dialog-zoom-in{from{opacity:var(--_dialog-zoom-
 /**
  * @tag forge-dialog
  *
- * @summary Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions.
+ * @summary Dialogs are temporary UI elements that are used to display information, ask for input, or confirm actions. Dialogs can be modal or non-modal.
  *
  * @dependency forge-backdrop
  *

package/esm/divider/divider.d.ts

@@ -15,7 +15,7 @@ declare global {
 /**
  * @tag forge-divider
  *
- * @summary Divider is used to separate elements.
+ * @summary Dividers are used to separate elements with a thin line, either vertically or horizontally.
  *
  * @property {boolean} [vertical=false] - Controls if the divider is displayed vertically or horizontally.
  *

package/esm/divider/divider.js

@@ -12,7 +12,7 @@ const styles = ':host{--_divider-margin:var(--forge-divider-margin, 0)}:host{dis
 /**
  * @tag forge-divider
  *
- * @summary Divider is used to separate elements.
+ * @summary Dividers are used to separate elements with a thin line, either vertically or horizontally.
  *
  * @property {boolean} [vertical=false] - Controls if the divider is displayed vertically or horizontally.
  *

package/esm/drawer/base/base-drawer-adapter.d.ts

@@ -13,6 +13,7 @@ export interface IBaseDrawerAdapter extends IBaseAdapter {
     removeDrawerClass(className: string | string[]): void;
     setDrawerClass(className: string | string[]): void;
     listenTransitionComplete(listener: () => void): void;
+    setInert(value: boolean): void;
 }
 export declare class BaseDrawerAdapter extends BaseAdapter<IBaseDrawerComponent> implements IBaseDrawerAdapter {
     protected _component: IBaseDrawerComponent;
@@ -26,4 +27,5 @@ export declare class BaseDrawerAdapter extends BaseAdapter<IBaseDrawerComponent>
     removeDrawerClass(className: string | string[]): void;
     setDrawerClass(className: string | string[]): void;
     listenTransitionComplete(listener: () => void): void;
+    setInert(value: boolean): void;
 }

package/esm/drawer/base/base-drawer-adapter.js

@@ -58,4 +58,7 @@ export class BaseDrawerAdapter extends BaseAdapter {
         };
         this._drawerElement.addEventListener('transitionend', this._activeTransitionListener);
     }
+    setInert(value) {
+        this._drawerElement.inert = value;
+    }
 }

package/esm/drawer/base/base-drawer-core.js

@@ -22,6 +22,7 @@ export class BaseDrawerCore {
             this._setClosed();
         }
         this._applyDirection();
+        this._adapter.setInert(!this._open);
         this._adapter.proxyScrollEvent();
     }
     destroy() {
@@ -58,10 +59,12 @@ export class BaseDrawerCore {
     }
     _applyOpen() {
         if (this._open) {
+            this._adapter.setInert(false);
             this._triggerDrawerOpen();
             this._adapter.setHostAttribute(BASE_DRAWER_CONSTANTS.attributes.OPEN);
         }
         else {
+            this._adapter.setInert(true);
             this._triggerDrawerClose();
             this._adapter.removeHostAttribute(BASE_DRAWER_CONSTANTS.attributes.OPEN);
         }

package/esm/drawer/drawer/drawer.d.ts

@@ -18,7 +18,7 @@ declare global {
 /**
  * @tag forge-drawer
  *
- * @summary A persistent side navigation drawer component that provides a sliding panel for navigation content.
+ * @summary A persistent side navigation drawer component that provides the ability to dismiss and open the drawer with smooth animations. Use for navigation or to display additional content alongside the main application content.
  *
  * @slot - The content to display in the scrollable content container.
  * @slot header - The header content above the main content.

package/esm/drawer/drawer/drawer.js

@@ -12,7 +12,7 @@ const styles = ':host{display:grid;box-sizing:border-box;height:100%;overflow:hi
 /**
  * @tag forge-drawer
  *
- * @summary A persistent side navigation drawer component that provides a sliding panel for navigation content.
+ * @summary A persistent side navigation drawer component that provides the ability to dismiss and open the drawer with smooth animations. Use for navigation or to display additional content alongside the main application content.
  *
  * @slot - The content to display in the scrollable content container.
  * @slot header - The header content above the main content.

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

@@ -18,7 +18,7 @@ declare global {
 /**
  * @tag forge-modal-drawer
  *
- * @summary A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels.
+ * @summary A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels. Prefer to use the dialog component with the preset options for sidesheet styles drawers.
  *
  * @dependency forge-backdrop
  *

package/esm/drawer/modal-drawer/modal-drawer.js

@@ -15,7 +15,7 @@ const styles = ':host{--forge-divider-margin:4px 0}.forge-drawer{--_drawer-backg
 /**
  * @tag forge-modal-drawer
  *
- * @summary A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels.
+ * @summary A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels. Prefer to use the dialog component with the preset options for sidesheet styles drawers.
  *
  * @dependency forge-backdrop
  *

package/esm/expansion-panel/expansion-panel.d.ts

@@ -54,7 +54,7 @@ declare global {
  * @cssclass forge-expansion-panel--open - The open state of the panel.
  *
  * @slot - The content of the panel.
- * @slot header - The header of the panel.
+ * @slot header - The header of the panel. This is deprecated, prefer using the trigger property instead, or manually associating a button with the panel.
  */
 export declare class ExpansionPanelComponent extends BaseComponent implements IExpansionPanelComponent {
     static get observedAttributes(): string[];

package/esm/expansion-panel/expansion-panel.js

@@ -42,7 +42,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansio
  * @cssclass forge-expansion-panel--open - The open state of the panel.
  *
  * @slot - The content of the panel.
- * @slot header - The header of the panel.
+ * @slot header - The header of the panel. This is deprecated, prefer using the trigger property instead, or manually associating a button with the panel.
  */
 let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
     static get observedAttributes() {

package/esm/field/field.d.ts

@@ -39,8 +39,7 @@ declare global {
 /**
  * @tag forge-field
  *
- * @summary The Forge Field component is a basic component that handles the layout and theming of
- * form elements that can include a label, various states, and a border around an input area.
+ * @description The field component is a building block component that handles the layout and theming of other form elements. Avoid using this component directly unless part of a larger component. Instead, use one of the specific field type components such as `<forge-text-field>` and `<forge-select>` for example.
  *
  * @property {FieldLabelPosition} [labelPosition="inset"] - The position of the label relative to the input area.
  * @property {FieldLabelAlignment} [labelAlignment="start"] - The alignment of the label relative to the input area.

package/esm/field/field.js

@@ -15,8 +15,7 @@ const styles = '@keyframes float-in-label-animation{from{translate:0;opacity:40%
 /**
  * @tag forge-field
  *
- * @summary The Forge Field component is a basic component that handles the layout and theming of
- * form elements that can include a label, various states, and a border around an input area.
+ * @description The field component is a building block component that handles the layout and theming of other form elements. Avoid using this component directly unless part of a larger component. Instead, use one of the specific field type components such as `<forge-text-field>` and `<forge-select>` for example.
  *
  * @property {FieldLabelPosition} [labelPosition="inset"] - The position of the label relative to the input area.
  * @property {FieldLabelAlignment} [labelAlignment="start"] - The alignment of the label relative to the input area.

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

@@ -25,9 +25,8 @@ declare global {
 /**
  * @tag forge-file-picker
  *
- * @summary
- * The file-picker component allows for a user to upload files of their own to the system. The component provides a slot for a
- * button, as well as drag-and-drop functionality to launch the system file chooser dialog. There are visual queues to let the
+ * @summary The file picker component allows for a user to upload files of their own to the system. The component provides a slot for a
+ * button, as well as drag-and-drop functionality to launch the system file chooser dialog. There are visual cues to let the
  * user know when files they are dragging can be dropped, as well as events that are relayed to the developer to handle files
  * that are legal and/or illegal based on the parameters set on the component.
  *

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

@@ -15,9 +15,8 @@ const styles = ':host{--_file-picker-background:var(--forge-file-picker-backgrou
 /**
  * @tag forge-file-picker
  *
- * @summary
- * The file-picker component allows for a user to upload files of their own to the system. The component provides a slot for a
- * button, as well as drag-and-drop functionality to launch the system file chooser dialog. There are visual queues to let the
+ * @summary The file picker component allows for a user to upload files of their own to the system. The component provides a slot for a
+ * button, as well as drag-and-drop functionality to launch the system file chooser dialog. There are visual cues to let the
  * user know when files they are dragging can be dropped, as well as events that are relayed to the developer to handle files
  * that are legal and/or illegal based on the parameters set on the component.
  *

package/esm/floating-action-button/floating-action-button.d.ts

@@ -20,7 +20,7 @@ declare global {
 /**
  * @tag forge-fab
  *
- * @summary Floating action buttons are used to represent the most important action on a page.
+ * @summary Floating action buttons are used to represent the most important action on a page. They are typically used in mobile applications, and are positioned above other content in a way that draws attention to them.
  *
  * @dependency forge-focus-indicator
  * @dependency forge-state-layer

package/esm/floating-action-button/floating-action-button.js

@@ -18,7 +18,7 @@ const styles = ':host{--_fab-display:var(--forge-fab-display, inline-flex);--_fa
 /**
  * @tag forge-fab
  *
- * @summary Floating action buttons are used to represent the most important action on a page.
+ * @summary Floating action buttons are used to represent the most important action on a page. They are typically used in mobile applications, and are positioned above other content in a way that draws attention to them.
  *
  * @dependency forge-focus-indicator
  * @dependency forge-state-layer

package/esm/focus-indicator/focus-indicator.d.ts

@@ -26,7 +26,7 @@ export declare const FOCUS_INDICATOR_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-focus-indicator
  *
- * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
+ * @summary Focus indicators show a "focus ring" around an attached element that matches `:focus-visible`. These are building block components used by other components to show focus state, and are not typically used directly.
  *
  * @cssproperty --forge-focus-indicator-display - The `display` style. Defaults to `flex`.
  * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.

package/esm/focus-indicator/focus-indicator.js

@@ -15,7 +15,7 @@ export const FOCUS_INDICATOR_TAG_NAME = 'forge-focus-indicator';
 /**
  * @tag forge-focus-indicator
  *
- * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
+ * @summary Focus indicators show a "focus ring" around an attached element that matches `:focus-visible`. These are building block components used by other components to show focus state, and are not typically used directly.
  *
  * @cssproperty --forge-focus-indicator-display - The `display` style. Defaults to `flex`.
  * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.
@@ -96,6 +96,20 @@ let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseLitEleme
         this.focusMode = 'focusin';
         _FocusIndicatorComponent_targetElement.set(this, void 0);
         _FocusIndicatorComponent_internals.set(this, void 0);
+        _FocusIndicatorComponent_handleTargetInteraction.set(this, (evt) => {
+            const target = evt.target;
+            switch (evt.type) {
+                case this.focusMode:
+                    this.active = __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_isActive).call(this, this.allowFocus ? ':focus' : ':focus-visible', target);
+                    break;
+                case 'focusout':
+                    this.active = false;
+                    break;
+                case 'pointerdown':
+                    this.active = this.allowFocus ? __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_isActive).call(this, ':focus', target) : __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_isActive).call(this, ':focus-visible', target);
+                    break;
+            }
+        });
         __classPrivateFieldSet(this, _FocusIndicatorComponent_internals, this.attachInternals(), "f");
     }
     connectedCallback() {
@@ -126,31 +140,18 @@ let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseLitEleme
 };
 _FocusIndicatorComponent_targetElement = new WeakMap();
 _FocusIndicatorComponent_internals = new WeakMap();
+_FocusIndicatorComponent_handleTargetInteraction = new WeakMap();
 _FocusIndicatorComponent_instances = new WeakSet();
 _a = CUSTOM_ELEMENT_NAME_PROPERTY;
 _FocusIndicatorComponent_detachTargetListeners = function _FocusIndicatorComponent_detachTargetListeners() {
-    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.removeEventListener(this.focusMode, __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleTargetInteraction).bind(this));
-    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.removeEventListener('focusout', __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleTargetInteraction).bind(this));
-    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.removeEventListener('pointerdown', __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleTargetInteraction).bind(this));
+    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.removeEventListener(this.focusMode, __classPrivateFieldGet(this, _FocusIndicatorComponent_handleTargetInteraction, "f"));
+    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.removeEventListener('focusout', __classPrivateFieldGet(this, _FocusIndicatorComponent_handleTargetInteraction, "f"));
+    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.removeEventListener('pointerdown', __classPrivateFieldGet(this, _FocusIndicatorComponent_handleTargetInteraction, "f"));
 };
 _FocusIndicatorComponent_attachTargetListeners = function _FocusIndicatorComponent_attachTargetListeners() {
-    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.addEventListener(this.focusMode, __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleTargetInteraction).bind(this));
-    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.addEventListener('focusout', __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleTargetInteraction).bind(this));
-    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.addEventListener('pointerdown', __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleTargetInteraction).bind(this));
-};
-_FocusIndicatorComponent_handleTargetInteraction = function _FocusIndicatorComponent_handleTargetInteraction(evt) {
-    const target = evt.target;
-    switch (evt.type) {
-        case this.focusMode:
-            this.active = __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_isActive).call(this, this.allowFocus ? ':focus' : ':focus-visible', target);
-            break;
-        case 'focusout':
-            this.active = false;
-            break;
-        case 'pointerdown':
-            this.active = this.allowFocus ? __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_isActive).call(this, ':focus', target) : __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_isActive).call(this, ':focus-visible', target);
-            break;
-    }
+    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.addEventListener(this.focusMode, __classPrivateFieldGet(this, _FocusIndicatorComponent_handleTargetInteraction, "f"));
+    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.addEventListener('focusout', __classPrivateFieldGet(this, _FocusIndicatorComponent_handleTargetInteraction, "f"));
+    __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")?.addEventListener('pointerdown', __classPrivateFieldGet(this, _FocusIndicatorComponent_handleTargetInteraction, "f"));
 };
 _FocusIndicatorComponent_isActive = function _FocusIndicatorComponent_isActive(selector, el) {
     const targetedEl = el ?? __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f");

package/esm/icon/icon.d.ts

@@ -27,7 +27,7 @@ declare global {
 /**
  * @tag forge-icon
  *
- * @summary Icons are used to represent information visually
+ * @summary Icons are used to represent information visually. The icon component is a wrapper around SVG icons that are registered in the icon registry.
  *
  * @property {string} name - The name of the icon to render.
  * @property {string} src - Provides the ability to set the SVG string content directly.

package/esm/icon/icon.js

@@ -14,7 +14,7 @@ const styles = ':host{--_icon-color:var(--forge-icon-color, currentColor);--_ico
 /**
  * @tag forge-icon
  *
- * @summary Icons are used to represent information visually
+ * @summary Icons are used to represent information visually. The icon component is a wrapper around SVG icons that are registered in the icon registry.
  *
  * @property {string} name - The name of the icon to render.
  * @property {string} src - Provides the ability to set the SVG string content directly.

package/esm/icon-button/icon-button.d.ts

@@ -25,7 +25,7 @@ declare global {
     }
 }
 /**
- * @summary A clickable button component that displays an icon with support for different variants, themes, toggle states, and accessibility features.
+ * @summary Icon buttons are buttons that contain **only** an icon, and are used to represent actions or commands. Always provide an accessible label when using icon buttons.
  *
  * @tag forge-icon-button
  *

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

@@ -16,7 +16,7 @@ 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([pressed]))) slot[name=on]{display:none}:host([toggle][pressed]) slot:not([name]){display:none}:host([toggle][pressed]: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][pressed][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([pressed])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][pressed][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([pressed]):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][pressed]: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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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([pressed])[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))}:host([theme=app-bar]){--forge-icon-button-icon-color:var(--_app-bar-theme-foreground);--forge-icon-button-focus-indicator-color:var(--_app-bar-theme-foreground)}';
 /**
- * @summary A clickable button component that displays an icon with support for different variants, themes, toggle states, and accessibility features.
+ * @summary Icon buttons are buttons that contain **only** an icon, and are used to represent actions or commands. Always provide an accessible label when using icon buttons.
  *
  * @tag forge-icon-button
  *

package/esm/inline-message/inline-message.d.ts

@@ -16,7 +16,7 @@ declare global {
 /**
  * @tag forge-inline-message
  *
- * @summary Inline messages are used to provide feedback to the user about a specific action or state.
+ * @summary Inline messages are used to provide feedback to the user about a specific action or state. Use inline messages to communicate information such as errors, warnings, or success messages in a way that is contextual to the content on the page.
  *
  * @property {InlineMessageTheme} [theme="info"] - The theme to apply.
  *

package/esm/inline-message/inline-message.js

@@ -12,7 +12,7 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-inline-m
 /**
  * @tag forge-inline-message
  *
- * @summary Inline messages are used to provide feedback to the user about a specific action or state.
+ * @summary Inline messages are used to provide feedback to the user about a specific action or state. Use inline messages to communicate information such as errors, warnings, or success messages in a way that is contextual to the content on the page.
  *
  * @property {InlineMessageTheme} [theme="info"] - The theme to apply.
  *

package/esm/label/label.d.ts

@@ -23,7 +23,7 @@ declare global {
 /**
  * @tag forge-label
  *
- * @summary The Forge Label component is used to associate a text label with a compatible Forge component.
+ * @summary The Label component is used to associate a text label with a compatible Forge component.
  *
  * @cssclass forge-label - Apply to the root element of the label to align the label and associated element horizontally.
  * @cssclass forge-label-block - Apply to the root element instead of `forge-label` to align the label and associated element vertically.

package/esm/label/label.js

@@ -15,7 +15,7 @@ const style = ':host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:an
 /**
  * @tag forge-label
  *
- * @summary The Forge Label component is used to associate a text label with a compatible Forge component.
+ * @summary The Label component is used to associate a text label with a compatible Forge component.
  *
  * @cssclass forge-label - Apply to the root element of the label to align the label and associated element horizontally.
  * @cssclass forge-label-block - Apply to the root element instead of `forge-label` to align the label and associated element vertically.

package/esm/label-value/label-value.d.ts

@@ -19,7 +19,7 @@ declare global {
 /**
  * @tag forge-label-value
  *
- * @summary Label-value pairs are used to display a label and a value in a compact format.
+ * @summary Label values are used to display a label and value pair in a compact format with the proper typography and spacing styles applied.
  *
  * @property {boolean} [empty=false] - If true, the value will be displayed in an alternative emphasized style.
  * @property {boolean} [ellipsis=false] - If true, the value will be truncated with an ellipsis if it overflows its container.

package/esm/label-value/label-value.js

@@ -12,7 +12,7 @@ const styles = ':host{display:inline-block;min-width:0}:host([hidden]){display:n
 /**
  * @tag forge-label-value
  *
- * @summary Label-value pairs are used to display a label and a value in a compact format.
+ * @summary Label values are used to display a label and value pair in a compact format with the proper typography and spacing styles applied.
  *
  * @property {boolean} [empty=false] - If true, the value will be displayed in an alternative emphasized style.
  * @property {boolean} [ellipsis=false] - If true, the value will be truncated with an ellipsis if it overflows its container.

package/esm/linear-progress/linear-progress.d.ts

@@ -22,8 +22,7 @@ declare const LinearProgressComponent_base: import("..").AbstractConstructor<imp
 /**
  * @tag forge-linear-progress
  *
- * @summary
- * Linear progress indicators display progress by animating along a linear track in a horizontal direction.
+ * @summary Linear progress indicators display progress by animating along a linear track in a horizontal direction. They can be used to show determinate or indeterminate progress.
  *
  * @description
  * Progress indicators inform users about the status of ongoing processes.

package/esm/linear-progress/linear-progress.js

@@ -16,8 +16,7 @@ const styles = ':host{--_linear-progress-track-height:var(--forge-linear-progres
 /**
  * @tag forge-linear-progress
  *
- * @summary
- * Linear progress indicators display progress by animating along a linear track in a horizontal direction.
+ * @summary Linear progress indicators display progress by animating along a linear track in a horizontal direction. They can be used to show determinate or indeterminate progress.
  *
  * @description
  * Progress indicators inform users about the status of ongoing processes.

package/esm/list/list/list.d.ts

@@ -24,7 +24,7 @@ declare const ListComponent_base: import("../../constants").AbstractConstructor<
 /**
  * @tag forge-list
  *
- * @summary Lists are vertical groupings of related content.
+ * @summary Lists are vertically oriented groups of related content that allow users to select or view one or more items from a set.
  *
  * @csspart root - The component's root container element.
  *

package/esm/list/list/list.js

@@ -18,7 +18,7 @@ const styles = ':host{--_list-navlist-spacing:var(--forge-list-navlist-spacing,
 /**
  * @tag forge-list
  *
- * @summary Lists are vertical groupings of related content.
+ * @summary Lists are vertically oriented groups of related content that allow users to select or view one or more items from a set.
  *
  * @csspart root - The component's root container element.
  *

package/esm/list/list-item/list-item-constants.js

@@ -33,7 +33,7 @@ const selectors = {
     ROOT: `.${classes.ROOT}`,
     FORM_CONTROL_LIKE: ':is([forge-list-item-interactive],forge-radio,forge-checkbox,forge-switch,input[type=checkbox],input[type=radio]):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])',
     BUTTON_LIKE: ':is(button,[role=button][tabindex]:not([tabindex=-1]),[forge-list-item-interactive]):not([forge-ignore])',
-    IGNORE: '[forge-ignore],[data-forge-ignore],[slot="additional-content"]',
+    IGNORE: '[forge-ignore],[data-forge-ignore],[slot="additional-content"],forge-menu *',
     INTERNAL_ANCHOR: `#${ids.INTERNAL_ANCHOR}`,
     SLOTTED_START_END: ':is([slot=start],[slot=end],[slot=leading],[slot=trailing])'
 };

package/esm/list-dropdown/list-dropdown-constants.d.ts

@@ -7,6 +7,7 @@ import type { IIconComponent } from '../icon';
 import type { IOverlayOffset, OverlayFlipState, OverlayShiftState } from '../overlay/overlay-constants';
 import { PositionPlacement } from '../core/utils/position-utils';
 import { TooltipPlacement, TooltipType } from '../tooltip';
+import type { PopoverAnchorAccessibility } from '../popover/popover-constants';
 export declare const LIST_DROPDOWN_CONSTANTS: {
     observedAttributes: {
         POPUP_CLASSES: string;
@@ -48,7 +49,7 @@ export type ListDropdownOptionBuilder<T = HTMLElement> = (option: IListDropdownO
 export type ListDropdownHeaderBuilder = () => HTMLElement;
 export type ListDropdownFooterBuilder = () => HTMLElement;
 export type ListDropdownOptionGroupBuilder<T = any> = (option: IListDropdownOptionGroup<T>) => HTMLElement | string;
-export type ListDropdownTransformCallback = (label: string) => string | HTMLElement;
+export type ListDropdownTransformCallback = (label: string, option?: IListDropdownOption, isSelected?: boolean) => string | HTMLElement;
 export type ListDropdownIconType = 'font' | 'component';
 export interface IBaseListDropdownOption<T = any> {
     value: T;
@@ -121,6 +122,7 @@ export interface IListDropdownConfig<T = any> {
     footerBuilder?: ListDropdownFooterBuilder;
     cascade?: boolean;
     cascadingElementFactory?: (config: IListDropdownCascadingElementFactoryConfig) => HTMLElement;
+    anchorAccessibility?: PopoverAnchorAccessibility;
 }
 export interface IListDropdownCascadingElementFactoryConfig {
     index: number;
@@ -147,4 +149,6 @@ export interface ListDropdownTooltipConfig {
     offset?: number;
     anchor?: string;
     anchorElement?: HTMLElement;
+    visibilityMode?: ListDropdownTooltipVisibilityMode;
 }
+export type ListDropdownTooltipVisibilityMode = 'always' | 'overflow-only';