@ds-mo/ui 14.35.0 → 14.36.0

package/dist/mcp-data/registry/time-picker.json

@@ -0,0 +1,259 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "time-picker",
+  "title": "TimePicker",
+  "description": "Bounded 12-hour clock lists for choosing hour, minute, and AM/PM, reused by form time fields.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/time-picker",
+    "source": "src/wc/components/TimePicker/TimePicker.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Bounded 12-hour clock lists for choosing hour, minute, and AM/PM, reused by form time fields.",
+      "useWhen": [
+        "A user picks a clock time from hour, minute, and AM/PM lists.",
+        "A time field needs 32px clock tiles that match calendar day geometry and the shared choice-list selected treatment."
+      ],
+      "avoidWhen": [
+        "The user types a time without opening a picker; the owning field keeps that editable value.",
+        "The value is a calendar date rather than a clock time.",
+        "The user chooses from a finite set of named schedule options rather than an exact time."
+      ],
+      "alternatives": [
+        {
+          "when": "The time is a form field that can be typed or picked.",
+          "component": "component:ds-input-time",
+          "reason": "InputTime owns the editable field, form association, and the time-picker popup."
+        },
+        {
+          "when": "The value is a calendar date.",
+          "component": "component:ds-calendar",
+          "reason": "Calendar owns the month grid for single dates and ranges."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-input-time",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "Hour, minute, and AM/PM are separate labelled listboxes without visible column headings. Each list keeps one tab stop on the selected option.",
+        "Arrow keys move to the next or previous option and stop at the first and last values; they do not wrap. Home and End jump to those ends. Left and Right move between columns and stop at Hour and AM/PM.",
+        "Inactive pickers disable every option. Optional min and max times disable combinations outside that inclusive bound."
+      ],
+      "states": [
+        "Selected hour, minute, and period tiles use the shared interaction-fill selected wash and primary text. Resting tiles use secondary text on a transparent 32px square.",
+        "Lists are finite. Hour runs 1 through 12, minutes follow the step, and AM/PM has two values. Scrolling and keyboard movement stop at those ends instead of looping.",
+        "An empty value highlights 12:00 AM so the lists have a resting selection without inventing a second empty state."
+      ],
+      "responsiveBehavior": [
+        "The three columns fill the width supplied by the owner. Tile size, 4px gaps, and the seven-tile list viewport are owned here; the owner supplies the popup or pane width."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Listen for dsChange. The detail is the clock time string HH:MM."
+        ],
+        "react": [
+          "Use DsTimePicker, bind value, and handle onDsChange."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/TimePicker/TimePicker.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "autoFocus": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "auto-focus",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Move keyboard focus into the hour list after the picker is rendered."
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "max": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "max",
+          "required": false,
+          "mutable": false
+        },
+        "min": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "min",
+          "required": false,
+          "mutable": false
+        },
+        "step": {
+          "type": "string | number",
+          "resolvedType": "number | string",
+          "attribute": "step",
+          "default": "60",
+          "required": false,
+          "mutable": false,
+          "description": "Native time step in seconds. Defaults to minutes (`60`)."
+        },
+        "value": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Clock value as `HH:MM`."
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "autoFocus": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "auto-focus",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Move keyboard focus into the hour list after the picker is rendered."
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "max": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "max",
+        "required": false,
+        "mutable": false
+      },
+      "min": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "min",
+        "required": false,
+        "mutable": false
+      },
+      "step": {
+        "type": "string | number",
+        "resolvedType": "number | string",
+        "attribute": "step",
+        "default": "60",
+        "required": false,
+        "mutable": false,
+        "description": "Native time step in seconds. Defaults to minutes (`60`)."
+      },
+      "value": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Clock value as `HH:MM`."
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-time-picker",
+      "react": "DsTimePicker",
+      "vue": "DsTimePicker",
+      "angular": "DsTimePicker"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-time-picker.js';",
+        "example": "<ds-time-picker></ds-time-picker>"
+      },
+      "react": {
+        "import": "import { DsTimePicker } from '@ds-mo/ui/react';",
+        "example": "<DsTimePicker />"
+      },
+      "vue": {
+        "import": "import { DsTimePicker } from '@ds-mo/ui/vue';",
+        "example": "<DsTimePicker />"
+      },
+      "angular": {
+        "import": "import { DsTimePicker } from '@ds-mo/ui/angular/ds-time-picker';",
+        "example": "<ds-time-picker></ds-time-picker>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.1",
+          "@ds-mo/icons ^7.0.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/TimePicker/TimePicker.css",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n}\n\n.time-picker {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(var(--dimension-size-400), 1fr));\n  column-gap: var(--dimension-space-050);\n  min-width: calc(\n    (var(--dimension-size-400) * 3) + (var(--dimension-space-050) * 2) +\n      (var(--ds-time-picker-padding, var(--dimension-space-100)) * 2)\n  );\n  padding: var(--ds-time-picker-padding, var(--dimension-space-100));\n}\n\n.time-picker__column {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n}\n\n.time-picker__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  max-height: calc((var(--dimension-size-400) * 7) + (var(--dimension-space-050) * 6));\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.time-picker-tile {\n  appearance: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  min-width: 0;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-primary);\n  cursor: default;\n}\n\n.time-picker-tile:disabled {\n  cursor: not-allowed;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/TimePicker/TimePicker.tsx",
+      "content": "import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CLOCK_HOURS,\n  CLOCK_PERIODS,\n  clockMinuteStep,\n  clockMinutes,\n  isClockTimeStepAligned,\n  isClockTimeOutOfRange,\n  joinClockTime,\n  splitClockTime,\n  stepBoundedIndex,\n  type ClockPeriod,\n  type ClockTimeParts,\n} from '../../utils';\n\ntype TimePickerColumn = 'hour' | 'minute' | 'period';\n\n@Component({\n  tag: 'ds-time-picker',\n  styleUrl: 'TimePicker.css',\n  scoped: true,\n})\nexport class TimePicker {\n  @Element() el!: HTMLElement;\n\n  /** Clock value as `HH:MM`. */\n  @Prop() value: string = '';\n  @Prop() min: string | undefined;\n  @Prop() max: string | undefined;\n  /** Native time step in seconds. Defaults to minutes (`60`). */\n  @Prop() step: string | number = 60;\n  @Prop() isInactive: boolean = false;\n  /** Move keyboard focus into the hour list after the picker is rendered. */\n  @Prop() autoFocus: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.scrollSelectedIntoView();\n    if (this.autoFocus) void this.setFocus();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.scrollSelectedIntoView();\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusColumn('hour', CLOCK_HOURS);\n  }\n\n  private parts(): ClockTimeParts {\n    return splitClockTime(this.value) ?? { hour12: 12, minute: 0, period: 'AM' };\n  }\n\n  private minutes(): number[] {\n    const minimum = this.min ? splitClockTime(this.min) : null;\n    return clockMinutes(clockMinuteStep(this.step), minimum?.minute ?? 0);\n  }\n\n  private isDisabledTime(iso: string): boolean {\n    if (this.isInactive) return true;\n    return (\n      isClockTimeOutOfRange(iso, this.min, this.max) ||\n      !isClockTimeStepAligned(iso, this.step, this.min)\n    );\n  }\n\n  private optionParts(\n    column: TimePickerColumn,\n    value: number | ClockPeriod\n  ): Partial<ClockTimeParts> {\n    return column === 'hour'\n      ? { hour12: value as number }\n      : column === 'minute'\n        ? { minute: value as number }\n        : { period: value as ClockPeriod };\n  }\n\n  private isDisabledPart(column: TimePickerColumn, next: Partial<ClockTimeParts>): boolean {\n    if (this.isInactive) return true;\n\n    const current = { ...this.parts(), ...next };\n    const hours: ReadonlyArray<number> = column === 'hour' ? [current.hour12] : CLOCK_HOURS;\n    const minutes: ReadonlyArray<number> = column === 'minute' ? [current.minute] : this.minutes();\n    const periods: ReadonlyArray<ClockPeriod> =\n      column === 'period' ? [current.period] : CLOCK_PERIODS;\n\n    return !hours.some(hour =>\n      minutes.some(minute =>\n        periods.some(\n          period => !this.isDisabledTime(joinClockTime({ hour12: hour, minute, period }))\n        )\n      )\n    );\n  }\n\n  private orderedValues<T>(current: T, values: ReadonlyArray<T>): T[] {\n    return [current, ...values.filter(value => value !== current)];\n  }\n\n  private commit(column: TimePickerColumn, next: Partial<ClockTimeParts>) {\n    const current = { ...this.parts(), ...next };\n    const hours =\n      column === 'hour' ? [current.hour12] : this.orderedValues(current.hour12, CLOCK_HOURS);\n    const minutes =\n      column === 'minute' ? [current.minute] : this.orderedValues(current.minute, this.minutes());\n    const periods =\n      column === 'period' ? [current.period] : this.orderedValues(current.period, CLOCK_PERIODS);\n\n    for (const hour of hours) {\n      for (const minute of minutes) {\n        for (const period of periods) {\n          const iso = joinClockTime({ hour12: hour, minute, period });\n          if (!this.isDisabledTime(iso)) {\n            this.dsChange.emit(iso);\n            return;\n          }\n        }\n      }\n    }\n  }\n\n  private optionEl(column: TimePickerColumn, value: number | ClockPeriod): HTMLElement | null {\n    return this.el.querySelector<HTMLElement>(`[data-${column}-option=\"${value}\"]`);\n  }\n\n  private scrollSelectedIntoView() {\n    const parts = this.parts();\n    this.optionEl('hour', parts.hour12)?.scrollIntoView({ block: 'nearest' });\n    this.optionEl('minute', parts.minute)?.scrollIntoView({ block: 'nearest' });\n    this.optionEl('period', parts.period)?.scrollIntoView({ block: 'nearest' });\n  }\n\n  private focusOption(column: TimePickerColumn, value: number | ClockPeriod) {\n    requestAnimationFrame(() => {\n      this.optionEl(column, value)?.focus();\n    });\n  }\n\n  private focusValue(\n    column: TimePickerColumn,\n    values: ReadonlyArray<number | ClockPeriod>\n  ): number | ClockPeriod | undefined {\n    const current = this.parts();\n    const currentValue =\n      column === 'hour' ? current.hour12 : column === 'minute' ? current.minute : current.period;\n    if (!this.isDisabledPart(column, this.optionParts(column, currentValue))) return currentValue;\n    return values.find(value => !this.isDisabledPart(column, this.optionParts(column, value)));\n  }\n\n  private focusColumn(column: TimePickerColumn, values: ReadonlyArray<number | ClockPeriod>): void {\n    const value = this.focusValue(column, values);\n    if (value !== undefined) this.optionEl(column, value)?.focus();\n  }\n\n  private handleColumnKeyDown = (\n    event: KeyboardEvent,\n    column: TimePickerColumn,\n    values: ReadonlyArray<number | ClockPeriod>,\n    current: number | ClockPeriod\n  ) => {\n    const columns: TimePickerColumn[] = ['hour', 'minute', 'period'];\n    const columnIndex = columns.indexOf(column);\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n      const nextColumn =\n        columns[stepBoundedIndex(columnIndex, event.key === 'ArrowLeft' ? -1 : 1, columns.length)];\n      if (!nextColumn || nextColumn === column) {\n        event.preventDefault();\n        return;\n      }\n      event.preventDefault();\n      const nextValues =\n        nextColumn === 'hour'\n          ? CLOCK_HOURS\n          : nextColumn === 'minute'\n            ? this.minutes()\n            : CLOCK_PERIODS;\n      const nextValue = this.focusValue(nextColumn, nextValues);\n      if (nextValue !== undefined) this.focusOption(nextColumn, nextValue);\n      return;\n    }\n\n    let offset: number | null = null;\n    if (event.key === 'ArrowUp') offset = -1;\n    else if (event.key === 'ArrowDown') offset = 1;\n    else if (event.key === 'Home' || event.key === 'End') offset = 0;\n    if (offset === null) return;\n    event.preventDefault();\n    let next: number | ClockPeriod | undefined;\n    if (event.key === 'Home') {\n      next = values.find(value => !this.isDisabledPart(column, this.optionParts(column, value)));\n    } else if (event.key === 'End') {\n      for (let index = values.length - 1; index >= 0; index -= 1) {\n        const value = values[index];\n        if (value !== undefined && !this.isDisabledPart(column, this.optionParts(column, value))) {\n          next = value;\n          break;\n        }\n      }\n    } else {\n      const direction = offset;\n      let index = values.indexOf(current);\n      if (index < 0) index = direction > 0 ? -1 : values.length;\n      for (\n        let candidate = index + direction;\n        candidate >= 0 && candidate < values.length;\n        candidate += direction\n      ) {\n        const value = values[candidate];\n        if (value !== undefined && !this.isDisabledPart(column, this.optionParts(column, value))) {\n          next = value;\n          break;\n        }\n      }\n    }\n    if (next === undefined) return;\n    this.focusOption(column, next);\n  };\n\n  private renderTile(\n    column: TimePickerColumn,\n    value: number | ClockPeriod,\n    selected: boolean,\n    focused: boolean,\n    label: string,\n    values: ReadonlyArray<number | ClockPeriod>\n  ) {\n    const next = this.optionParts(column, value);\n    const disabled = this.isDisabledPart(column, next);\n    return (\n      <button\n        type=\"button\"\n        role=\"option\"\n        data-hour-option={column === 'hour' ? String(value) : undefined}\n        data-minute-option={column === 'minute' ? String(value) : undefined}\n        data-period-option={column === 'period' ? String(value) : undefined}\n        class={{\n          'time-picker-tile': true,\n          'time-picker-tile--selected': selected,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': !disabled,\n          'ds-interaction-fill--selected': selected && !disabled,\n        }}\n        disabled={disabled}\n        aria-selected={selected ? 'true' : 'false'}\n        tabIndex={focused ? 0 : -1}\n        onClick={() => this.commit(column, next)}\n        onKeyDown={event => this.handleColumnKeyDown(event, column, values, value)}\n      >\n        <ds-text\n          class=\"ds-interaction-fill__content\"\n          as=\"span\"\n          variant=\"text-body-medium\"\n          color={selected ? 'primary' : 'secondary'}\n        >\n          {label}\n        </ds-text>\n      </button>\n    );\n  }\n\n  render() {\n    const parts = this.parts();\n    const minutes = this.minutes();\n    const minuteValues = minutes.includes(parts.minute)\n      ? minutes\n      : [...minutes, parts.minute].sort((a, b) => a - b);\n    const hourFocus = this.focusValue('hour', CLOCK_HOURS);\n    const minuteFocus = this.focusValue('minute', minuteValues);\n    const periodFocus = this.focusValue('period', CLOCK_PERIODS);\n\n    return (\n      <Host>\n        <div class=\"time-picker\" role=\"group\" aria-label=\"Choose time\">\n          <div class=\"time-picker__column\">\n            <div class=\"time-picker__list\" role=\"listbox\" aria-label=\"Hour\">\n              {CLOCK_HOURS.map(hour =>\n                this.renderTile(\n                  'hour',\n                  hour,\n                  hour === parts.hour12,\n                  hour === hourFocus,\n                  String(hour),\n                  CLOCK_HOURS\n                )\n              )}\n            </div>\n          </div>\n          <div class=\"time-picker__column\">\n            <div class=\"time-picker__list\" role=\"listbox\" aria-label=\"Minute\">\n              {minuteValues.map(minute =>\n                this.renderTile(\n                  'minute',\n                  minute,\n                  minute === parts.minute,\n                  minute === minuteFocus,\n                  String(minute).padStart(2, '0'),\n                  minuteValues\n                )\n              )}\n            </div>\n          </div>\n          <div class=\"time-picker__column\">\n            <div class=\"time-picker__list\" role=\"listbox\" aria-label=\"AM/PM\">\n              {CLOCK_PERIODS.map(period =>\n                this.renderTile(\n                  'period',\n                  period,\n                  period === parts.period,\n                  period === periodFocus,\n                  period,\n                  CLOCK_PERIODS\n                )\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/react/components.d.ts

@@ -18,7 +18,9 @@ export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
+export { DsButtonInverted } from "./ds-button-inverted.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
+export { DsCalendar } from "./ds-calendar.js";
 export { DsCardActionCenter } from "./ds-card-action-center.js";
 export { DsCardChart } from "./ds-card-chart.js";
 export { DsCardNavigation } from "./ds-card-navigation.js";
@@ -38,6 +40,8 @@ export { DsEmptyState } from "./ds-empty-state.js";
 export { DsField } from "./ds-field.js";
 export { DsFilterMenu } from "./ds-filter-menu.js";
 export { DsIcon } from "./ds-icon.js";
+export { DsInputDate } from "./ds-input-date.js";
+export { DsInputTime } from "./ds-input-time.js";
 export { DsInput } from "./ds-input.js";
 export { DsLoader } from "./ds-loader.js";
 export { DsMarkdown } from "./ds-markdown.js";
@@ -82,6 +86,7 @@ export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
 export { DsTextarea } from "./ds-textarea.js";
+export { DsTimePicker } from "./ds-time-picker.js";
 export { DsToast } from "./ds-toast.js";
 export { DsTooltipChart } from "./ds-tooltip-chart.js";
 export { DsTooltip } from "./ds-tooltip.js";

package/dist/react/components.js

@@ -19,7 +19,9 @@ export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
+export { DsButtonInverted } from "./ds-button-inverted.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
+export { DsCalendar } from "./ds-calendar.js";
 export { DsCardActionCenter } from "./ds-card-action-center.js";
 export { DsCardChart } from "./ds-card-chart.js";
 export { DsCardNavigation } from "./ds-card-navigation.js";
@@ -39,6 +41,8 @@ export { DsEmptyState } from "./ds-empty-state.js";
 export { DsField } from "./ds-field.js";
 export { DsFilterMenu } from "./ds-filter-menu.js";
 export { DsIcon } from "./ds-icon.js";
+export { DsInputDate } from "./ds-input-date.js";
+export { DsInputTime } from "./ds-input-time.js";
 export { DsInput } from "./ds-input.js";
 export { DsLoader } from "./ds-loader.js";
 export { DsMarkdown } from "./ds-markdown.js";
@@ -83,6 +87,7 @@ export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
 export { DsTextarea } from "./ds-textarea.js";
+export { DsTimePicker } from "./ds-time-picker.js";
 export { DsToast } from "./ds-toast.js";
 export { DsTooltipChart } from "./ds-tooltip-chart.js";
 export { DsTooltip } from "./ds-tooltip.js";

package/dist/react/ds-button-inverted.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsButtonInvertedCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsButtonInverted as DsButtonInvertedElement } from "@ds-mo/ui/dist/components/ds-button-inverted.js";
+export type DsButtonInvertedEvents = {
+    onDsClick: EventName<DsButtonInvertedCustomEvent<MouseEvent>>;
+    onDsMenuClick: EventName<DsButtonInvertedCustomEvent<MouseEvent>>;
+};
+export declare const DsButtonInverted: StencilReactComponent<DsButtonInvertedElement, DsButtonInvertedEvents, Components.DsButtonInverted>;

