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

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation, IBaseButtonFoundation } from '../button/base/base-button-foundation';
+import { ButtonTheme } from '../button/button-constants';
+import { IFloatingActionButtonAdapter } from './floating-action-button-adapter';
+import { FloatingActionButtonDensity, FloatingActionButtonElevation } from './floating-action-button-constants';
+export interface IFloatingActionButtonFoundation extends IBaseButtonFoundation {
+    theme: ButtonTheme;
+    density: FloatingActionButtonDensity;
+    elevation: FloatingActionButtonElevation;
+}
+export declare class FloatingActionButtonFoundation extends BaseButtonFoundation<IFloatingActionButtonAdapter> implements IFloatingActionButtonFoundation {
+    private _theme;
+    private _density;
+    private _elevation;
+    constructor(adapter: IFloatingActionButtonAdapter);
+    destroy(): void;
+    get theme(): ButtonTheme;
+    set theme(value: ButtonTheme);
+    get density(): FloatingActionButtonDensity;
+    set density(value: FloatingActionButtonDensity);
+    get elevation(): FloatingActionButtonElevation;
+    set elevation(value: FloatingActionButtonElevation);
+}

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonFoundation } from '../button/base/base-button-foundation';
+import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
+export class FloatingActionButtonFoundation extends BaseButtonFoundation {
+    constructor(adapter) {
+        super(adapter);
+        this._theme = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+        this._density = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+        this._elevation = FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_ELEVATION;
+    }
+    destroy() {
+        this._adapter.destroy();
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value !== null && value !== void 0 ? value : FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+            const hasAttr = this._theme !== FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
+            this._adapter.toggleHostAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.THEME, hasAttr, this._theme);
+        }
+    }
+    get density() {
+        return this._density;
+    }
+    set density(value) {
+        if (this._density !== value) {
+            this._density = value !== null && value !== void 0 ? value : FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+            const hasAttr = this._density !== FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_DENSITY;
+            this._adapter.toggleHostAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.DENSITY, hasAttr, this._density);
+        }
+    }
+    get elevation() {
+        return this._elevation;
+    }
+    set elevation(value) {
+        if (this._elevation !== value) {
+            this._elevation = value !== null && value !== void 0 ? value : FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_ELEVATION;
+            const hasAttr = this._elevation !== FLOATING_ACTION_BUTTON_CONSTANTS.defaults.DEFAULT_ELEVATION;
+            this._adapter.toggleHostAttribute(FLOATING_ACTION_BUTTON_CONSTANTS.attributes.ELEVATION, hasAttr, this._elevation);
+        }
+    }
+}

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-adapter.d.ts

@@ -13,7 +13,7 @@ export interface IFocusIndicatorAdapter extends IBaseAdapter {
     getTargetElement(): HTMLElement | null;
     setTargetElement(el: HTMLElement | null): void;
     trySetTarget(value: string | null): void;
-    isActive(selector: string): boolean;
+    isActive(selector: string, el?: HTMLElement | null): boolean;
 }
 export declare class FocusIndicatorAdapter extends BaseAdapter<IFocusIndicatorComponent> implements IFocusIndicatorAdapter {
     private _targetElement;
@@ -25,5 +25,5 @@ export declare class FocusIndicatorAdapter extends BaseAdapter<IFocusIndicatorCo
     getTargetElement(): HTMLElement | null;
     setTargetElement(el: HTMLElement | null): void;
     trySetTarget(value: string | null): void;
-    isActive(selector: string): boolean;
+    isActive(selector: string, el?: HTMLElement | null): boolean;
 }

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

