@ds-mo/ui 5.0.0 → 6.0.0

package/dist/.build-stamp

@@ -1 +1 @@
-1783964096571
+1783987573003

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "5.0.0",
+  "packageVersion": "6.0.0",
   "kind": "components",
   "entries": [
     {
@@ -147,10 +147,6 @@
             "type": "boolean",
             "required": false
           },
-          "isSelected": {
-            "type": "boolean",
-            "required": false
-          },
           "label": {
             "type": "string | undefined",
             "required": false
@@ -1434,15 +1430,15 @@
       "tag": "ds-menu",
       "name": "menu",
       "title": "Menu",
-      "summary": "Anchored action or option menu with flat items, grouped sections, selection, supplemental notification dots, toggles, and destructive actions.",
+      "summary": "Anchored action or option menu with flat items, grouped sections, selection, supplemental notification dots, switches, and destructive actions.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "stable",
-        "summary": "Anchored action or option menu with flat items, grouped sections, selection, supplemental notification dots, toggles, and destructive actions.",
+        "summary": "Anchored action or option menu with flat items, grouped sections, selection, supplemental notification dots, switches, and destructive actions.",
         "useWhen": [
           "A trigger reveals a short contextual list of commands or options.",
-          "Options need grouping, selected state, supplemental notification dots, toggle rows, or destructive treatment."
+          "Options need grouping, selected state, supplemental notification dots, switch rows, or destructive treatment."
         ],
         "avoidWhen": [
           "The user is selecting a value for a form field.",
@@ -1464,17 +1460,20 @@
         "commonlyComposedWith": [
           "component:ds-button-unfilled",
           "component:ds-panel-nav",
+          "component:ds-switch",
           "component:ds-shell-gradient-picker"
         ],
         "accessibility": [
           "Anchor the menu to the control that opens it and return focus to that control when the menu closes.",
           "Open with visible initial focus only when the trigger was activated from the keyboard.",
           "Keep disabled items discoverable only when their unavailable state is meaningful.",
+          "Switch rows use menuitemcheckbox semantics on the row; the nested ds-switch is an aria-hidden presentation indicator.",
           "Use notification dots only as supplemental status and not as the sole indication of important information."
         ],
         "states": [
           "The host owns open state and responds to selection and close events.",
           "Use either flat items or sections, not both.",
+          "After dsSelect from a switch row, update switchValue in the items property so the controlled indicator reflects the new state.",
           "Arrays, objects, and element anchors must be assigned as JavaScript properties.",
           "Use one gradient-picker section in the user or account Appearance or Theme menu for the global AppShell wash preference; apply dsGradientSelect immediately without closing the menu."
         ],
@@ -1587,6 +1586,7 @@
       "componentDependencies": [
         "badge",
         "shell-gradient-picker",
+        "switch",
         "text"
       ]
     },
@@ -2581,6 +2581,158 @@
         "text"
       ]
     },