package/dist/react/ds-button-inverted.js

@@ -0,0 +1,15 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsButtonInverted as DsButtonInvertedElement, defineCustomElement as defineDsButtonInverted } from "@ds-mo/ui/dist/components/ds-button-inverted.js";
+export const DsButtonInverted = /*@__PURE__*/ createComponent({
+    tagName: 'ds-button-inverted',
+    elementClass: DsButtonInvertedElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsClick: 'dsClick',
+        onDsMenuClick: 'dsMenuClick'
+    },
+    defineCustomElement: defineDsButtonInverted
+});

package/dist/react/ds-calendar.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsCalendarCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCalendar as DsCalendarElement } from "@ds-mo/ui/dist/components/ds-calendar.js";
+export type DsCalendarEvents = {
+    onDsChange: EventName<DsCalendarCustomEvent<string>>;
+};
+export declare const DsCalendar: StencilReactComponent<DsCalendarElement, DsCalendarEvents, Components.DsCalendar>;

package/dist/react/ds-calendar.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsCalendar as DsCalendarElement, defineCustomElement as defineDsCalendar } from "@ds-mo/ui/dist/components/ds-calendar.js";
+export const DsCalendar = /*@__PURE__*/ createComponent({
+    tagName: 'ds-calendar',
+    elementClass: DsCalendarElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' },
+    defineCustomElement: defineDsCalendar
+});