@@ -32,8 +32,8 @@ export class FocusIndicatorAdapter extends BaseAdapter {
     trySetTarget(value) {
         this._targetElement = locateTargetHeuristic(this._component, value);
     }
-    isActive(selector) {
-        var _a;
-        return !!((_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.matches(selector));
+    isActive(selector, el) {
+        const targetedEl = el !== null && el !== void 0 ? el : this._targetElement;
+        return !!(targetedEl === null || targetedEl === void 0 ? void 0 : targetedEl.matches(selector));
     }
 }

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

@@ -35,15 +35,16 @@ export class FocusIndicatorFoundation {
         this._adapter.removeTargetListener('pointerdown', this._interactionListener);
     }
     _onInteraction(evt) {
+        const target = evt.target;
         switch (evt.type) {
             case 'focusin':
-                this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible');
+                this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible', target);
                 break;
             case 'focusout':
                 this.active = false;
                 break;
             case 'pointerdown':
-                this.active = this._allowFocus ? this._adapter.isActive(':focus') : this._adapter.isActive(':focus-visible');
+                this.active = this._allowFocus ? this._adapter.isActive(':focus', target) : this._adapter.isActive(':focus-visible', target);
                 break;
         }
     }

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}: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(--_shape-end-end) + var(--_outward-offset));border-end-start-radius:calc(var(--_shape-end-start) + var(--_outward-offset));border-start-end-radius:calc(var(--_shape-start-end) + var(--_outward-offset));border-start-start-radius:calc(var(--_shape-start-start) + var(--_outward-offset));inset:calc(-1 * var(--_outward-offset));outline:var(--_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(--_shape-end-end) - var(--_inward-offset));border-end-start-radius:calc(var(--_shape-end-start) - var(--_inward-offset));border-start-end-radius:calc(var(--_shape-start-end) - var(--_inward-offset));border-start-start-radius:calc(var(--_shape-start-start) - var(--_inward-offset));border:var(--_width) solid currentColor;inset:var(--_inward-offset)}:host([circular]) .forge-focus-indicator{--_shape:50%}.forge-focus-indicator{--_active-width:var(--forge-focus-indicator-active-width, 6px);--_color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-025, 4px));--_inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_shape:var(--forge-focus-indicator-shape, var(--forge-shape-extra-small, 1px));--_width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_shape));--_shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_shape));--_shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_shape));--_shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_shape));--_margin-block:var(--forge-focus-indicator-offset-block, 0);--_margin-inline:var(--forge-focus-indicator-offset-inline, 0);-webkit-animation-delay:0s,calc(var(--_duration) * .25);animation-delay:0s,calc(var(--_duration) * .25);-webkit-animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);-webkit-animation-timing-function:var(--_easing);animation-timing-function:var(--_easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_color);display:none;pointer-events:none;position:absolute;margin-block:var(--_margin-block);margin-inline:var(--_margin-inline)}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_active-width)}}@keyframes outward-shrink{from{outline-width:var(--_active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_active-width)}}@keyframes inward-shrink{from{border-width:var(--_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-adapter.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter, IBaseButtonAdapter } from '../button/base/base-button-adapter';
+import { IIconButtonComponent } from './icon-button';
+export interface IIconButtonAdapter extends IBaseButtonAdapter {
+}
+export declare class IconButtonAdapter extends BaseButtonAdapter implements IIconButtonAdapter {
+    constructor(component: IIconButtonComponent);
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter } from '../button/base/base-button-adapter';
+export class IconButtonAdapter extends BaseButtonAdapter {
+    constructor(component) {
+        super(component);
+    }
+}

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

@@ -20,16 +20,12 @@ export interface IIconButtonComponentDelegateOptions extends IBaseComponentDeleg
 export interface IIconButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
 }
 export declare class IconButtonComponentDelegate extends BaseComponentDelegate<IIconButtonComponent, IIconButtonComponentDelegateOptions> {
-    private _buttonElement;
     private _iconElement?;
     constructor(config?: IIconButtonComponentDelegateConfig);
     protected _build(): IIconButtonComponent;
     get iconElement(): IIconComponent | undefined;
     get disabled(): boolean;
     set disabled(value: boolean);
-    /** @deprecated Use buttonElement instead. */
-    get butttonElement(): HTMLButtonElement | undefined;
-    get buttonElement(): HTMLButtonElement | undefined;
     protected _configure(): void;
     private _configureIcon;
     onClick(listener: (evt: MouseEvent) => void): void;