@editora/ui-core 0.1.9 → 0.1.12

package/dist/skeleton.cjs.js

@@ -0,0 +1,205 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js"),h=`
+  :host {
+    display: block;
+    --ui-skeleton-radius: 10px;
+    --ui-skeleton-height: 16px;
+    --ui-skeleton-width: 100%;
+    --ui-skeleton-gap: 10px;
+    --ui-skeleton-duration: 1.2s;
+
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-muted, #64748b) 20%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-surface, #ffffff) 68%, transparent);
+    --ui-skeleton-bg: linear-gradient(
+      110deg,
+      var(--ui-skeleton-base) 8%,
+      var(--ui-skeleton-glow) 18%,
+      var(--ui-skeleton-base) 33%
+    );
+    --ui-skeleton-bg-size: 200% 100%;
+
+    color-scheme: light dark;
+  }
+
+  .stack {
+    display: grid;
+    gap: var(--ui-skeleton-gap);
+  }
+
+  .line {
+    width: var(--ui-line-width, var(--ui-skeleton-width));
+    height: var(--ui-line-height, var(--ui-skeleton-height));
+    border-radius: var(--ui-line-radius, var(--ui-skeleton-radius));
+    background-color: var(--ui-skeleton-base);
+    background-image: var(--ui-skeleton-bg);
+    background-size: var(--ui-skeleton-bg-size);
+    background-position: 100% 50%;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    will-change: background-position, opacity, transform;
+  }
+
+  .stack[data-animation="shimmer"] .line {
+    animation: ui-skeleton-shimmer var(--ui-skeleton-duration) ease-in-out infinite;
+  }
+
+  .stack[data-animation="pulse"] .line {
+    animation: ui-skeleton-pulse var(--ui-skeleton-duration) ease-in-out infinite;
+  }
+
+  .stack[data-animation="wave"] .line::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      transparent 20%,
+      var(--ui-skeleton-wave) 50%,
+      transparent 80%,
+      transparent 100%
+    );
+    animation: ui-skeleton-wave var(--ui-skeleton-duration) linear infinite;
+  }
+
+  :host([variant="circle"]) .line {
+    --ui-line-height: var(--ui-skeleton-height);
+    --ui-line-width: var(--ui-skeleton-height);
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="text"]) .line {
+    --ui-line-height: 12px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="pill"]) .line {
+    --ui-line-height: 18px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="avatar"]) .line {
+    --ui-line-height: 44px;
+    --ui-line-width: 44px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="badge"]) .line {
+    --ui-line-height: 20px;
+    --ui-line-width: 92px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="button"]) .line {
+    --ui-line-height: 36px;
+    --ui-line-width: 128px;
+    --ui-line-radius: 8px;
+  }
+
+  :host([density="compact"]) {
+    --ui-skeleton-height: 14px;
+    --ui-skeleton-gap: 8px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-skeleton-height: 18px;
+    --ui-skeleton-gap: 12px;
+  }
+
+  :host([tone="brand"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-primary, #2563eb) 18%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-primary, #2563eb) 30%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-primary, #2563eb) 36%, transparent);
+  }
+
+  :host([tone="success"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-success, #16a34a) 18%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-success, #16a34a) 36%, transparent);
+  }
+
+  :host([tone="warning"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-warning, #d97706) 20%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-warning, #d97706) 32%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-warning, #d97706) 38%, transparent);
+  }
+
+  :host([tone="danger"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-danger, #dc2626) 18%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-danger, #dc2626) 30%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-danger, #dc2626) 36%, transparent);
+  }
+
+  :host([headless]) .stack {
+    display: none;
+  }
+
+  @keyframes ui-skeleton-shimmer {
+    to {
+      background-position: -100% 50%;
+    }
+  }
+
+  @keyframes ui-skeleton-pulse {
+    0%,
+    100% {
+      opacity: 0.55;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ui-skeleton-wave {
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .stack .line,
+    .stack .line::after {
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .line {
+      outline: 1px solid color-mix(in srgb, var(--ui-color-border, currentColor) 82%, transparent);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .line {
+      forced-color-adjust: none;
+      background: CanvasText;
+      opacity: 0.25;
+      outline: 1px solid CanvasText;
+    }
+
+    .line::after {
+      display: none !important;
+    }
+  }
+`,o=["96%","86%","78%","92%","68%","88%"];class s extends g.ElementBase{static get observedAttributes(){return["count","height","width","radius","gap","variant","animated","animation","density","tone","duration","headless"]}_numAttr(e,t){const i=this.getAttribute(e);if(!i)return t;const n=Number(i);return Number.isFinite(n)&&n>0?n:t}_animationMode(){const e=(this.getAttribute("animation")||"").trim().toLowerCase();return e==="shimmer"||e==="pulse"||e==="wave"||e==="none"?e:this.hasAttribute("animated")?"shimmer":"none"}_lineWidth(e,t,i){return i&&i.trim()?i:t==="text"?o[e%o.length]||"92%":t==="badge"?"92px":t==="button"?"128px":t==="avatar"?"44px":"100%"}render(){const e=Math.max(1,Math.min(40,this._numAttr("count",1))),t=this.getAttribute("height"),i=this.getAttribute("width"),n=this.getAttribute("radius"),r=this.getAttribute("gap"),a=this.getAttribute("duration"),l=(this.getAttribute("variant")||"rect").trim(),u=this._animationMode(),d=Array.from({length:e},(m,c)=>`<div class="line" style="--ui-line-width:${this._lineWidth(c,l,i)};"></div>`).join("");this.setContent(`
+      <style>${h}</style>
+      <div
+        class="stack"
+        data-animation="${u}"
+        style="
+          ${t?`--ui-skeleton-height:${t};`:""}
+          ${i?`--ui-skeleton-width:${i};`:""}
+          ${n?`--ui-skeleton-radius:${n};`:""}
+          ${r?`--ui-skeleton-gap:${r};`:""}
+          ${a?`--ui-skeleton-duration:${a};`:""}
+        "
+        role="status"
+        aria-live="polite"
+        aria-busy="true"
+        aria-label="Loading"
+      >
+        ${d}
+      </div>
+    `)}shouldRenderOnAttributeChange(e,t,i){return!0}}typeof customElements<"u"&&!customElements.get("ui-skeleton")&&customElements.define("ui-skeleton",s);exports.UISkeleton=s;

package/dist/skeleton.esm.js

@@ -0,0 +1,249 @@
+import { E as c } from "./ElementBase-909688f3.mjs";
+const h = `
+  :host {
+    display: block;
+    --ui-skeleton-radius: 10px;
+    --ui-skeleton-height: 16px;
+    --ui-skeleton-width: 100%;
+    --ui-skeleton-gap: 10px;
+    --ui-skeleton-duration: 1.2s;
+
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-muted, #64748b) 20%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-surface, #ffffff) 68%, transparent);
+    --ui-skeleton-bg: linear-gradient(
+      110deg,
+      var(--ui-skeleton-base) 8%,
+      var(--ui-skeleton-glow) 18%,
+      var(--ui-skeleton-base) 33%
+    );
+    --ui-skeleton-bg-size: 200% 100%;
+
+    color-scheme: light dark;
+  }
+
+  .stack {
+    display: grid;
+    gap: var(--ui-skeleton-gap);
+  }
+
+  .line {
+    width: var(--ui-line-width, var(--ui-skeleton-width));
+    height: var(--ui-line-height, var(--ui-skeleton-height));
+    border-radius: var(--ui-line-radius, var(--ui-skeleton-radius));
+    background-color: var(--ui-skeleton-base);
+    background-image: var(--ui-skeleton-bg);
+    background-size: var(--ui-skeleton-bg-size);
+    background-position: 100% 50%;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    will-change: background-position, opacity, transform;
+  }
+
+  .stack[data-animation="shimmer"] .line {
+    animation: ui-skeleton-shimmer var(--ui-skeleton-duration) ease-in-out infinite;
+  }
+
+  .stack[data-animation="pulse"] .line {
+    animation: ui-skeleton-pulse var(--ui-skeleton-duration) ease-in-out infinite;
+  }
+
+  .stack[data-animation="wave"] .line::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      transparent 20%,
+      var(--ui-skeleton-wave) 50%,
+      transparent 80%,
+      transparent 100%
+    );
+    animation: ui-skeleton-wave var(--ui-skeleton-duration) linear infinite;
+  }
+
+  :host([variant="circle"]) .line {
+    --ui-line-height: var(--ui-skeleton-height);
+    --ui-line-width: var(--ui-skeleton-height);
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="text"]) .line {
+    --ui-line-height: 12px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="pill"]) .line {
+    --ui-line-height: 18px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="avatar"]) .line {
+    --ui-line-height: 44px;
+    --ui-line-width: 44px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="badge"]) .line {
+    --ui-line-height: 20px;
+    --ui-line-width: 92px;
+    --ui-line-radius: 999px;
+  }
+
+  :host([variant="button"]) .line {
+    --ui-line-height: 36px;
+    --ui-line-width: 128px;
+    --ui-line-radius: 8px;
+  }
+
+  :host([density="compact"]) {
+    --ui-skeleton-height: 14px;
+    --ui-skeleton-gap: 8px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-skeleton-height: 18px;
+    --ui-skeleton-gap: 12px;
+  }
+
+  :host([tone="brand"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-primary, #2563eb) 18%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-primary, #2563eb) 30%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-primary, #2563eb) 36%, transparent);
+  }
+
+  :host([tone="success"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-success, #16a34a) 18%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-success, #16a34a) 36%, transparent);
+  }
+
+  :host([tone="warning"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-warning, #d97706) 20%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-warning, #d97706) 32%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-warning, #d97706) 38%, transparent);
+  }
+
+  :host([tone="danger"]) {
+    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-danger, #dc2626) 18%, transparent);
+    --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-danger, #dc2626) 30%, transparent);
+    --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-danger, #dc2626) 36%, transparent);
+  }
+
+  :host([headless]) .stack {
+    display: none;
+  }
+
+  @keyframes ui-skeleton-shimmer {
+    to {
+      background-position: -100% 50%;
+    }
+  }
+
+  @keyframes ui-skeleton-pulse {
+    0%,
+    100% {
+      opacity: 0.55;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ui-skeleton-wave {
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .stack .line,
+    .stack .line::after {
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .line {
+      outline: 1px solid color-mix(in srgb, var(--ui-color-border, currentColor) 82%, transparent);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .line {
+      forced-color-adjust: none;
+      background: CanvasText;
+      opacity: 0.25;
+      outline: 1px solid CanvasText;
+    }
+
+    .line::after {
+      display: none !important;
+    }
+  }
+`, o = ["96%", "86%", "78%", "92%", "68%", "88%"];
+class g extends c {
+  static get observedAttributes() {
+    return [
+      "count",
+      "height",
+      "width",
+      "radius",
+      "gap",
+      "variant",
+      "animated",
+      "animation",
+      "density",
+      "tone",
+      "duration",
+      "headless"
+    ];
+  }
+  _numAttr(e, i) {
+    const t = this.getAttribute(e);
+    if (!t)
+      return i;
+    const n = Number(t);
+    return Number.isFinite(n) && n > 0 ? n : i;
+  }
+  _animationMode() {
+    const e = (this.getAttribute("animation") || "").trim().toLowerCase();
+    return e === "shimmer" || e === "pulse" || e === "wave" || e === "none" ? e : this.hasAttribute("animated") ? "shimmer" : "none";
+  }
+  _lineWidth(e, i, t) {
+    return t && t.trim() ? t : i === "text" ? o[e % o.length] || "92%" : i === "badge" ? "92px" : i === "button" ? "128px" : i === "avatar" ? "44px" : "100%";
+  }
+  render() {
+    const e = Math.max(1, Math.min(40, this._numAttr("count", 1))), i = this.getAttribute("height"), t = this.getAttribute("width"), n = this.getAttribute("radius"), r = this.getAttribute("gap"), a = this.getAttribute("duration"), s = (this.getAttribute("variant") || "rect").trim(), l = this._animationMode(), u = Array.from({ length: e }, (m, d) => `<div class="line" style="--ui-line-width:${this._lineWidth(d, s, t)};"></div>`).join("");
+    this.setContent(`
+      <style>${h}</style>
+      <div
+        class="stack"
+        data-animation="${l}"
+        style="
+          ${i ? `--ui-skeleton-height:${i};` : ""}
+          ${t ? `--ui-skeleton-width:${t};` : ""}
+          ${n ? `--ui-skeleton-radius:${n};` : ""}
+          ${r ? `--ui-skeleton-gap:${r};` : ""}
+          ${a ? `--ui-skeleton-duration:${a};` : ""}
+        "
+        role="status"
+        aria-live="polite"
+        aria-busy="true"
+        aria-label="Loading"
+      >
+        ${u}
+      </div>
+    `);
+  }
+  shouldRenderOnAttributeChange(e, i, t) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-skeleton") && customElements.define("ui-skeleton", g);
+export {
+  g as UISkeleton
+};