@tylertech/forge 3.0.0-next.15 → 3.0.0-next.16

package/esm/button-toggle/button-toggle-group/button-toggle-group.d.ts

@@ -3,17 +3,26 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { IButtonToggleGroupChangeEventData, IButtonToggleOption } from './button-toggle-group-constants';
-export interface IButtonToggleGroupComponent extends IBaseComponent {
+import { IWithFormAssociation } from '../../core/mixins/form/with-form-associated';
+import { IWithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithFormValidity } from '../../core/mixins/form/with-form-validity';
+import { BaseComponent } from '../../core/base/base-component';
+import { ButtonToggleGroupTheme, IButtonToggleGroupChangeEventData } from './button-toggle-group-constants';
+import { getFormState, getFormValue } from '../../constants';
+import { FormValue, FormRestoreState, FormRestoreReason } from '../../core/utils/form-utils';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface IButtonToggleGroupComponent extends IWithLabelAwareness, IWithFormAssociation, IWithFormValidity, IWithElementInternals, IWithDefaultAria {
     value: any;
+    outlined: boolean;
     multiple: boolean;
     stretch: boolean;
     mandatory: boolean;
     vertical: boolean;
     disabled: boolean;
+    readonly: boolean;
     dense: boolean;
-    options: IButtonToggleOption[];
+    theme: ButtonToggleGroupTheme;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -23,24 +32,81 @@ declare global {
         'forge-button-toggle-group-change': CustomEvent<IButtonToggleGroupChangeEventData>;
     }
 }
+declare const BaseButtonToggleGroupClass: import("../../constants").AbstractConstructor<import("../../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/form/with-form-validity").WithFormValidityContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
- * The web component class behind the `<forge-button-toggle-group>` custom element.
- *
  * @tag forge-button-toggle-group
+ *
+ * @description Button toggle groups allow users to select one or more options from a set of related options.
+ *
+ * @property {any} value - The value of the selected button toggle(s).
+ * @property {boolean} outlined - Whether or not the group should be outlined.
+ * @property {boolean} multiple - Whether or not the group should allow multiple selections.
+ * @property {boolean} stretch - Whether or not the group should stretch to fill the available width.
+ * @property {boolean} mandatory - Whether or not the group should require a selection once a button has been toggled on.
+ * @property {boolean} vertical - Whether or not the group should be displayed vertically.
+ * @property {boolean} disabled - Whether or not the group should be disabled.
+ * @property {boolean} readonly - Whether or not the group should be readonly.
+ * @property {boolean} dense - Whether or not the group should be dense.
+ * @property {ButtonToggleGroupTheme} theme - The theme to use for the group.
+ *
+ * @attribute {any} value - The value of the selected button toggle(s).
+ * @attribute {boolean} outlined - Whether or not the group should be outlined.
+ * @attribute {boolean} multiple - Whether or not the group should allow multiple selections.
+ * @attribute {boolean} stretch - Whether or not the group should stretch to fill the available width.
+ * @attribute {boolean} mandatory - Whether or not the group should require a selection once a button has been toggled on.
+ * @attribute {boolean} vertical - Whether or not the group should be displayed vertically.
+ * @attribute {boolean} disabled - Whether or not the group should be disabled.
+ * @attribute {boolean} readonly - Whether or not the group should be readonly.
+ * @attribute {boolean} dense - Whether or not the group should be dense.
+ * @attribute {ButtonToggleGroupTheme} theme - The theme to use for the group.
+ *
+ * @event {CustomEvent<IButtonToggleGroupChangeEventData>} forge-button-toggle-group-change - Dispatches when the value of the group changes.
+ *
+ * @cssproperty --forge-button-toggle-group-display - The `display` of the group container elements.
+ * @cssproperty --forge-button-toggle-group-gap - The space between button toggle elements.
+ * @cssproperty --forge-button-toggle-group-padding - The padding around the button toggle elements when outlined.
+ * @cssproperty --forge-button-toggle-group-padding-block - The block padding around the button toggle elements when outlined.
+ * @cssproperty --forge-button-toggle-group-padding-inline - The inline padding around the button toggle elements when outlined.
+ * @cssproperty --forge-button-toggle-group-height - The height of the group element.
+ * @cssproperty --forge-button-toggle-group-dense-height - The height of the group element when dense.
+ * @cssproperty --forge-button-toggle-group-outline-width - The width of the outline around the group element.
+ * @cssproperty --forge-button-toggle-group-outline-style - The style of the outline around the group element.
+ * @cssproperty --forge-button-toggle-group-outline-color - The color of the outline around the group element.
+ * @cssproperty --forge-button-toggle-group-outline-color-active - The color of the outline around the group element when hovered or focused.
+ * @cssproperty --forge-button-toggle-group-shape - The shape radius of the group container element.
+ * @cssproperty --forge-button-toggle-group-shape-start-start - The start-start shape radius.
+ * @cssproperty --forge-button-toggle-group-shape-start-end - The start-end shape radius.
+ * @cssproperty --forge-button-toggle-group-shape-end-start - The end-start shape radius.
+ * @cssproperty --forge-button-toggle-group-shape-end-end - The end-end shape radius.
+ * @cssproperty --forge-button-toggle-group-transition-duration - The transition duration for all animations on the group.
+ * @cssproperty --forge-button-toggle-group-transition-timing - The transition timing for all animations on the group.
+ *
+ * @csspart root - The root container element for the group.
+ *
+ * @slot - The is a default/unnamed slot for child button toggle elements.
  */
-export declare class ButtonToggleGroupComponent extends BaseComponent implements IButtonToggleGroupComponent {
+export declare class ButtonToggleGroupComponent extends BaseButtonToggleGroupClass implements IButtonToggleGroupComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
-    initializedCallback(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    [getFormValue](): FormValue | null;
+    [getFormState](): FormValue | null;
+    formStateRestoreCallback(state: FormRestoreState, reason: FormRestoreReason): void;
+    formResetCallback(): void;
+    labelChangedCallback(value: string | null): void;
     value: any;
+    outlined: boolean;
     multiple: boolean;
     mandatory: boolean;
     vertical: boolean;
     stretch: boolean;
     dense: boolean;
     disabled: boolean;
-    options: IButtonToggleOption[];
+    required: boolean;
+    readonly: boolean;
+    theme: ButtonToggleGroupTheme;
 }
+export {};

package/esm/button-toggle/button-toggle-group/button-toggle-group.js

@@ -5,70 +5,171 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { WithFormAssociation } from '../../core/mixins/form/with-form-associated';
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithFormValidity } from '../../core/mixins/form/with-form-validity';
 import { BaseComponent } from '../../core/base/base-component';
 import { ButtonToggleComponent } from '../button-toggle/button-toggle';
 import { ButtonToggleGroupAdapter } from './button-toggle-group-adapter';
 import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
 import { ButtonToggleGroupFoundation } from './button-toggle-group-foundation';
-const template = '<template><div class=\"forge-button-toggle-group\" role=\"group\" aria-label=\"Button group\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-button-toggle-group{display:-webkit-box;display:flex}.forge-button-toggle-group ::slotted(:not(:last-child)){--forge-button-toggle-border-right-width:0;--forge-button-toggle-border-top-left-radius:0;--forge-button-toggle-border-bottom-left-radius:0;--forge-button-toggle-border-top-right-radius:0;--forge-button-toggle-border-bottom-right-radius:0}.forge-button-toggle-group ::slotted(:first-child){--forge-button-toggle-border-top-left-radius:4px;--forge-button-toggle-border-bottom-left-radius:4px}.forge-button-toggle-group ::slotted(:last-child){--forge-button-toggle-border-top-left-radius:0;--forge-button-toggle-border-bottom-left-radius:0;--forge-button-toggle-border-top-right-radius:4px;--forge-button-toggle-border-bottom-right-radius:4px}.forge-button-toggle-group--vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-button-toggle-group--vertical ::slotted(:not(:last-child)){--forge-button-toggle-border-right-width:1px;--forge-button-toggle-border-bottom-width:0;--forge-button-toggle-border-top-left-radius:0;--forge-button-toggle-border-bottom-left-radius:0;--forge-button-toggle-border-top-right-radius:0;--forge-button-toggle-border-bottom-right-radius:0}.forge-button-toggle-group--vertical ::slotted(:first-child){--forge-button-toggle-border-top-left-radius:4px;--forge-button-toggle-border-top-right-radius:4px}.forge-button-toggle-group--vertical ::slotted(:last-child){--forge-button-toggle-border-top-left-radius:0;--forge-button-toggle-border-top-right-radius:0;--forge-button-toggle-border-bottom-left-radius:4px;--forge-button-toggle-border-bottom-right-radius:4px}.forge-button-toggle-group ::slotted(:only-child){--forge-button-toggle-border-top-left-radius:4px;--forge-button-toggle-border-bottom-left-radius:4px;--forge-button-toggle-border-top-right-radius:4px;--forge-button-toggle-border-bottom-right-radius:4px}.forge-button-toggle-group--stretch{width:100%}:host{display:block}:host([hidden]){display:none}';
+import { getFormState, getFormValue, inputType, setDefaultAria } from '../../constants';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+const template = '<template><div class=\"forge-button-toggle-group\" part=\"root\"><slot></slot></div></template>';
+const styles = ':host{--_button-toggle-group-display:var(--forge-button-toggle-group-display, inline-flex)}:host{display:var(--_button-toggle-group-display)}:host([hidden]){display:none}.forge-button-toggle-group{--_button-toggle-group-gap:var(--forge-button-toggle-group-gap, 4px);--_button-toggle-group-padding:var(--forge-button-toggle-group-padding, 4px);--_button-toggle-group-padding-block:var(--forge-button-toggle-group-padding-block, var(--_button-toggle-group-padding));--_button-toggle-group-padding-inline:var(--forge-button-toggle-group-padding-inline, var(--_button-toggle-group-padding));--_button-toggle-group-height:var(--forge-button-toggle-group-height, var(--forge-button-height, 36px));--_button-toggle-group-dense-height:var(--forge-button-toggle-group-dense-height, var(--forge-button-dense-height, 24px));--_button-toggle-group-outline-width:var(--forge-button-toggle-group-outline-width, var(--forge-border-thin, 1px));--_button-toggle-group-outline-style:var(--forge-button-toggle-group-outline-style, solid);--_button-toggle-group-outline-color:var(--forge-button-toggle-group-outline-color, var(--forge-theme-outline-low, #9e9e9e));--_button-toggle-group-outline-color-active:var(--forge-button-toggle-group-outline-color-active, var(--forge-theme-outline-medium, #757575));--_button-toggle-group-shape:var(--forge-button-toggle-group-shape, var(--forge-shape-medium, 4px));--_button-toggle-group-shape-start-start:var(--forge-button-toggle-group-shape-start-start, var(--_button-toggle-group-shape));--_button-toggle-group-shape-start-end:var(--forge-button-toggle-group-shape-start-end, var(--_button-toggle-group-shape));--_button-toggle-group-shape-end-start:var(--forge-button-toggle-group-shape-end-start, var(--_button-toggle-group-shape));--_button-toggle-group-shape-end-end:var(--forge-button-toggle-group-shape-end-end, var(--_button-toggle-group-shape));--_button-toggle-group-transition-duration:var(--forge-button-toggle-group-transition-duration, var(--forge-button-toggle-transition-duration, var(--forge-animation-duration-short3, 150ms)));--_button-toggle-group-transition-timing:var(--forge-button-toggle-group-transition-timing, var(--forge-button-toggle-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1))))}.forge-button-toggle-group{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:var(--_button-toggle-group-gap);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_button-toggle-group-height);border-width:var(--_button-toggle-group-outline-width);border-style:var(--_button-toggle-group-outline-style);border-color:var(--_button-toggle-group-outline-color);border-start-start-radius:var(--_button-toggle-group-shape-start-start);border-start-end-radius:var(--_button-toggle-group-shape-start-end);border-end-start-radius:var(--_button-toggle-group-shape-end-start);border-end-end-radius:var(--_button-toggle-group-shape-end-end);padding-block:var(--_button-toggle-group-padding-block);padding-inline:var(--_button-toggle-group-padding-inline);-webkit-transition-property:border-color;transition-property:border-color;-webkit-transition-duration:var(--_button-toggle-group-transition-duration);transition-duration:var(--_button-toggle-group-transition-duration);-webkit-transition-timing-function:var(--_button-toggle-group-transition-timing);transition-timing-function:var(--_button-toggle-group-transition-timing)}:host(:not([disabled]):not([no-outline])) .forge-button-toggle-group:focus-within,:host(:not([disabled]):not([no-outline])) .forge-button-toggle-group:hover{--_button-toggle-group-outline-color:var(--_button-toggle-group-outline-color-active)}:host([no-outline]) .forge-button-toggle-group{--_button-toggle-group-padding:var(--forge-button-toggle-group-padding, 0);--_button-toggle-group-outline-style:var(--forge-button-toggle-group-outline-style, none)}:host(:is([dense],[density=dense])) .forge-button-toggle-group{--_button-toggle-group-padding:var(--forge-button-toggle-group-padding, 0);--_button-toggle-group-height:var(--_button-toggle-group-dense-height)}:host([vertical]) .forge-button-toggle-group{height:auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([vertical]) ::slotted(forge-button-toggle){height:var(--_button-toggle-group-height);width:100%}:host([vertical]) ::slotted(forge-divider:not([vertical])){margin-inline:4px;width:100%}::slotted(forge-divider[vertical]){margin-block:4px}:host([stretch]){display:block}:host([stretch]) .forge-button-toggle-group{width:100%}:host(:not([vertical])[stretch]) ::slotted(forge-button-toggle){-webkit-box-flex:1;flex:1}:host([theme=primary]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-primary-container, #d1d5ed);--forge-button-toggle-selected-color:var(--forge-theme-on-primary-container, #222c62);--forge-button-toggle-focus-indicator-color:var(--forge-theme-primary, #3f51b5)}:host([theme=secondary]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-secondary-container, #fff0c3);--forge-button-toggle-selected-color:var(--forge-theme-on-secondary-container, #8a6804);--forge-button-toggle-focus-indicator-color:var(--forge-theme-secondary, #ffc107)}:host([theme=success]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-success-container, #cde0ce);--forge-button-toggle-selected-color:var(--forge-theme-on-success-container, #19441b);--forge-button-toggle-focus-indicator-color:var(--forge-theme-success, #2e7d32)}:host([theme=error]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-error-container, #ecc2c9);--forge-button-toggle-selected-color:var(--forge-theme-on-error-container, #5f0011);--forge-button-toggle-focus-indicator-color:var(--forge-theme-error, #b00020)}:host([theme=warning]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-warning-container, #f4d3c2);--forge-button-toggle-selected-color:var(--forge-theme-on-warning-container, #712700);--forge-button-toggle-focus-indicator-color:var(--forge-theme-warning, #d14900)}:host([theme=info]) ::slotted(forge-button-toggle){--forge-button-toggle-selected-background:var(--forge-theme-info-container, #c7daf0);--forge-button-toggle-selected-color:var(--forge-theme-on-info-container, #0b3768);--forge-button-toggle-focus-indicator-color:var(--forge-theme-info, #1565c0)}';
+const BaseButtonToggleGroupClass = WithLabelAwareness(WithFormAssociation(WithFormValidity(WithDefaultAria(WithElementInternals(BaseComponent)))));
 /**
- * The web component class behind the `<forge-button-toggle-group>` custom element.
- *
  * @tag forge-button-toggle-group
+ *
+ * @description Button toggle groups allow users to select one or more options from a set of related options.
+ *
+ * @property {any} value - The value of the selected button toggle(s).
+ * @property {boolean} outlined - Whether or not the group should be outlined.
+ * @property {boolean} multiple - Whether or not the group should allow multiple selections.
+ * @property {boolean} stretch - Whether or not the group should stretch to fill the available width.
+ * @property {boolean} mandatory - Whether or not the group should require a selection once a button has been toggled on.
+ * @property {boolean} vertical - Whether or not the group should be displayed vertically.
+ * @property {boolean} disabled - Whether or not the group should be disabled.
+ * @property {boolean} readonly - Whether or not the group should be readonly.
+ * @property {boolean} dense - Whether or not the group should be dense.
+ * @property {ButtonToggleGroupTheme} theme - The theme to use for the group.
+ *
+ * @attribute {any} value - The value of the selected button toggle(s).
+ * @attribute {boolean} outlined - Whether or not the group should be outlined.
+ * @attribute {boolean} multiple - Whether or not the group should allow multiple selections.
+ * @attribute {boolean} stretch - Whether or not the group should stretch to fill the available width.
+ * @attribute {boolean} mandatory - Whether or not the group should require a selection once a button has been toggled on.
+ * @attribute {boolean} vertical - Whether or not the group should be displayed vertically.
+ * @attribute {boolean} disabled - Whether or not the group should be disabled.
+ * @attribute {boolean} readonly - Whether or not the group should be readonly.
+ * @attribute {boolean} dense - Whether or not the group should be dense.
+ * @attribute {ButtonToggleGroupTheme} theme - The theme to use for the group.
+ *
+ * @event {CustomEvent<IButtonToggleGroupChangeEventData>} forge-button-toggle-group-change - Dispatches when the value of the group changes.
+ *
+ * @cssproperty --forge-button-toggle-group-display - The `display` of the group container elements.
+ * @cssproperty --forge-button-toggle-group-gap - The space between button toggle elements.
+ * @cssproperty --forge-button-toggle-group-padding - The padding around the button toggle elements when outlined.
+ * @cssproperty --forge-button-toggle-group-padding-block - The block padding around the button toggle elements when outlined.
+ * @cssproperty --forge-button-toggle-group-padding-inline - The inline padding around the button toggle elements when outlined.
+ * @cssproperty --forge-button-toggle-group-height - The height of the group element.
+ * @cssproperty --forge-button-toggle-group-dense-height - The height of the group element when dense.
+ * @cssproperty --forge-button-toggle-group-outline-width - The width of the outline around the group element.
+ * @cssproperty --forge-button-toggle-group-outline-style - The style of the outline around the group element.
+ * @cssproperty --forge-button-toggle-group-outline-color - The color of the outline around the group element.
+ * @cssproperty --forge-button-toggle-group-outline-color-active - The color of the outline around the group element when hovered or focused.
+ * @cssproperty --forge-button-toggle-group-shape - The shape radius of the group container element.
+ * @cssproperty --forge-button-toggle-group-shape-start-start - The start-start shape radius.
+ * @cssproperty --forge-button-toggle-group-shape-start-end - The start-end shape radius.
+ * @cssproperty --forge-button-toggle-group-shape-end-start - The end-start shape radius.
+ * @cssproperty --forge-button-toggle-group-shape-end-end - The end-end shape radius.
+ * @cssproperty --forge-button-toggle-group-transition-duration - The transition duration for all animations on the group.
+ * @cssproperty --forge-button-toggle-group-transition-timing - The transition timing for all animations on the group.
+ *
+ * @csspart root - The root container element for the group.
+ *
+ * @slot - The is a default/unnamed slot for child button toggle elements.
  */
-let ButtonToggleGroupComponent = class ButtonToggleGroupComponent extends BaseComponent {
+let ButtonToggleGroupComponent = class ButtonToggleGroupComponent extends BaseButtonToggleGroupClass {
     static get observedAttributes() {
-        return [
-            BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VALUE,
-            BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MULTIPLE,
-            BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY,
-            BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL,
-            BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH,
-            BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED,
-            BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE
-        ];
+        return Object.values(BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
         this._foundation = new ButtonToggleGroupFoundation(new ButtonToggleGroupAdapter(this));
+        this[inputType] = 'radio'; // Used for form validity message to match radio button
     }
-    initializedCallback() {
+    connectedCallback() {
+        this[setDefaultAria]({ role: 'group' }, { setAttribute: !this.hasAttribute('role') });
         this._foundation.initialize();
     }
     disconnectedCallback() {
-        this._foundation.disconnect();
+        this._foundation.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VALUE:
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.VALUE:
                 this.value = newValue;
                 break;
-            case BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MULTIPLE:
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.NO_OUTLINE:
+                this.outlined = !coerceBoolean(newValue);
+                break;
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.MULTIPLE:
                 this.multiple = coerceBoolean(newValue);
                 break;
-            case BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY:
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.MANDATORY:
                 this.mandatory = coerceBoolean(newValue);
                 break;
-            case BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL:
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.VERTICAL:
                 this.vertical = coerceBoolean(newValue);
                 break;
-            case BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH:
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.STRETCH:
                 this.stretch = coerceBoolean(newValue);
                 break;
-            case BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE:
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
-            case BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED:
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
                 break;
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.REQUIRED:
+                this.required = coerceBoolean(newValue);
+                break;
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.READONLY:
+                this.readonly = coerceBoolean(newValue);
+                break;
+            case BUTTON_TOGGLE_GROUP_CONSTANTS.observedAttributes.THEME:
+                this.theme = newValue;
+                break;
         }
     }
+    [getFormValue]() {
+        const hasValue = Array.isArray(this.value) ? this.value.length > 0 : !!this.value;
+        let data = null;
+        if (hasValue) {
+            const value = Array.isArray(this.value) ? this.value : [this.value];
+            if (value.length) {
+                data = new FormData();
+                value.forEach(v => data === null || data === void 0 ? void 0 : data.append(this.name, v));
+            }
+        }
+        return data;
+    }
+    [getFormState]() {
+        const state = new FormData();
+        const value = Array.isArray(this.value) ? this.value : this.value != null ? [this.value] : [];
+        state.append('multiple', String(this.multiple));
+        value.forEach(v => state.append('value', v));
+        return state;
+    }
+    formStateRestoreCallback(state, reason) {
+        var _a;
+        if (reason === 'restore' && state instanceof FormData) {
+            const multiple = state.get('multiple') === 'true';
+            const value = state.getAll('value');
+            if (multiple) {
+                this.multiple = multiple;
+                this.value = value;
+                return;
+            }
+            this.value = (_a = value[0]) !== null && _a !== void 0 ? _a : null;
+        }
+    }
+    formResetCallback() {
+        this.value = this.getAttribute('value');
+    }
+    labelChangedCallback(value) {
+        this[setDefaultAria]({ ariaLabel: value !== null && value !== void 0 ? value : undefined });
+    }
 };
 __decorate([
     FoundationProperty()
 ], ButtonToggleGroupComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonToggleGroupComponent.prototype, "outlined", void 0);
 __decorate([
     FoundationProperty()
 ], ButtonToggleGroupComponent.prototype, "multiple", void 0);
@@ -89,11 +190,19 @@ __decorate([
 ], ButtonToggleGroupComponent.prototype, "disabled", void 0);
 __decorate([
     FoundationProperty()
-], ButtonToggleGroupComponent.prototype, "options", void 0);
+], ButtonToggleGroupComponent.prototype, "required", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonToggleGroupComponent.prototype, "readonly", void 0);
+__decorate([
+    FoundationProperty()
+], ButtonToggleGroupComponent.prototype, "theme", void 0);
 ButtonToggleGroupComponent = __decorate([
     CustomElement({
         name: BUTTON_TOGGLE_GROUP_CONSTANTS.elementName,
-        dependencies: [ButtonToggleComponent]
+        dependencies: [
+            ButtonToggleComponent
+        ]
     })
 ], ButtonToggleGroupComponent);
 export { ButtonToggleGroupComponent };

package/esm/calendar/calendar-dom-utils.js

@@ -151,8 +151,7 @@ export function getEventElement(event, overflow) {
 /** Returns a tooltip element. */
 export function getTooltip(content) {
     const tooltip = document.createElement('forge-tooltip');
-    tooltip.text = content;
-    tooltip.setAttribute('aria-hidden', 'true');
+    tooltip.textContent = content;
     return tooltip;
 }
 /** Returns a calendar header. */

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

@@ -332,7 +332,7 @@ export declare class CalendarFoundation implements ICalendarFoundation {
      * Moves to and sets tabindex on the given date.
      * @param date The destination date
      * @param setFocus Whether focus should be set on the date
-     * */
+     */
     private _goToDate;
     /**
      * Moves forward one month and rebuilds the calendar dates to match.

package/esm/calendar/calendar-foundation.js

@@ -1165,26 +1165,21 @@ export class CalendarFoundation {
      * Moves to and sets tabindex on the given date.
      * @param date The destination date
      * @param setFocus Whether focus should be set on the date
-     * */
+     */
     _goToDate(date, setFocus) {
         const year = date.getFullYear();
         const month = date.getMonth();
         this._focusedDate = date;
-        if (this._year !== year || this._month !== month) {
-            this._month = month;
-            this._setMonth();
-            this._year = year;
-            this._setYear();
-            if (this._view !== 'date') {
-                this._closeMenu(false, setFocus);
-            }
-            else {
-                this._resetDateGrid();
-            }
-        }
-        else if (this._view !== 'date') {
+        this._month = month;
+        this._setMonth();
+        this._year = year;
+        this._setYear();
+        if (this._view !== 'date') {
             this._closeMenu(false, setFocus);
         }
+        else {
+            this._resetDateGrid();
+        }
         this._adapter.setActiveDate(date, setFocus, this._preventFocus);
         this._emitFocusChangeEvent(this._focusedDate);
     }
@@ -1471,7 +1466,8 @@ export class CalendarFoundation {
     }
     _applyMin() {
         this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MIN, !!this._minAttribute, this._minAttribute);
-        if (this._min && this._min.getMonth() > this._month) {
+        if (this._min && (this._min.getMonth() > this._month || this._min.getFullYear() > this._year)) {
+            this._year = this._min.getFullYear();
             this._month = this._min.getMonth();
         }
         if (this._isInitialized) {
@@ -1486,7 +1482,8 @@ export class CalendarFoundation {
     }
     _applyMax() {
         this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MAX, !!this._maxAttribute, this._maxAttribute);
-        if (this._max && this._max.getMonth() < this._month) {
+        if (this._max && (this._max.getMonth() < this._month || this._max.getFullYear() < this._year)) {
+            this._year = this._max.getFullYear();
             this._month = this._max.getMonth();
         }
         if (this._isInitialized) {

package/esm/checkbox/checkbox.js

@@ -13,7 +13,7 @@ import { CheckboxAdapter } from './checkbox-adapter';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 import { CheckboxFoundation } from './checkbox-foundation';
 const template = '<template><div class=\"forge-checkbox\" part=\"checkbox\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\"></slot><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\"container\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
-const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-size, 24px);--_checkbox-background-color:var(--forge-checkbox-background-color, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background-color:var(--forge-checkbox-checked-background-color, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background-color));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-switch-justify, space-between);--_checkbox-direction:var(--forge-switch-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-state-layer-state-layer-unchecked-color, var(--_state-layer-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-animation-duration, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-animation-duration, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background-color,border-width,border-color;transition-property:background-color,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background-color:var(--_checkbox-background-color)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-checkbox .label:empty{display:none}.forge-checkbox ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
+const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background-color:var(--forge-checkbox-background-color, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background-color:var(--forge-checkbox-checked-background-color, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background-color));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, space-between);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background-color,border-width,border-color;transition-property:background-color,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background-color:var(--_checkbox-background-color)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-checkbox .label:empty{display:none}.forge-checkbox ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
 /**
  * @tag forge-checkbox
  *

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

@@ -8,22 +8,18 @@ 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>';
 const determinateTemplate = '<svg viewBox=\"0 0 4800 4800\"><circle class=\"track-background\" pathLength=\"100\"></circle><circle class=\"track\" pathLength=\"100\"></circle><circle class=\"progress\" pathLength=\"100\" stroke-dashoffset=\"100\"></circle></svg>';
+import { setDefaultAria } from '../constants';
 export class CircularProgressAdapter extends BaseAdapter {
     constructor(component) {
         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');
-        }
+        this._component[setDefaultAria]({
+            role: 'progressbar',
+            ariaValueMin: '0',
+            ariaValueMax: '1'
+        });
     }
     setDeterminate(value) {
         this._tryResetTemplate();
@@ -34,13 +30,13 @@ export class CircularProgressAdapter extends BaseAdapter {
         }
         else {
             this._rootElement.insertAdjacentHTML('beforeend', indeterminateTemplate);
-            this._component.removeAttribute('aria-valuenow');
+            this._component[setDefaultAria]({ ariaValueNow: null });
             this._determinateProgressCircleElement = undefined;
         }
     }
     setProgress(value) {
         var _a;
-        this._component.setAttribute('aria-valuenow', `${value}`);
+        this._component[setDefaultAria]({ ariaValueNow: `${value}` });
         (_a = this._determinateProgressCircleElement) === null || _a === void 0 ? void 0 : _a.setAttribute('stroke-dashoffset', `${(1 - value) * 100}`);
     }
     _tryResetTemplate() {

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

@@ -4,8 +4,10 @@
  * License: Apache-2.0
  */
 import { CircularProgressTheme } from './circular-progress-constants';
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface ICircularProgressComponent extends IBaseComponent {
+import { BaseComponent } from '../core/base/base-component';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+export interface ICircularProgressComponent extends IWithElementInternals, IWithDefaultAria {
     determinate: boolean;
     progress: number;
     theme: CircularProgressTheme;
@@ -16,6 +18,7 @@ declare global {
         'forge-circular-progress': ICircularProgressComponent;
     }
 }
+declare const CircularProgressComponent_base: import("..").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("..").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-circular-progress
  *
@@ -50,7 +53,7 @@ declare global {
  *
  * @csspart progressbar - Styles the progress bar container element
  */
-export declare class CircularProgressComponent extends BaseComponent implements ICircularProgressComponent {
+export declare class CircularProgressComponent extends CircularProgressComponent_base implements ICircularProgressComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
@@ -61,3 +64,4 @@ export declare class CircularProgressComponent extends BaseComponent implements
     theme: CircularProgressTheme;
     track: boolean;
 }
+export {};

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

@@ -9,8 +9,10 @@ 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';
+import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
 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)}}';
+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(:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--_circular-progress-track-fill-color)}:host([theme=primary]) .forge-circular-progress{--_circular-progress-indicator-color:var(--forge-circular-progress-indicator-color, var(--forge-theme-primary, #3f51b5))}:host([theme=primary]:is([track],[determinate])) .forge-circular-progress{--_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))}:host([theme=secondary]:is([track],[determinate])) .forge-circular-progress{--_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))}:host([theme=success]:is([track],[determinate])) .forge-circular-progress{--_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))}:host([theme=error]:is([track],[determinate])) .forge-circular-progress{--_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))}:host([theme=warning]:is([track],[determinate])) .forge-circular-progress{--_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))}:host([theme=info]:is([track],[determinate])) .forge-circular-progress{--_circular-progress-track-color:var(--forge-circular-progress-track-color, var(--forge-theme-info-container, #c7daf0))}@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
  *
@@ -45,7 +47,7 @@ const styles = ':host{--_circular-progress-size:var(--forge-circular-progress-si
  *
  * @csspart progressbar - Styles the progress bar container element
  */
-let CircularProgressComponent = class CircularProgressComponent extends BaseComponent {
+let CircularProgressComponent = class CircularProgressComponent extends WithDefaultAria(WithElementInternals(BaseComponent)) {
     static get observedAttributes() {
         return [
             CIRCULAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,