@antadesign/anta 0.3.15 → 0.3.17

package/dist/elements/a-input-time.js

@@ -1,15 +1,16 @@
 import { HTMLElementBase } from "../anta_helpers";
 import "./a-input-time.css";
-const FORWARDED = ["name", "aria-label", "required"];
 const CLEAR_TRIGGER = "clearrequest";
 const CLEAR_INPUT_EVENT = "clearinput";
 const pad2 = (n) => String(n).padStart(2, "0");
+const inputColumns = (value) => Array.from(value).reduce((columns, char) => columns + (/[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︐-﹯！-｠￠-￦]/u.test(char) ? 2 : 1), 0);
 const to24 = (h12, period) => period === "pm" ? h12 % 12 + 12 : h12 % 12;
+const parseTime = (value) => {
+  const match = /^(\d{1,2}):(\d{2})$/.exec((value ?? "").trim());
+  return match ? { h: Math.min(23, Number(match[1])), min: Math.min(59, Number(match[2])) } : null;
+};
 const SHADOW_STYLE = `
   :host {
-    --_fs: 15px;
-    --_lh: 20px;
-
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     row-gap: 4px;
@@ -20,11 +21,10 @@ const SHADOW_STYLE = `
     display: none;
     color: var(--input-time-label);
     font-family: var(--sans-serif);
-    font-size: var(--_fs);
-    line-height: var(--_lh);
+    font-size: var(--input-time-font-size);
+    line-height: var(--input-time-line-height);
     font-weight: 500;
   }
-  .label.has-label { display: block; }
 
   .field {
     --_bc: var(--input-time-border);
@@ -33,41 +33,34 @@ const SHADOW_STYLE = `
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    min-height: 28px;
+    min-height: var(--input-time-field-height);
     background: var(--input-time-bg);
-    border-radius: 4px;
+    border-radius: var(--input-time-field-radius);
     box-shadow: inset 0 0 0 var(--_bw) var(--_bc);
     transition: box-shadow 120ms ease;
   }
   :host([status]) .field { --_bw: 1px; }
-  :host([size="small"]) { --_fs: 13px; --_lh: 16px; }
-  :host([size="large"]) { --_fs: 17px; --_lh: 22px; }
-  :host([size="small"]) .field { min-height: 24px; }
-  :host([size="large"]) .field { min-height: 32px; }
-  :host([round]) .field { border-radius: var(--input-time-round, 999px); }
 
   @media (hover: hover) and (pointer: fine) {
-    :host(:not(:disabled)) .field:hover { --_bc: var(--input-time-border-hover); }
+    :host(:not(:disabled)) .field:hover {
+      --_bc: var(--input-time-border-hover);
+      --_bw: 1px;
+    }
   }
-  .field:has(.seg:focus) {
+  .field:focus-within {
     --_bc: var(--input-time-border-hover);
+    --_bw: 1px;
     outline: 1px solid var(--focus-ring);
     outline-offset: 1px;
   }
+  @media (forced-colors: active) { .field { border: 1px solid ButtonBorder; } }
 
   slot[name="leading"] {
     display: none;
     color: var(--input-time-adornment);
-    font-size: var(--_fs);
-    line-height: var(--_lh);
+    font-size: var(--input-time-font-size);
+    line-height: var(--input-time-line-height);
   }
-  .field.has-leading slot[name="leading"] {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin-inline-start: 7px;
-  }
-  .field.has-leading .segments { padding-inline-start: 5px; }
   :host([dim-actions]) slot[name="leading"] { opacity: 0.6; transition: opacity 120ms ease; }
   :host([dim-actions]:not(:disabled)) .field:hover slot[name="leading"],
   :host([dim-actions]:not(:disabled)) .field:focus-within slot[name="leading"] { opacity: 1; }
@@ -83,53 +76,50 @@ const SHADOW_STYLE = `
     font-family: var(--sans-serif);
     font-feature-settings: 'ss02', 'ss05', 'tnum';
     font-variation-settings: 'wdth' 100, 'slnt' 0, 'ital' 0;
-    font-size: var(--_fs);
-    line-height: var(--_lh);
+    font-size: var(--input-time-font-size);
+    line-height: var(--input-time-line-height);
     font-weight: 400;
   }
 
   .seg {
+    appearance: none;
     display: inline-block;
     box-sizing: border-box;
+    min-width: 0;
     padding-inline: 1px;
+    border: 0;
     border-radius: 2px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-feature-settings: 'ss02', 'ss05', 'tnum';
+    font-variation-settings: 'wdth' 100, 'slnt' 0, 'ital' 0;
+    line-height: inherit;
     text-align: center;
     white-space: nowrap;
     outline: none;
-    cursor: default;
+    cursor: text;
     font-variant-numeric: tabular-nums;
-    caret-color: transparent;
   }