package/dist/react/ds-field.d.ts

@@ -6,4 +6,4 @@ import type { StencilReactComponent } from './react-runtime.js';
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsField as DsFieldElement } from "@ds-mo/ui/dist/components/ds-field.js";
 export type DsFieldEvents = NonNullable<unknown>;
-export declare const DsField: StencilReactComponent<DsFieldElement, DsFieldEvents, Components.DsField, 'label'>;
+export declare const DsField: StencilReactComponent<DsFieldElement, DsFieldEvents, Components.DsField>;

package/dist/react/ds-input-date.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsInputDateCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsInputDate as DsInputDateElement } from "@ds-mo/ui/dist/components/ds-input-date.js";
+export type DsInputDateEvents = {
+    onDsChange: EventName<DsInputDateCustomEvent<string>>;
+};
+export declare const DsInputDate: StencilReactComponent<DsInputDateElement, DsInputDateEvents, Components.DsInputDate>;

package/dist/react/ds-input-date.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsInputDate as DsInputDateElement, defineCustomElement as defineDsInputDate } from "@ds-mo/ui/dist/components/ds-input-date.js";
+export const DsInputDate = /*@__PURE__*/ createComponent({
+    tagName: 'ds-input-date',
+    elementClass: DsInputDateElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' },
+    defineCustomElement: defineDsInputDate
+});

