@ds-mo/ui 14.34.0 → 14.36.0

package/dist/mcp-data/registry/textarea.json

@@ -52,7 +52,7 @@
         "The default four visible rows can be changed with rows; rows is clamped to at least one.",
         "Vertical resizing is enabled by default and can be disabled when the surrounding layout owns the field height.",
         "Size changes typography and inset spacing without changing the authored row count.",
-        "Border, focus, error, placeholder, inactive, hover, and pressed treatments follow the same shared recipes as Input."
+        "Border, focus, error, placeholder, inactive, hover, and pressed treatments follow the same shared recipes as Input. When hasBorder is false, supporting error copy insets to the text origin rather than the resting border box."
       ],
       "responsiveBehavior": [
         "Textarea fills its parent by default and follows the width supplied by Field or the form layout.",
@@ -593,7 +593,7 @@
     },
     {
       "path": "src/wc/components/Textarea/Textarea.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\n\nexport type TextareaSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type TextareaWidth = ControlWidth;\nexport type TextareaResize = 'vertical' | 'none';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-textarea',\n  styleUrl: 'Textarea.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-textarea-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() placeholder: string | undefined;\n  /** Visible text rows before the field scrolls. */\n  @Prop() rows: number = 4;\n  /** Whether the user can resize the field vertically. */\n  @Prop() resize: TextareaResize = 'vertical';\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Whether the browser should check spelling and grammar. */\n  @Prop({ attribute: 'spellcheck' }) spellCheck: boolean = true;\n  /** Control density for typography and inset spacing. */\n  @Prop() size: TextareaSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: TextareaWidth = 'fill';\n  /** Show the standard inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Show the standard hover and pressed fill when the field is not embedded in interactive chrome. */\n  @Prop() hasInteractionFill: boolean = true;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal textarea with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private initialValue = '';\n  private textareaEl?: HTMLTextAreaElement;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.textareaEl?.focus();\n  }\n\n  private handleInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const rows = Number.isFinite(this.rows) ? Math.max(1, Math.floor(this.rows)) : 4;\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n\n    return (\n      <Host\n        class={{\n          'textarea-host': true,\n          'ds-field-stack': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'textarea-control': true,\n            'textarea-control--resizable': this.resize === 'vertical',\n            'textarea-control--bordered': this.hasBorder,\n            'textarea-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': this.hasInteractionFill,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          <textarea\n            ref={element => {\n              this.textareaEl = element;\n            }}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            rows={rows}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            spellcheck={this.spellCheck}\n            class={`native-textarea native-textarea--resize-${this.resize} ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\n\nexport type TextareaSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type TextareaWidth = ControlWidth;\nexport type TextareaResize = 'vertical' | 'none';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-textarea',\n  styleUrl: 'Textarea.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Textarea {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-textarea-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() placeholder: string | undefined;\n  /** Visible text rows before the field scrolls. */\n  @Prop() rows: number = 4;\n  /** Whether the user can resize the field vertically. */\n  @Prop() resize: TextareaResize = 'vertical';\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Whether the browser should check spelling and grammar. */\n  @Prop({ attribute: 'spellcheck' }) spellCheck: boolean = true;\n  /** Control density for typography and inset spacing. */\n  @Prop() size: TextareaSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: TextareaWidth = 'fill';\n  /** Show the standard inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Show the standard hover and pressed fill when the field is not embedded in interactive chrome. */\n  @Prop() hasInteractionFill: boolean = true;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal textarea with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private initialValue = '';\n  private textareaEl?: HTMLTextAreaElement;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.textareaEl?.focus();\n  }\n\n  private handleInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const rows = Number.isFinite(this.rows) ? Math.max(1, Math.floor(this.rows)) : 4;\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n\n    return (\n      <Host\n        class={{\n          'textarea-host': true,\n          'ds-field-stack': true,\n          'ds-field-stack--supporting-inset': !this.hasBorder,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'textarea-control': true,\n            'textarea-control--resizable': this.resize === 'vertical',\n            'textarea-control--bordered': this.hasBorder,\n            'textarea-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': this.hasInteractionFill,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          <textarea\n            ref={element => {\n              this.textareaEl = element;\n            }}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            rows={rows}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            spellcheck={this.spellCheck}\n            class={`native-textarea native-textarea--resize-${this.resize} ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

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";
@@ -73,6 +77,7 @@ export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableGroup } from "./ds-table-group.js";
+export { DsTablePreferences } from "./ds-table-preferences.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
 export { DsTableSearch } from "./ds-table-search.js";
 export { DsTableSort } from "./ds-table-sort.js";
