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

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

@@ -3,11 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IFloatingActionButtonComponent extends IBaseComponent {
-    exited: boolean;
-    mini: boolean;
-    extended: boolean;
+import { ButtonTheme } from '../button';
+import { BaseButton, IBaseButton } from '../button/base/base-button';
+import { FloatingActionButtonDensity, FloatingActionButtonElevation } from './floating-action-button-constants';
+import { FloatingActionButtonFoundation } from './floating-action-button-foundation';
+export interface IFloatingActionButtonComponent extends IBaseButton {
+    theme: ButtonTheme;
+    density: FloatingActionButtonDensity;
+    elevation: FloatingActionButtonElevation;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -15,30 +18,88 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-fab>` element.
- *
  * @tag forge-fab
+ *
+ * @summary Floating action buttons are used to represent the most important action on a page.
+ *
+ * @property {ButtonTheme} theme - Sets the theme of the button.
+ * @property {FloatingActionButtonDensity} density - Sets the density of the button.
+ * @property {FloatingActionButtonElevation} elevation - Sets the elevation of the button.
+ * @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 {string} theme - Sets the theme of the button.
+ * @attribute {string} density - Sets the density of the button.
+ * @attribute {string} elevation - Sets the elevation of the button.
+ * @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.
+ *
+ * @fires click - Fires when the button is clicked.
+ *
+ * @cssproperty --forge-fab-background-display - The display property.
+ * @cssproperty --forge-fab-gap - The gap between the icon and the label.
+ * @cssproperty --forge-fab-background - The background color.
+ * @cssproperty --forge-fab-color - The text color.
+ * @cssproperty --forge-fab-size - The height and min-width of the button.
+ * @cssproperty --forge-fab-padding - The inline padding of the button.
+ * @cssproperty --forge-fab-shadow - The box shadow of the button.
+ * @cssproperty --forge-fab-hover-shadow - The box shadow of the button when hovered.
+ * @cssproperty --forge-fab-active-shadow - The box shadow of the button when active.
+ * @cssproperty --forge-fab-lowered-shadow - The box shadow of the button when lowered.
+ * @cssproperty --forge-fab-lowered-hover-shadow - The box shadow of the button when lowered and hovered.
+ * @cssproperty --forge-fab-lowered-active-shadow - The box shadow of the button when lowered and active.
+ * @cssproperty --forge-fab-transition-duration - The transition duration.
+ * @cssproperty --forge-fab-transition-timing - The transition timing function.
+ * @cssproperty --forge-fab-shape - The border radius of the button.
+ * @cssproperty --forge-fab-shape-start-start - The start-start border radius.
+ * @cssproperty --forge-fab-shape-start-end - The start-end border radius.
+ * @cssproperty --forge-fab-shape-end-start - The end-start border radius.
+ * @cssproperty --forge-fab-shape-end-end - The end-end border radius.
+ * @cssproperty --forge-fab-extended-padding - The inline padding of the extended button.
+ * @cssproperty --forge-fab-extended-min-width - The min-width of the extended button.
+ * @cssproperty --forge-fab-density-small-size - The height and min-width of the small density button.
+ * @cssproperty --forge-fab-density-medium-size - The height and min-width of the medium density (default) button.
+ * @cssproperty --forge-fab-density-large-size - The height and min-width of the large density button.
+ * @cssproperty --forge-fab-disabled-cursor - The cursor when disabled.
+ * @cssproperty --forge-fab-disabled-background - The background color when disabled.
+ * @cssproperty --forge-fab-disabled-color - The text color when disabled.
+ * @cssproperty --forge-fab-disabled-opacity - The opacity when disabled.
+ *
+ * @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. Typically used for icon-only or label-only FABs. If the content forces the width to be large than the height, then the FAB will be in extended mode.
+ * @slot start - An element to logically render at the start of the button content.
+ * @slot label - Reserved specifically for label text. This forces the button into extended mode.
+ * @slot end - An element to logically render at the end of the button content.
  */
-export declare class FloatingActionButton extends BaseComponent implements IFloatingActionButtonComponent {
+export declare class FloatingActionButtonComponent extends BaseButton<FloatingActionButtonFoundation> implements IFloatingActionButtonComponent {
     static get observedAttributes(): string[];
-    private _rippleInstance;
-    private _isExtended;
-    private _isMini;
-    private _isExited;
-    private _buttonElement;
+    protected readonly _foundation: FloatingActionButtonFoundation;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private _initialize;
-    private _sync;
-    /** Gets/sets the exited state. */
-    set exited(value: boolean);
-    get exited(): boolean;
-    /** Gets/sets the mini state. */
-    set mini(value: boolean);
-    get mini(): boolean;
-    /** Gets/sets the extended state. */
-    set extended(value: boolean);
-    get extended(): boolean;
+    theme: ButtonTheme;
+    density: FloatingActionButtonDensity;
+    elevation: FloatingActionButtonElevation;
 }

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

@@ -4,127 +4,140 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { coerceBoolean, CustomElement, ensureChildren, toggleClass } from '@tylertech/forge-core';
-import { BaseComponent } from '../core/base/base-component';
-import { ForgeRipple } from '../ripple';
+import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { BaseButton } from '../button/base/base-button';
+import { BASE_BUTTON_CONSTANTS } from '../button/base/base-button-constants';
+import { FocusIndicatorComponent } from '../focus-indicator';
+import { IconComponent } from '../icon/icon';
+import { StateLayerComponent } from '../state-layer';
+import { FloatingActionButtonAdapter } from './floating-action-button-adapter';
 import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
+import { FloatingActionButtonFoundation } from './floating-action-button-foundation';
+const template = '<template><div class=\"forge-fab\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"label\"></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
+const styles = ':host{--_fab-display:var(--forge-fab-display, inline-flex);--_fab-disabled-cursor:var(--forge-fab-disabled-cursor, not-allowed)}:host{display:var(--_fab-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-fab{--_fab-gap:var(--forge-fab-spacing, var(--forge-spacing-xsmall, 8px));--_fab-background:var(--forge-fab-background, var(--forge-theme-secondary, #ffc107));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-secondary, #000000));--_fab-size:var(--forge-fab-size, 56px);--_fab-padding:var(--forge-fab-padding, var(--forge-spacing-xsmall, 8px));--_fab-shadow:var(--forge-fab-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_fab-hover-shadow:var(--forge-fab-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));--_fab-active-shadow:var(--forge-fab-active-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-shadow:var(--forge-fab-lowered-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-hover-shadow:var(--forge-fab-lowered-hover-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));--_fab-lowered-active-shadow:var(--forge-fab-lowered-active-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_fab-transition-duration:var(--forge-fab-transition-duration, var(--forge-animation-duration-short3, 150ms));--_fab-transition-timing:var(--forge-fab-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_fab-shape:var(--forge-fab-shape, var(--forge-shape-full, 9999px));--_fab-shape-start-start:var(--forge-fab-shape-start-start, var(--_fab-shape));--_fab-shape-start-end:var(--forge-fab-shape-start-end, var(--_fab-shape));--_fab-shape-end-start:var(--forge-fab-shape-end-start, var(--_fab-shape));--_fab-shape-end-end:var(--forge-fab-shape-end-end, var(--_fab-shape));--_fab-extended-padding:var(--forge-fab-extended-padding, var(--forge-spacing-medium-large, 20px));--_fab-extended-min-width:var(--forge-fab-extended-min-width, 96px);--_fab-density-small-size:var(--forge-fab-density-small-size, 40px);--_fab-density-medium-size:var(--forge-fab-density-medium-size, var(--_fab-size));--_fab-density-large-size:var(--forge-fab-density-large-size, 96px);--_fab-disabled-background:var(--forge-fab-disabled-background, var(--forge-theme-surface-container, #e0e0e0));--_fab-disabled-color:var(--forge-fab-disabled-color, var(--forge-theme-on-surface-container, #000000));--_fab-disabled-opacity:var(--forge-fab-disabled-opacity, 0.38)}.forge-fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;gap:var(--_fab-gap);z-index:0;background:var(--_fab-background);color:var(--_fab-color);cursor:pointer;-webkit-box-shadow:var(--_fab-shadow);box-shadow:var(--_fab-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_fab-density-medium-size);min-width:var(--_fab-density-medium-size);padding-inline:var(--_fab-padding);border-width:medium;border-style:none;border-color:currentColor;border-top-left-radius:var(--_fab-shape-start-start);border-top-right-radius:var(--_fab-shape-start-end);border-bottom-left-radius:var(--_fab-shape-end-start);border-bottom-right-radius:var(--_fab-shape-end-end);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;-webkit-transition-property:background,color,-webkit-box-shadow;transition-property:background,color,-webkit-box-shadow;transition-property:box-shadow,background,color;transition-property:box-shadow,background,color,-webkit-box-shadow;-webkit-transition-duration:var(--_fab-transition-duration);transition-duration:var(--_fab-transition-duration);-webkit-transition-timing-function:var(--_fab-transition-timing);transition-timing-function:var(--_fab-transition-timing)}.forge-fab:hover{--_fab-shadow:var(--_fab-hover-shadow)}.forge-fab:active{--_fab-shadow:var(--_fab-active-shadow)}.forge-fab--extended{padding-inline:var(--_fab-extended-padding);min-width:var(--_fab-extended-min-width)}a{position:absolute;inset:0;text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_fab-background);--forge-focus-indicator-shape-start-start:var(--_fab-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_fab-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_fab-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_fab-shape-end-end)}forge-state-layer{--forge-state-layer-color:var(--_fab-color)}:host(:is([dense],[density=small])) .forge-fab{--_fab-size:var(--_fab-density-small-size)}:host([density=large]) .forge-fab{--_fab-size:var(--_fab-density-large-size);--_fab-shape:var(--forge-fab-shape, var(--forge-shape-extra-large, 16px))}:host([elevation=lowered]) .forge-fab{--_fab-shadow:var(--_fab-lowered-shadow)}:host([elevation=lowered]) .forge-fab:hover{--_fab-shadow:var(--_fab-lowered-hover-shadow)}:host([elevation=lowered]) .forge-fab:active{--_fab-shadow:var(--_fab-lowered-active-shadow)}:host([disabled]){cursor:var(--_fab-disabled-cursor)}:host([disabled]) .forge-fab{--_fab-background:var(--_fab-disabled-background);--_fab-color:var(--_fab-disabled-color);pointer-events:none;opacity:var(--_fab-disabled-opacity)}:host([theme=primary]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-primary, #3f51b5));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=tertiary]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-tertiary, #3d5afe));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-success, #2e7d32));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-success, #ffffff))}:host([theme=error]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-error, #b00020));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-error, #ffffff))}:host([theme=warning]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-warning, #d14900));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=info]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-info, #1565c0));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-info, #ffffff))}';
 /**
- * The custom element class behind the `<forge-fab>` element.
- *
  * @tag forge-fab
+ *
+ * @summary Floating action buttons are used to represent the most important action on a page.
+ *
+ * @property {ButtonTheme} theme - Sets the theme of the button.
+ * @property {FloatingActionButtonDensity} density - Sets the density of the button.
+ * @property {FloatingActionButtonElevation} elevation - Sets the elevation of the button.
+ * @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 {string} theme - Sets the theme of the button.
+ * @attribute {string} density - Sets the density of the button.
+ * @attribute {string} elevation - Sets the elevation of the button.
+ * @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.
+ *
+ * @fires click - Fires when the button is clicked.
+ *
+ * @cssproperty --forge-fab-background-display - The display property.
+ * @cssproperty --forge-fab-gap - The gap between the icon and the label.
+ * @cssproperty --forge-fab-background - The background color.
+ * @cssproperty --forge-fab-color - The text color.
+ * @cssproperty --forge-fab-size - The height and min-width of the button.
+ * @cssproperty --forge-fab-padding - The inline padding of the button.
+ * @cssproperty --forge-fab-shadow - The box shadow of the button.
+ * @cssproperty --forge-fab-hover-shadow - The box shadow of the button when hovered.
+ * @cssproperty --forge-fab-active-shadow - The box shadow of the button when active.
+ * @cssproperty --forge-fab-lowered-shadow - The box shadow of the button when lowered.
+ * @cssproperty --forge-fab-lowered-hover-shadow - The box shadow of the button when lowered and hovered.
+ * @cssproperty --forge-fab-lowered-active-shadow - The box shadow of the button when lowered and active.
+ * @cssproperty --forge-fab-transition-duration - The transition duration.
+ * @cssproperty --forge-fab-transition-timing - The transition timing function.
+ * @cssproperty --forge-fab-shape - The border radius of the button.
+ * @cssproperty --forge-fab-shape-start-start - The start-start border radius.
+ * @cssproperty --forge-fab-shape-start-end - The start-end border radius.
+ * @cssproperty --forge-fab-shape-end-start - The end-start border radius.
+ * @cssproperty --forge-fab-shape-end-end - The end-end border radius.
+ * @cssproperty --forge-fab-extended-padding - The inline padding of the extended button.
+ * @cssproperty --forge-fab-extended-min-width - The min-width of the extended button.
+ * @cssproperty --forge-fab-density-small-size - The height and min-width of the small density button.
+ * @cssproperty --forge-fab-density-medium-size - The height and min-width of the medium density (default) button.
+ * @cssproperty --forge-fab-density-large-size - The height and min-width of the large density button.
+ * @cssproperty --forge-fab-disabled-cursor - The cursor when disabled.
+ * @cssproperty --forge-fab-disabled-background - The background color when disabled.
+ * @cssproperty --forge-fab-disabled-color - The text color when disabled.
+ * @cssproperty --forge-fab-disabled-opacity - The opacity when disabled.
+ *
+ * @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. Typically used for icon-only or label-only FABs. If the content forces the width to be large than the height, then the FAB will be in extended mode.
+ * @slot start - An element to logically render at the start of the button content.
+ * @slot label - Reserved specifically for label text. This forces the button into extended mode.
+ * @slot end - An element to logically render at the end of the button content.
  */
-let FloatingActionButton = class FloatingActionButton extends BaseComponent {
+let FloatingActionButtonComponent = class FloatingActionButtonComponent extends BaseButton {
     static get observedAttributes() {
         return [
-            FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED,
-            FLOATING_ACTION_BUTTON_CONSTANTS.attributes.MINI,
-            FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED
+            ...Object.values(BASE_BUTTON_CONSTANTS.observedAttributes),
+            ...Object.values(FLOATING_ACTION_BUTTON_CONSTANTS.observedAttributes)
         ];
     }
     constructor() {
         super();
-        this._isExtended = false;
-        this._isMini = false;
-        this._isExited = false;
-    }
-    connectedCallback() {
-        if (this.children.length) {
-            this._initialize();
-        }
-        else {
-            ensureChildren(this).then(() => this._initialize());
-        }
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new FloatingActionButtonFoundation(new FloatingActionButtonAdapter(this));
     }
     disconnectedCallback() {
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
+        this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED:
-                this.exited = coerceBoolean(newValue);
-                break;
-            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.MINI:
-                this.mini = coerceBoolean(newValue);
-                break;
-            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED:
-                this.extended = coerceBoolean(newValue);
-                break;
-        }
-    }
-    _initialize() {
-        // Make sure we have a button element
-        this._buttonElement = this.querySelector(FLOATING_ACTION_BUTTON_CONSTANTS.selectors.BUTTON);
-        if (!this._buttonElement) {
-            return;
+            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.THEME:
+                this.theme = newValue;
+                return;
+            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.DENSITY:
+                this.density = newValue;
+                return;
+            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.ELEVATION:
+                this.elevation = newValue;
+                return;
         }
-        this._buttonElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.BUTTON);
-        const rippleElement = this._buttonElement.querySelector(`.${FLOATING_ACTION_BUTTON_CONSTANTS.classes.RIPPLE}`) || document.createElement('div');
-        rippleElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.RIPPLE);
-        this._buttonElement.insertAdjacentElement('afterbegin', rippleElement);
-        this._sync();
-        if (this._rippleInstance) {
-            this._rippleInstance.destroy();
-        }
-        this._rippleInstance = new ForgeRipple(this._buttonElement);
-    }
-    _sync() {
-        if (!this._buttonElement) {
-            return;
-        }
-        toggleClass(this._buttonElement, this._isExited, FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXITED);
-        toggleClass(this._buttonElement, this._isMini, FLOATING_ACTION_BUTTON_CONSTANTS.classes.BUTTON_MINI);
-        toggleClass(this._buttonElement, this._isExtended, FLOATING_ACTION_BUTTON_CONSTANTS.classes.BUTTON_EXTENDED);
-        // Check if we need to set the label class
-        const labelElement = this.querySelector(FLOATING_ACTION_BUTTON_CONSTANTS.selectors.LABEL);
-        if (labelElement) {
-            labelElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.LABEL);
-        }
-        // Check if we need to set the icon class
-        const iconElement = this.querySelector(FLOATING_ACTION_BUTTON_CONSTANTS.selectors.ICON);
-        if (iconElement) {
-            iconElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.ICON);
-            iconElement.setAttribute('aria-hidden', 'true');
-        }
-    }
-    /** Gets/sets the exited state. */
-    set exited(value) {
-        if (this._isExited !== value) {
-            this._isExited = value;
-            this.setAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED, this._isExited.toString());
-            this._sync();
-        }
-    }
-    get exited() {
-        return this._isExited;
-    }
-    /** Gets/sets the mini state. */
-    set mini(value) {
-        if (this._isMini !== value) {
-            this._isMini = value;
-            this.setAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.MINI, this._isMini.toString());
-            this._sync();
-        }
-    }
-    get mini() {
-        return this._isMini;
-    }
-    /** Gets/sets the extended state. */
-    set extended(value) {
-        if (this._isExtended !== value) {
-            this._isExtended = value;
-            this.setAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED, this._isExtended.toString());
-            this._sync();
-        }
-    }
-    get extended() {
-        return this._isExtended;
+        super.attributeChangedCallback(name, oldValue, newValue);
     }
 };
-FloatingActionButton = __decorate([
+__decorate([
+    FoundationProperty()
+], FloatingActionButtonComponent.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], FloatingActionButtonComponent.prototype, "density", void 0);
+__decorate([
+    FoundationProperty()
+], FloatingActionButtonComponent.prototype, "elevation", void 0);
+FloatingActionButtonComponent = __decorate([
     CustomElement({
-        name: FLOATING_ACTION_BUTTON_CONSTANTS.elementName
+        name: FLOATING_ACTION_BUTTON_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent,
+            StateLayerComponent,
+            IconComponent
+        ]
     })
-], FloatingActionButton);
-export { FloatingActionButton };
+], FloatingActionButtonComponent);
+export { FloatingActionButtonComponent };

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

@@ -3,7 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './floating-action-button-constants';
 export * from './floating-action-button';
+export * from './floating-action-button-adapter';
 export * from './floating-action-button-component-delegate';
+export * from './floating-action-button-constants';
+export * from './floating-action-button-foundation';
 export declare function defineFloatingActionButtonComponent(): void;

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

@@ -4,10 +4,12 @@
  * License: Apache-2.0
  */
 import { defineCustomElement } from '@tylertech/forge-core';
-import { FloatingActionButton } from './floating-action-button';
-export * from './floating-action-button-constants';
+import { FloatingActionButtonComponent } from './floating-action-button';
 export * from './floating-action-button';
+export * from './floating-action-button-adapter';
 export * from './floating-action-button-component-delegate';
+export * from './floating-action-button-constants';
+export * from './floating-action-button-foundation';
 export function defineFloatingActionButtonComponent() {
-    defineCustomElement(FloatingActionButton);
+    defineCustomElement(FloatingActionButtonComponent);
 }

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

@@ -9,8 +9,8 @@ import { BaseComponent } from '../core/base/base-component';
 import { FocusIndicatorAdapter } from './focus-indicator-adapter';
 import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
 import { FocusIndicatorFoundation } from './focus-indicator-foundation';
-const template = '<template><div class=\"forge-focus-indicator\" part=\"indicator\"></div></template>';
-const styles = ':host{display:contents}:host([hidden]){display:none}.forge-focus-indicator{--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, var(--forge-shape-extra-small, 1px));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0)}.forge-focus-indicator{-webkit-animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);-webkit-animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);-webkit-animation-timing-function:var(--_focus-indicator-easing);animation-timing-function:var(--_focus-indicator-easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline)}:host([active]) .forge-focus-indicator{display:-webkit-box;display:flex}:host(:not([inward])) .forge-focus-indicator{-webkit-animation-name:outward-grow,outward-shrink;animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1 * var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor}:host([inward]) .forge-focus-indicator{-webkit-animation-name:inward-grow,inward-shrink;animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));border:var(--_focus-indicator-width) solid currentColor;inset:var(--_focus-indicator-inward-offset)}:host([circular]) .forge-focus-indicator{--_focus-indicator-shape:var(--forge-focus-indicator-shape, 50%)}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@media (prefers-reduced-motion){.forge-focus-indicator{-webkit-animation:none;animation:none}}';
+const template = '<template></template>';
+const styles = ':host{--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, var(--forge-shape-extra-small, 1px));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0)}:host{-webkit-animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);animation-delay:0s,calc(var(--_focus-indicator-duration) * .25);-webkit-animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);animation-duration:calc(var(--_focus-indicator-duration) * .25),calc(var(--_focus-indicator-duration) * .75);-webkit-animation-timing-function:var(--_focus-indicator-easing);animation-timing-function:var(--_focus-indicator-easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline)}:host([hidden]){display:none}:host([active]){display:-webkit-box;display:flex}:host(:not([inward])){-webkit-animation-name:outward-grow,outward-shrink;animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1 * var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor}:host([inward]){-webkit-animation-name:inward-grow,inward-shrink;animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));border:var(--_focus-indicator-width) solid currentColor;inset:var(--_focus-indicator-inward-offset)}:host([circular]){--_focus-indicator-shape:var(--forge-focus-indicator-shape, 50%)}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@keyframes inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}@media (prefers-reduced-motion){:host{-webkit-animation:none;animation:none}}';
 /**
  * @tag forge-focus-indicator
  *

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

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { Theme } from '../constants';
+import { Density, Theme } from '../constants';
 export declare const ICON_BUTTON_CONSTANTS: {
     elementName: "forge-icon-button";
     observedAttributes: {
@@ -30,10 +30,10 @@ export declare const ICON_BUTTON_CONSTANTS: {
         DEFAULT_VARIANT: IconButtonVariant;
         DEFAULT_THEME: Theme;
         DEFAULT_SHAPE: IconButtonShape;
-        DEFAULT_DENSITY: IconButtonDensity;
+        DEFAULT_DENSITY: Density;
     };
 };
 export type IconButtonVariant = 'icon' | 'outlined' | 'tonal' | 'filled' | 'raised';
 export type IconButtonTheme = Theme;
 export type IconButtonShape = 'circular' | 'squared';
-export type IconButtonDensity = 'small' | 'medium' | 'large';
+export type IconButtonDensity = Density;

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

@@ -67,6 +67,56 @@ declare global {
  * @event {Event} click - Fires when the button is clicked.
  * @event {Event} forge-icon-button-toggle - Fires when the icon button is toggled.
  *
+ * @cssproperty --forge-icon-button-display - The display property of the button.
+ * @cssproperty --forge-icon-button-size - The height and min-width of the button.
+ * @cssproperty --forge-icon-button-gap - The gap between the icon content.
+ * @cssproperty --forge-icon-button-icon-color - The color of the icon.
+ * @cssproperty --forge-icon-button-background-color - The background color of the button.
+ * @cssproperty --forge-icon-button-icon-size - The size of the icon.
+ * @cssproperty --forge-icon-button-cursor - The cursor of the button.
+ * @cssproperty --forge-icon-button-padding - The inline padding of the button.
+ * @cssproperty --forge-icon-button-border - The border of the button.
+ * @cssproperty --forge-icon-button-shadow - The shadow of the button.
+ * @cssproperty --forge-icon-button-transition-duration - The transition duration of the button.
+ * @cssproperty --forge-icon-button-transition-timing - The transition timing of the button.
+ * @cssproperty --forge-icon-button-shape - The shape of the button.
+ * @cssproperty --forge-icon-button-shape-start-start - The start-start border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-start-end - The start-end border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-end-start - The end-start border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-end-end - The end-end border-radius of the button.
+ * @cssproperty --forge-icon-button-shape-squared - The squared border-radius of the button.
+ * @cssproperty --forge-icon-button-outlined-border-width - The border width when in the outlined variant.
+ * @cssproperty --forge-icon-button-outlined-border-style - The border style when in the outlined variant.
+ * @cssproperty --forge-icon-button-outlined-border-color - The border color when in the outlined variant.
+ * @cssproperty --forge-icon-button-tonal-icon-color - The icon color when in the tonal variant.
+ * @cssproperty --forge-icon-button-tonal-background-color - The background color when in the tonal variant.
+ * @cssproperty --forge-icon-button-filled-icon-color - The icon color when in the filled variant.
+ * @cssproperty --forge-icon-button-filled-background-color - The background color when in the filled variant.
+ * @cssproperty --forge-icon-button-raised-shadow - The shadow when in the raised variant.
+ * @cssproperty --forge-icon-button-raised-hover-shadow - The shadow when in the raised variant and hovered.
+ * @cssproperty --forge-icon-button-raised-active-shadow - The shadow when in the raised variant and active.
+ * @cssproperty --forge-icon-button-raised-disabled-shadow - The shadow when in the raised variant and disabled.
+ * @cssproperty --forge-icon-button-density-small-size - The size of the button when in the small density.
+ * @cssproperty --forge-icon-button-density-small-padding - The padding of the button when in the small density.
+ * @cssproperty --forge-icon-button-density-small-icon-size - The size of the icon when in the small density.
+ * @cssproperty --forge-icon-button-density-medium-size - The size of the button when in the medium density.
+ * @cssproperty --forge-icon-button-density-medium-padding - The padding of the button when in the medium density.
+ * @cssproperty --forge-icon-button-density-large-size - The size of the button when in the large density.
+ * @cssproperty --forge-icon-button-toggle-on-icon-color - The color of the icon when in toggle mode and toggled on.
+ * @cssproperty --forge-icon-button-outlined-toggle-on-background-color - The background color when in the outlined variant and toggled on.
+ * @cssproperty --forge-icon-button-outlined-toggle-on-icon-color - The icon color when in the outlined variant and toggled on.
+ * @cssproperty --forge-icon-button-tonal-toggle-background-color - The background color when in the tonal variant and toggled.
+ * @cssproperty --forge-icon-button-tonal-toggle-on-background-color - The background color when in the tonal variant and toggled on.
+ * @cssproperty --forge-icon-button-tonal-toggle-on-icon-color - The icon color when in the tonal variant and toggled on.
+ * @cssproperty --forge-icon-button-filled-toggle-background-color - The background color when in the filled variant and toggled.
+ * @cssproperty --forge-icon-button-filled-toggle-icon-color - The icon color when in the filled variant and toggled.
+ * @cssproperty --forge-icon-button-filled-toggle-on-background-color - The background color when in the filled variant and toggled on.
+ * @cssproperty --forge-icon-button-filled-toggle-on-icon-color - The icon color when in the filled variant and toggled on.
+ * @cssproperty --forge-icon-button-disabled-cursor - The cursor when the button is disabled.
+ * @cssproperty --forge-icon-button-disabled-opacity - The opacity when the button is disabled.
+ * @cssproperty --forge-icon-button-popover-icon-padding - The padding of the popover icon.
+ * @cssproperty --forge-icon-button-focus-indicator-color - The color of the focus indicator.
+ *
  * @csspart root - The root container element.
  * @csspart focus-indicator - The focus-indicator indicator element.
  * @csspart state-layer - The state-layer surface element.
@@ -75,6 +125,7 @@ declare global {
  * @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.
+ * @slot badge - Absolutely positions the element in the top-end corner of the button (typically reserved for badge-like content).
  */
 export declare class IconButtonComponent extends BaseButton<IconButtonFoundation> implements IIconButtonComponent {
     static get observedAttributes(): string[];