package/dist/react/ds-input-time.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsInputTimeCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsInputTime as DsInputTimeElement } from "@ds-mo/ui/dist/components/ds-input-time.js";
+export type DsInputTimeEvents = {
+    onDsChange: EventName<DsInputTimeCustomEvent<string>>;
+};
+export declare const DsInputTime: StencilReactComponent<DsInputTimeElement, DsInputTimeEvents, Components.DsInputTime>;

package/dist/react/ds-input-time.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsInputTime as DsInputTimeElement, defineCustomElement as defineDsInputTime } from "@ds-mo/ui/dist/components/ds-input-time.js";
+export const DsInputTime = /*@__PURE__*/ createComponent({
+    tagName: 'ds-input-time',
+    elementClass: DsInputTimeElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' },
+    defineCustomElement: defineDsInputTime
+});

package/dist/react/ds-time-picker.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsTimePickerCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTimePicker as DsTimePickerElement } from "@ds-mo/ui/dist/components/ds-time-picker.js";
+export type DsTimePickerEvents = {
+    onDsChange: EventName<DsTimePickerCustomEvent<string>>;
+};
+export declare const DsTimePicker: StencilReactComponent<DsTimePickerElement, DsTimePickerEvents, Components.DsTimePicker>;

package/dist/react/ds-time-picker.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTimePicker as DsTimePickerElement, defineCustomElement as defineDsTimePicker } from "@ds-mo/ui/dist/components/ds-time-picker.js";
+export const DsTimePicker = /*@__PURE__*/ createComponent({
+    tagName: 'ds-time-picker',
+    elementClass: DsTimePickerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' },
+    defineCustomElement: defineDsTimePicker
+});

