@ds-mo/ui 15.2.0 → 15.4.0

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

@@ -38,7 +38,7 @@
         {
           "when": "The hour, minute, and AM/PM lists are needed without a form field.",
           "component": "component:ds-time-picker",
-          "reason": "TimePicker owns the bounded 12-hour lists and selected-tile treatment."
+          "reason": "TimePicker owns the bounded clock lists and selected-tile treatment."
         },
         {
           "when": "The user chooses from a finite set of named times or cadences.",
@@ -56,9 +56,9 @@
       ],
       "accessibility": [
         "Provide a persistent visible label through the owning field or an external native label.",
-        "The text field remains the keyboard and assistive-technology value control. Users can type HH:MM, H:MM, or a 12-hour label such as 9:00 AM.",
+        "The text field remains the keyboard and assistive-technology value control. Users can type HH:MM, H:MM, or a 12- or 24-hour label such as 9:00 AM.",
         "The trailing clock button is a named disclosure that opens a non-modal time dialog. It shares the field's density, uses the single inset recipe, and reports expanded state while the picker is open.",
-        "Filled values keep HH:MM as the form value. Visible text uses a 12-hour label such as 9:00 AM so the field does not show 24-hour chrome. That label reuses Input's value typography and text-container inset.",
+        "Filled values keep HH:MM as the form value. Visible text uses a 12- or 24-hour label such as 9:00 AM so the field does not show 24-hour chrome. That label reuses Input's value typography and text-container inset.",
         "Error text is associated with the text field and announced as an alert when the invalid state is rendered.",
         "Read-only fields remain focusable and submittable while preventing edits; inactive or disabled fields leave the tab order and are omitted from form submission."
       ],
@@ -68,7 +68,8 @@
         "The normal field boundary uses the shared secondary inset border. Focus promotes it to the thicker bold-brand inset stroke, while error uses the thicker bold-negative inset stroke without changing geometry. When hasBorder is false, supporting error copy insets to the field's text origin rather than the resting border box.",
         "The host exposes focused, filled, dirty, touched, invalid, disabled, read-only, and required data attributes for Field integration and diagnostics.",
         "The trailing clock action is an unfilled icon button of the same density as the field, borderless and square, with the single inset recipe so the 4px height reduction insets it equally from the field's top, end, and bottom edges. It does not replace the field label or the submitted time value. Inactive or disabled fields apply that treatment on the host only, so the nested button is not faded a second time.",
-        "Activating the clock button opens the shared TimePicker in a choice-popup dialog anchored to the field's end edge, beside the trailing clock action. Choosing hour, minute, or AM/PM commits that part of the time and leaves the dialog open so the other columns can be adjusted. Typing in the field commits a parsed time without requiring the picker. Invalid typed text reverts to the last committed value on blur."
+        "Activating the clock button opens the shared TimePicker in a choice-popup dialog anchored to the field's end edge, beside the trailing clock action. Choosing hour, minute, or AM/PM commits that part of the time and leaves the dialog open so the other columns can be adjusted. Typing in the field commits a parsed time without requiring the picker. Invalid typed text reverts to the last committed value on blur.",
+        "The default twelve-hour presentation includes AM/PM. Twenty-four-hour presentation uses hours 00–23 and omits the period column; both keep HH:MM form values and the same time bounds."
       ],
       "responsiveBehavior": [
         "Form fields normally fill their parent; use hug width only in a compact toolbar or filter layout with an explicit width constraint.",
@@ -226,6 +227,15 @@
           "required": false,
           "mutable": false
         },
+        "hourFormat": {
+          "type": "'12' | '24'",
+          "resolvedType": "\"12\" | \"24\"",
+          "attribute": "hour-format",
+          "default": "'12'",
+          "required": false,
+          "mutable": false,
+          "description": "Display format; submitted values remain HH:MM in either format."
+        },
         "inputId": {
           "type": "string | undefined",
           "resolvedType": "string | undefined",
@@ -414,6 +424,15 @@
         "required": false,
         "mutable": false
       },
