@editora/ui-core 0.1.8 → 0.1.10

package/dist/label.cjs.js

@@ -0,0 +1,195 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./ElementBase-1b301e7f.js"),u=`
+  :host {
+    --ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-label-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-label-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-label-bg: transparent;
+    --ui-label-border: 1px solid transparent;
+    --ui-label-radius: 10px;
+    --ui-label-pad-x: 0px;
+    --ui-label-pad-y: 0px;
+    --ui-label-shadow: none;
+    --ui-label-font-size: 13px;
+    --ui-label-font-weight: 600;
+    --ui-label-gap: 4px;
+    --ui-label-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    color-scheme: light dark;
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  .root {
+    min-width: 0;
+    display: grid;
+    gap: var(--ui-label-gap);
+    color: var(--ui-label-color);
+    background: var(--ui-label-bg);
+    border: var(--ui-label-border);
+    border-radius: var(--ui-label-radius);
+    padding: var(--ui-label-pad-y) var(--ui-label-pad-x);
+    box-shadow: var(--ui-label-shadow);
+    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+  }
+
+  .label {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font: var(--ui-label-font-weight) var(--ui-label-font-size)/1.35 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    color: inherit;
+  }
+
+  .required {
+    color: var(--ui-label-error);
+    font-size: calc(var(--ui-label-font-size) - 1px);
+    line-height: 1;
+    transform: translateY(-0.5px);
+  }
+
+  .description {
+    margin: 0;
+    min-width: 0;
+    color: var(--ui-label-muted);
+    font: 500 calc(var(--ui-label-font-size) - 1px)/1.4 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .description[hidden] {
+    display: none;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-label-font-size: 12px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-label-font-size: 14px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-label-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-label-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 65%, transparent);
+    --ui-label-pad-x: 8px;
+    --ui-label-pad-y: 6px;
+    --ui-label-shadow: 0 1px 3px rgba(2, 6, 23, 0.05);
+  }
+
+  :host([variant="soft"]) {
+    --ui-label-bg: color-mix(in srgb, var(--ui-label-accent) 10%, transparent);
+    --ui-label-border: 1px solid color-mix(in srgb, var(--ui-label-accent) 18%, transparent);
+    --ui-label-pad-x: 8px;
+    --ui-label-pad-y: 6px;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-label-color: #e2e8f0;
+    --ui-label-muted: #93a4bd;
+    --ui-label-bg: #0f172a;
+    --ui-label-border: 1px solid #334155;
+    --ui-label-pad-x: 9px;
+    --ui-label-pad-y: 7px;
+    --ui-label-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-label-bg: transparent;
+    --ui-label-border: 0;
+    --ui-label-pad-x: 0;
+    --ui-label-pad-y: 0;
+    --ui-label-shadow: none;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-label-bg: linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, #ffffff 8%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent)
+    );
+    --ui-label-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 64%, transparent);
+    --ui-label-pad-x: 9px;
+    --ui-label-pad-y: 7px;
+    --ui-label-shadow:
+      0 1px 4px rgba(2, 6, 23, 0.07),
+      0 10px 20px rgba(2, 6, 23, 0.1);
+  }
+
+  :host([tone="brand"]) { --ui-label-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
+  :host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
+  :host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="danger"]) { --ui-label-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
+
+  :host([shape="square"]) { --ui-label-radius: 4px; }
+  :host([shape="soft"]) { --ui-label-radius: 16px; }
+
+  :host([density="compact"]) {
+    --ui-label-gap: 2px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-label-gap: 6px;
+  }
+
+  :host([disabled]) .label {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :host(:not([disabled])) .label:hover {
+    color: color-mix(in srgb, var(--ui-label-color) 84%, var(--ui-label-accent));
+  }
+
+  :host([headless]) .root {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .root {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-label-border: 2px solid color-mix(in srgb, var(--ui-label-color) 44%, transparent);
+      --ui-label-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-label-color: CanvasText;
+      --ui-label-muted: CanvasText;
+      --ui-label-bg: Canvas;
+      --ui-label-border: 1px solid CanvasText;
+      --ui-label-shadow: none;
+    }
+
+    .root {
+      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 c(i){if(!i)return!1;const e=i.assignedNodes({flatten:!0});return e.length?e.some(o=>{var t;return o.nodeType===Node.TEXT_NODE?!!((t=o.textContent)!=null&&t.trim()):o.nodeType===Node.ELEMENT_NODE}):!1}function l(i){if(i.hasAttribute("disabled")||i.getAttribute("aria-disabled")==="true")return!1;const e=window.getComputedStyle(i);return!(e.display==="none"||e.visibility==="hidden")}class s extends n.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,9),this._onRootClick=this._onRootClick.bind(this),this._onRootFocusIn=this._onRootFocusIn.bind(this),this._onRootFocusOut=this._onRootFocusOut.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["for","required","description","variant","tone","size","density","shape","disabled","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("focusin",this._onRootFocusIn),this.root.addEventListener("focusout",this._onRootFocusOut),this.root.addEventListener("slotchange",this._onSlotChange),this._syncDescriptionVisibility()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("focusin",this._onRootFocusIn),this.root.removeEventListener("focusout",this._onRootFocusOut),this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}_resolveControl(){const e=this.getAttribute("for");if(e){const t=document.getElementById(e);if(t instanceof HTMLElement&&l(t))return t}const o=[this.nextElementSibling,this.parentElement,this.closest('[role="group"], form, ui-form, fieldset, .field, [data-field]')];for(const t of o){if(!t)continue;const r=t.querySelector('ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])');if(r&&l(r))return r}return null}_focusControl(){const e=this._resolveControl();if(e)try{e.focus({preventScroll:!0})}catch{e.focus()}}_onRootClick(e){if(this.hasAttribute("disabled"))return;const o=e.composedPath(),t=this.root.querySelector(".label");!t||!o.includes(t)||(this._focusControl(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0})))}_onRootFocusIn(){this.dispatchEvent(new CustomEvent("focus",{bubbles:!0}))}_onRootFocusOut(){this.dispatchEvent(new CustomEvent("blur",{bubbles:!0}))}_onSlotChange(){this._syncDescriptionVisibility()}_syncDescriptionVisibility(){const e=(this.getAttribute("description")||"").trim(),o=this.root.querySelector('slot[name="description"]'),t=!!e||c(o),r=this.root.querySelector(".description");r&&(t?r.removeAttribute("hidden"):r.setAttribute("hidden",""))}render(){const e=this.getAttribute("for")||"",o=this.getAttribute("description")||"",t=this.hasAttribute("required");this.setContent(`
+      <style>${u}</style>
+      <div class="root" part="root">
+        <label class="label" id="${this._uid}-label" part="label" ${e?`for="${a(e)}"`:""}>
+          <slot></slot>
+          ${t?'<span class="required" aria-hidden="true">*</span>':""}
+        </label>
+        <p class="description" id="${this._uid}-description" part="description">
+          <slot name="description">${a(o)}</slot>
+        </p>
+      </div>
+    `),this._syncDescriptionVisibility()}shouldRenderOnAttributeChange(e,o,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-label")&&customElements.define("ui-label",s);exports.UILabel=s;

package/dist/label.esm.js

@@ -0,0 +1,301 @@
+import { E as s } from "./ElementBase-909688f3.mjs";
+const n = `
+  :host {
+    --ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-label-muted: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-label-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-label-bg: transparent;
+    --ui-label-border: 1px solid transparent;
+    --ui-label-radius: 10px;
+    --ui-label-pad-x: 0px;
+    --ui-label-pad-y: 0px;
+    --ui-label-shadow: none;
+    --ui-label-font-size: 13px;
+    --ui-label-font-weight: 600;
+    --ui-label-gap: 4px;
+    --ui-label-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    color-scheme: light dark;
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  .root {
+    min-width: 0;
+    display: grid;
+    gap: var(--ui-label-gap);
+    color: var(--ui-label-color);
+    background: var(--ui-label-bg);
+    border: var(--ui-label-border);
+    border-radius: var(--ui-label-radius);
+    padding: var(--ui-label-pad-y) var(--ui-label-pad-x);
+    box-shadow: var(--ui-label-shadow);
+    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+  }
+
+  .label {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font: var(--ui-label-font-weight) var(--ui-label-font-size)/1.35 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    color: inherit;
+  }
+
+  .required {
+    color: var(--ui-label-error);
+    font-size: calc(var(--ui-label-font-size) - 1px);
+    line-height: 1;
+    transform: translateY(-0.5px);
+  }
+
+  .description {
+    margin: 0;
+    min-width: 0;
+    color: var(--ui-label-muted);
+    font: 500 calc(var(--ui-label-font-size) - 1px)/1.4 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .description[hidden] {
+    display: none;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-label-font-size: 12px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-label-font-size: 14px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-label-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-label-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 65%, transparent);
+    --ui-label-pad-x: 8px;
+    --ui-label-pad-y: 6px;
+    --ui-label-shadow: 0 1px 3px rgba(2, 6, 23, 0.05);
+  }
+
+  :host([variant="soft"]) {
+    --ui-label-bg: color-mix(in srgb, var(--ui-label-accent) 10%, transparent);
+    --ui-label-border: 1px solid color-mix(in srgb, var(--ui-label-accent) 18%, transparent);
+    --ui-label-pad-x: 8px;
+    --ui-label-pad-y: 6px;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-label-color: #e2e8f0;
+    --ui-label-muted: #93a4bd;
+    --ui-label-bg: #0f172a;
+    --ui-label-border: 1px solid #334155;
+    --ui-label-pad-x: 9px;
+    --ui-label-pad-y: 7px;
+    --ui-label-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-label-bg: transparent;
+    --ui-label-border: 0;
+    --ui-label-pad-x: 0;
+    --ui-label-pad-y: 0;
+    --ui-label-shadow: none;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-label-bg: linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, #ffffff 8%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent)
+    );
+    --ui-label-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 64%, transparent);
+    --ui-label-pad-x: 9px;
+    --ui-label-pad-y: 7px;
+    --ui-label-shadow:
+      0 1px 4px rgba(2, 6, 23, 0.07),
+      0 10px 20px rgba(2, 6, 23, 0.1);
+  }
+
+  :host([tone="brand"]) { --ui-label-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
+  :host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
+  :host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="danger"]) { --ui-label-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
+
+  :host([shape="square"]) { --ui-label-radius: 4px; }
+  :host([shape="soft"]) { --ui-label-radius: 16px; }
+
+  :host([density="compact"]) {
+    --ui-label-gap: 2px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-label-gap: 6px;
+  }
+
+  :host([disabled]) .label {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :host(:not([disabled])) .label:hover {
+    color: color-mix(in srgb, var(--ui-label-color) 84%, var(--ui-label-accent));
+  }
+
+  :host([headless]) .root {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .root {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-label-border: 2px solid color-mix(in srgb, var(--ui-label-color) 44%, transparent);
+      --ui-label-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-label-color: CanvasText;
+      --ui-label-muted: CanvasText;
+      --ui-label-bg: Canvas;
+      --ui-label-border: 1px solid CanvasText;
+      --ui-label-shadow: none;
+    }
+
+    .root {
+      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 u(i) {
+  if (!i)
+    return !1;
+  const e = i.assignedNodes({ flatten: !0 });
+  return e.length ? e.some((o) => {
+    var t;
+    return o.nodeType === Node.TEXT_NODE ? !!((t = o.textContent) != null && t.trim()) : o.nodeType === Node.ELEMENT_NODE;
+  }) : !1;
+}
+function l(i) {
+  if (i.hasAttribute("disabled") || i.getAttribute("aria-disabled") === "true")
+    return !1;
+  const e = window.getComputedStyle(i);
+  return !(e.display === "none" || e.visibility === "hidden");
+}
+class c extends s {
+  constructor() {
+    super(), this._uid = Math.random().toString(36).slice(2, 9), this._onRootClick = this._onRootClick.bind(this), this._onRootFocusIn = this._onRootFocusIn.bind(this), this._onRootFocusOut = this._onRootFocusOut.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "for",
+      "required",
+      "description",
+      "variant",
+      "tone",
+      "size",
+      "density",
+      "shape",
+      "disabled",
+      "headless"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.root.addEventListener("focusin", this._onRootFocusIn), this.root.addEventListener("focusout", this._onRootFocusOut), this.root.addEventListener("slotchange", this._onSlotChange), this._syncDescriptionVisibility();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("focusin", this._onRootFocusIn), this.root.removeEventListener("focusout", this._onRootFocusOut), this.root.removeEventListener("slotchange", this._onSlotChange), super.disconnectedCallback();
+  }
+  _resolveControl() {
+    const e = this.getAttribute("for");
+    if (e) {
+      const t = document.getElementById(e);
+      if (t instanceof HTMLElement && l(t))
+        return t;
+    }
+    const o = [
+      this.nextElementSibling,
+      this.parentElement,
+      this.closest('[role="group"], form, ui-form, fieldset, .field, [data-field]')
+    ];
+    for (const t of o) {
+      if (!t)
+        continue;
+      const r = t.querySelector(
+        'ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])'
+      );
+      if (r && l(r))
+        return r;
+    }
+    return null;
+  }
+  _focusControl() {
+    const e = this._resolveControl();
+    if (e)
+      try {
+        e.focus({ preventScroll: !0 });
+      } catch {
+        e.focus();
+      }
+  }
+  _onRootClick(e) {
+    if (this.hasAttribute("disabled"))
+      return;
+    const o = e.composedPath(), t = this.root.querySelector(".label");
+    !t || !o.includes(t) || (this._focusControl(), this.dispatchEvent(new CustomEvent("click", { bubbles: !0 })));
+  }
+  _onRootFocusIn() {
+    this.dispatchEvent(new CustomEvent("focus", { bubbles: !0 }));
+  }
+  _onRootFocusOut() {
+    this.dispatchEvent(new CustomEvent("blur", { bubbles: !0 }));
+  }
+  _onSlotChange() {
+    this._syncDescriptionVisibility();
+  }
+  _syncDescriptionVisibility() {
+    const e = (this.getAttribute("description") || "").trim(), o = this.root.querySelector('slot[name="description"]'), t = !!e || u(o), r = this.root.querySelector(".description");
+    r && (t ? r.removeAttribute("hidden") : r.setAttribute("hidden", ""));
+  }
+  render() {
+    const e = this.getAttribute("for") || "", o = this.getAttribute("description") || "", t = this.hasAttribute("required");
+    this.setContent(`
+      <style>${n}</style>
+      <div class="root" part="root">
+        <label class="label" id="${this._uid}-label" part="label" ${e ? `for="${a(e)}"` : ""}>
+          <slot></slot>
+          ${t ? '<span class="required" aria-hidden="true">*</span>' : ""}
+        </label>
+        <p class="description" id="${this._uid}-description" part="description">
+          <slot name="description">${a(o)}</slot>
+        </p>
+      </div>
+    `), this._syncDescriptionVisibility();
+  }
+  shouldRenderOnAttributeChange(e, o, t) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-label") && customElements.define("ui-label", c);
+export {
+  c as UILabel
+};