@editora/ui-core 0.1.9 → 0.1.12

package/dist/textarea.esm.js

@@ -0,0 +1,520 @@
+import { E as f } from "./ElementBase-909688f3.mjs";
+const v = `
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  </svg>
+`, _ = `
+  :host {
+    --ui-textarea-bg: var(--ui-color-surface, #ffffff);
+    --ui-textarea-text: var(--ui-color-text, #0f172a);
+    --ui-textarea-muted: var(--ui-color-muted, #64748b);
+    --ui-textarea-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-textarea-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-textarea-accent: var(--ui-color-primary, #2563eb);
+    --ui-textarea-danger: var(--ui-color-danger, #dc2626);
+    --ui-textarea-success: var(--ui-color-success, #16a34a);
+    --ui-textarea-radius: 12px;
+    --ui-textarea-padding-x: 12px;
+    --ui-textarea-padding-y: 10px;
+    --ui-textarea-min-height: 110px;
+    --ui-textarea-shadow: none;
+
+    color-scheme: light dark;
+    display: inline-grid;
+    inline-size: min(100%, 520px);
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .shell {
+    min-inline-size: 0;
+    display: grid;
+    gap: 7px;
+    color: var(--ui-textarea-text);
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: grid;
+    gap: 3px;
+  }
+
+  .meta[hidden] {
+    display: none;
+  }
+
+  .label {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--ui-textarea-text);
+  }
+
+  .description {
+    font-size: 12px;
+    line-height: 1.3;
+    color: var(--ui-textarea-muted);
+  }
+
+  .field {
+    min-inline-size: 0;
+    position: relative;
+    border: 1px solid var(--ui-textarea-border);
+    border-radius: var(--ui-textarea-radius);
+    background: var(--ui-textarea-bg);
+    box-shadow: var(--ui-textarea-shadow);
+    transition:
+      border-color 160ms ease,
+      box-shadow 160ms ease,
+      background-color 160ms ease;
+  }
+
+  .field:focus-within {
+    border-color: color-mix(in srgb, var(--ui-textarea-focus) 72%, transparent);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-textarea-focus) 22%, transparent),
+      var(--ui-textarea-shadow);
+  }
+
+  textarea {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-textarea-min-height);
+    border: 0;
+    background: transparent;
+    color: var(--ui-textarea-text);
+    resize: vertical;
+    outline: none;
+    font: 500 14px/1.45 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: var(--ui-textarea-padding-y) var(--ui-textarea-padding-x);
+    border-radius: inherit;
+  }
+
+  textarea::placeholder {
+    color: color-mix(in srgb, var(--ui-textarea-muted) 76%, transparent);
+  }
+
+  textarea[readonly] {
+    cursor: default;
+  }
+
+  textarea[disabled] {
+    cursor: not-allowed;
+    opacity: 0.66;
+  }
+
+  .clear-btn {
+    position: absolute;
+    inset-inline-end: 8px;
+    inset-block-start: 8px;
+    inline-size: 26px;
+    block-size: 26px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--ui-textarea-muted);
+    cursor: pointer;
+    display: inline-grid;
+    place-items: center;
+    transition: background-color 140ms ease, color 140ms ease;
+  }
+
+  .clear-btn svg {
+    inline-size: 14px;
+    block-size: 14px;
+    pointer-events: none;
+  }
+
+  .clear-btn:hover {
+    background: color-mix(in srgb, var(--ui-textarea-text) 10%, transparent);
+    color: var(--ui-textarea-text);
+  }
+
+  .clear-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-textarea-focus) 74%, transparent);
+    outline-offset: 1px;
+  }
+
+  .clear-btn[hidden] {
+    display: none;
+  }
+
+  .footer {
+    min-inline-size: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 10px;
+    font-size: 12px;
+  }
+
+  .error {
+    color: var(--ui-textarea-danger);
+    line-height: 1.35;
+  }
+
+  .error:empty {
+    display: none;
+  }
+
+  .count {
+    color: var(--ui-textarea-muted);
+    white-space: nowrap;
+  }
+
+  .count[hidden] {
+    display: none;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-textarea-padding-x: 10px;
+    --ui-textarea-padding-y: 8px;
+    --ui-textarea-min-height: 84px;
+  }
+
+  :host([size="sm"]) textarea,
+  :host([size="1"]) textarea {
+    font-size: 13px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-textarea-padding-x: 14px;
+    --ui-textarea-padding-y: 12px;
+    --ui-textarea-min-height: 140px;
+  }
+
+  :host([size="lg"]) textarea,
+  :host([size="3"]) textarea {
+    font-size: 15px;
+  }
+
+  :host([density="compact"]) {
+    --ui-textarea-padding-y: 7px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-textarea-padding-y: 13px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-textarea-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 82%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="soft"]) {
+    --ui-textarea-bg: color-mix(in srgb, var(--ui-textarea-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-textarea-border: color-mix(in srgb, var(--ui-textarea-accent) 32%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="filled"]) {
+    --ui-textarea-bg: color-mix(in srgb, var(--ui-textarea-text) 6%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="ghost"]) .field {
+    box-shadow: none;
+    background: transparent;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-textarea-bg: #0f172a;
+    --ui-textarea-text: #e2e8f0;
+    --ui-textarea-muted: #93a4bd;
+    --ui-textarea-border: #334155;
+    --ui-textarea-accent: #93c5fd;
+    --ui-textarea-focus: #93c5fd;
+    --ui-textarea-shadow:
+      0 12px 32px rgba(2, 6, 23, 0.46),
+      0 24px 56px rgba(2, 6, 23, 0.42);
+  }
+
+  :host([tone="success"]) {
+    --ui-textarea-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-textarea-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-textarea-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([validation="error"]) .field {
+    border-color: color-mix(in srgb, var(--ui-textarea-danger) 74%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-textarea-danger) 22%, transparent);
+  }
+
+  :host([validation="success"]) .field {
+    border-color: color-mix(in srgb, var(--ui-textarea-success) 66%, transparent);
+  }
+
+  :host([radius="none"]) {
+    --ui-textarea-radius: 0;
+  }
+
+  :host([radius="large"]) {
+    --ui-textarea-radius: 16px;
+  }
+
+  :host([radius="full"]) {
+    --ui-textarea-radius: 24px;
+  }
+
+  :host([disabled]) .field,
+  :host([readonly]) .field {
+    background: color-mix(in srgb, var(--ui-textarea-bg) 78%, #94a3b8 22%);
+  }
+
+  :host([headless]) .meta,
+  :host([headless]) .footer {
+    display: none;
+  }
+
+  :host([headless]) .field {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .field,
+    .clear-btn {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .field {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-textarea-bg: Canvas;
+      --ui-textarea-text: CanvasText;
+      --ui-textarea-muted: CanvasText;
+      --ui-textarea-border: CanvasText;
+      --ui-textarea-focus: Highlight;
+      --ui-textarea-accent: Highlight;
+      --ui-textarea-danger: Highlight;
+      --ui-textarea-success: Highlight;
+      --ui-textarea-shadow: none;
+    }
+
+    .clear-btn {
+      color: CanvasText;
+    }
+  }
+`;
+function d(h) {
+  return h.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function x(h, t) {
+  const e = Number(h);
+  return Number.isFinite(e) ? e : t;
+}
+class y extends f {
+  constructor() {
+    super(), this._uid = `ui-textarea-${Math.random().toString(36).slice(2, 9)}`, this._textarea = null, this._clearBtn = null, this._countEl = null, this._debounceTimer = null, this._formUnregister = null, this._onInput = this._onInput.bind(this), this._onChange = this._onChange.bind(this), this._onClear = this._onClear.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "placeholder",
+      "disabled",
+      "clearable",
+      "size",
+      "validation",
+      "debounce",
+      "maxlength",
+      "minlength",
+      "rows",
+      "readonly",
+      "autofocus",
+      "resize",
+      "name",
+      "required",
+      "variant",
+      "color",
+      "radius",
+      "label",
+      "description",
+      "autosize",
+      "max-rows",
+      "show-count",
+      "density",
+      "tone",
+      "headless",
+      "data-error"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._tryRegisterWithForm();
+  }
+  disconnectedCallback() {
+    this._detachListeners(), this._debounceTimer && (clearTimeout(this._debounceTimer), this._debounceTimer = null), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e === i)
+      return;
+    if (t === "name" && this._tryRegisterWithForm(), t === "value" && this._textarea) {
+      const r = i || "";
+      this._textarea.value !== r && (this._textarea.value = r), this._syncDynamicUi(), this._applyAutosize();
+      return;
+    }
+    if ((/* @__PURE__ */ new Set([
+      "placeholder",
+      "disabled",
+      "maxlength",
+      "minlength",
+      "rows",
+      "readonly",
+      "required",
+      "resize",
+      "name",
+      "validation",
+      "show-count",
+      "clearable",
+      "autosize",
+      "max-rows",
+      "variant",
+      "size",
+      "density",
+      "tone",
+      "headless",
+      "color",
+      "radius",
+      "autofocus"
+    ])).has(t)) {
+      this._syncControlAttrs(), this._syncDynamicUi(), this._applyAutosize(), t === "autofocus" && this.hasAttribute("autofocus") && queueMicrotask(() => {
+        var r;
+        (r = this._textarea) == null || r.focus();
+      });
+      return;
+    }
+    this.isConnected && this.requestRender();
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t || "");
+  }
+  _tryRegisterWithForm() {
+    var t;
+    try {
+      const e = (t = this.closest) == null ? void 0 : t.call(this, "ui-form"), i = this.getAttribute("name");
+      if (!e || typeof e.registerField != "function" || !i)
+        return;
+      this._formUnregister = e.registerField(i, {
+        name: i,
+        getValue: () => this.value,
+        setValue: (a) => {
+          this.value = a;
+        },
+        validate: async () => this._textarea ? { valid: this._textarea.checkValidity(), message: this._textarea.validationMessage || void 0 } : { valid: !0 },
+        setError: (a) => {
+          a ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", a)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
+        }
+      });
+    } catch {
+    }
+  }
+  _detachListeners() {
+    this._textarea && (this._textarea.removeEventListener("input", this._onInput), this._textarea.removeEventListener("change", this._onChange)), this._clearBtn && this._clearBtn.removeEventListener("click", this._onClear), this._clearBtn = null;
+  }
+  _syncControlAttrs() {
+    if (!this._textarea)
+      return;
+    const t = this.getAttribute("placeholder") || "", e = this.getAttribute("maxlength"), i = this.getAttribute("minlength"), a = x(this.getAttribute("rows"), 4), r = this.hasAttribute("disabled"), c = this.hasAttribute("readonly"), n = this.hasAttribute("required"), o = this.getAttribute("name") || "", s = this.getAttribute("resize") || "vertical", p = this.getAttribute("validation"), b = this.getAttribute("color"), l = this.getAttribute("radius");
+    this._textarea.placeholder = t, this._textarea.disabled = r, this._textarea.readOnly = c, this._textarea.required = n, this._textarea.rows = Math.max(1, a), this._textarea.name = o, this._textarea.style.resize = s, e && Number.isFinite(Number(e)) ? this._textarea.maxLength = Number(e) : this._textarea.removeAttribute("maxlength"), i && Number.isFinite(Number(i)) ? this._textarea.minLength = Number(i) : this._textarea.removeAttribute("minlength"), p === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), b ? this.style.setProperty("--ui-textarea-accent", b) : this.style.removeProperty("--ui-textarea-accent"), l && l !== "none" && l !== "large" && l !== "full" ? this.style.setProperty("--ui-textarea-radius", l) : this.style.removeProperty("--ui-textarea-radius");
+    const u = [], g = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), m = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
+    g && u.push(`${this._uid}-description`), m && u.push(`${this._uid}-error`), (this.hasAttribute("show-count") || this.hasAttribute("maxlength")) && u.push(`${this._uid}-count`), !!(this.getAttribute("label") || this.querySelector('[slot="label"]')) ? this._textarea.setAttribute("aria-labelledby", `${this._uid}-label`) : this._textarea.removeAttribute("aria-labelledby"), u.length ? this._textarea.setAttribute("aria-describedby", u.join(" ")) : this._textarea.removeAttribute("aria-describedby");
+  }
+  _syncDynamicUi() {
+    var a;
+    const t = ((a = this._textarea) == null ? void 0 : a.value) || this.getAttribute("value") || "", e = this.getAttribute("maxlength"), i = this.hasAttribute("clearable");
+    this._clearBtn && (i && t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", "")), this._countEl && (this.hasAttribute("show-count") || !!e ? (this._countEl.removeAttribute("hidden"), e && Number.isFinite(Number(e)) ? this._countEl.textContent = `${t.length} / ${Number(e)}` : this._countEl.textContent = `${t.length}`) : this._countEl.setAttribute("hidden", ""));
+  }
+  _applyAutosize() {
+    if (!this._textarea)
+      return;
+    if (!this.hasAttribute("autosize")) {
+      this._textarea.style.height = "", this._textarea.style.overflowY = "";
+      return;
+    }
+    this._textarea.style.height = "auto";
+    const t = this._textarea.scrollHeight, e = x(this.getAttribute("max-rows"), 0);
+    if (e > 0) {
+      const i = getComputedStyle(this._textarea), a = parseFloat(i.lineHeight || "20") || 20, r = parseFloat(i.borderTopWidth || "0") || 0, c = parseFloat(i.borderBottomWidth || "0") || 0, n = parseFloat(i.paddingTop || "0") || 0, o = parseFloat(i.paddingBottom || "0") || 0, s = a * e + r + c + n + o;
+      this._textarea.style.height = `${Math.min(t, s)}px`, this._textarea.style.overflowY = t > s ? "auto" : "hidden";
+      return;
+    }
+    this._textarea.style.height = `${t}px`, this._textarea.style.overflowY = "hidden";
+  }
+  _emit(t, e) {
+    this.dispatchEvent(
+      new CustomEvent(t, {
+        detail: {
+          value: e,
+          length: e.length,
+          name: this.getAttribute("name") || ""
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _onInput(t) {
+    const e = t.target.value;
+    this.getAttribute("value") !== e && this.setAttribute("value", e), this._syncDynamicUi(), this._applyAutosize(), this._emit("input", e);
+    const i = x(this.getAttribute("debounce"), 0);
+    i > 0 ? (this._debounceTimer && clearTimeout(this._debounceTimer), this._debounceTimer = setTimeout(() => {
+      this._emit("debounced-input", e), this._debounceTimer = null;
+    }, i)) : this._emit("debounced-input", e);
+  }
+  _onChange(t) {
+    const e = t.target.value;
+    this._emit("change", e);
+  }
+  _onClear(t) {
+    t.preventDefault(), !(this.hasAttribute("disabled") || this.hasAttribute("readonly")) && (this.value = "", this._textarea && (this._textarea.value = "", this._textarea.focus()), this._syncDynamicUi(), this._applyAutosize(), this._emit("input", ""), this._emit("change", ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })));
+  }
+  render() {
+    var o;
+    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", a = this.getAttribute("data-error") || "", r = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), n = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
+    this.setContent(`
+      <style>${_}</style>
+      <div class="shell" part="shell">
+        <div class="meta" part="meta" ${r ? "" : "hidden"}>
+          <label id="${this._uid}-label" class="label" part="label"><slot name="label">${d(e)}</slot></label>
+          <div id="${this._uid}-description" class="description" part="description"><slot name="description">${d(i)}</slot></div>
+        </div>
+
+        <div class="field" part="field">
+          <textarea part="textarea"></textarea>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${n ? "" : "hidden"}>${v}</button>
+        </div>
+
+        <div class="footer" part="footer">
+          <div id="${this._uid}-error" class="error" part="error"><slot name="error">${d(a)}</slot></div>
+          <div id="${this._uid}-count" class="count" part="count" hidden></div>
+        </div>
+      </div>
+    `), this._detachListeners(), this._textarea = this.root.querySelector("textarea"), this._clearBtn = this.root.querySelector(".clear-btn"), this._countEl = this.root.querySelector(".count"), this._textarea && (this._textarea.value = t, this._syncControlAttrs(), this._syncDynamicUi(), this._applyAutosize(), this._textarea.addEventListener("input", this._onInput), this._textarea.addEventListener("change", this._onChange), (o = this._clearBtn) == null || o.addEventListener("click", this._onClear), this.hasAttribute("autofocus") && queueMicrotask(() => {
+      var s;
+      (s = this._textarea) == null || s.focus();
+    }));
+  }
+  shouldRenderOnAttributeChange(t, e, i) {
+    return t === "label" || t === "description" || t === "data-error";
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-textarea") && customElements.define("ui-textarea", y);
+export {
+  y as UITextarea
+};

package/dist/time-field.cjs.js

@@ -0,0 +1,142 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-1b301e7f.js"),c=require("./date-time-utils-5cf58cd0.js");require("./calendar-a8735e40.js");require("./scroll-lock-48793569.js");let M=0;const C=`
+  :host {
+    --ui-time-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-time-field-border: 1px solid var(--ui-time-field-border-color);
+    --ui-time-field-radius: var(--ui-radius, 12px);
+    --ui-time-field-bg: var(--ui-color-surface, #ffffff);
+    --ui-time-field-text: var(--ui-color-text, #0f172a);
+    --ui-time-field-muted: var(--ui-color-muted, #64748b);
+    --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-time-field-danger: var(--ui-color-danger, #dc2626);
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--ui-time-field-text);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color-scheme: light dark;
+  }
+
+  .root {
+    display: grid;
+    gap: 8px;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-time-field-muted);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", sans-serif;
+  }
+
+  .required {
+    color: var(--ui-time-field-danger);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-time-field-muted);
+  }
+
+  .error {
+    color: var(--ui-time-field-danger);
+  }
+
+  .shell {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-block-size: 44px;
+    padding: 0 10px;
+    border: var(--ui-time-field-border);
+    border-radius: var(--ui-time-field-radius);
+    background: var(--ui-time-field-bg);
+    transition: border-color 160ms ease, box-shadow 160ms ease;
+    box-sizing: border-box;
+  }
+
+  .shell[data-focused="true"] {
+    border-color: color-mix(in srgb, var(--ui-time-field-focus) 58%, var(--ui-time-field-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-time-field-focus) 22%, transparent);
+  }
+
+  .shell[data-invalid="true"] {
+    border-color: color-mix(in srgb, var(--ui-time-field-danger) 62%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-time-field-danger) 18%, transparent);
+  }
+
+  .segment {
+    border: none;
+    background: transparent;
+    color: inherit;
+    min-inline-size: 0;
+    padding: 6px 4px;
+    border-radius: 8px;
+    font: 600 15px/1.2 "Inter", "IBM Plex Sans", sans-serif;
+    cursor: pointer;
+    transition: background-color 120ms ease, color 120ms ease;
+    text-transform: uppercase;
+  }
+
+  .segment[data-empty="true"] {
+    color: color-mix(in srgb, var(--ui-time-field-text) 38%, transparent);
+  }
+
+  .segment[data-active="true"] {
+    background: color-mix(in srgb, var(--ui-time-field-focus) 16%, transparent);
+  }
+
+  .segment:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-time-field-focus) 56%, transparent);
+    outline-offset: 1px;
+  }
+
+  .literal {
+    color: color-mix(in srgb, var(--ui-time-field-text) 42%, transparent);
+    font: 600 14px/1 "Inter", "IBM Plex Sans", sans-serif;
+  }
+
+  .label[hidden],
+  .description[hidden],
+  .error[hidden],
+  .meta[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.68;
+  }
+
+  :host([disabled]) .segment,
+  :host([readonly]) .segment {
+    cursor: default;
+  }
+`;function _(l,e){return c.parseTimeInput(l||"",!0)||null}function b(l){return{hour:l.hours%12||12,meridiem:l.hours>=12?"PM":"AM"}}function A(l,e){return e==="AM"?l===12?0:l:l===12?12:l+12}function I(l){return l==="meridiem"?"AM":l==="hour"?"HH":l==="minute"?"MM":"SS"}class p extends T.ElementBase{constructor(){super(),this._value=null,this._activeSegment="hour",this._segmentButtons=new Map,this._segmentsEl=null,this._shellEl=null,this._errorEl=null,this._formUnregister=null,this._bufferBySegment={hour:"",minute:"",second:""},this._bufferTimer=null,this._internals=null,this._uid=`ui-time-field-${++M}`,this._defaultValue=null;try{this._internals=typeof this.attachInternals=="function"?this.attachInternals():null}catch{this._internals=null}this._onSegmentKeyDown=this._onSegmentKeyDown.bind(this),this._onSegmentClick=this._onSegmentClick.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this)}static get observedAttributes(){return["value","min","max","format","seconds","label","description","data-error","required","disabled","readonly","name","locale"]}get value(){return this._value||""}set value(e){this._setValue(e||null,"api")}clearValue(){this._setValue(null,"clear")}formResetCallback(){this._setValue(this._defaultValue,"form")}connectedCallback(){super.connectedCallback(),this._defaultValue==null&&(this._defaultValue=this.getAttribute("value")),this._registerWithForm()}disconnectedCallback(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._bufferTimer!=null&&(window.clearTimeout(this._bufferTimer),this._bufferTimer=null),super.disconnectedCallback()}attributeChangedCallback(e,i,t){i!==t&&(e==="value"&&(this._value=this._normalizeTimeValue(t)),e==="name"&&this.isConnected&&this._registerWithForm(),this._shellEl&&this._syncUi())}shouldRenderOnAttributeChange(){return!1}render(){var e,i;this.setContent(`
+      <style>${C}</style>
+      <div class="root">
+        <div class="meta" hidden>
+          <div class="label" hidden><span class="label-text"></span><span class="required" hidden>*</span></div>
+          <div class="description" hidden></div>
+        </div>
+        <div class="shell" part="shell" data-focused="false" data-invalid="false">
+          <div class="segments" part="segments"></div>
+        </div>
+        <div class="error" part="error" hidden></div>
+      </div>
+    `),this._segmentsEl=this.root.querySelector(".segments"),this._shellEl=this.root.querySelector(".shell"),this._errorEl=this.root.querySelector(".error"),(e=this._shellEl)==null||e.addEventListener("focusin",this._onFocusIn),(i=this._shellEl)==null||i.addEventListener("focusout",this._onFocusOut),this._value=this._normalizeTimeValue(this.getAttribute("value")),this._syncFormValue(),this._syncUi()}_showSeconds(){return this.hasAttribute("seconds")}_is12h(){return(this.getAttribute("format")||"").toLowerCase()==="12h"}_normalizeTimeValue(e){const i=c.parseTimeInput(e||"",!0);if(!i)return null;const t=c.formatTime(i,this._showSeconds()),r=this.getAttribute("min"),s=this.getAttribute("max");return c.clampTime(t,r,s)}_partsOrFallback(){return _(this._value,this._showSeconds())||_(this.getAttribute("min"),this._showSeconds())||{hours:9,minutes:0,seconds:0}}_order(){const e=["hour","minute"];return this._showSeconds()&&e.push("second"),this._is12h()&&e.push("meridiem"),e}_focusSegment(e){var i;this._activeSegment=e,this._syncUi(),(i=this._segmentButtons.get(e))==null||i.focus()}_moveSegmentFocus(e){const i=this._order(),t=i.indexOf(this._activeSegment),r=i[(t+e+i.length)%i.length];this._focusSegment(r)}_setBuffer(e,i){this._bufferBySegment[e]=i,this._bufferTimer!=null&&window.clearTimeout(this._bufferTimer),this._bufferTimer=window.setTimeout(()=>{this._bufferBySegment.hour="",this._bufferBySegment.minute="",this._bufferBySegment.second="",this._bufferTimer=null},900)}_applyParts(e,i){const t=this._normalizeTimeValue(c.formatTime(e,this._showSeconds()));this._setValue(t,i)}_setValue(e,i){const t=this._normalizeTimeValue(e);if(t===this._value){this._syncFormValue(),this._syncUi();return}const r=this._value;this._value=t,t?this.setAttribute("value",t):this.removeAttribute("value"),this._syncFormValue(),this._syncUi(),this.dispatchEvent(new CustomEvent("change",{detail:{value:t,previousValue:r,source:i},bubbles:!0,composed:!0}))}_syncFormValue(){var e;try{(e=this._internals)==null||e.setFormValue(this.value||"")}catch{}}_increment(e,i){const t=this._partsOrFallback();if(e==="meridiem"){t.hours=(t.hours+12)%24,this._applyParts(t,"keyboard");return}const u=(t.hours*3600+t.minutes*60+t.seconds+i*(e==="hour"?3600:e==="minute"?60:1)+86400)%86400,a={hours:Math.floor(u/3600),minutes:Math.floor(u%3600/60),seconds:u%60};this._applyParts(a,"keyboard")}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(-2);if(this._setBuffer(e,t),t.length<2)return;const r=this._partsOrFallback(),s=Number(t);if(Number.isFinite(s)){if(e==="hour")if(this._is12h()){const{meridiem:u}=b(r),a=Math.min(Math.max(s,1),12);r.hours=A(a,u)}else r.hours=Math.min(Math.max(s,0),23);else e==="minute"?r.minutes=Math.min(Math.max(s,0),59):r.seconds=Math.min(Math.max(s,0),59);this._applyParts(r,"keyboard"),this._moveSegmentFocus(1)}}_onSegmentClick(e){const i=e.currentTarget.getAttribute("data-segment");i&&this._focusSegment(i)}_onSegmentKeyDown(e){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const i=e.currentTarget.getAttribute("data-segment");if(i){if(e.key==="ArrowLeft"){e.preventDefault(),this._moveSegmentFocus(-1);return}if(e.key==="ArrowRight"){e.preventDefault(),this._moveSegmentFocus(1);return}if(e.key==="ArrowUp"||e.key==="ArrowDown"){e.preventDefault(),this._increment(i,e.key==="ArrowUp"?1:-1);return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),this.clearValue();return}if(i==="meridiem"&&/^[ap]$/i.test(e.key)){e.preventDefault();const t=this._partsOrFallback(),r=e.key.toLowerCase()==="a"?"AM":"PM",s=b(t).hour;t.hours=A(s,r),this._applyParts(t,"keyboard");return}/^\d$/.test(e.key)&&i!=="meridiem"&&(e.preventDefault(),this._applyNumericInput(i,e.key))}}_registerWithForm(){var e;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const t=this.getRootNode().host,s=((e=t==null?void 0:t.closest)==null?void 0:e.call(t,"ui-form"))||null||this.closest("ui-form"),u=this.getAttribute("name");s&&typeof s.registerField=="function"&&u&&(this._formUnregister=s.registerField(u,{name:u,getValue:()=>this.value,setValue:a=>this._setValue(a?String(a):null,"form"),validate:async()=>this.hasAttribute("required")&&!this.value?{valid:!1,message:"Time is required"}:{valid:!0},setError:a=>{a?this.setAttribute("data-error",a):this.removeAttribute("data-error"),this._syncUi()}}))}catch{}}_onFocusIn(){var e;(e=this._shellEl)==null||e.setAttribute("data-focused","true")}_onFocusOut(e){var i,t;(i=this._shellEl)!=null&&i.contains(e.relatedTarget)||(t=this._shellEl)==null||t.setAttribute("data-focused","false")}_syncUi(){if(!this._segmentsEl||!this._shellEl||!this._errorEl)return;const e=this.root.activeElement,i=!!e&&this._segmentsEl.contains(e),t=(this.getAttribute("label")||"").trim(),r=(this.getAttribute("description")||"").trim(),s=(this.getAttribute("data-error")||"").trim(),u=this.root.querySelector(".meta"),a=this.root.querySelector(".label"),E=this.root.querySelector(".label-text"),k=this.root.querySelector(".required"),m=this.root.querySelector(".description"),g=`${this._uid}-label`,y=`${this._uid}-description`,v=`${this._uid}-error`;u.hidden=!t&&!r,a.hidden=!t,a.id=t?g:"",E.textContent=t,k.hidden=!this.hasAttribute("required"),m.hidden=!r,m.id=r?y:"",m.textContent=r,this._errorEl.hidden=!s,this._errorEl.id=s?v:"",this._errorEl.textContent=s,this._shellEl.setAttribute("data-invalid",s?"true":"false"),this._shellEl.setAttribute("role","group"),t?this._shellEl.setAttribute("aria-labelledby",g):this._shellEl.removeAttribute("aria-labelledby");const x=[r?y:null,s?v:null].filter(Boolean).join(" ");x?this._shellEl.setAttribute("aria-describedby",x):this._shellEl.removeAttribute("aria-describedby"),this._shellEl.setAttribute("aria-invalid",s?"true":"false"),this._shellEl.setAttribute("aria-required",this.hasAttribute("required")?"true":"false"),this._shellEl.setAttribute("aria-disabled",this.hasAttribute("disabled")?"true":"false"),this._shellEl.setAttribute("aria-readonly",this.hasAttribute("readonly")?"true":"false");const d=_(this._value,this._showSeconds()),w=this._order(),f=[];this._segmentButtons.clear();const S=d?b(d):null;if(w.forEach((n,F)=>{if(F>0){const h=document.createElement("span");h.className="literal",h.textContent=n==="meridiem"?" ":":",f.push(h)}const o=document.createElement("button");if(o.type="button",o.className="segment",o.setAttribute("data-segment",n),o.setAttribute("data-active",this._activeSegment===n?"true":"false"),o.setAttribute("data-empty",d?"false":"true"),o.setAttribute("aria-label",n==="hour"?"Hour":n==="minute"?"Minute":n==="second"?"Second":"AM or PM"),o.tabIndex=this._activeSegment===n?0:-1,o.disabled=this.hasAttribute("disabled"),o.addEventListener("click",this._onSegmentClick),o.addEventListener("keydown",this._onSegmentKeyDown),!d)o.textContent=I(n);else if(n==="hour"){const h=this._is12h()?S.hour:d.hours;o.textContent=String(h).padStart(2,"0")}else n==="minute"?o.textContent=String(d.minutes).padStart(2,"0"):n==="second"?o.textContent=String(d.seconds).padStart(2,"0"):o.textContent=S.meridiem;this._segmentButtons.set(n,o),f.push(o)}),this._segmentsEl.replaceChildren(...f),i){const n=this._segmentButtons.get(this._activeSegment);try{n==null||n.focus({preventScroll:!0})}catch{n==null||n.focus()}}}}p.formAssociated=!0;typeof customElements<"u"&&!customElements.get("ui-time-field")&&customElements.define("ui-time-field",p);exports.UITimeField=p;