@tylertech/forge 3.10.5 → 3.11.0

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

@@ -3,34 +3,20 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { FocusIndicatorAdapter } from './focus-indicator-adapter';
-import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
-import { FocusIndicatorCore } from './focus-indicator-core';
-const template = '<template></template>';
-const styles = ':host{--_focus-indicator-display:var(--forge-focus-indicator-display, flex);--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0)}:host{animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);animation-timing-function:var(--_focus-indicator-easing);box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline)}:host([hidden]){display:none}:host([active]){display:var(--_focus-indicator-display)}:host(:not([inward])){animation-name:forge-focus-indicator-outward-grow,forge-focus-indicator-outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1 * var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor}:host([inward]){animation-name:forge-focus-indicator-inward-grow,forge-focus-indicator-inward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));border:var(--_focus-indicator-width) solid currentColor;inset:var(--_focus-indicator-inward-offset)}:host([circular]){--_focus-indicator-shape:var(--forge-focus-indicator-shape, 50%)}@keyframes forge-focus-indicator-outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@media (prefers-reduced-motion){:host{animation:none}}';
+var _FocusIndicatorComponent_instances, _FocusIndicatorComponent_targetElement, _FocusIndicatorComponent_internals, _FocusIndicatorComponent_detachTargetListeners, _FocusIndicatorComponent_attachTargetListeners, _FocusIndicatorComponent_handleTargetInteraction, _FocusIndicatorComponent_isActive, _FocusIndicatorComponent_handleTargetChange, _FocusIndicatorComponent_handleActiveChange, _a;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { nothing, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseLitElement } from '../core/base/base-lit-element';
+import { locateTargetHeuristic, toggleState } from '../core/utils/utils';
+const styles = ':host{--_focus-indicator-display:var(--forge-focus-indicator-display, flex);--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0)}:host{animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);animation-timing-function:var(--_focus-indicator-easing);box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline)}:host([hidden]){display:none}:host(:where(:state(active),[active])){display:var(--_focus-indicator-display)}:host(:not([inward])){animation-name:forge-focus-indicator-outward-grow,forge-focus-indicator-outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1 * var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor}:host([inward]){animation-name:forge-focus-indicator-inward-grow,forge-focus-indicator-inward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));border:var(--_focus-indicator-width) solid currentColor;inset:var(--_focus-indicator-inward-offset)}:host([circular]){--_focus-indicator-shape:var(--forge-focus-indicator-shape, 50%)}@keyframes forge-focus-indicator-outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@media (prefers-reduced-motion){:host{animation:none}}';
+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`.
  *
- * @property {HTMLElement} targetElement - The element to attach the focus indicator to.
- * @property {string} target - The id of the element to attach the focus indicator to.
- * @property {boolean} [active=false] - Controls whether the indicator is active.
- * @property {boolean} [inward=false] - Controls whether the indicator renders inward.
- * @property {boolean} [circular=false] - Controls whether the indicator renders circular.
- * @property {boolean} [allowFocus=false] - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
- * @property {FocusIndicatorFocusMode} [focusMode="focusin"] - The focus mode to use.
- *
- * @attribute {string} target - The id of the element to attach the focus indicator to.
- * @attribute {boolean} [active=false] - Controls whether the indicator is active.
- * @attribute {boolean} [inward=false] - Controls whether the indicator renders inward.
- * @attribute {boolean} [circular=false] - Controls whether the indicator renders circular.
- * @attribute {boolean} [allow-focus=false] - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
- * @attribute {FocusIndicatorFocusMode} [focus-mode="focusin"] - The focus mode to use.
- *
  * @cssproperty --forge-focus-indicator-display - The `display` style. Defaults to `flex`.
  * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.
  * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
@@ -54,68 +40,158 @@ const styles = ':host{--_focus-indicator-display:var(--forge-focus-indicator-dis
  * @cssclass forge-focus-indicator--active - Forces the focus indicator to be visible.
  * @cssclass forge-focus-indicator--inward - Renders the focus inside the target element.
  */
-let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseComponent {
-    static get observedAttributes() {
-        return Object.values(FOCUS_INDICATOR_CONSTANTS.attributes);
+let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseLitElement {
+    /**
+     * The element to attach the focus indicator to.
+     * @default undefined
+     */
+    set targetElement(value) {
+        __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_detachTargetListeners).call(this);
+        __classPrivateFieldSet(this, _FocusIndicatorComponent_targetElement, value, "f");
+        if (this.isConnected) {
+            __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_attachTargetListeners).call(this);
+        }
+    }
+    get targetElement() {
+        return __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f");
     }
     constructor() {
         super();
-        attachShadowTemplate(this, template, styles);
-        this._core = new FocusIndicatorCore(new FocusIndicatorAdapter(this));
+        _FocusIndicatorComponent_instances.add(this);
+        /**
+         * The id of the element to attach the focus indicator to.
+         * @default null
+         * @attribute
+         */
+        this.target = null;
+        /**
+         * Controls whether the indicator is active.
+         * @default false
+         * @attribute
+         */
+        this.active = false;
+        /**
+         * Controls whether the indicator renders inward.
+         * @default false
+         * @attribute
+         */
+        this.inward = false;
+        /**
+         * Controls whether the indicator renders circular.
+         * @default false
+         * @attribute
+         */
+        this.circular = false;
+        /**
+         * Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+         * @default false
+         * @attribute allow-focus
+         */
+        this.allowFocus = false;
+        /**
+         * The focus mode to use. Valid values are `focusin` (default) and `focus`.
+         * @default 'focusin'
+         * @attribute focus-mode
+         */
+        this.focusMode = 'focusin';
+        _FocusIndicatorComponent_targetElement.set(this, void 0);
+        _FocusIndicatorComponent_internals.set(this, void 0);
+        __classPrivateFieldSet(this, _FocusIndicatorComponent_internals, this.attachInternals(), "f");
     }
     connectedCallback() {
-        this._core.initialize();
+        super.connectedCallback();
+        if (!__classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f")) {
+            __classPrivateFieldSet(this, _FocusIndicatorComponent_targetElement, locateTargetHeuristic(this, this.target) ?? undefined, "f");
+        }
+        __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_attachTargetListeners).call(this);
     }
     disconnectedCallback() {
-        this._core.destroy();
+        super.disconnectedCallback();
+        __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_detachTargetListeners).call(this);
+        __classPrivateFieldSet(this, _FocusIndicatorComponent_targetElement, undefined, "f");
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case FOCUS_INDICATOR_CONSTANTS.attributes.TARGET:
-                this.target = newValue;
-                break;
-            case FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE:
-                this.active = coerceBoolean(newValue);
-                break;
-            case FOCUS_INDICATOR_CONSTANTS.attributes.INWARD:
-                this.inward = coerceBoolean(newValue);
-                break;
-            case FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR:
-                this.circular = coerceBoolean(newValue);
-                break;
-            case FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS:
-                this.allowFocus = coerceBoolean(newValue);
-                break;
-            case FOCUS_INDICATOR_CONSTANTS.attributes.FOCUS_MODE:
-                this.focusMode = newValue;
-                break;
+    willUpdate(changedProperties) {
+        if (this.hasUpdated) {
+            if (changedProperties.has('target')) {
+                __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleTargetChange).call(this);
+            }
+        }
+        if (changedProperties.has('active')) {
+            __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_handleActiveChange).call(this);
         }
     }
+    render() {
+        return nothing; // This component does not render any elements, it only applies encapsulated styles to the host element.
+    }
+};
+_FocusIndicatorComponent_targetElement = new WeakMap();
+_FocusIndicatorComponent_internals = 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));
+};
+_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;
+    }
+};
+_FocusIndicatorComponent_isActive = function _FocusIndicatorComponent_isActive(selector, el) {
+    const targetedEl = el ?? __classPrivateFieldGet(this, _FocusIndicatorComponent_targetElement, "f");
+    return !!targetedEl?.matches(selector);
+};
+_FocusIndicatorComponent_handleTargetChange = function _FocusIndicatorComponent_handleTargetChange() {
+    __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_detachTargetListeners).call(this);
+    if (this.isConnected) {
+        __classPrivateFieldSet(this, _FocusIndicatorComponent_targetElement, locateTargetHeuristic(this, this.target) ?? undefined, "f");
+        __classPrivateFieldGet(this, _FocusIndicatorComponent_instances, "m", _FocusIndicatorComponent_attachTargetListeners).call(this);
+    }
+};
+_FocusIndicatorComponent_handleActiveChange = function _FocusIndicatorComponent_handleActiveChange() {
+    this.toggleAttribute('active', this.active);
+    toggleState(__classPrivateFieldGet(this, _FocusIndicatorComponent_internals, "f"), 'active', this.active);
 };
+FocusIndicatorComponent.styles = unsafeCSS(styles);
+/** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+FocusIndicatorComponent[_a] = FOCUS_INDICATOR_TAG_NAME;
 __decorate([
-    coreProperty()
-], FocusIndicatorComponent.prototype, "targetElement", void 0);
+    property({ attribute: false })
+], FocusIndicatorComponent.prototype, "targetElement", null);
 __decorate([
-    coreProperty()
+    property({ type: String })
 ], FocusIndicatorComponent.prototype, "target", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Boolean, reflect: true })
 ], FocusIndicatorComponent.prototype, "active", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Boolean, reflect: true })
 ], FocusIndicatorComponent.prototype, "inward", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Boolean, reflect: true })
 ], FocusIndicatorComponent.prototype, "circular", void 0);
 __decorate([
-    coreProperty()
+    property({ type: Boolean, attribute: 'allow-focus' })
 ], FocusIndicatorComponent.prototype, "allowFocus", void 0);
 __decorate([
-    coreProperty()
+    property({ attribute: 'focus-mode' })
 ], FocusIndicatorComponent.prototype, "focusMode", void 0);
 FocusIndicatorComponent = __decorate([
-    customElement({
-        name: FOCUS_INDICATOR_CONSTANTS.elementName
-    })
+    customElement(FOCUS_INDICATOR_TAG_NAME)
 ], FocusIndicatorComponent);
 export { FocusIndicatorComponent };

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

@@ -3,8 +3,6 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './focus-indicator-adapter';
 export * from './focus-indicator-constants';
-export * from './focus-indicator-core';
 export * from './focus-indicator';
 export declare function defineFocusIndicatorComponent(): void;

package/esm/focus-indicator/index.js

@@ -5,9 +5,7 @@
  */
 import { defineCustomElement } from '@tylertech/forge-core';
 import { FocusIndicatorComponent } from './focus-indicator';
-export * from './focus-indicator-adapter';
 export * from './focus-indicator-constants';
-export * from './focus-indicator-core';
 export * from './focus-indicator';
 export function defineFocusIndicatorComponent() {
     defineCustomElement(FocusIndicatorComponent);

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

@@ -25,6 +25,8 @@ declare global {
     }
 }
 /**
+ * @summary A clickable button component that displays an icon with support for different variants, themes, toggle states, and accessibility features.
+ *
  * @tag forge-icon-button
  *
  * @globalconfig variant

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

@@ -16,6 +16,8 @@ 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.
+ *
  * @tag forge-icon-button
  *
  * @globalconfig variant

package/esm/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -26,6 +26,8 @@ declare global {
     }
 }
 /**
+ * @summary A utility component that listens for keyboard shortcut combinations and triggers callbacks or events when the specified key bindings are activated.
+ *
  * @tag forge-keyboard-shortcut
  *
  * @event {CustomEvent<KeyboardEvent>} forge-keyboard-shortcut-activate - Event fired when the keyboard shortcut is activated.

package/esm/keyboard-shortcut/keyboard-shortcut.js

@@ -10,6 +10,8 @@ import { KeyboardShortcutCore } from './keyboard-shortcut-core';
 import { KEYBOARD_SHORTCUT_CONSTANTS } from './keyboard-shortcut-constants';
 import { BaseComponent } from '../core/base/base-component';
 /**
+ * @summary A utility component that listens for keyboard shortcut combinations and triggers callbacks or events when the specified key bindings are activated.
+ *
  * @tag forge-keyboard-shortcut
  *
  * @event {CustomEvent<KeyboardEvent>} forge-keyboard-shortcut-activate - Event fired when the keyboard shortcut is activated.

package/esm/list/list/list.js

@@ -14,7 +14,7 @@ import { setDefaultAria } from '../../constants';
 import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 const template = '<template><div class=\"forge-list\" part=\"root\"><div class=\"inner\"><slot></slot></div></div></template>';
-const styles = ':host{--_list-navlist-spacing:var(--forge-list-navlist-spacing, var(--forge-spacing-xxsmall, 4px));--_list-navlist-margin:var(--forge-list-navlist-margin, var(--forge-spacing-xxsmall, 4px) var(--forge-spacing-xsmall, 8px));--_list-navlist-height:var(--forge-list-navlist-height, 40px);--_list-navlist-padding:var(--forge-list-navlist-padding, 0 var(--forge-spacing-xsmall, 8px));--_list-navlist-shape:var(--forge-list-navlist-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_list-navlist-font-size:var(--forge-list-navlist-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_list-navlist-font-weight:var(--forge-list-navlist-font-weight, 500)}:host{display:block}:host([hidden]){display:none}:host([navlist]){--forge-list-item-height:var(--_list-navlist-height);--forge-list-item-margin:var(--_list-navlist-margin);--forge-list-item-padding:var(--_list-navlist-padding);--forge-list-item-shape:var(--_list-navlist-shape);--forge-list-item-text-font-size:var(--_list-navlist-font-size);--forge-list-item-text-font-weight:var(--_list-navlist-font-weight)}:host([navlist]) .forge-list{margin-block:var(--_list-navlist-spacing)}.forge-list{--_list-spacing:var(--forge-list-spacing, 0);--_list-container-color:var(--forge-list-container-color, transparent)}.forge-list{outline:0;background-color:var(--_list-container-color);margin:0;border-radius:inherit;min-width:inherit}.inner{display:grid;gap:var(--_list-spacing);min-width:0}.inner ::slotted(*){min-width:0}';
+const styles = ':host{--_list-navlist-spacing:var(--forge-list-navlist-spacing, var(--forge-spacing-xxsmall, 4px));--_list-navlist-margin:var(--forge-list-navlist-margin, var(--forge-spacing-xxsmall, 4px) var(--forge-spacing-xsmall, 8px));--_list-navlist-height:var(--forge-list-navlist-height, 40px);--_list-navlist-padding:var(--forge-list-navlist-padding, 0 var(--forge-spacing-xsmall, 8px));--_list-navlist-shape:var(--forge-list-navlist-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_list-navlist-font-size:var(--forge-list-navlist-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));--_list-navlist-font-weight:var(--forge-list-navlist-font-weight, 500)}:host{display:block}:host([hidden]){display:none}:host([navlist]) .forge-list{margin-block:var(--_list-navlist-spacing)}:host([navlist]){--forge-list-item-height:var(--_list-navlist-height);--forge-list-item-margin:var(--_list-navlist-margin);--forge-list-item-padding:var(--_list-navlist-padding);--forge-list-item-shape:var(--_list-navlist-shape);--forge-list-item-text-font-size:var(--_list-navlist-font-size);--forge-list-item-text-font-weight:var(--_list-navlist-font-weight)}.forge-list{--_list-spacing:var(--forge-list-spacing, 0);--_list-container-color:var(--forge-list-container-color, transparent)}.forge-list{outline:0;background-color:var(--_list-container-color);margin:0;border-radius:inherit;min-width:inherit}.inner{display:grid;gap:var(--_list-spacing);min-width:0}.inner ::slotted(*){min-width:0}';
 /**
  * @tag forge-list
  *

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]',
+    IGNORE: '[forge-ignore],[data-forge-ignore],[slot="additional-content"]',
     INTERNAL_ANCHOR: `#${ids.INTERNAL_ANCHOR}`,
     SLOTTED_START_END: ':is([slot=start],[slot=end],[slot=leading],[slot=trailing])'
 };

