@tylertech/forge 3.10.5 → 3.12.0

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

@@ -3,33 +3,19 @@
  * 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.
+ * @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.
@@ -54,68 +40,159 @@ 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);
+        _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() {
-        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_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_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_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");
+    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/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,6 +25,8 @@ declare global {
     }
 }
 /**
+ * @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
  *
  * @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 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
  *
  * @globalconfig variant

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/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/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

@@ -14,11 +14,11 @@ 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
  *
- * @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]',
+    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/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() {