@tylertech/forge 3.5.1 → 3.6.0-dev.0

package/esm/icon-button/icon-button-constants.js

@@ -7,6 +7,8 @@ import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}icon-button`;
 const observedAttributes = {
     TOGGLE: 'toggle',
+    PRESSED: 'pressed',
+    /** @deprecated use `PRESSED` instead. */
     ON: 'on',
     VARIANT: 'variant',
     THEME: 'theme',

package/esm/icon-button/icon-button-core.d.ts

@@ -8,7 +8,7 @@ import { IIconButtonAdapter } from './icon-button-adapter';
 import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant } from './icon-button-constants';
 export interface IIconButtonCore extends IBaseButtonCore {
     toggle: boolean;
-    on: boolean;
+    pressed: boolean;
     variant: IconButtonVariant;
     theme: IconButtonTheme;
     shape: IconButtonShape;
@@ -16,7 +16,7 @@ export interface IIconButtonCore extends IBaseButtonCore {
 }
 export declare class IconButtonCore extends BaseButtonCore<IIconButtonAdapter> implements IIconButtonCore {
     private _toggle;
-    private _on;
+    private _pressed;
     private _variant;
     private _theme;
     private _shape;
@@ -27,8 +27,8 @@ export declare class IconButtonCore extends BaseButtonCore<IIconButtonAdapter> i
     private _onToggle;
     get toggle(): boolean;
     set toggle(value: boolean);
-    get on(): boolean;
-    set on(value: boolean);
+    get pressed(): boolean;
+    set pressed(value: boolean);
     get variant(): IconButtonVariant;
     set variant(value: IconButtonVariant);
     get theme(): IconButtonTheme;

package/esm/icon-button/icon-button-core.js

@@ -9,7 +9,7 @@ export class IconButtonCore extends BaseButtonCore {
     constructor(adapter) {
         super(adapter);
         this._toggle = false;
-        this._on = false;
+        this._pressed = false;
         this._variant = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_VARIANT;
         this._theme = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_THEME;
         this._shape = ICON_BUTTON_CONSTANTS.defaults.DEFAULT_SHAPE;
@@ -27,14 +27,14 @@ export class IconButtonCore extends BaseButtonCore {
     }
     _onToggle() {
         // Update internal state first so listeners can access the new state
-        const originalOn = this._on;
-        this._on = !this._on;
-        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.on, true, true);
-        this._on = originalOn;
+        const originalPressed = this._pressed;
+        this._pressed = !this._pressed;
+        const cancelled = !this._adapter.emitHostEvent(ICON_BUTTON_CONSTANTS.events.TOGGLE, this.pressed, true, true);
+        this._pressed = originalPressed;
         if (cancelled) {
             return;
         }
-        this.on = !originalOn;
+        this.pressed = !originalPressed;
     }
     get toggle() {
         return this._toggle;
@@ -43,24 +43,26 @@ export class IconButtonCore extends BaseButtonCore {
         value = !!value;
         if (this._toggle !== value) {
             this._toggle = value;
-            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, this._toggle, `${this._on}`);
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, this._toggle, `${this._pressed}`);
             this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.TOGGLE, this._toggle);
         }
     }
-    get on() {
-        return this._on;
+    get pressed() {
+        return this._pressed;
     }
-    set on(value) {
+    set pressed(value) {
         value = !!value;
-        if (this._on !== value) {
-            this._on = value;
+        if (this._pressed !== value) {
+            this._pressed = value;
             if (this._toggle) {
-                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._on}`);
+                this._adapter.setHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED, `${this._pressed}`);
             }
             else {
                 this._adapter.removeHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ARIA_PRESSED);
             }
