@ds-mo/ui 6.0.1 → 8.0.0

package/dist/angular/ds-button-filled.d.ts

@@ -8,7 +8,7 @@ export declare class DsButtonFilled {
     dsClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsButtonFilled, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonFilled, "ds-button-filled", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "label": { "alias": "label"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonFilled, "ds-button-filled", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; }, never, ["*"], true, never>;
 }
 export declare interface DsButtonFilled extends Components.DsButtonFilled {
     dsClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;

package/dist/angular/ds-button-filled.js

@@ -18,12 +18,12 @@ let DsButtonFilled = class DsButtonFilled {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsButtonFilled, 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: DsButtonFilled, isStandalone: true, selector: "ds-button-filled", inputs: { ariaLabel: "ariaLabel", contrast: "contrast", icon: "icon", intent: "intent", isInactive: "isInactive", label: "label", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick" }, 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: DsButtonFilled, isStandalone: true, selector: "ds-button-filled", inputs: { ariaLabel: "ariaLabel", contrast: "contrast", icon: "icon", intent: "intent", isInactive: "isInactive", isLoading: "isLoading", label: "label", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsButtonFilled = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsButtonFilled,
-        inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant', 'width'],
+        inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'isLoading', 'label', 'size', 'type', 'variant', 'width'],
         methods: ['setFocus']
     })
 ], DsButtonFilled);