-  .seg[inputmode="numeric"] {
-    /* Fixed to two tabular digits so the box never reflows: neither the narrower
-       placeholder dashes nor a mid-entry single digit changes the field width. */
-    width: calc(2ch + 4px);
+  .seg--period {
+    field-sizing: content;
+    width: auto;
+    color: var(--input-time-period-color);
   }
-  .seg:focus {
-    background: var(--input-time-seg-focus-bg);
-    color: var(--input-time-seg-focus-text);
+  .seg::placeholder {
+    color: var(--input-time-placeholder);
+    opacity: 1;
+  }
+  .lit {
+    margin-inline: -1px;
+    white-space: pre;
+    color: var(--input-time-text);
   }
-  .seg[data-placeholder] { color: var(--input-time-placeholder); }
-  .lit { white-space: pre; color: var(--input-time-text); }
-
-  /* No text-selection highlight inside the field: the segments are spinbuttons,
-     and a selection painted over the focused segment's tint compounds into an
-     unreadable block. The focus tint alone marks the active segment. Scoped to
-     the shadow, so page selection is unaffected. */
-  ::selection { background: transparent; }
 
   :host(:disabled) .segments { cursor: not-allowed; }
   :host(:disabled) .seg { cursor: not-allowed; }
 
   slot[name="trailing"] { display: none; }
-  .field.has-trailing slot[name="trailing"] {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    flex-shrink: 0;
-    color: var(--input-time-adornment);
-    font-size: var(--_fs);
-  }
   :host([dim-actions]) slot[name="trailing"],
   :host([dim-actions]) slot[name="clear"] { opacity: 0.6; transition: opacity 120ms ease; }
   :host([dim-actions]:not(:disabled)) .field:hover slot[name="trailing"],
@@ -143,7 +133,7 @@ const SHADOW_STYLE = `
     flex-shrink: 0;
     visibility: hidden;
   }
-  .field.is-filled slot[name="clear"] { visibility: visible; }
+  :host(:state(filled)) slot[name="clear"] { visibility: visible; }
   :host(:disabled) slot[name="clear"] { display: none; }
 
   .hint {
@@ -153,33 +143,59 @@ const SHADOW_STYLE = `
     padding-inline-start: 1px;
     color: var(--input-time-hint);
     font-family: var(--sans-serif);
-    font-size: calc(var(--_fs) - 1px);
-    line-height: calc(var(--_lh) - 2px);
+    font-size: calc(var(--input-time-font-size) - 1px);
+    line-height: calc(var(--input-time-line-height) - 2px);
   }
-  .hint.has-hint { display: flex; }
 `;
+const INPUT_TIME_TEMPLATE = typeof document === "undefined" ? void 0 : (() => {
+  const template = document.createElement("template");
+  const style = document.createElement("style");
+  style.textContent = SHADOW_STYLE;
+  const label = document.createElement("slot");
+  label.className = "label";
+  label.part.add("label");
+  label.name = "label";
+  const field = document.createElement("div");
+  field.className = "field";
+  field.part.add("field");
+  const leadingSlot = document.createElement("slot");
+  leadingSlot.name = "leading";
+  leadingSlot.part.add("leading");
+  const segments = document.createElement("div");
+  segments.className = "segments";
+  segments.part.add("segments");
+  segments.setAttribute("role", "group");
+  const clearSlot = document.createElement("slot");
+  clearSlot.name = "clear";
+  clearSlot.part.add("clear");
+  const trailingSlot = document.createElement("slot");
+  trailingSlot.name = "trailing";
+  trailingSlot.part.add("trailing");
+  field.append(leadingSlot, segments, clearSlot, trailingSlot);
+  const hint = document.createElement("slot");
+  hint.className = "hint";
+  hint.part.add("hint");
+  hint.name = "hint";
+  template.content.append(style, label, field, document.createElement("slot"), hint);
+  return template;
+})();
 class AInputTimeElement extends HTMLElementBase {
   static formAssociated = true;
   static observedAttributes = [
-    ...FORWARDED,
     "value",
     "defaultvalue",
     "locale",
     "hour12",
     "status",
     "disabled",
-    "size",
     "min",
-    "max"
+    "max",
+    "aria-label",
+    "required"
   ];
   #internals;
   #field;
-  #labelBox;
   #labelSlot;
-  #hintBox;
-  #hintSlot;
-  #leadingSlot;
-  #trailingSlot;
   #segRow;
   #ready = false;
   #formDisabled = false;
@@ -196,9 +212,10 @@ class AInputTimeElement extends HTMLElementBase {
   #minute = null;
   #period = null;
   #segs = [];
-  // In-progress typed digits for the focused numeric segment (reset on blur /
-  // segment change / commit), so `1` then `2` builds `12`.
-  #buf = "";
+  #literals = [];
+  // Pointer-focused inputs keep the browser's caret placement. Keyboard focus
+  // selects the segment so a new value can be typed immediately.
+  #pointerSegment;
   constructor() {
     super();
     try {
@@ -207,51 +224,20 @@ class AInputTimeElement extends HTMLElementBase {
       console.warn("a-input-time: ElementInternals unavailable \u2014 form association disabled.", err);
     }
     const shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.#labelBox = document.createElement("div");
-    this.#labelBox.className = "label";
-    this.#labelBox.setAttribute("part", "label");
-    this.#labelSlot = document.createElement("slot");
-    this.#labelSlot.name = "label";
-    this.#labelBox.append(this.#labelSlot);
+    if (!INPUT_TIME_TEMPLATE) throw new Error("a-input-time requires a DOM document");
+    shadow.append(INPUT_TIME_TEMPLATE.content.cloneNode(true));
+    this.#labelSlot = shadow.querySelector(".label");
     this.#labelSlot.addEventListener("click", () => this.#segs[0]?.el.focus());
     this.#labelSlot.addEventListener("slotchange", this.#onLabelSlotChange);
-    this.#field = document.createElement("div");
-    this.#field.className = "field";
-    this.#field.setAttribute("part", "field");
-    this.#segRow = document.createElement("div");
-    this.#segRow.className = "segments";
-    this.#segRow.setAttribute("part", "segments");
-    this.#segRow.setAttribute("role", "group");
-    this.#field.addEventListener("mousedown", (e) => {
-      if (e.target === this.#field || e.target === this.#segRow) {
-        e.preventDefault();
-        this.#segs[0]?.el.focus();
-      }
-    });
-    this.#leadingSlot = document.createElement("slot");
-    this.#leadingSlot.name = "leading";
-    this.#leadingSlot.setAttribute("part", "leading");
-    this.#leadingSlot.addEventListener("slotchange", () => this.#field.classList.toggle("has-leading", this.#leadingSlot.assignedNodes().length > 0));
-    const clearSlot = document.createElement("slot");
-    clearSlot.name = "clear";
-    clearSlot.setAttribute("part", "clear");
-    this.#trailingSlot = document.createElement("slot");
-    this.#trailingSlot.name = "trailing";
-    this.#trailingSlot.setAttribute("part", "trailing");
-    this.#trailingSlot.addEventListener("slotchange", () => this.#field.classList.toggle("has-trailing", this.#trailingSlot.assignedNodes().length > 0));
-    this.#field.append(this.#leadingSlot, this.#segRow, clearSlot, this.#trailingSlot);
+    this.#field = shadow.querySelector(".field");
+    this.#segRow = shadow.querySelector(".segments");
+    this.#field.addEventListener("mousedown", this.#onFieldMouseDown);
+    this.#segRow.addEventListener("input", this.#onInput);
+    this.#segRow.addEventListener("keydown", this.#onKeyDown);
+    this.#segRow.addEventListener("focusin", this.#onFocusIn);
+    this.#segRow.addEventListener("focusout", this.#onFocusOut);
+    this.#segRow.addEventListener("paste", this.#onPaste);
     this.addEventListener(CLEAR_TRIGGER, () => this.clear());
-    this.#hintBox = document.createElement("div");
-    this.#hintBox.className = "hint";
-    this.#hintBox.setAttribute("part", "hint");
-    this.#hintSlot = document.createElement("slot");
-    this.#hintSlot.name = "hint";
-    this.#hintSlot.addEventListener("slotchange", this.#onHintSlotChange);
-    this.#hintBox.append(this.#hintSlot);
-    const extrasSlot = document.createElement("slot");
-    shadow.append(style, this.#labelBox, this.#field, extrasSlot, this.#hintBox);
   }
   getAnchorRect() {
     return this.#field.getBoundingClientRect();
@@ -291,13 +277,7 @@ class AInputTimeElement extends HTMLElementBase {
       this.#syncDisabled();
       return;
     }
-    if (name === "size") return;
     if (name === "min" || name === "max") {
-      this.#clampIfComplete();
-      this.#iso = this.value;
-      this.#render();
-      this.#internals?.setFormValue(this.value);
-      this.#updateFilled();
       this.#updateValidity();
       return;
     }
@@ -349,161 +329,211 @@ class AInputTimeElement extends HTMLElementBase {
         { type: "minute", value: "05" }
       ];
     }
+    this.#amText = amText;
+    this.#pmText = pmText;
     this.#segRow.replaceChildren();
     this.#segs = [];
+    this.#literals = [];
     for (const part of parts) {
       if (part.type === "hour" || part.type === "minute" || part.type === "dayPeriod") {
-        const el = document.createElement("span");
-        el.className = "seg";
-        el.tabIndex = 0;
-        el.setAttribute("role", "spinbutton");
-        el.contentEditable = "true";
-        el.spellcheck = false;
-        el.setAttribute("autocorrect", "off");
-        el.setAttribute("autocapitalize", "off");
+        const el = document.createElement("input");
         const kind = part.type === "dayPeriod" ? "period" : part.type;
+        el.className = `seg seg--${kind}`;
+        el.type = "text";
+        el.spellcheck = false;
+        el.part.add("segment", kind);
+        el.autocomplete = "off";
+        el.autocorrect = false;
+        el.autocapitalize = "off";
         el.setAttribute("aria-label", kind === "hour" ? "Hour" : kind === "minute" ? "Minute" : "AM/PM");
-        el.setAttribute("inputmode", kind === "period" ? "text" : "numeric");
+        el.inputMode = kind === "period" ? "text" : "numeric";
+        if (kind === "period") {
+          const length = Math.max(2, inputColumns(this.#amText), inputColumns(this.#pmText));
+          el.maxLength = length;
+          el.size = length;
+        } else {
+          el.maxLength = 2;
+          el.size = 2;
+        }
         const seg = kind === "hour" ? { kind, el, min: hour12 ? 1 : 0, max: hour12 ? 12 : 23 } : kind === "minute" ? { kind, el, min: 0, max: 59 } : { kind, el, min: 0, max: 1 };
-        el.addEventListener("keydown", (e) => this.#onSegKeyDown(e, seg));
-        el.addEventListener("beforeinput", (e) => this.#onSegBeforeInput(e, seg));
-        el.addEventListener("focus", () => {
-          this.#buf = "";
-        });
-        el.addEventListener("blur", () => this.#onSegBlur());
         this.#segRow.append(el);
         this.#segs.push(seg);
       } else {
+        if (!part.value.trim()) continue;
         const lit = document.createElement("span");
         lit.className = "lit";
+        lit.part.add("literal");
         lit.setAttribute("aria-hidden", "true");
         lit.textContent = part.value;
         this.#segRow.append(lit);
+        this.#literals.push(part.value);
       }
     }
-    this.#amText = amText;
-    this.#pmText = pmText;
     this.#applyValue(keep);
     this.#applyGroupLabel();
     this.#syncStatus();
     this.#syncDisabled();
-    this.#render();
-    this.#internals?.setFormValue(this.value);
-    this.#updateFilled();
-    this.#updateValidity();
+    this.#commitEdit({ dispatch: false });
   }
   #amText = "AM";
   #pmText = "PM";
-  // --- Keyboard ---
-  // Navigation + stepping only. Character entry and deletion go through
-  // `#onSegBeforeInput` (so mobile virtual keyboards, which don't fire keydown
-  // reliably, work) — these keys don't produce `beforeinput`, so there's no
-  // double handling.
-  #onSegKeyDown(e, seg) {
-    if (this.hasAttribute("disabled") || this.#formDisabled) return;
-    const k = e.key;
-    if (k === "ArrowUp" || k === "ArrowDown") {
+  // --- Native segment editing + navigation ---
+  #segFromTarget(target) {
+    if (!(target instanceof HTMLInputElement)) return void 0;
+    return this.#segs.find((seg) => seg.el === target);
+  }
+  // Clicking the field's padding (rather than a native input) moves focus into
+  // the editor. A real pointer interaction leaves caret placement to the browser.
+  #onFieldMouseDown = (e) => {
+    const seg = this.#segFromTarget(e.target);
+    if (seg) {
+      this.#pointerSegment = seg.el;
+      return;
+    }
+    if (e.target === this.#field || e.target === this.#segRow) {
       e.preventDefault();
-      this.#step(seg, k === "ArrowUp" ? 1 : -1);
-    } else if (k === "PageUp" || k === "PageDown") {
+      this.#focusSegment(this.#segs[0]);
+    }
+  };
+  #onFocusIn = (e) => {
+    const seg = this.#segFromTarget(e.target);
+    if (!seg) return;
+    const pointerFocused = this.#pointerSegment === seg.el;
+    this.#pointerSegment = void 0;
+    if (!pointerFocused) {
+      queueMicrotask(() => {
+        if (this.shadowRoot?.activeElement === seg.el) seg.el.select();
+      });
+    }
+  };
+  #onFocusOut = (_e) => {
+    queueMicrotask(() => {
+      const active = this.shadowRoot?.activeElement;
+      if (this.#segs.some((seg) => seg.el === active)) return;
+      if (this.#clampIfComplete()) this.#commitEdit();
+      this.#dispatch("change");
+    });
+  };
+  #onKeyDown = (e) => {
+    const seg = this.#segFromTarget(e.target);
+    if (!seg) return;
+    const { el } = seg;
+    const key = e.key;
+    if (key === "ArrowUp" || key === "ArrowDown") {
       e.preventDefault();
-      this.#step(seg, (k === "PageUp" ? 1 : -1) * (seg.kind === "minute" ? 5 : 1));
-    } else if (k === "Home") {
+      this.#step(seg, key === "ArrowUp" ? 1 : -1);
+      return;
+    }
+    if (key === "PageUp" || key === "PageDown") {
       e.preventDefault();
-      this.#set(seg, seg.min);
-    } else if (k === "End") {
+      this.#step(seg, (key === "PageUp" ? 1 : -1) * (seg.kind === "minute" ? 5 : 1));
+      return;
+    }
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      const start = el.selectionStart ?? 0;
+      const end = el.selectionEnd ?? start;
+      const boundary = key === "ArrowLeft" ? start === 0 && end === 0 : start === el.value.length && end === el.value.length;
+      if (boundary) {
+        e.preventDefault();
+        this.#render();
+        this.#moveFocus(seg, key === "ArrowRight" ? 1 : -1);
+      }
+      return;
+    }
+    if (key === "Backspace" && el.value === "") {
       e.preventDefault();
-      this.#set(seg, seg.max);
-    } else if (k === "ArrowLeft" || k === "ArrowRight") {
+      this.#moveFocus(seg, -1);
+      return;
+    }
+    if (seg.kind !== "period" && this.#literals.some((literal) => literal.includes(key))) {
       e.preventDefault();
-      this.#moveFocus(seg, k === "ArrowRight" ? 1 : -1);
+      this.#render();
+      this.#moveFocus(seg, 1, { numeric: true });
     }
