@tylertech/forge 3.5.0 → 3.6.0-dev.0

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

@@ -7,6 +7,8 @@ import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}icon-button`;
 const observedAttributes = {
     TOGGLE: 'toggle',
+    PRESSED: 'pressed',
+    /** @deprecated use `PRESSED` instead. */
     ON: 'on',
     VARIANT: 'variant',
     THEME: 'theme',

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

@@ -8,7 +8,7 @@ import { IIconButtonAdapter } from './icon-button-adapter';
 import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant } from './icon-button-constants';
 export interface IIconButtonCore extends IBaseButtonCore {
     toggle: boolean;
-    on: boolean;
+    pressed: boolean;
     variant: IconButtonVariant;
     theme: IconButtonTheme;
     shape: IconButtonShape;
@@ -16,7 +16,7 @@ export interface IIconButtonCore extends IBaseButtonCore {
 }
 export declare class IconButtonCore extends BaseButtonCore<IIconButtonAdapter> implements IIconButtonCore {
     private _toggle;
-    private _on;
+    private _pressed;
     private _variant;
     private _theme;
     private _shape;
@@ -27,8 +27,8 @@ export declare class IconButtonCore extends BaseButtonCore<IIconButtonAdapter> i
     private _onToggle;
     get toggle(): boolean;
     set toggle(value: boolean);
-    get on(): boolean;
-    set on(value: boolean);
+    get pressed(): boolean;
+    set pressed(value: boolean);
     get variant(): IconButtonVariant;
     set variant(value: IconButtonVariant);
     get theme(): IconButtonTheme;

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

@@ -9,7 +9,7 @@ export class IconButtonCore extends BaseButtonCore {
     constructor(adapter) {
         super(adapter);
         this._toggle = false;
-        this._on = false;
+        this._pressed = false;
         this._variant = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
         this._theme = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
         this._shape = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE;
@@ -27,14 +27,14 @@ export class IconButtonCore extends BaseButtonCore {
     }
     _onToggle() {
         // Update internal state first so listeners can access the new state
-        const originalOn = this._on;
-        this._on = !this._on;
-        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.on, true, true);
-        this._on = originalOn;
+        const originalPressed = this._pressed;
+        this._pressed = !this._pressed;
+        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.pressed, true, true);
+        this._pressed = originalPressed;
         if (cancelled) {
             return;
         }
-        this.on = !originalOn;
+        this.pressed = !originalPressed;
     }
     get toggle() {
         return this._toggle;
@@ -43,24 +43,26 @@ export class IconButtonCore extends BaseButtonCore {
         value = !!value;
         if (this._toggle !== value) {
             this._toggle = value;
-            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, this._toggle, `${this._on}`);
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, this._toggle, `${this._pressed}`);
             this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.TOGGLE, this._toggle);
         }
     }
-    get on() {
-        return this._on;
+    get pressed() {
+        return this._pressed;
     }
-    set on(value) {
+    set pressed(value) {
         value = !!value;
-        if (this._on !== value) {
-            this._on = value;
+        if (this._pressed !== value) {
+            this._pressed = value;
             if (this._toggle) {
-                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._on}`);
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._pressed}`);
             }
             else {
                 this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED);
             }
-            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._on);
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.PRESSED, this._pressed);
+            // Deprecated but left for legacy support
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._pressed);
         }
     }
     get variant() {

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

@@ -8,6 +8,8 @@ import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant
 import { IconButtonCore } from './icon-button-core';
 export interface IIconButtonComponent extends IBaseButton {
     toggle: boolean;
+    pressed: boolean;
+    /** @deprecated use `pressed` instead. */
     on: boolean;
     variant: IconButtonVariant;
     theme: IconButtonTheme;
@@ -25,39 +27,10 @@ declare global {
 /**
  * @tag forge-icon-button
  *
- * @summary Icons buttons are used to trigger an action or event.
- *
- * @property {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @property {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @property {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @property {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @property {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @property {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @property {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @property {boolean} [disabled=false] - Whether or not the button is disabled.
- * @property {boolean} [popoverIcon=false] - Whether or not the button shows a built-in popover icon.
- * @property {boolean} [dense=false] - Whether or not the button is dense.
- * @property {string} name - The name of the button.
- * @property {string} value - The form value of the button.
- * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
- *
  * @globalconfig variant
  * @globalconfig shape
  * @globalconfig density
  *
- * @attribute {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @attribute {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @attribute {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @attribute {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @attribute {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @attribute {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @attribute {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @attribute {boolean} [disabled=false] - Whether or not the button is disabled.
- * @attribute {boolean} [popover-icon=false] - Whether or not the button shows a built-in popover icon.
- * @attribute {boolean} [dense=false] - Whether or not the button is dense.
- * @attribute {string} name - The name of the button.
- * @attribute {string} value - The form value of the button.
- *
  * @event {PointerEvent} click - Fires when the button is clicked.
  * @event {CustomEvent<boolean>} forge-icon-button-toggle - Fires when the icon button is toggled. Only applies in `toggle` mode.
  *
@@ -136,10 +109,40 @@ export declare class IconButtonComponent extends BaseButton<IconButtonCore> impl
     protected readonly _core: IconButtonCore;
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Whether or not the icon button can be toggled.
+     * @default false
+     */
     toggle: boolean;
+    /**
+     * Whether or not the toggle button is pressed. Only applies when `toggle` is `true`.
+     * @default false
+     */
+    pressed: boolean;
+    /**
+     * Alias for `pressed` _(deprecated)_. Whether or not the toggle button is pressed. Only applies when `toggle` is `true`.
+     * @default false
+     * @deprecated Use `pressed` instead.
+     */
     on: boolean;
+    /**
+     * The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+     * @default "default"
+     */
     theme: IconButtonTheme;
+    /**
+     * The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+     * @default "icon"
+     */
     variant: IconButtonVariant;
+    /**
+     * The shape of the button. Valid values are `circular` and `squared`.
+     * @default "circular"
+     */
     shape: IconButtonShape;
+    /**
+     * The density of the button. Valid values are `small`, `medium`, and `large`.
+     * @default "large"
+     */
     density: IconButtonDensity;
 }

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

@@ -18,39 +18,10 @@ const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, in
 /**
  * @tag forge-icon-button
  *
- * @summary Icons buttons are used to trigger an action or event.
- *
- * @property {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @property {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @property {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @property {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @property {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @property {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @property {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @property {boolean} [disabled=false] - Whether or not the button is disabled.
- * @property {boolean} [popoverIcon=false] - Whether or not the button shows a built-in popover icon.
- * @property {boolean} [dense=false] - Whether or not the button is dense.
- * @property {string} name - The name of the button.
- * @property {string} value - The form value of the button.
- * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
- *
  * @globalconfig variant
  * @globalconfig shape
  * @globalconfig density
  *
- * @attribute {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @attribute {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @attribute {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @attribute {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @attribute {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @attribute {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @attribute {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @attribute {boolean} [disabled=false] - Whether or not the button is disabled.
- * @attribute {boolean} [popover-icon=false] - Whether or not the button shows a built-in popover icon.
- * @attribute {boolean} [dense=false] - Whether or not the button is dense.
- * @attribute {string} name - The name of the button.
- * @attribute {string} value - The form value of the button.
- *
  * @event {PointerEvent} click - Fires when the button is clicked.
  * @event {CustomEvent<boolean>} forge-icon-button-toggle - Fires when the icon button is toggled. Only applies in `toggle` mode.
  *
@@ -138,8 +109,9 @@ let IconButtonComponent = class IconButtonComponent extends BaseButton {
             case ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
                 this.toggle = coerceBoolean(newValue);
                 break;
+            case ICON_BUTTON_CONSTANTS.attributes.PRESSED:
             case ICON_BUTTON_CONSTANTS.attributes.ON:
-                this.on = coerceBoolean(newValue);
+                this.pressed = coerceBoolean(newValue);
                 break;
             case ICON_BUTTON_CONSTANTS.attributes.VARIANT:
                 this.variant = newValue;
@@ -162,6 +134,9 @@ __decorate([
 ], IconButtonComponent.prototype, "toggle", void 0);
 __decorate([
     coreProperty()
+], IconButtonComponent.prototype, "pressed", void 0);
+__decorate([
+    coreProperty({ name: 'pressed' })
 ], IconButtonComponent.prototype, "on", void 0);
 __decorate([
     coreProperty()

package/esm/index.d.ts

@@ -79,4 +79,7 @@ export * from './deprecated/icon-button';
  * Registers all components in the library with the browser.
  */
 export declare function defineComponents(): void;
+/**
+ * Deprecated component registration
+ */
 export declare function defineDeprecatedComponents(): void;

package/esm/index.js

@@ -9,77 +9,76 @@
  * Copyright (c) Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { defineCustomElements } from '@tylertech/forge-core';
-import { AccordionComponent } from './accordion';
-import { AppBarComponent, AppBarHelpButtonComponent, AppBarMenuButtonComponent, AppBarNotificationButtonComponent, AppBarProfileButtonComponent, AppBarSearchComponent, ProfileCardComponent } from './app-bar';
-import { AutocompleteComponent } from './autocomplete';
-import { AvatarComponent } from './avatar';
-import { BackdropComponent } from './backdrop';
-import { BadgeComponent } from './badge';
-import { BannerComponent } from './banner';
-import { BottomSheetComponent } from './bottom-sheet';
-import { ButtonComponent } from './button';
-import { ButtonAreaComponent } from './button-area';
-import { ButtonToggleComponent, ButtonToggleGroupComponent } from './button-toggle';
-import { CalendarComponent } from './calendar';
-import { CardComponent } from './card';
-import { CheckboxComponent } from './checkbox';
-import { ChipFieldComponent } from './chip-field';
-import { ChipComponent, ChipSetComponent } from './chips';
-import { CircularProgressComponent } from './circular-progress';
-import { ColorPickerComponent } from './color-picker';
-import { DatePickerComponent } from './date-picker';
-import { DateRangePickerComponent } from './date-range-picker';
-import { DialogComponent } from './dialog';
-import { DividerComponent } from './divider';
-import { DrawerComponent, MiniDrawerComponent, ModalDrawerComponent } from './drawer';
-import { ExpansionPanelComponent } from './expansion-panel';
-import { FieldComponent } from './field';
-import { FilePickerComponent } from './file-picker';
-import { FloatingActionButtonComponent } from './floating-action-button';
-import { FocusIndicatorComponent } from './focus-indicator';
-import { IconComponent } from './icon';
-import { IconButtonComponent } from './icon-button';
-import { InlineMessageComponent } from './inline-message';
-import { KeyComponent, KeyItemComponent } from './key';
-import { KeyboardShortcutComponent } from './keyboard-shortcut';
-import { LabelComponent } from './label';
-import { LabelValueComponent } from './label-value';
-import { LinearProgressComponent } from './linear-progress';
-import { ListComponent } from './list';
-import { ListItemComponent } from './list/list-item';
-import { MenuComponent } from './menu';
-import { MeterComponent, MeterGroupComponent } from './meter';
-import { OpenIconComponent } from './open-icon';
-import { OverlayComponent } from './overlay';
-import { PageStateComponent } from './page-state';
-import { PaginatorComponent } from './paginator';
-import { PopoverComponent } from './popover';
-import { RadioComponent, RadioGroupComponent } from './radio';
-import { ScaffoldComponent } from './scaffold';
-import { OptionComponent, OptionGroupComponent, SelectComponent } from './select';
-import { SelectDropdownComponent } from './select/select-dropdown';
-import { SkeletonComponent } from './skeleton';
-import { SkipLinkComponent } from './skip-link';
-import { SliderComponent } from './slider';
-import { SplitViewComponent } from './split-view';
-import { StackComponent } from './stack';
-import { StateLayerComponent } from './state-layer';
-import { StepComponent, StepperComponent } from './stepper';
-import { SwitchComponent } from './switch';
-import { TableComponent } from './table';
-import { TabBarComponent, TabComponent } from './tabs';
-import { TextFieldComponent } from './text-field';
-import { TimePickerComponent } from './time-picker';
-import { ToastComponent } from './toast';
-import { ToolbarComponent } from './toolbar';
-import { TooltipComponent } from './tooltip';
-import { ViewComponent, ViewSwitcherComponent } from './view-switcher';
+import { defineAccordionComponent } from './accordion';
+import { defineAppBarComponent, defineAppBarHelpButtonComponent, defineAppBarMenuButtonComponent, defineAppBarNotificationButtonComponent, defineAppBarProfileButtonComponent, defineAppBarSearchComponent, defineProfileCardComponent } from './app-bar';
+import { defineAutocompleteComponent } from './autocomplete';
+import { defineAvatarComponent } from './avatar';
+import { defineBackdropComponent } from './backdrop';
+import { defineBadgeComponent } from './badge';
+import { defineBannerComponent } from './banner';
+import { defineBottomSheetComponent } from './bottom-sheet';
+import { defineButtonComponent } from './button';
+import { defineButtonAreaComponent } from './button-area';
+import { defineButtonToggleComponent, defineButtonToggleGroupComponent } from './button-toggle';
+import { defineCalendarComponent } from './calendar';
+import { defineCardComponent } from './card';
+import { defineCheckboxComponent } from './checkbox';
+import { defineChipFieldComponent } from './chip-field';
+import { defineChipComponent, defineChipSetComponent } from './chips';
+import { defineCircularProgressComponent } from './circular-progress';
+import { defineColorPickerComponent } from './color-picker';
+import { defineDatePickerComponent } from './date-picker';
+import { defineDateRangePickerComponent } from './date-range-picker';
+import { defineDialogComponent } from './dialog';
+import { defineDividerComponent } from './divider';
+import { defineDrawerComponent, defineMiniDrawerComponent, defineModalDrawerComponent } from './drawer';
+import { defineExpansionPanelComponent } from './expansion-panel';
+import { defineFieldComponent } from './field';
+import { defineFilePickerComponent } from './file-picker';
+import { defineFloatingActionButtonComponent } from './floating-action-button';
+import { defineFocusIndicatorComponent } from './focus-indicator';
+import { defineIconComponent } from './icon';
+import { defineIconButtonComponent } from './icon-button';
+import { defineInlineMessageComponent } from './inline-message';
+import { defineKeyComponent, defineKeyItemComponent } from './key';
+import { defineKeyboardShortcutComponent } from './keyboard-shortcut';
+import { defineLabelComponent } from './label';
+import { defineLabelValueComponent } from './label-value';
+import { defineLinearProgressComponent } from './linear-progress';
+import { defineListComponent } from './list';
+import { defineListItemComponent } from './list/list-item';
+import { defineMenuComponent } from './menu';
+import { defineMeterComponent, defineMeterGroupComponent } from './meter';
+import { defineOpenIconComponent } from './open-icon';
+import { defineOverlayComponent } from './overlay';
+import { definePageStateComponent } from './page-state';
+import { definePaginatorComponent } from './paginator';
+import { definePopoverComponent } from './popover';
+import { defineRadioComponent, defineRadioGroupComponent } from './radio';
+import { defineScaffoldComponent } from './scaffold';
+import { defineOptionComponent, defineOptionGroupComponent, defineSelectComponent } from './select';
+import { defineSelectDropdownComponent } from './select/select-dropdown';
+import { defineSkeletonComponent } from './skeleton';
+import { defineSkipLinkComponent } from './skip-link';
+import { defineSliderComponent } from './slider';
+import { defineSplitViewComponent } from './split-view';
+import { defineStackComponent } from './stack';
+import { defineStateLayerComponent } from './state-layer';
+import { defineStepComponent, defineStepperComponent } from './stepper';
+import { defineSwitchComponent } from './switch';
+import { defineTableComponent } from './table';
+import { defineTabBarComponent, defineTabComponent } from './tabs';
+import { defineTextFieldComponent } from './text-field';
+import { defineTimePickerComponent } from './time-picker';
+import { defineToastComponent } from './toast';
+import { defineToolbarComponent } from './toolbar';
+import { defineTooltipComponent } from './tooltip';
+import { defineViewComponent, defineViewSwitcherComponent } from './view-switcher';
 /**
  * Deprecated imports
  */
-import { DeprecatedButtonComponent } from './deprecated/button';
-import { DeprecatedIconButtonComponent } from './deprecated/icon-button';
+import { defineDeprecatedButtonComponent } from './deprecated/button';
+import { defineDeprecatedIconButtonComponent } from './deprecated/icon-button';
 export * from './accordion';
 export * from './app-bar';
 export * from './autocomplete';
@@ -152,101 +151,98 @@ export * from './view-switcher';
  */
 export * from './deprecated/button';
 export * from './deprecated/icon-button';
-const CUSTOM_ELEMENTS = [
-    AccordionComponent,
-    AppBarComponent,
-    AppBarHelpButtonComponent,
-    AppBarMenuButtonComponent,
-    AppBarNotificationButtonComponent,
-    AppBarProfileButtonComponent,
-    AppBarSearchComponent,
-    AutocompleteComponent,
-    AvatarComponent,
-    BackdropComponent,
-    BadgeComponent,
-    BannerComponent,
-    BottomSheetComponent,
-    ButtonAreaComponent,
-    ButtonComponent,
-    ButtonToggleComponent,
-    ButtonToggleGroupComponent,
-    CalendarComponent,
-    CardComponent,
-    CheckboxComponent,
-    ChipComponent,
-    ChipFieldComponent,
-    ChipSetComponent,
-    CircularProgressComponent,
-    ColorPickerComponent,
-    DatePickerComponent,
-    DateRangePickerComponent,
-    DialogComponent,
-    DividerComponent,
-    DrawerComponent,
-    ExpansionPanelComponent,
-    FieldComponent,
-    FilePickerComponent,
-    FloatingActionButtonComponent,
-    FocusIndicatorComponent,
-    IconButtonComponent,
-    IconComponent,
-    InlineMessageComponent,
-    KeyComponent,
-    KeyboardShortcutComponent,
-    KeyItemComponent,
-    LabelComponent,
-    LabelValueComponent,
-    LinearProgressComponent,
-    ListComponent,
-    ListItemComponent,
-    MenuComponent,
-    MeterComponent,
-    MeterGroupComponent,
-    MiniDrawerComponent,
-    ModalDrawerComponent,
-    OpenIconComponent,
-    OptionComponent,
-    OptionGroupComponent,
-    OverlayComponent,
-    PageStateComponent,
-    PaginatorComponent,
-    PopoverComponent,
-    ProfileCardComponent,
-    RadioComponent,
-    RadioGroupComponent,
-    ScaffoldComponent,
-    SelectComponent,
-    SelectDropdownComponent,
-    SkeletonComponent,
-    SkipLinkComponent,
-    SliderComponent,
-    SplitViewComponent,
-    StackComponent,
-    StateLayerComponent,
-    StepComponent,
-    StepperComponent,
-    SwitchComponent,
-    TabBarComponent,
-    TabComponent,
-    TableComponent,
-    TextFieldComponent,
-    TimePickerComponent,
-    ToastComponent,
-    ToolbarComponent,
-    TooltipComponent,
-    ViewComponent,
-    ViewSwitcherComponent
-];
 /**
  * Registers all components in the library with the browser.
  */
 export function defineComponents() {
-    defineCustomElements(CUSTOM_ELEMENTS);
+    defineAccordionComponent();
+    defineAppBarComponent();
+    defineAppBarHelpButtonComponent();
+    defineAppBarMenuButtonComponent();
+    defineAppBarNotificationButtonComponent();
+    defineAppBarProfileButtonComponent();
+    defineAppBarSearchComponent();
+    defineAutocompleteComponent();
+    defineAvatarComponent();
+    defineBackdropComponent();
+    defineBadgeComponent();
+    defineBannerComponent();
+    defineBottomSheetComponent();
+    defineButtonAreaComponent();
+    defineButtonComponent();
+    defineButtonToggleComponent();
+    defineButtonToggleGroupComponent();
+    defineCalendarComponent();
+    defineCardComponent();
+    defineCheckboxComponent();
+    defineChipComponent();
+    defineChipFieldComponent();
+    defineChipSetComponent();
+    defineCircularProgressComponent();
+    defineColorPickerComponent();
+    defineDatePickerComponent();
+    defineDateRangePickerComponent();
+    defineDialogComponent();
+    defineDividerComponent();
+    defineDrawerComponent();
+    defineExpansionPanelComponent();
+    defineFieldComponent();
+    defineFilePickerComponent();
+    defineFloatingActionButtonComponent();
+    defineFocusIndicatorComponent();
+    defineIconButtonComponent();
+    defineIconComponent();
+    defineInlineMessageComponent();
+    defineKeyComponent();
+    defineKeyboardShortcutComponent();
+    defineKeyItemComponent();
+    defineLabelComponent();
+    defineLabelValueComponent();
+    defineLinearProgressComponent();
+    defineListComponent();
+    defineListItemComponent();
+    defineMenuComponent();
+    defineMeterComponent();
+    defineMeterGroupComponent();
+    defineMiniDrawerComponent();
+    defineModalDrawerComponent();
+    defineOpenIconComponent();
+    defineOptionComponent();
+    defineOptionGroupComponent();
+    defineOverlayComponent();
+    definePageStateComponent();
+    definePaginatorComponent();
+    definePopoverComponent();
+    defineProfileCardComponent();
+    defineRadioComponent();
+    defineRadioGroupComponent();
+    defineScaffoldComponent();
+    defineSelectComponent();
+    defineSelectDropdownComponent();
+    defineSkeletonComponent();
+    defineSkipLinkComponent();
+    defineSliderComponent();
+    defineSplitViewComponent();
+    defineStackComponent();
+    defineStateLayerComponent();
+    defineStepComponent();
+    defineStepperComponent();
+    defineSwitchComponent();
+    defineTabBarComponent();
+    defineTabComponent();
+    defineTableComponent();
+    defineTextFieldComponent();
+    defineTimePickerComponent();
+    defineToastComponent();
+    defineToolbarComponent();
+    defineTooltipComponent();
+    defineViewComponent();
+    defineViewSwitcherComponent();
 }
 /**
  * Deprecated component registration
  */
-const DEPRECATED_CUSTOM_ELEMENTS = [DeprecatedButtonComponent, DeprecatedIconButtonComponent];
 export function defineDeprecatedComponents() {
-    defineCustomElements(DEPRECATED_CUSTOM_ELEMENTS);
+    defineDeprecatedButtonComponent();
+    defineDeprecatedIconButtonComponent();
 }

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

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