@tylertech/forge 2.18.1 → 2.19.1

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElement } from '@tylertech/forge-core';
+export interface IButtonAreaComponent extends ICustomElement {
+    disabled: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-button-area': IButtonAreaComponent;
+    }
+}
+/**
+ * The custom element class behind the `<forge-button-area>` element.
+ *
+ * @tag forge-button-area
+ */
+export declare class ButtonAreaComponent extends HTMLElement implements IButtonAreaComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Controls whether the component and associated button element are disabled. */
+    disabled: boolean;
+}

package/esm/button-area/button-area.js

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
+import { ButtonAreaAdapter } from './button-area-adapter';
+import { ButtonAreaFoundation } from './button-area-foundation';
+import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
+import { RippleComponent } from '../ripple';
+const template = '<template><div class=\"forge-button-area\" id=\"root\" part=\"root\"><div class=\"forge-button-area__button\" id=\"button\" part=\"button\"><slot name=\"button\"></slot></div><slot></slot></div></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-button-area{overflow:hidden}.forge-button-area:not(.forge-button-area--disabled).forge-button-area{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;cursor:pointer}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:hover::before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity, .16)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-button-area__button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{display:block}:host([hidden]){display:none}';
+/**
+ * The custom element class behind the `<forge-button-area>` element.
+ *
+ * @tag forge-button-area
+ */
+let ButtonAreaComponent = class ButtonAreaComponent extends HTMLElement {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ButtonAreaFoundation(new ButtonAreaAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            BUTTON_AREA_CONSTANTS.attributes.DISABLED
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case BUTTON_AREA_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], ButtonAreaComponent.prototype, "disabled", void 0);
+ButtonAreaComponent = __decorate([
+    CustomElement({
+        name: BUTTON_AREA_CONSTANTS.elementName,
+        dependencies: [
+            RippleComponent
+        ]
+    })
+], ButtonAreaComponent);
+export { ButtonAreaComponent };

package/esm/button-area/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './button-area-adapter';
+export * from './button-area-constants';
+export * from './button-area-foundation';
+export * from './button-area';
+export declare function defineButtonAreaComponent(): void;

package/esm/button-area/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { ButtonAreaComponent } from './button-area';
+export * from './button-area-adapter';
+export * from './button-area-constants';
+export * from './button-area-foundation';
+export * from './button-area';
+export function defineButtonAreaComponent() {
+    defineCustomElement(ButtonAreaComponent);
+}

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

@@ -20,6 +20,7 @@ export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelCo
     private _headerElement;
     private _contentElement;
     private _headerSlotElement;
+    private _activeAnimationFrame;
     constructor(component: IExpansionPanelComponent);
     initialize(open: boolean, orientation?: string): void;
     setHeaderVisibility(visible: boolean): void;

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

@@ -98,8 +98,9 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             else {
                 this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_VERTICAL_TRANSITION;
             }
