@ds-mo/ui 0.6.0 → 0.7.1

package/dist/components/p-DNEqvbOR.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as o,a as r,t as s}from"./index.js";const i=()=>`.text.sc-ds-text{margin:0}.text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--truncate-2.sc-ds-text,.text--truncate-3.sc-ds-text,.text--truncate-4.sc-ds-text,.text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.text--balance.sc-ds-text{text-wrap:balance}.text--pretty.sc-ds-text{text-wrap:pretty}.text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.text--color-inherit.sc-ds-text{color:inherit}.text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.text--italic.sc-ds-text{font-style:italic}.text--align-left.sc-ds-text{text-align:left}.text--align-center.sc-ds-text{text-align:center}.text--align-right.sc-ds-text{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.italic=false;this.lineTruncation="none";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const s={[this.variant]:true,text:true,"text--nowrap":this.wrap==="nowrap","text--balance":this.wrap==="balance","text--pretty":this.wrap==="pretty","text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","text--color-primary":this.color==="primary","text--color-secondary":this.color==="secondary","text--color-tertiary":this.color==="tertiary","text--color-brand":this.color==="brand","text--color-negative":this.color==="negative","text--color-positive":this.color==="positive","text--color-warning":this.color==="warning","text--color-caution":this.color==="caution","text--color-ai":this.color==="ai","text--color-on-strong":this.color==="on-strong","text--color-on-bold":this.color==="on-bold","text--color-inherit":this.color==="inherit","text--decoration-underline":this.decoration==="underline","text--decoration-dotted-underline":this.decoration==="dotted-underline","text--italic":this.italic,"text--align-left":this.align==="left","text--align-center":this.align==="center","text--align-right":this.align==="right"};const i=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;return o(r,{key:"2a96246adf5d1f90ae9fcb4ab4c642d152ada571",style:{display:"contents"}},o(t,{key:"123f40f87c819c15a74da08cd4825b21839299e7",class:s,style:i,...n},o("slot",{key:"d2738dfb791cd34cdfd99434eaa0c931662f6217"})))}static get style(){return i()}},[262,"ds-text",{variant:[1],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],as:[1],for:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(s(t))){customElements.define(s(t),n)}break}}))}c();export{n as T,c as d};
+//# sourceMappingURL=p-DNEqvbOR.js.map

package/dist/components/p-DNEqvbOR.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","italic","lineTruncation","as","render","Tag","isCustomColor","c","startsWith","cls","text","wrap","color","decoration","align","style","undefined","extraProps","for","h","Host","key","display","class"],"sources":["src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":[".text {\n  margin: 0;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n.text--truncate-1 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.text--truncate-2,\n.text--truncate-3,\n.text--truncate-4,\n.text--truncate-5 {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n.text--truncate-2 { -webkit-line-clamp: 2; }\n.text--truncate-3 { -webkit-line-clamp: 3; }\n.text--truncate-4 { -webkit-line-clamp: 4; }\n.text--truncate-5 { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n.text--nowrap {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.text--balance { text-wrap: balance; }\n.text--pretty  { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n.text--color-primary   { color: var(--color-foreground-primary); }\n.text--color-secondary { color: var(--color-foreground-secondary); }\n.text--color-tertiary  { color: var(--color-foreground-tertiary); }\n.text--color-brand     { color: var(--color-foreground-bold-brand); }\n.text--color-negative  { color: var(--color-foreground-bold-negative); }\n.text--color-positive  { color: var(--color-foreground-bold-positive); }\n.text--color-warning   { color: var(--color-foreground-bold-warning); }\n.text--color-caution   { color: var(--color-foreground-bold-caution); }\n.text--color-ai        { color: var(--color-foreground-bold-ai); }\n.text--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.text--color-on-bold   { color: var(--color-foreground-on-bold-background-primary); }\n.text--color-inherit   { color: inherit; }\n\n/* ── Decoration ─────────────────────────────────────────────────────────── */\n\n.text--decoration-underline {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n.text--decoration-dotted-underline {\n  text-decoration: underline dotted;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n.text--italic { font-style: italic; }\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n.text--align-left   { text-align: left; }\n.text--align-center { text-align: center; }\n.text--align-right  { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-large-emphasis'\n  | 'text-body-medium'\n  | 'text-body-medium-emphasis'\n  | 'text-body-small'\n  | 'text-body-small-emphasis'\n  | 'text-caption'\n  | 'text-caption-emphasis';\n\nexport type TextColorToken =\n  | 'primary' | 'secondary' | 'tertiary'\n  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'\n  | 'on-strong' | 'on-bold' | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n@Component({\n  tag: 'ds-text',\n  styleUrl: 'Text.css',\n  scoped: true,\n})\nexport class Text {\n  @Prop() variant: TextVariant = 'text-body-medium';\n  @Prop() color: TextColor | undefined;\n  @Prop() decoration: TextDecoration | undefined;\n  @Prop() italic: boolean = false;\n  @Prop() align: TextAlign | undefined;\n  @Prop() lineTruncation: LineTruncation = 'none';\n  @Prop() wrap: TextWrap | undefined;\n  @Prop() as: TextElement = 'p';\n  /** Maps to `for` attribute on <label> elements. */\n  @Prop() for: string | undefined;\n\n  render() {\n    const Tag = this.as as any;\n    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n    const cls: Record<string, boolean> = {\n      [this.variant]: true,\n      'text': true,\n      'text--nowrap': this.wrap === 'nowrap',\n      'text--balance': this.wrap === 'balance',\n      'text--pretty': this.wrap === 'pretty',\n      'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n      'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n      'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n      'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n      'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n      'text--color-primary':   this.color === 'primary',\n      'text--color-secondary': this.color === 'secondary',\n      'text--color-tertiary':  this.color === 'tertiary',\n      'text--color-brand':     this.color === 'brand',\n      'text--color-negative':  this.color === 'negative',\n      'text--color-positive':  this.color === 'positive',\n      'text--color-warning':   this.color === 'warning',\n      'text--color-caution':   this.color === 'caution',\n      'text--color-ai':        this.color === 'ai',\n      'text--color-on-strong': this.color === 'on-strong',\n      'text--color-on-bold':   this.color === 'on-bold',\n      'text--color-inherit':   this.color === 'inherit',\n      'text--decoration-underline':        this.decoration === 'underline',\n      'text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n      'text--italic': this.italic,\n      'text--align-left':   this.align === 'left',\n      'text--align-center': this.align === 'center',\n      'text--align-right':  this.align === 'right',\n    };\n\n    const style = this.color && isCustomColor(this.color)\n      ? { color: this.color as string }\n      : undefined;\n\n    const extraProps: Record<string, string> = {};\n    if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <Tag class={cls} style={style} {...extraProps}>\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,ghE,MCkCTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAuB,mBAGvBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,GAAkB,GAsD3B,CAlDC,MAAAC,GACE,MAAMC,EAAMN,KAAKI,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,CAACV,KAAKC,SAAU,KAChBU,KAAQ,KACR,eAAgBX,KAAKY,OAAS,SAC9B,gBAAiBZ,KAAKY,OAAS,UAC/B,eAAgBZ,KAAKY,OAAS,SAC9B,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,sBAAyBZ,KAAKa,QAAU,UACxC,wBAAyBb,KAAKa,QAAU,YACxC,uBAAyBb,KAAKa,QAAU,WACxC,oBAAyBb,KAAKa,QAAU,QACxC,uBAAyBb,KAAKa,QAAU,WACxC,uBAAyBb,KAAKa,QAAU,WACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,iBAAyBb,KAAKa,QAAU,KACxC,wBAAyBb,KAAKa,QAAU,YACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,6BAAqCb,KAAKc,aAAe,YACzD,oCAAqCd,KAAKc,aAAe,mBACzD,eAAgBd,KAAKE,OACrB,mBAAsBF,KAAKe,QAAU,OACrC,qBAAsBf,KAAKe,QAAU,SACrC,oBAAsBf,KAAKe,QAAU,SAGvC,MAAMC,EAAQhB,KAAKa,OAASN,EAAcP,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKI,KAAO,SAAWJ,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAE9D,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACN,MAAO,CAAEO,QAAS,aACtBH,EAACd,EAAG,CAAAgB,IAAA,2CAACE,MAAOd,EAAKM,MAAOA,KAAWE,GACjCE,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/types/.stencil/Icon/Icon.d.ts

@@ -0,0 +1,22 @@
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type IconColorToken = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'guide' | 'neutral' | 'faint-brand' | 'faint-negative' | 'faint-positive' | 'faint-warning' | 'faint-caution' | 'faint-ai' | 'faint-neutral' | 'medium-brand' | 'medium-negative' | 'medium-positive' | 'medium-warning' | 'medium-caution' | 'medium-ai' | 'medium-neutral' | 'bold-brand' | 'bold-negative' | 'bold-positive' | 'bold-warning' | 'bold-caution' | 'bold-ai' | 'bold-neutral' | 'strong-brand' | 'strong-negative' | 'strong-positive' | 'strong-warning' | 'strong-caution' | 'strong-ai' | 'strong-neutral' | 'on-strong' | 'on-bold' | 'inherit';
+export type IconColor = IconColorToken | `var(--${string})`;
+export declare class Icon {
+    el: HTMLElement;
+    /** Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`) */
+    name: string;
+    /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */
+    size: IconSize;
+    /** Semantic foreground color token, or a raw CSS var reference. */
+    color: IconColor | undefined;
+    /** Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons. */
+    label: string | undefined;
+    /** Set `true` to look up from the flag icon set instead of the system icon set. */
+    flag: boolean;
+    private get svgString();
+    private updateSvg;
+    onIconChange(): void;
+    componentDidRender(): void;
+    render(): any;
+}
+//# sourceMappingURL=Icon.d.ts.map

