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

package/esm/circular-progress/circular-progress-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { getShadowElement } from '@tylertech/forge-core';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseAdapter } from '../core/base/base-adapter';
 const indeterminateTemplate = '<svg viewBox=\"0 0 4800 4800\"><circle class=\"track-background\" pathLength=\"100\"></circle></svg><div class=\"spinner\"><div class=\"left\"><div class=\"circle\"></div></div><div class=\"right\"><div class=\"circle\"></div></div></div>';
@@ -13,6 +13,18 @@ export class CircularProgressAdapter extends BaseAdapter {
         super(component);
         this._rootElement = getShadowElement(this._component, CIRCULAR_PROGRESS_CONSTANTS.selectors.ROOT);
     }
+    initialize() {
+        // TODO: Replace with ARIA mixin
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'progressbar');
+        }
+        if (!this._component.hasAttribute('aria-valuemin')) {
+            this._component.setAttribute('aria-valuemin', '0');
+        }
+        if (!this._component.hasAttribute('aria-valuemax')) {
+            this._component.setAttribute('aria-valuemax', '1');
+        }
+    }
     setDeterminate(value) {
         this._tryResetTemplate();
         this._rootElement.classList.toggle(CIRCULAR_PROGRESS_CONSTANTS.classes.INDETERMINATE, !value);
@@ -22,18 +34,15 @@ export class CircularProgressAdapter extends BaseAdapter {
         }
         else {
             this._rootElement.insertAdjacentHTML('beforeend', indeterminateTemplate);
-            this._rootElement.removeAttribute('aria-valuenow');
+            this._component.removeAttribute('aria-valuenow');
             this._determinateProgressCircleElement = undefined;
         }
     }
     setProgress(value) {
         var _a;
-        this._rootElement.setAttribute('aria-valuenow', `${value}`);
+        this._component.setAttribute('aria-valuenow', `${value}`);
         (_a = this._determinateProgressCircleElement) === null || _a === void 0 ? void 0 : _a.setAttribute('stroke-dashoffset', `${(1 - value) * 100}`);
     }