package/esm/list/list-item/list-item-core.d.ts

@@ -33,11 +33,13 @@ export declare class ListItemCore implements IListItemCore {
     private _mousedownListener;
     private _clickListener;
     private _keydownListener;
+    private _keyupListener;
     constructor(_adapter: IListItemAdapter);
     initialize(): void;
     destroy(): void;
     private _onMousedown;
     private _onKeydown;
+    private _onKeyup;
     private _onClick;
     private _clickInteractiveElement;
     private _onInteractiveStateChange;

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

@@ -21,6 +21,7 @@ export class ListItemCore {
         this._mousedownListener = this._onMousedown.bind(this);
         this._clickListener = this._onClick.bind(this);
         this._keydownListener = this._onKeydown.bind(this);
+        this._keyupListener = this._onKeyup.bind(this);
     }
     initialize() {
         this._adapter.initialize();
@@ -43,10 +44,22 @@ export class ListItemCore {
     }
     _onKeydown(evt) {
         const composedElements = composedPathFrom(this._adapter.hostElement, evt);
-        const isFromStartEndSlot = composedElements.some((el) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_START_END));
+        const ignoredElements = composedElements.some(el => el.matches(LIST_ITEM_CONSTANTS.selectors.IGNORE));
+        if (ignoredElements) {
+            return;
+        }
         if (evt.key === 'Enter' || evt.key === ' ') {
             evt.stopPropagation();
+            const isAnchor = this._adapter.interactiveElement?.tagName === 'A';
+            if (!isAnchor) {
+                evt.preventDefault();
+            }
+            this._adapter.addHostListener('keyup', this._keyupListener, { capture: true });
         }
+    }
+    _onKeyup(evt) {
+        const composedElements = composedPathFrom(this._adapter.hostElement, evt);
+        const isFromStartEndSlot = composedElements.some((el) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_START_END));
         if (isFromStartEndSlot) {
             if (evt.key === 'Enter' || evt.key === ' ') {
                 this._adapter.animateStateLayer();
@@ -56,10 +69,19 @@ export class ListItemCore {
             }
             return;
         }
-        if (evt.key === ' ') {
-            evt.preventDefault();
-            this._adapter.interactiveElement?.click();
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            const isAnchor = this._adapter.interactiveElement?.tagName === 'A';
+            if (isAnchor) {
+                if (evt.key === ' ') {
+                    this._adapter.interactiveElement?.click();
+                }
+            }
+            else {
+                this._adapter.animateStateLayer();
+                this._onClick(evt);
+            }
         }
+        this._adapter.removeHostListener('keyup', this._keyupListener, { capture: true });
     }
     _onClick(evt) {
         const composedElements = composedPathFrom(this._adapter.hostElement, evt);
@@ -116,12 +138,13 @@ export class ListItemCore {
         if (value && !this._noninteractive) {
             this._adapter.addRootListener('mousedown', this._mousedownListener, { capture: true });
             this._adapter.addHostListener('click', this._clickListener, { capture: true });
-            this._adapter.addHostListener('keydown', this._keydownListener);
+            this._adapter.addHostListener('keydown', this._keydownListener, { capture: true });
         }
         else {
             this._adapter.removeRootListener('mousedown', this._mousedownListener, { capture: true });
             this._adapter.removeHostListener('click', this._clickListener, { capture: true });
-            this._adapter.removeHostListener('keydown', this._keydownListener);
+            this._adapter.removeHostListener('keydown', this._keydownListener, { capture: true });
+            this._adapter.removeHostListener('keyup', this._keyupListener, { capture: true });
         }
     }
     _dispatchSelectEvent() {

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

@@ -64,6 +64,7 @@ declare const ListItemComponent_base: import("../..").AbstractConstructor<import
  * @slot tertiary-text - The tertiary text.
  * @slot start - The start content.
  * @slot end - The end element.
+ * @slot additional-content - Additional content that appears below the main list item interactive area.
  *
  * @csspart root - The root container element.
  * @csspart text-container - The container for the text content.

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

@@ -13,7 +13,7 @@ import { FocusIndicatorComponent } from '../../focus-indicator';
 import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><div class=\"forge-list-item\" part=\"root\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot></div><slot name=\"end\"><slot name=\"trailing\"></slot></slot></div></template>';
+const template = '<template><div class=\"forge-list-item\" part=\"root\"><slot name=\"start\"><slot name=\"leading\"></slot></slot><div class=\"text-container\" part=\"text-container\"><slot></slot><slot name=\"secondary-text\"></slot><slot name=\"tertiary-text\"></slot></div><slot name=\"end\"><slot name=\"trailing\"></slot></slot></div><slot name=\"additional-content\"></slot></template>';
 const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));--_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed)}:host{display:block;outline:0}:host([hidden]){display:none}.forge-list-item{--_list-item-background:var(--forge-list-item-background, transparent);--_list-item-shape:var(--forge-list-item-shape, 0);--_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));--_list-item-margin:var(--forge-list-item-margin, 0);--_list-item-height:var(--forge-list-item-height, 48px);--_list-item-dense-height:var(--forge-list-item-dense-height, 32px);--_list-item-cursor:var(--forge-list-item-cursor, pointer);--_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));--_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));--_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));--_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);--_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));--_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));--_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);--_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));--_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));--_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);--_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));--_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));--_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));--_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));--_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));--_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));--_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);--_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));--_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));--_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));--_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px))}.forge-list-item{position:relative;display:flex;gap:var(--_list-item-gap);align-items:center;box-sizing:border-box;outline:0;text-decoration:none;border-radius:var(--_list-item-shape);-webkit-tap-highlight-color:transparent;background-color:var(--_list-item-background);height:var(--_list-item-height);min-height:var(--_list-item-height);padding:var(--_list-item-padding);margin:var(--_list-item-margin)}.forge-list-item.interactive{cursor:var(--_list-item-cursor)}.forge-list-item.disabled{cursor:var(--_list-item-disabled-cursor);opacity:var(--_list-item-disabled-opacity)}.forge-list-item.disabled ::slotted(button){cursor:var(--_list-item-disabled-cursor)}.anchor{position:absolute;inset:0}:host([two-line]) .forge-list-item{height:var(--_list-item-two-line-height);min-height:var(--_list-item-two-line-height)}:host([three-line]) .forge-list-item{height:var(--_list-item-three-line-height);min-height:var(--_list-item-three-line-height)}:host([dense]) .forge-list-item{--_list-item-gap:var(--_list-item-dense-gap);height:var(--_list-item-dense-one-line-height);min-height:var(--_list-item-dense-one-line-height)}:host([dense]) .text-container{font-size:var(--_list-item-dense-font-size)}:host([dense][indented]){margin-inline-start:var(--_list-item-dense-indent)}:host([dense][two-line]) .forge-list-item{height:var(--_list-item-dense-two-line-height);min-height:var(--_list-item-dense-two-line-height)}:host([dense][three-line]) .forge-list-item{height:var(--_list-item-dense-three-line-height);min-height:var(--_list-item-dense-three-line-height)}:host([selected]) .forge-list-item{color:var(--_list-item-selected-color)}:host([selected]) .forge-list-item::before{content:\"\";position:absolute;inset:0;border-radius:inherit;opacity:var(--_list-item-selected-opacity);background-color:var(--_list-item-selected-background);pointer-events:none}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-selected-color);isolation:isolate}:host([selected]) .forge-list-item ::slotted([slot=leading]),:host([selected]) .forge-list-item ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) .forge-list-item ::slotted([slot=end]),:host([selected]) .forge-list-item ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([selected]) .text-container{color:var(--_list-item-selected-color)}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_list-item-selected-color)}:host([indented]) .forge-list-item{margin-inline-start:var(--_list-item-indent)}.text-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));letter-spacing:var(--forge-typography-body2-letter-spacing, .015625em);text-transform:var(--forge-typography-body2-text-transform,inherit);text-decoration:var(--forge-typography-body2-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;isolation:isolate;font-size:var(--_list-item-text-font-size);font-weight:var(--_list-item-text-font-weight);line-height:var(--_list-item-text-line-height);flex:1;contain:layout}slot[name=secondary-text]::slotted(*),slot[name=tertiary-text]::slotted(*){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_list-item-text-color);display:block}:host([selected]) slot[name=secondary-text]::slotted(*),:host([selected]) slot[name=tertiary-text]::slotted(*){color:var(--_list-item-selected-text-color)}::slotted(:is(button:not([slot]),[forge-list-item-button])){appearance:none;cursor:var(--_list-item-cursor);border:none;padding-block:0;padding-inline:0;margin:0;box-sizing:border-box;width:100%;background:0 0;color:inherit;outline:0;font:inherit;user-select:auto;text-align:inherit;letter-spacing:inherit;word-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}::slotted(a){outline:0;color:inherit!important;text-decoration:none!important}::slotted([slot=end]),::slotted([slot=leading]),::slotted([slot=start]),::slotted([slot=trailing]){color:var(--_list-item-text-color);display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;fill:currentColor}:host(:not([noninteractive])) ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])){--forge-focus-indicator-display:none;--forge-state-layer-display:none}:host([selected]) ::slotted([slot=leading]),:host([selected]) ::slotted([slot=start]){color:var(--_list-item-start-selected-color)}:host([selected]) ::slotted([slot=end]),:host([selected]) ::slotted([slot=trailing]){color:var(--_list-item-end-selected-color)}:host([wrap]) .forge-list-item{--_list-item-padding:var(--_list-item-wrap-padding);height:auto}:host([wrap]) .text-container{white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}:host([wrap]) ::slotted(:is(button,[role=button][tabindex],[forge-list-item-button])){white-space:normal}:host([wrap]) slot[name=secondary-text]::slotted(*),:host([wrap]) slot[name=tertiary-text]::slotted(*){white-space:normal;overflow:visible;text-overflow:clip;line-height:normal}forge-focus-indicator{z-index:1;--forge-focus-indicator-shape:calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1))}forge-state-layer{border-radius:inherit}';
 /**
  * @tag forge-list-item
@@ -49,6 +49,7 @@ const styles = ':host{--_list-item-indent:var(--forge-list-item-indent, var(--fo
  * @slot tertiary-text - The tertiary text.
  * @slot start - The start content.
  * @slot end - The end element.
+ * @slot additional-content - Additional content that appears below the main list item interactive area.
  *
  * @csspart root - The root container element.
  * @csspart text-container - The container for the text content.

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

@@ -39,6 +39,10 @@ export declare const LIST_DROPDOWN_CONSTANTS: {
     classes: {
         GROUP_WRAPPER: string;
     };
+    selectAllOption: {
+        VALUE: string;
+        LABEL: string;
+    };
 };
 export type ListDropdownOptionBuilder<T = HTMLElement> = (option: IListDropdownOption, parentElement: T) => HTMLElement | string | void;
 export type ListDropdownHeaderBuilder = () => HTMLElement;
@@ -84,6 +88,8 @@ export interface IListDropdownConfig<T = any> {
     options: Array<IListDropdownOption | IListDropdownOptionGroup>;
     selectCallback: (value: T) => void;
     activeChangeCallback?: (id: string) => void;
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
     closeCallback?: () => void;
     syncWidth?: boolean;
     constrainViewportWidth?: boolean;

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

@@ -25,10 +25,15 @@ const attributes = {
 const classes = {
     GROUP_WRAPPER: 'forge-list-dropdown__group-wrapper'
 };
+const selectAllOption = {
+    VALUE: '__forge_select_all__',
+    LABEL: 'Select All'
+};
 export const LIST_DROPDOWN_CONSTANTS = {
     observedAttributes,
     attributes,
-    classes
+    classes,
+    selectAllOption
 };
 export const DEFAULT_LIST_DROPDOWN_CONFIG = {
     options: [],

package/esm/list-dropdown/list-dropdown-utils.js

@@ -97,8 +97,35 @@ export function createList(config) {
  * @param config
  */
 export function createListItems(config, listElement, options, startIndex = 0, renderSelected = true) {
+    // Add select all option if enabled and in multiple mode
+    let optionsToRender = options || config.options;
+    if (config.showSelectAll && config.multiple && startIndex === 0) {
+        const selectAllOption = {
+            value: LIST_DROPDOWN_CONSTANTS.selectAllOption.VALUE,
+            label: config.selectAllLabel || LIST_DROPDOWN_CONSTANTS.selectAllOption.LABEL
+        };
+        const dividerOption = {
+            value: '',
+            label: '',
+            divider: true
+        };
+        // Inject select all at the beginning
+        if (isListDropdownOptionType(optionsToRender, ListDropdownOptionType.Group)) {
+            const optionGroups = optionsToRender;
+            if (optionGroups.length > 0) {
+                optionGroups[0] = { ...optionGroups[0], options: [selectAllOption, dividerOption, ...optionGroups[0].options] };
+                optionsToRender = optionGroups;
+            }
+            else {
+                optionsToRender = [{ text: '', options: [selectAllOption, dividerOption] }];
+            }
+        }
+        else {
+            optionsToRender = [selectAllOption, dividerOption, ...optionsToRender];
+        }
+    }
     // Ensure the options are provided in the form a group (if no groups provided, then we have one anonymous group of options)
-    const groups = getOptionsByGroup(options || config.options);
+    const groups = getOptionsByGroup(optionsToRender);
     const flatOptions = getFlattenedOptions(groups);
     const limitOptions = config.optionLimit ? true : false;
     let optionLimit = config.optionLimit || 0;