@ds-mo/ui 1.1.0 → 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";
@@ -34,7 +33,7 @@ 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";
@@ -47,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";
@@ -68,7 +66,7 @@ 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";
@@ -321,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;
@@ -417,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.
@@ -849,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.
          */
@@ -1287,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: {
@@ -1622,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;
@@ -1920,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;
@@ -2017,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.
@@ -2494,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.
          */
@@ -2715,6 +2715,10 @@ declare namespace LocalJSX {
     }
     interface DsDividerAttributes {
         "orientation": DividerOrientation;
+        "surface": DividerSurface;
+        "inset": DividerInset;
+        "length": DividerLength;
+        "semantic": boolean;
     }
     interface DsEmptyStateAttributes {
         "type": EmptyStateType;
@@ -2753,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;
@@ -2892,6 +2892,7 @@ declare namespace LocalJSX {
         "align": TextAlign | undefined;
         "lineTruncation": string;
         "wrap": TextWrap | undefined;
+        "fontFeature": TextFontFeature;
         "as": TextElement;
         "for": string | undefined;
     }
@@ -2949,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"]>;
@@ -2995,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>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

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,

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']
 })
@@ -965,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

@@ -21,7 +21,6 @@ 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 { DsLabelWrap } from "./ds-label-wrap.js";
 export { DsLoader } from "./ds-loader.js";
 export { DsMenu } from "./ds-menu.js";
 export { DsModal } from "./ds-modal.js";

package/src/wc/components/Divider/Divider.tsx

@@ -1,22 +1,106 @@
 import { Component, Prop, h, Host } from '@stencil/core';
 
 export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSurface =
+  | 'default'
+  | 'on-bold-background'
+  | 'on-strong-background'
+  | 'on-medium-background'
+  | 'on-translucent-background'
+  | 'navigation'
+  | 'media'
+  | 'always-dark'
+  | 'inverted';
+export type DividerInsetToken =
+  | 'space-000'
+  | 'space-012'
+  | 'space-025'
+  | 'space-050'
+  | 'space-075'
+  | 'space-100'
+  | 'space-125'
+  | 'space-150'
+  | 'space-175'
+  | 'space-200'
+  | 'space-250'
+  | 'space-300'
+  | 'space-400'
+  | 'space-600'
+  | 'space-800';
+export type DividerInset = 'none' | DividerInsetToken | (string & {});
+export type DividerLength = 'auto' | 'full' | (string & {});
+
+const INSET_VALUE: Record<'none' | DividerInsetToken, string> = {
+  none: '0',
+  'space-000': 'var(--dimension-space-000)',
+  'space-012': 'var(--dimension-space-012)',
+  'space-025': 'var(--dimension-space-025)',
+  'space-050': 'var(--dimension-space-050)',
+  'space-075': 'var(--dimension-space-075)',
+  'space-100': 'var(--dimension-space-100)',
+  'space-125': 'var(--dimension-space-125)',
+  'space-150': 'var(--dimension-space-150)',
+  'space-175': 'var(--dimension-space-175)',
+  'space-200': 'var(--dimension-space-200)',
+  'space-250': 'var(--dimension-space-250)',
+  'space-300': 'var(--dimension-space-300)',
+  'space-400': 'var(--dimension-space-400)',
+  'space-600': 'var(--dimension-space-600)',
+  'space-800': 'var(--dimension-space-800)',
+};
 
 @Component({
   tag: 'ds-divider',
   styleUrl: 'Divider.css',
-  shadow: true,
+  scoped: true,
 })
 export class Divider {
   /** Direction of the divider line. Defaults to 'horizontal'. */
   @Prop() orientation: DividerOrientation = 'horizontal';
 
+  /** Surface context so the divider uses the right TokoMo divider token. */
+  @Prop() surface: DividerSurface = 'default';
+
+  /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */
+  @Prop() inset: DividerInset = 'none';
+
+  /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */
+  @Prop() length: DividerLength = 'auto';
+
+  /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */
+  @Prop() semantic: boolean = false;
+
+  private resolveInset(): string {
+    return Object.prototype.hasOwnProperty.call(INSET_VALUE, this.inset)
+      ? INSET_VALUE[this.inset as keyof typeof INSET_VALUE]
+      : this.inset;
+  }
+
+  private resolveLength(): string {
+    return this.length === 'auto' || this.length === 'full'
+      ? '100%'
+      : this.length;
+  }
+
   render() {
+    const isVertical = this.orientation === 'vertical';
+    const hasCustomLength = this.length !== 'auto' && this.length !== 'full';
+
     return (
       <Host
-        role="separator"
-        aria-orientation={this.orientation}
-        class={{ vertical: this.orientation === 'vertical' }}
+        role={this.semantic ? 'separator' : undefined}
+        aria-orientation={this.semantic ? this.orientation : undefined}
+        aria-hidden={this.semantic ? undefined : 'true'}
+        class={{
+          divider: true,
+          'divider--vertical': isVertical,
+          'divider--custom-length': hasCustomLength,
+          [`divider--surface-${this.surface}`]: true,
+        }}
+        style={{
+          '--_divider-inset': this.resolveInset(),
+          '--_divider-length': this.resolveLength(),
+        }}
       />
     );
   }

package/src/wc/components/Text/Text.tsx

@@ -26,6 +26,7 @@ export type TextAlign = 'left' | 'center' | 'right';
 export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
 export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
 export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextFontFeature = 'normal' | 'tabular-nums';
 
 @Component({
   tag: 'ds-text',
@@ -40,6 +41,7 @@ export class Text {
   @Prop() align: TextAlign | undefined;
   @Prop() lineTruncation: LineTruncation = 'none';
   @Prop() wrap: TextWrap | undefined;
+  @Prop() fontFeature: TextFontFeature = 'normal';
   @Prop() as: TextElement = 'p';
   /** Maps to `for` attribute on <label> elements. */
   @Prop() for: string | undefined;
@@ -80,6 +82,7 @@ export class Text {
       'text--align-left':   this.align === 'left',
       'text--align-center': this.align === 'center',
       'text--align-right':  this.align === 'right',
+      'text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',
     };
 
     const style = this.color && isCustomColor(this.color)