@ds-mo/ui 1.0.2 → 1.2.0

package/dist/types/components.d.ts

@@ -13,13 +13,12 @@ import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
 import { ButtonGroupElevation, ButtonGroupItem, ButtonGroupSize } from "./components/ButtonGroup/ButtonGroup";
 import { CardElevation, CardRadius } from "./components/Card/Card";
-import { DividerOrientation } from "./components/Divider/Divider";
+import { DividerInset, DividerLength, DividerOrientation, DividerSurface } 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 { LabelWrapSize } from "./components/LabelWrap/LabelWrap";
 import { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 import { ModalWidth } from "./components/Modal/Modal";
 import { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
@@ -31,9 +30,10 @@ import { SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 import { TabItem } from "./components/TabGroup/tab-item-utils";
 import { TabBackground } from "./components/TabGroup/TabGroup";
+import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 import { SortState, TableColumn } from "./components/Table/Table";
 import { TagBackground, TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
-import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextVariant, TextWrap } from "./components/Text/Text";
+import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
 import { ToastPosition } from "./components/Toast/Toast";
 import { ToggleButtonBackground, ToggleButtonElevation, ToggleButtonSize } from "./components/ToggleButton/ToggleButton";
 import { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGroupSize } from "./components/ToggleButtonGroup/ToggleButtonGroup";
@@ -46,13 +46,12 @@ export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
 export { ButtonGroupElevation, ButtonGroupItem, ButtonGroupSize } from "./components/ButtonGroup/ButtonGroup";
 export { CardElevation, CardRadius } from "./components/Card/Card";
-export { DividerOrientation } from "./components/Divider/Divider";
+export { DividerInset, DividerLength, DividerOrientation, DividerSurface } 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 { LabelWrapSize } from "./components/LabelWrap/LabelWrap";
 export { MenuAlign, MenuItemData, MenuSection, MenuSide } from "./components/Menu/Menu";
 export { ModalWidth } from "./components/Modal/Modal";
 export { PanelNavGroup, PanelNavRouterMode, PanelNavVariant } from "./components/PanelNav/PanelNav";
@@ -64,9 +63,10 @@ export { SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 export { TabItem } from "./components/TabGroup/tab-item-utils";
 export { TabBackground } from "./components/TabGroup/TabGroup";
+export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 export { SortState, TableColumn } from "./components/Table/Table";
 export { TagBackground, TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
-export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextVariant, TextWrap } from "./components/Text/Text";
+export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/Text";
 export { ToastPosition } from "./components/Toast/Toast";
 export { ToggleButtonBackground, ToggleButtonElevation, ToggleButtonSize } from "./components/ToggleButton/ToggleButton";
 export { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGroupSize } from "./components/ToggleButtonGroup/ToggleButtonGroup";
@@ -319,11 +319,31 @@ export namespace Components {
         "label": string;
     }
     interface DsDivider {
+        /**
+          * Insets the divider from its start/end edges. Accepts spacing token names or any CSS length.
+          * @default 'none'
+         */
+        "inset": DividerInset;
+        /**
+          * Visual line length. Defaults to filling the available axis. Accepts any CSS length.
+          * @default 'auto'
+         */
+        "length": DividerLength;
         /**
           * Direction of the divider line. Defaults to 'horizontal'.
           * @default 'horizontal'
          */
         "orientation": DividerOrientation;
+        /**
+          * Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default.
+          * @default false
+         */
+        "semantic": boolean;
+        /**
+          * Surface context so the divider uses the right TokoMo divider token.
+          * @default 'default'
+         */
+        "surface": DividerSurface;
     }
     interface DsEmptyState {
         "message": string | undefined;
@@ -415,23 +435,6 @@ export namespace Components {
          */
         "value": string;
     }
-    /**
-     * Internal utility wrapper that kills line-height struts and adds optical
-     * horizontal padding. Used inside interactive components (Button, Tag, etc.)
-     * Not intended as a standalone consumer-facing component — internal use only.
-     */
-    interface DsLabelWrap {
-        /**
-          * Typography size — controls optical horizontal padding.
-          * @default 'md'
-         */
-        "size": LabelWrapSize;
-        /**
-          * Enable truncation with ellipsis — use inside full-width containers.
-          * @default false
-         */
-        "truncate": boolean;
-    }
     interface DsLoader {
         /**
           * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
@@ -748,6 +751,23 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DsTabGroupNav {
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "background": TabGroupNavBackground | undefined;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs": TabItem[];
+        /**
+          * @default ''
+         */
+        "value": string;
+    }
     interface DsTable {
         /**
           * @default []
@@ -830,6 +850,10 @@ export namespace Components {
         "as": TextElement;
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
+        /**
+          * @default 'normal'
+         */
+        "fontFeature": TextFontFeature;
         /**
           * Maps to `for` attribute on <label> elements.
          */
@@ -1038,6 +1062,10 @@ export interface DsTabGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTabGroupElement;
 }
+export interface DsTabGroupNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTabGroupNavElement;
+}
 export interface DsTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableElement;
@@ -1264,17 +1292,6 @@ declare global {
         prototype: HTMLDsInputElement;
         new (): HTMLDsInputElement;
     };
-    /**
-     * Internal utility wrapper that kills line-height struts and adds optical
-     * horizontal padding. Used inside interactive components (Button, Tag, etc.)
-     * Not intended as a standalone consumer-facing component — internal use only.
-     */
-    interface HTMLDsLabelWrapElement extends Components.DsLabelWrap, HTMLStencilElement {
-    }
-    var HTMLDsLabelWrapElement: {
-        prototype: HTMLDsLabelWrapElement;
-        new (): HTMLDsLabelWrapElement;
-    };
     interface HTMLDsLoaderElement extends Components.DsLoader, HTMLStencilElement {
     }
     var HTMLDsLoaderElement: {
@@ -1457,6 +1474,23 @@ declare global {
         prototype: HTMLDsTabGroupElement;
         new (): HTMLDsTabGroupElement;
     };
+    interface HTMLDsTabGroupNavElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsTabGroupNavElement extends Components.DsTabGroupNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[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 HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[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 HTMLDsTabGroupNavElement: {
+        prototype: HTMLDsTabGroupNavElement;
+        new (): HTMLDsTabGroupNavElement;
+    };
     interface HTMLDsTableElementEventMap {
         "dsSort": { columnId: string };
         "dsRowClick": { row: unknown; rowIndex: number };
@@ -1582,7 +1616,6 @@ declare global {
         "ds-header": HTMLDsHeaderElement;
         "ds-icon": HTMLDsIconElement;
         "ds-input": HTMLDsInputElement;
-        "ds-label-wrap": HTMLDsLabelWrapElement;
         "ds-loader": HTMLDsLoaderElement;
         "ds-menu": HTMLDsMenuElement;
         "ds-modal": HTMLDsModalElement;
@@ -1596,6 +1629,7 @@ declare global {
         "ds-slider": HTMLDsSliderElement;
         "ds-surface": HTMLDsSurfaceElement;
         "ds-tab-group": HTMLDsTabGroupElement;
+        "ds-tab-group-nav": HTMLDsTabGroupNavElement;
         "ds-table": HTMLDsTableElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
@@ -1879,11 +1913,31 @@ declare namespace LocalJSX {
         "onDsChange"?: (event: DsCheckboxCustomEvent<boolean>) => void;
     }
     interface DsDivider {
+        /**
+          * Insets the divider from its start/end edges. Accepts spacing token names or any CSS length.
+          * @default 'none'
+         */
+        "inset"?: DividerInset;
+        /**
+          * Visual line length. Defaults to filling the available axis. Accepts any CSS length.
+          * @default 'auto'
+         */
+        "length"?: DividerLength;
         /**
           * Direction of the divider line. Defaults to 'horizontal'.
           * @default 'horizontal'
          */
         "orientation"?: DividerOrientation;
+        /**
+          * Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default.
+          * @default false
+         */
+        "semantic"?: boolean;
+        /**
+          * Surface context so the divider uses the right TokoMo divider token.
+          * @default 'default'
+         */
+        "surface"?: DividerSurface;
     }
     interface DsEmptyState {
         "message"?: string | undefined;
@@ -1976,23 +2030,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    /**
-     * Internal utility wrapper that kills line-height struts and adds optical
-     * horizontal padding. Used inside interactive components (Button, Tag, etc.)
-     * Not intended as a standalone consumer-facing component — internal use only.
-     */
-    interface DsLabelWrap {
-        /**
-          * Typography size — controls optical horizontal padding.
-          * @default 'md'
-         */
-        "size"?: LabelWrapSize;
-        /**
-          * Enable truncation with ellipsis — use inside full-width containers.
-          * @default false
-         */
-        "truncate"?: boolean;
-    }
     interface DsLoader {
         /**
           * Accessible label for standalone usage. Wraps the spinner in a live region and renders the label visually-hidden. Omit when the host element already conveys busy state via aria-busy.
@@ -2338,6 +2375,24 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DsTabGroupNav {
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        "background"?: TabGroupNavBackground | undefined;
+        "onDsChange"?: (event: DsTabGroupNavCustomEvent<string>) => void;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs"?: TabItem[];
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
     interface DsTable {
         /**
           * @default []
@@ -2435,6 +2490,10 @@ declare namespace LocalJSX {
         "as"?: TextElement;
         "color"?: TextColor | undefined;
         "decoration"?: TextDecoration | undefined;
+        /**
+          * @default 'normal'
+         */
+        "fontFeature"?: TextFontFeature;
         /**
           * Maps to `for` attribute on <label> elements.
          */
@@ -2656,6 +2715,10 @@ declare namespace LocalJSX {
     }
     interface DsDividerAttributes {
         "orientation": DividerOrientation;
+        "surface": DividerSurface;
+        "inset": DividerInset;
+        "length": DividerLength;
+        "semantic": boolean;
     }
     interface DsEmptyStateAttributes {
         "type": EmptyStateType;
@@ -2694,10 +2757,6 @@ declare namespace LocalJSX {
         "ariaLabelledby": string | undefined;
         "ariaDescribedby": string | undefined;
     }
-    interface DsLabelWrapAttributes {
-        "size": LabelWrapSize;
-        "truncate": boolean;
-    }
     interface DsLoaderAttributes {
         "size": number;
         "label": string | undefined;
@@ -2797,6 +2856,13 @@ declare namespace LocalJSX {
         "ariaLabelledby": string | undefined;
         "orientation": 'horizontal' | 'vertical';
     }
+    interface DsTabGroupNavAttributes {
+        "value": string;
+        "background": TabGroupNavBackground | undefined;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "orientation": 'horizontal' | 'vertical';
+    }
     interface DsTableAttributes {
         "loading": boolean;
         "emptyMessage": string;
@@ -2826,6 +2892,7 @@ declare namespace LocalJSX {
         "align": TextAlign | undefined;
         "lineTruncation": string;
         "wrap": TextWrap | undefined;
+        "fontFeature": TextFontFeature;
         "as": TextElement;
         "for": string | undefined;
     }
@@ -2883,7 +2950,6 @@ declare namespace LocalJSX {
         "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-label-wrap": Omit<DsLabelWrap, keyof DsLabelWrapAttributes> & { [K in keyof DsLabelWrap & keyof DsLabelWrapAttributes]?: DsLabelWrap[K] } & { [K in keyof DsLabelWrap & keyof DsLabelWrapAttributes as `attr:${K}`]?: DsLabelWrapAttributes[K] } & { [K in keyof DsLabelWrap & keyof DsLabelWrapAttributes as `prop:${K}`]?: DsLabelWrap[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"]>;
@@ -2897,6 +2963,7 @@ declare namespace LocalJSX {
         "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] } & OneOf<"label", DsSlider["label"], DsSliderAttributes["label"]>;
         "ds-surface": Omit<DsSurface, keyof DsSurfaceAttributes> & { [K in keyof DsSurface & keyof DsSurfaceAttributes]?: DsSurface[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `attr:${K}`]?: DsSurfaceAttributes[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `prop:${K}`]?: DsSurface[K] };
         "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
+        "ds-tab-group-nav": Omit<DsTabGroupNav, keyof DsTabGroupNavAttributes> & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes]?: DsTabGroupNav[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `attr:${K}`]?: DsTabGroupNavAttributes[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `prop:${K}`]?: DsTabGroupNav[K] };
         "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] };
         "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
@@ -2928,12 +2995,6 @@ declare module "@stencil/core" {
             "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>;
-            /**
-             * Internal utility wrapper that kills line-height struts and adds optical
-             * horizontal padding. Used inside interactive components (Button, Tag, etc.)
-             * Not intended as a standalone consumer-facing component — internal use only.
-             */
-            "ds-label-wrap": LocalJSX.IntrinsicElements["ds-label-wrap"] & JSXBase.HTMLAttributes<HTMLDsLabelWrapElement>;
             "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>;
@@ -2947,6 +3008,7 @@ declare module "@stencil/core" {
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
             "ds-surface": LocalJSX.IntrinsicElements["ds-surface"] & JSXBase.HTMLAttributes<HTMLDsSurfaceElement>;
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
+            "ds-tab-group-nav": LocalJSX.IntrinsicElements["ds-tab-group-nav"] & JSXBase.HTMLAttributes<HTMLDsTabGroupNavElement>;
             "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -23,20 +23,35 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/components/index.d.ts",
+  "types": "./src/wc/components.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/components/index.js",
-      "types": "./dist/components/index.d.ts"
+      "types": "./src/wc/components.d.ts",
+      "import": "./dist/components/index.js"
     },
     "./angular": {
+      "types": "./src/angular/index.ts",
       "import": "./src/angular/index.ts"
     },
+    "./react": {
+      "types": "./src/react/components.ts",
+      "import": "./src/react/components.ts"
+    },
+    "./dist/components": {
+      "types": "./src/wc/components.d.ts",
+      "import": "./dist/components/index.js"
+    },
     "./dist/components/*": "./dist/components/*"
   },
   "files": [
     "dist",
-    "src/angular"
+    "src/wc/components.d.ts",
+    "src/wc/components/**/*.ts",
+    "src/wc/components/**/*.tsx",
+    "!src/wc/components/**/*.stories.ts",
+    "!src/wc/components/**/*.stories.tsx",
+    "src/angular",
+    "src/react"
   ],
   "scripts": {
     "prebuild": "node scripts/generate-icon-catalog.mjs",
@@ -58,24 +73,39 @@
   },
   "peerDependencies": {
     "@ds-mo/icons": "^6.0.0",
-    "@ds-mo/tokens": ">=2.9.0"
+    "@ds-mo/tokens": ">=2.9.0",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@ds-mo/icons": "^6.0.0",
-    "@ds-mo/tokens": "^2.9.0",
+    "@ds-mo/tokens": "^2.9.1",
     "@eslint/js": "^10.0.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@playwright/test": "^1.55.0",
     "@stencil/angular-output-target": "^1.3.1",
     "@stencil/core": "^4.43.4",
+    "@stencil/react-output-target": "^1.5.3",
     "@storybook/addon-docs": "^10.4.2",
     "@storybook/web-components": "^10.4.2",
     "@storybook/web-components-vite": "^10.4.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "concurrently": "^10.0.3",
     "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.6.0",
     "lit": "^3.3.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "storybook": "^10.4.2",
     "tsx": "^4.20.3",
     "typescript": "~5.8.3",

package/src/angular/index.ts

@@ -19,7 +19,6 @@ export const DIRECTIVES = [
   d.DsHeader,
   d.DsIcon,
   d.DsInput,
-  d.DsLabelWrap,
   d.DsLoader,
   d.DsMenu,
   d.DsModal,
@@ -33,6 +32,7 @@ export const DIRECTIVES = [
   d.DsSlider,
   d.DsSurface,
   d.DsTabGroup,
+  d.DsTabGroupNav,
   d.DsTable,
   d.DsTag,
   d.DsText,

package/src/angular/proxies.ts

@@ -297,14 +297,14 @@ export declare interface DsCheckbox extends Components.DsCheckbox {
 
 
 @ProxyCmp({
-  inputs: ['orientation']
+  inputs: ['inset', 'length', 'orientation', 'semantic', 'surface']
 })
 @Component({
   selector: 'ds-divider',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['orientation'],
+  inputs: ['inset', 'length', 'orientation', 'semantic', 'surface'],
   standalone: false
 })
 export class DsDivider {
@@ -466,29 +466,6 @@ export declare interface DsInput extends Components.DsInput {
 }
 
 
-@ProxyCmp({
-  inputs: ['size', 'truncate']
-})
-@Component({
-  selector: 'ds-label-wrap',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['size', 'truncate'],
-  standalone: false
-})
-export class DsLabelWrap {
-  protected el: HTMLDsLabelWrapElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsLabelWrap extends Components.DsLabelWrap {}
-
-
 @ProxyCmp({
   inputs: ['label', 'size']
 })
@@ -862,6 +839,34 @@ export declare interface DsTabGroup extends Components.DsTabGroup {
 }
 
 
+@ProxyCmp({
+  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value']
+})
+@Component({
+  selector: 'ds-tab-group-nav',
+  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'],
+  outputs: ['dsChange'],
+  standalone: false
+})
+export class DsTabGroupNav {
+  protected el: HTMLDsTabGroupNavElement;
+  @Output() dsChange = new EventEmitter<CustomEvent<string>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsTabGroupNav extends Components.DsTabGroupNav {
+
+  dsChange: EventEmitter<CustomEvent<string>>;
+}
+
+
 @ProxyCmp({
   inputs: ['columns', 'data', 'emptyMessage', 'loading', 'pageIndex', 'pageSize', 'selectedRows', 'sortState']
 })
@@ -937,14 +942,14 @@ export declare interface DsTag extends Components.DsTag {
 
 
 @ProxyCmp({
-  inputs: ['align', 'as', 'color', 'decoration', 'for', 'italic', 'lineTruncation', 'variant', 'wrap']
+  inputs: ['align', 'as', 'color', 'decoration', 'fontFeature', 'for', 'italic', 'lineTruncation', 'variant', 'wrap']
 })
 @Component({
   selector: 'ds-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['align', 'as', 'color', 'decoration', 'for', 'italic', 'lineTruncation', 'variant', 'wrap'],
+  inputs: ['align', 'as', 'color', 'decoration', 'fontFeature', 'for', 'italic', 'lineTruncation', 'variant', 'wrap'],
   standalone: false
 })
 export class DsText {

package/src/react/components.ts

@@ -0,0 +1,45 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+export { DsAccordion } from "./ds-accordion.js";
+export { DsBadge } from "./ds-badge.js";
+export { DsBanner } from "./ds-banner.js";
+export { DsBarNavAction } from "./ds-bar-nav-action.js";
+export { DsBarNav } from "./ds-bar-nav.js";
+export { DsBreadcrumb } from "./ds-breadcrumb.js";
+export { DsButtonGroup } from "./ds-button-group.js";
+export { DsButton } from "./ds-button.js";
+export { DsCard } from "./ds-card.js";
+export { DsCheckbox } from "./ds-checkbox.js";
+export { DsDivider } from "./ds-divider.js";
+export { DsEmptyState } from "./ds-empty-state.js";
+export { DsFade } from "./ds-fade.js";
+export { DsField } from "./ds-field.js";
+export { DsHeader } from "./ds-header.js";
+export { DsIcon } from "./ds-icon.js";
+export { DsInput } from "./ds-input.js";
+export { DsLoader } from "./ds-loader.js";
+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 { DsRadioGroup } from "./ds-radio-group.js";
+export { DsScrollbar } from "./ds-scrollbar.js";
+export { DsSelect } from "./ds-select.js";
+export { DsSidebar } from "./ds-sidebar.js";
+export { DsSkeleton } from "./ds-skeleton.js";
+export { DsSlider } from "./ds-slider.js";
+export { DsSurface } from "./ds-surface.js";
+export { DsTabGroupNav } from "./ds-tab-group-nav.js";
+export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTable } from "./ds-table.js";
+export { DsTag } from "./ds-tag.js";
+export { DsText } from "./ds-text.js";
+export { DsToastProvider } from "./ds-toast-provider.js";
+export { DsToggleButtonGroup } from "./ds-toggle-button-group.js";
+export { DsToggleButton } from "./ds-toggle-button.js";
+export { DsToggle } from "./ds-toggle.js";
+export { DsTooltip } from "./ds-tooltip.js";

package/src/react/ds-accordion.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsAccordionCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsAccordion as DsAccordionElement, defineCustomElement as defineDsAccordion } from "@ds-mo/ui/dist/components/ds-accordion.js";
+
+export type DsAccordionEvents = { onDsExpandedChange: EventName<DsAccordionCustomEvent<string[]>> };
+
+export const DsAccordion: StencilReactComponent<DsAccordionElement, DsAccordionEvents, Components.DsAccordion> = /*@__PURE__*/ createComponent<DsAccordionElement, DsAccordionEvents, Components.DsAccordion>({
+    tagName: 'ds-accordion',
+    elementClass: DsAccordionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsExpandedChange: 'dsExpandedChange' } as DsAccordionEvents,
+    defineCustomElement: defineDsAccordion
+});