@ds-mo/ui 1.1.0 → 1.3.0

package/src/wc/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AccordionItemData } from "./components/Accordion/Accordion";
+import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 import { BarNavActionItem, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
 import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
@@ -13,13 +14,13 @@ 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 { ChipBackground, ChipContrast, ChipElevation, ChipIntent, ChipSize } from "./components/Chip/Chip";
+import { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 import { EmptyStateType } from "./components/EmptyState/EmptyState";
-import { FadeSide } from "./components/Fade/Fade";
+import { FadeSide, FadeSize, FadeSurface } 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";
@@ -33,13 +34,14 @@ 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 { TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
+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";
 import { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export { AccordionItemData } from "./components/Accordion/Accordion";
+export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 export { BarNavActionItem, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
 export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
@@ -47,13 +49,13 @@ 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 { ChipBackground, ChipContrast, ChipElevation, ChipIntent, ChipSize } from "./components/Chip/Chip";
+export { DividerInset, DividerLength, DividerOrientation, DividerSurface } from "./components/Divider/Divider";
 export { EmptyStateType } from "./components/EmptyState/EmptyState";
-export { FadeSide } from "./components/Fade/Fade";
+export { FadeSide, FadeSize, FadeSurface } 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";
@@ -67,8 +69,8 @@ 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 { TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
+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";
@@ -91,10 +93,16 @@ export namespace Components {
     }
     interface DsBadge {
         /**
+          * Direct ring background override for component-local surfaces.
+         */
+        "background": string | undefined;
+        /**
+          * Count shown for counter badges. Count 0 hides the badge.
           * @default 0
          */
         "count": number;
         /**
+          * Deprecated alias for selected counter styling. Prefer context-specific color in the parent.
           * @default false
          */
         "isSelected": boolean;
@@ -102,6 +110,21 @@ export namespace Components {
           * Accessible label. Defaults to the count as a string.
          */
         "label": string | undefined;
+        /**
+          * Highest count shown before compacting to "+".
+          * @default 9
+         */
+        "max": number;
+        /**
+          * Surface context for the ring around dots.
+          * @default 'default'
+         */
+        "surface": BadgeSurface;
+        /**
+          * Render as a compact counter or notification dot.
+          * @default 'counter'
+         */
+        "variant": BadgeVariant;
     }
     interface DsBanner {
         /**
@@ -320,12 +343,69 @@ export namespace Components {
         "indeterminate": boolean;
         "label": string;
     }
+    interface DsChip {
+        "background": ChipBackground | undefined;
+        /**
+          * @default 'faint'
+         */
+        "contrast": ChipContrast;
+        /**
+          * @default 'none'
+         */
+        "elevation": ChipElevation;
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * @default 'neutral'
+         */
+        "intent": ChipIntent;
+        "label": string;
+        "maxWidth": string | number | undefined;
+        /**
+          * @default false
+         */
+        "pressed": boolean;
+        /**
+          * @default false
+         */
+        "removable": boolean;
+        /**
+          * @default false
+         */
+        "rounded": boolean;
+        /**
+          * @default 'md'
+         */
+        "size": ChipSize;
+    }
     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;
@@ -336,15 +416,34 @@ export namespace Components {
     }
     interface DsFade {
         /**
-          * Background color to fade from. Defaults to var(--color-background-secondary).
+          * Direct background override for contexts that already expose a resolved surface var.
           * @default 'var(--color-background-secondary)'
          */
         "background": string;
         /**
-          * Height (or width for left/right) of the fade overlay — any CSS value.
+          * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length. Prefer `size`.
          */
         "height": string | undefined;
+        /**
+          * Edge where the fade is anchored.
+          * @default 'bottom'
+         */
         "side": FadeSide;
+        /**
+          * Fade depth along the fade axis. Accepts dimension size token names or any CSS length.
+          * @default 'size-600'
+         */
+        "size": FadeSize;
+        /**
+          * Surface context used to choose the fade target background token.
+          * @default 'default'
+         */
+        "surface": FadeSurface;
+        /**
+          * Controls visibility without removing the element from layout/positioning.
+          * @default true
+         */
+        "visible": boolean;
     }
     interface DsField {
         /**
@@ -417,23 +516,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.
@@ -800,7 +882,6 @@ export namespace Components {
         "sortState": SortState | undefined;
     }
     interface DsTag {
-        "background": TagBackground | undefined;
         /**
           * @default 'faint'
          */
@@ -809,29 +890,12 @@ export namespace Components {
           * @default 'none'
          */
         "elevation": TagElevation;
-        /**
-          * @default false
-         */
-        "inactive": boolean;
         /**
           * @default 'neutral'
          */
         "intent": TagIntent;
-        /**
-          * Whether the tag has a click/toggle behavior.
-          * @default false
-         */
-        "interactive": boolean;
         "label": string;
         "maxWidth": string | number | undefined;
-        /**
-          * @default false
-         */
-        "pressed": boolean;
-        /**
-          * @default false
-         */
-        "removable": boolean;
         /**
           * @default false
          */
@@ -849,6 +913,10 @@ export namespace Components {
         "as": TextElement;
         "color": TextColor | undefined;
         "decoration": TextDecoration | undefined;
+        /**
+          * @default 'normal'
+         */
+        "fontFeature": TextFontFeature;
         /**
           * Maps to `for` attribute on <label> elements.
          */
@@ -1017,6 +1085,10 @@ export interface DsCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsCheckboxElement;
 }
+export interface DsChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsChipElement;
+}
 export interface DsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsInputElement;
@@ -1065,10 +1137,6 @@ export interface DsTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableElement;
 }
-export interface DsTagCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLDsTagElement;
-}
 export interface DsToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsToggleElement;
@@ -1233,6 +1301,25 @@ declare global {
         prototype: HTMLDsCheckboxElement;
         new (): HTMLDsCheckboxElement;
     };
+    interface HTMLDsChipElementEventMap {
+        "dsRemove": void;
+        "dsClick": void;
+        "dsPressedChange": boolean;
+    }
+    interface HTMLDsChipElement extends Components.DsChip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsChipElementEventMap>(type: K, listener: (this: HTMLDsChipElement, ev: DsChipCustomEvent<HTMLDsChipElementEventMap[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 HTMLDsChipElementEventMap>(type: K, listener: (this: HTMLDsChipElement, ev: DsChipCustomEvent<HTMLDsChipElementEventMap[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 HTMLDsChipElement: {
+        prototype: HTMLDsChipElement;
+        new (): HTMLDsChipElement;
+    };
     interface HTMLDsDividerElement extends Components.DsDivider, HTMLStencilElement {
     }
     var HTMLDsDividerElement: {
@@ -1287,17 +1374,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: {
@@ -1516,20 +1592,7 @@ declare global {
         prototype: HTMLDsTableElement;
         new (): HTMLDsTableElement;
     };
-    interface HTMLDsTagElementEventMap {
-        "dsRemove": void;
-        "dsClick": void;
-        "dsPressedChange": boolean;
-    }
     interface HTMLDsTagElement extends Components.DsTag, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLDsTagElementEventMap>(type: K, listener: (this: HTMLDsTagElement, ev: DsTagCustomEvent<HTMLDsTagElementEventMap[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 HTMLDsTagElementEventMap>(type: K, listener: (this: HTMLDsTagElement, ev: DsTagCustomEvent<HTMLDsTagElementEventMap[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 HTMLDsTagElement: {
         prototype: HTMLDsTagElement;
@@ -1615,6 +1678,7 @@ declare global {
         "ds-button-group": HTMLDsButtonGroupElement;
         "ds-card": HTMLDsCardElement;
         "ds-checkbox": HTMLDsCheckboxElement;
+        "ds-chip": HTMLDsChipElement;
         "ds-divider": HTMLDsDividerElement;
         "ds-empty-state": HTMLDsEmptyStateElement;
         "ds-fade": HTMLDsFadeElement;
@@ -1622,7 +1686,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;
@@ -1668,10 +1731,16 @@ declare namespace LocalJSX {
     }
     interface DsBadge {
         /**
+          * Direct ring background override for component-local surfaces.
+         */
+        "background"?: string | undefined;
+        /**
+          * Count shown for counter badges. Count 0 hides the badge.
           * @default 0
          */
         "count"?: number;
         /**
+          * Deprecated alias for selected counter styling. Prefer context-specific color in the parent.
           * @default false
          */
         "isSelected"?: boolean;
@@ -1679,6 +1748,21 @@ declare namespace LocalJSX {
           * Accessible label. Defaults to the count as a string.
          */
         "label"?: string | undefined;
+        /**
+          * Highest count shown before compacting to "+".
+          * @default 9
+         */
+        "max"?: number;
+        /**
+          * Surface context for the ring around dots.
+          * @default 'default'
+         */
+        "surface"?: BadgeSurface;
+        /**
+          * Render as a compact counter or notification dot.
+          * @default 'counter'
+         */
+        "variant"?: BadgeVariant;
     }
     interface DsBanner {
         /**
@@ -1919,12 +2003,81 @@ declare namespace LocalJSX {
         "label": string;
         "onDsChange"?: (event: DsCheckboxCustomEvent<boolean>) => void;
     }
+    interface DsChip {
+        "background"?: ChipBackground | undefined;
+        /**
+          * @default 'faint'
+         */
+        "contrast"?: ChipContrast;
+        /**
+          * @default 'none'
+         */
+        "elevation"?: ChipElevation;
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * @default 'neutral'
+         */
+        "intent"?: ChipIntent;
+        "label": string;
+        "maxWidth"?: string | number | undefined;
+        /**
+          * Fired when an interactive chip is clicked.
+         */
+        "onDsClick"?: (event: DsChipCustomEvent<void>) => void;
+        /**
+          * Fired when the pressed state toggles.
+         */
+        "onDsPressedChange"?: (event: DsChipCustomEvent<boolean>) => void;
+        /**
+          * Fired when the remove button is clicked.
+         */
+        "onDsRemove"?: (event: DsChipCustomEvent<void>) => void;
+        /**
+          * @default false
+         */
+        "pressed"?: boolean;
+        /**
+          * @default false
+         */
+        "removable"?: boolean;
+        /**
+          * @default false
+         */
+        "rounded"?: boolean;
+        /**
+          * @default 'md'
+         */
+        "size"?: ChipSize;
+    }
     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;
@@ -1935,15 +2088,34 @@ declare namespace LocalJSX {
     }
     interface DsFade {
         /**
-          * Background color to fade from. Defaults to var(--color-background-secondary).
+          * Direct background override for contexts that already expose a resolved surface var.
           * @default 'var(--color-background-secondary)'
          */
         "background"?: string;
         /**
-          * Height (or width for left/right) of the fade overlay — any CSS value.
+          * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length. Prefer `size`.
          */
         "height"?: string | undefined;
-        "side": FadeSide;
+        /**
+          * Edge where the fade is anchored.
+          * @default 'bottom'
+         */
+        "side"?: FadeSide;
+        /**
+          * Fade depth along the fade axis. Accepts dimension size token names or any CSS length.
+          * @default 'size-600'
+         */
+        "size"?: FadeSize;
+        /**
+          * Surface context used to choose the fade target background token.
+          * @default 'default'
+         */
+        "surface"?: FadeSurface;
+        /**
+          * Controls visibility without removing the element from layout/positioning.
+          * @default true
+         */
+        "visible"?: boolean;
     }
     interface DsField {
         /**
@@ -2017,23 +2189,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.
@@ -2433,7 +2588,6 @@ declare namespace LocalJSX {
         "sortState"?: SortState | undefined;
     }
     interface DsTag {
-        "background"?: TagBackground | undefined;
         /**
           * @default 'faint'
          */
@@ -2442,41 +2596,12 @@ declare namespace LocalJSX {
           * @default 'none'
          */
         "elevation"?: TagElevation;
-        /**
-          * @default false
-         */
-        "inactive"?: boolean;
         /**
           * @default 'neutral'
          */
         "intent"?: TagIntent;
-        /**
-          * Whether the tag has a click/toggle behavior.
-          * @default false
-         */
-        "interactive"?: boolean;
         "label": string;
         "maxWidth"?: string | number | undefined;
-        /**
-          * Fired when an interactive tag is clicked.
-         */
-        "onDsClick"?: (event: DsTagCustomEvent<void>) => void;
-        /**
-          * Fired when the pressed state toggles.
-         */
-        "onDsPressedChange"?: (event: DsTagCustomEvent<boolean>) => void;
-        /**
-          * Fired when the remove button is clicked.
-         */
-        "onDsRemove"?: (event: DsTagCustomEvent<void>) => void;
-        /**
-          * @default false
-         */
-        "pressed"?: boolean;
-        /**
-          * @default false
-         */
-        "removable"?: boolean;
         /**
           * @default false
          */
@@ -2494,6 +2619,10 @@ declare namespace LocalJSX {
         "as"?: TextElement;
         "color"?: TextColor | undefined;
         "decoration"?: TextDecoration | undefined;
+        /**
+          * @default 'normal'
+         */
+        "fontFeature"?: TextFontFeature;
         /**
           * Maps to `for` attribute on <label> elements.
          */
@@ -2644,7 +2773,11 @@ declare namespace LocalJSX {
         "expandedIds": string;
     }
     interface DsBadgeAttributes {
+        "variant": BadgeVariant;
         "count": number;
+        "max": number;
+        "surface": BadgeSurface;
+        "background": string | undefined;
         "isSelected": boolean;
         "label": string | undefined;
     }
@@ -2713,8 +2846,25 @@ declare namespace LocalJSX {
         "indeterminate": boolean;
         "inactive": boolean;
     }
+    interface DsChipAttributes {
+        "label": string;
+        "intent": ChipIntent;
+        "contrast": ChipContrast;
+        "elevation": ChipElevation;
+        "size": ChipSize;
+        "rounded": boolean;
+        "removable": boolean;
+        "maxWidth": string;
+        "inactive": boolean;
+        "background": ChipBackground | undefined;
+        "pressed": boolean;
+    }
     interface DsDividerAttributes {
         "orientation": DividerOrientation;
+        "surface": DividerSurface;
+        "inset": DividerInset;
+        "length": DividerLength;
+        "semantic": boolean;
     }
     interface DsEmptyStateAttributes {
         "type": EmptyStateType;
@@ -2722,8 +2872,11 @@ declare namespace LocalJSX {
     }
     interface DsFadeAttributes {
         "side": FadeSide;
+        "size": FadeSize;
         "height": string | undefined;
+        "surface": FadeSurface;
         "background": string;
+        "visible": boolean;
     }
     interface DsFieldAttributes {
         "label": string;
@@ -2753,10 +2906,6 @@ declare namespace LocalJSX {
         "ariaLabelledby": string | undefined;
         "ariaDescribedby": string | undefined;
     }
-    interface DsLabelWrapAttributes {
-        "size": LabelWrapSize;
-        "truncate": boolean;
-    }
     interface DsLoaderAttributes {
         "size": number;
         "label": string | undefined;
@@ -2877,12 +3026,7 @@ declare namespace LocalJSX {
         "elevation": TagElevation;
         "size": TagSize;
         "rounded": boolean;
-        "removable": boolean;
         "maxWidth": string;
-        "inactive": boolean;
-        "background": TagBackground | undefined;
-        "pressed": boolean;
-        "interactive": boolean;
     }
     interface DsTextAttributes {
         "variant": TextVariant;
@@ -2892,6 +3036,7 @@ declare namespace LocalJSX {
         "align": TextAlign | undefined;
         "lineTruncation": string;
         "wrap": TextWrap | undefined;
+        "fontFeature": TextFontFeature;
         "as": TextElement;
         "for": string | undefined;
     }
@@ -2942,14 +3087,14 @@ declare namespace LocalJSX {
         "ds-button-group": Omit<DsButtonGroup, keyof DsButtonGroupAttributes> & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes]?: DsButtonGroup[K] } & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes as `attr:${K}`]?: DsButtonGroupAttributes[K] } & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes as `prop:${K}`]?: DsButtonGroup[K] };
         "ds-card": Omit<DsCard, keyof DsCardAttributes> & { [K in keyof DsCard & keyof DsCardAttributes]?: DsCard[K] } & { [K in keyof DsCard & keyof DsCardAttributes as `attr:${K}`]?: DsCardAttributes[K] } & { [K in keyof DsCard & keyof DsCardAttributes as `prop:${K}`]?: DsCard[K] };
         "ds-checkbox": Omit<DsCheckbox, keyof DsCheckboxAttributes> & { [K in keyof DsCheckbox & keyof DsCheckboxAttributes]?: DsCheckbox[K] } & { [K in keyof DsCheckbox & keyof DsCheckboxAttributes as `attr:${K}`]?: DsCheckboxAttributes[K] } & { [K in keyof DsCheckbox & keyof DsCheckboxAttributes as `prop:${K}`]?: DsCheckbox[K] } & OneOf<"label", DsCheckbox["label"], DsCheckboxAttributes["label"]>;
+        "ds-chip": Omit<DsChip, keyof DsChipAttributes> & { [K in keyof DsChip & keyof DsChipAttributes]?: DsChip[K] } & { [K in keyof DsChip & keyof DsChipAttributes as `attr:${K}`]?: DsChipAttributes[K] } & { [K in keyof DsChip & keyof DsChipAttributes as `prop:${K}`]?: DsChip[K] } & OneOf<"label", DsChip["label"], DsChipAttributes["label"]>;
         "ds-divider": Omit<DsDivider, keyof DsDividerAttributes> & { [K in keyof DsDivider & keyof DsDividerAttributes]?: DsDivider[K] } & { [K in keyof DsDivider & keyof DsDividerAttributes as `attr:${K}`]?: DsDividerAttributes[K] } & { [K in keyof DsDivider & keyof DsDividerAttributes as `prop:${K}`]?: DsDivider[K] };
         "ds-empty-state": Omit<DsEmptyState, keyof DsEmptyStateAttributes> & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes]?: DsEmptyState[K] } & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes as `attr:${K}`]?: DsEmptyStateAttributes[K] } & { [K in keyof DsEmptyState & keyof DsEmptyStateAttributes as `prop:${K}`]?: DsEmptyState[K] };
-        "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-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] };
         "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-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"]>;
@@ -2988,6 +3133,7 @@ declare module "@stencil/core" {
             "ds-button-group": LocalJSX.IntrinsicElements["ds-button-group"] & JSXBase.HTMLAttributes<HTMLDsButtonGroupElement>;
             "ds-card": LocalJSX.IntrinsicElements["ds-card"] & JSXBase.HTMLAttributes<HTMLDsCardElement>;
             "ds-checkbox": LocalJSX.IntrinsicElements["ds-checkbox"] & JSXBase.HTMLAttributes<HTMLDsCheckboxElement>;
+            "ds-chip": LocalJSX.IntrinsicElements["ds-chip"] & JSXBase.HTMLAttributes<HTMLDsChipElement>;
             "ds-divider": LocalJSX.IntrinsicElements["ds-divider"] & JSXBase.HTMLAttributes<HTMLDsDividerElement>;
             "ds-empty-state": LocalJSX.IntrinsicElements["ds-empty-state"] & JSXBase.HTMLAttributes<HTMLDsEmptyStateElement>;
             "ds-fade": LocalJSX.IntrinsicElements["ds-fade"] & JSXBase.HTMLAttributes<HTMLDsFadeElement>;
@@ -2995,12 +3141,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>;