@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

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

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation } from '../button/base/base-button-foundation';
+import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
+export class IconButtonFoundation extends BaseButtonFoundation {
+    constructor(adapter) {
+        super(adapter);
+        this._toggle = false;
+        this._on = 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;
+        this._density = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+    }
+    async _onClick(evt) {
+        if (this._toggle) {
+            this._onToggle();
+        }
+        super._onClick(evt);
+    }
+    _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;
+        if (cancelled) {
+            return;
+        }
+        this.on = !originalOn;
+    }
+    get toggle() {
+        return this._toggle;
+    }
+    set toggle(value) {
+        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.TOGGLE, this._toggle);
+        }
+    }
+    get on() {
+        return this._on;
+    }
+    set on(value) {
+        value = !!value;
+        if (this._on !== value) {
+            this._on = value;
+            if (this._toggle) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._on}`);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED);
+            }
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._on);
+        }
+    }
+    get variant() {
+        return this._variant;
+    }
+    set variant(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
+        if (this._variant !== value) {
+            this._variant = value;
+            if (this._variant !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.VARIANT, this._variant);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.VARIANT);
+            }
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+        if (this._theme !== value) {
+            this._theme = value;
+            if (this._theme !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.THEME, this._theme);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.THEME);
+            }
+        }
+    }
+    get shape() {
+        return this._shape;
+    }
+    set shape(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE;
+        if (this._shape !== value) {
+            this._shape = value;
+            if (this._shape !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.SHAPE, this._shape);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.SHAPE);
+            }
+        }
+    }
+    get density() {
+        return this._density;
+    }
+    set density(value) {
+        value = value !== null && value !== void 0 ? value : ICON_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+        if (this._density !== value) {
+            this._density = value;
+            if (this._density !== ICON_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY) {
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSITY, this._density);
+            }
+            else {
+                this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSITY);
+            }
+        }
+    }
+}

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

@@ -3,60 +3,88 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IIconButtonComponent extends IBaseComponent {
+import { BaseButton, IBaseButton } from '../button/base/base-button';
+import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant } from './icon-button-constants';
+import { IconButtonFoundation } from './icon-button-foundation';
+export interface IIconButtonComponent extends IBaseButton {
     toggle: boolean;
-    isOn: boolean;
-    dense: boolean;
-    densityLevel: number;
-    layout(): void;
+    on: boolean;
+    variant: IconButtonVariant;
+    theme: IconButtonTheme;
+    shape: IconButtonShape;
+    density: IconButtonDensity;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-icon-button': IIconButtonComponent;
     }
     interface HTMLElementEventMap {
-        'forge-icon-button-change': CustomEvent<boolean>;
+        'forge-icon-button-toggle': CustomEvent<boolean>;
     }
 }
 /**
- * The custom element class behind the `<forge-icon-button>` element.
- *
  * @tag forge-icon-button
+ *
+ * @summary Icons buttons are used to trigger an action or event.
+ *
+ * @property {boolean} toggle - Whether or not the icon button can be toggled.
+ * @property {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @property {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @property {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @property {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @property {boolean} disabled - Whether or not the button is disabled.
+ * @property {boolean} popoverIcon - Whether or not the button shows a built-in popover icon.
+ * @property {string} name - The name of the button.
+ * @property {string} value - The form value of the button.
+ * @property {boolean} dense - Whether or not the button is dense.
+ * @property {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @property {string} href - The href of the anchor.
+ * @property {string} target - The target of the anchor.
+ * @property {string} download - The download of the anchor.
+ * @property {string} rel - The rel of the anchor.
+ * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
+ *
+ * @attribute {boolean} toggle - Whether or not the icon button can be toggled.
+ * @attribute {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @attribute {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @attribute {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @attribute {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @attribute {boolean} disabled - Whether or not the button is disabled.
+ * @attribute {boolean} popover-icon - Whether or not the button shows a built-in popover icon.
+ * @attribute {string} name - The name of the button.
+ * @attribute {string} value - The form value of the button.
+ * @attribute {boolean} dense - Whether or not the button is dense.
+ * @attribute {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @attribute {string} href - The href of the anchor.
+ * @attribute {string} target - The target of the anchor.
+ * @attribute {string} download - The download of the anchor.
+ * @attribute {string} rel - The rel of the anchor.
+ *
+ * @event {Event} click - Fires when the button is clicked.
+ * @event {Event} forge-icon-button-toggle - Fires when the icon button is toggled.
+ *
+ * @csspart root - The root container element.
+ * @csspart focus-indicator - The focus-indicator indicator element.
+ * @csspart state-layer - The state-layer surface element.
+ *
+ * @slot - This is a default/unnamed slot for the icon.
+ * @slot on - The icon to show when in `toggle` mode when toggled "on".
+ * @slot start - Elements to logically render before the icon.
+ * @slot end - Elements to logically render after the icon.
  */
-export declare class IconButtonComponent extends BaseComponent implements IIconButtonComponent {
+export declare class IconButtonComponent extends BaseButton<IconButtonFoundation> implements IIconButtonComponent {
     static get observedAttributes(): string[];
-    private _rippleInstance;
-    private _buttonElement;
-    private _toggle;
-    private _isOn;
-    private _dense;
-    private _densityLevel;
-    private _toggleHandler;
-    private _destroyUserInteractionListener;
+    protected readonly _foundation: IconButtonFoundation;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets whether the button is togglable. */
-    get toggle(): boolean;
-    set toggle(value: boolean);
-    /** Gets/sets the toggled state of the icon button. Only applies when `toggle = true`. */
-    get isOn(): boolean;
-    set isOn(value: boolean);
-    /** Gets/sets whether the icon button is dense. */
-    get dense(): boolean;
-    set dense(value: boolean);
-    /** Controls the density level. 1 (least dense) to 6 (most dense). */
-    get densityLevel(): number;
-    set densityLevel(value: number);
-    private _initialize;
-    private _deferRippleInitialization;
-    private _createRipple;
-    private _toggleValue;
-    private _applyToggle;
-    private _applyDensity;
-    private _initializeToggle;
-    private _destroyToggle;
-    layout(): void;
+    toggle: boolean;
+    on: boolean;
+    theme: IconButtonTheme;
+    variant: IconButtonVariant;
+    shape: IconButtonShape;
+    density: IconButtonDensity;
 }

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

@@ -4,241 +4,135 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { coerceBoolean, coerceNumber, CustomElement, emitEvent, ensureChild, toggleClass } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { ForgeRipple } from '../ripple';
-import { createUserInteractionListener } from '../core/utils';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconArrowDropDown } from '@tylertech/tyler-icons/standard';
+import { IconComponent, IconRegistry } from '../icon';
+import { BaseButton } from '../button/base/base-button';
+import { BASE_BUTTON_CONSTANTS } from '../button/base/base-button-constants';
+import { FocusIndicatorComponent } from '../focus-indicator';
+import { StateLayerComponent } from '../state-layer';
 import { ICON_BUTTON_CONSTANTS } from './icon-button-constants';
+import { IconButtonFoundation } from './icon-button-foundation';
+import { IconButtonAdapter } from './icon-button-adapter';
+const template = '<template><div class=\"forge-icon-button\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"on\"></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" exportparts=\"indicator:focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
+const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, inline-flex);--_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed)}:host{display:var(--_icon-button-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-icon-button{--_icon-button-size:var(--forge-icon-button-size, 48px);--_icon-button-gap:var(--forge-icon-button-spacing, 0);--_icon-button-icon-color:var(--forge-icon-button-icon-color, inherit);--_icon-button-background-color:var(--forge-icon-button-background-color, none);--_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));--_icon-button-cursor:var(--forge-icon-button-cursor, pointer);--_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-border:var(--forge-icon-button-border, none);--_icon-button-shadow:var(--forge-icon-button-shadow, none);--_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));--_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_icon-button-shape:var(--forge-icon-button-shape, var(--forge-shape-full, 9999px));--_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));--_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));--_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));--_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));--_icon-button-shape-squared:var(--forge-icon-button-shape-squared, var(--forge-shape-medium, 4px));--_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);--_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);--_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));--_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #0f132b));--_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));--_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);--_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);--_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));--_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));--_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);--_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));--_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));--_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));--_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);--_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}.forge-icon-button{position:relative;z-index:0;display:var(--_icon-button-display);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_icon-button-gap);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_icon-button-density-large-size);min-width:var(--_icon-button-density-large-size);border:var(--_icon-button-border);border-start-start-radius:var(--_icon-button-shape-start-start);border-start-end-radius:var(--_icon-button-shape-start-end);border-end-start-radius:var(--_icon-button-shape-end-start);border-end-end-radius:var(--_icon-button-shape-end-end);padding:var(--_icon-button-padding);-webkit-box-shadow:var(--_icon-button-shadow);box-shadow:var(--_icon-button-shadow);color:var(--_icon-button-icon-color);background:var(--_icon-button-background-color);font-size:var(--_icon-button-icon-size);cursor:var(--_icon-button-cursor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition-property:background,-webkit-box-shadow;transition-property:background,-webkit-box-shadow;transition-property:box-shadow,background;transition-property:box-shadow,background,-webkit-box-shadow;-webkit-transition-duration:var(--_icon-button-transition-duration);transition-duration:var(--_icon-button-transition-duration);-webkit-transition-timing-function:var(--_icon-button-transition-timing);transition-timing-function:var(--_icon-button-transition-timing)}.forge-icon-button ::slotted(:is([slot=start],[slot=end])){font-size:var(--_icon-button-icon-size);height:var(--_icon-button-icon-size);width:var(--_icon-button-icon-size);font-weight:inherit}a{position:absolute;inset:0;text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_icon-button-focus-indicator-color);--forge-focus-indicator-shape-start-start:var(--_icon-button-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_icon-button-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_icon-button-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_icon-button-shape-end-end)}:host(:is([variant=icon],:not([variant]))){--forge-focus-indicator-outward-offset:0px}forge-state-layer{--forge-state-layer-color:var(--_icon-button-icon-color)}:host([popover-icon]) .forge-icon-button{--_icon-button-padding:var(--_icon-button-popover-icon-padding)}:host([variant=outlined]) .forge-icon-button{border-width:var(--_icon-button-outlined-border-width);border-style:var(--_icon-button-outlined-border-style);border-color:var(--_icon-button-outlined-border-color)}:host([variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-background-color)}:host(:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-icon-color);--_icon-button-background-color:var(--_icon-button-filled-background-color)}:host([variant=raised]) .forge-icon-button{--_icon-button-shadow:var(--_icon-button-raised-shadow)}:host([variant=raised]) .forge-icon-button:hover{--_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow)}:host([variant=raised]) .forge-icon-button:active{--_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow)}:host(:is(:not([toggle]),[toggle]:not([on]))) slot[name=on]{display:none}:host([toggle][on]) slot:not([name]){display:none}:host([toggle][on]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-toggle-on-icon-color)}:host([toggle][on][variant=outlined]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-outlined-toggle-on-background-color);--_icon-button-icon-color:var(--_icon-button-outlined-toggle-on-icon-color)}:host([toggle]:not([on])[variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--_icon-button-tonal-toggle-background-color)}:host([toggle][on][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-tonal-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-tonal-toggle-on-background-color)}:host([toggle]:not([on]):is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-background-color)}:host([toggle][on]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--_icon-button-filled-toggle-on-icon-color);--_icon-button-background-color:var(--_icon-button-filled-toggle-on-background-color)}:host(:is([dense],[density=small])) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-small-size);--_icon-button-icon-size:var(--_icon-button-density-small-icon-size);--_icon-button-padding:var(--_icon-button-density-small-padding)}:host(:is([dense],[density=small])) ::slotted(*){font-size:var(--_icon-button-density-small-icon-size)}:host([density=medium]) .forge-icon-button{--_icon-button-size:var(--_icon-button-density-medium-size);--_icon-button-padding:var(--_icon-button-density-medium-padding)}:host([shape=squared]) .forge-icon-button{--_icon-button-shape:var(--_icon-button-shape-squared)}:host([disabled]){cursor:var(--_icon-button-disabled-cursor)}:host([disabled]) .forge-icon-button{pointer-events:none;opacity:var(--_icon-button-disabled-opacity)}:host([disabled][variant=raised]) .forge-icon-button{--_icon-button-raised-shadow:var(--_icon-button-raised-disabled-shadow)}:host(:not([toggle])[theme=primary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([toggle][theme=primary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-primary, #3f51b5));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container-low, #e8eaf6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5))}:host(:not([toggle])[theme=secondary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host([toggle][theme=secondary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-secondary-container-low, #fff8e1));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary-container, #3d2e02));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container, #fff0c3))}:host([toggle]:not([on])[theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-secondary-container, #fff0c3));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-secondary-container, #3d2e02))}:host(:not([toggle])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-secondary, #000000));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary, #ffc107))}:host([toggle]:not([on])[theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-secondary, #ffc107));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-secondary-container-low, #fff8e1))}:host([toggle][theme=secondary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-secondary, #ffc107));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-secondary, #000000))}:host([theme=secondary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-secondary, #ffc107))}:host(:not([toggle])[theme=tertiary]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle][theme=tertiary][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-tertiary-container-low, #e8ebff));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary-container, #0f163d));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container, #d0d7ff))}:host([toggle]:not([on])[theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-tertiary-container, #d0d7ff));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-tertiary-container, #0f163d))}:host(:not([toggle])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary, #3d5afe))}:host([toggle]:not([on])[theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-tertiary-container-low, #e8ebff))}:host([toggle][theme=tertiary]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-tertiary, #3d5afe));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=tertiary]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-tertiary, #3d5afe))}:host(:not([toggle])[theme=success]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host([toggle][theme=success][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-success-container-low, #e6efe6));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success-container, #0b1e0c));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container, #cde0ce))}:host([toggle]:not([on])[theme=success][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-success-container, #cde0ce));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-success-container, #0b1e0c))}:host(:not([toggle])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-success, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success, #2e7d32))}:host([toggle]:not([on])[theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-success, #2e7d32));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-success-container-low, #e6efe6))}:host([toggle][theme=success]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-success, #2e7d32));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-success, #ffffff))}:host([theme=success]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-success, #2e7d32))}:host(:not([toggle])[theme=error]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host([toggle][theme=error][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-error-container-low, #f6e0e4));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error-container, #2a0008));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container, #ecc2c9))}:host([toggle]:not([on])[theme=error][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-error-container, #ecc2c9));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-error-container, #2a0008))}:host(:not([toggle])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-error, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error, #b00020))}:host([toggle]:not([on])[theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-error, #b00020));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-error-container-low, #f6e0e4))}:host([toggle][theme=error]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-error, #b00020));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-error, #ffffff))}:host([theme=error]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-error, #b00020))}:host(:not([toggle])[theme=warning]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host([toggle][theme=warning][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-warning-container-low, #f9e9e0));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning-container, #321200));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container, #f4d3c2))}:host([toggle]:not([on])[theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-warning-container, #f4d3c2));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-warning-container, #321200))}:host(:not([toggle])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-warning, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning, #d14900))}:host([toggle]:not([on])[theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-warning, #d14900));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-warning-container-low, #f9e9e0))}:host([toggle][theme=warning]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-warning, #d14900));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=warning]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-warning, #d14900))}:host(:not([toggle])[theme=info]:is(:not([variant]),[variant=icon],[variant=outlined])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info]:is(:not([variant]),[variant=icon])) .forge-icon-button{--_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host([toggle][theme=info][variant=outlined]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-info-container-low, #e3edf7));--_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-info, #1565c0))}:host(:not([toggle])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info-container, #05182e));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container, #c7daf0))}:host([toggle]:not([on])[theme=info][variant=tonal]) .forge-icon-button{--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info][variant=tonal]) .forge-icon-button{--_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-info-container, #c7daf0));--_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-on-info-container, #05182e))}:host(:not([toggle])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-on-info, #ffffff));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info, #1565c0))}:host([toggle]:not([on])[theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-icon-color:var(--forge-icon-button-icon-color, var(--forge-theme-info, #1565c0));--_icon-button-background-color:var(--forge-icon-button-background-color, var(--forge-theme-info-container-low, #e3edf7))}:host([toggle][theme=info]:is([variant=filled],[variant=raised])) .forge-icon-button{--_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-info, #1565c0));--_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-info, #ffffff))}:host([theme=info]) .forge-icon-button{--_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-info, #1565c0))}';
 /**
- * The custom element class behind the `<forge-icon-button>` element.
- *
  * @tag forge-icon-button
+ *
+ * @summary Icons buttons are used to trigger an action or event.
+ *
+ * @property {boolean} toggle - Whether or not the icon button can be toggled.
+ * @property {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @property {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @property {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @property {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @property {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @property {boolean} disabled - Whether or not the button is disabled.
+ * @property {boolean} popoverIcon - Whether or not the button shows a built-in popover icon.
+ * @property {string} name - The name of the button.
+ * @property {string} value - The form value of the button.
+ * @property {boolean} dense - Whether or not the button is dense.
+ * @property {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @property {string} href - The href of the anchor.
+ * @property {string} target - The target of the anchor.
+ * @property {string} download - The download of the anchor.
+ * @property {string} rel - The rel of the anchor.
+ * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
+ *
+ * @attribute {boolean} toggle - Whether or not the icon button can be toggled.
+ * @attribute {boolean} on - Whether or not the button is on. Only applies when `toggle` is `true`.
+ * @attribute {IconButtonVariant} variant - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+ * @attribute {IconButtonTheme} theme - The theme of the button. Valid values are `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
+ * @attribute {string} shape - The shape of the button. Valid values are `circular` and `squared`.
+ * @attribute {IconButtonDensity} density - The density of the button. Valid values are `small`, `medium`, and `large`.
+ * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
+ * @attribute {boolean} disabled - Whether or not the button is disabled.
+ * @attribute {boolean} popover-icon - Whether or not the button shows a built-in popover icon.
+ * @attribute {string} name - The name of the button.
+ * @attribute {string} value - The form value of the button.
+ * @attribute {boolean} dense - Whether or not the button is dense.
+ * @attribute {boolean} anchor - Whether or not the button is an `<a>` element.
+ * @attribute {string} href - The href of the anchor.
+ * @attribute {string} target - The target of the anchor.
+ * @attribute {string} download - The download of the anchor.
+ * @attribute {string} rel - The rel of the anchor.
+ *
+ * @event {Event} click - Fires when the button is clicked.
+ * @event {Event} forge-icon-button-toggle - Fires when the icon button is toggled.
+ *
+ * @csspart root - The root container element.
+ * @csspart focus-indicator - The focus-indicator indicator element.
+ * @csspart state-layer - The state-layer surface element.
+ *
+ * @slot - This is a default/unnamed slot for the icon.
+ * @slot on - The icon to show when in `toggle` mode when toggled "on".
+ * @slot start - Elements to logically render before the icon.
+ * @slot end - Elements to logically render after the icon.
  */
-let IconButtonComponent = class IconButtonComponent extends BaseComponent {
+let IconButtonComponent = class IconButtonComponent extends BaseButton {
     static get observedAttributes() {
         return [
-            ICON_BUTTON_CONSTANTS.attributes.IS_ON,
-            ICON_BUTTON_CONSTANTS.attributes.DENSE,
-            ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL,
-            ICON_BUTTON_CONSTANTS.attributes.TOGGLE
+            ...Object.values(BASE_BUTTON_CONSTANTS.observedAttributes),
+            ...Object.values(ICON_BUTTON_CONSTANTS.observedAttributes)
         ];
     }
     constructor() {
         super();
-        this._toggle = false;
-        this._isOn = false;
-        this._dense = false;
-        this._densityLevel = 5;
-    }
-    connectedCallback() {
-        if (this.querySelector(ICON_BUTTON_CONSTANTS.selectors.BUTTON)) {
-            this._initialize();
-        }
-        else {
-            ensureChild(this, ICON_BUTTON_CONSTANTS.selectors.BUTTON).then(() => this._initialize());
-        }
-    }
-    disconnectedCallback() {
-        if (typeof this._destroyUserInteractionListener === 'function') {
-            this._destroyUserInteractionListener();
-            this._destroyUserInteractionListener = undefined;
-        }
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
+        IconRegistry.define(tylIconArrowDropDown);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new IconButtonFoundation(new IconButtonAdapter(this));
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case ICON_BUTTON_CONSTANTS.attributes.IS_ON:
-                this.isOn = coerceBoolean(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
+                this.toggle = coerceBoolean(newValue);
                 break;
-            case ICON_BUTTON_CONSTANTS.attributes.DENSE:
-                this.dense = coerceBoolean(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.ON:
+                this.on = coerceBoolean(newValue);
                 break;
-            case ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL:
-                this.densityLevel = coerceNumber(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.VARIANT:
+                this.variant = newValue;
                 break;
-            case ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
-                this.toggle = coerceBoolean(newValue);
+            case ICON_BUTTON_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                break;
+            case ICON_BUTTON_CONSTANTS.attributes.SHAPE:
+                this.shape = newValue;
+                break;
+            case ICON_BUTTON_CONSTANTS.attributes.DENSITY:
+                this.density = newValue;
                 break;
         }
-    }
-    /** Gets/sets whether the button is togglable. */
-    get toggle() {
-        return this._toggle;
-    }
-    set toggle(value) {
-        this._toggle = value;
-        if (this._toggle) {
-            this._initializeToggle();
-        }
-        else {
-            this._destroyToggle();
-        }
-    }
-    /** Gets/sets the toggled state of the icon button. Only applies when `toggle = true`. */
-    get isOn() {
-        return this._isOn;
-    }
-    set isOn(value) {
-        if (this._isOn !== value) {
-            this._isOn = value;
-            this._applyToggle();
-        }
-    }
-    /** Gets/sets whether the icon button is dense. */
-    get dense() {
-        return this._dense;
-    }
-    set dense(value) {
-        if (this._dense !== value) {
-            this._dense = value;
-            this._applyDensity();
-        }
-    }
-    /** Controls the density level. 1 (least dense) to 6 (most dense). */
-    get densityLevel() {
-        return this._densityLevel;
-    }
-    set densityLevel(value) {
-        if (this._densityLevel !== value) {
-            this._densityLevel = value;
-            if (this._densityLevel <= 0) {
-                this._densityLevel = 1;
-            }
-            else if (this._densityLevel > 6) {
-                this._densityLevel = 6;
-            }
-            else if (typeof this._densityLevel !== 'number') {
-                this._densityLevel = 5;
-            }
-            this._applyDensity();
-        }
-    }
-    _initialize() {
-        this._buttonElement = this.querySelector(ICON_BUTTON_CONSTANTS.selectors.BUTTON);
-        if (!this._buttonElement) {
-            return;
-        }
-        this._buttonElement.classList.add(ICON_BUTTON_CONSTANTS.classes.BUTTON);
-        this._applyToggle();
-        this._applyDensity();
-        this._toggleHandler = () => {
-            this._toggleValue();
-            emitEvent(this, ICON_BUTTON_CONSTANTS.events.CHANGE, this._isOn, true);
-        };
-        if (this._toggle) {
-            this._initializeToggle();
-        }
-        // We wait to initialize the ripple instance until the user interacts with the component to avoid unnecessary performance overhead
-        this._deferRippleInitialization();
-    }
-    async _deferRippleInitialization() {
-        const { userInteraction, destroy } = createUserInteractionListener(this._buttonElement);
-        this._destroyUserInteractionListener = destroy;
-        const { type } = await userInteraction;
-        this._destroyUserInteractionListener = undefined;
-        if (!this._rippleInstance) {
-            this._rippleInstance = this._createRipple();
-            if (type === 'focusin') {
-                this._rippleInstance.handleFocus();
-            }
-        }
-    }
-    _createRipple() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
-        const ripple = new ForgeRipple(this._buttonElement);
-        ripple.unbounded = true;
-        return ripple;
-    }
-    _toggleValue() {
-        this._isOn = !this._isOn;
-        this._applyToggle();
-    }
-    _applyToggle() {
-        if (!this._buttonElement) {
-            return;
-        }
-        toggleClass(this._buttonElement, this._isOn, ICON_BUTTON_CONSTANTS.classes.BUTTON_ON);
-        if (this._toggle) {
-            this._buttonElement.setAttribute('aria-pressed', `${this._isOn}`);
-        }
-    }
-    _applyDensity() {
-        if (!this._buttonElement) {
-            return;
-        }
-        // Remove all other density classes first
-        ICON_BUTTON_CONSTANTS.classes.DENSITY.forEach(c => this._buttonElement.classList.remove(c));
-        if (this._dense) {
-            this.setAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSE, '');
-            this._buttonElement.classList.add(ICON_BUTTON_CONSTANTS.classes.BUTTON_DENSE);
-            // 5 is the default density level (we apply 5 implicitly in the regular dense class)
-            // Exclude 5 since its already covered by dense class
-            if (this._densityLevel < 7 && this._densityLevel > 0 && this.densityLevel !== 5) {
-                const densityLevelClass = ICON_BUTTON_CONSTANTS.classes.DENSITY[this._densityLevel - 1];
-                this._buttonElement.classList.add(densityLevelClass);
-                this.setAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSITY_LEVEL, this._densityLevel.toString());
-            }
-        }
-        else {
-            this.removeAttribute(ICON_BUTTON_CONSTANTS.attributes.DENSE);
-            this._buttonElement.classList.remove(ICON_BUTTON_CONSTANTS.classes.BUTTON_DENSE);
-        }
-        // re-layout the ripple for cases where dense was changed after initial layout
-        if (this._rippleInstance) {
-            this._rippleInstance.layout();
-        }
-    }
-    _initializeToggle() {
-        if (!this._buttonElement) {
-            return;
-        }
-        const icons = Array.from(this._buttonElement.querySelectorAll(ICON_BUTTON_CONSTANTS.selectors.ICON));
-        // We require two icon/image elements to be specified for the "on" and "off" states
-        if (icons.length !== 2) {
-            console.error('You must specify two icons, one for "on" and one for "off".');
-            return;
-        }
-        // Add the icon class to each icon
-        icons.forEach(icon => icon.classList.add(ICON_BUTTON_CONSTANTS.classes.ICON));
-        // If there are no icons that specify the "on" class, then automatically choose the first icon as the "on" icon and add the class,
-        // alternatively we check for the existence of a `forge-icon-button-on` attribute on any of the icons and use that.
-        if (!icons.some(icon => icon.classList.contains(ICON_BUTTON_CONSTANTS.classes.ICON_ON))) {
-            const requestedOnIcon = icons.find(icon => icon.hasAttribute(ICON_BUTTON_CONSTANTS.attributes.ICON_ON));
-            if (requestedOnIcon) {
-                requestedOnIcon.classList.add(ICON_BUTTON_CONSTANTS.classes.ICON_ON);
-            }
-            else {
-                icons[0].classList.add(ICON_BUTTON_CONSTANTS.classes.ICON_ON);
-            }
-        }
-        this._buttonElement.addEventListener('click', this._toggleHandler);
-        // Wait a frame to ensure the value of the `on` property has been set
-        window.requestAnimationFrame(() => {
-            if (this._isOn) {
-                this._buttonElement.classList.add(ICON_BUTTON_CONSTANTS.classes.BUTTON_ON);
-                this._buttonElement.setAttribute('aria-pressed', `${this._isOn}`);
-            }
-        });
-    }
-    _destroyToggle() {
-        if (!this._buttonElement) {
-            return;
-        }
-        this._buttonElement.removeEventListener('click', this._toggleHandler);
-    }
-    layout() {
-        if (this._rippleInstance) {
-            this._rippleInstance.layout();
-        }
+        super.attributeChangedCallback(name, oldValue, newValue);
     }
 };
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "toggle", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "on", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "variant", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "shape", void 0);
+__decorate([
+    FoundationProperty()
+], IconButtonComponent.prototype, "density", void 0);
 IconButtonComponent = __decorate([
     CustomElement({
-        name: ICON_BUTTON_CONSTANTS.elementName
+        name: ICON_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent,
+            IconComponent
+        ]
     })
 ], IconButtonComponent);
 export { IconButtonComponent };