-  }
-  // Character entry (digits, a/p) and deletion, from a physical or virtual
-  // keyboard. We never let the contentEditable mutate — preventDefault every
-  // `beforeinput` and route it, keeping the segment text under our control.
-  #onSegBeforeInput(e, seg) {
+  };
+  #onPaste = (e) => {
+    const text = e.clipboardData?.getData("text/plain").trim() ?? "";
+    if (!/^(?:[01]?\d|2[0-3]):[0-5]\d$/.test(text)) return;
     e.preventDefault();
-    if (this.hasAttribute("disabled") || this.#formDisabled) return;
-    const type = e.inputType;
-    if (type === "deleteContentBackward" || type === "deleteContentForward") {
-      this.#buf = "";
-      this.#clearSeg(seg);
-      if (type === "deleteContentBackward") this.#moveFocus(seg, -1);
+    this.#applyValue(text);
+    this.#commitEdit();
+    this.#dispatch("change");
+  };
+  #onInput = (e) => {
+    const seg = this.#segFromTarget(e.target);
+    if (!seg || e.isComposing) return;
+    if (seg.kind === "period") this.#onPeriodInput(e, seg);
+    else this.#onNumericInput(seg);
+  };
+  #onNumericInput(seg) {
+    const { el } = seg;
+    const typed = el.value.replace(/\D/g, "");
+    if (typed !== el.value) el.value = typed;
+    const hour12Hour = seg.kind === "hour" && this.#hour12;
+    const typeMax = hour12Hour ? 23 : seg.max;
+    if (typed === "") {
+      if (seg.kind === "hour") this.#hour = null;
+      else this.#minute = null;
+      this.#commitEdit({ dispatch: false, preserve: el });
       return;
     }
