@cruglobal/cornerstone-components 0.1.0 → 0.1.1

package/dist/unbundled/chunks/chunk.3TDBUBJM.js

@@ -1,1481 +0,0 @@
-/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  buildTimeSegmentLayout,
-  dayPeriodFromKey,
-  formatDayPeriod,
-  formatTimeSegmentText,
-  isTimeEmpty,
-  resolveHour12,
-  timeSegmentRules,
-  timeSegmentsToWire,
-  wireToTimeSegments,
-  withSecondsForStep
-} from "./chunk.MD7QGXV6.js";
-import {
-  time_input_styles_default
-} from "./chunk.3CUSENSO.js";
-import {
-  CsShowEvent
-} from "./chunk.BNGGMXK5.js";
-import {
-  CsHideEvent
-} from "./chunk.5MGJKMWB.js";
-import {
-  CsAfterHideEvent
-} from "./chunk.A2JHAWF4.js";
-import {
-  CsAfterShowEvent
-} from "./chunk.KCSF6NHY.js";
-import {
-  CsClearEvent
-} from "./chunk.HKGYFZKM.js";
-import {
-  isTopDismissible,
-  registerDismissible,
-  unregisterDismissible
-} from "./chunk.ITDZMCUA.js";
-import {
-  RequiredValidator
-} from "./chunk.LJBXODA4.js";
-import {
-  form_control_styles_default
-} from "./chunk.Y7YQ7MTR.js";
-import {
-  HasSlotController
-} from "./chunk.3XMRDGUU.js";
-import {
-  MirrorValidator
-} from "./chunk.MDV4MWU5.js";
-import {
-  CornerstoneFormAssociatedElement
-} from "./chunk.G5KWAXZV.js";
-import {
-  size_styles_default
-} from "./chunk.4BSDHHLS.js";
-import {
-  waitForEvent
-} from "./chunk.QSXSR2S5.js";
-import {
-  animateWithClass
-} from "./chunk.IQJMSIWD.js";
-import {
-  watch
-} from "./chunk.3QOMHIHS.js";
-import {
-  customElement
-} from "./chunk.MHH4NIPT.js";
-import {
-  LocalizeController
-} from "./chunk.QGC4W2JQ.js";
-import {
-  __decorateClass
-} from "./chunk.M2YES2WV.js";
-
-// src/components/time-input/time-input.ts
-import { html, nothing } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
-// src/internal/segmented-field/segmented-field-controller.ts
-var DEFAULT_SEPARATORS = ["/", ".", "-", ":", ",", " "];
-var SegmentedFieldController = class {
-  constructor(host, config) {
-    /** Per-segment digit buffers keyed by `${group}:${field}`. */
-    this.buffers = /* @__PURE__ */ new Map();
-    /** Which segment currently owns the roving tabindex / was most recently focused. */
-    this.active = null;
-    //
-    // Internal handlers
-    //
-    this.handleFocus = (event) => {
-      const el = event.currentTarget;
-      const group = el.dataset.group;
-      const field = el.dataset.segment;
-      this.active = { group, field };
-      for (const segment of this.segmentElements()) {
-        segment.tabIndex = segment === el ? 0 : -1;
-      }
-    };
-    this.handleBlur = (event) => {
-      const el = event.currentTarget;
-      const group = el.dataset.group;
-      const field = el.dataset.segment;
-      if (this.getBuffer(group, field)) {
-        this.flushBuffer(group, field);
-      }
-    };
-    this.handleKeyDown = (event) => {
-      const el = event.currentTarget ?? event.composedPath().find((t) => {
-        return t instanceof HTMLElement && t.dataset.group && t.dataset.segment;
-      }) ?? null;
-      if (!el) {
-        return;
-      }
-      const group = el.dataset.group;
-      const field = el.dataset.segment;
-      if (!group || !field) {
-        return;
-      }
-      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-        event.preventDefault();
-        if (this.isReadonlyOrDisabled()) {
-          return;
-        }
-        if (this.getBuffer(group, field)) {
-          this.flushBuffer(group, field);
-        }
-        const delta = event.key === "ArrowUp" ? 1 : -1;
-        const result = this.config.rules.step(group, field, delta);
-        if (result) {
-          this.config.onCommit?.(group, field, result.value);
-        }
-        return;
-      }
-      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-        event.preventDefault();
-        if (this.getBuffer(group, field)) {
-          this.flushBuffer(group, field);
-        }
-        const visualLeft = event.key === "ArrowLeft";
-        const logicalPrev = this.config.isRtl() ? !visualLeft : visualLeft;
-        this.moveFocus(el, logicalPrev ? -1 : 1);
-        return;
-      }
-      if (event.key === "Home") {
-        event.preventDefault();
-        this.segmentElements()[0]?.focus({ preventScroll: true });
-        return;
-      }
-      if (event.key === "End") {
-        event.preventDefault();
-        const segments = this.segmentElements();
-        segments[segments.length - 1]?.focus({ preventScroll: true });
-        return;
-      }
-      if (event.key === "Tab") {
-        if (this.getBuffer(group, field)) {
-          this.flushBuffer(group, field);
-        }
-        return;
-      }
-      if (event.key === "Backspace" || event.key === "Delete") {
-        event.preventDefault();
-        if (this.isReadonlyOrDisabled()) {
-          return;
-        }
-        const buffer = this.getBuffer(group, field);
-        if (buffer) {
-          this.setBuffer(group, field, "");
-          this.config.onCommit?.(group, field, null);
-        } else {
-          const hadValue = this.config.rules.clear(group, field);
-          if (hadValue) {
-            this.config.onCommit?.(group, field, null);
-          } else if (event.key === "Backspace") {
-            this.moveFocus(el, -1);
-          }
-        }
-        return;
-      }
-      if (/^[0-9]$/.test(event.key)) {
-        event.preventDefault();
-        if (this.isReadonlyOrDisabled()) {
-          return;
-        }
-        const buffer = this.getBuffer(group, field);
-        const result = this.config.rules.typeDigit(group, field, buffer, event.key);
-        this.setBuffer(group, field, result.buffer);
-        this.config.onCommit?.(group, field, result.value);
-        if (result.advance) {
-          this.moveFocus(el, 1);
-        }
-        return;
-      }
-      const seps = this.config.separatorKeys ?? DEFAULT_SEPARATORS;
-      if (seps.includes(event.key)) {
-        event.preventDefault();
-        if (this.getBuffer(group, field)) {
-          this.flushBuffer(group, field);
-        }
-        this.moveFocus(el, 1);
-        return;
-      }
-    };
-    this.host = host;
-    this.config = config;
-    host.addController(this);
-  }
-  //
-  // ReactiveController lifecycle
-  //
-  hostConnected() {
-  }
-  hostDisconnected() {
-    this.buffers.clear();
-    this.active = null;
-  }
-  //
-  // Public API
-  //
-  /** Get the buffer for a segment. Empty string when nothing is pending. */
-  getBuffer(group, field) {
-    return this.buffers.get(this.key(group, field)) ?? "";
-  }
-  /** Replace the buffer for a segment. Pass `''` to clear. */
-  setBuffer(group, field, buffer) {
-    const k = this.key(group, field);
-    if (buffer) {
-      this.buffers.set(k, buffer);
-    } else {
-      this.buffers.delete(k);
-    }
-  }
-  /** Drop every pending buffer. Used by the host when the canonical value is replaced wholesale. */
-  clearBuffers() {
-    this.buffers.clear();
-  }
-  /** The active segment, or `null` if focus has never landed on one. */
-  getActiveSegment() {
-    return this.active;
-  }
-  /** Sets the active segment (does not move DOM focus). Used by hosts that programmatically restore focus. */
-  setActiveSegment(group, field) {
-    this.active = { group, field };
-  }
-  /** All segment elements in the host's shadow root, in DOM (logical) order. */
-  segmentElements() {
-    const root = this.host.shadowRoot;
-    if (!root) {
-      return [];
-    }
-    return Array.from(root.querySelectorAll("[data-segment][data-group]"));
-  }
-  /** The segment element for a given (group, field), or `null` if not in the DOM. */
-  segmentElementFor(group, field) {
-    const root = this.host.shadowRoot;
-    if (!root) {
-      return null;
-    }
-    return root.querySelector(`[data-group="${group}"][data-segment="${field}"]`);
-  }
-  /**
-   * Returns the segment that should receive initial focus: the first empty segment (no value AND no buffer) per
-   * `isEmpty`, otherwise the first segment in the layout. The host supplies the emptiness predicate since the
-   * controller doesn't know the field's stored value.
-   */
-  findFocusableSegment(isEmpty) {
-    const segments = this.segmentElements();
-    if (segments.length === 0) {
-      return null;
-    }
-    const firstEmpty = segments.find((el) => {
-      const group = el.dataset.group;
-      const field = el.dataset.segment;
-      return isEmpty(group, field) && !this.getBuffer(group, field);
-    });
-    return firstEmpty ?? segments[0];
-  }
-  /** Restore focus to the most recently active segment (or the first segment if none has been active). */
-  focusActiveSegment(options) {
-    if (this.active) {
-      const el = this.segmentElementFor(this.active.group, this.active.field);
-      if (el) {
-        el.focus({ preventScroll: true, ...options });
-        return;
-      }
-    }
-    this.segmentElements()[0]?.focus({ preventScroll: true, ...options });
-  }
-  /** Move focus to the neighbor segment in logical (DOM) order. */
-  moveFocus(from, direction, options) {
-    const segments = this.segmentElements();
-    const idx = segments.indexOf(from);
-    if (idx < 0) {
-      return;
-    }
-    const next = segments[idx + direction];
-    if (next) {
-      next.focus({ preventScroll: true, ...options });
-    }
-  }
-  /**
-   * Commit a pending buffer to its committed value via `rules.commitBuffer`. Notifies the host via `onCommit`. Does
-   * nothing if no buffer is pending.
-   */
-  flushBuffer(group, field) {
-    const buffer = this.getBuffer(group, field);
-    if (!buffer) {
-      return false;
-    }
-    const value = this.config.rules.commitBuffer(group, field, buffer);
-    this.setBuffer(group, field, "");
-    this.config.onCommit?.(group, field, value);
-    return true;
-  }
-  /**
-   * Flush every pending buffer across all groups. Used when the host needs to read a final value (e.g., on form
-   * submission outside of a focus change).
-   */
-  flushAllBuffers() {
-    for (const [k, buffer] of this.buffers) {
-      if (!buffer) {
-        continue;
-      }
-      const [group, field] = k.split(":");
-      const value = this.config.rules.commitBuffer(group, field, buffer);
-      this.config.onCommit?.(group, field, value);
-    }
-    this.buffers.clear();
-  }
-  /**
-   * Returns the event handlers a segment element should bind. Hosts wire these via `@keydown=${handlers.keydown}` etc.
-   * The returned functions are stable references safe to pass to Lit's directive cache.
-   *
-   * Hosts that need host-level shortcuts (e.g. `Alt+ArrowDown` to open a popup) should call `handleKeyDown` themselves
-   * after handling their own keys. The controller's `keydown` handler is safe to invoke when the host has not consumed
-   * the event — it ignores keys it doesn't recognize.
-   */
-  eventHandlers() {
-    return {
-      keydown: this.handleKeyDown,
-      focus: this.handleFocus,
-      blur: this.handleBlur
-    };
-  }
-  /**
-   * Direct entry point for hosts that wrap the controller's keydown with their own pre-handler (e.g. for popup
-   * shortcuts). Returns `true` if the controller consumed the event (called `preventDefault`), `false` otherwise.
-   */
-  handleKeyDownEvent(event) {
-    const defaultPreventedBefore = event.defaultPrevented;
-    this.handleKeyDown(event);
-    return event.defaultPrevented && !defaultPreventedBefore;
-  }
-  //
-  // Helpers
-  //
-  key(group, field) {
-    return `${group}:${field}`;
-  }
-  isReadonlyOrDisabled() {
-    return !!(this.config.isReadonly?.() || this.config.isDisabled?.());
-  }
-};
-
-// src/styles/component/segmented-field.styles.ts
-import { css } from "lit";
-var segmented_field_styles_default = css`
-  /* font: inherit lifts the UA default button font-size so children that size with em
-     (e.g. the expand icon) resolve against the host size-driven font-size instead of ~13px. */
-  [part~='clear-button'],
-  [part~='expand-button'] {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: var(--cs-color-text-quiet);
-    font: inherit;
-    padding: 0.25em;
-    /* Trailing padding overhangs the content edge rather than displacing the glyph. */
-    margin-inline-end: -0.25em;
-    border-radius: var(--cs-border-radius-s);
-    transition: color var(--cs-transition-fast);
-  }
-
-  /* Fixed widths (= glyph + 2×0.25em padding) keep each glyph centered on the trailing axis
-     regardless of the slotted icon's intrinsic width. */
-  [part~='expand-button'] {
-    inline-size: 1.75em;
-    /* Leading gap that lands the clear button on <cs-select>'s clear axis. Scales with the
-       form-control padding token (like select's own spacing) so it holds across themes; the
-       0.125em offset accounts for the fixed button widths. */
-    margin-inline-start: calc(var(--cs-form-control-padding-inline) - 0.125em);
-  }
-
-  [part~='clear-button'] {
-    inline-size: 1.5em;
-    margin-inline-start: var(--cs-form-control-padding-inline);
-  }
-
-  [part~='clear-button']:hover,
-  [part~='expand-button']:hover {
-    color: var(--cs-color-text-normal);
-  }
-
-  [part~='expand-button']:focus-visible {
-    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) var(--cs-color-focus);
-    outline-offset: 2px;
-  }
-
-  /* font-size scales the glyph with the host size attribute; the button width handles centering. */
-  [part~='expand-icon'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--cs-color-text-quiet);
-    font-size: 1.25em;
-  }
-
-  /* Start / end decoration slots. Spaced with the same --cs-form-control-padding-inline gap as
-     <cs-input>/<cs-select> so slotted icons line up with the rest of the form controls, rather
-     than the tighter 0.25em the pickers used before. */
-  [part~='start'],
-  [part~='end'] {
-    display: inline-flex;
-    align-items: center;
-    color: var(--cs-color-text-quiet);
-  }
-
-  [part~='start']::slotted(*) {
-    margin-inline-end: var(--cs-form-control-padding-inline);
-  }
-
-  [part~='end']::slotted(*) {
-    margin-inline-start: var(--cs-form-control-padding-inline);
-  }
-`;
-
-// src/components/time-input/time-input.ts
-var COLUMN_PARTS = {
-  hour: "column-hour",
-  minute: "column-minute",
-  second: "column-second",
-  dayPeriod: "column-day-period"
-};
-var uniqueId = 0;
-var generateId = () => `cs-time-input-${++uniqueId}`;
-var SINGLE_GROUP = "single";
-var CsTimeInput = class extends CornerstoneFormAssociatedElement {
-  constructor() {
-    super(...arguments);
-    /** Every segment edit dispatches `input`, so a single observed `input` event marks the field as interacted with. */
-    this.assumeInteractionOn = ["input"];
-    this.hasSlotController = new HasSlotController(this, "hint", "label", "footer");
-    this.localize = new LocalizeController(this);
-    this.popupId = generateId();
-    this.keyboardHelpId = `${this.popupId}-help`;
-    this.pendingValue = null;
-    /** When true, the next `show()` will move focus into the first popup column (set by Alt+ArrowDown). */
-    this.moveFocusToColumnOnShow = false;
-    /** Debounces duplicate `change` events when the value hasn't transitioned. */
-    this.lastEmittedValue = "";
-    this.segments = { hour: null, minute: null, second: null, dayPeriod: null };
-    /**
-     * Generic segmented-input plumbing. Owns per-segment digit buffers, roving tabindex, navigation keys
-     * (arrows / Home / End / Tab flush / Backspace / Delete), and separator advance. Time-specific rules
-     * (per-field digit semantics, wraparound stepping, layout derivation) are plugged in below.
-     */
-    this.segmentsController = new SegmentedFieldController(this, {
-      getLayout: () => this.getLayout(),
-      isRtl: () => this.isRtl,
-      isReadonly: () => this.readonly,
-      isDisabled: () => this.disabled,
-      rules: timeSegmentRules({
-        getSegments: () => this.segments,
-        setSegments: (_group, next) => {
-          this.segments = next;
-        },
-        hour12: () => this.resolvedHour12
-      }),
-      onCommit: () => {
-        this.recomputeValue();
-        this.requestUpdate();
-      }
-    });
-    this.name = "";
-    this._value = "";
-    this.defaultValue = this.getAttribute("value") ?? "";
-    this.disabled = false;
-    this.required = false;
-    this.readonly = false;
-    this.size = "m";
-    this.appearance = "outlined";
-    this.pill = false;
-    this.label = "";
-    this.hint = "";
-    this.autocomplete = "";
-    this.withClear = false;
-    this.withNow = false;
-    this.ssrLabel = false;
-    this.ssrHint = false;
-    this.ssrFooter = false;
-    this.min = "";
-    this.max = "";
-    this.step = 60;
-    this.hourFormat = "auto";
-    this.open = false;
-    this.placement = "bottom-start";
-    this.distance = 0;
-    this.handleDocumentFocusIn = (event) => {
-      const path = event.composedPath();
-      if (!path.includes(this)) {
-        this.hide();
-      }
-    };
-    this.handleDocumentKeyDown = (event) => {
-      if (event.key === "Escape" && this.open && isTopDismissible(this)) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.hide();
-      }
-    };
-    this.handleDocumentMouseDown = (event) => {
-      const path = event.composedPath();
-      if (!path.includes(this)) {
-        this.hide();
-      }
-    };
-    //
-    // Segment input handlers
-    //
-    // The popup opens on a pointer click into the field but NOT when focus arrives via Tab, since that would
-    // interfere with tab order. Opening is also explicit via the toggle button or Alt+ArrowDown.
-    this.handleSegmentFocus = (event) => {
-      this.segmentsController.eventHandlers().focus(event);
-    };
-    this.handleSegmentBlur = (event) => {
-      this.segmentsController.eventHandlers().blur(event);
-    };
-    this.handleInputWrapperPointerDown = (event) => {
-      if (this.disabled || this.readonly || this.open) {
-        return;
-      }
-      for (const node of event.composedPath()) {
-        if (node === this) {
-          break;
-        }
-        if (!(node instanceof Element)) {
-          continue;
-        }
-        const tag = node.tagName;
-        if (tag === "BUTTON" || tag === "A" || node.getAttribute("role") === "button") {
-          return;
-        }
-      }
-      this.show();
-    };
-    this.handleSegmentKeyDown = (event) => {
-      const el = event.currentTarget;
-      const field = el.dataset.segment;
-      if (event.altKey && event.key === "ArrowDown") {
-        event.preventDefault();
-        this.moveFocusToColumnOnShow = true;
-        if (this.open) {
-          this.focusFirstColumn();
-        } else {
-          this.show();
-        }
-        return;
-      }
-      if (event.altKey && event.key === "ArrowUp") {
-        event.preventDefault();
-        this.hide();
-        return;
-      }
-      if (event.key === "Enter") {
-        event.preventDefault();
-        if (this.segmentsController.getBuffer(SINGLE_GROUP, field)) {
-          this.segmentsController.flushBuffer(SINGLE_GROUP, field);
-          this.recomputeValue();
-        }
-        if (this.open) {
-          this.hide();
-        }
-        return;
-      }
-      if (field === "dayPeriod") {
-        const period = dayPeriodFromKey(event.key);
-        if (period != null) {
-          event.preventDefault();
-          if (this.readonly) {
-            return;
-          }
-          this.segments = { ...this.segments, dayPeriod: period };
-          this.recomputeValue();
-          this.requestUpdate();
-          this.segmentsController.moveFocus(el, 1);
-          return;
-        }
-      }
-      this.segmentsController.eventHandlers().keydown(event);
-    };
-    //
-    // Other handlers
-    //
-    this.handleExpandButtonClick = () => {
-      if (this.open) {
-        this.hide();
-      } else {
-        this.moveFocusToColumnOnShow = true;
-        this.show();
-      }
-    };
-    this.handleClearClick = (event) => {
-      event.stopPropagation();
-      if (!this._value && isTimeEmpty(this.segments)) {
-        return;
-      }
-      this._value = "";
-      this.valueHasChanged = true;
-      this.segmentsController.clearBuffers();
-      this.syncSegmentsFromCanonical();
-      this.updateValidity();
-      this.dispatchEvent(new CsClearEvent());
-      this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-      this.lastEmittedValue = "";
-      this.focus();
-    };
-    this.handleClearMouseDown = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.handleNowClick = () => {
-      const now = /* @__PURE__ */ new Date();
-      this.value = now;
-      this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-      this.lastEmittedValue = this._value;
-      this.hide();
-    };
-    this.handleColumnItemClick = (event) => {
-      const target = event.target.closest(".column-item");
-      if (!target || target.getAttribute("aria-disabled") === "true") {
-        return;
-      }
-      const field = target.dataset.field;
-      const value = Number(target.dataset.value);
-      if (Number.isNaN(value)) {
-        return;
-      }
-      this.segments = { ...this.segments, [field]: value };
-      this.recomputeValue();
-      this.requestUpdate();
-    };
-    this.handleColumnKeyDown = (event) => {
-      const column = event.currentTarget;
-      const field = column.dataset.field;
-      if (event.key === "Escape") {
-        event.preventDefault();
-        this.hide();
-        return;
-      }
-      if (event.key === "Enter") {
-        event.preventDefault();
-        this.hide();
-        return;
-      }
-      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-        event.preventDefault();
-        const fields = this.columnFields;
-        if (fields.length < 2) {
-          return;
-        }
-        const delta = event.key === "ArrowLeft" ? -1 : 1;
-        const currentIdx = fields.indexOf(field);
-        const nextIdx = ((currentIdx + delta) % fields.length + fields.length) % fields.length;
-        const nextField = fields[nextIdx];
-        const nextColumn = this.shadowRoot?.querySelector(`.column[data-field="${nextField}"]`);
-        nextColumn?.focus({ preventScroll: true });
-        return;
-      }
-      if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "PageUp" || event.key === "PageDown") {
-        event.preventDefault();
-        const delta = event.key === "ArrowUp" || event.key === "PageUp" ? -1 : 1;
-        const jump = event.key === "PageUp" || event.key === "PageDown" ? 5 : 1;
-        const items = this.columnItemsFor(field);
-        if (items.length === 0) {
-          return;
-        }
-        const currentValue = this.segments[field];
-        const idx = currentValue == null ? 0 : Math.max(
-          0,
-          items.findIndex((it) => it.value === currentValue)
-        );
-        const nextIdx = ((idx + delta * jump) % items.length + items.length) % items.length;
-        const nextItem = items[nextIdx];
-        this.segments = { ...this.segments, [field]: nextItem.value };
-        this.recomputeValue();
-        this.requestUpdate();
-        requestAnimationFrame(() => {
-          const itemEl = column.querySelector(`[data-value="${nextItem.value}"]`);
-          if (itemEl) {
-            this.keepItemInView(column, itemEl);
-          }
-        });
-        return;
-      }
-      if (event.key === "Home") {
-        event.preventDefault();
-        const items = this.columnItemsFor(field);
-        if (items.length === 0) {
-          return;
-        }
-        this.segments = { ...this.segments, [field]: items[0].value };
-        this.recomputeValue();
-        this.requestUpdate();
-        return;
-      }
-      if (event.key === "End") {
-        event.preventDefault();
-        const items = this.columnItemsFor(field);
-        if (items.length === 0) {
-          return;
-        }
-        const lastItem = items[items.length - 1];
-        this.segments = { ...this.segments, [field]: lastItem.value };
-        this.recomputeValue();
-        this.requestUpdate();
-        return;
-      }
-    };
-  }
-  static get validators() {
-    return [
-      ...super.validators,
-      RequiredValidator({
-        validationElement: () => Object.assign(document.createElement("input"), { required: true })
-      }),
-      // Mirrors the hidden native `<input type="time">` so its min/max/step constraints (including
-      // reversed/overnight ranges) surface as rangeUnderflow/rangeOverflow/stepMismatch validity.
-      MirrorValidator()
-    ];
-  }
-  /** Localized term lookup. Falls back to the English string if a locale hasn't translated the key yet. */
-  term(key, fallback) {
-    return this.localize.term(key) || fallback;
-  }
-  get validationTarget() {
-    return this.valueInput;
-  }
-  /**
-   * The time picker's value as a wire-format string matching HTML `<input type="time">`: `HH:mm`, `HH:mm:ss`, or
-   * `HH:mm:ss.sss` (always 24-hour). The setter also accepts a `Date` (extracts local h/m/s) or `null`.
-   */
-  get value() {
-    if (this.valueHasChanged) {
-      return this._value;
-    }
-    return this._value || this.defaultValue || "";
-  }
-  set value(val) {
-    const normalized = this.normalizeIncomingValue(val);
-    if (normalized === this._value) {
-      return;
-    }
-    const oldValue = this._value;
-    this._value = normalized;
-    this.valueHasChanged = true;
-    if (this.hasUpdated) {
-      this.syncSegmentsFromCanonical();
-    } else {
-      this.pendingValue = this._value;
-    }
-    this.requestUpdate("value", oldValue);
-  }
-  //
-  // Lifecycle
-  //
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeOpenListeners();
-  }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    if (this.pendingValue != null) {
-      this._value = this.pendingValue;
-      this.pendingValue = null;
-    } else if (!this._value && this.defaultValue) {
-      this._value = this.defaultValue;
-    }
-    this.syncSegmentsFromCanonical();
-    this.input = this.valueInput;
-    this.updateValidity();
-    this.lastEmittedValue = this._value;
-  }
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("value")) {
-      this.customStates.set("blank", !this.value);
-    }
-    if (changed.has("disabled")) {
-      this.customStates.set("disabled", this.disabled);
-    }
-    if (changed.has("open")) {
-      this.customStates.set("open", this.open);
-    }
-    if (changed.has("step") || changed.has("hourFormat")) {
-      this.syncSegmentsFromCanonical();
-    }
-    if (changed.has("min") || changed.has("max") || changed.has("step")) {
-      this.updateValidity();
-    }
-  }
-  handleDisabledChange() {
-    if (this.disabled && this.open) {
-      this.open = false;
-    }
-  }
-  async handleOpenChange() {
-    if (this.open && !this.disabled) {
-      const showEvent = new CsShowEvent();
-      this.dispatchEvent(showEvent);
-      if (showEvent.defaultPrevented) {
-        this.open = false;
-        return;
-      }
-      this.addOpenListeners();
-      this.popup.active = true;
-      await this.updateComplete;
-      await animateWithClass(this.popup.popup, "show");
-      this.scrollColumnsToCurrent();
-      if (this.moveFocusToColumnOnShow) {
-        this.moveFocusToColumnOnShow = false;
-        this.focusFirstColumn();
-      }
-      this.dispatchEvent(new CsAfterShowEvent());
-    } else {
-      const hideEvent = new CsHideEvent();
-      this.dispatchEvent(hideEvent);
-      if (hideEvent.defaultPrevented) {
-        this.open = true;
-        return;
-      }
-      this.removeOpenListeners();
-      await animateWithClass(this.popup.popup, "hide");
-      this.popup.active = false;
-      this.dispatchEvent(new CsAfterHideEvent());
-      const active = this.shadowRoot?.activeElement;
-      if (active && this.popup?.contains(active)) {
-        this.focusActiveSegment();
-      }
-    }
-  }
-  //
-  // Public API
-  //
-  /** Sets focus on the first empty (else first) segment. */
-  focus(options) {
-    const target = this.segmentsController.findFocusableSegment((_g, f) => this.segments[f] == null);
-    target?.focus(options);
-  }
-  /** Removes focus from the time picker. */
-  blur() {
-    const active = this.shadowRoot?.activeElement;
-    active?.blur();
-  }
-  /** Opens the popup. */
-  async show() {
-    if (this.open || this.disabled) {
-      return;
-    }
-    this.open = true;
-    await waitForEvent(this, "cs-after-show");
-  }
-  /** Closes the popup. */
-  async hide() {
-    if (!this.open || this.disabled) {
-      return;
-    }
-    this.open = false;
-    await waitForEvent(this, "cs-after-hide");
-  }
-  /** The time as a `Date` (today + wire value), or `null` when empty. */
-  get valueAsDate() {
-    const value = this.value;
-    if (!value) {
-      return null;
-    }
-    const segments = wireToTimeSegments(value, { hour12: false, withSeconds: this.resolvedWithSeconds });
-    if (segments.hour == null || segments.minute == null) {
-      return null;
-    }
-    const d = /* @__PURE__ */ new Date();
-    d.setHours(segments.hour, segments.minute, segments.second ?? 0, 0);
-    return d;
-  }
-  /** Milliseconds since midnight, or `NaN` when empty. */
-  get valueAsNumber() {
-    const d = this.valueAsDate;
-    if (!d) {
-      return Number.NaN;
-    }
-    return d.getHours() * 36e5 + d.getMinutes() * 6e4 + d.getSeconds() * 1e3;
-  }
-  //
-  // Form association
-  //
-  formResetCallback() {
-    this._value = this.defaultValue;
-    this.valueHasChanged = false;
-    this.segmentsController.clearBuffers();
-    this.syncSegmentsFromCanonical();
-    super.formResetCallback();
-    this.lastEmittedValue = this._value;
-    this.requestUpdate();
-  }
-  formStateRestoreCallback(state2) {
-    if (typeof state2 === "string") {
-      this._value = state2;
-      if (this.hasUpdated) {
-        this.syncSegmentsFromCanonical();
-      } else {
-        this.pendingValue = state2;
-      }
-      this.requestUpdate();
-    }
-    this.updateValidity();
-  }
-  //
-  // Internal helpers
-  //
-  get resolvedLocale() {
-    return this.localize.lang() || "en";
-  }
-  get isRtl() {
-    return this.localize.dir() === "rtl";
-  }
-  /** Final hour12 decision: `auto` defers to the locale; explicit `'12'` / `'24'` overrides. */
-  get resolvedHour12() {
-    if (this.hourFormat === "12") {
-      return true;
-    }
-    if (this.hourFormat === "24") {
-      return false;
-    }
-    return resolveHour12(this.resolvedLocale);
-  }
-  /** Whether the seconds segment is shown given the current `step` value. */
-  get resolvedWithSeconds() {
-    return withSecondsForStep(this.step);
-  }
-  getLayout() {
-    return buildTimeSegmentLayout(this.resolvedLocale, {
-      hour12: this.resolvedHour12,
-      withSeconds: this.resolvedWithSeconds
-    });
-  }
-  normalizeIncomingValue(val) {
-    if (val == null) {
-      return "";
-    }
-    if (typeof val === "string") {
-      return val;
-    }
-    if (val instanceof Date) {
-      const hh = String(val.getHours()).padStart(2, "0");
-      const mm = String(val.getMinutes()).padStart(2, "0");
-      const ss = String(val.getSeconds()).padStart(2, "0");
-      return this.resolvedWithSeconds ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;
-    }
-    return "";
-  }
-  /** Recompute the segment state from the canonical `_value`. Discards any in-progress digit buffers. */
-  syncSegmentsFromCanonical() {
-    this.segmentsController.clearBuffers();
-    this.segments = wireToTimeSegments(this._value, {
-      hour12: this.resolvedHour12,
-      withSeconds: this.resolvedWithSeconds
-    });
-    this.updateHiddenInput();
-  }
-  updateHiddenInput() {
-    if (this.valueInput) {
-      this.valueInput.value = this._value;
-    }
-    this.setValue(this._value || null);
-  }
-  /**
-   * Recompute the canonical value from the current segments. Fires `input` always, and `change` when the value
-   * transitions, matching `<input type="time">` semantics.
-   */
-  recomputeValue() {
-    const oldValue = this._value;
-    const newValue = timeSegmentsToWire(this.segments, {
-      hour12: this.resolvedHour12,
-      withSeconds: this.resolvedWithSeconds
-    });
-    if (newValue !== oldValue) {
-      this._value = newValue;
-      this.valueHasChanged = true;
-      this.updateHiddenInput();
-      this.updateValidity();
-    }
-    this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-    if (newValue !== this.lastEmittedValue) {
-      this.lastEmittedValue = newValue;
-      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-    }
-  }
-  //
-  // Popup listeners
-  //
-  addOpenListeners() {
-    document.addEventListener("focusin", this.handleDocumentFocusIn);
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-    registerDismissible(this);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("focusin", this.handleDocumentFocusIn);
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-    unregisterDismissible(this);
-  }
-  //
-  // Segment focus restore
-  //
-  focusActiveSegment() {
-    const active = this.segmentsController.getActiveSegment();
-    if (active) {
-      const el = this.segmentsController.segmentElementFor(active.group, active.field);
-      if (el) {
-        el.focus({ preventScroll: true });
-        return;
-      }
-    }
-    this.segmentsController.findFocusableSegment((_g, f) => this.segments[f] == null)?.focus({ preventScroll: true });
-  }
-  //
-  // Popup columns
-  //
-  /** Field list for the visible columns, based on the resolved layout. */
-  get columnFields() {
-    return this.getLayout().order.filter((f) => f !== void 0);
-  }
-  columnItemsFor(field) {
-    if (field === "dayPeriod") {
-      return [
-        { label: this.term("am", formatDayPeriod(this.resolvedLocale, 0)), value: 0, disabled: false },
-        { label: this.term("pm", formatDayPeriod(this.resolvedLocale, 1)), value: 1, disabled: false }
-      ];
-    }
-    if (field === "hour") {
-      const items2 = [];
-      if (this.resolvedHour12) {
-        for (let h = 1; h <= 12; h++) {
-          items2.push({ label: String(h).padStart(2, "0"), value: h, disabled: false });
-        }
-      } else {
-        for (let h = 0; h <= 23; h++) {
-          items2.push({ label: String(h).padStart(2, "0"), value: h, disabled: false });
-        }
-      }
-      return items2;
-    }
-    const stepSec = typeof this.step === "number" && Number.isFinite(this.step) && this.step > 0 ? this.step : 1;
-    const stride = field === "minute" ? stepSec < 60 ? 1 : Math.max(1, Math.floor(stepSec / 60)) : Math.max(1, Math.floor(stepSec));
-    const items = [];
-    for (let v = 0; v < 60; v += stride) {
-      items.push({ label: String(v).padStart(2, "0"), value: v, disabled: false });
-    }
-    return items;
-  }
-  focusFirstColumn() {
-    if (!this.shadowRoot) {
-      return;
-    }
-    const first = this.shadowRoot.querySelector(".column");
-    first?.focus({ preventScroll: true });
-  }
-  scrollColumnsToCurrent() {
-    if (!this.shadowRoot) {
-      return;
-    }
-    for (const column of this.shadowRoot.querySelectorAll(".column")) {
-      const field = column.dataset.field;
-      const value = this.segments[field];
-      if (value == null) {
-        continue;
-      }
-      const item = column.querySelector(`[data-value="${value}"]`);
-      if (item) {
-        this.keepItemInView(column, item);
-      }
-    }
-  }
-  /**
-   * Scroll `column` only as far as needed to keep `item` in view. Equivalent to `scrollIntoView({ block: 'nearest' })`
-   * but scoped to the column so it can't scroll ancestors (the page, popup, etc.). Measured with
-   * `getBoundingClientRect` because the items' `offsetParent` isn't the column.
-   */
-  keepItemInView(column, item) {
-    const columnRect = column.getBoundingClientRect();
-    const itemRect = item.getBoundingClientRect();
-    if (itemRect.top < columnRect.top) {
-      column.scrollTop += itemRect.top - columnRect.top;
-    } else if (itemRect.bottom > columnRect.bottom) {
-      column.scrollTop += itemRect.bottom - columnRect.bottom;
-    }
-  }
-  //
-  // Segment placeholders / a11y labels
-  //
-  /** Visual placeholder rendered in an empty segment. Matches the native `<input type="time">` UI. */
-  placeholderFor(_field) {
-    return "--";
-  }
-  /** Localized readable name of the field, used for the spinbutton's aria-label. */
-  fieldLabelFor(field) {
-    const fallback = field === "hour" ? "Hour" : field === "minute" ? "Minute" : field === "second" ? "Second" : "AM/PM";
-    return this.term(field, fallback);
-  }
-  segmentAriaValueText(field) {
-    const value = this.segments[field];
-    const buffer = this.segmentsController.getBuffer(SINGLE_GROUP, field);
-    if (buffer) {
-      return buffer;
-    }
-    if (value == null) {
-      return this.term("empty", "Empty");
-    }
-    if (field === "dayPeriod") {
-      return value === 0 ? this.term("am", "AM") : this.term("pm", "PM");
-    }
-    return String(value);
-  }
-  //
-  // Render
-  //
-  render() {
-    const hasLabelSlot = this.hasSlotController.test("label", "ssrLabel");
-    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
-    const hasFooterSlot = this.hasSlotController.test("footer", "ssrFooter");
-    const hasLabel = !!this.label || !!hasLabelSlot;
-    const hasHint = !!this.hint || !!hasHintSlot;
-    const hasValue = !!this._value;
-    const layout = this.getLayout();
-    const groupAriaLabel = this.label || this.term("time", "Time");
-    return html`
-      <div
-        part="form-control"
-        class=${classMap({
-      "form-control": true,
-      "form-control-has-label": hasLabel
-    })}
-      >
-        <label
-          id="label"
-          part="form-control-label"
-          class=${classMap({ label: true, "has-label": hasLabel })}
-          aria-hidden=${hasLabel ? "false" : "true"}
-          @click=${() => this.focus()}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <div part="form-control-input" class="form-control-input">
-          <cs-popup
-            class=${classMap({ "time-input-popup": true, open: this.open })}
-            placement=${this.placement}
-            distance=${this.distance}
-            ?active=${this.open}
-            flip
-            shift
-          >
-            <div
-              part="time-input input-wrapper"
-              class="input-wrapper"
-              slot="anchor"
-              @pointerdown=${this.handleInputWrapperPointerDown}
-            >
-              <slot name="start" part="start" class="start"></slot>
-
-              <div
-                part="input"
-                class="segments"
-                role="group"
-                aria-labelledby=${hasLabel ? "label" : nothing}
-                aria-label=${hasLabel ? nothing : groupAriaLabel}
-              >
-                ${this.renderSegmentGroup(layout)}
-              </div>
-
-              <span id=${this.keyboardHelpId} class="visually-hidden">
-                ${this.term(
-      "timeInputKeyboardHelp",
-      "Use arrow keys to change values; press Alt+Down Arrow to open the time picker."
-    )}
-              </span>
-
-              <input
-                class="value-input"
-                type="time"
-                tabindex="-1"
-                aria-hidden="true"
-                .value=${this._value}
-                min=${ifDefined(this.min || void 0)}
-                max=${ifDefined(this.max || void 0)}
-                step=${ifDefined(this.step === "any" ? "any" : String(this.step))}
-                ?disabled=${this.disabled}
-                ?required=${this.required}
-                autocomplete=${ifDefined(this.autocomplete || void 0)}
-              />
-
-              ${this.withClear && hasValue ? html`<button
-                      part="clear-button"
-                      type="button"
-                      class="clear-button"
-                      aria-label=${this.localize.term("clearEntry")}
-                      tabindex="-1"
-                      @mousedown=${this.handleClearMouseDown}
-                      @click=${this.handleClearClick}
-                    >
-                      <slot name="clear-icon">
-                        <cs-icon name="cancel" library="system"></cs-icon>
-                      </slot>
-                    </button>` : nothing}
-
-              <slot name="end" part="end" class="end"></slot>
-
-              <button
-                part="expand-button"
-                type="button"
-                class="expand-button"
-                aria-label=${this.open ? this.term("closeTimeInput", "Close time picker") : this.term("chooseTime", "Choose time")}
-                aria-haspopup="dialog"
-                aria-expanded=${this.open ? "true" : "false"}
-                aria-controls=${this.popupId}
-                ?disabled=${this.disabled}
-                @click=${this.handleExpandButtonClick}
-              >
-                <slot name="expand-icon" part="expand-icon" class="expand-icon">
-                  <cs-icon library="system" name="schedule"></cs-icon>
-                </slot>
-              </button>
-            </div>
-
-            <div
-              id=${this.popupId}
-              part="popup"
-              class="popup-body"
-              role="dialog"
-              aria-modal="true"
-              aria-label=${this.term("chooseTime", "Choose time")}
-            >
-              <div part="columns" class="columns">${this.columnFields.map((f) => this.renderColumn(f))}</div>
-              ${hasFooterSlot ? html`<div class="popup-footer"><slot name="footer"></slot></div>` : this.withNow ? html`<div class="popup-footer">
-                        <button part="now-button" type="button" class="now-button" @click=${this.handleNowClick}>
-                          ${this.term("now", "Now")}
-                        </button>
-                      </div>` : nothing}
-            </div>
-          </cs-popup>
-        </div>
-
-        <slot
-          id="hint"
-          name="hint"
-          part="hint"
-          class=${classMap({ "has-slotted": hasHint })}
-          aria-hidden=${hasHint ? "false" : "true"}
-        >
-          ${this.hint}
-        </slot>
-      </div>
-    `;
-  }
-  renderSegmentGroup(layout) {
-    const active = this.segmentsController.getActiveSegment();
-    let tabAssigned = false;
-    const nodes = [];
-    for (const token of layout.tokens) {
-      if (token.kind === "literal") {
-        nodes.push(html`<span part="segment-literal" class="segment-literal" aria-hidden="true">${token.text}</span>`);
-      } else {
-        const field = token.field;
-        const isFirstActive = !tabAssigned && (active == null || active.field === field);
-        if (isFirstActive) {
-          tabAssigned = true;
-        }
-        nodes.push(this.renderSegment(field, isFirstActive));
-      }
-    }
-    return nodes;
-  }
-  renderSegment(field, isTabStop) {
-    const value = this.segments[field];
-    const buffer = this.segmentsController.getBuffer(SINGLE_GROUP, field);
-    const placeholder = this.placeholderFor(field);
-    const display = formatTimeSegmentText(field, value, buffer, placeholder, this.resolvedLocale);
-    const isEmptySegment = value == null && !buffer;
-    const bounds = field === "hour" ? this.resolvedHour12 ? { min: 1, max: 12 } : { min: 0, max: 23 } : field === "minute" || field === "second" ? { min: 0, max: 59 } : { min: 0, max: 1 };
-    const ariaValueText = this.segmentAriaValueText(field);
-    return html`<span
-      part="segment"
-      class=${classMap({ segment: true, empty: isEmptySegment, [`segment-${field}`]: true })}
-      data-group=${SINGLE_GROUP}
-      data-segment=${field}
-      role="spinbutton"
-      tabindex=${this.disabled ? -1 : isTabStop ? 0 : -1}
-      aria-label=${this.fieldLabelFor(field)}
-      aria-valuemin=${bounds.min}
-      aria-valuemax=${bounds.max}
-      aria-valuenow=${ifDefined(value == null ? void 0 : value)}
-      aria-valuetext=${ariaValueText}
-      aria-readonly=${this.readonly ? "true" : "false"}
-      aria-disabled=${this.disabled ? "true" : "false"}
-      aria-describedby=${this.keyboardHelpId}
-      inputmode=${field === "dayPeriod" ? "text" : "numeric"}
-      @keydown=${this.handleSegmentKeyDown}
-      @focus=${this.handleSegmentFocus}
-      @blur=${this.handleSegmentBlur}
-      >${display}</span
-    >`;
-  }
-  renderColumn(field) {
-    const items = this.columnItemsFor(field);
-    const currentValue = this.segments[field];
-    const activedescendantId = currentValue != null ? `${this.popupId}-${field}-${currentValue}` : void 0;
-    return html`<div
-      part="column ${COLUMN_PARTS[field]}"
-      class=${classMap({ column: true, [`column-${field}`]: true })}
-      data-field=${field}
-      role="listbox"
-      tabindex="0"
-      aria-label=${this.fieldLabelFor(field)}
-      aria-orientation="vertical"
-      aria-activedescendant=${ifDefined(activedescendantId)}
-      @click=${this.handleColumnItemClick}
-      @keydown=${this.handleColumnKeyDown}
-    >
-      ${items.map((item) => {
-      const id = `${this.popupId}-${field}-${item.value}`;
-      const selected = item.value === currentValue;
-      return html`<button
-          id=${id}
-          part="column-item ${selected ? "column-item-selected" : ""}"
-          class="column-item"
-          data-field=${field}
-          data-value=${item.value}
-          type="button"
-          role="option"
-          aria-selected=${selected ? "true" : "false"}
-          aria-disabled=${item.disabled ? "true" : "false"}
-          tabindex="-1"
-        >
-          ${item.label}
-        </button>`;
-    })}
-    </div>`;
-  }
-};
-CsTimeInput.css = [size_styles_default, form_control_styles_default, segmented_field_styles_default, time_input_styles_default];
-CsTimeInput.shadowRootOptions = {
-  ...CornerstoneFormAssociatedElement.shadowRootOptions,
-  delegatesFocus: true
-};
-__decorateClass([
-  query(".time-input-popup")
-], CsTimeInput.prototype, "popup", 2);
-__decorateClass([
-  query(".value-input")
-], CsTimeInput.prototype, "valueInput", 2);
-__decorateClass([
-  state()
-], CsTimeInput.prototype, "segments", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsTimeInput.prototype, "name", 2);
-__decorateClass([
-  state()
-], CsTimeInput.prototype, "value", 1);
-__decorateClass([
-  property({ attribute: "value", reflect: true })
-], CsTimeInput.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ type: Boolean })
-], CsTimeInput.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsTimeInput.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsTimeInput.prototype, "readonly", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsTimeInput.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsTimeInput.prototype, "appearance", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsTimeInput.prototype, "pill", 2);
-__decorateClass([
-  property()
-], CsTimeInput.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "hint" })
-], CsTimeInput.prototype, "hint", 2);
-__decorateClass([
-  property()
-], CsTimeInput.prototype, "autocomplete", 2);
-__decorateClass([
-  property({ attribute: "with-clear", type: Boolean })
-], CsTimeInput.prototype, "withClear", 2);
-__decorateClass([
-  property({ attribute: "with-now", type: Boolean })
-], CsTimeInput.prototype, "withNow", 2);
-__decorateClass([
-  property({ attribute: "ssr-label", type: Boolean })
-], CsTimeInput.prototype, "ssrLabel", 2);
-__decorateClass([
-  property({ attribute: "ssr-hint", type: Boolean })
-], CsTimeInput.prototype, "ssrHint", 2);
-__decorateClass([
-  property({ attribute: "ssr-footer", type: Boolean })
-], CsTimeInput.prototype, "ssrFooter", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsTimeInput.prototype, "min", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsTimeInput.prototype, "max", 2);
-__decorateClass([
-  property({ converter: { fromAttribute: stepFromAttribute, toAttribute: stepToAttribute } })
-], CsTimeInput.prototype, "step", 2);
-__decorateClass([
-  property({ attribute: "hour-format", reflect: true })
-], CsTimeInput.prototype, "hourFormat", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CsTimeInput.prototype, "open", 2);
-__decorateClass([
-  property({ reflect: true })
-], CsTimeInput.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], CsTimeInput.prototype, "distance", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], CsTimeInput.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], CsTimeInput.prototype, "handleOpenChange", 1);
-CsTimeInput = __decorateClass([
-  customElement("cs-time-input")
-], CsTimeInput);
-function stepFromAttribute(value) {
-  if (value == null) {
-    return 60;
-  }
-  if (value === "any") {
-    return "any";
-  }
-  const n = Number(value);
-  return Number.isFinite(n) && n > 0 ? n : 60;
-}
-function stepToAttribute(value) {
-  if (value === "any") {
-    return "any";
-  }
-  return String(value);
-}
-
-export {
-  CsTimeInput
-};