-    setAriaLabel(value) {
-        toggleAttribute(this._rootElement, !!value, 'aria-label', value);
-    }
     _tryResetTemplate() {
         var _a;
         const elements = (_a = this._component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(CIRCULAR_PROGRESS_CONSTANTS.selectors.TEMPLATES);

package/esm/circular-progress/circular-progress-constants.d.ts

@@ -10,8 +10,7 @@ export declare const CIRCULAR_PROGRESS_CONSTANTS: {
         DETERMINATE: string;
         PROGRESS: string;
         THEME: string;
-        NO_TRACK: string;
-        ARIA_LABEL: string;
+        TRACK: string;
     };
     classes: {
         INDETERMINATE: string;

package/esm/circular-progress/circular-progress-constants.js

@@ -9,8 +9,7 @@ const attributes = {
     DETERMINATE: 'determinate',
     PROGRESS: 'progress',
     THEME: 'theme',
-    NO_TRACK: 'no-track',
-    ARIA_LABEL: 'data-aria-label'
+    TRACK: 'track'
 };
 const classes = {
     INDETERMINATE: 'forge-circular-progress--indeterminate'

package/esm/circular-progress/circular-progress-foundation.d.ts

@@ -29,5 +29,4 @@ export declare class CircularProgressFoundation implements ICircularProgressFoun
     set theme(value: CircularProgressTheme);
     get track(): boolean;
     set track(value: boolean);
-    set ariaLabel(value: string);
 }

package/esm/circular-progress/circular-progress-foundation.js

@@ -10,9 +10,10 @@ export class CircularProgressFoundation {
         this._determinate = false;
         this._progress = 0;
         this._theme = 'primary';
-        this._track = true;
+        this._track = false;
     }
     initialize() {
+        this._adapter.initialize();
         this._applyDeterminate();
     }
     _applyDeterminate() {
@@ -60,10 +61,7 @@ export class CircularProgressFoundation {
         value = Boolean(value);
         if (this._track !== value) {
             this._track = value;
-            this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK, !this._track);
+            this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK, this._track);
         }
     }
-    set ariaLabel(value) {
-        this._adapter.setAriaLabel(value);
-    }
 }

package/esm/circular-progress/circular-progress.d.ts

@@ -35,8 +35,7 @@ declare global {
  * @attribute {boolean} determinate - Controls the determinate state.
  * @attribute {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @attribute {CircularProgressTheme} theme - Controls the theme of the progress indicator.
- * @attribute {boolean} no-track - Controls the visibility of the track background.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progressbar element.
+ * @attribute {boolean} track - Controls the visibility of the track background.
  *
  * @slot - The is the default/unnamed slot. Renders content at the center of the progress indicator.
  *

package/esm/circular-progress/circular-progress.js

@@ -9,8 +9,8 @@ import { CircularProgressAdapter } from './circular-progress-adapter';
 import { CircularProgressFoundation } from './circular-progress-foundation';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-circular-progress\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"1\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
-const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--_circular-progress-size);min-inline-size:var(--_circular-progress-size);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306);animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;-webkit-transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{-webkit-transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-duration:calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}:host([no-track]) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
+const template = '<template><div class=\"forge-circular-progress\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
+const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-size, 48px)}:host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--_circular-progress-size);min-inline-size:var(--_circular-progress-size);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:background-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_circular-progress-padding:var(--forge-circular-progress-padding, 0);--_circular-progress-track-width:var(--forge-circular-progress-track-width, 12);--_circular-progress-track-color:var(--forge-circular-progress-track-color, transparent);--_circular-progress-track-fill-color:var(--forge-circular-progress-track-fill-color, var(--forge-theme-tertiary-container, #d0d7ff));--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-tertiary, #3d5afe));--_circular-progress-arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_circular-progress-theme-transition-duration:var(--forge-circular-progress-theme-transition-duration, var(--forge-animation-duration-short3, 150ms));--_circular-progress-theme-transition-timing:var(--forge-circular-progress-theme-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-circular-progress{-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_circular-progress-padding)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306);animation-duration:calc(var(--_circular-progress-arc-duration) * 360 / 306)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s;animation-delay:calc(-.5 * var(--_circular-progress-arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_circular-progress-size) * var(--_circular-progress-track-width)/ 100);border-color:var(--_circular-progress-indicator-color) var(--_circular-progress-indicator-color) transparent transparent;-webkit-transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:border-color var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));animation-duration:var(--_circular-progress-arc-duration),calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_circular-progress-track-width)/ 100));stroke-width:calc(var(--_circular-progress-track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1),stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-indicator-color)}.track{stroke:transparent}.track-background{-webkit-transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);transition:stroke var(--_circular-progress-theme-transition-duration) var(--_circular-progress-theme-transition-timing);stroke:var(--_circular-progress-track-color)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:calc(4 * var(--_circular-progress-arc-duration));animation-duration:calc(4 * var(--_circular-progress-arc-duration));-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-primary-container, #d1d5ed))}:host([theme=secondary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-secondary, #ffc107));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-secondary-container, #fff0c3))}:host([theme=success]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-success, #2e7d32));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-success-container, #cde0ce))}:host([theme=error]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-error, #b00020));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-error-container, #ecc2c9))}:host([theme=warning]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-warning, #d14900));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-warning-container, #f4d3c2))}:host([theme=info]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-info, #1565c0));--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}:host([track]) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
 /**
  * @tag forge-circular-progress
  *
@@ -30,8 +30,7 @@ const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-si
  * @attribute {boolean} determinate - Controls the determinate state.
  * @attribute {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
  * @attribute {CircularProgressTheme} theme - Controls the theme of the progress indicator.
- * @attribute {boolean} no-track - Controls the visibility of the track background.
- * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progressbar element.
+ * @attribute {boolean} track - Controls the visibility of the track background.
  *
  * @slot - The is the default/unnamed slot. Renders content at the center of the progress indicator.
  *
@@ -52,8 +51,7 @@ let CircularProgressComponent = class CircularProgressComponent extends BaseComp
             CIRCULAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
             CIRCULAR_PROGRESS_CONSTANTS.attributes.PROGRESS,
             CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME,
-            CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK,
-            CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
+            CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK
         ];
     }
     constructor() {
@@ -75,11 +73,8 @@ let CircularProgressComponent = class CircularProgressComponent extends BaseComp
             case CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME:
                 this.theme = newValue;
                 break;
-            case CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK:
-                this.track = !coerceBoolean(newValue);
-                break;
-            case CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL:
-                this._foundation.ariaLabel = newValue;
+            case CIRCULAR_PROGRESS_CONSTANTS.attributes.TRACK:
+                this.track = coerceBoolean(newValue);
                 break;
         }
     }

package/esm/constants.d.ts

@@ -12,5 +12,14 @@ export declare const internals: unique symbol;
 /** A property symbol that indicates whether or not a `Focusable` element can be focused. */
 export declare const isFocusable: unique symbol;
 export type Theme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';
+export type Density = 'small' | 'medium' | 'large';
 export type MixinBase<ExpectedBase = object> = abstract new (...args: any[]) => ExpectedBase;
 export type MixinReturn<TBase extends MixinBase, MixinClass = object> = (abstract new (...args: any[]) => MixinClass) & TBase;
+/**
+ * The `focusVisible` property is an experimental feature that is not yet supported by all browsers.
+ *
+ * We will use this to allow for setting focus to elements programmatically and showing the focus indicator.
+ */
+export type ExperimentalFocusOptions = FocusOptions & {
+    focusVisible?: boolean;
+};

package/esm/core/base/base-adapter.js

@@ -76,7 +76,7 @@ export class BaseAdapter {
         document.body.removeAttribute(name);
     }
     focusHost(options) {
-        this._component.focus(options);
+        HTMLElement.prototype.focus.call(this._component, options);
     }
     get isConnected() {
         return this._component.isConnected;

package/esm/core/utils/utils.d.ts

@@ -97,4 +97,4 @@ export declare function locateTargetHeuristic(element: HTMLElement, id?: string
  * @param preserveChildren Whether or not to preserve the children of the old element in the new element.
  * @returns The new element.
  */
-export declare function replaceElement(oldElement: HTMLElement, newElement: HTMLElement, preserveChildren?: boolean): HTMLElement;
+export declare function replaceElement<T extends HTMLElement>(oldElement: HTMLElement, newElement: T, preserveChildren?: boolean): T;

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseButtonAdapter, IBaseButtonAdapter } from '../button/base/base-button-adapter';
+import { IFloatingActionButtonComponent } from './floating-action-button';
+export interface IFloatingActionButtonAdapter extends IBaseButtonAdapter {
+    destroy(): void;
+}
+export declare class FloatingActionButtonAdapter extends BaseButtonAdapter implements IFloatingActionButtonAdapter {
+    private _labelSlotElement;
+    private _extendedObserver;
+    constructor(component: IFloatingActionButtonComponent);
+    initialize(): void;
+    destroy(): void;
+    toggleDefaultPopoverIcon(value: boolean): void;
+    private _startExtendedWatcher;
+    private _detectExtendedState;
+}

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseButtonAdapter } from '../button/base/base-button-adapter';
+import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
+export class FloatingActionButtonAdapter extends BaseButtonAdapter {
+    constructor(component) {
+        super(component);
+        this._labelSlotElement = getShadowElement(this._component, FLOATING_ACTION_BUTTON_CONSTANTS.selectors.LABEL_SLOT);
+    }
+    initialize() {
+        super.initialize();
+        if (!this._extendedObserver) {
+            this._startExtendedWatcher();
+        }
+        this._detectExtendedState();
+    }
+    destroy() {
+        var _a;
+        (_a = this._extendedObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._extendedObserver = undefined;
+    }
+    toggleDefaultPopoverIcon(value) {
+        super.toggleDefaultPopoverIcon(value);
+        this._detectExtendedState();
+    }
+    _startExtendedWatcher() {
+        this._extendedObserver = new MutationObserver(() => this._detectExtendedState());
+        this._extendedObserver.observe(this._component, { childList: true, subtree: true, characterData: true });
+    }
+    _detectExtendedState() {
+        // If there are nodes in the "label" slot, then we always assume the extended state
+        const hasLabel = this._labelSlotElement.assignedNodes().length > 0;
+        if (hasLabel) {
+            this._rootElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
+            return;
+        }
+        // Remove the extended class first so we can compare the width without it affecting the styles
+        this._rootElement.classList.remove(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
+        // When the width is greater than the height, we assume the button is in the extended state
+        const isExtended = this._component.clientWidth > this._component.clientHeight;
+        if (isExtended) {
+            this._rootElement.classList.add(FLOATING_ACTION_BUTTON_CONSTANTS.classes.EXTENDED);
+        }
+    }
+}

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

@@ -3,19 +3,35 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
+import { IIconComponent } from '../icon/icon';
+import { IconExternalType } from '../icon/icon-constants';
 import { IFloatingActionButtonComponent } from './floating-action-button';
+import { FloatingActionButtonDensity, FloatingActionButtonElevation } from './floating-action-button-constants';
 export type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
 export interface IFloatingActionButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
-    text?: string;
+    iconName?: string;
+    iconExternal?: boolean;
+    iconExternalType?: IconExternalType;
+    iconType?: 'font' | 'component';
+    iconClass?: string | string[];
+    label?: string;
+    theme?: Theme;
+    density?: FloatingActionButtonDensity;
+    elevation?: FloatingActionButtonElevation;
 }
 export interface IFloatingActionButtonComponentDelegateConfig extends IBaseComponentDelegateConfig<IFloatingActionButtonComponent, IFloatingActionButtonComponentDelegateOptions> {
 }
 export declare class FloatingActionButtonComponentDelegate extends BaseComponentDelegate<IFloatingActionButtonComponent, IFloatingActionButtonComponentDelegateOptions> {
-    private _buttonElement?;
+    private _iconElement?;
     constructor(config?: IFloatingActionButtonComponentDelegateConfig);
-    destroy(): void;
     protected _build(): IFloatingActionButtonComponent;
+    protected _configure(): void;
+    private _configureIcon;
+    get iconElement(): IIconComponent | undefined;
+    get disabled(): boolean;
+    set disabled(value: boolean);
     onClick(listener: (evt: MouseEvent) => void): void;
     onFocus(listener: (evt: Event) => void): void;
     onBlur(listener: (evt: Event) => void): void;

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

@@ -3,34 +3,82 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { addClass } from '@tylertech/forge-core';
+import { ICON_CLASS_NAME } from '../constants';
 import { BaseComponentDelegate } from '../core/delegates/base-component-delegate';
+import { ICON_CONSTANTS } from '../icon/icon-constants';
 import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
 export class FloatingActionButtonComponentDelegate extends BaseComponentDelegate {
     constructor(config) {
         super(config);
     }
-    destroy() {
-        this._buttonElement = undefined;
-    }
     _build() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const component = document.createElement(FLOATING_ACTION_BUTTON_CONSTANTS.elementName);
-        this._buttonElement = document.createElement('button');
-        this._buttonElement.type = 'button';
-        this._buttonElement.textContent = (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '';
-        component.appendChild(this._buttonElement);
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.theme) {
+            component.theme = this._config.options.theme;
+        }
+        if ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.density) {
+            component.density = this._config.options.density;
+        }
+        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.elevation) {
+            component.elevation = this._config.options.elevation;
+        }
+        if ((_e = (_d = this._config.options) === null || _d === void 0 ? void 0 : _d.label) === null || _e === void 0 ? void 0 : _e.trim().length) {
+            const span = document.createElement('span');
+            span.slot = 'label';
+            component.textContent = this._config.options.label;
+            component.appendChild(span);
+        }
         return component;
     }
+    _configure() {
+        this._configureIcon();
+    }
+    _configureIcon() {
+        var _a, _b;
+        if (!((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.iconName)) {
+            return;
+        }
+        const type = ((_b = this._config.options) === null || _b === void 0 ? void 0 : _b.iconType) || 'component';
+        switch (type) {
+            case 'font':
+                const classes = Array.isArray(this._config.options.iconClass) ? this._config.options.iconClass : [ICON_CLASS_NAME];
+                addClass(classes, this._element);
+                this._element.textContent = this._config.options.iconName;
+                break;
+            case 'component':
+                this._iconElement = document.createElement(ICON_CONSTANTS.elementName);
+                this._iconElement.name = this._config.options.iconName;
+                if (this._config.options.iconExternal !== undefined) {
+                    this._iconElement.external = !!this._config.options.iconExternal;
+                }
+                if (this._config.options.iconExternalType) {
+                    this._iconElement.externalType = this._config.options.iconExternalType;
+                }
+                if (this._config.options.iconClass) {
+                    addClass(this._config.options.iconClass, this._iconElement);
+                }
+                this._element.appendChild(this._iconElement);
+                break;
+        }
+    }
+    get iconElement() {
+        return this._iconElement;
+    }
+    get disabled() {
+        return !!this._element.disabled;
+    }
+    set disabled(value) {
+        this._element.disabled = value;
+    }
     onClick(listener) {
-        var _a;
-        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', listener);
+        this._element.addEventListener('click', listener);
     }
     onFocus(listener) {
-        var _a;
-        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', evt => listener(evt));
+        this._element.addEventListener('focus', evt => listener(evt));
     }
     onBlur(listener) {
-        var _a;
-        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', evt => listener(evt));
+        this._element.addEventListener('blur', evt => listener(evt));
     }
 }

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

@@ -3,25 +3,30 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Density, Theme } from '../constants';
 export declare const FLOATING_ACTION_BUTTON_CONSTANTS: {
     elementName: "forge-fab";
+    observedAttributes: {
+        THEME: string;
+        DENSITY: string;
+        ELEVATION: string;
+    };
+    attributes: {
+        THEME: string;
+        DENSITY: string;
+        ELEVATION: string;
+    };
     selectors: {
-        BUTTON: string;
-        ICON: string;
-        LABEL: string;
+        LABEL_SLOT: string;
     };
     classes: {
-        BUTTON: string;
-        BUTTON_EXTENDED: string;
-        ICON: string;
-        LABEL: string;
-        BUTTON_MINI: string;
-        EXITED: string;
-        RIPPLE: string;
-    };
-    attributes: {
         EXTENDED: string;
-        MINI: string;
-        EXITED: string;
+    };
+    defaults: {
+        DEFAULT_THEME: Theme;
+        DEFAULT_DENSITY: Density;
+        DEFAULT_ELEVATION: FloatingActionButtonElevation;
     };
 };
+export type FloatingActionButtonDensity = Density;
+export type FloatingActionButtonElevation = 'raised' | 'lowered';

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

@@ -5,28 +5,28 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}fab`;
+const observedAttributes = {
+    THEME: 'theme',
+    DENSITY: 'density',
+    ELEVATION: 'elevation'
+};
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
-    BUTTON: 'button, a',
-    ICON: 'i,forge-icon,img,svg',
-    LABEL: 'span'
+    LABEL_SLOT: 'slot[name=label]'
 };
 const classes = {
-    BUTTON: 'forge-fab',
-    BUTTON_EXTENDED: 'forge-fab--extended',
-    ICON: 'forge-fab__icon',
-    LABEL: 'forge-fab__label',
-    BUTTON_MINI: 'forge-fab--mini',
-    EXITED: 'forge-fab--exited',
-    RIPPLE: 'forge-fab__ripple'
+    EXTENDED: `${elementName}--extended`
 };
-const attributes = {
-    EXTENDED: 'extended',
-    MINI: 'mini',
-    EXITED: 'exited'
+const defaults = {
+    DEFAULT_THEME: 'secondary',
+    DEFAULT_DENSITY: 'medium',
+    DEFAULT_ELEVATION: 'raised'
 };
 export const FLOATING_ACTION_BUTTON_CONSTANTS = {
     elementName,
+    observedAttributes,
+    attributes,
     selectors,
     classes,
-    attributes
+    defaults
 };

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);
+        }
+    }
+}