@@ -35,7 +35,7 @@ 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: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant', 'width'],
+                    inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'isLoading', 'label', 'size', 'type', 'variant', 'width'],
                     outputs: ['dsClick'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClick: [{

package/dist/angular/ds-button-unfilled.d.ts

@@ -9,7 +9,7 @@ export declare class DsButtonUnfilled {
     dsChange: EventEmitter<DsButtonUnfilledCustomEvent<boolean>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsButtonUnfilled, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonUnfilled, "ds-button-unfilled", never, { "activeFill": { "alias": "activeFill"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "background": { "alias": "background"; "required": false; }; "backgroundContrast": { "alias": "backgroundContrast"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "focusTabIndex": { "alias": "focusTabIndex"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "haspopup": { "alias": "haspopup"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "isActive": { "alias": "isActive"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "label": { "alias": "label"; "required": false; }; "pressed": { "alias": "pressed"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; "dsChange": "dsChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonUnfilled, "ds-button-unfilled", never, { "activeFill": { "alias": "activeFill"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "background": { "alias": "background"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "focusTabIndex": { "alias": "focusTabIndex"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "haspopup": { "alias": "haspopup"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "isActive": { "alias": "isActive"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "pressed": { "alias": "pressed"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; "dsChange": "dsChange"; }, never, ["*"], true, never>;
 }
 export declare interface DsButtonUnfilled extends Components.DsButtonUnfilled {
     dsClick: EventEmitter<DsButtonUnfilledCustomEvent<MouseEvent>>;

package/dist/angular/ds-button-unfilled.js

@@ -19,12 +19,12 @@ let DsButtonUnfilled = class DsButtonUnfilled {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsButtonUnfilled, 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: DsButtonUnfilled, isStandalone: true, selector: "ds-button-unfilled", inputs: { activeFill: "activeFill", ariaLabel: "ariaLabel", background: "background", backgroundContrast: "backgroundContrast", controls: "controls", dot: "dot", expanded: "expanded", focusTabIndex: "focusTabIndex", hasBorder: "hasBorder", haspopup: "haspopup", icon: "icon", isActive: "isActive", isInactive: "isInactive", label: "label", pressed: "pressed", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick", dsChange: "dsChange" }, 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: DsButtonUnfilled, isStandalone: true, selector: "ds-button-unfilled", inputs: { activeFill: "activeFill", ariaLabel: "ariaLabel", background: "background", controls: "controls", dot: "dot", expanded: "expanded", focusTabIndex: "focusTabIndex", hasBorder: "hasBorder", haspopup: "haspopup", icon: "icon", isActive: "isActive", isInactive: "isInactive", isLoading: "isLoading", label: "label", pressed: "pressed", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick", dsChange: "dsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsButtonUnfilled = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsButtonUnfilled,
-        inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant', 'width'],
+        inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'isLoading', 'label', 'pressed', 'size', 'type', 'variant', 'width'],
         methods: ['setFocus']
     })
 ], DsButtonUnfilled);
@@ -36,7 +36,7 @@ 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: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant', 'width'],
+                    inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'isLoading', 'label', 'pressed', 'size', 'type', 'variant', 'width'],
                     outputs: ['dsClick', 'dsChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClick: [{

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

@@ -8,7 +8,7 @@ export declare class DsChip {
     dsRemove: EventEmitter<DsChipCustomEvent<void>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsChip, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsChip, "ds-chip", never, { "background": { "alias": "background"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "label": { "alias": "label"; "required": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "removeLabel": { "alias": "removeLabel"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, { "dsRemove": "dsRemove"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsChip, "ds-chip", never, { "isInactive": { "alias": "isInactive"; "required": false; }; "label": { "alias": "label"; "required": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "removeLabel": { "alias": "removeLabel"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, { "dsRemove": "dsRemove"; }, never, ["*"], true, never>;
 }
 export declare interface DsChip extends Components.DsChip {
     /**

package/dist/angular/ds-chip.js

@@ -18,12 +18,12 @@ let DsChip = class DsChip {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsChip, 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: DsChip, isStandalone: true, selector: "ds-chip", inputs: { background: "background", isInactive: "isInactive", label: "label", maxWidth: "maxWidth", removable: "removable", removeLabel: "removeLabel", rounded: "rounded", size: "size", state: "state" }, outputs: { dsRemove: "dsRemove" }, 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: DsChip, isStandalone: true, selector: "ds-chip", inputs: { isInactive: "isInactive", label: "label", maxWidth: "maxWidth", removeLabel: "removeLabel", rounded: "rounded", size: "size", state: "state" }, outputs: { dsRemove: "dsRemove" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsChip = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsChip,
-        inputs: ['background', 'isInactive', 'label', 'maxWidth', 'removable', 'removeLabel', 'rounded', 'size', 'state']
+        inputs: ['isInactive', 'label', 'maxWidth', 'removeLabel', 'rounded', 'size', 'state']
     })
 ], DsChip);
 export { DsChip };
@@ -34,7 +34,7 @@ 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', 'isInactive', { name: 'label', required: true }, 'maxWidth', 'removable', 'removeLabel', 'rounded', 'size', 'state'],
+                    inputs: ['isInactive', { name: 'label', required: true }, 'maxWidth', 'removeLabel', 'rounded', 'size', 'state'],
                     outputs: ['dsRemove'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsRemove: [{

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

@@ -6,7 +6,7 @@ export declare class DsDivider {
     protected el: HTMLDsDividerElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsDivider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsDivider, "ds-divider", never, { "inset": { "alias": "inset"; "required": false; }; "length": { "alias": "length"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "semantic": { "alias": "semantic"; "required": false; }; "surface": { "alias": "surface"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsDivider, "ds-divider", never, { "background": { "alias": "background"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; "length": { "alias": "length"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "semantic": { "alias": "semantic"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsDivider extends Components.DsDivider {
 }

package/dist/angular/ds-divider.js

@@ -17,12 +17,12 @@ let DsDivider = class DsDivider {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsDivider, 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: DsDivider, isStandalone: true, selector: "ds-divider", inputs: { inset: "inset", length: "length", orientation: "orientation", semantic: "semantic", surface: "surface" }, 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: DsDivider, isStandalone: true, selector: "ds-divider", inputs: { background: "background", inset: "inset", length: "length", orientation: "orientation", semantic: "semantic" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsDivider = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsDivider,
-        inputs: ['inset', 'length', 'orientation', 'semantic', 'surface']
+        inputs: ['background', 'inset', 'length', 'orientation', 'semantic']
     })
 ], DsDivider);
 export { DsDivider };
@@ -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: ['inset', 'length', 'orientation', 'semantic', 'surface'],
+                    inputs: ['background', 'inset', 'length', 'orientation', 'semantic'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });

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

@@ -6,7 +6,7 @@ export declare class DsIcon {
     protected el: HTMLDsIconElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsIcon, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsIcon, "ds-icon", never, { "color": { "alias": "color"; "required": false; }; "flag": { "alias": "flag"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsIcon, "ds-icon", never, { "color": { "alias": "color"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsIcon extends Components.DsIcon {
 }

package/dist/angular/ds-icon.js

@@ -17,12 +17,12 @@ let DsIcon = class DsIcon {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsIcon, 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: DsIcon, isStandalone: true, selector: "ds-icon", inputs: { color: "color", flag: "flag", label: "label", name: "name", size: "size" }, 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: DsIcon, isStandalone: true, selector: "ds-icon", inputs: { color: "color", label: "label", name: "name", size: "size" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsIcon = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsIcon,
-        inputs: ['color', 'flag', 'label', 'name', 'size']
+        inputs: ['color', 'label', 'name', 'size']
     })
 ], DsIcon);
 export { DsIcon };
@@ -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: ['color', 'flag', 'label', 'name', 'size'],
+                    inputs: ['color', 'label', 'name', 'size'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });

package/dist/angular/ds-panel-sub-nav.d.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import type { Components } from '@ds-mo/ui/components';
+import type { DsPanelSubNavCustomEvent } from '@ds-mo/ui/components';
+import * as i0 from "@angular/core";
+export declare class DsPanelSubNav {
+    protected z: NgZone;
+    protected el: HTMLDsPanelSubNavElement;
+    dsChange: EventEmitter<DsPanelSubNavCustomEvent<string>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DsPanelSubNav, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsPanelSubNav, "ds-panel-sub-nav", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "background": { "alias": "background"; "required": false; }; "items": { "alias": "items"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
+}
+export declare interface DsPanelSubNav extends Components.DsPanelSubNav {
+    dsChange: EventEmitter<DsPanelSubNavCustomEvent<string>>;
+}

package/dist/angular/{ds-tab-group-nav.js → ds-panel-sub-nav.js}

@@ -8,39 +8,35 @@ 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 defineDsTabGroupNav } from '@ds-mo/ui/components/ds-tab-group-nav.js';
+import { defineCustomElement as defineDsPanelSubNav } from '@ds-mo/ui/components/ds-panel-sub-nav.js';
 import * as i0 from "@angular/core";
-let DsTabGroupNav = class DsTabGroupNav {
+let DsPanelSubNav = class DsPanelSubNav {
     constructor(c, r, z) {
         this.z = z;
         this.dsChange = new EventEmitter();
-        this.dsRovingExit = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsTabGroupNav, 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: DsTabGroupNav, isStandalone: true, selector: "ds-tab-group-nav", inputs: { ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", background: "background", orientation: "orientation", rovingEnabled: "rovingEnabled", selectionFollowsFocus: "selectionFollowsFocus", tabs: "tabs", value: "value" }, outputs: { dsChange: "dsChange", dsRovingExit: "dsRovingExit" }, 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: DsPanelSubNav, 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: DsPanelSubNav, isStandalone: true, selector: "ds-panel-sub-nav", inputs: { ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", background: "background", items: "items", value: "value" }, outputs: { dsChange: "dsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
-DsTabGroupNav = __decorate([
+DsPanelSubNav = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineDsTabGroupNav,
-        inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'rovingEnabled', 'selectionFollowsFocus', 'tabs', 'value'],
-        methods: ['focusTab', 'focusLastTab', 'focusFirstTab']
+        defineCustomElementFn: defineDsPanelSubNav,
+        inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'items', 'value']
     })
-], DsTabGroupNav);
-export { DsTabGroupNav };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsTabGroupNav, decorators: [{
+], DsPanelSubNav);
+export { DsPanelSubNav };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsPanelSubNav, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ds-tab-group-nav',
+                    selector: 'ds-panel-sub-nav',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'rovingEnabled', 'selectionFollowsFocus', 'tabs', 'value'],
-                    outputs: ['dsChange', 'dsRovingExit'],
+                    inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'items', 'value'],
+                    outputs: ['dsChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsChange: [{
                 type: Output
-            }], dsRovingExit: [{
-                type: Output
             }] } });

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

@@ -6,7 +6,7 @@ export declare class DsSkeleton {
     protected el: HTMLDsSkeletonElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsSkeleton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsSkeleton, "ds-skeleton", never, { "controlSize": { "alias": "controlSize"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "shimmer": { "alias": "shimmer"; "required": false; }; "surface": { "alias": "surface"; "required": false; }; "textVariant": { "alias": "textVariant"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsSkeleton, "ds-skeleton", never, { "background": { "alias": "background"; "required": false; }; "controlSize": { "alias": "controlSize"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "shimmer": { "alias": "shimmer"; "required": false; }; "textVariant": { "alias": "textVariant"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsSkeleton extends Components.DsSkeleton {
 }

package/dist/angular/ds-skeleton.js

@@ -17,12 +17,12 @@ let DsSkeleton = class DsSkeleton {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsSkeleton, 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: DsSkeleton, isStandalone: true, selector: "ds-skeleton", inputs: { controlSize: "controlSize", iconSize: "iconSize", rounded: "rounded", shimmer: "shimmer", surface: "surface", textVariant: "textVariant", variant: "variant", width: "width" }, 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: DsSkeleton, isStandalone: true, selector: "ds-skeleton", inputs: { background: "background", controlSize: "controlSize", iconSize: "iconSize", rounded: "rounded", shimmer: "shimmer", textVariant: "textVariant", variant: "variant", width: "width" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsSkeleton = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsSkeleton,
-        inputs: ['controlSize', 'iconSize', 'rounded', 'shimmer', 'surface', 'textVariant', 'variant', 'width']
+        inputs: ['background', 'controlSize', 'iconSize', 'rounded', 'shimmer', 'textVariant', 'variant', 'width']
     })
 ], DsSkeleton);
 export { DsSkeleton };
@@ -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: ['controlSize', 'iconSize', 'rounded', 'shimmer', 'surface', 'textVariant', 'variant', 'width'],
+                    inputs: ['background', 'controlSize', 'iconSize', 'rounded', 'shimmer', 'textVariant', 'variant', 'width'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });

package/dist/angular/ds-tab-group.d.ts

@@ -8,7 +8,7 @@ export declare class DsTabGroup {
     dsChange: EventEmitter<DsTabGroupCustomEvent<string>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsTabGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsTabGroup, "ds-tab-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "background": { "alias": "background"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsTabGroup, "ds-tab-group", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "background": { "alias": "background"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
 }
 export declare interface DsTabGroup extends Components.DsTabGroup {
     dsChange: EventEmitter<DsTabGroupCustomEvent<string>>;

package/dist/angular/ds-tab-group.js

@@ -18,12 +18,12 @@ let DsTabGroup = class DsTabGroup {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsTabGroup, 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: DsTabGroup, isStandalone: true, selector: "ds-tab-group", inputs: { ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", background: "background", orientation: "orientation", tabs: "tabs", value: "value" }, outputs: { dsChange: "dsChange" }, 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: DsTabGroup, isStandalone: true, selector: "ds-tab-group", inputs: { ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", background: "background", tabs: "tabs", value: "value" }, outputs: { dsChange: "dsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsTabGroup = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsTabGroup,
-        inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value']
+        inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'tabs', 'value']
     })
 ], DsTabGroup);
 export { DsTabGroup };
@@ -34,7 +34,7 @@ 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: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value'],
+                    inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'tabs', 'value'],
                     outputs: ['dsChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsChange: [{

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

@@ -1,12 +1,18 @@
-import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
 import type { Components } from '@ds-mo/ui/components';
+import type { DsTagCustomEvent } from '@ds-mo/ui/components';
 import * as i0 from "@angular/core";
 export declare class DsTag {
     protected z: NgZone;
     protected el: HTMLDsTagElement;
+    dsClick: EventEmitter<DsTagCustomEvent<MouseEvent>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsTag, "ds-tag", never, { "contrast": { "alias": "contrast"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "label": { "alias": "label"; "required": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsTag, "ds-tag", never, { "ariaControls": { "alias": "ariaControls"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "interactive": { "alias": "interactive"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "label": { "alias": "label"; "required": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "dsClick": "dsClick"; }, never, ["*"], true, never>;
 }
 export declare interface DsTag extends Components.DsTag {
+    /**
+     * Fired when the interactive Tag button is activated.
+     */
+    dsClick: EventEmitter<DsTagCustomEvent<MouseEvent>>;
 }

package/dist/angular/ds-tag.js

@@ -6,23 +6,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 /* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
 import { ProxyCmp } from './angular-component-lib/utils.js';
 import { defineCustomElement as defineDsTag } from '@ds-mo/ui/components/ds-tag.js';
 import * as i0 from "@angular/core";
 let DsTag = class DsTag {
     constructor(c, r, z) {
         this.z = z;
+        this.dsClick = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsTag, 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: DsTag, isStandalone: true, selector: "ds-tag", inputs: { contrast: "contrast", intent: "intent", label: "label", maxWidth: "maxWidth", rounded: "rounded", size: "size" }, 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: DsTag, isStandalone: true, selector: "ds-tag", inputs: { ariaControls: "ariaControls", contrast: "contrast", expanded: "expanded", icon: "icon", intent: "intent", interactive: "interactive", isInactive: "isInactive", label: "label", maxWidth: "maxWidth", rounded: "rounded", size: "size" }, outputs: { dsClick: "dsClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsTag = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsTag,
-        inputs: ['contrast', 'intent', 'label', 'maxWidth', 'rounded', 'size']
+        inputs: ['ariaControls', 'contrast', 'expanded', 'icon', 'intent', 'interactive', 'isInactive', 'label', 'maxWidth', 'rounded', 'size']
     })
 ], DsTag);
 export { DsTag };
@@ -33,6 +34,9 @@ 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: ['contrast', 'intent', { name: 'label', required: true }, 'maxWidth', 'rounded', 'size'],
+                    inputs: ['ariaControls', 'contrast', 'expanded', 'icon', 'intent', 'interactive', 'isInactive', { name: 'label', required: true }, 'maxWidth', 'rounded', 'size'],
+                    outputs: ['dsClick'],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClick: [{
+                type: Output
+            }] } });

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.DsSwitch | typeof d.DsTabGroupNav | typeof d.DsTabGroup | typeof d.DsTable | typeof d.DsTag | typeof d.DsText | 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.DsPanelSubNav | 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.DsTabGroup | typeof d.DsTable | typeof d.DsTag | typeof d.DsText | typeof d.DsTooltipDataViz | typeof d.DsTooltip)[];

package/dist/angular/index.js

@@ -25,6 +25,7 @@ export const DIRECTIVES = [
     d.DsModal,
     d.DsPagination,
     d.DsPanelNav,
+    d.DsPanelSubNav,
     d.DsPanelTools,
     d.DsRadioGroup,
     d.DsSelect,
@@ -34,7 +35,6 @@ export const DIRECTIVES = [
     d.DsSlider,
     d.DsSwitch,
     d.DsTabGroup,
-    d.DsTabGroupNav,
     d.DsTable,
     d.DsTag,
     d.DsText,

package/dist/angular/proxies.d.ts

@@ -27,6 +27,7 @@ export { DsMenu } from './ds-menu';
 export { DsModal } from './ds-modal';
 export { DsPagination } from './ds-pagination';
 export { DsPanelNav } from './ds-panel-nav';
+export { DsPanelSubNav } from './ds-panel-sub-nav';
 export { DsPanelTools } from './ds-panel-tools';
 export { DsRadioGroup } from './ds-radio-group';
 export { DsSelect } from './ds-select';
@@ -36,7 +37,6 @@ 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';

package/dist/angular/proxies.js

@@ -28,6 +28,7 @@ export { DsMenu } from './ds-menu.js';
 export { DsModal } from './ds-modal.js';
 export { DsPagination } from './ds-pagination.js';
 export { DsPanelNav } from './ds-panel-nav.js';
+export { DsPanelSubNav } from './ds-panel-sub-nav.js';
 export { DsPanelTools } from './ds-panel-tools.js';
 export { DsRadioGroup } from './ds-radio-group.js';
 export { DsSelect } from './ds-select.js';
@@ -37,7 +38,6 @@ 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';

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

@@ -1,2 +1,2 @@
-import{p as e,t,H as s,h as n,a as i}from"./index.js";import{D as a,c as o,n as l,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 t=e;const s=t.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(s)return true;const n=t.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(t.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 t=m(e);if(t==="[")return"toggle-panel-nav";if(t==="]")return"close-panel-tools";const s=u[t];if(s)return`open-tool:${s}`;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 o(e)}function z(e){const t=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!t)return{width:0,height:0};const s=t.visualViewport;return{width:Math.round(s?.width??t.innerWidth),height:Math.round(s?.height??t.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,t){if(typeof document==="undefined")return 0;const s=document.createElement("div");s.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+t+");";e.appendChild(s);const n=s.getBoundingClientRect().width;e.removeChild(s);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,t){if(t?.classList.contains("panel-nav--collapsed"))return true;const s=e?.collapsed;return s===true}function j(e,t){return t?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)}.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;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__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 s{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 t=z();this.cachedViewportWidth=t.width;this.cachedViewportHeight=t.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 t=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(t){t.setAttribute("nav-style",this.navStyle);t.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,t){const s=e.style;for(const[e,n]of Object.entries(t)){if(n===null)s.removeProperty(e);else s.setProperty(e,n)}}clearGradientPaintVars(e){const t=[y,_,k];for(const s of e){for(const e of t)s.style.removeProperty(e)}}syncChromeLayoutVars(e,t,s,n){if(e){e.style.setProperty(x,s)}if(t){t.style.setProperty(w,n)}}resolvePanelWidthPx(e){const t=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}const s=this.el.querySelector(".app-shell__panel");const n=s?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return l(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const t=v(e);if(!t)return;e.preventDefault();const s=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(t==="toggle-panel-nav"){void s?.toggleCollapsed();return}if(t==="close-panel-tools"){void n?.closeDrawer();return}if(t.startsWith("open-tool:")&&n){const e=t.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");const s=[this.el,e,t].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(t)t.style.removeProperty(w)};const i=l(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(s);n();return}const a=this.resolveViewportDimensions();const o=this.resolvePanelWidthPx(e);const h=C();const c=D(o);this.syncChromeLayoutVars(e,t,h,c);const p=P(i);const d=S({width:a.width,height:a.height});const f=r(i);for(const e of s){if(e===this.el){this.applyGradientVars(e,{[y]:p,[_]:d,[x]:h,[w]:c,[k]:f});continue}const t=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:p,[_]:d,[k]:f,[x]:t?null:h,[w]:t?c:null})}}render(){const e=this.chromeLayerActive();const t={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"44f9aed7809c500fc5eeb6d760b1c8ef387fd693",class:t},n("div",{key:"933ce38b8edc171bd85eca64af407f4e403b8310",class:"app-shell__row"},n("div",{key:"65a2d40975a0e7ac334906e79a3ccb09ea10add0",class:"app-shell__chrome","aria-hidden":"true"}),n("div",{key:"792e5e7a5fcd9eb05a22a9241b99642e6bb79ff8",class:"app-shell__panel"},n("slot",{key:"04cfbff63d431c39bd95c857edccf0d18bbfe1d0",name:"panel"})),n("div",{key:"2693ad93c70318fa2f956c0637c6e12acdf87a23",class:"app-shell__main"},n("div",{key:"cb770d5008b0541c66d1e6ee5f5743ae6984778b",class:"app-shell__bar"},n("slot",{key:"dfca2c0617ee5376876bdb721582d470621e708e",name:"bar"})),n("div",{key:"4e37b8b38244d6e754fffc3aeb355b3f601eac71",class:"app-shell__tools"},n("slot",{key:"2a0397b368ea5c670c99e85b7cb915a32a7f6526",name:"tools"})),n("div",{key:"cec11b739c1544d5b14848cca0a1eea63426908a",class:"app-shell__content"},n("slot",{key:"5c05c87ab6d7b40bbc3c393d00b2e58314cac39e"})))))}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(t(e))){customElements.define(t(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
+import{p as e,t,H as s,h as n,a as i}from"./index.js";import{D as a,c as o,n as l,s as r}from"./p-D0B9uDTP.js";import{e as h,c,r as d,a as p,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 t=e;const s=t.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(s)return true;const n=t.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(t.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 t=m(e);if(t==="[")return"toggle-panel-nav";if(t==="]")return"close-panel-tools";const s=u[t];if(s)return`open-tool:${s}`;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 o(e)}function z(e){const t=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!t)return{width:0,height:0};const s=t.visualViewport;return{width:Math.round(s?.width??t.innerWidth),height:Math.round(s?.height??t.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,t){if(typeof document==="undefined")return 0;const s=document.createElement("div");s.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+t+");";e.appendChild(s);const n=s.getBoundingClientRect().width;e.removeChild(s);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,t){if(t?.classList.contains("panel-nav--collapsed"))return true;const s=e?.collapsed;return s===true}function j(e,t){return t?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)}.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;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__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 s{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(d(e)!=="panel-nav")return;this.panelNavTransition.enter();const t=z();this.cachedViewportWidth=t.width;this.cachedViewportHeight=t.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(d(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(f,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(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(t){t.setAttribute("nav-style",this.navStyle);t.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,t){const s=e.style;for(const[e,n]of Object.entries(t)){if(n===null)s.removeProperty(e);else s.setProperty(e,n)}}clearGradientPaintVars(e){const t=[y,_,k];for(const s of e){for(const e of t)s.style.removeProperty(e)}}syncChromeLayoutVars(e,t,s,n){if(e){e.style.setProperty(x,s)}if(t){t.style.setProperty(w,n)}}resolvePanelWidthPx(e){const t=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}const s=this.el.querySelector(".app-shell__panel");const n=s?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const s=V(e,t);return j(this.panelWidthTokens,s)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return l(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const t=v(e);if(!t)return;e.preventDefault();const s=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(t==="toggle-panel-nav"){void s?.toggleCollapsed();return}if(t==="close-panel-tools"){void n?.closeDrawer();return}if(t.startsWith("open-tool:")&&n){const e=t.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const t=this.el.querySelector("ds-bar-nav");const s=[this.el,e,t].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(t)t.style.removeProperty(w)};const i=l(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(s);n();return}const a=this.resolveViewportDimensions();const o=this.resolvePanelWidthPx(e);const h=C();const c=D(o);this.syncChromeLayoutVars(e,t,h,c);const d=P(i);const p=S({width:a.width,height:a.height});const f=r(i);for(const e of s){if(e===this.el){this.applyGradientVars(e,{[y]:d,[_]:p,[x]:h,[w]:c,[k]:f});continue}const t=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:d,[_]:p,[k]:f,[x]:t?null:h,[w]:t?c:null})}}render(){const e=this.chromeLayerActive();const t={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"b9732239df41e6df49423883043eaf914aeade7e",class:t},n("div",{key:"620574c9baf20fe9ee913c55b296fcd93d69a5e3",class:"app-shell__row"},n("div",{key:"2aee59513e35474e3ff00f4bca0564ba875b7e88",class:"app-shell__chrome","aria-hidden":"true"}),n("div",{key:"7166ce32755810e4383532b0aea89db91873e2cb",class:"app-shell__panel"},n("slot",{key:"27d92edfc906c171e8e4a8bc6d12b6f915e04d4d",name:"panel"})),n("div",{key:"5f1ba46ecf9d20fb2f961edea38b43ac7cc14c41",class:"app-shell__main"},n("div",{key:"90f6f8154a033a07015d0aebeb4302e4600a1c13",class:"app-shell__bar"},n("slot",{key:"d52182bd0189c42b06613e1bae99c37d0f8ad429",name:"bar"})),n("div",{key:"53b8f7b277996827e5bbd1617f9dba4416bbacfd",class:"app-shell__tools"},n("slot",{key:"f8a57131833f1dc853e4698144110ae4622132f8",name:"tools"})),n("div",{key:"3d64eeea0c15d4043bf62671717729b7f2d0efdf",class:"app-shell__content"},n("slot",{key:"8d1f042b921585f6727a152f66193cc0d87fb72d"})))))}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(t(e))){customElements.define(t(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
 //# sourceMappingURL=ds-app-shell.js.map