-            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._on);
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.PRESSED, this._pressed);
+            // Deprecated but left for legacy support
+            this._adapter.toggleHostAttribute(ICON_BUTTON_CONSTANTS.attributes.ON, this._pressed);
         }
     }
     get variant() {

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

@@ -8,6 +8,8 @@ import { IconButtonDensity, IconButtonShape, IconButtonTheme, IconButtonVariant
 import { IconButtonCore } from './icon-button-core';
 export interface IIconButtonComponent extends IBaseButton {
     toggle: boolean;
+    pressed: boolean;
+    /** @deprecated use `pressed` instead. */
     on: boolean;
     variant: IconButtonVariant;
     theme: IconButtonTheme;
@@ -25,39 +27,10 @@ declare global {
 /**
  * @tag forge-icon-button
  *
- * @summary Icons buttons are used to trigger an action or event.
- *
- * @property {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @property {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @property {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @property {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @property {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @property {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @property {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @property {boolean} [disabled=false] - Whether or not the button is disabled.
- * @property {boolean} [popoverIcon=false] - Whether or not the button shows a built-in popover icon.
- * @property {boolean} [dense=false] - Whether or not the button is dense.
- * @property {string} name - The name of the button.
- * @property {string} value - The form value of the button.
- * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
- *
  * @globalconfig variant
  * @globalconfig shape
  * @globalconfig density
  *
- * @attribute {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @attribute {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @attribute {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @attribute {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @attribute {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @attribute {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @attribute {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @attribute {boolean} [disabled=false] - Whether or not the button is disabled.
- * @attribute {boolean} [popover-icon=false] - Whether or not the button shows a built-in popover icon.
- * @attribute {boolean} [dense=false] - Whether or not the button is dense.
- * @attribute {string} name - The name of the button.
- * @attribute {string} value - The form value of the button.
- *
  * @event {PointerEvent} click - Fires when the button is clicked.
  * @event {CustomEvent<boolean>} forge-icon-button-toggle - Fires when the icon button is toggled. Only applies in `toggle` mode.
  *
@@ -136,10 +109,40 @@ export declare class IconButtonComponent extends BaseButton<IconButtonCore> impl
     protected readonly _core: IconButtonCore;
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Whether or not the icon button can be toggled.
+     * @default false
+     */
     toggle: boolean;
+    /**
+     * Whether or not the toggle button is pressed. Only applies when `toggle` is `true`.
+     * @default false
+     */
+    pressed: boolean;
+    /**
+     * Alias for `pressed` _(deprecated)_. Whether or not the toggle button is pressed. Only applies when `toggle` is `true`.
+     * @default false
+     * @deprecated Use `pressed` instead.
+     */
     on: boolean;
+    /**
+     * The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+     * @default "default"
+     */
     theme: IconButtonTheme;
+    /**
+     * The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
+     * @default "icon"
+     */
     variant: IconButtonVariant;
+    /**
+     * The shape of the button. Valid values are `circular` and `squared`.
+     * @default "circular"
+     */
     shape: IconButtonShape;
+    /**
+     * The density of the button. Valid values are `small`, `medium`, and `large`.
+     * @default "large"
+     */
     density: IconButtonDensity;
 }

package/esm/icon-button/icon-button.js

@@ -18,39 +18,10 @@ const styles = ':host{--_icon-button-display:var(--forge-icon-button-display, in
 /**
  * @tag forge-icon-button
  *
- * @summary Icons buttons are used to trigger an action or event.
- *
- * @property {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @property {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @property {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @property {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @property {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @property {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @property {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @property {boolean} [disabled=false] - Whether or not the button is disabled.
- * @property {boolean} [popoverIcon=false] - Whether or not the button shows a built-in popover icon.
- * @property {boolean} [dense=false] - Whether or not the button is dense.
- * @property {string} name - The name of the button.
- * @property {string} value - The form value of the button.
- * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
- *
  * @globalconfig variant
  * @globalconfig shape
  * @globalconfig density
  *
- * @attribute {boolean} [toggle=false] - Whether or not the icon button can be toggled.
- * @attribute {boolean} [on=false] - Whether or not the button is on. Only applies when `toggle` is `true`.
- * @attribute {IconButtonVariant} [variant="icon"] - The variant of the button. Valid values are `text`, `outlined`, `filled`, and `raised`.
- * @attribute {IconButtonTheme} [theme="default"] - The theme of the button. Valid values are `default`, `primary`, `secondary`, `tertiary`, `success`, `error`, `warning`, `info`.
- * @attribute {string} [shape="circular"] - The shape of the button. Valid values are `circular` and `squared`.
- * @attribute {IconButtonDensity} [density="large"] - The density of the button. Valid values are `small`, `medium`, and `large`.
- * @attribute {string} [type="button"] - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
- * @attribute {boolean} [disabled=false] - Whether or not the button is disabled.
- * @attribute {boolean} [popover-icon=false] - Whether or not the button shows a built-in popover icon.
- * @attribute {boolean} [dense=false] - Whether or not the button is dense.
- * @attribute {string} name - The name of the button.
- * @attribute {string} value - The form value of the button.
- *
  * @event {PointerEvent} click - Fires when the button is clicked.
  * @event {CustomEvent<boolean>} forge-icon-button-toggle - Fires when the icon button is toggled. Only applies in `toggle` mode.
  *
@@ -138,8 +109,9 @@ let IconButtonComponent = class IconButtonComponent extends BaseButton {
             case ICON_BUTTON_CONSTANTS.attributes.TOGGLE:
                 this.toggle = coerceBoolean(newValue);
                 break;
+            case ICON_BUTTON_CONSTANTS.attributes.PRESSED:
             case ICON_BUTTON_CONSTANTS.attributes.ON:
-                this.on = coerceBoolean(newValue);
+                this.pressed = coerceBoolean(newValue);
                 break;
             case ICON_BUTTON_CONSTANTS.attributes.VARIANT:
                 this.variant = newValue;
@@ -162,6 +134,9 @@ __decorate([
 ], IconButtonComponent.prototype, "toggle", void 0);
 __decorate([
     coreProperty()
+], IconButtonComponent.prototype, "pressed", void 0);
+__decorate([
+    coreProperty({ name: 'pressed' })
 ], IconButtonComponent.prototype, "on", void 0);
 __decorate([
     coreProperty()

package/esm/profile-card/profile-card.js

@@ -9,7 +9,7 @@ import { ProfileCardAdapter } from './profile-card-adapter';
 import { ProfileCardCore } from './profile-card-core';
 import { PROFILE_CARD_CONSTANTS } from './profile-card-constants';
 import { ButtonComponent } from '../button';
-import { AvatarComponent } from '../avatar';
+import { defineAvatarComponent } from '../avatar';
 import { IconComponent } from '../icon/icon';
 import { ToolbarComponent } from '../toolbar';
 import { BaseComponent } from '../core/base/base-component';
@@ -79,6 +79,9 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
         this._core.focus(options);
     }
 };
+(() => {
+    defineAvatarComponent();
+})();
 __decorate([
     coreProperty()
 ], ProfileCardComponent.prototype, "fullName", void 0);
@@ -112,7 +115,7 @@ __decorate([
 ProfileCardComponent = __decorate([
     customElement({
         name: PROFILE_CARD_CONSTANTS.elementName,
-        dependencies: [ToolbarComponent, ButtonComponent, IconComponent, AvatarComponent]
+        dependencies: [ToolbarComponent, ButtonComponent, IconComponent]
     })
 ], ProfileCardComponent);
 export { ProfileCardComponent };

package/esm/radio/radio/radio.d.ts

@@ -48,6 +48,7 @@ declare const RadioComponent_base: import("../../constants").AbstractConstructor
  * @cssproperty --forge-radio-mark-color - The color of the radio button's mark.
  * @cssproperty --forge-radio-gap - The gap between the radio button and its label.
  * @cssproperty --forge-radio-justify - The alignment of the radio button and its label in the inline direction.
+ * @cssproperty --forge-radio-align - The alignment of the radio button and its label in the block direction.
  * @cssproperty --forge-radio-direction - The direction of the radio button and its label.
  * @cssproperty --forge-radio-state-layer-size - The size of the radio button's state layer in the inline and block directions.
  * @cssproperty --forge-radio-state-layer-width - The width of the radio button's state layer.

package/esm/radio/radio/radio.js

@@ -19,7 +19,7 @@ import { RadioAdapter } from './radio-adapter';
 import { RADIO_CONSTANTS, tryCheck } from './radio-constants';
 import { RadioCore } from './radio-core';
 const template = '<template><div id=\"radio\" class=\"forge-radio\" part=\"root\"><div id=\"container\" class=\"container\" aria-hidden=\"true\"><div id=\"background\" class=\"background\" part=\"background\"></div><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer exportparts=\"surface:state-layer\"></forge-state-layer></div><span id=\"label\" class=\"label\" for=\"input\" part=\"label\"><slot></slot></span></div></template>';
-const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}.forge-radio{--_radio-primary-color:var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));--_radio-inactive-color:var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));--_radio-size:var(--forge-radio-size, 20px);--_radio-mark-size:var(--forge-radio-mark-size, 75%);--_radio-state-layer-size:var(--forge-radio-state-layer-size, 40px);--_radio-state-layer-dense-size:var(--forge-radio-state-layer-dense-size, 24px);--_radio-width:var(--forge-radio-width, var(--_radio-size));--_radio-height:var(--forge-radio-height, var(--_radio-size));--_radio-border-width:var(--forge-radio-border-width, var(--forge-border-medium, 2px));--_radio-unchecked-border-color:var(--forge-radio-unchecked-border-color, var(--_radio-inactive-color));--_radio-checked-border-color:var(--forge-radio-checked-border-color, var(--_radio-primary-color));--_radio-background:var(--forge-radio-background, transparent);--_radio-shape:var(--forge-radio-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_radio-mark-width:var(--forge-radio-mark-width, var(--_radio-mark-size));--_radio-mark-height:var(--forge-radio-mark-height, var(--_radio-mark-size));--_radio-mark-color:var(--forge-radio-mark-color, var(--_radio-primary-color));--_radio-gap:var(--forge-radio-gap, 0);--_radio-justify:var(--forge-radio-justify, start);--_radio-direction:var(--forge-radio-direction, initial);--_radio-state-layer-width:var(--forge-radio-state-layer-width, var(--_radio-state-layer-size));--_radio-state-layer-height:var(--forge-radio-state-layer-height, var(--_radio-state-layer-size));--_radio-state-layer-unchecked-color:var(--forge-radio-state-layer-unchecked-color, var(--_radio-color));--_radio-state-layer-checked-color:var(--forge-radio-state-layer-checked-color, var(--_radio-primary-color));--_radio-state-layer-shape:var(--forge-radio-state-layer-shape, var(--_radio-shape));--_radio-state-layer-dense-width:var(--forge-radio-state-layer-dense-width, var(--_radio-state-layer-dense-size));--_radio-state-layer-dense-height:var(--forge-radio-state-layer-dense-height, var(--_radio-state-layer-dense-size));--_radio-disabled-opacity:var(--forge-radio-disabled-opacity, 0.38);--_radio-animation-duration:var(--forge-radio-animation-duration, var(--forge-animation-duration-short4, 200ms));--_radio-animation-timing-function:var(--forge-radio-animation-timing-function, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_radio-animation-delay:var(--forge-radio-animation-delay, 0ms)}.forge-radio{position:relative;flex-direction:var(--_radio-direction);flex-shrink:0;align-items:center;justify-content:var(--_radio-justify);gap:var(--_radio-gap);display:flex}.forge-radio .container{position:relative;align-items:center;justify-content:center;display:flex;border-radius:var(--_radio-shape);inline-size:var(--_radio-state-layer-width);block-size:var(--_radio-state-layer-height);cursor:pointer}.forge-radio .background{position:relative;display:inline block;overflow:hidden;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:border-color;box-sizing:border-box;border-radius:var(--_radio-shape);border-width:var(--_radio-border-width);border-style:solid;border-color:var(--_radio-unchecked-border-color);inline-size:var(--_radio-width);block-size:var(--_radio-height);background:var(--_radio-background)}.forge-radio .background::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:top left;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:opacity,scale;border-radius:var(--_radio-shape);inline-size:var(--_radio-mark-width);block-size:var(--_radio-mark-height);background:var(--_radio-mark-color);scale:0.5;opacity:0}.forge-radio .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);cursor:default}.forge-radio .label:empty{display:none}:host([checked]) .forge-radio .background{border-color:var(--_radio-checked-border-color)}:host([checked]) .forge-radio .background::after{scale:1;opacity:1}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-checked-color)}:host([dense]) .forge-radio .container{inline-size:var(--_radio-state-layer-dense-width);block-size:var(--_radio-state-layer-dense-height)}:host([disabled]) .forge-radio .container{opacity:var(--_radio-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-radio .container{cursor:not-allowed}forge-focus-indicator{--forge-focus-indicator-color:var(--_radio-primary-color);--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-shape:var(--_radio-state-layer-shape)}forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-unchecked-color)}';
+const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host(:focus){outline:0}.forge-radio{--_radio-primary-color:var(--forge-radio-primary-color, var(--forge-theme-tertiary, #3d5afe));--_radio-inactive-color:var(--forge-radio-inactive-color, var(--forge-theme-surface-container-high, #9e9e9e));--_radio-size:var(--forge-radio-size, 20px);--_radio-mark-size:var(--forge-radio-mark-size, 75%);--_radio-state-layer-size:var(--forge-radio-state-layer-size, 40px);--_radio-state-layer-dense-size:var(--forge-radio-state-layer-dense-size, 24px);--_radio-width:var(--forge-radio-width, var(--_radio-size));--_radio-height:var(--forge-radio-height, var(--_radio-size));--_radio-border-width:var(--forge-radio-border-width, var(--forge-border-medium, 2px));--_radio-unchecked-border-color:var(--forge-radio-unchecked-border-color, var(--_radio-inactive-color));--_radio-checked-border-color:var(--forge-radio-checked-border-color, var(--_radio-primary-color));--_radio-background:var(--forge-radio-background, transparent);--_radio-shape:var(--forge-radio-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_radio-mark-width:var(--forge-radio-mark-width, var(--_radio-mark-size));--_radio-mark-height:var(--forge-radio-mark-height, var(--_radio-mark-size));--_radio-mark-color:var(--forge-radio-mark-color, var(--_radio-primary-color));--_radio-gap:var(--forge-radio-gap, 0);--_radio-justify:var(--forge-radio-justify, start);--_radio-align:var(--forge-radio-align, center);--_radio-direction:var(--forge-radio-direction, initial);--_radio-state-layer-width:var(--forge-radio-state-layer-width, var(--_radio-state-layer-size));--_radio-state-layer-height:var(--forge-radio-state-layer-height, var(--_radio-state-layer-size));--_radio-state-layer-unchecked-color:var(--forge-radio-state-layer-unchecked-color, var(--_radio-color));--_radio-state-layer-checked-color:var(--forge-radio-state-layer-checked-color, var(--_radio-primary-color));--_radio-state-layer-shape:var(--forge-radio-state-layer-shape, var(--_radio-shape));--_radio-state-layer-dense-width:var(--forge-radio-state-layer-dense-width, var(--_radio-state-layer-dense-size));--_radio-state-layer-dense-height:var(--forge-radio-state-layer-dense-height, var(--_radio-state-layer-dense-size));--_radio-disabled-opacity:var(--forge-radio-disabled-opacity, 0.38);--_radio-animation-duration:var(--forge-radio-animation-duration, var(--forge-animation-duration-short4, 200ms));--_radio-animation-timing-function:var(--forge-radio-animation-timing-function, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_radio-animation-delay:var(--forge-radio-animation-delay, 0ms)}.forge-radio{position:relative;flex-direction:var(--_radio-direction);align-items:var(--_radio-align);justify-content:var(--_radio-justify);gap:var(--_radio-gap);display:flex}.forge-radio .container{position:relative;align-items:center;justify-content:center;display:flex;flex-shrink:0;border-radius:var(--_radio-shape);inline-size:var(--_radio-state-layer-width);block-size:var(--_radio-state-layer-height);cursor:pointer}.forge-radio .background{position:relative;display:inline block;overflow:hidden;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:border-color;box-sizing:border-box;border-radius:var(--_radio-shape);border-width:var(--_radio-border-width);border-style:solid;border-color:var(--_radio-unchecked-border-color);inline-size:var(--_radio-width);block-size:var(--_radio-height);background:var(--_radio-background)}.forge-radio .background::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:top left;transition-duration:var(--_radio-animation-duration);transition-delay:var(--_radio-animation-delay);transition-timing-function:var(--_radio-animation-timing-function);transition-property:opacity,scale;border-radius:var(--_radio-shape);inline-size:var(--_radio-mark-width);block-size:var(--_radio-mark-height);background:var(--_radio-mark-color);scale:0.5;opacity:0}.forge-radio .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);cursor:default}.forge-radio .label:empty{display:none}:host([checked]) .forge-radio .background{border-color:var(--_radio-checked-border-color)}:host([checked]) .forge-radio .background::after{scale:1;opacity:1}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-checked-color)}:host([dense]) .forge-radio .container{inline-size:var(--_radio-state-layer-dense-width);block-size:var(--_radio-state-layer-dense-height)}:host([disabled]) .forge-radio .container{opacity:var(--_radio-disabled-opacity);cursor:not-allowed}:host([readonly]) .forge-radio .container{cursor:not-allowed}forge-focus-indicator{--forge-focus-indicator-color:var(--_radio-primary-color);--forge-focus-indicator-outward-offset:0px;--forge-focus-indicator-shape:var(--_radio-state-layer-shape)}forge-state-layer{--forge-state-layer-color:var(--_radio-state-layer-unchecked-color)}';
 /**
  * @tag forge-radio
  *
@@ -42,6 +42,7 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
  * @cssproperty --forge-radio-mark-color - The color of the radio button's mark.
  * @cssproperty --forge-radio-gap - The gap between the radio button and its label.
  * @cssproperty --forge-radio-justify - The alignment of the radio button and its label in the inline direction.
+ * @cssproperty --forge-radio-align - The alignment of the radio button and its label in the block direction.
  * @cssproperty --forge-radio-direction - The direction of the radio button and its label.
  * @cssproperty --forge-radio-state-layer-size - The size of the radio button's state layer in the inline and block directions.
  * @cssproperty --forge-radio-state-layer-width - The width of the radio button's state layer.

package/esm/split-view/split-view/split-view-adapter.js

@@ -58,6 +58,7 @@ export class SplitViewAdapter extends BaseAdapter {
         panels
             .slice()
             .reverse()
+            .filter(panel => panel.open)
             .forEach(panel => {
             if (diff <= 0) {
                 return;

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
 import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft4t;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft4t{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:ufuft5a;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft5a{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft5g;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft5g{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:ufuft5z;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft5z{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft67;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft67{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ufuft6a;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ufuft6a{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ufuft70;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft70{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ufuft75;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes ufuft75{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:utgfdhj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes utgfdhj{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:utgfdif;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes utgfdif{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:utgfdiv;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes utgfdiv{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:utgfdiz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes utgfdiz{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:utgfdjk;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes utgfdjk{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:utgfdkb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes utgfdkb{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:utgfdkq;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes utgfdkq{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:utgfdlo;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes utgfdlo{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 /**

package/esm/switch/switch.d.ts

@@ -103,6 +103,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.

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([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}';
 /**
  * @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.

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,