package/dist/types/.stencil/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export type { IconSize, IconColorToken, IconColor } from './Icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/.stencil/PanelNav/PanelNav.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PanelNavVariant = 'dashboard' | 'settings';
+export interface PanelNavItem {
+    id: string;
+    icon: string;
+    label: string;
+    /** Show a notification dot badge on the item */
+    dot?: boolean;
+    flag?: boolean;
+}
+export interface PanelNavGroup {
+    id?: string;
+    label?: string;
+    items: PanelNavItem[];
+}
+export declare class PanelNav {
+    /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */
+    variant: PanelNavVariant;
+    /** JSON string of `PanelNavGroup[]` */
+    groups: string;
+    /** ID of the currently active/selected nav item */
+    activeId: string;
+    /** Whether the nav is in collapsed (icon-only) state */
+    collapsed: boolean;
+    /** Display name for the footer user section */
+    userName: string;
+    /** Single character shown in the collapsed avatar */
+    userInitial: string;
+    /** Emitted when a nav item is clicked. Detail = the item's `id`. */
+    dsNavSelect: EventEmitter<string>;
+    /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */
+    dsNavToggle: EventEmitter<boolean>;
+    /** Emitted when the footer left button (gear / dashboard) is clicked. */
+    dsNavFooterAction: EventEmitter<void>;
+    el: HTMLElement;
+    private parsedGroups;
+    private atBottom;
+    onGroupsChange(val: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private checkScroll;
+    private handleBodyScroll;
+    private handleItemClick;
+    private handleToggle;
+    private handleFooterAction;
+    render(): any;
+}
+//# sourceMappingURL=PanelNav.d.ts.map

package/dist/types/.stencil/PanelNav/index.d.ts

@@ -0,0 +1,2 @@
+export type { PanelNavVariant, PanelNavItem, PanelNavGroup } from './PanelNav';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components.d.ts

@@ -14,9 +14,11 @@ import { DividerOrientation } from "./components/Divider/Divider";
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
 import { FadeSide } from "./components/Fade/Fade";
 import { HeaderBackground } from "./components/Header/Header";
+import { IconColor, IconSize } from "./components/Icon/Icon";
 import { InputType } from "./components/Input/Input";
 import { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 import { ModalWidth } from "./components/Modal/Modal";
+import { PanelNavVariant } from "./components/PanelNav/PanelNav";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SidebarWidth } from "./components/Sidebar/Sidebar";
@@ -37,9 +39,11 @@ export { DividerOrientation } from "./components/Divider/Divider";
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
 export { FadeSide } from "./components/Fade/Fade";
 export { HeaderBackground } from "./components/Header/Header";
+export { IconColor, IconSize } from "./components/Icon/Icon";
 export { InputType } from "./components/Input/Input";
 export { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 export { ModalWidth } from "./components/Modal/Modal";
+export { PanelNavVariant } from "./components/PanelNav/PanelNav";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SidebarWidth } from "./components/Sidebar/Sidebar";
@@ -239,6 +243,31 @@ export namespace Components {
         "background": HeaderBackground;
         "heading": string | undefined;
     }
+    interface DsIcon {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference.
+         */
+        "color": IconColor | undefined;
+        /**
+          * Set `true` to look up from the flag icon set instead of the system icon set.
+          * @default false
+         */
+        "flag": boolean;
+        /**
+          * Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons.
+         */
+        "label": string | undefined;
+        /**
+          * Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`)
+          * @default ''
+         */
+        "name": string;
+        /**
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
+         */
+        "size": IconSize;
+    }
     interface DsInput {
         "ariaDescribedby": string | undefined;
         "ariaLabel": string | undefined;
@@ -352,6 +381,38 @@ export namespace Components {
          */
         "totalPages": number;
     }
+    interface DsPanelNav {
+        /**
+          * ID of the currently active/selected nav item
+          * @default ''
+         */
+        "activeId": string;
+        /**
+          * Whether the nav is in collapsed (icon-only) state
+          * @default false
+         */
+        "collapsed": boolean;
+        /**
+          * JSON string of `PanelNavGroup[]`
+          * @default '[]'
+         */
+        "groups": string;
+        /**
+          * Single character shown in the collapsed avatar
+          * @default ''
+         */
+        "userInitial": string;
+        /**
+          * Display name for the footer user section
+          * @default ''
+         */
+        "userName": string;
+        /**
+          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
+          * @default 'dashboard'
+         */
+        "variant": PanelNavVariant;
+    }
     interface DsRadioGroup {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
@@ -682,6 +743,10 @@ export interface DsPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsPaginationElement;
 }
+export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPanelNavElement;
+}
 export interface DsRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsRadioGroupElement;
@@ -840,6 +905,12 @@ declare global {
         prototype: HTMLDsHeaderElement;
         new (): HTMLDsHeaderElement;
     };
+    interface HTMLDsIconElement extends Components.DsIcon, HTMLStencilElement {
+    }
+    var HTMLDsIconElement: {
+        prototype: HTMLDsIconElement;
+        new (): HTMLDsIconElement;
+    };
     interface HTMLDsInputElementEventMap {
         "dsChange": string;
         "dsClear": void;
@@ -916,6 +987,25 @@ declare global {
         prototype: HTMLDsPaginationElement;
         new (): HTMLDsPaginationElement;
     };
+    interface HTMLDsPanelNavElementEventMap {
+        "dsNavSelect": string;
+        "dsNavToggle": boolean;
+        "dsNavFooterAction": void;
+    }
+    interface HTMLDsPanelNavElement extends Components.DsPanelNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsPanelNavElementEventMap>(type: K, listener: (this: HTMLDsPanelNavElement, ev: DsPanelNavCustomEvent<HTMLDsPanelNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsPanelNavElementEventMap>(type: K, listener: (this: HTMLDsPanelNavElement, ev: DsPanelNavCustomEvent<HTMLDsPanelNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsPanelNavElement: {
+        prototype: HTMLDsPanelNavElement;
+        new (): HTMLDsPanelNavElement;
+    };
     interface HTMLDsRadioGroupElementEventMap {
         "dsChange": string;
     }
@@ -1089,11 +1179,13 @@ declare global {
         "ds-fade": HTMLDsFadeElement;
         "ds-field": HTMLDsFieldElement;
         "ds-header": HTMLDsHeaderElement;
+        "ds-icon": HTMLDsIconElement;
         "ds-input": HTMLDsInputElement;
         "ds-loader": HTMLDsLoaderElement;
         "ds-menu": HTMLDsMenuElement;
         "ds-modal": HTMLDsModalElement;
         "ds-pagination": HTMLDsPaginationElement;
+        "ds-panel-nav": HTMLDsPanelNavElement;
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-scrollbar": HTMLDsScrollbarElement;
         "ds-sidebar": HTMLDsSidebarElement;
@@ -1306,6 +1398,31 @@ declare namespace LocalJSX {
         "background"?: HeaderBackground;
         "heading"?: string | undefined;
     }
+    interface DsIcon {
+        /**
+          * Semantic foreground color token, or a raw CSS var reference.
+         */
+        "color"?: IconColor | undefined;
+        /**
+          * Set `true` to look up from the flag icon set instead of the system icon set.
+          * @default false
+         */
+        "flag"?: boolean;
+        /**
+          * Accessible label. Sets `role="img"` and `aria-label`. Omit for decorative icons.
+         */
+        "label"?: string | undefined;
+        /**
+          * Name of the system icon (e.g. `"Gear"`, `"ArrowRight"`) or flag (e.g. `"US"`)
+          * @default ''
+         */
+        "name"?: string;
+        /**
+          * Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px.
+          * @default 'md'
+         */
+        "size"?: IconSize;
+    }
     interface DsInput {
         "ariaDescribedby"?: string | undefined;
         "ariaLabel"?: string | undefined;
@@ -1424,6 +1541,50 @@ declare namespace LocalJSX {
          */
         "totalPages"?: number;
     }
+    interface DsPanelNav {
+        /**
+          * ID of the currently active/selected nav item
+          * @default ''
+         */
+        "activeId"?: string;
+        /**
+          * Whether the nav is in collapsed (icon-only) state
+          * @default false
+         */
+        "collapsed"?: boolean;
+        /**
+          * JSON string of `PanelNavGroup[]`
+          * @default '[]'
+         */
+        "groups"?: string;
+        /**
+          * Emitted when the footer left button (gear / dashboard) is clicked.
+         */
+        "onDsNavFooterAction"?: (event: DsPanelNavCustomEvent<void>) => void;
+        /**
+          * Emitted when a nav item is clicked. Detail = the item's `id`.
+         */
+        "onDsNavSelect"?: (event: DsPanelNavCustomEvent<string>) => void;
+        /**
+          * Emitted when the collapse toggle is clicked. Detail = new collapsed state.
+         */
+        "onDsNavToggle"?: (event: DsPanelNavCustomEvent<boolean>) => void;
+        /**
+          * Single character shown in the collapsed avatar
+          * @default ''
+         */
+        "userInitial"?: string;
+        /**
+          * Display name for the footer user section
+          * @default ''
+         */
+        "userName"?: string;
+        /**
+          * Visual variant: `dashboard` = always-dark surface, `settings` = light surface
+          * @default 'dashboard'
+         */
+        "variant"?: PanelNavVariant;
+    }
     interface DsRadioGroup {
         "ariaLabel"?: string | undefined;
         "ariaLabelledby"?: string | undefined;
@@ -1811,6 +1972,13 @@ declare namespace LocalJSX {
         "heading": string | undefined;
         "background": HeaderBackground;
     }
+    interface DsIconAttributes {
+        "name": string;
+        "size": IconSize;
+        "color": IconColor | undefined;
+        "label": string | undefined;
+        "flag": boolean;
+    }
     interface DsInputAttributes {
         "value": string;
         "placeholder": string | undefined;
@@ -1850,6 +2018,14 @@ declare namespace LocalJSX {
         "siblingCount": number;
         "inactive": boolean;
     }
+    interface DsPanelNavAttributes {
+        "variant": PanelNavVariant;
+        "groups": string;
+        "activeId": string;
+        "collapsed": boolean;
+        "userName": string;
+        "userInitial": string;
+    }
     interface DsRadioGroupAttributes {
         "value": string;
         "direction": 'vertical' | 'horizontal';
@@ -1965,11 +2141,13 @@ declare namespace LocalJSX {
         "ds-fade": Omit<DsFade, keyof DsFadeAttributes> & { [K in keyof DsFade & keyof DsFadeAttributes]?: DsFade[K] } & { [K in keyof DsFade & keyof DsFadeAttributes as `attr:${K}`]?: DsFadeAttributes[K] } & { [K in keyof DsFade & keyof DsFadeAttributes as `prop:${K}`]?: DsFade[K] } & OneOf<"side", DsFade["side"], DsFadeAttributes["side"]>;
         "ds-field": Omit<DsField, keyof DsFieldAttributes> & { [K in keyof DsField & keyof DsFieldAttributes]?: DsField[K] } & { [K in keyof DsField & keyof DsFieldAttributes as `attr:${K}`]?: DsFieldAttributes[K] } & { [K in keyof DsField & keyof DsFieldAttributes as `prop:${K}`]?: DsField[K] } & OneOf<"label", DsField["label"], DsFieldAttributes["label"]>;
         "ds-header": Omit<DsHeader, keyof DsHeaderAttributes> & { [K in keyof DsHeader & keyof DsHeaderAttributes]?: DsHeader[K] } & { [K in keyof DsHeader & keyof DsHeaderAttributes as `attr:${K}`]?: DsHeaderAttributes[K] } & { [K in keyof DsHeader & keyof DsHeaderAttributes as `prop:${K}`]?: DsHeader[K] };
+        "ds-icon": Omit<DsIcon, keyof DsIconAttributes> & { [K in keyof DsIcon & keyof DsIconAttributes]?: DsIcon[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `attr:${K}`]?: DsIconAttributes[K] } & { [K in keyof DsIcon & keyof DsIconAttributes as `prop:${K}`]?: DsIcon[K] };
         "ds-input": Omit<DsInput, keyof DsInputAttributes> & { [K in keyof DsInput & keyof DsInputAttributes]?: DsInput[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `attr:${K}`]?: DsInputAttributes[K] } & { [K in keyof DsInput & keyof DsInputAttributes as `prop:${K}`]?: DsInput[K] };
         "ds-loader": Omit<DsLoader, keyof DsLoaderAttributes> & { [K in keyof DsLoader & keyof DsLoaderAttributes]?: DsLoader[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `attr:${K}`]?: DsLoaderAttributes[K] } & { [K in keyof DsLoader & keyof DsLoaderAttributes as `prop:${K}`]?: DsLoader[K] };
         "ds-menu": Omit<DsMenu, keyof DsMenuAttributes> & { [K in keyof DsMenu & keyof DsMenuAttributes]?: DsMenu[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `attr:${K}`]?: DsMenuAttributes[K] } & { [K in keyof DsMenu & keyof DsMenuAttributes as `prop:${K}`]?: DsMenu[K] };
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
         "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
+        "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
         "ds-radio-group": Omit<DsRadioGroup, keyof DsRadioGroupAttributes> & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes]?: DsRadioGroup[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `attr:${K}`]?: DsRadioGroupAttributes[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `prop:${K}`]?: DsRadioGroup[K] };
         "ds-scrollbar": Omit<DsScrollbar, keyof DsScrollbarAttributes> & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes]?: DsScrollbar[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `attr:${K}`]?: DsScrollbarAttributes[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `prop:${K}`]?: DsScrollbar[K] };
         "ds-sidebar": Omit<DsSidebar, keyof DsSidebarAttributes> & { [K in keyof DsSidebar & keyof DsSidebarAttributes]?: DsSidebar[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `attr:${K}`]?: DsSidebarAttributes[K] } & { [K in keyof DsSidebar & keyof DsSidebarAttributes as `prop:${K}`]?: DsSidebar[K] };
@@ -2001,11 +2179,13 @@ declare module "@stencil/core" {
             "ds-fade": LocalJSX.IntrinsicElements["ds-fade"] & JSXBase.HTMLAttributes<HTMLDsFadeElement>;
             "ds-field": LocalJSX.IntrinsicElements["ds-field"] & JSXBase.HTMLAttributes<HTMLDsFieldElement>;
             "ds-header": LocalJSX.IntrinsicElements["ds-header"] & JSXBase.HTMLAttributes<HTMLDsHeaderElement>;
+            "ds-icon": LocalJSX.IntrinsicElements["ds-icon"] & JSXBase.HTMLAttributes<HTMLDsIconElement>;
             "ds-input": LocalJSX.IntrinsicElements["ds-input"] & JSXBase.HTMLAttributes<HTMLDsInputElement>;
             "ds-loader": LocalJSX.IntrinsicElements["ds-loader"] & JSXBase.HTMLAttributes<HTMLDsLoaderElement>;
             "ds-menu": LocalJSX.IntrinsicElements["ds-menu"] & JSXBase.HTMLAttributes<HTMLDsMenuElement>;
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
             "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
+            "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
             "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
             "ds-scrollbar": LocalJSX.IntrinsicElements["ds-scrollbar"] & JSXBase.HTMLAttributes<HTMLDsScrollbarElement>;
             "ds-sidebar": LocalJSX.IntrinsicElements["ds-sidebar"] & JSXBase.HTMLAttributes<HTMLDsSidebarElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -66,6 +66,7 @@
     "@storybook/addon-docs": "^8.6.18",
     "@storybook/web-components": "^8.6.18",
     "@storybook/web-components-vite": "^8.6.18",
+    "concurrently": "^9.2.1",
     "eslint": "^9.39.4",
     "globals": "^17.6.0",
     "lit": "^3.3.3",

package/src/angular/index.ts

@@ -14,11 +14,13 @@ export const DIRECTIVES = [
   d.DsFade,
   d.DsField,
   d.DsHeader,
+  d.DsIcon,
   d.DsInput,
   d.DsLoader,
   d.DsMenu,
   d.DsModal,
   d.DsPagination,
+  d.DsPanelNav,
   d.DsRadioGroup,
   d.DsScrollbar,
   d.DsSidebar,

package/src/angular/proxies.ts

@@ -316,6 +316,29 @@ export class DsHeader {
 export declare interface DsHeader extends Components.DsHeader {}
 
 
+@ProxyCmp({
+  inputs: ['color', 'flag', 'label', 'name', 'size']
+})
+@Component({
+  selector: 'ds-icon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['color', 'flag', 'label', 'name', 'size'],
+  standalone: false
+})
+export class DsIcon {
+  protected el: HTMLDsIconElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsIcon extends Components.DsIcon {}
+
+
 @ProxyCmp({
   inputs: ['ariaDescribedby', 'ariaLabel', 'ariaLabelledby', 'autoFocus', 'error', 'errorMessage', 'inactive', 'inputId', 'placeholder', 'type', 'value'],
   methods: ['setFocus']
@@ -460,6 +483,46 @@ export declare interface DsPagination extends Components.DsPagination {
 }
 
 
+@ProxyCmp({
+  inputs: ['activeId', 'collapsed', 'groups', 'userInitial', 'userName', 'variant']
+})
+@Component({
+  selector: 'ds-panel-nav',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['activeId', 'collapsed', 'groups', 'userInitial', 'userName', 'variant'],
+  outputs: ['dsNavSelect', 'dsNavToggle', 'dsNavFooterAction'],
+  standalone: false
+})
+export class DsPanelNav {
+  protected el: HTMLDsPanelNavElement;
+  @Output() dsNavSelect = new EventEmitter<CustomEvent<string>>();
+  @Output() dsNavToggle = new EventEmitter<CustomEvent<boolean>>();
+  @Output() dsNavFooterAction = new EventEmitter<CustomEvent<void>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsPanelNav extends Components.DsPanelNav {
+  /**
+   * Emitted when a nav item is clicked. Detail = the item's `id`.
+   */
+  dsNavSelect: EventEmitter<CustomEvent<string>>;
+  /**
+   * Emitted when the collapse toggle is clicked. Detail = new collapsed state.
+   */
+  dsNavToggle: EventEmitter<CustomEvent<boolean>>;
+  /**
+   * Emitted when the footer left button (gear / dashboard) is clicked.
+   */
+  dsNavFooterAction: EventEmitter<CustomEvent<void>>;
+}
+
+
 @ProxyCmp({
   inputs: ['ariaLabel', 'ariaLabelledby', 'direction', 'inactive', 'options', 'value']
 })