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

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

@@ -8,192 +8,196 @@ import { BUTTON_TOGGLE_GROUP_CONSTANTS } from './button-toggle-group-constants';
 export class ButtonToggleGroupFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._isInitialized = false;
+        this._values = [];
+        this._outlined = true;
         this._multiple = false;
         this._mandatory = false;
         this._vertical = false;
         this._stretch = false;
         this._dense = false;
         this._disabled = false;
-        this._options = [];
-        this._values = [];
+        this._readonly = false;
+        this._required = false;
+        this._theme = 'tertiary';
         this._selectListener = evt => this._onSelect(evt);
         this._slotListener = () => this._synchronize();
     }
     initialize() {
-        if (this._options && this._options.length) {
-            this._applyOptions(false);
-        }
+        this._adapter.setFormValue();
+        this._adapter.setFormValidity();
         this._adapter.addListener(BUTTON_TOGGLE_CONSTANTS.events.SELECT, this._selectListener);
         this._adapter.addSlotChangeListener(this._slotListener);
-        this._adapter.setVertical(this._vertical);
-        this._adapter.setStretch(this._stretch);
-        this._adapter.setDense(this._dense);
-        this._adapter.setDisabled(this._disabled);
-        this._adapter.applyAdjacentSelections(this._vertical);
-        this._isInitialized = true;
-    }
-    disconnect() {
-        this._isInitialized = false;
+    }
+    destroy() {
         this._adapter.removeListener(BUTTON_TOGGLE_CONSTANTS.events.SELECT, this._selectListener);
         this._adapter.removeSlotChangeListener(this._slotListener);
     }
     _synchronize() {
-        if (!this._multiple) {
-            const selectedValues = this._adapter.getSelectedValues().concat(this._values);
-            this.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : null;
+        if (this._disabled) {
+            this._adapter.setDisabled(this._disabled);
         }
-        else {
+        if (this._readonly) {
+            this._adapter.setReadonly(this._readonly);
+        }
+        if (this._multiple) {
             const selectedValues = new Set(this._adapter.getSelectedValues().concat(this._values));
-            this._applyValue(Array.from(selectedValues));
+            this.value = Array.from(selectedValues);
+        }
+        else {
+            const selectedValues = this._adapter.getSelectedValues().concat(this._values);
+            this.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : null;
         }
     }
     _onSelect(evt) {
-        const target = evt.target;
-        // When in mandatory mode we need to ensure at least one element is selected. If there are no selections
-        // then we need to reselect the target toggle because it was deselected
+        // When in mandatory mode we need to ensure at least one element is selected. If the user tries to deselect the last
+        // element, we prevent the select event from toggling.
         if (this._mandatory) {
             const values = this._adapter.getSelectedValues();
             if (!values.length) {
-                target.selected = true;
+                evt.preventDefault();
                 return;
             }
         }
-        // When not in multiple mode, we deselect all toggles, except for the one that was just changed
-        if (!this._multiple) {
-            this._adapter.deselect(target);
+        // Compute the new state to provide in the change event
+        let value;
+        if (evt.detail.selected) {
+            value = this._multiple ? [...this._values, evt.detail.value] : [evt.detail.value];
         }
-        this._adapter.applyAdjacentSelections(this._vertical);
-        this._adapter.emitHostEvent(BUTTON_TOGGLE_GROUP_CONSTANTS.events.CHANGE, this._getValue());
-    }
-    _getValue() {
-        var _a;
-        const selections = this._adapter.getSelectedValues();
-        return this._multiple ? Array.from(new Set(selections)) : (_a = selections.slice(0, 1)[0]) !== null && _a !== void 0 ? _a : null;
+        else {
+            value = this._multiple ? this._values.filter(v => v !== evt.detail.value) : [];
+        }
+        const detail = this._multiple ? value : value.length ? value[0] : null;
+        const changeEvt = new CustomEvent(BUTTON_TOGGLE_GROUP_CONSTANTS.events.CHANGE, { detail, bubbles: true, cancelable: true });
+        this._adapter.dispatchHostEvent(changeEvt);
+        if (changeEvt.defaultPrevented) {
+            evt.preventDefault();
+            return;
+        }
+        this._values = value;
+        this._adapter.applyValues(this._values);
+        this._adapter.setFormValue();
+        this._adapter.setFormValidity();
     }
     _applyValue(value) {
-        let values = value instanceof Array ? value : [value];
+        let values = Array.isArray(value) ? value : value != null ? [value] : [];
+        this._values = values;
         if (!this._multiple && values.length > 1) {
-            values = values[0];
+            values = [values[0]];
         }
-        this._values = values;
         this._adapter.applyValues(values);
-        if (this._multiple) {
-            this._adapter.applyAdjacentSelections(this._vertical);
-        }
-    }
-    _applyOptions(init = true) {
-        if (this._options) {
-            this._adapter.createOptions(this._options);
-            if (init) {
-                this._adapter.setStretch(this._stretch);
-                this._adapter.setDense(this._dense);
-                this._adapter.setDisabled(this._disabled);
-                this._adapter.applyAdjacentSelections(this._vertical);
-            }
-        }
+        this._adapter.setFormValue();
+        this._adapter.setFormValidity();
     }
     get value() {
-        if (!this._isInitialized) {
-            return this._originalValue;
-        }
-        return this._getValue();
+        var _a;
+        // Combine the selected toggle values with our current state to ensure we always return the latest value
+        // even if our state doesn't match a selected toggle.
+        const values = Array.from(new Set(this._adapter.getSelectedValues().concat(this._values)));
+        return this._multiple ? Array.from(values) : (_a = values[0]) !== null && _a !== void 0 ? _a : null;
     }
     set value(value) {
-        this._originalValue = value;
         this._applyValue(value);
     }
     get multiple() {
         return this._multiple;
     }
     set multiple(value) {
+        value = !!value;
         if (this._multiple !== value) {
             this._multiple = value;
-            this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MULTIPLE, this._multiple);
+            this._applyValue(this._values);
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MULTIPLE, this._multiple);
         }
     }
     get mandatory() {
         return this._mandatory;
     }
     set mandatory(value) {
+        value = !!value;
         if (this._mandatory !== value) {
             this._mandatory = value;
-            if (this._mandatory) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.MANDATORY, this._mandatory);
         }
     }
     get vertical() {
         return this._vertical;
     }
     set vertical(value) {
+        value = !!value;
         if (this._vertical !== value) {
             this._vertical = value;
-            this._adapter.setVertical(this._vertical);
-            this._adapter.applyAdjacentSelections(this._vertical);
-            if (this._vertical) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.VERTICAL, this._vertical);
         }
     }
     get stretch() {
         return this._stretch;
     }
     set stretch(value) {
+        value = !!value;
         if (this._stretch !== value) {
             this._stretch = value;
-            this._adapter.setStretch(this._stretch);
-            if (this._stretch) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.STRETCH, this._stretch);
         }
     }
     get dense() {
         return this._dense;
     }
     set dense(value) {
+        value = !!value;
         if (this._dense !== value) {
             this._dense = value;
-            this._adapter.setDense(this._dense);
-            if (this._dense) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DENSE, this._dense);
         }
     }
     get disabled() {
         return this._disabled;
     }
     set disabled(value) {
+        value = !!value;
         if (this._disabled !== value) {
             this._disabled = value;
             this._adapter.setDisabled(this._disabled);
-            if (this._disabled) {
-                this._adapter.setHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED);
-            }
-            else {
-                this._adapter.removeHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED);
-            }
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        value = !!value;
+        if (this._readonly !== value) {
+            this._readonly = value;
+            this._adapter.setReadonly(this._readonly);
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.READONLY, this._readonly);
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        value = !!value;
+        if (this._required !== value) {
+            this._required = value;
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.REQUIRED, this._required);
+        }
+    }
+    get outlined() {
+        return this._outlined;
+    }
+    set outlined(value) {
+        value = !!value;
+        if (this._outlined !== value) {
+            this._outlined = value;
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.NO_OUTLINE, !this._outlined);
         }
     }
-    get options() {
-        return this._options.map(o => (Object.assign({}, o)));
+    get theme() {
+        return this._theme;
     }
-    set options(value) {
-        this._options = value.map(o => (Object.assign({}, o)));
-        if (this._isInitialized) {
-            this._applyOptions();
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.toggleHostAttribute(BUTTON_TOGGLE_GROUP_CONSTANTS.attributes.THEME, this._theme !== 'tertiary', this._theme);
         }
     }
 }

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. */