@editora/ui-core 0.1.25 → 0.2.1

package/dist/textarea.esm.js

@@ -1,22 +1,23 @@
 import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
 import { s as y, a as A } from "./control-name-Bpj7F34X.mjs";
-const z = `
+const w = `
   <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>
-`, w = `
+`, z = `
   :host {
-    --ui-textarea-bg: var(--ui-color-surface, #ffffff);
+    --ui-textarea-bg: var(--base-input-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-textarea-text: var(--ui-color-text, #0f172a);
     --ui-textarea-muted: var(--ui-color-muted, #526175);
-    --ui-textarea-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-textarea-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --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, #15803d);
-    --ui-textarea-radius: 12px;
-    --ui-textarea-padding-x: 12px;
-    --ui-textarea-padding-y: 10px;
+    --ui-textarea-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    --ui-textarea-success: var(--ui-color-success-text, var(--ui-color-success, #15803d));
+    --ui-textarea-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-textarea-padding-y: 6px;
+    --ui-textarea-font-size: var(--ui-control-font-size-2, 14px);
     --ui-textarea-min-height: 110px;
     --ui-textarea-shadow: none;
 
@@ -71,10 +72,14 @@ const z = `
   }
 
   .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);
+    border-color: var(--ui-ring-color, var(--ui-textarea-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-textarea-focus));
+    outline-offset: -1px;
+    box-shadow: var(--ui-textarea-shadow);
+  }
+
+  .field:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-textarea-border));
   }
 
   textarea {
@@ -87,13 +92,13 @@ const z = `
     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;
+    font: 500 var(--ui-textarea-font-size)/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);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-textarea-muted) 90%, transparent));
   }
 
   textarea[readonly] {
@@ -170,26 +175,20 @@ const z = `
 
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-textarea-padding-x: 10px;
-    --ui-textarea-padding-y: 8px;
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-textarea-padding-y: 4px;
     --ui-textarea-min-height: 84px;
-  }
-
-  :host([size="sm"]) textarea,
-  :host([size="1"]) textarea {
-    font-size: 13px;
+    --ui-textarea-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-textarea-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-textarea-padding-x: 14px;
-    --ui-textarea-padding-y: 12px;
+    --ui-textarea-padding-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-textarea-padding-y: 8px;
     --ui-textarea-min-height: 140px;
-  }
-
-  :host([size="lg"]) textarea,
-  :host([size="3"]) textarea {
-    font-size: 15px;
+    --ui-textarea-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-textarea-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([density="compact"]) {
@@ -244,7 +243,7 @@ const z = `
 
   :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);
+    box-shadow: 0 0 0 1px var(--ui-textarea-danger);
   }
 
   :host([validation="success"]) .field {
@@ -311,17 +310,17 @@ const z = `
     }
   }
 `;
-function x(r) {
-  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function x(a) {
+  return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function b(r, t) {
-  const e = Number(r);
+function b(a, t) {
+  const e = Number(a);
   return Number.isFinite(e) ? e : t;
 }
 const C = 2147483647;
-function c(r) {
-  if (!r) return null;
-  const t = Number(r);
+function d(a) {
+  if (!a) return null;
+  const t = Number(a);
   return !Number.isFinite(t) || t < 0 || t > C ? null : Math.trunc(t);
 }
 class k extends _ {
@@ -371,8 +370,8 @@ class k extends _ {
   attributeChangedCallback(t, e, i) {
     if (e === i) return;
     if (t === "name" && this._tryRegisterWithForm(), t === "value" && this._textarea) {
-      const a = i || "";
-      this._textarea.value !== a && (this._textarea.value = a), this._syncDynamicUi(), this._applyAutosize();
+      const r = i || "";
+      this._textarea.value !== r && (this._textarea.value = r), this._syncDynamicUi(), this._applyAutosize();
       return;
     }
     if ((/* @__PURE__ */ new Set([
@@ -438,15 +437,15 @@ class k extends _ {
   }
   _syncControlAttrs() {
     if (!this._textarea) return;
-    const t = this.getAttribute("placeholder") || "", e = c(this.getAttribute("maxlength")), i = c(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), a = this.hasAttribute("disabled"), l = this.hasAttribute("readonly"), o = this.hasAttribute("required"), d = this.getAttribute("name") || "", u = this.getAttribute("resize") || "vertical", g = this.getAttribute("validation"), p = this.getAttribute("color"), n = this.getAttribute("radius");
-    this._textarea.placeholder = t, this._textarea.disabled = a, this._textarea.readOnly = l, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = d, this._textarea.style.resize = u, e !== null ? this._textarea.maxLength = e : this._textarea.removeAttribute("maxlength"), i !== null ? this._textarea.minLength = i : this._textarea.removeAttribute("minlength"), g === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), p ? this.style.setProperty("--ui-textarea-accent", p) : this.style.removeProperty("--ui-textarea-accent"), n && n !== "none" && n !== "large" && n !== "full" ? this.style.setProperty("--ui-textarea-radius", n) : this.style.removeProperty("--ui-textarea-radius");
-    const h = [], m = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
-    m && h.push(`${this._uid}-description`), f && h.push(`${this._uid}-error`), (this.hasAttribute("show-count") || c(this.getAttribute("maxlength")) !== null) && h.push(`${this._uid}-count`);
-    const v = !!(this.getAttribute("label") || this.querySelector('[slot="label"]'));
-    y(this._textarea, this, v ? `${this._uid}-label` : null), A(this._textarea, this, this._uid, h);
+    const t = this.getAttribute("placeholder") || "", e = d(this.getAttribute("maxlength")), i = d(this.getAttribute("minlength")), s = b(this.getAttribute("rows"), 4), r = this.hasAttribute("disabled"), l = this.hasAttribute("readonly"), o = this.hasAttribute("required"), h = this.getAttribute("name") || "", u = this.getAttribute("resize") || "vertical", g = this.getAttribute("validation"), p = this.getAttribute("color"), n = this.getAttribute("radius");
+    this._textarea.placeholder = t, this._textarea.disabled = r, this._textarea.readOnly = l, this._textarea.required = o, this._textarea.rows = Math.max(1, s), this._textarea.name = h, this._textarea.style.resize = u, e !== null ? this._textarea.maxLength = e : this._textarea.removeAttribute("maxlength"), i !== null ? this._textarea.minLength = i : this._textarea.removeAttribute("minlength"), g === "error" ? this._textarea.setAttribute("aria-invalid", "true") : this._textarea.removeAttribute("aria-invalid"), p ? this.style.setProperty("--ui-textarea-accent", p) : this.style.removeProperty("--ui-textarea-accent"), n && n !== "none" && n !== "large" && n !== "full" ? this.style.setProperty("--ui-textarea-radius", n) : this.style.removeProperty("--ui-textarea-radius");
+    const c = [], v = !!(this.getAttribute("description") || this.querySelector('[slot="description"]')), f = !!(this.getAttribute("data-error") || this.querySelector('[slot="error"]'));
+    v && c.push(`${this._uid}-description`), f && c.push(`${this._uid}-error`), (this.hasAttribute("show-count") || d(this.getAttribute("maxlength")) !== null) && c.push(`${this._uid}-count`);
+    const m = !!(this.getAttribute("label") || this.querySelector('[slot="label"]'));
+    y(this._textarea, this, m ? `${this._uid}-label` : null), A(this._textarea, this, this._uid, c);
   }
   _syncDynamicUi() {
-    const t = this._textarea?.value || this.getAttribute("value") || "", e = c(this.getAttribute("maxlength")), i = this.hasAttribute("clearable");
+    const t = this._textarea?.value || this.getAttribute("value") || "", e = d(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 !== null ? (this._countEl.removeAttribute("hidden"), e !== null ? this._countEl.textContent = `${t.length} / ${e}` : this._countEl.textContent = `${t.length}`) : this._countEl.setAttribute("hidden", ""));
   }
   _applyAutosize() {
@@ -458,7 +457,7 @@ class k extends _ {
     this._textarea.style.height = "auto";
     const t = this._textarea.scrollHeight, e = b(this.getAttribute("max-rows"), 0);
     if (e > 0) {
-      const i = getComputedStyle(this._textarea), s = parseFloat(i.lineHeight || "20") || 20, a = parseFloat(i.borderTopWidth || "0") || 0, l = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, d = parseFloat(i.paddingBottom || "0") || 0, u = s * e + a + l + o + d;
+      const i = getComputedStyle(this._textarea), s = parseFloat(i.lineHeight || "20") || 20, r = parseFloat(i.borderTopWidth || "0") || 0, l = parseFloat(i.borderBottomWidth || "0") || 0, o = parseFloat(i.paddingTop || "0") || 0, h = parseFloat(i.paddingBottom || "0") || 0, u = s * e + r + l + o + h;
       this._textarea.style.height = `${Math.min(t, u)}px`, this._textarea.style.overflowY = t > u ? "auto" : "hidden";
       return;
     }
@@ -493,18 +492,18 @@ class k extends _ {
     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() {
-    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", s = this.getAttribute("data-error") || "", a = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), o = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
+    const t = this.getAttribute("value") || "", e = this.getAttribute("label") || "", i = this.getAttribute("description") || "", s = this.getAttribute("data-error") || "", r = !!(e || i || this.querySelector('[slot="label"]') || this.querySelector('[slot="description"]')), o = this.hasAttribute("clearable") && !!t && !this.hasAttribute("disabled") && !this.hasAttribute("readonly");
     this.setContent(`
-      <style>${w}</style>
+      <style>${z}</style>
       <div class="shell" part="shell">
-        <div class="meta" part="meta" ${a ? "" : "hidden"}>
+        <div class="meta" part="meta" ${r ? "" : "hidden"}>
           <label id="${this._uid}-label" class="label" part="label"><slot name="label">${x(e)}</slot></label>
           <div id="${this._uid}-description" class="description" part="description"><slot name="description">${x(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" ${o ? "" : "hidden"}>${z}</button>
+          <button type="button" part="clear" class="clear-btn" aria-label="Clear text" ${o ? "" : "hidden"}>${w}</button>
         </div>
 
         <div class="footer" part="footer">

package/dist/theme.d.ts

@@ -24,6 +24,7 @@ export interface ThemeTokens {
         success?: string;
         danger?: string;
         warning?: string;
+        info?: string;
     };
     palette?: {
         gray?: ThemeScale;
@@ -122,6 +123,7 @@ export interface ThemeTokens {
         sm?: string;
         md?: string;
         lg?: string;
+        xl?: string;
     };
 }
 export declare const baselineAccentPalettes: Record<AccentPaletteName, Record<ThemeMode, AccentPaletteTokens>>;
@@ -152,6 +154,28 @@ export declare function createThemeTokens(overrides?: Partial<ThemeTokens>, opti
 }): ThemeTokens;
 export declare function withAccentPalette(tokens: ThemeTokens | Partial<ThemeTokens>, palette: AccentPaletteName, mode?: ThemeMode): ThemeTokens;
 export declare function registerThemeHost(el: HTMLElement): void;
-export declare function applyTheme(tokens: ThemeTokens, root?: ShadowRoot | Document | HTMLElement | null): void;
+/**
+ * Every CSS custom property a theme defines, as a name -> value map: the single source for
+ * `applyTheme` (inline style), `themeToCss` (a stylesheet, e.g. for SSR) and the tests.
+ */
+export declare function themeToVariables(tokens: ThemeTokens): Record<string, string>;
+/** The theme as CSS text, e.g. `themeToCss(tokens, ':root')`, for a static or server-rendered stylesheet. */
+export declare function themeToCss(tokens: ThemeTokens, selector?: string): string;
+type ThemeRoot = ShadowRoot | Document | HTMLElement | null;
+export declare function applyTheme(tokens: ThemeTokens, root?: ThemeRoot): void;
+export interface SystemThemeOptions {
+    /** Token overrides applied on top of the light baseline. */
+    light?: Partial<ThemeTokens>;
+    /** Token overrides applied on top of the dark baseline. */
+    dark?: Partial<ThemeTokens>;
+    accentPalette?: AccentPaletteName;
+    root?: ThemeRoot;
+}
+/**
+ * Apply the light or the dark theme to match the operating system, and keep following it
+ * while the user changes it. The resolved mode is mirrored as `data-ui-mode` and `color-scheme`
+ * on the target, so page CSS can follow it too. Returns a function that stops following.
+ */
+export declare function applySystemTheme(options?: SystemThemeOptions): () => void;
 export {};
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,UAAU,CAAC;QAClB,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,OAAO,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE;YAAE,EAAE,CAAC,EAAE,MAAM,CAAC;YAAC,EAAE,CAAC,EAAE,MAAM,CAAC;YAAC,EAAE,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACjD,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,aAAa,CAAC,EAAE,UAAU,CAAC;KAC5B,CAAC;IACF,MAAM,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnG,OAAO,CAAC,EAAE;QAAE,mBAAmB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,UAAU,CAAC,EAAE;QACX,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,aAAa,CAAC,EAAE,UAAU,CAAC;QAC3B,GAAG,CAAC,EAAE,UAAU,CAAC;QACjB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,QAAQ,CAAC,EAAE,UAAU,CAAC;QACtB,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,OAAO,CAAC,EAAE,UAAU,CAAC;QACrB,IAAI,CAAC,EAAE,UAAU,CAAC;QAClB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,cAAc,CAAC,EAAE,UAAU,CAAC;QAC5B,OAAO,CAAC,EAAE,UAAU,CAAC;QACrB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,IAAI,CAAC,EAAE,UAAU,CAAC;QAClB,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,KAAK,CAAC,EAAE,UAAU,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,WAAW,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;AAgCD,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,mBAAmB,CAAC,CA+VpG,CAAC;AA8mBF;;;;GAIG;AACH;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,EAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAC1B;IAAE,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAAE,CAYlC;AAED,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAMhF;AAYD,eAAO,MAAM,mBAAmB,EAAE,WAgKjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,WAiFhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAAiC,CAAC;AAY9D,wBAAgB,mBAAmB,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAe1G;AAED,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EAAE;IAAE,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,WAAW,CA+GlJ;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,GAAE,SAAmB,GAAG,WAAW,CAsBhJ;AAmBD,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,WAAW,QAGhD;AAmHD,wBAAgB,UAAU,CACxB,MAAM,EAAE,WAAW,EACnB,IAAI,GAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAwD,QA0BrG"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/time-field.cjs.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("./ElementBase-DxbvhLJs.js"),E=require("./control-name-BmoI1m3a.js"),c=require("./date-time-utils-y3AvNvGe.js");let V=0;const I=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("./ElementBase-DxbvhLJs.js"),E=require("./control-name-BmoI1m3a.js"),c=require("./date-time-utils-C-4eHTyy.js");let V=0;const I=`
   :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-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-time-field-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-time-field-text: var(--ui-color-text, #0f172a);
     --ui-time-field-muted: var(--ui-color-muted, #526175);
     --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-time-field-danger: var(--ui-color-danger, #dc2626);
+    --ui-time-field-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     display: block;
     inline-size: 100%;
     min-inline-size: 0;
@@ -62,7 +62,7 @@
     align-items: center;
     flex-wrap: wrap;
     gap: 4px;
-    min-block-size: 44px;
+    min-block-size: var(--ui-control-height-2, 32px);
     padding: 0 10px;
     border: var(--ui-time-field-border);
     border-radius: var(--ui-time-field-radius);
@@ -73,12 +73,12 @@
 
   .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);
+    box-shadow: 0 0 0 2px var(--ui-ring-color, var(--ui-time-field-focus));
   }
 
   .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);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-time-field-danger) 45%, transparent);
   }
 
   .segment {
@@ -139,4 +139,4 @@
         </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"),this._shellEl?.addEventListener("focusin",this._onFocusIn),this._shellEl?.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||"");if(!i)return null;const t=c.formatTime(i,this._showSeconds()),s=this.getAttribute("min"),r=this.getAttribute("max");return c.clampTime(t,s,r)}_partsOrFallback(){return b(this._value,this._showSeconds())||b(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){this._activeSegment=e,this._syncUi(),this._segmentButtons.get(e)?.focus()}_moveSegmentFocus(e){const i=this._order(),t=i.indexOf(this._activeSegment),s=i[(t+e+i.length)%i.length];this._focusSegment(s)}_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 s=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:s,source:i},bubbles:!0,composed:!0}))}_syncFormValue(){try{this._internals?.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 a=(t.hours*3600+t.minutes*60+t.seconds+i*(e==="hour"?3600:e==="minute"?60:1)+86400)%86400,d={hours:Math.floor(a/3600),minutes:Math.floor(a%3600/60),seconds:a%60};this._applyParts(d,"keyboard")}_applyNumericInput(e,i){const t=`${this._bufferBySegment[e]}${i}`.slice(-2);if(this._setBuffer(e,t),t.length<2)return;const s=this._partsOrFallback(),r=Number(t);if(Number.isFinite(r)){if(e==="hour")if(this._is12h()){const{meridiem:a}=p(s),d=Math.min(Math.max(r,1),12);s.hours=k(d,a)}else s.hours=Math.min(Math.max(r,0),23);else e==="minute"?s.minutes=Math.min(Math.max(r,0),59):s.seconds=Math.min(Math.max(r,0),59);this._applyParts(s,"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(),s=e.key.toLowerCase()==="a"?"AM":"PM",r=p(t).hour;t.hours=k(r,s),this._applyParts(t,"keyboard");return}/^\d$/.test(e.key)&&i!=="meridiem"&&(e.preventDefault(),this._applyNumericInput(i,e.key))}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const s=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),r=this.getAttribute("name");s&&typeof s.registerField=="function"&&r&&(this._formUnregister=s.registerField(r,{name:r,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(){this._shellEl?.setAttribute("data-focused","true")}_onFocusOut(e){this._shellEl?.contains(e.relatedTarget)||this._shellEl?.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(),s=(this.getAttribute("description")||"").trim(),r=(this.getAttribute("data-error")||"").trim(),a=this.root.querySelector(".meta"),d=this.root.querySelector(".label"),w=this.root.querySelector(".label-text"),F=this.root.querySelector(".required"),f=this.root.querySelector(".description"),v=`${this._uid}-label`,y=`${this._uid}-description`,x=`${this._uid}-error`;a.hidden=!t&&!s,d.hidden=!t,d.id=t?v:"",w.textContent=t,F.hidden=!this.hasAttribute("required"),f.hidden=!s,f.id=s?y:"",f.textContent=s,this._errorEl.hidden=!r,this._errorEl.id=r?x:"",this._errorEl.textContent=r,this._shellEl.setAttribute("data-invalid",r?"true":"false"),this._shellEl.setAttribute("role","group"),E.syncControlName(this._shellEl,this,t?v:null);const S=[s?y:null,r?x:null].filter(Boolean).join(" ");E.syncControlDescription(this._shellEl,this,this._uid,S?S.split(" "):[]),this._shellEl.setAttribute("aria-invalid",r?"true":"false"),this._shellEl.setAttribute("aria-required",this.hasAttribute("required")?"true":"false"),this._shellEl.setAttribute("aria-disabled",this.hasAttribute("disabled")?"true":"false"),this._shellEl.removeAttribute("aria-readonly");const u=b(this._value,this._showSeconds()),C=this._order(),_=[];this._segmentButtons.clear();const A=u?p(u):null;if(C.forEach((o,M)=>{if(M>0){const h=document.createElement("span");h.className="literal",h.textContent=o==="meridiem"?" ":":",_.push(h)}const n=document.createElement("button");n.type="button",n.className="segment",n.setAttribute("data-segment",o),n.setAttribute("data-active",this._activeSegment===o?"true":"false"),n.setAttribute("data-empty",u?"false":"true");const T=o==="hour"?"Hour":o==="minute"?"Minute":o==="second"?"Second":"AM or PM";if(n.tabIndex=this._activeSegment===o?0:-1,n.disabled=this.hasAttribute("disabled"),n.addEventListener("click",this._onSegmentClick),n.addEventListener("keydown",this._onSegmentKeyDown),!u)n.textContent=q(o);else if(o==="hour"){const h=this._is12h()?A.hour:u.hours;n.textContent=String(h).padStart(2,"0")}else o==="minute"?n.textContent=String(u.minutes).padStart(2,"0"):o==="second"?n.textContent=String(u.seconds).padStart(2,"0"):n.textContent=A.meridiem;n.setAttribute("aria-label",`${T} ${n.textContent||""}`.trim()),this._segmentButtons.set(o,n),_.push(n)}),this._segmentsEl.replaceChildren(..._),i){const o=this._segmentButtons.get(this._activeSegment);try{o?.focus({preventScroll:!0})}catch{o?.focus()}}}};g.formAssociated=!0;let m=g;typeof customElements<"u"&&!customElements.get("ui-time-field")&&customElements.define("ui-time-field",m);exports.UITimeField=m;
+    `),this._segmentsEl=this.root.querySelector(".segments"),this._shellEl=this.root.querySelector(".shell"),this._errorEl=this.root.querySelector(".error"),this._shellEl?.addEventListener("focusin",this._onFocusIn),this._shellEl?.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||"");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 b(this._value,this._showSeconds())||b(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){this._activeSegment=e,this._syncUi(),this._segmentButtons.get(e)?.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(){try{this._internals?.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 a=(t.hours*3600+t.minutes*60+t.seconds+i*(e==="hour"?3600:e==="minute"?60:1)+86400)%86400,d={hours:Math.floor(a/3600),minutes:Math.floor(a%3600/60),seconds:a%60};this._applyParts(d,"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:a}=p(r),d=Math.min(Math.max(s,1),12);r.hours=k(d,a)}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=p(t).hour;t.hours=k(s,r),this._applyParts(t,"keyboard");return}/^\d$/.test(e.key)&&i!=="meridiem"&&(e.preventDefault(),this._applyNumericInput(i,e.key))}}_registerWithForm(){this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const r=this.getRootNode().host?.closest?.("ui-form")||null||this.closest("ui-form"),s=this.getAttribute("name");r&&typeof r.registerField=="function"&&s&&(this._formUnregister=r.registerField(s,{name:s,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(){this._shellEl?.setAttribute("data-focused","true")}_onFocusOut(e){this._shellEl?.contains(e.relatedTarget)||this._shellEl?.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(),a=this.root.querySelector(".meta"),d=this.root.querySelector(".label"),w=this.root.querySelector(".label-text"),F=this.root.querySelector(".required"),f=this.root.querySelector(".description"),v=`${this._uid}-label`,y=`${this._uid}-description`,x=`${this._uid}-error`;a.hidden=!t&&!r,d.hidden=!t,d.id=t?v:"",w.textContent=t,F.hidden=!this.hasAttribute("required"),f.hidden=!r,f.id=r?y:"",f.textContent=r,this._errorEl.hidden=!s,this._errorEl.id=s?x:"",this._errorEl.textContent=s,this._shellEl.setAttribute("data-invalid",s?"true":"false"),this._shellEl.setAttribute("role","group"),E.syncControlName(this._shellEl,this,t?v:null);const S=[r?y:null,s?x:null].filter(Boolean).join(" ");E.syncControlDescription(this._shellEl,this,this._uid,S?S.split(" "):[]),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.removeAttribute("aria-readonly");const u=b(this._value,this._showSeconds()),C=this._order(),_=[];this._segmentButtons.clear();const A=u?p(u):null;if(C.forEach((n,M)=>{if(M>0){const h=document.createElement("span");h.className="literal",h.textContent=n==="meridiem"?" ":":",_.push(h)}const o=document.createElement("button");o.type="button",o.className="segment",o.setAttribute("data-segment",n),o.setAttribute("data-active",this._activeSegment===n?"true":"false"),o.setAttribute("data-empty",u?"false":"true");const T=n==="hour"?"Hour":n==="minute"?"Minute":n==="second"?"Second":"AM or PM";if(o.tabIndex=this._activeSegment===n?0:-1,o.disabled=this.hasAttribute("disabled"),o.addEventListener("click",this._onSegmentClick),o.addEventListener("keydown",this._onSegmentKeyDown),!u)o.textContent=q(n);else if(n==="hour"){const h=this._is12h()?A.hour:u.hours;o.textContent=String(h).padStart(2,"0")}else n==="minute"?o.textContent=String(u.minutes).padStart(2,"0"):n==="second"?o.textContent=String(u.seconds).padStart(2,"0"):o.textContent=A.meridiem;o.setAttribute("aria-label",`${T} ${o.textContent||""}`.trim()),this._segmentButtons.set(n,o),_.push(o)}),this._segmentsEl.replaceChildren(..._),i){const n=this._segmentButtons.get(this._activeSegment);try{n?.focus({preventScroll:!0})}catch{n?.focus()}}}};g.formAssociated=!0;let m=g;typeof customElements<"u"&&!customElements.get("ui-time-field")&&customElements.define("ui-time-field",m);exports.UITimeField=m;

package/dist/time-field.esm.js

@@ -1,17 +1,17 @@
 import { E as B } from "./ElementBase-BeZT54Hj.mjs";
 import { s as T, a as I } from "./control-name-Bpj7F34X.mjs";
-import { q as k, u as A, v as q } from "./date-time-utils-BTlxnz5j.mjs";
+import { q as k, u as A, v as q } from "./date-time-utils-zAx4ghvC.mjs";
 let U = 0;
 const z = `
   :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-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-time-field-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-time-field-text: var(--ui-color-text, #0f172a);
     --ui-time-field-muted: var(--ui-color-muted, #526175);
     --ui-time-field-focus: var(--ui-color-focus-ring, #2563eb);
-    --ui-time-field-danger: var(--ui-color-danger, #dc2626);
+    --ui-time-field-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
     display: block;
     inline-size: 100%;
     min-inline-size: 0;
@@ -66,7 +66,7 @@ const z = `
     align-items: center;
     flex-wrap: wrap;
     gap: 4px;
-    min-block-size: 44px;
+    min-block-size: var(--ui-control-height-2, 32px);
     padding: 0 10px;
     border: var(--ui-time-field-border);
     border-radius: var(--ui-time-field-radius);
@@ -77,12 +77,12 @@ const z = `
 
   .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);
+    box-shadow: 0 0 0 2px var(--ui-ring-color, var(--ui-time-field-focus));
   }
 
   .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);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-time-field-danger) 45%, transparent);
   }
 
   .segment {
@@ -205,8 +205,8 @@ const p = class p extends B {
   _normalizeTimeValue(e) {
     const i = k(e || "");
     if (!i) return null;
-    const t = A(i, this._showSeconds()), s = this.getAttribute("min"), r = this.getAttribute("max");
-    return q(t, s, r);
+    const t = A(i, this._showSeconds()), r = this.getAttribute("min"), s = this.getAttribute("max");
+    return q(t, r, s);
   }
   _partsOrFallback() {
     return f(this._value, this._showSeconds()) || f(this.getAttribute("min"), this._showSeconds()) || { hours: 9, minutes: 0, seconds: 0 };
@@ -219,8 +219,8 @@ const p = class p extends B {
     this._activeSegment = e, this._syncUi(), this._segmentButtons.get(e)?.focus();
   }
   _moveSegmentFocus(e) {
-    const i = this._order(), t = i.indexOf(this._activeSegment), s = i[(t + e + i.length) % i.length];
-    this._focusSegment(s);
+    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(() => {
@@ -237,10 +237,10 @@ const p = class p extends B {
       this._syncFormValue(), this._syncUi();
       return;
     }
-    const s = this._value;
+    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: s, source: i },
+        detail: { value: t, previousValue: r, source: i },
         bubbles: !0,
         composed: !0
       })
@@ -268,16 +268,16 @@ const p = class p extends B {
   _applyNumericInput(e, i) {
     const t = `${this._bufferBySegment[e]}${i}`.slice(-2);
     if (this._setBuffer(e, t), t.length < 2) return;
-    const s = this._partsOrFallback(), r = Number(t);
-    if (Number.isFinite(r)) {
+    const r = this._partsOrFallback(), s = Number(t);
+    if (Number.isFinite(s)) {
       if (e === "hour")
         if (this._is12h()) {
-          const { meridiem: a } = _(s), h = Math.min(Math.max(r, 1), 12);
-          s.hours = E(h, a);
+          const { meridiem: a } = _(r), h = Math.min(Math.max(s, 1), 12);
+          r.hours = E(h, a);
         } else
-          s.hours = Math.min(Math.max(r, 0), 23);
-      else e === "minute" ? s.minutes = Math.min(Math.max(r, 0), 59) : s.seconds = Math.min(Math.max(r, 0), 59);
-      this._applyParts(s, "keyboard"), this._moveSegmentFocus(1);
+          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) {
@@ -306,8 +306,8 @@ const p = class p extends B {
       }
       if (i === "meridiem" && /^[ap]$/i.test(e.key)) {
         e.preventDefault();
-        const t = this._partsOrFallback(), s = e.key.toLowerCase() === "a" ? "AM" : "PM", r = _(t).hour;
-        t.hours = E(r, s), this._applyParts(t, "keyboard");
+        const t = this._partsOrFallback(), r = e.key.toLowerCase() === "a" ? "AM" : "PM", s = _(t).hour;
+        t.hours = E(s, r), this._applyParts(t, "keyboard");
         return;
       }
       /^\d$/.test(e.key) && i !== "meridiem" && (e.preventDefault(), this._applyNumericInput(i, e.key));
@@ -316,9 +316,9 @@ const p = class p extends B {
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const s = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), r = this.getAttribute("name");
-      s && typeof s.registerField == "function" && r && (this._formUnregister = s.registerField(r, {
-        name: r,
+      const r = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), s = this.getAttribute("name");
+      r && typeof r.registerField == "function" && s && (this._formUnregister = r.registerField(s, {
+        name: s,
         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 },
@@ -337,10 +337,10 @@ const p = class p extends B {
   }
   _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(), s = (this.getAttribute("description") || "").trim(), r = (this.getAttribute("data-error") || "").trim(), a = this.root.querySelector(".meta"), h = this.root.querySelector(".label"), w = this.root.querySelector(".label-text"), F = this.root.querySelector(".required"), c = this.root.querySelector(".description"), g = `${this._uid}-label`, v = `${this._uid}-description`, y = `${this._uid}-error`;
-    a.hidden = !t && !s, h.hidden = !t, h.id = t ? g : "", w.textContent = t, F.hidden = !this.hasAttribute("required"), c.hidden = !s, c.id = s ? v : "", c.textContent = s, this._errorEl.hidden = !r, this._errorEl.id = r ? y : "", this._errorEl.textContent = r, this._shellEl.setAttribute("data-invalid", r ? "true" : "false"), this._shellEl.setAttribute("role", "group"), T(this._shellEl, this, t ? g : null);
-    const x = [s ? v : null, r ? y : null].filter(Boolean).join(" ");
-    I(this._shellEl, this, this._uid, x ? x.split(" ") : []), this._shellEl.setAttribute("aria-invalid", r ? "true" : "false"), this._shellEl.setAttribute("aria-required", this.hasAttribute("required") ? "true" : "false"), this._shellEl.setAttribute("aria-disabled", this.hasAttribute("disabled") ? "true" : "false"), this._shellEl.removeAttribute("aria-readonly");
+    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(), a = this.root.querySelector(".meta"), h = this.root.querySelector(".label"), w = this.root.querySelector(".label-text"), F = this.root.querySelector(".required"), c = this.root.querySelector(".description"), g = `${this._uid}-label`, v = `${this._uid}-description`, y = `${this._uid}-error`;
+    a.hidden = !t && !r, h.hidden = !t, h.id = t ? g : "", w.textContent = t, F.hidden = !this.hasAttribute("required"), c.hidden = !r, c.id = r ? v : "", c.textContent = r, this._errorEl.hidden = !s, this._errorEl.id = s ? y : "", this._errorEl.textContent = s, this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("role", "group"), T(this._shellEl, this, t ? g : null);
+    const x = [r ? v : null, s ? y : null].filter(Boolean).join(" ");
+    I(this._shellEl, this, this._uid, x ? x.split(" ") : []), 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.removeAttribute("aria-readonly");
     const u = f(this._value, this._showSeconds()), C = this._order(), m = [];
     this._segmentButtons.clear();
     const S = u ? _(u) : null;