+    {
+      "id": "component:ds-switch",
+      "tag": "ds-switch",
+      "name": "switch",
+      "title": "Switch",
+      "summary": "Compact on/off setting control for changes that take effect immediately, with three sizes and form-associated behavior.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "stable",
+        "summary": "Compact on/off setting control for changes that take effect immediately, with three sizes and form-associated behavior.",
+        "useWhen": [
+          "A binary setting takes effect immediately when the user turns it on or off.",
+          "A settings, form, or menu row needs a compact on/off control.",
+          "The checked value needs native form submission, required validation, reset, or external form association."
+        ],
+        "avoidWhen": [
+          "The user is providing consent, acknowledging a statement, or selecting multiple independent choices.",
+          "The user must choose one option from a mutually exclusive set.",
+          "The interaction triggers a one-time action instead of maintaining an on/off state."
+        ],
+        "alternatives": [
+          {
+            "when": "The interaction represents consent, acknowledgment, or multi-select choices.",
+            "component": "component:ds-checkbox",
+            "reason": "Checkbox semantics communicate selection or agreement rather than an immediately applied setting."
+          },
+          {
+            "when": "The user must choose one option from a mutually exclusive group.",
+            "component": "component:ds-radio-group",
+            "reason": "RadioGroup communicates one-of-many selection."
+          },
+          {
+            "when": "The control triggers a one-time command or submission.",
+            "component": "component:ds-button-filled",
+            "reason": "Button semantics communicate an action rather than persistent state."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-field",
+          "component:ds-menu",
+          "component:ds-text"
+        ],
+        "accessibility": [
+          "Every standalone switch requires an accessible name from a native label, aria-label, or aria-labelledby.",
+          "Checked state is exposed through switch semantics and thumb position, so state does not rely on color alone.",
+          "Read-only switches remain focusable and submitted but cannot change; inactive or disabled switches leave the tab order and are omitted from form submission.",
+          "Use presentation mode only when a composite owner such as a menuitemcheckbox provides the interaction and accessible state."
+        ],
+        "states": [
+          "Activation updates checked immediately and emits dsChange with the new boolean value.",
+          "The initial checked value is the form-reset baseline; unchecked switches submit nothing unless uncheckedValue is provided.",
+          "Sizes are md 36×24 with a 16px thumb and 4px body inset, sm 24×16 with a 12px thumb and 2px inset, and xs 12×8 with a 6px thumb and 1px inset.",
+          "Presentation mode removes switch semantics, focus, interaction, and form submission while retaining the checked visual."
+        ],
+        "responsiveBehavior": [
+          "Choose size from the density of the containing row; do not enlarge the switch to the full control height.",
+          "Keep the switch from shrinking when adjacent labels wrap."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Set checked as a property for application state updates and listen for dsChange.",
+            "Use the form attribute to associate a switch rendered outside its owning form."
+          ],
+          "react": [
+            "Use DsSwitch and handle onDsChange; checked is mutable and updates immediately when the component is activated."
+          ],
+          "angular": [
+            "Use DsSwitch with checked binding and dsChange, or the generated boolean value accessor in Angular forms."
+          ]
+        },
+        "references": [
+          {
+            "label": "Storybook examples",
+            "path": "src/wc/components/Switch/Switch.stories.ts"
+          },
+          {
+            "label": "Cross-browser form and accessibility coverage",
+            "path": "tests/e2e/forms.spec.ts"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "checked": {
+            "type": "boolean",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "form": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "presentation": {
+            "type": "boolean",
+            "required": false
+          },
+          "readOnly": {
+            "type": "boolean",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
+            "type": "string",
+            "required": false
+          },
+          "size": {
+            "type": "SwitchSize",
+            "required": false
+          },
+          "uncheckedValue": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "boolean"
+          }
+        ],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-switch",
+        "react": "DsSwitch",
+        "angular": "DsSwitch"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "componentDependencies": []
+    },
     {
       "id": "component:ds-tab-group",
       "tag": "ds-tab-group",
@@ -2929,71 +3081,95 @@
       "componentDependencies": []
     },
     {
-      "id": "component:ds-toggle",
-      "tag": "ds-toggle",
-      "name": "toggle",
-      "title": "Toggle",
-      "summary": "Switch control with on/off state and accessible switch semantics.",
-      "intentStatus": "migration-pending",
-      "intent": null,
-      "api": {
-        "props": {
-          "checked": {
-            "type": "boolean",
-            "required": false
-          },
-          "disabled": {
-            "type": "boolean",
-            "required": false
-          },
-          "isInactive": {
-            "type": "boolean",
-            "required": false
-          },
-          "name": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "required": {
-            "type": "boolean",
-            "required": false
+      "id": "component:ds-tooltip",
+      "tag": "ds-tooltip",
+      "name": "tooltip",
+      "title": "Tooltip",
+      "summary": "Supplementary, non-interactive visual label for an already named action, shown on mouse or hover-capable pen and keyboard focus.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "stable",
+        "summary": "Supplementary, non-interactive visual label for an already named action, shown on mouse or hover-capable pen and keyboard focus.",
+        "useWhen": [
+          "An icon-only or dense control benefits from a short visual label for sighted mouse, pen, and keyboard users.",
+          "A non-essential keyboard shortcut should appear beside a concise visual label.",
+          "Adjacent chrome actions need delayed first disclosure with instant warm handoff between tooltips."
+        ],
+        "avoidWhen": [
+          "The tooltip would be the trigger's only accessible name or contain information required to complete the task.",
+          "The popup needs links, buttons, rich content, a close action, click-to-open behavior, or touch access.",
+          "The callout follows a chart cursor or data point rather than a slotted control."
+        ],
+        "alternatives": [
+          {
+            "when": "The popup contains a contextual list of actions or options.",
+            "component": "component:ds-menu",
+            "reason": "Menu provides interactive content, keyboard navigation, selection, and close behavior."
           },
-          "requiredMessage": {
-            "type": "string",
-            "required": false
+          {
+            "when": "The content requires focus management, substantial explanation, confirmation, or a form.",
+            "component": "component:ds-modal",
+            "reason": "Modal provides dialog semantics and focus containment."
           },
-          "value": {
-            "type": "string",
-            "required": false
+          {
+            "when": "A chart needs a cursor- or data-point-positioned value callout.",
+            "component": "component:ds-tooltip-data-viz",
+            "reason": "TooltipDataViz accepts chart coordinates and is designed for data visualization hover feedback."
           }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-button-filled",
+          "component:ds-button-unfilled",
+          "component:ds-panel-nav",
+          "component:ds-panel-tools"
+        ],
+        "accessibility": [
+          "The slotted trigger must have its own accessible name, usually an aria-label that closely matches the visual tooltip label.",
+          "Tooltip content is supplementary and non-essential; touch input intentionally does not open it.",
+          "While open, the trigger is linked to the role=tooltip popup with aria-describedby; the relationship is removed when the popup leaves the DOM without disturbing consumer description IDs.",
+          "Keyboard focus opens the tooltip and Escape dismisses it without moving focus."
+        ],
+        "states": [
+          "The first hover or keyboard focus waits for delay; moving to another tooltip shortly after dismissal opens it immediately.",
+          "An empty or whitespace-only label suppresses the popup while preserving the wrapper.",
+          "Only one tooltip remains active globally; warm handoff removes the previous popup before showing the next.",
+          "The preferred side flips when it cannot fit, then alignment is clamped to viewport padding.",
+          "Reduced motion removes enter and exit fades while retaining the final visible or hidden state."
+        ],
+        "responsiveBehavior": [
+          "The portaled popup follows trigger and popup resize, viewport resize, and nested scrolling while open.",
+          "Touch users rely on the trigger's accessible and visible context rather than tooltip disclosure.",
+          "Keep labels concise and non-wrapping; use inline text or a larger disclosure component for essential explanation."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Place exactly one trigger element as the component's light-DOM child.",
+            "Replacing the slotted trigger rebinds pointer and focus behavior automatically.",
+            "sideOffset, alignOffset, and delay accept numbers or TokoMo CSS values."
+          ],
+          "react": [
+            "Wrap one focusable trigger with DsTooltip; keep the trigger's aria-label independent from the tooltip label."
+          ],
+          "angular": [
+            "Wrap one focusable trigger with DsTooltip and use property binding when offset or delay values are not plain strings."
+          ]
         },
-        "events": [
+        "references": [
           {
-            "name": "dsChange",
-            "detail": "boolean"
+            "label": "Storybook behavior examples",
+            "path": "src/wc/components/Tooltip/Tooltip.stories.ts"
+          },
+          {
+            "label": "Cross-browser behavior and accessibility coverage",
+            "path": "tests/e2e/tooltip.spec.ts"
+          },
+          {
+            "label": "Positioning unit coverage",
+            "path": "tests/tooltip-position.test.ts"
           }
-        ],
-        "slots": []
-      },
-      "exports": {
-        "customElement": "ds-toggle",
-        "react": "DsToggle",
-        "angular": "DsToggle"
+        ]
       },
-      "dependencies": [
-        "@ds-mo/ui",
-        "@ds-mo/tokens"
-      ],
-      "componentDependencies": []
-    },
-    {
-      "id": "component:ds-tooltip",
-      "tag": "ds-tooltip",
-      "name": "tooltip",
-      "title": "Tooltip",
-      "summary": "Positioned tooltip with control-density sizes, delay, keyboard shortcut display, and viewport clamping.",
-      "intentStatus": "migration-pending",
-      "intent": null,
       "api": {
         "props": {
           "align": {

package/dist/angular/boolean-value-accessor.d.ts

@@ -5,5 +5,5 @@ export declare class BooleanValueAccessor extends ValueAccessor {
     constructor(el: ElementRef);
     writeValue(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BooleanValueAccessor, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BooleanValueAccessor, "ds-checkbox, ds-toggle", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BooleanValueAccessor, "ds-checkbox, ds-switch", never, {}, {}, never, never, true, never>;
 }

package/dist/angular/boolean-value-accessor.js

@@ -10,7 +10,7 @@ export class BooleanValueAccessor extends ValueAccessor {
         this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BooleanValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BooleanValueAccessor, isStandalone: true, selector: "ds-checkbox, ds-toggle", host: { listeners: { "dsChange": "handleChangeEvent($event.target?.[\"checked\"])" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BooleanValueAccessor, isStandalone: true, selector: "ds-checkbox, ds-switch", host: { listeners: { "dsChange": "handleChangeEvent($event.target?.[\"checked\"])" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BooleanValueAccessor),
@@ -22,7 +22,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Directive,
             args: [{
                     /* tslint:disable-next-line:directive-selector */
-                    selector: 'ds-checkbox, ds-toggle',
+                    selector: 'ds-checkbox, ds-switch',
                     host: {
                         '(dsChange)': 'handleChangeEvent($event.target?.["checked"])'
                     },

package/dist/angular/ds-badge.d.ts

@@ -6,7 +6,7 @@ export declare class DsBadge {
     protected el: HTMLDsBadgeElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsBadge, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsBadge, "ds-badge", never, { "background": { "alias": "background"; "required": false; }; "count": { "alias": "count"; "required": false; }; "gradientBackground": { "alias": "gradientBackground"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "label": { "alias": "label"; "required": false; }; "max": { "alias": "max"; "required": false; }; "surface": { "alias": "surface"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsBadge, "ds-badge", never, { "background": { "alias": "background"; "required": false; }; "count": { "alias": "count"; "required": false; }; "gradientBackground": { "alias": "gradientBackground"; "required": false; }; "label": { "alias": "label"; "required": false; }; "max": { "alias": "max"; "required": false; }; "surface": { "alias": "surface"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsBadge extends Components.DsBadge {
 }

package/dist/angular/ds-badge.js

@@ -17,12 +17,12 @@ let DsBadge = class DsBadge {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsBadge, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsBadge, isStandalone: true, selector: "ds-badge", inputs: { background: "background", count: "count", gradientBackground: "gradientBackground", isSelected: "isSelected", label: "label", max: "max", surface: "surface", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsBadge, isStandalone: true, selector: "ds-badge", inputs: { background: "background", count: "count", gradientBackground: "gradientBackground", label: "label", max: "max", surface: "surface", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsBadge = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsBadge,
-        inputs: ['background', 'count', 'gradientBackground', 'isSelected', 'label', 'max', 'surface', 'variant']
+        inputs: ['background', 'count', 'gradientBackground', 'label', 'max', 'surface', 'variant']
     })
 ], DsBadge);
 export { DsBadge };
@@ -33,6 +33,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['background', 'count', 'gradientBackground', 'isSelected', 'label', 'max', 'surface', 'variant'],
+                    inputs: ['background', 'count', 'gradientBackground', 'label', 'max', 'surface', 'variant'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });

package/dist/angular/ds-switch.d.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import type { Components } from '@ds-mo/ui/components';
+import type { DsSwitchCustomEvent } from '@ds-mo/ui/components';
+import * as i0 from "@angular/core";
+export declare class DsSwitch {
+    protected z: NgZone;
+    protected el: HTMLDsSwitchElement;
+    dsChange: EventEmitter<DsSwitchCustomEvent<boolean>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DsSwitch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsSwitch, "ds-switch", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "form": { "alias": "form"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "name": { "alias": "name"; "required": false; }; "presentation": { "alias": "presentation"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; }; "size": { "alias": "size"; "required": false; }; "uncheckedValue": { "alias": "uncheckedValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
+}
+export declare interface DsSwitch extends Components.DsSwitch {
+    dsChange: EventEmitter<DsSwitchCustomEvent<boolean>>;
+}

package/dist/angular/{ds-toggle.js → ds-switch.js}

@@ -8,33 +8,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /* auto-generated angular directive proxies */
 import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
 import { ProxyCmp } from './angular-component-lib/utils.js';
-import { defineCustomElement as defineDsToggle } from '@ds-mo/ui/components/ds-toggle.js';
+import { defineCustomElement as defineDsSwitch } from '@ds-mo/ui/components/ds-switch.js';
 import * as i0 from "@angular/core";
-let DsToggle = class DsToggle {
+let DsSwitch = class DsSwitch {
     constructor(c, r, z) {
         this.z = z;
         this.dsChange = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsToggle, isStandalone: true, selector: "ds-toggle", inputs: { checked: "checked", disabled: "disabled", isInactive: "isInactive", name: "name", required: "required", requiredMessage: "requiredMessage", value: "value" }, outputs: { dsChange: "dsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsSwitch, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsSwitch, isStandalone: true, selector: "ds-switch", inputs: { checked: "checked", disabled: "disabled", form: "form", isInactive: "isInactive", name: "name", presentation: "presentation", readOnly: "readOnly", required: "required", requiredMessage: "requiredMessage", size: "size", uncheckedValue: "uncheckedValue", value: "value" }, outputs: { dsChange: "dsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
-DsToggle = __decorate([
+DsSwitch = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineDsToggle,
-        inputs: ['checked', 'disabled', 'isInactive', 'name', 'required', 'requiredMessage', 'value']
+        defineCustomElementFn: defineDsSwitch,
+        inputs: ['checked', 'disabled', 'form', 'isInactive', 'name', 'presentation', 'readOnly', 'required', 'requiredMessage', 'size', 'uncheckedValue', 'value']
     })
-], DsToggle);
-export { DsToggle };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsToggle, decorators: [{
+], DsSwitch);
+export { DsSwitch };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsSwitch, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ds-toggle',
+                    selector: 'ds-switch',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['checked', 'disabled', 'isInactive', 'name', 'required', 'requiredMessage', 'value'],
+                    inputs: ['checked', 'disabled', 'form', 'isInactive', 'name', 'presentation', 'readOnly', 'required', 'requiredMessage', 'size', 'uncheckedValue', 'value'],
                     outputs: ['dsChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsChange: [{

package/dist/angular/index.d.ts

@@ -1,2 +1,2 @@
 import * as d from './proxies';
-export declare const DIRECTIVES: (typeof d.DsAppShell | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataVizDonut | typeof d.DsCardSetting | typeof d.DsCard | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMenu | typeof d.DsModal | typeof d.DsPagination | typeof d.DsPanelNav | typeof d.DsPanelTools | typeof d.DsRadioGroup | typeof d.DsSelect | typeof d.DsShellGradientPicker | typeof d.DsShellGradientSwatch | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsTabGroupNav | typeof d.DsTabGroup | typeof d.DsTable | typeof d.DsTag | typeof d.DsText | typeof d.DsToggle | typeof d.DsTooltipDataViz | typeof d.DsTooltip)[];
+export declare const DIRECTIVES: (typeof d.DsAppShell | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataVizDonut | typeof d.DsCardSetting | typeof d.DsCard | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMenu | typeof d.DsModal | typeof d.DsPagination | typeof d.DsPanelNav | typeof d.DsPanelTools | typeof d.DsRadioGroup | typeof d.DsSelect | typeof d.DsShellGradientPicker | typeof d.DsShellGradientSwatch | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwitch | typeof d.DsTabGroupNav | typeof d.DsTabGroup | typeof d.DsTable | typeof d.DsTag | typeof d.DsText | typeof d.DsTooltipDataViz | typeof d.DsTooltip)[];

package/dist/angular/index.js

@@ -32,12 +32,12 @@ export const DIRECTIVES = [
     d.DsShellGradientSwatch,
     d.DsSkeleton,
     d.DsSlider,
+    d.DsSwitch,
     d.DsTabGroup,
     d.DsTabGroupNav,
     d.DsTable,
     d.DsTag,
     d.DsText,
-    d.DsToggle,
     d.DsTooltip,
     d.DsTooltipDataViz
 ];

package/dist/angular/proxies.d.ts

@@ -34,11 +34,11 @@ export { DsShellGradientPicker } from './ds-shell-gradient-picker';
 export { DsShellGradientSwatch } from './ds-shell-gradient-swatch';
 export { DsSkeleton } from './ds-skeleton';
 export { DsSlider } from './ds-slider';
+export { DsSwitch } from './ds-switch';
 export { DsTabGroup } from './ds-tab-group';
 export { DsTabGroupNav } from './ds-tab-group-nav';
 export { DsTable } from './ds-table';
 export { DsTag } from './ds-tag';
 export { DsText } from './ds-text';
-export { DsToggle } from './ds-toggle';
 export { DsTooltip } from './ds-tooltip';
 export { DsTooltipDataViz } from './ds-tooltip-data-viz';

package/dist/angular/proxies.js

@@ -35,11 +35,11 @@ export { DsShellGradientPicker } from './ds-shell-gradient-picker.js';
 export { DsShellGradientSwatch } from './ds-shell-gradient-swatch.js';
 export { DsSkeleton } from './ds-skeleton.js';
 export { DsSlider } from './ds-slider.js';
+export { DsSwitch } from './ds-switch.js';
 export { DsTabGroup } from './ds-tab-group.js';
 export { DsTabGroupNav } from './ds-tab-group-nav.js';
 export { DsTable } from './ds-table.js';
 export { DsTag } from './ds-tag.js';
 export { DsText } from './ds-text.js';
-export { DsToggle } from './ds-toggle.js';
 export { DsTooltip } from './ds-tooltip.js';
 export { DsTooltipDataViz } from './ds-tooltip-data-viz.js';

package/dist/components/ds-app-shell.js

@@ -1,2 +1,2 @@
-import{p as e,t as s,H as t,h as n,a as i}from"./index.js";import{D as a,c as l,n as o,s as r}from"./p-D0B9uDTP.js";import{e as h,c,r as p,a as d,b as f}from"./p-BKhG2xrW.js";const u={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function b(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function g(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function m(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function v(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!b(e))return null;const s=m(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=u[s];if(t)return`open-tool:${t}`;return null}const y="--ds-shell-gradient-image";const _="--ds-shell-gradient-size";const x="--ds-shell-gradient-position-panel";const w="--ds-shell-gradient-position-bar";const k="--ds-shell-gradient-opacity";function P(e=a){return l(e)}function z(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function C(){return"0 0"}function D(e){return`${-Math.round(e)}px 0`}function L(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function j(e,s){return s?e.collapsedPx:e.expandedPx}const B=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;--ds-shell-panel-tools-width:var(--dimension-panel-width-sm)}@media (min-width: 768px) and (max-width: 1199px){.sc-ds-app-shell-h{--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools'     'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const W=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(p(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=z();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(p(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(d,this.onChromeTransitionStart);this.el.addEventListener(f,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(d,this.onChromeTransitionStart);this.el.removeEventListener(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[y,_,k];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(x,t)}if(s){s.style.setProperty(w,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=V(e,s);return j(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=V(e,s);return j(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return o(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const s=v(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(s)s.style.removeProperty(w)};const i=o(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(t);n();return}const a=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const h=C();const c=D(l);this.syncChromeLayoutVars(e,s,h,c);const p=P(i);const d=S({width:a.width,height:a.height});const f=r(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[y]:p,[_]:d,[x]:h,[w]:c,[k]:f});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:p,[_]:d,[k]:f,[x]:s?null:h,[w]:s?c:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"f4c00ba0d33ea376d4cf94ea6c245a930c35c6ec",class:s},n("div",{key:"7aa13e71e4a177c0d7692636f0592b97ab7ff596",class:"app-shell__row"},e?n("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,n("div",{key:"c126aed0e69e4f52ee0852bf37023072e634aa73",class:"app-shell__panel"},n("slot",{key:"fa4eed941339f2f3f6d98633919264a0f353c072",name:"panel"})),n("div",{key:"e761916f289262c9b2819a19e0e05235cb2e70a7",class:"app-shell__main"},n("div",{key:"a969b368fce3d472433f3e5626a8799ff7c6b521",class:"app-shell__bar"},n("slot",{key:"c5ae19455feb7d6d14c66b96e6381f84ec3138d6",name:"bar"})),n("div",{key:"eeb5ce37f575a8e3ec6b6ccbe4d08dbd5aa37322",class:"app-shell__tools"},n("slot",{key:"5b86e6c7a81200934f5ae9b7f3b96828953690cd",name:"tools"})),n("div",{key:"6a008250756737a98be2ac5b3608687f3332d0e4",class:"app-shell__content"},n("slot",{key:"c50956447d5d741162c102c64974b8fa0f2df43a"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return B()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(s(e))){customElements.define(s(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
+import{p as e,t as s,H as t,h as n,a as i}from"./index.js";import{D as a,c as l,n as o,s as r}from"./p-D0B9uDTP.js";import{e as h,c as d,r as c,a as p,b as u}from"./p-BKhG2xrW.js";const f={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function b(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function g(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function m(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function v(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!b(e))return null;const s=m(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=f[s];if(t)return`open-tool:${t}`;return null}const y="--ds-shell-gradient-image";const _="--ds-shell-gradient-size";const x="--ds-shell-gradient-position-panel";const w="--ds-shell-gradient-position-bar";const k="--ds-shell-gradient-opacity";function P(e=a){return l(e)}function z(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function C(){return"0 0"}function D(e){return`${-Math.round(e)}px 0`}function L(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function j(e,s){return s?e.collapsedPx:e.expandedPx}const B=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;--ds-shell-panel-tools-width:var(--dimension-panel-width-sm)}@media (min-width: 768px) and (max-width: 1199px){.sc-ds-app-shell-h{--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools'     'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const W=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=d((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(c(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=z();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(c(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(u,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(u,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[y,_,k];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(x,t)}if(s){s.style.setProperty(w,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=V(e,s);return j(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=V(e,s);return j(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return o(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const s=v(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(s)s.style.removeProperty(w)};const i=o(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(t);n();return}const a=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const h=C();const d=D(l);this.syncChromeLayoutVars(e,s,h,d);const c=P(i);const p=S({width:a.width,height:a.height});const u=r(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[y]:c,[_]:p,[x]:h,[w]:d,[k]:u});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:c,[_]:p,[k]:u,[x]:s?null:h,[w]:s?d:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"44f9aed7809c500fc5eeb6d760b1c8ef387fd693",class:s},n("div",{key:"933ce38b8edc171bd85eca64af407f4e403b8310",class:"app-shell__row"},e?n("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,n("div",{key:"6d94a83308b10df7ef6f31c58c0e9243617dd959",class:"app-shell__panel"},n("slot",{key:"860d1763ed31251abae5ee2350f104b7af08ce57",name:"panel"})),n("div",{key:"5e1704d21df96812de03b7d0e388e654d3c487a9",class:"app-shell__main"},n("div",{key:"c5c0eb9099abd90a3e7d43d4f798fbbe94051438",class:"app-shell__bar"},n("slot",{key:"9c57201b210ee0f7d856c86806df9e31a838475f",name:"bar"})),n("div",{key:"6166885053a943b775185aa8e61591bc19aabb83",class:"app-shell__tools"},n("slot",{key:"dc446d5d9d9ff4cdcaa4c960dd1e156de26c287c",name:"tools"})),n("div",{key:"9a1dd8954e28ca8d1d69c5c716cfd453314b7edb",class:"app-shell__content"},n("slot",{key:"b58f371725b5dd628d53bae02e9a5ac2c4742d7c"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return B()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(s(e))){customElements.define(s(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
 //# sourceMappingURL=ds-app-shell.js.map