-    if (type === "insertFromPaste") {
-      const text = e.dataTransfer?.getData("text/plain") || e.data || "";
-      const parsed = this.#parsePaste(text);
-      if (parsed) {
-        this.#buf = "";
-        this.#applyValue(`${pad2(parsed.h)}:${pad2(parsed.min)}`);
-        this.#clampIfComplete();
-        this.#commitEdit();
-        this.#dispatch("change");
-      } else {
-        for (const ch of text) this.#typeChar(seg, ch);
-      }
-      return;
+    let raw = typed.slice(0, 2);
+    let value = Number(raw);
+    let normalized = false;
+    if (value > typeMax) {
+      raw = raw.at(-1);
+      value = Number(raw);
+      normalized = true;
     }
-    if (type.startsWith("insert")) {
-      for (const ch of e.data ?? "") this.#typeChar(seg, ch);
-    }
-  }
-  /** Parse a pasted time to 24-hour `{ h, min }`, or null. Accepts `14:30`,
-   *  `9:5`, `2:30 pm`, `12am`, and run-together `230` / `1430` — mirrors
-   *  `calendar-core`'s `parseTimeInput` but Temporal-free, so the element's
-   *  granular import stays lean. */
-  #parsePaste(text) {
-    let s = (text ?? "").trim().toLowerCase();
-    if (!s) return null;
-    let mer = null;
-    const m = s.match(/([ap])\.?m?\.?$/);
-    if (m) {
-      mer = m[1] === "p" ? "pm" : "am";
-      s = s.slice(0, m.index).trim();
-    }
-    let h;
-    let min;
-    if (/[:.]/.test(s)) {
-      const [hp, mp] = s.split(/[:.]/);
-      h = Number(hp);
-      min = Number(mp ?? "0");
-    } else {
-      const d = s.replace(/\D/g, "");
-      if (!d) return null;
-      if (d.length <= 2) {
-        h = Number(d);
-        min = 0;
+    const advance = raw.length === 2 || Number(`${value}0`) > typeMax;
+    if (hour12Hour) {
+      if (value === 0 && raw.length === 1) this.#hour = null;
+      else if (value === 0) {
+        this.#hour = 12;
+        this.#period = "am";
+      } else if (value > 12) {
+        this.#hour = value - 12;
+        this.#period = "pm";
       } else {
-        const cut = d.length - 2;
-        h = Number(d.slice(0, cut));
-        min = Number(d.slice(cut));
+        this.#hour = value;
+        if (this.#period == null) this.#period = "am";
       }
+    } else {
+      this.#assign(seg, Math.max(seg.min, value));
     }
-    if (!Number.isInteger(h) || !Number.isInteger(min)) return null;
-    if (mer === "pm" && h < 12) h += 12;
-    if (mer === "am" && h === 12) h = 0;
-    if (h < 0 || h > 23 || min < 0 || min > 59) return null;
-    return { h, min };
+    this.#commitEdit({ dispatch: false, preserve: normalized || advance ? void 0 : el });
+    if (advance) this.#moveFocus(seg, 1);
   }
-  #typeChar(seg, ch) {
-    if (seg.kind === "period") {
-      const c = ch.toLowerCase();
-      if (c === "a" || c === "p") {
-        this.#period = c === "p" ? "pm" : "am";
-        this.#commitEdit();
-        this.#moveFocus(seg, 1);
-      }
+  #onPeriodInput(e, seg) {
+    const { el } = seg;
+    const raw = el.value.trim();
+    if (!raw) {
+      this.#period = null;
+      this.#commitEdit({ dispatch: false, preserve: el });
+      return;
+    }
+    const lower = raw.toLowerCase();
+    const am = this.#amText.toLowerCase();
+    const pm = this.#pmText.toLowerCase();
+    const period = lower === "a" || lower === "am" || lower === am ? "am" : lower === "p" || lower === "pm" || lower === pm ? "pm" : null;
+    if (period) {
+      this.#period = period;
+      this.#commitEdit({ dispatch: false });
+      this.#moveFocus(seg, 1);
+      return;
+    }
+    if (am.startsWith(lower) || pm.startsWith(lower)) {
+      this.#period = null;
+      this.#commitEdit({ dispatch: false, preserve: el });
       return;
     }
-    if (/[0-9]/.test(ch)) this.#typeDigit(seg, ch);
+    e.stopPropagation();
+    el.value = this.#period === "pm" ? this.#pmText : this.#period === "am" ? this.#amText : "";
   }
-  /** Arrow / page / home / end increment: wraps within a segment's [min, max];
+  /** Arrow / page increments wrap within a segment's [min, max];
    *  from empty, ↑ lands on min and ↓ on max. Clamps the resulting complete value
    *  into the field's `min`/`max` range (so ↑ can't step past `max`). */
   #step(seg, delta) {
-    this.#buf = "";
     if (seg.kind === "period") {
       this.#period = this.#period == null ? "am" : this.#period === "am" ? "pm" : "am";
       this.#clampIfComplete();
@@ -519,22 +549,16 @@ class AInputTimeElement extends HTMLElementBase {
     this.#clampIfComplete();
     this.#commitEdit();
   }
-  /** Mutate a segment's state without committing (so callers can clamp first). */
+  /** Mutate a numeric segment without committing (so callers can clamp first). */
   #assign(seg, val) {
-    if (seg.kind === "period") return;
     if (seg.kind === "hour") this.#hour = val;
     else this.#minute = val;
     if (seg.kind === "hour" && this.#hour12 && this.#period == null) this.#period = "am";
   }
-  #set(seg, val) {
-    this.#assign(seg, val);
-    this.#commitEdit();
-  }
   // --- min / max range (total minutes since 00:00, or null when unbounded) ---
   #parseTotal(v) {
-    const m = /^(\d{1,2}):(\d{2})$/.exec((v ?? "").trim());
-    if (!m) return null;
-    return Math.min(23, Number(m[1])) * 60 + Math.min(59, Number(m[2]));
+    const time = parseTime(v);
+    return time ? time.h * 60 + time.min : null;
   }
   get #minTotal() {
     return this.#parseTotal(this.getAttribute("min"));
@@ -561,75 +585,20 @@ class AInputTimeElement extends HTMLElementBase {
     this.#applyValue(`${pad2(Math.floor(clamped / 60))}:${pad2(clamped % 60)}`);
     return true;
   }
-  #clearSeg(seg) {
-    if (seg.kind === "hour") this.#hour = null;
-    else if (seg.kind === "minute") this.#minute = null;
-    else this.#period = null;
-    this.#commitEdit();
-  }
-  /** Type a digit into a numeric segment, accumulating and auto-advancing once the
-   *  segment can't take another digit (the `Number(v + '0') > max` heuristic). */
-  #typeDigit(seg, d) {
-    const hour12Hour = seg.kind === "hour" && this.#hour12;
-    const typeMax = hour12Hour ? 23 : seg.max;
-    const candidate = Number(this.#buf + d);
-    let raw;
-    let advance = false;
-    if (candidate > typeMax) {
-      raw = Number(d);
-      this.#buf = d;
-    } else {
-      raw = candidate;
-      this.#buf += d;
-    }
-    if (Number(`${raw}0`) > typeMax || this.#buf.length >= String(typeMax).length) {
-      advance = true;
-      this.#buf = "";
-    }
-    if (hour12Hour) {
-      if (raw === 0 && !advance) {
-        seg.el.textContent = "0";
-        seg.el.setAttribute("data-placeholder", "");
-        seg.el.removeAttribute("aria-valuenow");
-        seg.el.removeAttribute("aria-valuetext");
+  #focusSegment(seg) {
+    if (!seg) return;
+    seg.el.focus();
+    seg.el.select();
+  }
+  #moveFocus(from, dir, options = {}) {
+    const index = this.#segs.indexOf(from);
+    for (let i = index + dir; i >= 0 && i < this.#segs.length; i += dir) {
+      const next = this.#segs[i];
+      if (!options.numeric || next.kind !== "period") {
+        this.#focusSegment(next);
         return;
       }
-      if (raw === 0) {
-        this.#hour = 12;
-        this.#period = "am";
-      } else if (raw > 12) {
-        this.#hour = raw - 12;
-        this.#period = "pm";
-      } else {
-        this.#hour = raw;
-        if (this.#period == null) this.#period = "am";
-      }
-      this.#commitEdit();
-      if (advance) this.#moveFocus(seg, 1);
-      return;
     }
-    this.#assign(seg, Math.max(seg.min, raw));
-    this.#commitEdit();
-    if (advance) this.#moveFocus(seg, 1);
-  }
-  #moveFocus(from, dir) {
-    const i = this.#segs.indexOf(from);
-    const next = this.#segs[i + dir];
-    if (next) next.el.focus();
-  }
-  /** On losing a segment, reset the digit buffer; when focus has left the whole
-   *  group (not just hopped to a sibling segment), clamp into `min`/`max` and
-   *  fire `change`. `shadowRoot.activeElement` reliably reports the focused
-   *  segment even across the shadow boundary (blur `relatedTarget` is retargeted
-   *  to null), so defer one microtask to read where focus landed. */
-  #onSegBlur() {
-    this.#buf = "";
-    queueMicrotask(() => {
-      const active = this.shadowRoot?.activeElement;
-      if (this.#segs.some((s) => s.el === active)) return;
-      if (this.#clampIfComplete()) this.#commitEdit();
-      this.#dispatch("change");
-    });
   }
   // --- Value + rendering ---
   /** Canonical 0–23 hour from the display state, or null when incomplete. */
@@ -639,70 +608,48 @@ class AInputTimeElement extends HTMLElementBase {
     if (this.#period == null) return null;
     return to24(this.#hour, this.#period);
   }
-  #commitEdit() {
-    this.#render();
+  #commitEdit({ dispatch = true, preserve } = {}) {
+    this.#render(preserve);
     this.#iso = this.value;
     this.#internals?.setFormValue(this.value);
     this.#updateFilled();
     this.#updateValidity();
-    this.#dispatch("input");
+    if (dispatch) this.#dispatch("input");
   }
-  #render() {
+  #render(preserve) {
     for (const seg of this.#segs) {
-      if (seg.kind === "period") this.#renderSeg(seg, null);
-      else this.#renderSeg(seg, seg.kind === "hour" ? this.#hour : this.#minute);
+      this.#renderSeg(seg, preserve === seg.el);
     }
   }
-  /** Paint one segment: its value (or placeholder) as text, plus the spinbutton
-   *  ARIA values. `override` lets `#typeDigit` show a partial value mid-entry. */
-  #renderSeg(seg, override) {
+  /** Paint a segment's committed value without disturbing a focused native input
+   *  that already owns valid in-progress text and selection. */
+  #renderSeg(seg, preserve) {
     const el = seg.el;
     if (seg.kind === "period") {
-      const set2 = this.#period != null;
-      el.textContent = set2 ? this.#period === "pm" ? this.#pmText : this.#amText : this.#amText;
-      el.toggleAttribute("data-placeholder", !set2);
-      el.setAttribute("aria-valuemin", "0");
-      el.setAttribute("aria-valuemax", "1");
-      if (set2) {
-        el.setAttribute("aria-valuenow", this.#period === "pm" ? "1" : "0");
-        el.setAttribute("aria-valuetext", this.#period === "pm" ? this.#pmText : this.#amText);
-      } else {
-        el.removeAttribute("aria-valuenow");
-        el.removeAttribute("aria-valuetext");
-      }
+      const value2 = this.#period === "pm" ? this.#pmText : this.#period === "am" ? this.#amText : "";
+      if (!preserve) el.value = value2;
+      el.placeholder = this.#amText;
       return;
     }
-    const val = override;
-    const set = val != null;
-    el.textContent = set ? pad2(val) : "\u2013\u2013";
-    el.toggleAttribute("data-placeholder", !set);
-    el.setAttribute("aria-valuemin", String(seg.min));
-    el.setAttribute("aria-valuemax", String(seg.max));
-    if (set) {
-      el.setAttribute("aria-valuenow", String(val));
-      el.setAttribute("aria-valuetext", pad2(val));
-    } else {
-      el.removeAttribute("aria-valuenow");
-      el.removeAttribute("aria-valuetext");
-    }
+    const value = seg.kind === "hour" ? this.#hour : this.#minute;
+    if (!preserve) el.value = value == null ? "" : pad2(value);
+    el.placeholder = "\u2013\u2013";
   }
   /** Parse a `"HH:mm"` value into the display segments (24h → display units). */
   #applyValue(v) {
-    const m = /^(\d{1,2}):(\d{2})$/.exec((v ?? "").trim());
-    if (!m) {
+    const time = parseTime(v);
+    if (!time) {
       this.#hour = null;
       this.#minute = null;
       this.#period = null;
       return;
     }
-    const h = Math.min(23, Number(m[1]));
-    const min = Math.min(59, Number(m[2]));
-    this.#minute = min;
+    this.#minute = time.min;
     if (this.#hour12) {
-      this.#hour = (h + 11) % 12 + 1;
-      this.#period = h < 12 ? "am" : "pm";
+      this.#hour = (time.h + 11) % 12 + 1;
+      this.#period = time.h < 12 ? "am" : "pm";
     } else {
-      this.#hour = h;
+      this.#hour = time.h;
       this.#period = null;
     }
   }
@@ -715,20 +662,11 @@ class AInputTimeElement extends HTMLElementBase {
     else this.#segRow.removeAttribute("aria-label");
   }
   #onLabelSlotChange = () => {
-    this.#labelBox.classList.toggle("has-label", this.#labelSlot.assignedNodes().length > 0);
     this.#applyGroupLabel();
   };
-  #onHintSlotChange = () => {
-    this.#hintBox.classList.toggle("has-hint", this.#hintSlot.assignedNodes().length > 0);
-  };
   #syncDisabled() {
     const off = this.hasAttribute("disabled") || this.#formDisabled;
-    for (const seg of this.#segs) {
-      if (off) seg.el.setAttribute("aria-disabled", "true");
-      else seg.el.removeAttribute("aria-disabled");
-      seg.el.tabIndex = off ? -1 : 0;
-      seg.el.contentEditable = off ? "false" : "true";
-    }
+    for (const seg of this.#segs) seg.el.disabled = off;
   }
   #syncStatus() {
     const critical = this.getAttribute("status") === "critical";
@@ -739,13 +677,8 @@ class AInputTimeElement extends HTMLElementBase {
     }
   }
   #updateFilled() {
