@editora/ui-core 0.1.9 → 0.1.10

package/dist/fieldset.cjs.js

@@ -0,0 +1,214 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("./ElementBase-1b301e7f.js"),A=`
+  :host {
+    --ui-fieldset-gap: 10px;
+    --ui-fieldset-radius: 16px;
+    --ui-fieldset-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
+    --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
+    --ui-fieldset-shadow: none;
+    --ui-fieldset-padding: 14px;
+    color-scheme: light dark;
+    display: block;
+    min-width: 0;
+    color: var(--ui-fieldset-color);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    min-width: 0;
+    margin: 0;
+    padding: var(--ui-fieldset-padding);
+    display: grid;
+    gap: var(--ui-fieldset-gap);
+    border: var(--ui-fieldset-border);
+    border-radius: var(--ui-fieldset-radius);
+    background: var(--ui-fieldset-bg);
+    box-shadow: var(--ui-fieldset-shadow);
+    box-sizing: border-box;
+  }
+
+  .legend-row {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 0;
+  }
+
+  .legend {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font: 650 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    color: inherit;
+  }
+
+  .required {
+    color: var(--ui-fieldset-error);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .actions,
+  .footer {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .actions {
+    justify-content: flex-end;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-fieldset-muted);
+  }
+
+  .error {
+    color: var(--ui-fieldset-error);
+    font-weight: 600;
+  }
+
+  .body {
+    min-width: 0;
+    display: grid;
+    gap: var(--ui-fieldset-gap);
+  }
+
+  .legend-row[hidden],
+  .legend[hidden],
+  .actions[hidden],
+  .description[hidden],
+  .error[hidden],
+  .footer[hidden] {
+    display: none !important;
+  }
+
+  :host([orientation="horizontal"]) .body {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    align-items: start;
+  }
+
+  :host([variant="surface"]) {
+    --ui-fieldset-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.05),
+      0 12px 26px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="outline"]) {
+    --ui-fieldset-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+  }
+
+  :host([variant="soft"]) {
+    --ui-fieldset-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 6%, var(--ui-color-surface, #ffffff));
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 26%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-fieldset-bg: #0f172a;
+    --ui-fieldset-color: #e2e8f0;
+    --ui-fieldset-muted: #93a4bd;
+    --ui-fieldset-border-color: #334155;
+  }
+
+  :host([tone="success"]) {
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 40%, transparent);
+  }
+
+  :host([tone="warning"]) {
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 40%, transparent);
+  }
+
+  :host([tone="danger"]),
+  :host([invalid]) {
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-fieldset-error) 42%, transparent);
+  }
+
+  :host([density="compact"]) {
+    --ui-fieldset-gap: 8px;
+    --ui-fieldset-padding: 12px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-fieldset-gap: 12px;
+    --ui-fieldset-padding: 16px;
+  }
+
+  :host([shape="square"]) {
+    --ui-fieldset-radius: 4px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-fieldset-radius: 24px;
+  }
+
+  :host([headless]) .frame {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-fieldset-bg: Canvas;
+      --ui-fieldset-color: CanvasText;
+      --ui-fieldset-muted: CanvasText;
+      --ui-fieldset-border-color: CanvasText;
+      --ui-fieldset-error: CanvasText;
+    }
+
+    .frame {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;function a(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function s(i){if(!i)return!1;const e=i.assignedNodes({flatten:!0});return e.length?e.some(t=>{var r;return t.nodeType===Node.TEXT_NODE?!!((r=t.textContent)!=null&&r.trim()):t.nodeType===Node.ELEMENT_NODE}):!1}function d(i,e){return i.id||(i.id=`ui-fieldset-${e}-${Math.random().toString(36).slice(2,9)}`),i.id}function q(i){return Array.from(new Set(i.filter(Boolean)))}class m extends S.ElementBase{constructor(){super(...arguments),this._stateSyncQueued=!1,this._onSlotChange=()=>{this._updateVisibility(),this._scheduleStateSync()}}static get observedAttributes(){return["legend","description","error","required","invalid","orientation","variant","tone","density","shape","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._scheduleStateSync()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="legend"||e==="description"||e==="error"||e==="required"){this.isConnected&&this.requestRender();return}e==="invalid"&&this._scheduleStateSync()}}render(){const e=this.getAttribute("legend")||"",t=this.getAttribute("description")||"",r=this.getAttribute("error")||"",o=this.hasAttribute("required");this.setContent(`
+      <style>${A}</style>
+      <fieldset class="frame" part="frame">
+        <div class="legend-row">
+          <legend class="legend" part="legend">
+            <slot name="legend">${e?a(e):""}</slot>
+            <span class="required" ${o?"":"hidden"} aria-hidden="true">*</span>
+          </legend>
+          <div class="actions" part="actions">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+        <p class="description" part="description">
+          <slot name="description">${t?a(t):""}</slot>
+        </p>
+        <div class="body" part="body">
+          <slot></slot>
+        </div>
+        <p class="error" part="error">
+          <slot name="error">${r?a(r):""}</slot>
+        </p>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </fieldset>
+    `),this._updateVisibility(),this._syncAria()}_scheduleStateSync(){this._stateSyncQueued||(this._stateSyncQueued=!0,queueMicrotask(()=>{this._stateSyncQueued=!1,this.isConnected&&this._syncAria()}))}_updateVisibility(){const e=this.root.querySelector('slot[name="legend"]'),t=this.root.querySelector('slot[name="description"]'),r=this.root.querySelector('slot[name="actions"]'),o=this.root.querySelector('slot[name="error"]'),n=this.root.querySelector('slot[name="footer"]'),l=!!this.getAttribute("legend")||s(e),v=!!this.getAttribute("description")||s(t),c=s(r),y=!!this.getAttribute("error")||s(o),x=s(n),u=this.root.querySelector(".legend-row"),f=this.root.querySelector(".legend"),h=this.root.querySelector(".actions"),g=this.root.querySelector(".description"),p=this.root.querySelector(".error"),b=this.root.querySelector(".footer");u&&u.toggleAttribute("hidden",!l&&!c),f&&f.toggleAttribute("hidden",!l),h&&h.toggleAttribute("hidden",!c),g&&g.toggleAttribute("hidden",!v),p&&p.toggleAttribute("hidden",!y),b&&b.toggleAttribute("hidden",!x)}_syncAria(){const e=this.root.querySelector(".frame"),t=this.root.querySelector(".legend"),r=this.root.querySelector(".description"),o=this.root.querySelector(".error");if(!e)return;t&&!t.hasAttribute("hidden")?e.setAttribute("aria-labelledby",d(t,"legend")):e.removeAttribute("aria-labelledby");const n=q([r&&!r.hasAttribute("hidden")?d(r,"description"):"",o&&!o.hasAttribute("hidden")?d(o,"error"):""]);n.length?e.setAttribute("aria-describedby",n.join(" ")):e.removeAttribute("aria-describedby"),this.hasAttribute("invalid")||o&&!o.hasAttribute("hidden")?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid")}}typeof customElements<"u"&&!customElements.get("ui-fieldset")&&customElements.define("ui-fieldset",m);exports.UIFieldset=m;

package/dist/fieldset.esm.js

@@ -0,0 +1,298 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+const S = `
+  :host {
+    --ui-fieldset-gap: 10px;
+    --ui-fieldset-radius: 16px;
+    --ui-fieldset-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
+    --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
+    --ui-fieldset-shadow: none;
+    --ui-fieldset-padding: 14px;
+    color-scheme: light dark;
+    display: block;
+    min-width: 0;
+    color: var(--ui-fieldset-color);
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    min-width: 0;
+    margin: 0;
+    padding: var(--ui-fieldset-padding);
+    display: grid;
+    gap: var(--ui-fieldset-gap);
+    border: var(--ui-fieldset-border);
+    border-radius: var(--ui-fieldset-radius);
+    background: var(--ui-fieldset-bg);
+    box-shadow: var(--ui-fieldset-shadow);
+    box-sizing: border-box;
+  }
+
+  .legend-row {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 0;
+  }
+
+  .legend {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font: 650 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    color: inherit;
+  }
+
+  .required {
+    color: var(--ui-fieldset-error);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .actions,
+  .footer {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .actions {
+    justify-content: flex-end;
+  }
+
+  .description,
+  .error {
+    margin: 0;
+    min-width: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    color: var(--ui-fieldset-muted);
+  }
+
+  .error {
+    color: var(--ui-fieldset-error);
+    font-weight: 600;
+  }
+
+  .body {
+    min-width: 0;
+    display: grid;
+    gap: var(--ui-fieldset-gap);
+  }
+
+  .legend-row[hidden],
+  .legend[hidden],
+  .actions[hidden],
+  .description[hidden],
+  .error[hidden],
+  .footer[hidden] {
+    display: none !important;
+  }
+
+  :host([orientation="horizontal"]) .body {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    align-items: start;
+  }
+
+  :host([variant="surface"]) {
+    --ui-fieldset-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.05),
+      0 12px 26px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="outline"]) {
+    --ui-fieldset-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+  }
+
+  :host([variant="soft"]) {
+    --ui-fieldset-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 6%, var(--ui-color-surface, #ffffff));
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 26%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="contrast"]) {
+    --ui-fieldset-bg: #0f172a;
+    --ui-fieldset-color: #e2e8f0;
+    --ui-fieldset-muted: #93a4bd;
+    --ui-fieldset-border-color: #334155;
+  }
+
+  :host([tone="success"]) {
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 40%, transparent);
+  }
+
+  :host([tone="warning"]) {
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 40%, transparent);
+  }
+
+  :host([tone="danger"]),
+  :host([invalid]) {
+    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-fieldset-error) 42%, transparent);
+  }
+
+  :host([density="compact"]) {
+    --ui-fieldset-gap: 8px;
+    --ui-fieldset-padding: 12px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-fieldset-gap: 12px;
+    --ui-fieldset-padding: 16px;
+  }
+
+  :host([shape="square"]) {
+    --ui-fieldset-radius: 4px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-fieldset-radius: 24px;
+  }
+
+  :host([headless]) .frame {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-fieldset-bg: Canvas;
+      --ui-fieldset-color: CanvasText;
+      --ui-fieldset-muted: CanvasText;
+      --ui-fieldset-border-color: CanvasText;
+      --ui-fieldset-error: CanvasText;
+    }
+
+    .frame {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function a(i) {
+  return i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function s(i) {
+  if (!i)
+    return !1;
+  const e = i.assignedNodes({ flatten: !0 });
+  return e.length ? e.some((t) => {
+    var r;
+    return t.nodeType === Node.TEXT_NODE ? !!((r = t.textContent) != null && r.trim()) : t.nodeType === Node.ELEMENT_NODE;
+  }) : !1;
+}
+function d(i, e) {
+  return i.id || (i.id = `ui-fieldset-${e}-${Math.random().toString(36).slice(2, 9)}`), i.id;
+}
+function A(i) {
+  return Array.from(new Set(i.filter(Boolean)));
+}
+class q extends x {
+  constructor() {
+    super(...arguments), this._stateSyncQueued = !1, this._onSlotChange = () => {
+      this._updateVisibility(), this._scheduleStateSync();
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "legend",
+      "description",
+      "error",
+      "required",
+      "invalid",
+      "orientation",
+      "variant",
+      "tone",
+      "density",
+      "shape",
+      "headless"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("slotchange", this._onSlotChange), this._scheduleStateSync();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("slotchange", this._onSlotChange), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, r) {
+    if (t !== r) {
+      if (e === "legend" || e === "description" || e === "error" || e === "required") {
+        this.isConnected && this.requestRender();
+        return;
+      }
+      e === "invalid" && this._scheduleStateSync();
+    }
+  }
+  render() {
+    const e = this.getAttribute("legend") || "", t = this.getAttribute("description") || "", r = this.getAttribute("error") || "", o = this.hasAttribute("required");
+    this.setContent(`
+      <style>${S}</style>
+      <fieldset class="frame" part="frame">
+        <div class="legend-row">
+          <legend class="legend" part="legend">
+            <slot name="legend">${e ? a(e) : ""}</slot>
+            <span class="required" ${o ? "" : "hidden"} aria-hidden="true">*</span>
+          </legend>
+          <div class="actions" part="actions">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+        <p class="description" part="description">
+          <slot name="description">${t ? a(t) : ""}</slot>
+        </p>
+        <div class="body" part="body">
+          <slot></slot>
+        </div>
+        <p class="error" part="error">
+          <slot name="error">${r ? a(r) : ""}</slot>
+        </p>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </fieldset>
+    `), this._updateVisibility(), this._syncAria();
+  }
+  _scheduleStateSync() {
+    this._stateSyncQueued || (this._stateSyncQueued = !0, queueMicrotask(() => {
+      this._stateSyncQueued = !1, this.isConnected && this._syncAria();
+    }));
+  }
+  _updateVisibility() {
+    const e = this.root.querySelector('slot[name="legend"]'), t = this.root.querySelector('slot[name="description"]'), r = this.root.querySelector('slot[name="actions"]'), o = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="footer"]'), l = !!this.getAttribute("legend") || s(e), m = !!this.getAttribute("description") || s(t), c = s(r), v = !!this.getAttribute("error") || s(o), y = s(n), u = this.root.querySelector(".legend-row"), f = this.root.querySelector(".legend"), h = this.root.querySelector(".actions"), g = this.root.querySelector(".description"), p = this.root.querySelector(".error"), b = this.root.querySelector(".footer");
+    u && u.toggleAttribute("hidden", !l && !c), f && f.toggleAttribute("hidden", !l), h && h.toggleAttribute("hidden", !c), g && g.toggleAttribute("hidden", !m), p && p.toggleAttribute("hidden", !v), b && b.toggleAttribute("hidden", !y);
+  }
+  _syncAria() {
+    const e = this.root.querySelector(".frame"), t = this.root.querySelector(".legend"), r = this.root.querySelector(".description"), o = this.root.querySelector(".error");
+    if (!e)
+      return;
+    t && !t.hasAttribute("hidden") ? e.setAttribute("aria-labelledby", d(t, "legend")) : e.removeAttribute("aria-labelledby");
+    const n = A([
+      r && !r.hasAttribute("hidden") ? d(r, "description") : "",
+      o && !o.hasAttribute("hidden") ? d(o, "error") : ""
+    ]);
+    n.length ? e.setAttribute("aria-describedby", n.join(" ")) : e.removeAttribute("aria-describedby"), this.hasAttribute("invalid") || o && !o.hasAttribute("hidden") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid");
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-fieldset") && customElements.define("ui-fieldset", q);
+export {
+  q as UIFieldset
+};