@editora/ui-core 0.1.8 → 0.1.10

package/dist/field.esm.js

@@ -0,0 +1,542 @@
+import { E as A } from "./ElementBase-909688f3.mjs";
+const E = `
+  :host {
+    --ui-field-gap: 8px;
+    --ui-field-label-width: 192px;
+    --ui-field-radius: 12px;
+    --ui-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-field-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-field-description-color: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-field-border: 1px solid var(--ui-field-border-color);
+    --ui-field-shadow:
+      none;
+    --ui-field-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-field-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-field-shell-padding: 0px;
+    --ui-field-shell-radius: 0px;
+    --ui-field-shell-bg: transparent;
+    --ui-field-shell-border: 0;
+    --ui-field-shell-border-color: color-mix(in srgb, var(--ui-field-border-color) 84%, transparent);
+    --ui-field-shell-shadow: none;
+    --ui-field-shell-focus-ring: color-mix(in srgb, var(--ui-field-focus-ring) 18%, transparent);
+    color-scheme: light dark;
+    display: block;
+    width: 100%;
+    min-width: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    width: 100%;
+    min-width: 0;
+    display: grid;
+    gap: var(--ui-field-gap);
+    color: var(--ui-field-color);
+    background: var(--ui-field-bg);
+    border: var(--ui-field-border);
+    border-radius: var(--ui-field-radius);
+    box-shadow: var(--ui-field-shadow);
+    padding: 12px;
+    box-sizing: border-box;
+    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+  }
+
+  :host([orientation="horizontal"]) .frame {
+    grid-template-columns: minmax(120px, var(--ui-field-label-width)) minmax(0, 1fr);
+    align-items: start;
+    column-gap: 16px;
+  }
+
+  .meta {
+    min-width: 0;
+    display: grid;
+    gap: 4px;
+    align-content: start;
+  }
+
+  .label-row {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .label {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--ui-field-label-color);
+    font: 600 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .required {
+    color: var(--ui-field-error-color);
+    font-size: 12px;
+    line-height: 1;
+    transform: translateY(-0.5px);
+  }
+
+  .actions {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    color: var(--ui-field-description-color);
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-field-description-color);
+  }
+
+  .label-row[hidden],
+  .label[hidden],
+  .actions[hidden],
+  .meta[hidden],
+  .description[hidden],
+  .error[hidden] {
+    display: none;
+  }
+
+  .control-wrap {
+    min-width: 0;
+    display: grid;
+    gap: 8px;
+  }
+
+  .control-shell {
+    min-width: 0;
+    box-sizing: border-box;
+    padding: var(--ui-field-shell-padding, 0px);
+    border-radius: var(--ui-field-shell-radius, 0px);
+    border: var(--ui-field-shell-border, 0);
+    background: var(--ui-field-shell-bg);
+    box-shadow: var(--ui-field-shell-shadow, none);
+    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
+  }
+
+  .control {
+    min-width: 0;
+  }
+
+  .error {
+    color: var(--ui-field-error-color);
+  }
+
+  .frame:focus-within {
+    border-color: color-mix(in srgb, var(--ui-field-focus-ring) 56%, var(--ui-field-border-color));
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--ui-field-focus-ring) 24%, transparent),
+      var(--ui-field-shadow);
+  }
+
+  :host([invalid]) {
+    --ui-field-label-color: var(--ui-field-error-color);
+    --ui-field-border-color: color-mix(in srgb, var(--ui-field-error-color) 46%, transparent);
+    --ui-field-shell-border-color: color-mix(in srgb, var(--ui-field-error-color) 56%, transparent);
+  }
+
+  :host([variant="surface"]) {
+    --ui-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-field-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.05),
+      0 12px 26px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="outline"]) {
+    --ui-field-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 90%, transparent);
+    --ui-field-shadow: none;
+  }
+
+  :host([variant="soft"]) {
+    --ui-field-bg: color-mix(in srgb, var(--ui-field-accent) 7%, var(--ui-color-surface, #ffffff));
+    --ui-field-border-color: color-mix(in srgb, var(--ui-field-accent) 24%, var(--ui-color-border, #cbd5e1));
+    --ui-field-shadow:
+      0 1px 4px rgba(2, 6, 23, 0.04),
+      0 8px 20px rgba(2, 6, 23, 0.06);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-field-bg: #0f172a;
+    --ui-field-color: #e2e8f0;
+    --ui-field-label-color: #f8fafc;
+    --ui-field-description-color: #93a4bd;
+    --ui-field-border-color: #334155;
+    --ui-field-shell-border-color: #334155;
+    --ui-field-focus-ring: #93c5fd;
+    --ui-field-shadow:
+      0 2px 8px rgba(2, 6, 23, 0.2),
+      0 22px 44px rgba(2, 6, 23, 0.34);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-field-bg: transparent;
+    --ui-field-border: 0;
+    --ui-field-shadow: none;
+  }
+
+  :host([variant="minimal"]) .frame {
+    padding: 0;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-field-bg: var(--ui-color-surface, #ffffff);
+    --ui-field-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.08),
+      0 20px 40px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([tone="success"]) {
+    --ui-field-accent: #16a34a;
+  }
+
+  :host([tone="warning"]) {
+    --ui-field-accent: #d97706;
+  }
+
+  :host([tone="danger"]) {
+    --ui-field-accent: #dc2626;
+    --ui-field-error-color: #dc2626;
+  }
+
+  :host([density="compact"]) {
+    --ui-field-gap: 6px;
+  }
+
+  :host([density="compact"]) .frame {
+    padding: 9px;
+  }
+
+  :host([density="compact"]) .label {
+    font-size: 12px;
+  }
+
+  :host([density="compact"]) .description,
+  :host([density="compact"]) .error {
+    font-size: 11px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-field-gap: 10px;
+  }
+
+  :host([density="comfortable"]) .frame {
+    padding: 15px;
+  }
+
+  :host([density="comfortable"]) .label {
+    font-size: 14px;
+  }
+
+  :host([density="comfortable"]) .description,
+  :host([density="comfortable"]) .error {
+    font-size: 13px;
+  }
+
+  :host([shape="square"]) {
+    --ui-field-radius: 4px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-field-radius: 20px;
+  }
+
+  :host([shell="outline"]) {
+    --ui-field-shell-padding: 8px;
+    --ui-field-shell-radius: calc(var(--ui-field-radius) - 4px);
+    --ui-field-shell-bg: color-mix(in srgb, var(--ui-field-bg) 94%, transparent);
+    --ui-field-shell-border: 1px solid var(--ui-field-shell-border-color);
+  }
+
+  :host([shell="filled"]) {
+    --ui-field-shell-padding: 8px;
+    --ui-field-shell-radius: calc(var(--ui-field-radius) - 4px);
+    --ui-field-shell-bg: color-mix(in srgb, var(--ui-field-color) 4%, var(--ui-field-bg));
+    --ui-field-shell-border: 1px solid transparent;
+  }
+
+  :host([shell="soft"]) {
+    --ui-field-shell-padding: 8px;
+    --ui-field-shell-radius: calc(var(--ui-field-radius) - 4px);
+    --ui-field-shell-bg: color-mix(in srgb, var(--ui-field-accent) 10%, var(--ui-field-bg));
+    --ui-field-shell-border: 1px solid color-mix(in srgb, var(--ui-field-accent) 32%, transparent);
+  }
+
+  :host([shell="line"]) {
+    --ui-field-shell-padding: 8px 0;
+    --ui-field-shell-radius: 0;
+    --ui-field-shell-bg: transparent;
+    --ui-field-shell-border: 0;
+  }
+
+  :host([shell="line"]) .control-shell {
+    border-bottom: 1px solid var(--ui-field-shell-border-color);
+  }
+
+  :host([shell="outline"]) .frame:focus-within .control-shell,
+  :host([shell="filled"]) .frame:focus-within .control-shell,
+  :host([shell="soft"]) .frame:focus-within .control-shell,
+  :host([shell="line"]) .frame:focus-within .control-shell {
+    border-color: color-mix(in srgb, var(--ui-field-focus-ring) 66%, var(--ui-field-shell-border-color));
+    box-shadow:
+      0 0 0 2px var(--ui-field-shell-focus-ring),
+      var(--ui-field-shell-shadow);
+  }
+
+  :host([headless]) {
+    --ui-field-bg: transparent;
+    --ui-field-border: 0;
+    --ui-field-shadow: none;
+    --ui-field-shell-bg: transparent;
+    --ui-field-shell-border: 0;
+    --ui-field-shell-shadow: none;
+    --ui-field-shell-padding: 0;
+    --ui-field-shell-radius: 0;
+  }
+
+  :host([headless]) .frame {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    gap: 6px;
+    background: transparent;
+  }
+
+  :host([headless]) .control-shell {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .frame,
+    .control-shell {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-field-border: 2px solid var(--ui-field-border-color);
+    }
+
+    .control-shell {
+      border-width: max(2px, 1px);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-field-bg: Canvas;
+      --ui-field-color: CanvasText;
+      --ui-field-label-color: CanvasText;
+      --ui-field-description-color: CanvasText;
+      --ui-field-error-color: CanvasText;
+      --ui-field-border-color: CanvasText;
+      --ui-field-shell-bg: Canvas;
+      --ui-field-shell-border: 1px solid CanvasText;
+      --ui-field-shell-border-color: CanvasText;
+      --ui-field-shadow: none;
+      --ui-field-shell-shadow: none;
+    }
+
+    .frame,
+    .control-shell {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function b(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function p(o) {
+  if (!o)
+    return !1;
+  const e = o.assignedNodes({ flatten: !0 });
+  return e.length ? e.some((t) => {
+    var l;
+    return t.nodeType === Node.TEXT_NODE ? !!((l = t.textContent) != null && l.trim()) : t.nodeType === Node.ELEMENT_NODE;
+  }) : !1;
+}
+function f(o) {
+  if (o.hasAttribute("disabled") || o.getAttribute("aria-disabled") === "true" || o.getAttribute("tabindex") === "-1")
+    return !1;
+  const e = window.getComputedStyle(o);
+  return !(e.display === "none" || e.visibility === "hidden");
+}
+function q(o) {
+  return !!o.closest(
+    'button, a, input, select, textarea, summary, [contenteditable=""], [contenteditable="true"], [role="button"]'
+  );
+}
+function _(o) {
+  return Array.from(new Set(o.filter(Boolean)));
+}
+const S = 'ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])';
+class k extends A {
+  constructor() {
+    super(), this._uid = Math.random().toString(36).slice(2, 9), this._controlCache = null, this._stateSyncQueued = !1, this._onRootClick = this._onRootClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "label",
+      "description",
+      "error",
+      "for",
+      "required",
+      "invalid",
+      "orientation",
+      "headless",
+      "variant",
+      "tone",
+      "density",
+      "shape",
+      "shell",
+      "label-width"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.root.addEventListener("slotchange", this._onSlotChange), this._scheduleDerivedStateSync();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("slotchange", this._onSlotChange), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, l) {
+    if (t !== l) {
+      if (e === "for" && this._invalidateControlCache(), e === "label-width") {
+        const i = this.getAttribute("label-width");
+        i ? this.style.setProperty("--ui-field-label-width", i) : this.style.removeProperty("--ui-field-label-width");
+      }
+      if (e === "label" || e === "description" || e === "error" || e === "required" || e === "for") {
+        this.isConnected && this.requestRender();
+        return;
+      }
+      e === "invalid" && this._scheduleDerivedStateSync();
+    }
+  }
+  _onSlotChange() {
+    this._invalidateControlCache(), this._scheduleDerivedStateSync();
+  }
+  _onRootClick(e) {
+    const t = e.target;
+    t && t.closest(".label") && (q(t) || this._focusControl());
+  }
+  _invalidateControlCache() {
+    this._controlCache = null;
+  }
+  _scheduleDerivedStateSync() {
+    this._stateSyncQueued || (this._stateSyncQueued = !0, queueMicrotask(() => {
+      this._stateSyncQueued = !1, this.isConnected && this._syncDerivedState();
+    }));
+  }
+  _focusControl() {
+    const e = this._resolveControlElement();
+    if (e)
+      try {
+        e.focus({ preventScroll: !0 });
+      } catch {
+        e.focus();
+      }
+  }
+  _resolveControlElement() {
+    if (this._controlCache && this._controlCache.isConnected && f(this._controlCache))
+      return this._controlCache;
+    const e = this.getAttribute("for");
+    if (e) {
+      const r = document.getElementById(e);
+      if (r instanceof HTMLElement && f(r))
+        return this._controlCache = r, r;
+    }
+    const t = this.root.querySelector("slot:not([name])"), l = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) || [];
+    for (const r of l) {
+      if (!(r instanceof HTMLElement))
+        continue;
+      if (f(r))
+        return this._controlCache = r, r;
+      const s = r.querySelector(S);
+      if (s && f(s))
+        return this._controlCache = s, s;
+    }
+    const i = this.querySelector(S);
+    return i && f(i) ? (this._controlCache = i, i) : null;
+  }
+  _syncDerivedState() {
+    const e = this.root.querySelector('slot[name="label"]'), t = this.root.querySelector('slot[name="actions"]'), l = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), r = (this.getAttribute("label") || "").trim(), s = (this.getAttribute("description") || "").trim(), h = (this.getAttribute("error") || "").trim(), n = !!r || p(e), c = p(t), d = !!s || p(l), u = !!h || p(i), C = n || c || d, a = n || c, g = this.root.querySelector(".meta"), v = this.root.querySelector(".label-row"), m = this.root.querySelector(".label"), x = this.root.querySelector(".actions"), y = this.root.querySelector(".description"), w = this.root.querySelector(".error");
+    g && (C ? g.removeAttribute("hidden") : g.setAttribute("hidden", "")), v && (a ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), m && (n ? m.removeAttribute("hidden") : m.setAttribute("hidden", "")), x && (c ? x.removeAttribute("hidden") : x.setAttribute("hidden", "")), y && (d ? y.removeAttribute("hidden") : y.setAttribute("hidden", "")), w && (u ? w.removeAttribute("hidden") : w.setAttribute("hidden", "")), this._syncControlA11y(n, d, u);
+  }
+  _syncControlA11y(e, t, l) {
+    const i = this._resolveControlElement();
+    if (!i)
+      return;
+    const r = `${this._uid}-label`, s = `${this._uid}-description`, h = `${this._uid}-error`, n = (i.getAttribute("aria-labelledby") || "").split(/\s+/).filter((a) => a && a !== r);
+    !i.hasAttribute("aria-label") && e && n.push(r);
+    const c = _(n);
+    c.length ? i.setAttribute("aria-labelledby", c.join(" ")) : i.removeAttribute("aria-labelledby");
+    const d = (i.getAttribute("aria-describedby") || "").split(/\s+/).filter((a) => a && a !== s && a !== h);
+    t && d.push(s), l && d.push(h);
+    const u = _(d);
+    u.length ? i.setAttribute("aria-describedby", u.join(" ")) : i.removeAttribute("aria-describedby"), this.hasAttribute("invalid") || l ? i.setAttribute("aria-invalid", "true") : i.removeAttribute("aria-invalid"), this.hasAttribute("required") ? i.setAttribute("aria-required", "true") : i.removeAttribute("aria-required");
+  }
+  render() {
+    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", l = this.getAttribute("error") || "", i = this.hasAttribute("required"), r = this.getAttribute("for") || "";
+    this.setContent(`
+      <style>${E}</style>
+      <div class="frame" part="field">
+        <div class="meta" part="meta">
+          <div class="label-row" part="top">
+            <label class="label" id="${this._uid}-label" ${r ? `for="${b(r)}"` : ""}>
+              <slot name="label">${b(e)}</slot>
+              ${i ? '<span class="required" aria-hidden="true">*</span>' : ""}
+            </label>
+            <div class="actions" part="actions"><slot name="actions"></slot></div>
+          </div>
+          <p class="description" id="${this._uid}-description" part="description">
+            <slot name="description">${b(t)}</slot>
+          </p>
+        </div>
+
+        <div class="control-wrap" part="control-wrap">
+          <div class="control-shell" part="control-shell">
+            <div class="control" part="control"><slot></slot></div>
+          </div>
+          <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
+            <slot name="error">${b(l)}</slot>
+          </p>
+        </div>
+      </div>
+    `), this._invalidateControlCache(), this._scheduleDerivedStateSync();
+  }
+  shouldRenderOnAttributeChange(e, t, l) {
+    return e === "label" || e === "description" || e === "error" || e === "required" || e === "for";
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-field") && customElements.define("ui-field", k);
+export {
+  k as UIField
+};