@editora/ui-core 0.1.9 → 0.1.12

package/dist/slot.cjs.js

@@ -0,0 +1,159 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-1b301e7f.js"),u=`
+  :host {
+    --ui-slot-bg: transparent;
+    --ui-slot-text: inherit;
+    --ui-slot-border-color: transparent;
+    --ui-slot-border: 1px solid var(--ui-slot-border-color);
+    --ui-slot-radius: 10px;
+    --ui-slot-padding: 0;
+    --ui-slot-gap: 6px;
+    --ui-slot-accent: var(--ui-color-primary, #2563eb);
+    --ui-slot-muted: var(--ui-color-muted, #64748b);
+    color-scheme: light dark;
+    display: inline-flex;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-slot-text);
+  }
+
+  .shell {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--ui-slot-gap);
+    padding: var(--ui-slot-padding);
+    border: var(--ui-slot-border);
+    border-radius: var(--ui-slot-radius);
+    background: var(--ui-slot-bg);
+    color: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+  }
+
+  .content,
+  .fallback {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .fallback {
+    color: var(--ui-slot-muted);
+    font-size: 12px;
+  }
+
+  .shell[data-empty="true"] .content {
+    display: none;
+  }
+
+  .shell[data-empty="false"] .fallback {
+    display: none;
+  }
+
+  :host([align="center"]) .shell {
+    justify-content: center;
+  }
+
+  :host([align="end"]) .shell {
+    justify-content: flex-end;
+  }
+
+  :host([inline="false"]) {
+    display: block;
+  }
+
+  :host([inline="false"]) .shell {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  :host([size="sm"]) {
+    --ui-slot-gap: 4px;
+    --ui-slot-padding: 1px 6px;
+    --ui-slot-radius: 8px;
+  }
+
+  :host([size="lg"]) {
+    --ui-slot-gap: 8px;
+    --ui-slot-padding: 5px 10px;
+    --ui-slot-radius: 12px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-slot-bg: var(--ui-color-surface, #ffffff);
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+  }
+
+  :host([variant="outline"]) {
+    --ui-slot-bg: transparent;
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-slot-accent) 34%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="soft"]) {
+    --ui-slot-bg: color-mix(in srgb, var(--ui-slot-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-slot-accent) 24%, transparent);
+  }
+
+  :host([variant="chip"]) {
+    --ui-slot-bg: color-mix(in srgb, var(--ui-slot-accent) 12%, var(--ui-color-surface, #ffffff));
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-slot-accent) 30%, transparent);
+    --ui-slot-padding: 2px 9px;
+    --ui-slot-radius: 999px;
+    --ui-slot-text: color-mix(in srgb, var(--ui-slot-accent) 88%, #0f172a);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-slot-bg: #0f172a;
+    --ui-slot-text: #e2e8f0;
+    --ui-slot-muted: #93a4bd;
+    --ui-slot-border-color: #334155;
+  }
+
+  :host([tone="success"]) {
+    --ui-slot-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-slot-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-slot-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([headless]) .shell {
+    display: contents;
+    border: 0;
+    background: transparent;
+    padding: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .shell {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .shell {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-slot-bg: Canvas;
+      --ui-slot-text: CanvasText;
+      --ui-slot-muted: GrayText;
+      --ui-slot-border-color: CanvasText;
+    }
+  }
+`;function o(l){return l.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class a extends r.ElementBase{constructor(){super(),this._slotEl=null,this._shellEl=null,this._lastEmpty=!0,this._lastCount=-1,this._lastName="",this._initialized=!1,this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["name","headless","inline","align","size","variant","tone","fallback","required"]}disconnectedCallback(){this._slotEl&&this._slotEl.removeEventListener("slotchange",this._onSlotChange),this._slotEl=null,this._shellEl=null,this._initialized=!1,this._lastCount=-1,this._lastName="",this._lastEmpty=!0,super.disconnectedCallback()}attributeChangedCallback(s,t,e){if(t!==e){if(s==="required"){this.isConnected&&this._syncState(!0);return}super.attributeChangedCallback(s,t,e)}}_assignedCount(){return this._slotEl?this._slotEl.assignedNodes({flatten:!0}).filter(t=>{var e;return t.nodeType===Node.ELEMENT_NODE?!0:t.nodeType===Node.TEXT_NODE?!!((e=t.textContent)!=null&&e.trim()):!1}).length:0}_syncState(s=!1){const t=this._assignedCount(),e=t===0,i=this.getAttribute("name")||"",n=s||!this._initialized||t!==this._lastCount||i!==this._lastName;this._shellEl&&this._shellEl.setAttribute("data-empty",e?"true":"false"),n&&this.dispatchEvent(new CustomEvent("slotchange",{detail:{name:i,count:t,empty:e},bubbles:!0,composed:!0})),e&&this.hasAttribute("required")&&(!this._initialized||!this._lastEmpty)&&this.dispatchEvent(new CustomEvent("missing",{bubbles:!0,composed:!0})),!e&&(!this._initialized||this._lastEmpty)&&this.dispatchEvent(new CustomEvent("resolved",{bubbles:!0,composed:!0})),this._lastEmpty=e,this._lastCount=t,this._lastName=i,this._initialized=!0}_onSlotChange(){this._syncState()}render(){const s=(this.getAttribute("name")||"").trim(),t=this.getAttribute("fallback")||"",e=s?`<slot name="${o(s)}"></slot>`:"<slot></slot>";this.setContent(`
+      <style>${u}</style>
+      <span class="shell" part="shell" data-empty="true">
+        <span class="content" part="content">${e}</span>
+        <span class="fallback" part="fallback"><slot name="fallback">${o(t)}</slot></span>
+      </span>
+    `),this._shellEl=this.root.querySelector(".shell"),this._slotEl&&this._slotEl.removeEventListener("slotchange",this._onSlotChange),this._slotEl=this.root.querySelector('slot:not([name="fallback"])'),this._slotEl&&this._slotEl.addEventListener("slotchange",this._onSlotChange),this._syncState()}shouldRenderOnAttributeChange(s,t,e){return s==="name"||s==="fallback"}}typeof customElements<"u"&&!customElements.get("ui-slot")&&customElements.define("ui-slot",a);exports.UISlot=a;

package/dist/slot.esm.js

@@ -0,0 +1,227 @@
+import { E as n } from "./ElementBase-909688f3.mjs";
+const r = `
+  :host {
+    --ui-slot-bg: transparent;
+    --ui-slot-text: inherit;
+    --ui-slot-border-color: transparent;
+    --ui-slot-border: 1px solid var(--ui-slot-border-color);
+    --ui-slot-radius: 10px;
+    --ui-slot-padding: 0;
+    --ui-slot-gap: 6px;
+    --ui-slot-accent: var(--ui-color-primary, #2563eb);
+    --ui-slot-muted: var(--ui-color-muted, #64748b);
+    color-scheme: light dark;
+    display: inline-flex;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--ui-slot-text);
+  }
+
+  .shell {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--ui-slot-gap);
+    padding: var(--ui-slot-padding);
+    border: var(--ui-slot-border);
+    border-radius: var(--ui-slot-radius);
+    background: var(--ui-slot-bg);
+    color: inherit;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+  }
+
+  .content,
+  .fallback {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .fallback {
+    color: var(--ui-slot-muted);
+    font-size: 12px;
+  }
+
+  .shell[data-empty="true"] .content {
+    display: none;
+  }
+
+  .shell[data-empty="false"] .fallback {
+    display: none;
+  }
+
+  :host([align="center"]) .shell {
+    justify-content: center;
+  }
+
+  :host([align="end"]) .shell {
+    justify-content: flex-end;
+  }
+
+  :host([inline="false"]) {
+    display: block;
+  }
+
+  :host([inline="false"]) .shell {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  :host([size="sm"]) {
+    --ui-slot-gap: 4px;
+    --ui-slot-padding: 1px 6px;
+    --ui-slot-radius: 8px;
+  }
+
+  :host([size="lg"]) {
+    --ui-slot-gap: 8px;
+    --ui-slot-padding: 5px 10px;
+    --ui-slot-radius: 12px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-slot-bg: var(--ui-color-surface, #ffffff);
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+  }
+
+  :host([variant="outline"]) {
+    --ui-slot-bg: transparent;
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-slot-accent) 34%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="soft"]) {
+    --ui-slot-bg: color-mix(in srgb, var(--ui-slot-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-slot-accent) 24%, transparent);
+  }
+
+  :host([variant="chip"]) {
+    --ui-slot-bg: color-mix(in srgb, var(--ui-slot-accent) 12%, var(--ui-color-surface, #ffffff));
+    --ui-slot-border-color: color-mix(in srgb, var(--ui-slot-accent) 30%, transparent);
+    --ui-slot-padding: 2px 9px;
+    --ui-slot-radius: 999px;
+    --ui-slot-text: color-mix(in srgb, var(--ui-slot-accent) 88%, #0f172a);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-slot-bg: #0f172a;
+    --ui-slot-text: #e2e8f0;
+    --ui-slot-muted: #93a4bd;
+    --ui-slot-border-color: #334155;
+  }
+
+  :host([tone="success"]) {
+    --ui-slot-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-slot-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-slot-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([headless]) .shell {
+    display: contents;
+    border: 0;
+    background: transparent;
+    padding: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .shell {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .shell {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-slot-bg: Canvas;
+      --ui-slot-text: CanvasText;
+      --ui-slot-muted: GrayText;
+      --ui-slot-border-color: CanvasText;
+    }
+  }
+`;
+function o(l) {
+  return l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+class u extends n {
+  constructor() {
+    super(), this._slotEl = null, this._shellEl = null, this._lastEmpty = !0, this._lastCount = -1, this._lastName = "", this._initialized = !1, this._onSlotChange = this._onSlotChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "name",
+      "headless",
+      "inline",
+      "align",
+      "size",
+      "variant",
+      "tone",
+      "fallback",
+      "required"
+    ];
+  }
+  disconnectedCallback() {
+    this._slotEl && this._slotEl.removeEventListener("slotchange", this._onSlotChange), this._slotEl = null, this._shellEl = null, this._initialized = !1, this._lastCount = -1, this._lastName = "", this._lastEmpty = !0, super.disconnectedCallback();
+  }
+  attributeChangedCallback(s, t, e) {
+    if (t !== e) {
+      if (s === "required") {
+        this.isConnected && this._syncState(!0);
+        return;
+      }
+      super.attributeChangedCallback(s, t, e);
+    }
+  }
+  _assignedCount() {
+    return this._slotEl ? this._slotEl.assignedNodes({ flatten: !0 }).filter((t) => {
+      var e;
+      return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? !!((e = t.textContent) != null && e.trim()) : !1;
+    }).length : 0;
+  }
+  _syncState(s = !1) {
+    const t = this._assignedCount(), e = t === 0, i = this.getAttribute("name") || "", a = s || !this._initialized || t !== this._lastCount || i !== this._lastName;
+    this._shellEl && this._shellEl.setAttribute("data-empty", e ? "true" : "false"), a && this.dispatchEvent(
+      new CustomEvent("slotchange", {
+        detail: {
+          name: i,
+          count: t,
+          empty: e
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ), e && this.hasAttribute("required") && (!this._initialized || !this._lastEmpty) && this.dispatchEvent(new CustomEvent("missing", { bubbles: !0, composed: !0 })), !e && (!this._initialized || this._lastEmpty) && this.dispatchEvent(new CustomEvent("resolved", { bubbles: !0, composed: !0 })), this._lastEmpty = e, this._lastCount = t, this._lastName = i, this._initialized = !0;
+  }
+  _onSlotChange() {
+    this._syncState();
+  }
+  render() {
+    const s = (this.getAttribute("name") || "").trim(), t = this.getAttribute("fallback") || "", e = s ? `<slot name="${o(s)}"></slot>` : "<slot></slot>";
+    this.setContent(`
+      <style>${r}</style>
+      <span class="shell" part="shell" data-empty="true">
+        <span class="content" part="content">${e}</span>
+        <span class="fallback" part="fallback"><slot name="fallback">${o(t)}</slot></span>
+      </span>
+    `), this._shellEl = this.root.querySelector(".shell"), this._slotEl && this._slotEl.removeEventListener("slotchange", this._onSlotChange), this._slotEl = this.root.querySelector('slot:not([name="fallback"])'), this._slotEl && this._slotEl.addEventListener("slotchange", this._onSlotChange), this._syncState();
+  }
+  shouldRenderOnAttributeChange(s, t, e) {
+    return s === "name" || s === "fallback";
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-slot") && customElements.define("ui-slot", u);
+export {
+  u as UISlot
+};