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

package/esm/switch/switch.d.ts

@@ -3,18 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { BaseFormComponent, IBaseFormComponent } from '../core/base/base-component';
+import { BaseNullableFormComponent, IBaseNullableFormComponent } from '../core/base/base-nullable-form-component';
 import { SwitchIconVisibility, SwitchLabelPosition } from './switch-constants';
-export interface ISwitchComponent extends IBaseFormComponent {
+import { ILabelAware } from '../label/label-aware';
+import { internals } from '../constants';
+export interface ISwitchComponent extends IBaseNullableFormComponent, ILabelAware {
     on: boolean;
     /**
      * @deprecated use `on` instead
      */
     selected: boolean;
+    defaultOn: boolean;
     dense: boolean;
     icon: SwitchIconVisibility;
     labelPosition: SwitchLabelPosition;
     toggle(force?: boolean): void;
+    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -36,17 +40,23 @@ declare global {
  *
  * @property {boolean} on - Whether the switch is on the on or off state.
  * @property {boolean} selected - Deprecated. Alias for `on`.
+ * @property {boolean} defaultOn - Whether the switch is on or off by default.
+ * @property {string} value - The value of the switch.
+ * @property {boolean} dense - The density state.
  * @property {boolean} disabled - Controls if the switch is disabled.
  * @property {boolean} required = Controls if the switch is required.
- * @property {boolean} dense - The density state.
+ * @property {boolean} readonly - Controls if the switch is readonly.
  * @property {SwitchIconVisibility} icon - Controls the presence of the off and on icons.
  * @property {SwitchLabelPosition} labelPosition - Whether the label appears before or after the switch.
  *
  * @attribute {string} on - Controls whether the switch is in the on or off state.
- * @attribute {string} selected - Alias for `on`.
+ * @attribute {string} selected - Deprecated. Alias for `on`.
+ * @attribute {string} default-on - Controls whether the switch is in the on or off state by default.
+ * @attribute {string} value - The value of the switch.
+ * @attribute {string} dense - Sets the density state.
  * @attribute {string} disabled - Controls if the switch is disabled.
  * @attribute {string} required - Controls if the switch is required.
- * @attribute {string} dense - Sets the density state.
+ * @attribute {string} readonly - Controls if the switch is readonly.
  * @attribute {string} icon - Controls the presence of the off and on icons.
  * @attribute {string} label-position - Sets whether the label appears before or after the switch.
  *
@@ -98,10 +108,10 @@ declare global {
  * @cssproperty --forge-switch-icon-off-color - The color of the handle icon in the switch's off state.
  * @cssproperty --forge-switch-icon-active-on-color - The color of the handle icon when the switch is active (pressed) in its on state.
  * @cssproperty --forge-switch-icon-active-off-color - The color of the handle icon when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-icon-size - The size of the handle icon.
  * @cssproperty --forge-switch-icon-on-size - The size of the handle icon in the switch's on state.
  * @cssproperty --forge-switch-icon-off-size - The size of the handle icon in the switch's off state.
  * @cssproperty --forge-switch-icon-scale - The scale transformation applied to the handle icons.
- * @cssproperty --forge-switch-icon-active-scale - The scale transformation applied to the handle icons when the switch is active (pressed).
  * @cssproperty --forge-switch-icon-on-scale - The scale transformation applied to the handle icons in the switch's on state.
  * @cssproperty --forge-switch-icon-off-scale - The scale transformation applied to the handle icons in the switch's off state.
  * @cssproperty --forge-switch-icon-active-on-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its on state.
@@ -123,21 +133,16 @@ declare global {
  * @cssproperty --forge-switch-active-animation-timing - The timing function used in active state animations.
  *
  * @csspart switch - Styles the switch container element.
- * @csspart input-container - Styles the wrapper element of the input, track and handle.
- * @csspart input - Styles the input element.
  * @csspart track - Styles the track element.
  * @csspart handle - Styles the handle element.
  * @csspart icon-on - Styles the on icon element.
  * @csspart icon-off - Styles the off icon element.
- * @csspart icon-on-path - Styles the default on icon path.
- * @csspart icon-off-path - Styles the default off icon path.
  * @csspart label - Styles the label element.
- * @csspart state-layer - Styles the state layer element.
- * @csspart focus-indicator - Styles the focus indicator element.
+ * @csspart state-layer - Styles the state layer root element.
+ * @csspart focus-indicator - Styles the focus indicator root element.
  */
-export declare class SwitchComponent extends BaseFormComponent implements ISwitchComponent {
+export declare class SwitchComponent extends BaseNullableFormComponent implements ISwitchComponent {
     static get observedAttributes(): string[];
-    static formAssociated: boolean;
     get form(): HTMLFormElement | null;
     get labels(): NodeList;
     get name(): string;
@@ -145,8 +150,7 @@ export declare class SwitchComponent extends BaseFormComponent implements ISwitc
     get validity(): ValidityState;
     get validationMessage(): string;
     get willValidate(): boolean;
-    private _hasCustomValidityError;
-    readonly internals: ElementInternals;
+    readonly [internals]: ElementInternals;
     private readonly _foundation;
     constructor();
     connectedCallback(): void;
@@ -158,11 +162,19 @@ export declare class SwitchComponent extends BaseFormComponent implements ISwitc
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;
     formDisabledCallback(isDisabled: boolean): void;
+    labelClickedCallback(): void;
+    labelChangedCallback(value: string | null): void;
     on: boolean;
+    /**
+     * @deprecated use `on` instead
+     */
     selected: boolean;
+    defaultOn: boolean;
+    value: string;
     dense: boolean;
     disabled: boolean;
     required: boolean;
+    readonly: boolean;
     icon: SwitchIconVisibility;
     labelPosition: SwitchLabelPosition;
     /**

package/esm/switch/switch.js

@@ -5,14 +5,15 @@
  */
 import { __decorate } from "tslib";
 import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, isDefined, isString, toggleAttribute } from '@tylertech/forge-core';
-import { BaseFormComponent } from '../core/base/base-component';
+import { BaseNullableFormComponent } from '../core/base/base-nullable-form-component';
 import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
 import { StateLayerComponent } from '../state-layer/state-layer';
 import { SwitchAdapter } from './switch-adapter';
 import { SWITCH_CONSTANTS } from './switch-constants';
 import { SwitchFoundation } from './switch-foundation';
-const template = '<template><div class=\"forge-switch\" part=\"switch\"><div class=\"container\" part=\"input-container\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\" part=\"input\"><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\" part=\"icon-off-path\"/></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\" part=\"icon-on-path\"/></svg></slot></div><forge-state-layer target=\"input\" part=\"state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"input\" part=\"focus-indicator\"></forge-focus-indicator></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
-const styles = ':host{display:inline-block;cursor:pointer}:host([hidden]){display:none}:host([disabled]){opacity:var(--_disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch{pointer-events:none}:host([disabled]) .handle::before{-webkit-box-shadow:none;box-shadow:none}.forge-switch{--_handle-size:var(--forge-switch-handle-size, 20px);--_handle-scale:var(--forge-switch-handle-scale, 1);--_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));--_track-border-width:var(--forge-switch-track-border-width, 0);--_track-border-color:var(--forge-switch-track-border-color, transparent);--_icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_icon-scale:var(--forge-switch-icon-scale, 1);--_state-layer-size:var(--forge-switch-state-layer-size, 40px);--_state-layer-dense-size:var(--forge-switch-handle-dense-size, 28px);--_handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-surface-container-high, #9e9e9e));--_handle-width:var(--forge-switch-handle-width, var(--_handle-size));--_handle-height:var(--forge-switch-handle-height, var(--_handle-size));--_handle-on-scale:var(--forge-switch-handle-on-scale, var(--_handle-scale));--_handle-off-scale:var(--forge-switch-handle-off-scale, var(--_handle-scale));--_handle-shape:var(--forge-switch-handle-shape, var(--forge-shape-round, 50%));--_handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_handle-elevation));--_handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_handle-elevation));--_track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_track-width:var(--forge-switch-track-width, 36px);--_track-height:var(--forge-switch-track-height, 14px);--_track-shape:var(--forge-switch-track-shape, var(--forge-shape-full, 9999px));--_track-on-border-width:var(--forge-switch-track-on-border-width, var(--_track-border-width));--_track-off-border-width:var(--forge-switch-track-off-border-width, var(--_track-border-width));--_track-on-border-color:var(--forge-switch-track-on-border-color, var(--_track-border-color));--_track-off-border-color:var(--forge-switch-track-off-border-color, var(--_track-border-color));--_icon-on-color:var(--forge-switch-icon-on-color, var(--_icon-color));--_icon-off-color:var(--forge-switch-icon-off-color, var(--_icon-color));--_icon-on-size:var(--forge-switch-icon-on-size, var(--_handle-size));--_icon-off-size:var(--forge-switch-icon-off-size, var(--_handle-size));--_icon-on-scale:var(--forge-switch-icon-on-scale, var(--_icon-scale));--_icon-off-scale:var(--forge-switch-icon-off-scale, var(--_icon-scale));--_gap:var(--forge-switch-gap, 0);--_justify:var(--forge-switch-justify, space-between);--_direction:var(--forge-switch-direction, initial);--_state-layer-width:var(--forge-switch-state-layer-width, var(--_state-layer-size));--_state-layer-height:var(--forge-switch-state-layer-height, var(--_state-layer-size));--_state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_handle-on-color));--_state-layer-off-color:var(--forge-state-layer-state-layer-off-color, var(--_color));--_state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_state-layer-dense-size));--_state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_state-layer-dense-size));--_disabled-opacity:var(--forge-switch-disabled-opacity, 0.38);--_handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_handle-on-color));--_handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_handle-off-color));--_handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_handle-active-scale));--_handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_handle-active-scale));--_handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_handle-elevation));--_handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_handle-active-elevation));--_handle-active-off-elevation:var(--forge-switch-handle-active-on-elevation, var(--_handle-active-elevation));--_track-active-on-color:var(--forge-switch-track-active-on-color, var(--_track-on-color));--_track-active-off-color:var(--forge-switch-track-active-off-color, var(--_track-off-color));--_track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_track-on-border-width));--_track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_track-off-border-width));--_track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_track-on-border-color));--_track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_track-off-border-color));--_icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_icon-on-color));--_icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_icon-off-color));--_icon-active-scale: ;--_icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_icon-on-scale));--_icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_icon-off-scale));--_animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)));position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_justify);justify-content:var(--_justify);gap:var(--_gap);display:-webkit-box;display:flex;cursor:unset;--_current-state-layer-width:var(--_state-layer-width);--_current-state-layer-height:var(--_state-layer-height)}.forge-switch .container{position:relative;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;block-size:max(var(--_handle-height),var(--_track-height),var(--_current-state-layer-height))}.forge-switch .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .input:checked~.track{border-width:var(--_track-on-border-width);border-color:var(--_track-on-border-color);background-color:var(--_track-on-color)}.forge-switch .input:checked~.handle{translate:calc(var(--_track-width) - calc(var(--_track-height)/ 2) * 2)}.forge-switch .input:checked~.handle::before{scale:var(--_handle-on-scale);-webkit-box-shadow:var(--_handle-on-elevation);box-shadow:var(--_handle-on-elevation);background-color:var(--_handle-on-color)}.forge-switch .input:checked~.handle .icon__on{opacity:1;scale:var(--_icon-on-scale)}.forge-switch .input:checked~.handle .icon__off{opacity:0;scale:0.4}.forge-switch .input:checked~.handle forge-state-layer{--forge-state-layer-color:var(--_state-layer-on-color)}.forge-switch .input:active~.track{border-width:var(--_track-active-off-border-width);border-color:var(--_track-active-off-border-color);background-color:var(--_track-active-off-color)}.forge-switch .input:active~.handle::before{scale:var(--_handle-active-off-scale);-webkit-box-shadow:var(--_handle-active-off-elevation);box-shadow:var(--_handle-active-off-elevation);background-color:var(--_handle-active-off-color)}.forge-switch .input:active~.handle .icon{scale:var(--_icon-active-off-scale);color:var(--_icon-active-off-color);fill:var(--_icon-active-off-color)}.forge-switch .input:active:checked~.track{border-width:var(--_track-active-on-border-width);border-color:var(--_track-active-on-border-color);background-color:var(--_track-active-on-color)}.forge-switch .input:active:checked~.handle::before{scale:var(--_handle-active-on-scale);-webkit-box-shadow:var(--_handle-active-on-elevation);box-shadow:var(--_handle-active-on-elevation);background-color:var(--_handle-active-on-color)}.forge-switch .input:active:checked~.handle .icon{scale:var(--_icon-active-on-scale);color:var(--_icon-active-on-color);fill:var(--_icon-active-on-color)}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_animation-duration);transition-duration:var(--_animation-duration);-webkit-transition-timing-function:var(--_animation-timing);transition-timing-function:var(--_animation-timing);-webkit-box-sizing:border-box;box-sizing:border-box;margin-inline:calc(max(var(--_handle-width),var(--_current-state-layer-width))/ 2 - calc(var(--_track-height)/ 2));border-width:var(--_track-off-border-width);border-color:var(--_track-off-border-color);border-style:solid;border-radius:var(--_track-shape);inline-size:var(--_track-width);block-size:var(--_track-height);background-color:var(--_track-off-color)}.forge-switch .handle{position:absolute;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_animation-duration);transition-duration:var(--_animation-duration);-webkit-transition-timing-function:var(--_animation-timing);transition-timing-function:var(--_animation-timing);border-radius:var(--_handle-shape);inline-size:var(--_current-state-layer-width);block-size:var(--_current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_handle-off-scale);-webkit-transition:background-color var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing),-webkit-box-shadow var(--_animation-duration) var(--_animation-timing);transition:background-color var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing),-webkit-box-shadow var(--_animation-duration) var(--_animation-timing);transition:background-color var(--_animation-duration) var(--_animation-timing),box-shadow var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing);transition:background-color var(--_animation-duration) var(--_animation-timing),box-shadow var(--_animation-duration) var(--_animation-timing),scale var(--_animation-duration) var(--_active-animation-timing),-webkit-box-shadow var(--_animation-duration) var(--_animation-timing);-webkit-box-shadow:var(--_handle-off-elevation);box-shadow:var(--_handle-off-elevation);border-radius:var(--_handle-shape);inline-size:var(--_handle-width);block-size:var(--_handle-height);background-color:var(--_handle-off-color)}.forge-switch .icon{--forge-icon-font-size:var(--_icon-off-size);position:absolute;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_animation-duration);transition-duration:var(--_animation-duration);-webkit-transition-timing-function:var(--_animation-timing);transition-timing-function:var(--_animation-timing);inline-size:var(--_icon-off-size);block-size:var(--_icon-off-size);color:var(--_icon-off-color);fill:var(--_icon-off-color);font-size:var(--_icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size:var(--_icon-on-size);inline-size:var(--_icon-on-size);block-size:var(--_icon-on-size);color:var(--_icon-on-color);fill:var(--_icon-on-color);font-size:var(--_icon-on-size);opacity:0;scale:0.4}.forge-switch .icon__off{opacity:1;scale:var(--_icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}:host([dense]) .forge-switch{--_current-state-layer-width:var(--_state-layer-dense-width);--_current-state-layer-height:var(--_state-layer-dense-height)}@media (prefers-reduced-motion){.switch{--_animation-duration:0s}}forge-state-layer{--forge-state-layer-color:var(--_state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape:var(--_track-shape);--forge-focus-indicator-outward-offset:0px}';
+import { internals } from '../constants';
+const template = '<template><div class=\"forge-switch\" part=\"switch\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\" role=\"switch\"></slot><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=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><forge-focus-indicator target=\"container\" exportparts=\"indicator:focus-indicator\"></forge-focus-indicator></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
+const styles = ':host{display:inline-block}:host([hidden]){display:none}.forge-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-handle-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, var(--forge-shape-round, 50%));--_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, var(--forge-shape-full, 9999px));--_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, space-between);--_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-state-layer-state-layer-off-color, var(--_state-layer-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-on-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{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_switch-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_switch-justify);justify-content:var(--_switch-justify);gap:var(--_switch-gap);display:-webkit-box;display:flex;--_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;-webkit-box-align:center;align-items:center;display:-webkit-box;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;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{-webkit-transition-property:background-color,border-color,border-width;transition-property:background-color,border-color,border-width;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);transition-timing-function:var(--_switch-animation-timing);-webkit-box-sizing:border-box;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;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:flex;-webkit-transition-property:translate;transition-property:translate;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);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);-webkit-transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);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);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),-webkit-box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing);-webkit-box-shadow:var(--_switch-handle-off-elevation);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;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:opacity,scale;transition-property:opacity,scale;-webkit-transition-duration:var(--_switch-animation-duration);transition-duration:var(--_switch-animation-duration);-webkit-transition-timing-function:var(--_switch-animation-timing);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-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([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);-webkit-box-shadow:var(--_switch-handle-on-elevation);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);-webkit-box-shadow:var(--_switch-handle-active-off-elevation);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);-webkit-box-shadow:var(--_switch-handle-active-on-elevation);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{opacity:var(--_switch-disabled-opacity)}:host([disabled]) .forge-switch .container{cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{-webkit-box-shadow:none;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
  *
@@ -25,17 +26,23 @@ const styles = ':host{display:inline-block;cursor:pointer}:host([hidden]){displa
  *
  * @property {boolean} on - Whether the switch is on the on or off state.
  * @property {boolean} selected - Deprecated. Alias for `on`.
+ * @property {boolean} defaultOn - Whether the switch is on or off by default.
+ * @property {string} value - The value of the switch.
+ * @property {boolean} dense - The density state.
  * @property {boolean} disabled - Controls if the switch is disabled.
  * @property {boolean} required = Controls if the switch is required.
- * @property {boolean} dense - The density state.
+ * @property {boolean} readonly - Controls if the switch is readonly.
  * @property {SwitchIconVisibility} icon - Controls the presence of the off and on icons.
  * @property {SwitchLabelPosition} labelPosition - Whether the label appears before or after the switch.
  *
  * @attribute {string} on - Controls whether the switch is in the on or off state.
- * @attribute {string} selected - Alias for `on`.
+ * @attribute {string} selected - Deprecated. Alias for `on`.
+ * @attribute {string} default-on - Controls whether the switch is in the on or off state by default.
+ * @attribute {string} value - The value of the switch.
+ * @attribute {string} dense - Sets the density state.
  * @attribute {string} disabled - Controls if the switch is disabled.
  * @attribute {string} required - Controls if the switch is required.
- * @attribute {string} dense - Sets the density state.
+ * @attribute {string} readonly - Controls if the switch is readonly.
  * @attribute {string} icon - Controls the presence of the off and on icons.
  * @attribute {string} label-position - Sets whether the label appears before or after the switch.
  *
@@ -87,10 +94,10 @@ const styles = ':host{display:inline-block;cursor:pointer}:host([hidden]){displa
  * @cssproperty --forge-switch-icon-off-color - The color of the handle icon in the switch's off state.
  * @cssproperty --forge-switch-icon-active-on-color - The color of the handle icon when the switch is active (pressed) in its on state.
  * @cssproperty --forge-switch-icon-active-off-color - The color of the handle icon when the switch is active (pressed) in its off state.
+ * @cssproperty --forge-switch-icon-size - The size of the handle icon.
  * @cssproperty --forge-switch-icon-on-size - The size of the handle icon in the switch's on state.
  * @cssproperty --forge-switch-icon-off-size - The size of the handle icon in the switch's off state.
  * @cssproperty --forge-switch-icon-scale - The scale transformation applied to the handle icons.
- * @cssproperty --forge-switch-icon-active-scale - The scale transformation applied to the handle icons when the switch is active (pressed).
  * @cssproperty --forge-switch-icon-on-scale - The scale transformation applied to the handle icons in the switch's on state.
  * @cssproperty --forge-switch-icon-off-scale - The scale transformation applied to the handle icons in the switch's off state.
  * @cssproperty --forge-switch-icon-active-on-scale - The scale transformation applied to the handle icons when the switch is active (pressed) in its on state.
@@ -112,35 +119,34 @@ const styles = ':host{display:inline-block;cursor:pointer}:host([hidden]){displa
  * @cssproperty --forge-switch-active-animation-timing - The timing function used in active state animations.
  *
  * @csspart switch - Styles the switch container element.
- * @csspart input-container - Styles the wrapper element of the input, track and handle.
- * @csspart input - Styles the input element.
  * @csspart track - Styles the track element.
  * @csspart handle - Styles the handle element.
  * @csspart icon-on - Styles the on icon element.
  * @csspart icon-off - Styles the off icon element.
- * @csspart icon-on-path - Styles the default on icon path.
- * @csspart icon-off-path - Styles the default off icon path.
  * @csspart label - Styles the label element.
- * @csspart state-layer - Styles the state layer element.
- * @csspart focus-indicator - Styles the focus indicator element.
+ * @csspart state-layer - Styles the state layer root element.
+ * @csspart focus-indicator - Styles the focus indicator root element.
  */
-let SwitchComponent = class SwitchComponent extends BaseFormComponent {
+let SwitchComponent = class SwitchComponent extends BaseNullableFormComponent {
     static get observedAttributes() {
         return [
             SWITCH_CONSTANTS.attributes.ON,
             SWITCH_CONSTANTS.attributes.SELECTED,
+            SWITCH_CONSTANTS.attributes.DEFAULT_ON,
+            SWITCH_CONSTANTS.attributes.VALUE,
+            SWITCH_CONSTANTS.attributes.DENSE,
             SWITCH_CONSTANTS.attributes.DISABLED,
             SWITCH_CONSTANTS.attributes.REQUIRED,
-            SWITCH_CONSTANTS.attributes.DENSE,
+            SWITCH_CONSTANTS.attributes.READONLY,
             SWITCH_CONSTANTS.attributes.ICON,
             SWITCH_CONSTANTS.attributes.LABEL_POSITION
         ];
     }
     get form() {
-        return this.internals.form;
+        return this[internals].form;
     }
     get labels() {
-        return this.internals.labels;
+        return this[internals].labels;
     }
     get name() {
         var _a;
@@ -151,22 +157,19 @@ let SwitchComponent = class SwitchComponent extends BaseFormComponent {
     }
     get validity() {
         this._foundation.syncValidity(this._hasCustomValidityError);
-        return this.internals.validity;
+        return this[internals].validity;
     }
     get validationMessage() {
         this._foundation.syncValidity(this._hasCustomValidityError);
-        return this.internals.validationMessage;
+        return this[internals].validationMessage;
     }
     get willValidate() {
-        return this.internals.willValidate;
+        return this[internals].willValidate;
     }
     constructor() {
         super();
-        // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
-        // Replace with this.internals.validity.customError when resolved.
-        this._hasCustomValidityError = false;
         attachShadowTemplate(this, template, styles, true);
-        this.internals = this.attachInternals();
+        this[internals] = this.attachInternals();
         this._foundation = new SwitchFoundation(new SwitchAdapter(this));
     }
     connectedCallback() {
@@ -175,10 +178,17 @@ let SwitchComponent = class SwitchComponent extends BaseFormComponent {
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
             case SWITCH_CONSTANTS.attributes.ON:
+            case SWITCH_CONSTANTS.attributes.SELECTED:
                 this.on = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.SELECTED:
-                this.selected = coerceBoolean(newValue);
+            case SWITCH_CONSTANTS.attributes.DEFAULT_ON:
+                this.defaultOn = coerceBoolean(newValue);
+                break;
+            case SWITCH_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
+            case SWITCH_CONSTANTS.attributes.DENSE:
+                this.dense = coerceBoolean(newValue);
                 break;
             case SWITCH_CONSTANTS.attributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
@@ -186,8 +196,8 @@ let SwitchComponent = class SwitchComponent extends BaseFormComponent {
             case SWITCH_CONSTANTS.attributes.REQUIRED:
                 this.required = coerceBoolean(newValue);
                 break;
-            case SWITCH_CONSTANTS.attributes.DENSE:
-                this.dense = coerceBoolean(newValue);
+            case SWITCH_CONSTANTS.attributes.READONLY:
+                this.readonly = coerceBoolean(newValue);
                 break;
             case SWITCH_CONSTANTS.attributes.ICON:
                 this.icon = newValue;
@@ -198,12 +208,17 @@ let SwitchComponent = class SwitchComponent extends BaseFormComponent {
         }
     }
     setFormValue(value, state) {
-        this.internals.setFormValue(value, state);
+        this[internals].setFormValue(value, state);
+        if (state) {
+            const stateValue = isString(state) ? state : state[this.name];
+            this.on = stateValue === SWITCH_CONSTANTS.state.ON;
+            return;
+        }
         if (isString(value)) {
-            this.on = coerceBoolean(value);
+            this.on = !!value;
         }
         else if (value === null || value === void 0 ? void 0 : value[this.name]) {
-            this.on = coerceBoolean(value[this.name]);
+            this.on = !!value[this.name];
         }
         else {
             this.on = false;
@@ -211,25 +226,31 @@ let SwitchComponent = class SwitchComponent extends BaseFormComponent {
     }
     checkValidity() {
         this._foundation.syncValidity(this._hasCustomValidityError);
-        return this.internals.checkValidity();
+        return this[internals].checkValidity();
     }
     reportValidity() {
         this._foundation.syncValidity(this._hasCustomValidityError);
-        return this.internals.reportValidity();
+        return this[internals].reportValidity();
     }
     setCustomValidity(error) {
         this._hasCustomValidityError = !!error;
         this._foundation.setValidity({ customError: !!error }, error);
     }
     formResetCallback() {
-        this.on = false;
+        this.on = this.defaultOn;
     }
     formStateRestoreCallback(state) {
-        this.on = coerceBoolean(state);
+        this.on = state === SWITCH_CONSTANTS.state.ON;
     }
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;
     }
+    labelClickedCallback() {
+        this._foundation.proxyClick();
+    }
+    labelChangedCallback(value) {
+        this._foundation.proxyLabel(value);
+    }
     /**
      * Toggles the switch on or off.
      * @param force Whether to set the switch on or off.
@@ -243,13 +264,18 @@ let SwitchComponent = class SwitchComponent extends BaseFormComponent {
         }
     }
 };
-SwitchComponent.formAssociated = true;
 __decorate([
     FoundationProperty()
 ], SwitchComponent.prototype, "on", void 0);
 __decorate([
     FoundationProperty({ name: 'on' })
 ], SwitchComponent.prototype, "selected", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "defaultOn", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "value", void 0);
 __decorate([
     FoundationProperty()
 ], SwitchComponent.prototype, "dense", void 0);
@@ -259,6 +285,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], SwitchComponent.prototype, "required", void 0);
+__decorate([
+    FoundationProperty()
+], SwitchComponent.prototype, "readonly", void 0);
 __decorate([
     FoundationProperty()
 ], SwitchComponent.prototype, "icon", void 0);

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

@@ -76,6 +76,7 @@ export declare class TableFoundation implements ITableFoundation {
     private _rowDoubleClickListener;
     private _selectRowListener;
     private _selectAllListener;
+    private _sortableHeadCellKeydownListener;
     private _headRowMouseDownListener;
     private _headRowContextMenuListener;
     private _documentMouseMoveListener;
@@ -259,6 +260,7 @@ export declare class TableFoundation implements ITableFoundation {
     private _onHeadRowMouseDown;
     private _onMouseMove;
     private _onMouseUp;
+    private _onSortableHeadCellKeydown;
     /**
      * Called when a click event is triggered on the table header row.
      * We use this to capture all click events on the row, and determine which

package/esm/table/table-foundation.js

@@ -42,6 +42,7 @@ export class TableFoundation {
         this._rowDoubleClickListener = evt => this._onRowDoubleClick(evt);
         this._selectRowListener = evt => this._onRowSelected(evt);
         this._selectAllListener = evt => this._onSelectAll(evt);
+        this._sortableHeadCellKeydownListener = (evt) => this._onSortableHeadCellKeydown(evt);
         this._headRowMouseDownListener = evt => this._onHeadRowMouseDown(evt);
         this._headRowContextMenuListener = evt => this._onHeadRowContextMenu(evt);
         this._documentMouseMoveListener = evt => this._onMouseMove(evt);
@@ -86,13 +87,11 @@ export class TableFoundation {
         this._renderBody();
     }
     get data() {
-        return JSON.parse(JSON.stringify(this._data));
+        return this._data.map(o => (Object.assign({}, o))); // Shallow clone
     }
     /** The column configuration options. */
     set columnConfigurations(value) {
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         this._columnConfigurations = value.map(cc => (Object.assign({}, cc)));
         // Update hidden column manager
         this._hiddenColumnManager.clear();
@@ -106,8 +105,6 @@ export class TableFoundation {
     }
     get columnConfigurations() {
         // Intentional shallow copy of member properties. These member objects have properties that are references to functions.
-        //   The typical JSON.parse(JSON.stringify(object)) will not work here. If this becomes an issue we'll add a deepClone
-        //   function to the core library.
         return this._columnConfigurations.map(cc => (Object.assign({}, cc)));
     }
     /** Gets the visible column configurations. */
@@ -124,6 +121,7 @@ export class TableFoundation {
             doubleClickListener: this._allowRowClick ? this._rowDoubleClickListener : null,
             selectListener: this._select ? this._selectRowListener : null,
             selectAllListener: this._multiselect ? this._selectAllListener : null,
+            sortableHeadCellKeydownListener: this._sortableHeadCellKeydownListener,
             headRowMouseDownListener: this._headRowMouseDownListener,
             headRowContextMenuListener: this._headRowContextMenuListener,
             filterListener: this._filter ? this._filterListener : null,
@@ -699,7 +697,11 @@ export class TableFoundation {
         this._adapter.emitHostEvent(TABLE_CONSTANTS.events.SELECT_ALL, data, true, false);
     }
     _onHeadRowContextMenu(evt) {
-        evt.preventDefault();
+        // We only handle this event on MacOS due to the `ctrl+click` combination triggering the contextmenu event...
+        // So we only detect that scenario here to still allow for the default context menu on Mac when right-clicking
+        if (evt.ctrlKey) {
+            evt.preventDefault();
+        }
     }
     _onHeadRowMouseDown(evt) {
         if (evt.button !== 0) {
@@ -764,6 +766,15 @@ export class TableFoundation {
         }
         this._headCellMouseDownIndex = undefined;
     }
+    _onSortableHeadCellKeydown(evt) {
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            const composedPath = getEventPath(evt);
+            const rowElement = composedPath.find(el => el.tagName === 'TR');
+            const thElement = composedPath.find(el => el.tagName === 'TH');
+            const cellIndex = Array.from(rowElement.cells).findIndex(c => c === thElement);
+            this._onSort(cellIndex);
+        }
+    }
     /**
      * Called when a click event is triggered on the table header row.
      * We use this to capture all click events on the row, and determine which

package/esm/table/table-utils.js

@@ -141,7 +141,15 @@ export class TableUtils {
             th.scope = 'col';
             addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_HEAD_CELL], th);
             // We wrap the header text in a div for ease of alignment
-            const cellContainer = document.createElement('div');
+            let cellContainer;
+            if (columnConfig.sortable) {
+                cellContainer = document.createElement('button');
+                cellContainer.type = 'button';
+                cellContainer.addEventListener('keydown', tableConfiguration.sortableHeadCellKeydownListener);
+            }
+            else {
+                cellContainer = document.createElement('div');
+            }
             cellContainer.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_CONTAINER);
             // Add tooltip for multisort
             if (tableConfiguration.multiColumnSort) {
@@ -236,6 +244,7 @@ export class TableUtils {
      */
     static setSortDirection(tableElement, columnIndex, sortDirection) {
         const cell = TableUtils._getHeaderCellByIndex(tableElement, columnIndex);
+        tableElement.querySelectorAll('th[aria-sort]').forEach(th => th.removeAttribute('aria-sort'));
         TableUtils._setColumnSortDirection(cell, sortDirection);
     }
     /**
@@ -251,9 +260,11 @@ export class TableUtils {
             thElement.classList.remove(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_DESCENDING);
         }
         if (!sortDirection || sortDirection === SortDirection.Descending) {
+            thElement.setAttribute('aria-sort', 'descending');
             thElement.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_DESCENDING);
         }
         else {
+            thElement.setAttribute('aria-sort', 'ascending');
             thElement.classList.add(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_ASCENDING);
         }
     }
@@ -885,6 +896,7 @@ export class TableUtils {
      */
     static removeColumnSort(tableElement, columnIndex) {
         const cell = TableUtils._getHeaderCellByIndex(tableElement, columnIndex);
+        cell.removeAttribute('aria-sort');
         // Remove any existing sort direction classes from the existing th element
         if (cell.classList.contains(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_ASCENDING)) {
             cell.classList.remove(TABLE_CONSTANTS.classes.TABLE_HEAD_CELL_SORTED_ASCENDING);

package/esm/table/types.d.ts

@@ -38,6 +38,7 @@ export interface ITableConfiguration {
     doubleClickListener: ((evt: Event) => void) | null;
     selectListener: ((evt: Event) => void) | null;
     selectAllListener: ((evt: Event) => void) | null;
+    sortableHeadCellKeydownListener: EventListener;
     headRowMouseDownListener: (evt: Event) => void;
     headRowContextMenuListener: (evt: Event) => void;
     filterListener: ((value: any, columnIndex: number) => void) | null;

package/esm/tabs/tab/tab.js

@@ -11,8 +11,8 @@ import { TAB_CONSTANTS } from './tab-constants';
 import { BaseComponent } from '../../core/base/base-component';
 import { FocusIndicatorComponent } from '../../focus-indicator/focus-indicator';
 import { StateLayerComponent } from '../../state-layer/state-layer';
-const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer exportparts=\"surface:state-layer__surface\" target=\":host\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator:focus-indicator__indicator\" target=\":host\" inward></forge-focus-indicator></div></template>';
-const styles = ':host{display:-webkit-inline-box;display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}:host(:focus) .forge-tab{color:var(--_focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_focus-icon-color)}:host(:active) .forge-tab{color:var(--_pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_pressed-icon-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-tab{opacity:var(--_disabled-opacity);pointer-events:none}:host([selected]) .forge-tab{color:var(--_active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]:not([vertical])) forge-focus-indicator{--forge-focus-indicator-offset-block:0 calc(var(--_active-indicator-height) + 1px)}:host([selected]:focus) .forge-tab{color:var(--_active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_active-pressed-icon-color)}:host([stacked]) .forge-tab{--_height:var(--_stacked-height)}:host([stacked]) .forge-tab .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([secondary]) .forge-tab{--_active-indicator-height:var(--forge-tab-indicator-height, 2px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 0)}:host([secondary]) .content{width:100%}:host([secondary]) .indicator{min-width:100%}:host([vertical]) .forge-tab{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_active-indicator-height);inset:0 0 0 auto}:host([vertical]) forge-focus-indicator{--forge-focus-indicator-offset-inline:0 calc(var(--_active-indicator-height) + 1px)}:host([vertical][secondary]) .content{min-height:100%}:host([vertical]:not([secondary])) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 0 0 3px)}:host([inverted]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 0 3px 3px)}:host([inverted]) .indicator{inset:0 0 auto;-webkit-transform-origin:top left;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_active-indicator-shape:var(--forge-tab-indicator-shape, 0 3px 3px 0)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}.forge-tab{--_active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_height:var(--forge-tab-height, 48px);--_stacked-height:var(--forge-tab-stacked-height, 64px);--_disabled-opacity:var(--forge-tab-disabled-opacity, 0.38);--_active-indicator-color:var(--forge-tab-indicator-color, var(--_active-color));--_active-indicator-height:var(--forge-tab-indicator-height, 3px);--_active-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_container-color:var(--forge-tab-container-color, transparent);--_container-height:var(--forge-tab-container-height, var(--_height));--_container-shape:var(--forge-tab-container-shape, 0);--_content-height:var(--forge-tab-content-height, var(--_height));--_content-padding:var(--forge-tab-content-padding, var(--forge-spacing-025, 4px));--_active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_active-color));--_active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_active-color));--_active-icon-color:var(--forge-tab-active-icon-color, var(--_active-color));--_active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_active-color));--_icon-size:var(--forge-tab-icon-size, 24px);--_focus-icon-color:var(--forge-tab-focus-icon-color, var(--_inactive-color));--_hover-icon-color:var(--forge-tab-hover-icon-color, var(--_inactive-color));--_icon-color:var(--forge-tab-icon-color, var(--_inactive-color));--_pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_inactive-color));--_active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_active-color));--_active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_active-color));--_active-label-text-color:var(--forge-tab-active-label-text-color, var(--_active-color));--_active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_active-color));--_focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_inactive-color));--_hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_inactive-color));--_label-text-color:var(--forge-tab-label-text-color, var(--_inactive-color));--_pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_inactive-color));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-line-height-scale, 2.25)));letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;background-color:var(--_container-color);color:var(--_label-text-color);min-height:var(--_container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:-webkit-inline-box;display:inline-flex;position:relative;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.forge-tab:hover{color:var(--_hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_hover-icon-color)}.forge-tab .content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;white-space:nowrap;-webkit-transition:150ms color linear;transition:150ms color linear;max-height:calc(var(--_content-height) + 2 * var(--_content-padding));min-height:var(--_content-height);padding:var(--_content-padding) calc(2 * var(--_content-padding));gap:var(--_content-padding)}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:-1;-webkit-transform-origin:bottom left;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0;opacity:0}::slotted(*),host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_inactive-color)}';
+const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator exportparts=\"indicator:focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></template>';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}.forge-tab{--_tab-active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_tab-inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.54)));--_tab-height:var(--forge-tab-height, 48px);--_tab-stacked-height:var(--forge-tab-stacked-height, 64px);--_tab-disabled-opacity:var(--forge-tab-disabled-opacity, 0.38);--_tab-indicator-color:var(--forge-tab-indicator-color, var(--_tab-active-color));--_tab-indicator-height:var(--forge-tab-indicator-height, 3px);--_tab-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_tab-vertical-indicator-shape:var(--forge-tab-indicator-shape, 3px 0 0 3px);--_tab-secondary-indicator-height:var(--forge-tab-indicator-height, 2px);--_tab-secondary-indicator-shape:var(--forge-tab-indicator-shape, 0);--_tab-inverted-indicator-shape:var(--forge-tab-indicator-shape, 0 0 3px 3px);--_tab-vertical-inverted-indicator-shape:var(--forge-tab-indicator-shape, 0 3px 3px 0);--_tab-container-color:var(--forge-tab-container-color, transparent);--_tab-container-height:var(--forge-tab-container-height, var(--_tab-height));--_tab-container-shape:var(--forge-tab-container-shape, 0);--_tab-content-height:var(--forge-tab-content-height, var(--_tab-height));--_tab-content-padding:var(--forge-tab-content-padding, var(--forge-spacing-xxsmall, 4px));--_tab-active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_tab-active-color));--_tab-active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_tab-active-color));--_tab-active-icon-color:var(--forge-tab-active-icon-color, var(--_tab-active-color));--_tab-active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_tab-active-color));--_tab-icon-size:var(--forge-tab-icon-size, 24px);--_tab-focus-icon-color:var(--forge-tab-focus-icon-color, var(--_tab-inactive-color));--_tab-hover-icon-color:var(--forge-tab-hover-icon-color, var(--_tab-inactive-color));--_tab-icon-color:var(--forge-tab-icon-color, var(--_tab-inactive-color));--_tab-pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_tab-inactive-color));--_tab-active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_tab-active-color));--_tab-active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_tab-active-color));--_tab-active-label-text-color:var(--forge-tab-active-label-text-color, var(--_tab-active-color));--_tab-active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_tab-active-color));--_tab-focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_tab-inactive-color));--_tab-hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_tab-inactive-color));--_tab-label-text-color:var(--forge-tab-label-text-color, var(--_tab-inactive-color));--_tab-pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_tab-inactive-color))}.forge-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;background-color:var(--_tab-container-color);color:var(--_tab-label-text-color);min-height:var(--_tab-container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:-webkit-inline-box;display:inline-flex;position:relative;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;fill:currentColor;color:var(--_tab-icon-color);font-size:var(--_tab-icon-size);width:var(--_tab-icon-size);height:var(--_tab-icon-size)}.forge-tab:hover{color:var(--_tab-hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-hover-icon-color)}.forge-tab .content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;white-space:nowrap;-webkit-transition:150ms color linear;transition:150ms color linear;max-height:calc(var(--_tab-content-height) + 2 * var(--_tab-content-padding));min-height:var(--_tab-content-height);padding:var(--_tab-content-padding) calc(2 * var(--_tab-content-padding));gap:var(--_tab-content-padding)}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:-1;-webkit-transform-origin:bottom left;transform-origin:bottom left;background:var(--_tab-indicator-color);border-radius:var(--_tab-indicator-shape);height:var(--_tab-indicator-height);inset:auto 0 0;opacity:0}::slotted(*),:host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_tab-active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_tab-inactive-color)}:host(:focus) .forge-tab{color:var(--_tab-focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-focus-icon-color)}:host(:active) .forge-tab{color:var(--_tab-pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-pressed-icon-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-tab{opacity:var(--_tab-disabled-opacity);pointer-events:none}:host([selected]) .forge-tab{color:var(--_tab-active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_tab-active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_tab-active-color)}:host([selected]:not([vertical])) forge-focus-indicator{--forge-focus-indicator-offset-block:0 calc(var(--_tab-indicator-height) + 1px)}:host([selected]:focus) .forge-tab{color:var(--_tab-active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_tab-active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-pressed-icon-color)}:host([stacked]) .forge-tab{--_tab-height:var(--_tab-stacked-height)}:host([stacked]) .forge-tab .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([secondary]) .forge-tab{--_tab-indicator-height:var(--_tab-secondary-indicator-height);--_tab-indicator-shape:var(--_tab-secondary-indicator-shape)}:host([secondary]) .content{width:100%}:host([secondary]) .indicator{min-width:100%}:host([vertical]) .forge-tab{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_tab-indicator-height);inset:0 0 0 auto}:host([vertical]) forge-focus-indicator{--forge-focus-indicator-offset-inline:0 calc(var(--_tab-indicator-height) + 1px)}:host([vertical][secondary]) .content{min-height:100%}:host([vertical]:not([secondary])) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-indicator-shape)}:host([inverted]) .forge-tab{--_tab-indicator-shape:var(--_tab-inverted-indicator-shape)}:host([inverted]) .indicator{inset:0 0 auto;-webkit-transform-origin:top left;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-inverted-indicator-shape)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}';
 /**
  * @tag forge-tab
  *