@tylertech/forge 3.10.5 → 3.12.0

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

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, coerceNumber, customElement, ensureChildren, getShadowElement } from '@tylertech/forge-core';
-import { FocusIndicatorComponent, FOCUS_INDICATOR_CONSTANTS } from '../../focus-indicator';
+import { FocusIndicatorComponent, FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator';
 import { StateLayerComponent, STATE_LAYER_CONSTANTS } from '../../state-layer';
 import { DEPRECATED_ICON_BUTTON_CONSTANTS } from './deprecated-icon-button-constants';
 import { BaseComponent } from '../../core/base/base-component';
@@ -35,7 +35,7 @@ let DeprecatedIconButtonComponent = class DeprecatedIconButtonComponent extends
         this._toggleClickListener = this._onToggle.bind(this);
         attachShadowTemplate(this, template, styles);
         this._slotElement = getShadowElement(this, 'slot:not([name])');
-        this._focusIndicator = getShadowElement(this, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._focusIndicator = getShadowElement(this, FOCUS_INDICATOR_TAG_NAME);
         this._stateLayer = getShadowElement(this, STATE_LAYER_CONSTANTS.elementName);
     }
     connectedCallback() {

package/esm/dialog/dialog.d.ts

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

package/esm/dialog/dialog.js

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

package/esm/divider/divider.d.ts

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

package/esm/divider/divider.js

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

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

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

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

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

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

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

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

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

package/esm/drawer/drawer/drawer.js

@@ -8,10 +8,12 @@ import { customElement, attachShadowTemplate } from '@tylertech/forge-core';
 import { DRAWER_CONSTANTS } from './drawer-constants';
 import { BaseDrawerAdapter, BaseDrawerComponent, BaseDrawerCore } from '../base';
 const template = '<template><div class=\"forge-drawer\" part=\"root\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></template>';
-const styles = ':host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}:host([open]){transform:translateZ(0)}';
+const styles = ':host{display:grid;box-sizing:border-box;height:100%;overflow:hidden!important;--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}:host([open]){transform:translateZ(0)}';
 /**
  * @tag forge-drawer
  *
+ * @summary A persistent side navigation drawer component that provides the ability to dismiss and open the drawer with smooth animations. Use for navigation or to display additional content alongside the main application content.
+ *
  * @slot - The content to display in the scrollable content container.
  * @slot header - The header content above the main content.
  * @slot footer - The footer content below the main content.

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

@@ -15,6 +15,8 @@ declare global {
 /**
  * @tag forge-mini-drawer
  *
+ * @summary A compact navigation drawer component that displays as a narrow rail and optionally expands on hover to show full content.
+ *
  * @property {boolean} [hover=false] - The drawer will expand open when hovered.
  *
  * @attribute {boolean} [hover=false] - The drawer will expand open when hovered.

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

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

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

@@ -18,6 +18,8 @@ declare global {
 /**
  * @tag forge-modal-drawer
  *
+ * @summary A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels. Prefer to use the dialog component with the preset options for sidesheet styles drawers.
+ *
  * @dependency forge-backdrop
  *
  * @event {CustomEvent<void>} forge-modal-drawer-close - Dispatched when the modal drawer is closed by clicking the backdrop.

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

@@ -11,10 +11,12 @@ import { ModalDrawerAdapter } from './modal-drawer-adapter';
 import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants';
 import { ModalDrawerCore } from './modal-drawer-core';
 const template = '<template><forge-backdrop class=\"scrim\" hidden exportparts=\"root:backdrop\"></forge-backdrop><div class=\"forge-drawer modal\" part=\"root\"><slot name=\"header\"></slot><div class=\"content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></template>';
-const styles = ':host{--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.forge-drawer.modal{position:absolute;top:0;z-index:var(--forge-z-index-dialog,8);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);max-width:80%}.forge-drawer.modal.closed,.forge-drawer.modal.closing{box-shadow:none}.forge-drawer.modal.closing.right{transform:translateX(100%)}.forge-drawer.right{right:0}.forge-drawer.display-none{display:none!important}.scrim{z-index:var(--forge-z-index-dialog,8)}.scrim.closed{display:none}';
+const styles = ':host{--forge-divider-margin:4px 0}.forge-drawer{--_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));--_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));--_drawer-width:var(--forge-drawer-width, 256px);--_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));--_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));--_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms))}.forge-drawer{width:var(--_drawer-width);height:100%;box-sizing:border-box;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;background-color:var(--_drawer-background);border-color:var(--_drawer-border-color);transition-property:transform;transition-duration:var(--_drawer-transition-duration);transition-timing-function:var(--_drawer-transition-easing)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer .content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-drawer .content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-drawer .content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,calc(var(--forge-shape-full,9999px) * var(--forge-shape-factor,1)));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-drawer .content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}.forge-drawer .content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:flex;flex-direction:column;grid-row:2}.forge-drawer.left{border-right-width:var(--_drawer-border-width);border-right-style:solid}.forge-drawer.right{border-left-width:var(--_drawer-border-width);border-left-style:solid}.forge-drawer.right.closing{transform:translateX(100%);right:0;left:auto;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.right.closed{transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer.closing{transform:translateX(-100%);left:0;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;transition-duration:var(--_drawer-transition-duration-close)}.forge-drawer.closed{transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer.no-transition{transition:none!important}.forge-drawer.modal{position:absolute;top:0;z-index:var(--forge-z-index-dialog,8);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);max-width:80%}.forge-drawer.modal.closed,.forge-drawer.modal.closing{box-shadow:none}.forge-drawer.modal.closing.right{transform:translateX(100%)}.forge-drawer.right{right:0}.forge-drawer.display-none{display:none!important}.scrim{z-index:var(--forge-z-index-dialog,8)}.scrim.closed{display:none}';
 /**
  * @tag forge-modal-drawer
  *
+ * @summary A modal navigation drawer component that slides in from the side with a backdrop overlay, typically used for temporary navigation panels. Prefer to use the dialog component with the preset options for sidesheet styles drawers.
+ *
  * @dependency forge-backdrop
  *
  * @event {CustomEvent<void>} forge-modal-drawer-close - Dispatched when the modal drawer is closed by clicking the backdrop.

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

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

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

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

package/esm/field/field-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/field/field.d.ts

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

package/esm/field/field.js

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

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

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

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

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

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

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

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

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

package/esm/focus-indicator/focus-indicator-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,25 +22,11 @@ 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.
+ * @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.
@@ -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;
 }