@tylertech/forge 3.5.1 → 3.6.0

package/esm/switch/switch-core.js

@@ -6,13 +6,13 @@
 import { SWITCH_CONSTANTS } from './switch-constants';
 export class SwitchCore {
     get _submittedValue() {
-        return this._on ? this._value : null;
+        return this._checked ? this._value : null;
     }
     constructor(_adapter) {
         this._adapter = _adapter;
         // State
-        this._on = false;
-        this._defaultOn = false;
+        this._checked = false;
+        this._defaultChecked = false;
         this._value = 'on';
         this._dense = false;
         this._disabled = false;
@@ -46,9 +46,9 @@ export class SwitchCore {
         if (this._readonly) {
             return;
         }
-        const oldValue = this._on;
-        const newValue = !this._on;
-        this._on = newValue;
+        const oldValue = this._checked;
+        const newValue = !this._checked;
+        this._checked = newValue;
         const event = new Event('change', { cancelable: true, bubbles: true });
         const forgeEvent = new CustomEvent(SWITCH_CONSTANTS.events.CHANGE, {
             detail: newValue,
@@ -57,35 +57,36 @@ export class SwitchCore {
         });
         this._adapter.dispatchHostEvent(event);
         this._adapter.dispatchHostEvent(forgeEvent);
-        this._on = oldValue;
+        this._checked = oldValue;
         if (event.defaultPrevented || forgeEvent.defaultPrevented) {
             return;
         }
-        this.on = newValue;
+        this.checked = newValue;
     }
-    _setOnAttribute() {
-        this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.ON, this._on);
-        // Also set selected for backwards compatibility
-        this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.SELECTED, this._on);
+    _setCheckedAttribute() {
+        this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.CHECKED, this._checked);
+        // Also set the following for backwards compatibility
+        this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.ON, this._checked);
+        this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.SELECTED, this._checked);
     }