package/dist/types/components/BarTitle/BarTitle.d.ts

@@ -69,6 +69,7 @@ export declare class BarTitle {
     handleActionsChange(): void;
     private reportActionIdIssues;
     private get compact();
+    private get menuSideOffset();
     private get effectiveVariant();
     private get dividerVisible();
     private get expandedBreadcrumbItems();

package/dist/types/components/BarTitle/bar-title-action-chrome.d.ts

@@ -52,6 +52,7 @@ export declare function renderBarTitleActionMenus(options: {
     visibleActions: BarTitleActionConfigItem[];
     instanceId: number;
     resolvedActionItems: BarTitleActionConfigItem[];
+    sideOffset?: number | string;
     openActionMenuId: string;
     actionMenuInitialFocusVisible: boolean;
     overflowTrigger: FocusableBarTitleButton | null;
@@ -65,6 +66,7 @@ export declare function renderBarTitleOverflowMenu(options: {
     showOverflowTrigger: boolean;
     actionMenuId: string;
     actionMenuTriggerId: string;
+    sideOffset?: number | string;
     actionsAriaLabel: string;
     open: boolean;
     actionMenuInitialFocusVisible: boolean;

package/dist/types/components/ButtonInverted/ButtonInverted.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ControlInsetDepth } from '../../utils/control-text';
+import type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';
+export type ButtonInvertedVariant = ButtonVariant;
+export type ButtonInvertedSize = ButtonSize;
+export type ButtonInvertedWidth = ButtonWidth;
+export type ButtonInvertedPopup = ButtonPopup;
+export declare class ButtonInverted {
+    /**
+     * Content layout. Default is label-only; pass `icon` for icon-only chrome
+     * or `icon-label` for leading icon + text.
+     */
+    variant: ButtonInvertedVariant;
+    /** Control density (height, padding, icon, type). */
+    size: ButtonInvertedSize;
+    /** Use reduced outer geometry when nested inside a control of the same size. */
+    isInset: boolean;
+    /** Single removes 4px overall; double removes 8px overall (xs stays single). */
+    insetDepth: ControlInsetDepth;
+    /** Width fit — hug content (default) or fill the parent. */
+    width: ButtonInvertedWidth;
+    /** Visible text for `label` / `icon-label` variants. */
+    label: string;
+    /** Whether the visible label uses the emphasized weight. */
+    labelEmphasis: boolean;
+    /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */
+    icon: string;
+    /** Use the half-radius treatment instead of the default control radius. */
+    rounded: boolean;
+    /**
+     * Scale down during a physical pointer press.
+     * Disable when an owning composite requires fixed child or background geometry.
+     */
+    pressScale: boolean;
+    /** Disables interaction. */
+    isInactive: boolean;
+    /** Shows an inline loader and prevents interaction without applying inactive opacity. */
+    isLoading: boolean;
+    /** Native button type. */
+    type: 'button' | 'submit' | 'reset';
+    /** Accessible name override. Required for icon-only buttons. */
+    ariaLabel: string | null;
+    /** ID of the popup this button controls. */
+    controls: string | undefined;
+    /** Controlled disclosure state forwarded to aria-expanded. */
+    expanded: boolean | undefined;
+    /**
+     * The associated menu, picker, or panel is visible, including its exit motion.
+     * Holds only the pressed wash and does not set ARIA or selection state.
+     */
+    surfaceOpen: boolean | undefined;
+    /** Popup type exposed to assistive technology. */
+    haspopup: ButtonInvertedPopup | undefined;
+    /**
+     * Append a separate ChevronDown menu segment while preserving the inverted
+     * recipe, variant, size, loading, inactive, and width treatment.
+     */
+    split: boolean;
+    /** Accessible name for the appended menu segment in split mode. */
+    menuAriaLabel: string;
+    /**
+     * This action has a menu: implies `aria-haspopup="menu"` and adds the
+     * trailing chevron that carries the affordance.
+     *
+     * Only `label` and `icon-label` are supported. Icon-only menu triggers belong
+     * to ButtonUnfilled so the glyph can communicate the overflow affordance.
+     */
+    hasMenu: boolean;
+    dsClick: EventEmitter<MouseEvent>;
+    dsMenuClick: EventEmitter<MouseEvent>;
+    private buttonEl;
+    private menuButtonEl;
+    setFocus(segment?: 'primary' | 'menu'): Promise<void>;
+    private handleClick;
+    private handleMenuClick;
+    private get resolvedHaspopup();
+    private get resolvedSurfaceOpen();
+    private get accessibleName();
+    private get doubleInset();
+    private buttonClass;
+    render(): any;
+}
+//# sourceMappingURL=ButtonInverted.d.ts.map

package/dist/types/components/ButtonInverted/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonInvertedPopup, ButtonInvertedSize, ButtonInvertedVariant, ButtonInvertedWidth, } from './ButtonInverted';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Calendar/Calendar.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type CalendarSelectionMode = 'single' | 'range';
+export declare class Calendar {
+    el: HTMLElement;
+    /** Single date emits YYYY-MM-DD. Range emits the shared `range:start/end` string. */
+    selectionMode: CalendarSelectionMode;
+    value: string;
+    min: string | undefined;
+    max: string | undefined;
+    isInactive: boolean;
+    /** Move keyboard focus into the grid after the calendar is rendered. */
+    autoFocus: boolean;
+    dsChange: EventEmitter<string>;
+    private month;
+    private pendingStart;
+    private previewEnd;
+    private heldRange;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    onValueChange(): void;
+    setFocus(): Promise<void>;
+    private anchorDate;
+    private isDisabled;
+    private moveMonth;
+    private selectDate;
+    private previewRange;
+    private clearPreview;
+    private focusDate;
+    private handleDayKeyDown;
+    render(): any;
+}
+//# sourceMappingURL=Calendar.d.ts.map