+      "hourFormat": {
+        "type": "'12' | '24'",
+        "resolvedType": "\"12\" | \"24\"",
+        "attribute": "hour-format",
+        "default": "'12'",
+        "required": false,
+        "mutable": false,
+        "description": "Display format; submitted values remain HH:MM in either format."
+      },
       "inputId": {
         "type": "string | undefined",
         "resolvedType": "string | undefined",
@@ -551,8 +570,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -575,7 +594,7 @@
     },
     {
       "path": "src/wc/components/InputTime/InputTime.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  formatClockTimeLabel,\n  isClockTime,\n  isClockTimeStepAligned,\n  parseLooseClockTime,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  restoreStringFormState,\n  setFormControlValue,\n  TOKEN_DEFAULTS,\n  type ControlSize,\n  type ControlWidth,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\n\nexport type InputTimeSize = ControlSize;\nexport type InputTimeWidth = ControlWidth;\n\nlet idCounter = 0;\n\nconst INVALID_TIME_MESSAGE = 'Enter a valid time.';\nconst TIME_BEFORE_MIN_MESSAGE = 'Time is before the minimum allowed time.';\nconst TIME_AFTER_MAX_MESSAGE = 'Time is after the maximum allowed time.';\nconst TIME_STEP_MESSAGE = 'Time does not match the allowed interval.';\n\n@Component({\n  tag: 'ds-input-time',\n  styleUrl: 'InputTime.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class InputTime {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-time-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n  private popupId = `${this.generatedId}-popup`;\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  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Native time step in seconds. Defaults to minutes (`60`). */\n  @Prop() step: string | number = 60;\n  @Prop() min: string | undefined;\n  @Prop() max: string | undefined;\n  @Prop() size: InputTimeSize = 'md';\n  @Prop() width: InputTimeWidth = 'fill';\n  @Prop() hasBorder: boolean = true;\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  @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 inputEl?: HTMLInputElement;\n  private controlEl?: HTMLElement;\n  private clockButton?: HTMLDsButtonUnfilledElement;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private draftText = '';\n  @State() private open = false;\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos = { x: 0, y: 0 };\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.controlEl ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: 'end',\n          alignOffsetPx: 0,\n          sectionInsetPx,\n          anchorAlignment: 'popup-frame',\n        }),\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    observeResize: true,\n    topLayer: true,\n  });\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.controlEl ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.closePicker(false),\n  });\n\n  private get popupFallbackWidth(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeight(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get formInactive(): boolean {\n    return this.isInactive || this.disabled || this.formDisabled;\n  }\n\n  private get pickerInactive(): boolean {\n    return this.formInactive || this.readOnly;\n  }\n\n  private get hasConstraintError(): boolean {\n    if (!this.value) return false;\n    if (!isClockTime(this.value)) return true;\n    if (this.min && isClockTime(this.min) && this.value < this.min) return true;\n    if (this.max && isClockTime(this.max) && this.value > this.max) return true;\n    return !isClockTimeStepAligned(this.value, this.step, this.min);\n  }\n\n  private get isInvalid(): boolean {\n    return (\n      this.error ||\n      (!this.formInactive &&\n        ((this.required && this.value.length === 0) || this.hasConstraintError))\n    );\n  }\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.teardownListeners();\n  }\n\n  @Watch('value')\n  @Watch('required')\n  @Watch('requiredMessage')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  syncFormValue() {\n    const inactive = this.formInactive;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const flags: ValidityStateFlags = {};\n    let message = '';\n    if (!inactive) {\n      if (this.required && this.value.length === 0) {\n        flags.valueMissing = true;\n        message = this.requiredMessage;\n      } else if (this.value && !isClockTime(this.value)) {\n        flags.badInput = true;\n        message = INVALID_TIME_MESSAGE;\n      } else if (this.value && this.min && isClockTime(this.min) && this.value < this.min) {\n        flags.rangeUnderflow = true;\n        message = TIME_BEFORE_MIN_MESSAGE;\n      } else if (this.value && this.max && isClockTime(this.max) && this.value > this.max) {\n        flags.rangeOverflow = true;\n        message = TIME_AFTER_MAX_MESSAGE;\n      } else if (this.value && !isClockTimeStepAligned(this.value, this.step, this.min)) {\n        flags.stepMismatch = true;\n        message = TIME_STEP_MESSAGE;\n      }\n    }\n    this.internals.setValidity(flags, message);\n  }\n\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('readOnly')\n  onInteractionStateChange() {\n    this.syncFormValue();\n    if (this.pickerInactive && this.shouldRender) this.closePicker(false);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.onInteractionStateChange();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.draftText = this.displayValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n    this.draftText = this.displayValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  @Listen('keydown')\n  handleHostKeyDown(event: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.closePicker('button');\n      return;\n    }\n    if (event.key !== 'Tab') return;\n    const popup = this.el.querySelector<HTMLElement>('.input-time-popup');\n    if (!popup || !event.composedPath().includes(popup)) return;\n    if (!this.interaction.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.closePicker(false);\n    this.interaction.moveFocusAfterTab(event.shiftKey);\n  }\n\n  private get displayValue(): string {\n    return formatClockTimeLabel(this.value);\n  }\n\n  private parseDraft(text: string): string | null {\n    const trimmed = text.trim();\n    if (!trimmed) return '';\n    const iso = parseLooseClockTime(trimmed);\n    if (!iso) return null;\n    if (this.min && isClockTime(this.min) && iso < this.min) return null;\n    if (this.max && isClockTime(this.max) && iso > this.max) return null;\n    if (!isClockTimeStepAligned(iso, this.step, this.min)) return null;\n    return iso;\n  }\n\n  private commitIso(iso: string, emit = true) {\n    if (this.value !== iso) {\n      this.value = iso;\n      if (emit) this.dsChange.emit(iso);\n    }\n    this.draftText = formatClockTimeLabel(iso);\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private openPicker() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.readOnly;\n    if (inactive || this.open) return;\n    this.shouldRender = true;\n    this.closing = false;\n    this.positionReady = false;\n    this.open = true;\n    this.teardownListeners();\n    this.interaction.connect();\n    this.position.observe();\n    this.position.schedule();\n  }\n\n  private closePicker(restore: 'input' | 'button' | false) {\n    if (!this.shouldRender || this.closing) return;\n    this.open = false;\n    this.position.cancel();\n    this.closing = true;\n    this.interaction.disconnect();\n    this.position.unobserve();\n    if (restore === 'input') this.inputEl?.focus();\n    if (restore === 'button') void this.clockButton?.setFocus();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.input-time-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closeTimer = null;\n  }\n\n  private togglePicker = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.readOnly) return;\n    if (this.open) this.closePicker('button');\n    else this.openPicker();\n  };\n\n  private handleInput = (event: Event) => {\n    if (this.pickerInactive) return;\n    this.draftText = (event.target as HTMLInputElement).value;\n    const parsed = this.parseDraft(this.draftText);\n    if (parsed === null) return;\n    this.commitIso(parsed);\n  };\n\n  private handleFocus = () => {\n    this.draftText = this.displayValue || this.value;\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n    if (this.pickerInactive) {\n      this.draftText = this.displayValue;\n      return;\n    }\n    const parsed = this.parseDraft(this.draftText);\n    if (parsed === null) {\n      this.draftText = this.displayValue;\n      return;\n    }\n    this.commitIso(parsed);\n  };\n\n  private handleTimeChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    if (this.pickerInactive) return;\n    const parsed = this.parseDraft(event.detail);\n    if (parsed === null) return;\n    this.commitIso(parsed);\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.formInactive;\n    const pickerInactive = this.pickerInactive;\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 textClass = `ds-text--${textVariant.replace('text-', '')}`;\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n    const popupStyle = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: 'var(--dimension-z-index-floating)',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    return (\n      <Host\n        class={{\n          'input-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.isInvalid ? '' : 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          ref={element => {\n            this.controlEl = element;\n          }}\n          class={{\n            'input-control': true,\n            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': this.hasInteractionFill,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          <input\n            ref={element => {\n              this.inputEl = element;\n            }}\n            type=\"text\"\n            id={inputId}\n            value={this.focused ? this.draftText : this.displayValue}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete=\"off\"\n            spellcheck={false}\n            class={{\n              'native-input': true,\n              'native-input--align-start': true,\n              'ds-control-label-box': true,\n              [textClass]: true,\n              'ds-text--regular': true,\n            }}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.isInvalid ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <ds-button-unfilled\n            ref={element => {\n              this.clockButton = element as HTMLDsButtonUnfilledElement | undefined;\n            }}\n            class=\"input-control__datetime-action\"\n            variant=\"icon\"\n            size={this.size}\n            icon=\"Clock\"\n            hasBorder={false}\n            isInset\n            isInactive={pickerInactive}\n            ariaLabel=\"Choose time\"\n            haspopup=\"dialog\"\n            expanded={this.open}\n            surfaceOpen={this.open || this.closing}\n            controls={this.open ? this.popupId : undefined}\n            onDsClick={this.togglePicker}\n          />\n        </div>\n        {this.shouldRender ? (\n          <div\n            id={this.popupId}\n            popover=\"manual\"\n            class={{\n              'input-time-popup': true,\n              'ds-choice-popup': true,\n              'ds-choice-popup--closing': this.closing,\n              'ds-chrome-column': true,\n              'ds-chrome-space--sm': true,\n            }}\n            style={popupStyle}\n            role=\"dialog\"\n            aria-label=\"Choose time\"\n          >\n            <ds-time-picker\n              value={this.value}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              isInactive={pickerInactive}\n              autoFocus\n              onDsChange={this.handleTimeChange}\n            />\n          </div>\n        ) : null}\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  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n  Method,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  formatClockTimeLabel,\n  isClockTime,\n  isClockTimeStepAligned,\n  parseLooseClockTime,\n  resolveChoicePopupAlignOffset,\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  restoreStringFormState,\n  setFormControlValue,\n  TOKEN_DEFAULTS,\n  type ControlSize,\n  type ControlWidth,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\n\nexport type InputTimeSize = ControlSize;\nexport type InputTimeWidth = ControlWidth;\n\nlet idCounter = 0;\n\nconst INVALID_TIME_MESSAGE = 'Enter a valid time.';\nconst TIME_BEFORE_MIN_MESSAGE = 'Time is before the minimum allowed time.';\nconst TIME_AFTER_MAX_MESSAGE = 'Time is after the maximum allowed time.';\nconst TIME_STEP_MESSAGE = 'Time does not match the allowed interval.';\n\n@Component({\n  tag: 'ds-input-time',\n  styleUrl: 'InputTime.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class InputTime {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-time-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n  private popupId = `${this.generatedId}-popup`;\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  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Native time step in seconds. Defaults to minutes (`60`). */\n  @Prop() step: string | number = 60;\n  /** Display format; submitted values remain HH:MM in either format. */\n  @Prop() hourFormat: '12' | '24' = '12';\n  @Prop() min: string | undefined;\n  @Prop() max: string | undefined;\n  @Prop() size: InputTimeSize = 'md';\n  @Prop() width: InputTimeWidth = 'fill';\n  @Prop() hasBorder: boolean = true;\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  @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 inputEl?: HTMLInputElement;\n  private controlEl?: HTMLElement;\n  private clockButton?: HTMLDsButtonUnfilledElement;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private draftText = '';\n  @State() private open = false;\n  @State() private shouldRender = false;\n  @State() private closing = false;\n  @State() private positionReady = false;\n  @State() private pos = { x: 0, y: 0 };\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.controlEl ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n        popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n        side: 'bottom',\n        align: 'end',\n        sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: resolveChoicePopupAlignOffset({\n          align: 'end',\n          alignOffsetPx: 0,\n          sectionInsetPx,\n          anchorAlignment: 'popup-frame',\n        }),\n        viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n      };\n    },\n    apply: ({ x, y }) => {\n      this.pos = { x, y };\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    observeResize: true,\n    topLayer: true,\n  });\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.controlEl ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.closePicker(false),\n  });\n\n  private get popupFallbackWidth(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeight(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get formInactive(): boolean {\n    return this.isInactive || this.disabled || this.formDisabled;\n  }\n\n  private get pickerInactive(): boolean {\n    return this.formInactive || this.readOnly;\n  }\n\n  private get hasConstraintError(): boolean {\n    if (!this.value) return false;\n    if (!isClockTime(this.value)) return true;\n    if (this.min && isClockTime(this.min) && this.value < this.min) return true;\n    if (this.max && isClockTime(this.max) && this.value > this.max) return true;\n    return !isClockTimeStepAligned(this.value, this.step, this.min);\n  }\n\n  private get isInvalid(): boolean {\n    return (\n      this.error ||\n      (!this.formInactive &&\n        ((this.required && this.value.length === 0) || this.hasConstraintError))\n    );\n  }\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  disconnectedCallback() {\n    this.position.unobserve();\n    this.teardownListeners();\n  }\n\n  @Watch('hourFormat')\n  onHourFormatChange() {\n    this.draftText = this.displayValue;\n  }\n\n  @Watch('value')\n  @Watch('required')\n  @Watch('requiredMessage')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  syncFormValue() {\n    const inactive = this.formInactive;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const flags: ValidityStateFlags = {};\n    let message = '';\n    if (!inactive) {\n      if (this.required && this.value.length === 0) {\n        flags.valueMissing = true;\n        message = this.requiredMessage;\n      } else if (this.value && !isClockTime(this.value)) {\n        flags.badInput = true;\n        message = INVALID_TIME_MESSAGE;\n      } else if (this.value && this.min && isClockTime(this.min) && this.value < this.min) {\n        flags.rangeUnderflow = true;\n        message = TIME_BEFORE_MIN_MESSAGE;\n      } else if (this.value && this.max && isClockTime(this.max) && this.value > this.max) {\n        flags.rangeOverflow = true;\n        message = TIME_AFTER_MAX_MESSAGE;\n      } else if (this.value && !isClockTimeStepAligned(this.value, this.step, this.min)) {\n        flags.stepMismatch = true;\n        message = TIME_STEP_MESSAGE;\n      }\n    }\n    this.internals.setValidity(flags, message);\n  }\n\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('readOnly')\n  onInteractionStateChange() {\n    this.syncFormValue();\n    if (this.pickerInactive && this.shouldRender) this.closePicker(false);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.onInteractionStateChange();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.draftText = this.displayValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n    this.draftText = this.displayValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  @Listen('keydown')\n  handleHostKeyDown(event: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.closePicker('button');\n      return;\n    }\n    if (event.key !== 'Tab') return;\n    const popup = this.el.querySelector<HTMLElement>('.input-time-popup');\n    if (!popup || !event.composedPath().includes(popup)) return;\n    if (!this.interaction.tabLeavesPopup(event)) return;\n    event.preventDefault();\n    this.closePicker(false);\n    this.interaction.moveFocusAfterTab(event.shiftKey);\n  }\n\n  private get displayValue(): string {\n    return this.hourFormat === '24' ? this.value : formatClockTimeLabel(this.value);\n  }\n\n  private parseDraft(text: string): string | null {\n    const trimmed = text.trim();\n    if (!trimmed) return '';\n    const iso = parseLooseClockTime(trimmed);\n    if (!iso) return null;\n    if (this.min && isClockTime(this.min) && iso < this.min) return null;\n    if (this.max && isClockTime(this.max) && iso > this.max) return null;\n    if (!isClockTimeStepAligned(iso, this.step, this.min)) return null;\n    return iso;\n  }\n\n  private commitIso(iso: string, emit = true) {\n    if (this.value !== iso) {\n      this.value = iso;\n      if (emit) this.dsChange.emit(iso);\n    }\n    this.draftText = this.hourFormat === '24' ? iso : formatClockTimeLabel(iso);\n  }\n\n  private teardownListeners() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private openPicker() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.readOnly;\n    if (inactive || this.open) return;\n    this.shouldRender = true;\n    this.closing = false;\n    this.positionReady = false;\n    this.open = true;\n    this.teardownListeners();\n    this.interaction.connect();\n    this.position.observe();\n    this.position.schedule();\n  }\n\n  private closePicker(restore: 'input' | 'button' | false) {\n    if (!this.shouldRender || this.closing) return;\n    this.open = false;\n    this.position.cancel();\n    this.closing = true;\n    this.interaction.disconnect();\n    this.position.unobserve();\n    if (restore === 'input') this.inputEl?.focus();\n    if (restore === 'button') void this.clockButton?.setFocus();\n    const duration = resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort2,\n      TOKEN_DEFAULTS.animationDurationShort3\n    );\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.closeTimer = setTimeout(() => this.finishClose(), duration);\n  }\n\n  private finishClose() {\n    const popup = this.el.querySelector<HTMLElement>('.input-time-popup');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.closeTimer = null;\n  }\n\n  private togglePicker = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.readOnly) return;\n    if (this.open) this.closePicker('button');\n    else this.openPicker();\n  };\n\n  private handleInput = (event: Event) => {\n    if (this.pickerInactive) return;\n    this.draftText = (event.target as HTMLInputElement).value;\n    const parsed = this.parseDraft(this.draftText);\n    if (parsed === null) return;\n    this.commitIso(parsed);\n  };\n\n  private handleFocus = () => {\n    this.draftText = this.displayValue || this.value;\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n    if (this.pickerInactive) {\n      this.draftText = this.displayValue;\n      return;\n    }\n    const parsed = this.parseDraft(this.draftText);\n    if (parsed === null) {\n      this.draftText = this.displayValue;\n      return;\n    }\n    this.commitIso(parsed);\n  };\n\n  private handleTimeChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    if (this.pickerInactive) return;\n    const parsed = this.parseDraft(event.detail);\n    if (parsed === null) return;\n    this.commitIso(parsed);\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.formInactive;\n    const pickerInactive = this.pickerInactive;\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 textClass = `ds-text--${textVariant.replace('text-', '')}`;\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n    const popupStyle = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: 'var(--dimension-z-index-floating)',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    return (\n      <Host\n        class={{\n          'input-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.isInvalid ? '' : 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          ref={element => {\n            this.controlEl = element;\n          }}\n          class={{\n            'input-control': true,\n            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': this.hasInteractionFill,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          <input\n            ref={element => {\n              this.inputEl = element;\n            }}\n            type=\"text\"\n            id={inputId}\n            value={this.focused ? this.draftText : this.displayValue}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete=\"off\"\n            spellcheck={false}\n            class={{\n              'native-input': true,\n              'native-input--align-start': true,\n              'ds-control-label-box': true,\n              [textClass]: true,\n              'ds-text--regular': true,\n            }}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.isInvalid ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <ds-button-unfilled\n            ref={element => {\n              this.clockButton = element as HTMLDsButtonUnfilledElement | undefined;\n            }}\n            class=\"input-control__datetime-action\"\n            variant=\"icon\"\n            size={this.size}\n            icon=\"Clock\"\n            hasBorder={false}\n            isInset\n            isInactive={pickerInactive}\n            ariaLabel=\"Choose time\"\n            haspopup=\"dialog\"\n            expanded={this.open}\n            surfaceOpen={this.open || this.closing}\n            controls={this.open ? this.popupId : undefined}\n            onDsClick={this.togglePicker}\n          />\n        </div>\n        {this.shouldRender ? (\n          <div\n            id={this.popupId}\n            popover=\"manual\"\n            class={{\n              'input-time-popup': true,\n              'ds-choice-popup': true,\n              'ds-choice-popup--closing': this.closing,\n              'ds-chrome-column': true,\n              'ds-chrome-space--sm': true,\n            }}\n            style={popupStyle}\n            role=\"dialog\"\n            aria-label=\"Choose time\"\n          >\n            <ds-time-picker\n              hourFormat={this.hourFormat}\n              value={this.value}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              isInactive={pickerInactive}\n              autoFocus\n              onDsChange={this.handleTimeChange}\n            />\n          </div>\n        ) : null}\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"
     }
   ]