@ds-mo/ui 2.11.1 → 2.12.0

package/dist/types/utils/token-defaults.d.ts

@@ -5,6 +5,7 @@ export declare const TOKEN_DEFAULTS: {
     readonly radius025: "--dimension-radius-025";
     readonly size200: "--dimension-size-200";
     readonly size300: "--dimension-size-300";
+    readonly size400: "--dimension-size-400";
     readonly size600: "--dimension-size-600";
     readonly size800: "--dimension-size-800";
     readonly iconographyMd: "--dimension-iconography-md";
@@ -23,7 +24,9 @@ export declare const TOKEN_DEFAULTS: {
     readonly motionShort3: "--effect-motion-short-3";
     readonly animationDurationShort3: "--effect-animation-duration-short-3";
     readonly animationDurationMedium1: "--effect-animation-duration-medium-1";
+    readonly animationDelayInstant: "--effect-animation-delay-instant";
     readonly animationDelayMedium1: "--effect-animation-delay-medium-1";
+    readonly animationDelayMedium3: "--effect-animation-delay-medium-3";
     readonly animationDelayShort2: "--effect-animation-delay-short-2";
     readonly animationDelayLong2: "--effect-animation-delay-long-2";
     /** Unmeasured menu height fallback: 20× base (160px at default scale). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -80,7 +80,8 @@
     "storybook:build": "storybook build",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src/",
+    "lint": "eslint src/ && npm run lint:css",
+    "lint:css": "stylelint \"src/wc/components/**/*.css\" \"src/wc/utils/**/*.css\"",
     "registry:build": "node scripts/build-registry.mjs",
     "mcp": "node scripts/mcp-server.mjs",
     "figma:connect:help": "figma connect --help",
@@ -105,7 +106,7 @@
   },
   "devDependencies": {
     "@ds-mo/icons": "^6.1.2",
-    "@ds-mo/tokens": "^2.12.1",
+    "@ds-mo/tokens": "^2.14.0",
     "@eslint/js": "^10.0.1",
     "@figma/code-connect": "^1.4.8",
     "@modelcontextprotocol/sdk": "^1.29.0",
@@ -130,6 +131,8 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "storybook": "^10.4.2",
+    "stylelint": "^17.14.0",
+    "stylelint-config-standard": "^40.0.0",
     "tsx": "^4.20.3",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.59.1",

package/src/angular/index.ts

@@ -2,14 +2,12 @@
 import * as d from './proxies';
 
 export const DIRECTIVES = [
-  d.DsAccordion,
   d.DsAppShell,
   d.DsBadge,
   d.DsBanner,
   d.DsBarNav,
-  d.DsBreadcrumb,
   d.DsButtonFilled,
-  d.DsButtonUnfilledIcon,
+  d.DsButtonUnfilled,
   d.DsCardDataViz,
   d.DsCardSetting,
   d.DsChartBar,
@@ -20,7 +18,6 @@ export const DIRECTIVES = [
   d.DsChip,
   d.DsDivider,
   d.DsEmptyState,
-  d.DsFade,
   d.DsField,
   d.DsHeader,
   d.DsIcon,
@@ -38,13 +35,11 @@ export const DIRECTIVES = [
   d.DsShellGradientSwatch,
   d.DsSkeleton,
   d.DsSlider,
-  d.DsSurface,
   d.DsTabGroup,
   d.DsTabGroupNav,
   d.DsTable,
   d.DsTag,
   d.DsText,
-  d.DsToastProvider,
   d.DsToggle,
   d.DsTooltip,
   d.DsTooltipDataViz

package/src/angular/proxies.ts

@@ -7,34 +7,6 @@ import { ProxyCmp } from './angular-component-lib/utils';
 import { Components } from '@ds-mo/ui';
 
 
-@ProxyCmp({
-  inputs: ['expandedIds', 'items', 'multiple']
-})
-@Component({
-  selector: 'ds-accordion',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['expandedIds', 'items', 'multiple'],
-  outputs: ['dsExpandedChange'],
-  standalone: false
-})
-export class DsAccordion {
-  protected el: HTMLDsAccordionElement;
-  @Output() dsExpandedChange = new EventEmitter<CustomEvent<string[]>>();
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsAccordion extends Components.DsAccordion {
-
-  dsExpandedChange: EventEmitter<CustomEvent<string[]>>;
-}
-
-
 @ProxyCmp({
   inputs: ['gradient', 'gradientPreset', 'gradientSrc', 'navStyle', 'shortcutsEnabled']
 })
@@ -140,37 +112,7 @@ export declare interface DsBarNav extends Components.DsBarNav {
 
 
 @ProxyCmp({
-  inputs: ['items', 'separator']
-})
-@Component({
-  selector: 'ds-breadcrumb',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['items', 'separator'],
-  outputs: ['dsNavigate'],
-  standalone: false
-})
-export class DsBreadcrumb {
-  protected el: HTMLDsBreadcrumbElement;
-  @Output() dsNavigate = new EventEmitter<CustomEvent<{ item: IDsBreadcrumbBreadcrumbItem; index: number }>>();
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-import type { BreadcrumbItem as IDsBreadcrumbBreadcrumbItem } from '@ds-mo/ui';
-
-export declare interface DsBreadcrumb extends Components.DsBreadcrumb {
-
-  dsNavigate: EventEmitter<CustomEvent<{ item: IDsBreadcrumbBreadcrumbItem; index: number }>>;
-}
-
-
-@ProxyCmp({
-  inputs: ['ariaLabel', 'contrast', 'icon', 'inactive', 'intent', 'type'],
+  inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant'],
   methods: ['setFocus']
 })
 @Component({
@@ -178,7 +120,7 @@ export declare interface DsBreadcrumb extends Components.DsBreadcrumb {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'contrast', 'icon', 'inactive', 'intent', 'type'],
+  inputs: ['ariaLabel', 'contrast', 'icon', 'intent', 'isInactive', 'label', 'size', 'type', 'variant'],
   outputs: ['dsClick'],
   standalone: false
 })
@@ -199,20 +141,20 @@ export declare interface DsButtonFilled extends Components.DsButtonFilled {
 
 
 @ProxyCmp({
-  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant'],
   methods: ['setFocus']
 })
 @Component({
-  selector: 'ds-button-unfilled-icon',
+  selector: 'ds-button-unfilled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'isActive', 'isInactive', 'label', 'pressed', 'size', 'type', 'variant'],
   outputs: ['dsClick', 'dsChange'],
   standalone: false
 })
-export class DsButtonUnfilledIcon {
-  protected el: HTMLDsButtonUnfilledIconElement;
+export class DsButtonUnfilled {
+  protected el: HTMLDsButtonUnfilledElement;
   @Output() dsClick = new EventEmitter<CustomEvent<MouseEvent>>();
   @Output() dsChange = new EventEmitter<CustomEvent<boolean>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -222,7 +164,7 @@ export class DsButtonUnfilledIcon {
 }
 
 
-export declare interface DsButtonUnfilledIcon extends Components.DsButtonUnfilledIcon {
+export declare interface DsButtonUnfilled extends Components.DsButtonUnfilled {
 
   dsClick: EventEmitter<CustomEvent<MouseEvent>>;
 
@@ -399,14 +341,14 @@ export declare interface DsChartLine extends Components.DsChartLine {}
 
 
 @ProxyCmp({
-  inputs: ['checked', 'inactive', 'indeterminate', 'label']
+  inputs: ['checked', 'indeterminate', 'isInactive', 'label']
 })
 @Component({
   selector: 'ds-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['checked', 'inactive', 'indeterminate', { name: 'label', required: true }],
+  inputs: ['checked', 'indeterminate', 'isInactive', { name: 'label', required: true }],
   outputs: ['dsChange'],
   standalone: false
 })
@@ -427,22 +369,20 @@ export declare interface DsCheckbox extends Components.DsCheckbox {
 
 
 @ProxyCmp({
-  inputs: ['background', 'contrast', 'elevation', 'inactive', 'intent', 'label', 'maxWidth', 'pressed', 'removable', 'rounded', 'size']
+  inputs: ['background', 'isInactive', 'label', 'maxWidth', 'removable', 'rounded', 'size', 'state']
 })
 @Component({
   selector: 'ds-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['background', 'contrast', 'elevation', 'inactive', 'intent', { name: 'label', required: true }, 'maxWidth', 'pressed', 'removable', 'rounded', 'size'],
-  outputs: ['dsRemove', 'dsClick', 'dsPressedChange'],
+  inputs: ['background', 'isInactive', { name: 'label', required: true }, 'maxWidth', 'removable', 'rounded', 'size', 'state'],
+  outputs: ['dsRemove'],
   standalone: false
 })
 export class DsChip {
   protected el: HTMLDsChipElement;
   @Output() dsRemove = new EventEmitter<CustomEvent<void>>();
-  @Output() dsClick = new EventEmitter<CustomEvent<void>>();
-  @Output() dsPressedChange = new EventEmitter<CustomEvent<boolean>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -455,14 +395,6 @@ export declare interface DsChip extends Components.DsChip {
    * Fired when the remove button is clicked.
    */
   dsRemove: EventEmitter<CustomEvent<void>>;
-  /**
-   * Fired when an interactive chip is clicked.
-   */
-  dsClick: EventEmitter<CustomEvent<void>>;
-  /**
-   * Fired when the pressed state toggles.
-   */
-  dsPressedChange: EventEmitter<CustomEvent<boolean>>;
 }
 
 
@@ -512,29 +444,6 @@ export class DsEmptyState {
 export declare interface DsEmptyState extends Components.DsEmptyState {}
 
 
-@ProxyCmp({
-  inputs: ['height', 'side', 'size', 'visible']
-})
-@Component({
-  selector: 'ds-fade',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['height', 'side', 'size', 'visible'],
-  standalone: false
-})
-export class DsFade {
-  protected el: HTMLDsFadeElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsFade extends Components.DsFade {}
-
-
 @ProxyCmp({
   inputs: ['fieldId', 'label']
 })
@@ -605,7 +514,7 @@ export declare interface DsIcon extends Components.DsIcon {}
 
 
 @ProxyCmp({
-  inputs: ['ariaDescribedby', 'ariaLabel', 'ariaLabelledby', 'autoFocus', 'error', 'errorMessage', 'inactive', 'inputId', 'placeholder', 'type', 'value'],
+  inputs: ['ariaDescribedby', 'ariaLabel', 'ariaLabelledby', 'autoFocus', 'error', 'errorMessage', 'inputId', 'isInactive', 'placeholder', 'type', 'value'],
   methods: ['setFocus']
 })
 @Component({
@@ -613,7 +522,7 @@ export declare interface DsIcon extends Components.DsIcon {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaDescribedby', 'ariaLabel', 'ariaLabelledby', 'autoFocus', 'error', 'errorMessage', 'inactive', 'inputId', 'placeholder', 'type', 'value'],
+  inputs: ['ariaDescribedby', 'ariaLabel', 'ariaLabelledby', 'autoFocus', 'error', 'errorMessage', 'inputId', 'isInactive', 'placeholder', 'type', 'value'],
   outputs: ['dsChange', 'dsClear'],
   standalone: false
 })
@@ -727,14 +636,14 @@ export declare interface DsModal extends Components.DsModal {
 
 
 @ProxyCmp({
-  inputs: ['inactive', 'page', 'siblingCount', 'totalPages']
+  inputs: ['isInactive', 'page', 'siblingCount', 'totalPages']
 })
 @Component({
   selector: 'ds-pagination',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['inactive', 'page', 'siblingCount', 'totalPages'],
+  inputs: ['isInactive', 'page', 'siblingCount', 'totalPages'],
   outputs: ['dsPageChange'],
   standalone: false
 })
@@ -854,14 +763,14 @@ export declare interface DsPanelTools extends Components.DsPanelTools {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'ariaLabelledby', 'direction', 'inactive', 'options', 'value']
+  inputs: ['ariaLabel', 'ariaLabelledby', 'direction', 'isInactive', 'options', 'value']
 })
 @Component({
   selector: 'ds-radio-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'ariaLabelledby', 'direction', 'inactive', 'options', 'value'],
+  inputs: ['ariaLabel', 'ariaLabelledby', 'direction', 'isInactive', 'options', 'value'],
   outputs: ['dsChange'],
   standalone: false
 })
@@ -905,14 +814,14 @@ export declare interface DsScrollbar extends Components.DsScrollbar {}
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'ariaLabelledby', 'inactive', 'options', 'placeholder', 'value']
+  inputs: ['ariaLabel', 'ariaLabelledby', 'isInactive', 'options', 'placeholder', 'value']
 })
 @Component({
   selector: 'ds-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'ariaLabelledby', 'inactive', 'options', 'placeholder', 'value'],
+  inputs: ['ariaLabel', 'ariaLabelledby', 'isInactive', 'options', 'placeholder', 'value'],
   outputs: ['dsChange'],
   standalone: false
 })
@@ -965,14 +874,14 @@ export declare interface DsShellGradientPicker extends Components.DsShellGradien
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'inactive', 'preset', 'selected']
+  inputs: ['ariaLabel', 'isInactive', 'preset', 'selected']
 })
 @Component({
   selector: 'ds-shell-gradient-swatch',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'inactive', 'preset', 'selected'],
+  inputs: ['ariaLabel', 'isInactive', 'preset', 'selected'],
   outputs: ['dsSelect'],
   standalone: false
 })
@@ -1018,14 +927,14 @@ export declare interface DsSkeleton extends Components.DsSkeleton {}
 
 
 @ProxyCmp({
-  inputs: ['inactive', 'inputId', 'label', 'max', 'min', 'step', 'value', 'valueText']
+  inputs: ['inputId', 'isInactive', 'label', 'max', 'min', 'step', 'value', 'valueText']
 })
 @Component({
   selector: 'ds-slider',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['inactive', 'inputId', { name: 'label', required: true }, 'max', 'min', 'step', 'value', 'valueText'],
+  inputs: ['inputId', 'isInactive', { name: 'label', required: true }, 'max', 'min', 'step', 'value', 'valueText'],
   outputs: ['dsChange'],
   standalone: false
 })
@@ -1045,29 +954,6 @@ export declare interface DsSlider extends Components.DsSlider {
 }
 
 
-@ProxyCmp({
-  inputs: ['as', 'background', 'contrast', 'edge', 'elevation', 'inactive', 'intent', 'interactive', 'radius', 'selected']
-})
-@Component({
-  selector: 'ds-surface',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['as', 'background', 'contrast', 'edge', 'elevation', 'inactive', 'intent', 'interactive', 'radius', 'selected'],
-  standalone: false
-})
-export class DsSurface {
-  protected el: HTMLDsSurfaceElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsSurface extends Components.DsSurface {}
-
-
 @ProxyCmp({
   inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value']
 })
@@ -1165,14 +1051,14 @@ export declare interface DsTable extends Components.DsTable {
 
 
 @ProxyCmp({
-  inputs: ['contrast', 'elevation', 'intent', 'label', 'maxWidth', 'rounded', 'size']
+  inputs: ['contrast', 'intent', 'label', 'maxWidth', 'rounded', 'size']
 })
 @Component({
   selector: 'ds-tag',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['contrast', 'elevation', 'intent', { name: 'label', required: true }, 'maxWidth', 'rounded', 'size'],
+  inputs: ['contrast', 'intent', { name: 'label', required: true }, 'maxWidth', 'rounded', 'size'],
   standalone: false
 })
 export class DsTag {
@@ -1211,37 +1097,14 @@ export declare interface DsText extends Components.DsText {}
 
 
 @ProxyCmp({
-  inputs: ['position']
-})
-@Component({
-  selector: 'ds-toast-provider',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['position'],
-  standalone: false
-})
-export class DsToastProvider {
-  protected el: HTMLDsToastProviderElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsToastProvider extends Components.DsToastProvider {}
-
-
-@ProxyCmp({
-  inputs: ['checked', 'inactive']
+  inputs: ['checked', 'isInactive']
 })
 @Component({
   selector: 'ds-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['checked', 'inactive'],
+  inputs: ['checked', 'isInactive'],
   outputs: ['dsChange'],
   standalone: false
 })
@@ -1262,14 +1125,14 @@ export declare interface DsToggle extends Components.DsToggle {
 
 
 @ProxyCmp({
-  inputs: ['align', 'alignOffset', 'delay', 'label', 'shortcutKey', 'shortcutKeyPosition', 'side', 'sideOffset']
+  inputs: ['align', 'alignOffset', 'delay', 'label', 'shortcutKey', 'shortcutKeyPosition', 'side', 'sideOffset', 'size']
 })
 @Component({
   selector: 'ds-tooltip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['align', 'alignOffset', 'delay', { name: 'label', required: true }, 'shortcutKey', 'shortcutKeyPosition', 'side', 'sideOffset'],
+  inputs: ['align', 'alignOffset', 'delay', { name: 'label', required: true }, 'shortcutKey', 'shortcutKeyPosition', 'side', 'sideOffset', 'size'],
   standalone: false
 })
 export class DsTooltip {
@@ -1285,14 +1148,14 @@ export declare interface DsTooltip extends Components.DsTooltip {}
 
 
 @ProxyCmp({
-  inputs: ['label', 'value', 'x', 'y']
+  inputs: ['delay', 'label', 'value', 'x', 'y']
 })
 @Component({
   selector: 'ds-tooltip-data-viz',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['label', 'value', 'x', 'y'],
+  inputs: ['delay', 'label', 'value', 'x', 'y'],
   standalone: false
 })
 export class DsTooltipDataViz {

package/src/react/components.ts

@@ -4,14 +4,12 @@
  */
 
 /* eslint-disable */
-export { DsAccordion } from "./ds-accordion.js";
 export { DsAppShell } from "./ds-app-shell.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBanner } from "./ds-banner.js";
 export { DsBarNav } from "./ds-bar-nav.js";
-export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
-export { DsButtonUnfilledIcon } from "./ds-button-unfilled-icon.js";
+export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataViz } from "./ds-card-data-viz.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsChartBar } from "./ds-chart-bar.js";
@@ -22,7 +20,6 @@ export { DsCheckbox } from "./ds-checkbox.js";
 export { DsChip } from "./ds-chip.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";
@@ -40,13 +37,11 @@ export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.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 { DsToggle } from "./ds-toggle.js";
 export { DsTooltipDataViz } from "./ds-tooltip-data-viz.js";
 export { DsTooltip } from "./ds-tooltip.js";

package/src/react/ds-button-unfilled.ts

@@ -0,0 +1,33 @@
+'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 DsButtonUnfilledCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsButtonUnfilled as DsButtonUnfilledElement, defineCustomElement as defineDsButtonUnfilled } from "@ds-mo/ui/dist/components/ds-button-unfilled.js";
+
+export type DsButtonUnfilledEvents = {
+    onDsClick: EventName<DsButtonUnfilledCustomEvent<MouseEvent>>,
+    onDsChange: EventName<DsButtonUnfilledCustomEvent<boolean>>
+};
+
+export const DsButtonUnfilled: StencilReactComponent<DsButtonUnfilledElement, DsButtonUnfilledEvents, Components.DsButtonUnfilled> = /*@__PURE__*/ createComponent<DsButtonUnfilledElement, DsButtonUnfilledEvents, Components.DsButtonUnfilled>({
+    tagName: 'ds-button-unfilled',
+    elementClass: DsButtonUnfilledElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsClick: 'dsClick',
+        onDsChange: 'dsChange'
+    } as DsButtonUnfilledEvents,
+    defineCustomElement: defineDsButtonUnfilled
+});

package/src/react/ds-chip.ts

@@ -15,21 +15,13 @@ import { type DsChipCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsChip as DsChipElement, defineCustomElement as defineDsChip } from "@ds-mo/ui/dist/components/ds-chip.js";
 
-export type DsChipEvents = {
-    onDsRemove: EventName<DsChipCustomEvent<void>>,
-    onDsClick: EventName<DsChipCustomEvent<void>>,
-    onDsPressedChange: EventName<DsChipCustomEvent<boolean>>
-};
+export type DsChipEvents = { onDsRemove: EventName<DsChipCustomEvent<void>> };
 
 export const DsChip: StencilReactComponent<DsChipElement, DsChipEvents, Components.DsChip> = /*@__PURE__*/ createComponent<DsChipElement, DsChipEvents, Components.DsChip>({
     tagName: 'ds-chip',
     elementClass: DsChipElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {
-        onDsRemove: 'dsRemove',
-        onDsClick: 'dsClick',
-        onDsPressedChange: 'dsPressedChange'
-    } as DsChipEvents,
+    events: { onDsRemove: 'dsRemove' } as DsChipEvents,
     defineCustomElement: defineDsChip
 });

package/src/wc/components/BarNav/BarNav.tsx

@@ -687,15 +687,16 @@ export class BarNav {
             )}
 
             {hasTabs && this.hasOverflowTabs && (
-              <ds-button-unfilled-icon
+              <ds-button-unfilled variant="icon"
                 class={{
                   'bar-nav__overflow-trigger': true,
                 }}
                 icon="Ellipses"
                 isActive={this.menuOpen}
                 activeFill={false}
+                hasBorder={false}
                 focusTabIndex={this.overflowRovingFocused ? 0 : -1}
-                ref={(el?: HTMLDsButtonUnfilledIconElement) => {
+                ref={(el?: HTMLDsButtonUnfilledElement) => {
                   this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;
                 }}
                 haspopup="menu"

package/src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts

@@ -24,7 +24,7 @@ export function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSec
       label: item.label,
       value: item.id,
       isSelected: item.id === selectedId,
-      isInactive: item.disabled,
+      isInactive: item.isInactive,
     });
   }