-    get on() {
-        return this._on;
+    get checked() {
+        return this._checked;
     }
-    set on(value) {
-        if (this._on !== value) {
-            this._on = value;
-            this._adapter.setOn(this._on);
+    set checked(value) {
+        if (this._checked !== value) {
+            this._checked = value;
+            this._adapter.setChecked(this._checked);
             this._adapter.syncValue(this._submittedValue);
-            this._setOnAttribute();
+            this._setCheckedAttribute();
         }
     }
-    get defaultOn() {
-        return this._defaultOn;
+    get defaultChecked() {
+        return this._defaultChecked;
     }
-    set defaultOn(value) {
-        if (this._defaultOn !== value) {
-            this._defaultOn = value;
-            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DEFAULT_ON, this._defaultOn);
+    set defaultChecked(value) {
+        if (this._defaultChecked !== value) {
+            this._defaultChecked = value;
+            this._adapter.toggleHostAttribute(SWITCH_CONSTANTS.attributes.DEFAULT_CHECKED, this._defaultChecked);
         }
     }
     get value() {

package/esm/switch/switch.d.ts

@@ -13,11 +13,13 @@ import { IWithLabelAwareness } from '../core/mixins/label/with-label-aware';
 import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
 export interface ISwitchComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
     value: string;
+    checked: boolean;
+    /** @deprecated use `checked` instead */
     on: boolean;
-    /**
-     * @deprecated use `on` instead
-     */
+    /** @deprecated use `on` instead */
     selected: boolean;
+    defaultChecked: boolean;
+    /** @deprecated use `defaultChecked` instead */
     defaultOn: boolean;
     required: boolean;
     dense: boolean;
@@ -103,6 +105,7 @@ declare const SwitchComponent_base: import("../constants").AbstractConstructor<i
  * @cssproperty --forge-switch-icon-active-off-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its off state.
  * @cssproperty --forge-switch-gap - The space between the switch and label.
  * @cssproperty --forge-switch-justify - How the switch and label are distributed along their main axis.
+ * @cssproperty --forge-switch-align - How the switch and label are distributed along their cross axis.
  * @cssproperty --forge-switch-direction - Whether the switch and label are arranged along the inline or block axis.
  * @cssproperty --forge-switch-state-layer-size - The inline and block size of the handle's state layer.
  * @cssproperty --forge-switch-state-layer-width - The inline size of the handle's state layer.
@@ -149,20 +152,33 @@ export declare class SwitchComponent extends SwitchComponent_base implements ISw
     /** @ignore */
     setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
     /**
-     * Gets/sets whether the switch is on or off.
+     * Gets/sets whether the switch is checked or not.
+     * @default false
+     * @attribute
+     */
+    checked: boolean;
+    /**
+     * Alias for `checked` _(deprecated)_. Gets/sets whether the switch is checked or not.
+     * @deprecated use `checked` instead.
      * @default false
      * @attribute
      */
     on: boolean;
     /**
-     * Alias for `on` _(deprecated)_.
-     * @deprecated use `on` instead
+     * Alias for `checked` _(deprecated)_.
+     * @deprecated use `checked` instead
      * @default false
      * @attribute
      */
     selected: boolean;
     /**
-     * Gets/sets whether the switch is on or off by default.
+     * Gets/sets whether the switch is checked by default.
+     * @default false
+     * @attribute default-checked
+     */
+    defaultChecked: boolean;
+    /**
+     * Alias for `defaultChecked` _(deprecated)_. Gets/sets whether the switch is checked by default.
      * @default false
      * @attribute default-on
      */

package/esm/switch/switch.js

@@ -18,7 +18,7 @@ import { SwitchAdapter } from './switch-adapter';
 import { SWITCH_CONSTANTS } from './switch-constants';
 import { SwitchCore } from './switch-core';
 const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><div class=\"track\" part=\"track\"></div><div class=\"handle\" part=\"handle\"><div id=\"icon-off\" class=\"icon icon__off\" part=\"icon-off\"><slot name=\"icon-off\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 13H4v-2h16v2z\"/></svg></slot></div><div id=\"icon-on\" class=\"icon icon__on\" part=\"icon-on\"><slot name=\"icon-on\"><svg aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"/></svg></slot></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><label id=\"label\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
-const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, start);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:flex;position:relative;flex-direction:var(--_switch-direction);flex-shrink:0;align-items:center;justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;align-items:center;display:flex;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{transition-property:background-color,border-color,border-width;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;justify-content:center;align-items:center;display:flex;transition-property:translate;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;align-items:center;justify-content:center;display:flex;transition-property:opacity,scale;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([on]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([on]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([on]) .handle::before{scale:var(--_switch-handle-on-scale);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([on]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([on]) .handle .icon__off{opacity:0;scale:0.4}:host([on]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[on]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch .container{opacity:var(--_switch-disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
+const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, start);--_switch-align:var(--forge-switch-align, center);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:flex;position:relative;flex-direction:var(--_switch-direction);align-items:var(--_switch-align);justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;align-items:center;display:flex;flex-shrink:0;block-size:max(var(--_switch-handle-height),var(--_switch-track-height),var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{transition-property:background-color,border-color,border-width;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width),var(--_switch-current-state-layer-width))/ 2 - calc(var(--_switch-track-height)/ 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;justify-content:center;align-items:center;display:flex;transition-property:translate;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;align-items:center;justify-content:center;display:flex;transition-property:opacity,scale;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size:var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .8125)));font-weight:var(--forge-typography-label2-font-weight,400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, .0096153846em);text-transform:var(--forge-typography-label2-text-transform,inherit);text-decoration:var(--forge-typography-label2-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([checked]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height)/ 2) * 2)}:host([checked]) .handle::before{scale:var(--_switch-handle-on-scale);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([checked]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([checked]) .handle .icon__off{opacity:0;scale:0.4}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch .container{opacity:var(--_switch-disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media (prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_switch-track-shape);--forge-focus-indicator-outward-offset:0px}';
 /**
  * @tag forge-switch
  *
@@ -86,6 +86,7 @@ const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color
  * @cssproperty --forge-switch-icon-active-off-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its off state.
  * @cssproperty --forge-switch-gap - The space between the switch and label.
  * @cssproperty --forge-switch-justify - How the switch and label are distributed along their main axis.
+ * @cssproperty --forge-switch-align - How the switch and label are distributed along their cross axis.
  * @cssproperty --forge-switch-direction - Whether the switch and label are arranged along the inline or block axis.
  * @cssproperty --forge-switch-state-layer-size - The inline and block size of the handle's state layer.
  * @cssproperty --forge-switch-state-layer-width - The inline size of the handle's state layer.
@@ -130,7 +131,7 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
         super.connectedCallback();
         this[setDefaultAria]({
             role: 'switch',
-            ariaChecked: this.on ? 'true' : 'false',
+            ariaChecked: this.checked ? 'true' : 'false',
             ariaDisabled: this.disabled ? 'true' : 'false',
             ariaRequired: this.required ? 'true' : 'false'
         });
@@ -138,12 +139,14 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
+            case SWITCH_CONSTANTS.observedAttributes.CHECKED:
             case SWITCH_CONSTANTS.observedAttributes.ON:
             case SWITCH_CONSTANTS.observedAttributes.SELECTED:
-                this.on = coerceBoolean(newValue);
+                this.checked = coerceBoolean(newValue);
                 break;
+            case SWITCH_CONSTANTS.observedAttributes.DEFAULT_CHECKED:
             case SWITCH_CONSTANTS.observedAttributes.DEFAULT_ON:
-                this.defaultOn = coerceBoolean(newValue);
+                this.defaultChecked = coerceBoolean(newValue);
                 break;
             case SWITCH_CONSTANTS.observedAttributes.VALUE:
                 this.value = newValue;
@@ -170,22 +173,22 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
         super.attributeChangedCallback(name, oldValue, newValue);
     }
     [getFormValue]() {
-        return this.on ? this.value : null;
+        return this.checked ? this.value : null;
     }
     [getFormState]() {
-        return this.on ? SWITCH_CONSTANTS.state.ON : SWITCH_CONSTANTS.state.OFF;
+        return this.checked ? SWITCH_CONSTANTS.state.ON : SWITCH_CONSTANTS.state.OFF;
     }
     [setValidity]() {
-        this[internals].setValidity({ valueMissing: this.required && !this.on }, this[getValidationMessage]({
-            checked: this.on,
+        this[internals].setValidity({ valueMissing: this.required && !this.checked }, this[getValidationMessage]({
+            checked: this.checked,
             required: this.required
         }));
     }
     formResetCallback() {
-        this.on = this.defaultOn;
+        this.checked = this.defaultChecked;
     }
     formStateRestoreCallback(state) {
-        this.on = state === SWITCH_CONSTANTS.state.ON;
+        this.checked = state === SWITCH_CONSTANTS.state.ON;
     }
     labelClickedCallback() {
         this.click();
@@ -200,17 +203,17 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
         this[internals].setFormValue(value, state);
         if (state) {
             const stateValue = isString(state) ? state : state[this.name];
-            this.on = stateValue === SWITCH_CONSTANTS.state.ON;
+            this.checked = stateValue === SWITCH_CONSTANTS.state.ON;
             return;
         }
         if (isString(value)) {
-            this.on = !!value;
+            this.checked = !!value;
         }
         else if (value?.[this.name]) {
-            this.on = !!value[this.name];
+            this.checked = !!value[this.name];
         }
         else {
-            this.on = false;
+            this.checked = false;
         }
     }
     /**
@@ -219,21 +222,27 @@ let SwitchComponent = class SwitchComponent extends WithFormAssociation(WithLabe
      */
     toggle(force) {
         if (isDefined(force)) {
-            this._core.on = force;
+            this._core.checked = force;
         }
         else {
-            this._core.on = !this._core.on;
+            this._core.checked = !this._core.checked;
         }
     }
 };
 __decorate([
     coreProperty()
+], SwitchComponent.prototype, "checked", void 0);
+__decorate([
+    coreProperty({ name: 'checked' })
 ], SwitchComponent.prototype, "on", void 0);
 __decorate([
-    coreProperty({ name: 'on' })
+    coreProperty({ name: 'checked' })
 ], SwitchComponent.prototype, "selected", void 0);
 __decorate([
     coreProperty()
+], SwitchComponent.prototype, "defaultChecked", void 0);
+__decorate([
+    coreProperty({ name: 'defaultChecked' })
 ], SwitchComponent.prototype, "defaultOn", void 0);
 __decorate([
     coreProperty()

package/esm/table/table-utils.js

@@ -177,12 +177,6 @@ export class TableUtils {
                 Object.assign(th.style, columnConfig.headerCellStyle);
                 Object.assign(cellContainer.style, columnConfig.headerCellStyle);
             }
-            const span = document.createElement('span');
-            span.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_TEXT);
-            span.textContent = columnConfig.header && typeof columnConfig.header === 'string' ? columnConfig.header.trim() : '';
-            if (span.textContent.trim().length === 0) {
-                th.setAttribute('aria-hidden', 'true');
-            }
             // Add the sort icon if this column is sortable
             if (columnConfig.sortable) {
                 th.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTABLE);
@@ -231,6 +225,12 @@ export class TableUtils {
                 });
             }
             else {
+                const span = document.createElement('span');
+                span.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_TEXT);
+                span.textContent = columnConfig.header && typeof columnConfig.header === 'string' ? columnConfig.header.trim() : '';
+                if (span.textContent.trim().length === 0) {
+                    th.setAttribute('aria-hidden', 'true');
+                }
                 TableUtils._prepend(span, cellContainer);
             }
             th.appendChild(cellContainer);

package/esm/tabs/tab-bar/tab-bar-adapter.d.ts

@@ -7,8 +7,6 @@ import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { ITabComponent } from '../tab/tab';
 import { ITabBarComponent } from './tab-bar';
 export interface ITabBarAdapter extends IBaseAdapter {
-    initialize(): void;
-    destroy(): void;
     initializeContainerSizeObserver(listener: () => void): void;
     destroyContainerSizeObserver(): void;
     initializeScrollObserver(listener: EventListener): void;
@@ -41,10 +39,7 @@ export declare class TabBarAdapter extends BaseAdapter<ITabBarComponent> impleme
     private _resizeObserver;
     private _backwardScrollButton;
     private _forwardScrollButton;
-    private _forwardObserver?;
     constructor(component: ITabBarComponent);
-    initialize(): void;
-    destroy(): void;
     initializeContainerSizeObserver(listener: () => void): void;
     initializeScrollObserver(listener: EventListener): void;
     destroyContainerSizeObserver(): void;

package/esm/tabs/tab-bar/tab-bar-adapter.js

@@ -8,7 +8,6 @@ import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArr
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { TAB_CONSTANTS } from '../tab/tab-constants';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
-import { forwardAttributes } from '../../core/utils/reflect-utils';
 export class TabBarAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -16,15 +15,6 @@ export class TabBarAdapter extends BaseAdapter {
         this._rootElement = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.ROOT);
         this._scrollContainer = getShadowElement(this._component, TAB_BAR_CONSTANTS.selectors.SCROLL_CONTAINER);
     }
-    initialize() {
-        this._forwardObserver = forwardAttributes(this._component, Object.keys(TAB_BAR_CONSTANTS.forwardedAttributes), (name, value) => {
-            toggleAttribute(this._scrollContainer, !!value, TAB_BAR_CONSTANTS.forwardedAttributes[name], value ?? undefined);
-        });
-    }
-    destroy() {
-        this._forwardObserver?.disconnect();
-        this._forwardObserver = undefined;
-    }
     initializeContainerSizeObserver(listener) {
         this._resizeObserver = new ResizeObserver(() => listener());
         this._resizeObserver.observe(this._component);
@@ -40,7 +30,7 @@ export class TabBarAdapter extends BaseAdapter {
         this._scrollContainer.removeEventListener('scroll', listener, { passive: true });
     }
     setVertical(value) {
-        toggleAttribute(this._scrollContainer, !!value, 'aria-orientation', 'vertical');
+        toggleAttribute(this._component, !!value, 'aria-orientation', 'vertical');
     }
     setScrollBackwardButtonListener(listener) {
         this._backwardScrollButton?.addEventListener('click', listener);
@@ -109,6 +99,7 @@ export class TabBarAdapter extends BaseAdapter {
                 this._forwardScrollButton?.focus();
             }
             this._backwardScrollButton.disabled = disabled;
+            this._backwardScrollButton.tabIndex = -1;
         }
         if (this._forwardScrollButton) {
             const disabled = !forwardEnabled;
@@ -116,6 +107,7 @@ export class TabBarAdapter extends BaseAdapter {
                 this._backwardScrollButton?.focus();
             }
             this._forwardScrollButton.disabled = disabled;
+            this._forwardScrollButton.tabIndex = -1;
         }
     }
     scroll(which) {

package/esm/tabs/tab-bar/tab-bar-constants.d.ts

@@ -27,9 +27,6 @@ export declare const TAB_BAR_CONSTANTS: {
         AUTO_ACTIVATE: string;
         SCROLL_BUTTONS: string;
     };
-    forwardedAttributes: {
-        'data-aria-label': string;
-    };
     events: {
         CHANGE: string;
     };

package/esm/tabs/tab-bar/tab-bar-constants.js

@@ -19,9 +19,6 @@ const observedAttributes = {
 const attributes = {
     ...observedAttributes
 };
-const forwardedAttributes = {
-    'data-aria-label': 'aria-label'
-};
 const selectors = {
     ROOT: '.forge-tab-bar',
     SCROLL_CONTAINER: '.scroll-container',
@@ -40,7 +37,6 @@ export const TAB_BAR_CONSTANTS = {
     elementName,
     observedAttributes,
     attributes,
-    forwardedAttributes,
     events,
     selectors,
     classes,

package/esm/tabs/tab-bar/tab-bar-core.js

@@ -29,7 +29,6 @@ export class TabBarCore {
         this._scrollForwardButtonListener = () => this._onScrollForward();
     }
     initialize() {
-        this._adapter.initialize();
         this._adapter.addSlotListener(this._tabsChangedListener);
         this._adapter.addHostListener(TAB_CONSTANTS.events.SELECT, this._tabSelectedListener);
         this._adapter.addHostListener('keydown', this._keydownListener);
@@ -43,7 +42,6 @@ export class TabBarCore {
         this._isInitialized = true;
     }
     destroy() {
-        this._adapter.destroy();
         this._adapter.destroyContainerSizeObserver();
         this._adapter.destroyScrollObserver(this._scrollListener);
         this._isInitialized = false;
@@ -54,7 +52,7 @@ export class TabBarCore {
         this._tryScrollActiveTabIntoView();
     }
     _onTabSelected(evt) {
-        this._selectTab(evt.target);
+        this._selectTab({ tab: evt.target, focusTab: true });
     }
     async _onKeydown(evt) {
         const orientation = this._vertical ? 'vertical' : 'horizontal';
@@ -91,14 +89,14 @@ export class TabBarCore {
             return;
         }
         if (this._autoActivate) {
-            this._selectTab(this._tabs[index]);
+            this._selectTab({ tab: this._tabs[index], focusTab: true });
         }
         else {
             this._tabs[index].focus({ preventScroll: true, focusVisible: true });
             await this._adapter.tryScrollTabIntoView(this._tabs[index]);
         }
     }
-    async _selectTab(tab, emitEvent = true) {
+    async _selectTab({ tab, emitEvent = true, focusTab = false }) {
         if (!tab || tab.disabled) {
             return;
         }
@@ -121,7 +119,9 @@ export class TabBarCore {
         }
         // Selecting a tab causes an animation of the indicator to start relative to the currently selected tab
         tab.selected = true;
-        tab.focus({ preventScroll: true });
+        if (focusTab) {
+            tab.focus({ preventScroll: true });
+        }
         await this._adapter.tryScrollTabIntoView(tab);
         // Always deselect the currently selected tab after selecting a new tab to allow
         // for the tab indicator animation to run properly (the newly selected tab attempts
@@ -223,7 +223,7 @@ export class TabBarCore {
             this._activeTab = value ?? undefined;
             if (typeof this._activeTab === 'number') {
                 const newSelectedTab = this._tabs[this._activeTab];
-                this._selectTab(newSelectedTab, false);
+                this._selectTab({ tab: newSelectedTab, emitEvent: false, focusTab: false });
                 this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, String(this._activeTab));
             }
             else {

package/esm/tabs/tab-bar/tab-bar.d.ts

@@ -5,7 +5,9 @@
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 import { ITabBarChangeEventData } from './tab-bar-constants';
-export interface ITabBarComponent extends IBaseComponent {
+import { IWithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { IWithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+export interface ITabBarComponent extends IBaseComponent, IWithDefaultAria, IWithElementInternals {
     disabled: boolean;
     activeTab: number | null | undefined;
     vertical: boolean;
@@ -25,6 +27,7 @@ declare global {
         'forge-tab-bar-change': CustomEvent<ITabBarChangeEventData>;
     }
 }
+declare const TabBarComponent_base: import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../../constants").AbstractConstructor<import("../../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-tab-bar
  *
@@ -57,7 +60,6 @@ declare global {
  * @attribute {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
  * @attribute {boolean} [auto-activate=false] - Controls whether the tabs are automatically activated when receiving focus.
  * @attribute {boolean} [scroll-buttons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
- * @attribute {string} [data-aria-label] - The ARIA label to forward to the internal tablist element.
  *
  * @event {CustomEvent<ITabBarChangeEventData>} forge-tab-bar-change - Dispatches when the active tab changes.
  *
@@ -69,7 +71,7 @@ declare global {
  * @csspart container - The container element.
  * @csspart scroll-container - The scroll container element.
  */
-export declare class TabBarComponent extends BaseComponent implements ITabBarComponent {
+export declare class TabBarComponent extends TabBarComponent_base implements ITabBarComponent {
     static get observedAttributes(): string[];
     private _core;
     constructor();
@@ -87,3 +89,4 @@ export declare class TabBarComponent extends BaseComponent implements ITabBarCom
     autoActivate: boolean;
     scrollButtons: boolean;
 }
+export {};

package/esm/tabs/tab-bar/tab-bar.js

@@ -13,7 +13,10 @@ import { TabBarAdapter } from './tab-bar-adapter';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TabBarCore } from './tab-bar-core';
 import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
-const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div role=\"tablist\" class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
+import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
+import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
+import { setDefaultAria } from '../../constants';
+const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
 const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch);align-self:stretch}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}';
 /**
  * @tag forge-tab-bar
@@ -47,7 +50,6 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
  * @attribute {boolean} [secondary=false] - Deprecated. Controls whether the tabs are styled as secondary tab navigation.
  * @attribute {boolean} [auto-activate=false] - Controls whether the tabs are automatically activated when receiving focus.
  * @attribute {boolean} [scroll-buttons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
- * @attribute {string} [data-aria-label] - The ARIA label to forward to the internal tablist element.
  *
  * @event {CustomEvent<ITabBarChangeEventData>} forge-tab-bar-change - Dispatches when the active tab changes.
  *
@@ -59,7 +61,7 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
  * @csspart container - The container element.
  * @csspart scroll-container - The scroll container element.
  */
-let TabBarComponent = class TabBarComponent extends BaseComponent {
+let TabBarComponent = class TabBarComponent extends WithDefaultAria(WithElementInternals(BaseComponent)) {
     static get observedAttributes() {
         return Object.values(TAB_BAR_CONSTANTS.observedAttributes);
     }
@@ -70,6 +72,7 @@ let TabBarComponent = class TabBarComponent extends BaseComponent {
         this._core = new TabBarCore(new TabBarAdapter(this));
     }
     connectedCallback() {
+        this[setDefaultAria]({ role: 'tablist' }, { setAttribute: true });
         this._core.initialize();
     }
     disconnectedCallback() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/sass/button-area/_core.scss

@@ -15,11 +15,14 @@
 @mixin base {
   position: relative;
   overflow: hidden;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 @mixin enabled {
   cursor: #{token(cursor)};
 }
+
 @mixin disabled {
   cursor: #{token(disabled-cursor)};
 }

package/sass/checkbox/_core.scss

@@ -17,8 +17,7 @@
 @mixin checkbox {
   position: relative;
   flex-direction: #{token(direction)};
-  flex-shrink: 0;
-  align-items: center;
+  align-items: #{token(align)};
   justify-content: #{token(justify)};
   gap: #{token(gap)};
 
@@ -39,6 +38,7 @@
   justify-content: center;
 
   display: flex;
+  flex-shrink: 0;
 
   border-radius: #{token(state-layer-shape)};
   inline-size: #{token(state-layer-width)};