@tylertech/forge 3.10.4 → 3.11.0

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

@@ -148,10 +148,8 @@ export class ExpansionPanelCore {
         if (this._trigger !== value) {
             this._clearTrigger();
             this._trigger = value;
-            if (this._adapter.isConnected) {
-                this._adapter.setTriggerElementById(this._trigger);
-                this._syncTrigger();
-            }
+            this._adapter.setTriggerElementById(this._trigger);
+            this._syncTrigger();
         }
     }
     get triggerElement() {
@@ -161,9 +159,7 @@ export class ExpansionPanelCore {
         if (this._adapter.triggerElement !== el) {
             this._clearTrigger();
             this._adapter.setTriggerElement(el);
-            if (this._adapter.isConnected) {
-                this._syncTrigger();
-            }
+            this._syncTrigger();
         }
     }
 }

package/esm/field/field-adapter.js

@@ -5,7 +5,7 @@
  */
 import { addClass, getShadowElement, removeClass, toggleClass } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base';
-import { FOCUS_INDICATOR_CONSTANTS } from '../focus-indicator';
+import { FOCUS_INDICATOR_TAG_NAME } from '../focus-indicator';
 import { FIELD_CONSTANTS } from './field-constants';
 export class FieldAdapter extends BaseAdapter {
     get focusIndicator() {
@@ -22,7 +22,7 @@ export class FieldAdapter extends BaseAdapter {
         this._labelElement = getShadowElement(component, FIELD_CONSTANTS.selectors.LABEL);
         this._labelSlotElement = getShadowElement(component, FIELD_CONSTANTS.selectors.LABEL_SLOT);
         this._popoverIconElement = getShadowElement(component, FIELD_CONSTANTS.selectors.POPOVER_ICON);
-        this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_TAG_NAME);
     }
     addRootListener(name, listener) {
         this._rootElement.addEventListener(name, listener);

package/esm/field/field-core.d.ts

@@ -23,7 +23,7 @@ export interface IFieldCore {
     popoverExpanded: boolean;
     multiline: boolean;
     supportTextInset: FieldSupportTextInset;
-    focusIndicatorTargetElement: HTMLElement;
+    focusIndicatorTargetElement: HTMLElement | undefined;
     focusIndicatorFocusMode: FocusIndicatorFocusMode;
     focusIndicatorAllowFocus: boolean;
     initialize(): void;
@@ -88,8 +88,8 @@ export declare class FieldCore implements IFieldCore {
     set multiline(value: boolean);
     get supportTextInset(): FieldSupportTextInset;
     set supportTextInset(value: FieldSupportTextInset);
-    get focusIndicatorTargetElement(): HTMLElement;
-    set focusIndicatorTargetElement(value: HTMLElement);
+    get focusIndicatorTargetElement(): HTMLElement | undefined;
+    set focusIndicatorTargetElement(value: HTMLElement | undefined);
     get focusIndicatorFocusMode(): FocusIndicatorFocusMode;
     set focusIndicatorFocusMode(value: FocusIndicatorFocusMode);
     get focusIndicatorAllowFocus(): boolean;

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

@@ -4,17 +4,7 @@
  * License: Apache-2.0
  */
 export declare const FOCUS_INDICATOR_CONSTANTS: {
+    /** @deprecated use `FOCUS_INDICATOR_TAG_NAME` instead. */
     elementName: "forge-focus-indicator";
-    attributes: {
-        TARGET: string;
-        ACTIVE: string;
-        INWARD: string;
-        CIRCULAR: string;
-        ALLOW_FOCUS: string;
-        FOCUS_MODE: string;
-    };
-    defaults: {
-        FOCUS_MODE: FocusIndicatorFocusMode;
-    };
 };
 export type FocusIndicatorFocusMode = 'focus' | 'focusin';

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

@@ -5,22 +5,7 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}focus-indicator`;
-const observedAttributes = {
-    TARGET: 'target',
-    ACTIVE: 'active',
-    INWARD: 'inward',
-    CIRCULAR: 'circular',
-    ALLOW_FOCUS: 'allow-focus',
-    FOCUS_MODE: 'focus-mode'
-};
-const attributes = {
-    ...observedAttributes
-};
-const defaults = {
-    FOCUS_MODE: 'focusin'
-};
 export const FOCUS_INDICATOR_CONSTANTS = {
-    elementName,
-    attributes,
-    defaults
+    /** @deprecated use `FOCUS_INDICATOR_TAG_NAME` instead. */
+    elementName
 };

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

@@ -3,10 +3,13 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { CUSTOM_ELEMENT_NAME_PROPERTY } from '@tylertech/forge-core';
+import { nothing, PropertyValues } from 'lit';
+import { IBaseComponent } from '../core/base/base-component';
+import { BaseLitElement } from '../core/base/base-lit-element';
 import { FocusIndicatorFocusMode } from './focus-indicator-constants';
 export interface IFocusIndicatorComponent extends IBaseComponent {
-    targetElement: HTMLElement;
+    targetElement: HTMLElement | undefined;
     target: string | null;
     active: boolean;
     inward: boolean;
@@ -19,26 +22,12 @@ declare global {
         'forge-focus-indicator': IFocusIndicatorComponent;
     }
 }
+export declare const FOCUS_INDICATOR_TAG_NAME: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-focus-indicator
  *
  * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
  *
- * @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.
@@ -62,18 +51,56 @@ declare global {
  * @cssclass forge-focus-indicator--active - Forces the focus indicator to be visible.
  * @cssclass forge-focus-indicator--inward - Renders the focus inside the target element.
  */
-export declare class FocusIndicatorComponent extends BaseComponent implements IFocusIndicatorComponent {
-    static get observedAttributes(): string[];
-    private _core;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    targetElement: HTMLElement;
+export declare class FocusIndicatorComponent extends BaseLitElement implements IFocusIndicatorComponent {
+    #private;
+    static styles: import("lit").CSSResult;
+    /** @deprecated Used for compatibility with legacy Forge @customElement decorator. */
+    static [CUSTOM_ELEMENT_NAME_PROPERTY]: keyof HTMLElementTagNameMap;
+    /**
+     * The element to attach the focus indicator to.
+     * @default undefined
+     */
+    set targetElement(value: HTMLElement | undefined);
+    get targetElement(): HTMLElement | undefined;
+    /**
+     * The id of the element to attach the focus indicator to.
+     * @default null
+     * @attribute
+     */
     target: string | null;
+    /**
+     * Controls whether the indicator is active.
+     * @default false
+     * @attribute
+     */
     active: boolean;
+    /**
+     * Controls whether the indicator renders inward.
+     * @default false
+     * @attribute
+     */
     inward: boolean;
+    /**
+     * Controls whether the indicator renders circular.
+     * @default false
+     * @attribute
+     */
     circular: boolean;
+    /**
+     * Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+     * @default false
+     * @attribute allow-focus
+     */
     allowFocus: boolean;
+    /**
+     * The focus mode to use. Valid values are `focusin` (default) and `focus`.
+     * @default 'focusin'
+     * @attribute focus-mode
+     */
     focusMode: FocusIndicatorFocusMode;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): typeof nothing;
 }

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])'
 };