-    const filled = !!this.value;
-    this.#field.classList.toggle("is-filled", filled);
-    try {
-      if (filled) this.#internals?.states.add("filled");
-      else this.#internals?.states.delete("filled");
-    } catch {
-    }
+    if (this.value) this.#internals?.states.add("filled");
+    else this.#internals?.states.delete("filled");
   }
   #updateValidity() {
     if (!this.#internals) return;
@@ -778,12 +711,10 @@ class AInputTimeElement extends HTMLElementBase {
     const next = v ?? "";
     if (next === this.value) return;
     this.#applyValue(next);
-    this.#iso = this.value;
     if (this.#ready) {
-      this.#render();
-      this.#internals?.setFormValue(this.value);
-      this.#updateFilled();
-      this.#updateValidity();
+      this.#commitEdit({ dispatch: false });
+    } else {
+      this.#iso = this.value;
     }
   }
   /** Empty the field, refocus the first segment, and fire input + change. */
@@ -791,12 +722,7 @@ class AInputTimeElement extends HTMLElementBase {
     this.#hour = null;
     this.#minute = null;
     this.#period = null;
-    this.#iso = "";
-    this.#render();
-    this.#internals?.setFormValue("");
-    this.#updateFilled();
-    this.#updateValidity();
-    this.#dispatch("input");
+    this.#commitEdit();
     this.#dispatch("change");
     this.dispatchEvent(new CustomEvent(CLEAR_INPUT_EVENT, { bubbles: true }));
     this.#segs[0]?.el.focus();
@@ -828,12 +754,7 @@ class AInputTimeElement extends HTMLElementBase {
   }
   formResetCallback() {
     this.#applyValue(this.getAttribute("defaultvalue") ?? "");
-    this.#iso = this.value;
-    this.#render();
-    this.#internals?.setFormValue(this.value);
-    this.#updateFilled();
-    this.#updateValidity();
-    this.#dispatch("input");
+    this.#commitEdit();
     this.#dispatch("change");
   }
   formDisabledCallback(disabled) {