@@ -81,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";
@@ -74,6 +78,7 @@ export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableGroup } from "./ds-table-group.js";
+export { DsTablePreferences } from "./ds-table-preferences.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
 export { DsTableSearch } from "./ds-table-search.js";
 export { DsTableSort } from "./ds-table-sort.js";
@@ -82,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-table-preferences.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 DsTablePreferencesCustomEvent, type FilterMenuChangeDetail, type FilterMenuMatchModeChangeDetail, type PreferencesTab, type TableColumnsConfigChangeDetail, type TableGroupingState, type TableSortChangeDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTablePreferences as DsTablePreferencesElement } from "@ds-mo/ui/dist/components/ds-table-preferences.js";
+export type DsTablePreferencesEvents = {
+    onDsCustomizeOptionChange: EventName<DsTablePreferencesCustomEvent<string>>;
+    onDsPreferencesTabChange: EventName<DsTablePreferencesCustomEvent<PreferencesTab>>;
+    onDsFilterChange: EventName<DsTablePreferencesCustomEvent<FilterMenuChangeDetail>>;
+    onDsFilterMatchModeChange: EventName<DsTablePreferencesCustomEvent<FilterMenuMatchModeChangeDetail>>;
+    onDsActiveFilterChange: EventName<DsTablePreferencesCustomEvent<string>>;
+    onDsFiltersClear: EventName<DsTablePreferencesCustomEvent<void>>;
+    onDsSortChange: EventName<DsTablePreferencesCustomEvent<TableSortChangeDetail>>;
+    onDsGroupChange: EventName<DsTablePreferencesCustomEvent<TableGroupingState>>;
+    onDsGroupClear: EventName<DsTablePreferencesCustomEvent<void>>;
+    onDsColumnsConfigChange: EventName<DsTablePreferencesCustomEvent<TableColumnsConfigChangeDetail>>;
+};
+export declare const DsTablePreferences: StencilReactComponent<DsTablePreferencesElement, DsTablePreferencesEvents, Components.DsTablePreferences>;

package/dist/react/ds-table-preferences.js

@@ -0,0 +1,23 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTablePreferences as DsTablePreferencesElement, defineCustomElement as defineDsTablePreferences } from "@ds-mo/ui/dist/components/ds-table-preferences.js";
+export const DsTablePreferences = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-preferences',
+    elementClass: DsTablePreferencesElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsCustomizeOptionChange: 'dsCustomizeOptionChange',
+        onDsPreferencesTabChange: 'dsPreferencesTabChange',
+        onDsFilterChange: 'dsFilterChange',
+        onDsFilterMatchModeChange: 'dsFilterMatchModeChange',
+        onDsActiveFilterChange: 'dsActiveFilterChange',
+        onDsFiltersClear: 'dsFiltersClear',
+        onDsSortChange: 'dsSortChange',
+        onDsGroupChange: 'dsGroupChange',
+        onDsGroupClear: 'dsGroupClear',
+        onDsColumnsConfigChange: 'dsColumnsConfigChange'
+    },
+    defineCustomElement: defineDsTablePreferences
+});

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

@@ -7,6 +7,7 @@ import { type DsTableCustomEvent, type PaginationChangeDetail, type TableCellAct
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTable as DsTableElement } from "@ds-mo/ui/dist/components/ds-table.js";
 export type DsTableEvents = {
+    onDsCustomizeOptionChange: EventName<DsTableCustomEvent<string>>;
     onDsSortChange: EventName<DsTableCustomEvent<TableSortChangeDetail>>;
     onDsGroupCollapseChange: EventName<DsTableCustomEvent<TableGroupCollapseChangeDetail>>;
     onDsSelectionChange: EventName<DsTableCustomEvent<TableSelectionChangeDetail>>;

package/dist/react/ds-table.js

@@ -8,6 +8,7 @@ export const DsTable = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
+        onDsCustomizeOptionChange: 'dsCustomizeOptionChange',
         onDsSortChange: 'dsSortChange',
         onDsGroupCollapseChange: 'dsGroupCollapseChange',
         onDsSelectionChange: 'dsSelectionChange',

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();