-            window.requestAnimationFrame(() => {
-                window.requestAnimationFrame(() => {
+            this._activeAnimationFrame = window.requestAnimationFrame(() => {
+                this._activeAnimationFrame = window.requestAnimationFrame(() => {
+                    this._activeAnimationFrame = undefined;
                     if (opening) {
                         if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
                             this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
@@ -130,6 +131,10 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             });
         }
         else {
+            if (this._activeAnimationFrame) {
+                window.cancelAnimationFrame(this._activeAnimationFrame);
+                this._activeAnimationFrame = undefined;
+            }
             this._contentElement.style.removeProperty('transition');
             if (opening) {
                 if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {

package/esm/field/field-foundation.d.ts

@@ -51,6 +51,7 @@ export declare class FieldFoundation {
     protected _onTrailingSlotChanged(evt: Event): void;
     protected _onAddonEndSlotChanged(evt: Event): void;
     protected _initializeLabel(): void;
+    private _destroyFloatingLabel;
     protected _detectLeadingContent(): void;
     protected _detectTrailingContent(): void;
     protected _detectAddonEndContent(): void;

package/esm/field/field-foundation.js

@@ -85,10 +85,16 @@ export class FieldFoundation {
     }
     set density(value) {
         if (this._density !== value) {
+            const prevDensity = this._density;
             this._density = value;
             if (this._isInitialized) {
                 this._applyDensity();
-                this._initializeLabel();
+                if (this._density === 'dense') {
+                    this._destroyFloatingLabel({ cancelFloat: true });
+                }
+                else if (prevDensity === 'dense') {
+                    this._initializeLabel();
+                }
             }
             this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.DENSITY, this._density.toString());
         }
@@ -186,9 +192,8 @@ export class FieldFoundation {
         this._detectAddonEndContent();
     }
     _initializeLabel() {
-        if (this._floatingLabel) {
-            this._floatingLabel.destroy();
-        }
+        var _a;
+        (_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.destroy();
         this._adapter.detectLabel();
         if (this._adapter.hasLabel() && this._density !== 'dense') {
             this._floatingLabel = this._adapter.initializeFloatingLabel();
@@ -197,11 +202,16 @@ export class FieldFoundation {
             this._adapter.setRootClass(FIELD_CONSTANTS.classes.LABEL);
         }
         else {
-            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
-            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
-            this._floatingLabel = undefined;
+            this._destroyFloatingLabel();
         }
     }
+    _destroyFloatingLabel({ cancelFloat = false } = {}) {
+        var _a;
+        this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+        this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
+        (_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.destroy({ cancelFloat });
+        this._floatingLabel = undefined;
+    }
     _detectLeadingContent() {
         if (this._adapter.hasLeadingNodes()) {
             this._adapter.setRootClass(FIELD_CONSTANTS.classes.LEADING);

package/esm/floating-label/floating-label-foundation.d.ts

@@ -7,9 +7,12 @@ import { IFloatingLabelAdapter } from './floating-label-adapter';
 export declare class FloatingLabelFoundation {
     protected _adapter: IFloatingLabelAdapter;
     private _floatAnimationEndHandler;
+    private _activeFrame;
     constructor(_adapter: IFloatingLabelAdapter);
     initialize(): void;
-    disconnect(): void;
+    disconnect({ cancelFloat }?: {
+        cancelFloat?: boolean | undefined;
+    }): void;
     float(shouldFloat: boolean, alwaysFloat?: boolean): void;
     getWidth(): number;
     get isFloating(): boolean;

package/esm/floating-label/floating-label-foundation.js

@@ -18,7 +18,10 @@ export class FloatingLabelFoundation {
             this._adapter.addLabelListener('transitionend', this._floatAnimationEndHandler);
         }
     }
-    disconnect() {
+    disconnect({ cancelFloat = false } = {}) {
+        if (cancelFloat && this._activeFrame) {
+            window.cancelAnimationFrame(this._activeFrame);
+        }
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOATING_LABEL);
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
@@ -32,9 +35,9 @@ export class FloatingLabelFoundation {
             if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME)) {
                 this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
             }
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    if (alwaysFloat || this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)) {
+            this._activeFrame = window.requestAnimationFrame(() => {
+                this._activeFrame = window.requestAnimationFrame(() => {
+                    if (alwaysFloat || this.isFloating) {
                         this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
                     }
                     this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
@@ -46,8 +49,8 @@ export class FloatingLabelFoundation {
             if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME)) {
                 this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
                 this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
+                this._activeFrame = window.requestAnimationFrame(() => {
+                    this._activeFrame = window.requestAnimationFrame(() => {
                         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
                     });
                 });

package/esm/floating-label/floating-label.d.ts

@@ -7,7 +7,9 @@ export interface IFloatingLabel {
     isFloating: boolean;
     float(float: boolean, alwaysFloat?: boolean): void;
     getWidth(): number;
-    destroy(): void;
+    destroy(opts?: {
+        cancelFloat?: boolean;
+    }): void;
 }
 export declare class FloatingLabel implements IFloatingLabel {
     private _labelElement;
@@ -15,7 +17,9 @@ export declare class FloatingLabel implements IFloatingLabel {
     constructor(_labelElement: HTMLLabelElement);
     /** Returns the current label floating state. */
     get isFloating(): boolean;
-    destroy(): void;
+    destroy({ cancelFloat }?: {
+        cancelFloat?: boolean | undefined;
+    }): void;
     /**
      * Sets the floating state of the label element.
      * @param shouldFloat If true, sets the label to float, otherwise un-float.

package/esm/floating-label/floating-label.js

@@ -15,8 +15,8 @@ export class FloatingLabel {
     get isFloating() {
         return this._foundation.isFloating;
     }
-    destroy() {
-        this._foundation.disconnect();
+    destroy({ cancelFloat = false } = {}) {
+        this._foundation.disconnect({ cancelFloat });
         this._labelElement = undefined;
     }
     /**

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from './banner';
 export * from './bottom-sheet';
 export * from './busy-indicator';
 export * from './button';
+export * from './button-area';
 export * from './button-toggle';
 export * from './calendar';
 export * from './card';

package/esm/index.js

@@ -70,6 +70,7 @@ import { ViewComponent, ViewSwitcherComponent } from './view-switcher';
 import { IconComponent } from './icon';
 import { SelectDropdownComponent } from './select/select-dropdown';
 import { StackComponent } from './stack';
+import { ButtonAreaComponent } from './button-area';
 export * from './accordion';
 export * from './app-bar';
 export * from './autocomplete';
@@ -80,6 +81,7 @@ export * from './banner';
 export * from './bottom-sheet';
 export * from './busy-indicator';
 export * from './button';
+export * from './button-area';
 export * from './button-toggle';
 export * from './calendar';
 export * from './card';
@@ -142,6 +144,7 @@ const CUSTOM_ELEMENTS = [
     BottomSheetComponent,
     BusyIndicatorComponent,
     ButtonComponent,
+    ButtonAreaComponent,
     ButtonToggleComponent,
     ButtonToggleGroupComponent,
     CalendarComponent,

package/esm/paginator/paginator-adapter.d.ts

@@ -7,40 +7,42 @@ import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { ISelectOption } from '../select';
 import { IPaginatorComponent } from './paginator';
 import { PaginatorAlternativeAlignment } from './paginator-constants';
+export declare type PaginatorFieldIdentifier = 'first' | 'last' | 'previous' | 'next' | 'page-size';
 export interface IPaginatorAdapter extends IBaseAdapter {
-    setLabel: (value: string) => void;
-    setPageSizeOptions: (options: ISelectOption[]) => void;
-    setPageSize: (value: number) => void;
-    setRangeLabel: (value: string) => void;
+    setLabel(value: string): void;
+    setPageSizeOptions(options: ISelectOption[]): void;
+    setPageSize(value: number): void;
+    setRangeLabel(value: string): void;
     hasFirstPageButton(): boolean;
     showFirstPageButton(): void;
     hideFirstPageButton(): void;
     hasLastPageButton(): boolean;
     showLastPageButton(): void;
     hideLastPageButton(): void;
-    attachPageSizeChangeListener: (listener: (evt: CustomEvent) => void) => void;
-    attachFirstPageListener: (listener: (evt: Event) => void) => void;
-    attachPreviousPageListener: (listener: (evt: Event) => void) => void;
-    attachNextPageListener: (listener: (evt: Event) => void) => void;
-    attachLastPageListener: (listener: (evt: Event) => void) => void;
-    detachPageSizeChangeListener: (listener: (evt: CustomEvent) => void) => void;
-    detachFirstPageListener: (listener: (evt: Event) => void) => void;
-    detachPreviousPageListener: (listener: (evt: Event) => void) => void;
-    detachNextPageListener: (listener: (evt: Event) => void) => void;
-    detachLastPageListener: (listener: (evt: Event) => void) => void;
-    disableFirstPageButton: () => void;
-    enableFirstPageButton: () => void;
-    disablePreviousPageButton: () => void;
-    enablePreviousPageButton: () => void;
-    disableNextPageButton: () => void;
-    enableNextPageButton: () => void;
+    attachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
+    attachFirstPageListener(listener: (evt: Event) => void): void;
+    attachPreviousPageListener(listener: (evt: Event) => void): void;
+    attachNextPageListener(listener: (evt: Event) => void): void;
+    attachLastPageListener(listener: (evt: Event) => void): void;
+    detachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
+    detachFirstPageListener(listener: (evt: Event) => void): void;
+    detachPreviousPageListener(listener: (evt: Event) => void): void;
+    detachNextPageListener(listener: (evt: Event) => void): void;
+    detachLastPageListener(listener: (evt: Event) => void): void;
+    disableFirstPageButton(): void;
+    enableFirstPageButton(): void;
+    disablePreviousPageButton(): void;
+    enablePreviousPageButton(): void;
+    disableNextPageButton(): void;
+    enableNextPageButton(): void;
     disablePageSizeSelect(): void;
     enablePageSizeSelect(): void;
     setPageSizeVisibility(visible: boolean): void;
-    disableLastPageButton: () => void;
-    enableLastPageButton: () => void;
-    setAlternative: (alternative: boolean) => void;
-    setAlignment: (alignment: PaginatorAlternativeAlignment) => void;
+    disableLastPageButton(): void;
+    enableLastPageButton(): void;
+    setAlternative(alternative: boolean): void;
+    setAlignment(alignment: PaginatorAlternativeAlignment): void;
+    handleFocusMove(from: PaginatorFieldIdentifier): void;
 }
 /**
  * Provides facilities for interacting with the internal DOM of `PaginatorComponent`.
@@ -93,6 +95,6 @@ export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> i
     enableLastPageButton(): void;
     setAlternative(alternative: boolean): void;
     setAlignment(alignment: PaginatorAlternativeAlignment): void;
-    private _handleFocusMove;
+    handleFocusMove(from: PaginatorFieldIdentifier): void;
     private _tryFocus;
 }

package/esm/paginator/paginator-adapter.js

@@ -87,28 +87,24 @@ export class PaginatorAdapter extends BaseAdapter {
         this._lastPageButton.removeEventListener('click', listener);
     }
     disableFirstPageButton() {
-        this._handleFocusMove('first');
         this._firstPageButton.setAttribute('disabled', 'disabled');
     }
     enableFirstPageButton() {
         this._firstPageButton.removeAttribute('disabled');
     }
     disablePreviousPageButton() {
-        this._handleFocusMove('previous');
         this._previousPageButton.setAttribute('disabled', 'disabled');
     }
     enablePreviousPageButton() {
         this._previousPageButton.removeAttribute('disabled');
     }
     disableNextPageButton() {
-        this._handleFocusMove('next');
         this._nextPageButton.setAttribute('disabled', 'disabled');
     }
     enableNextPageButton() {
         this._nextPageButton.removeAttribute('disabled');
     }
     disablePageSizeSelect() {
-        this._handleFocusMove('page-size');
         this._pageSizeSelect.setAttribute('disabled', 'disabled');
     }
     enablePageSizeSelect() {
@@ -123,7 +119,6 @@ export class PaginatorAdapter extends BaseAdapter {
         }
     }
     disableLastPageButton() {
-        this._handleFocusMove('last');
         this._lastPageButton.setAttribute('disabled', 'disabled');
     }
     enableLastPageButton() {
@@ -151,7 +146,10 @@ export class PaginatorAdapter extends BaseAdapter {
                 break;
         }
     }
-    _handleFocusMove(from) {
+    handleFocusMove(from) {
+        if (!this._component.matches(':focus')) {
+            return; // We can only move focus elsewhere within the element if the element already contains focus
+        }
         switch (from) {
             case 'first':
                 this._tryFocus([

package/esm/paginator/paginator-foundation.d.ts

@@ -13,15 +13,12 @@ export interface IPaginatorFoundation extends ICustomElementFoundation {
     total: number;
     pageSizeOptions: number[] | boolean;
     pageSizeLabel: string;
-    initialize(): void;
 }
-/**
- * The foundation class behind the `<forge-paginator>` component.
- */
 export declare class PaginatorFoundation {
     private _adapter;
     private _pageIndex;
     private _pageSize;
+    private _offset;
     private _total;
     private _pageSizeOptions;
     private _label;
@@ -30,103 +27,59 @@ export declare class PaginatorFoundation {
     private _disabled;
     private _alternative;
     private _alignment;
+    private _rangeLabel;
     private _firstPageListener;
     private _previousPageListener;
     private _nextPageListener;
     private _lastPageListener;
     private _pageSizeListener;
-    private _rangeLabel;
     constructor(_adapter: IPaginatorAdapter);
-    /** The zero-based page index. Default is 0. */
-    set pageIndex(value: number);
-    get pageIndex(): number;
-    /** Number of items to display on a page. By default set to 25. */
-    set pageSize(value: number);
-    get pageSize(): number;
-    /** Sets page index by providing the number of items to skip. */
-    set offset(value: number);
-    get offset(): number;
-    /** The total number of items to be paginated. Default is 0. */
-    set total(value: number);
-    get total(): number;
-    /** The set of provided page size options to display to the user. */
-    set pageSizeOptions(options: number[] | boolean);
-    get pageSizeOptions(): number[] | boolean;
-    /** A label for the paginator. Default is "Rows per page:". */
-    set label(value: string);
-    get label(): string;
-    /** Whether to show the first page and last page buttons. Default is false. */
-    set firstLast(value: boolean);
-    get firstLast(): boolean;
-    /** Whether to show the first page button. Default is false. */
-    set first(value: boolean);
-    get first(): boolean;
-    /** Whether the paginator is disabled. Default is false. */
-    set disabled(value: boolean);
-    get disabled(): boolean;
-    get alternative(): boolean;
-    set alternative(value: boolean);
-    get alignment(): PaginatorAlternativeAlignment;
-    set alignment(value: PaginatorAlternativeAlignment);
-    private _applyAlternativeAlignment;
-    private _applyAlternative;
-    /**
-     * Intializes the internal state when the component loads.
-     */
     initialize(): void;
     disconnect(): void;
     private _attachListeners;
     private _detachListeners;
-    /**
-     * Handles clicking the first page button.
-     * @param evt The click event.
-     */
     private _onFirstPage;
-    /**
-     * Handles clicking the previous page button.
-     * @param evt The click event.
-     */
     private _onPreviousPage;
-    /**
-     * Handles clicking the next page button.
-     * @param evt The click event.
-     */
     private _onNextPage;
-    /**
-     * Handles clicking the last page button.
-     * @param evt The click event.
-     */
     private _onLastPage;
-    /**
-     * Handles selecting a new item in the page size options.
-     * @param evt The select custom event.
-     */
     private _onPageSizeChanged;
     private _emitChangeEvent;
-    /**
-     * Returns the max number of pages based on our current parameters.
-     */
     private _getMaxPages;
-    /**
-     * Updates our internal state as well as updating the UI.
-     */
-    private _update;
-    /**
-     * Toggle showing/hiding first and last buttons based on the show first/last buttons flag.
-     */
+    private _updateRangeLabel;
+    private _syncInteractionState;
     private _toggleFirstLastButtons;
-    /**
-     * Toggle showing/hiding first button based on the show first or first/last buttons flags.
-     */
     private _toggleFirstButton;
-    /** Checks if a first page exists. */
     private _hasFirstPage;
-    /**
-     * Checks if a previous page exists.
-     */
     private _hasPreviousPage;
-    /** Checks if a next page exists */
     private _hasNextPage;
-    /** Checks if a last page exists. */
     private _hasLastPage;
+    private _computePageIndexFromOffset;
+    private _computeOffset;
+    private _applyPageIndex;
+    private _applyPageSize;
+    private _applyTotal;
+    private _applyAlternativeAlignment;
+    private _applyDisabled;
+    get pageIndex(): number;
+    set pageIndex(value: number);
+    get pageSize(): number;
+    set pageSize(value: number);
+    get offset(): number;
+    set offset(value: number);
+    get total(): number;
+    set total(value: number);
+    get pageSizeOptions(): number[] | boolean;
+    set pageSizeOptions(options: number[] | boolean);
+    get label(): string;
+    set label(value: string);
+    get firstLast(): boolean;
+    set firstLast(value: boolean);
+    get first(): boolean;
+    set first(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get alternative(): boolean;
+    set alternative(value: boolean);
+    get alignment(): PaginatorAlternativeAlignment;
+    set alignment(value: PaginatorAlternativeAlignment);
 }