@editora/ui-core 0.1.8 → 0.1.10

package/dist/gantt.cjs.js

@@ -0,0 +1,157 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-1b301e7f.js"),d=`
+  :host {
+    --ui-gantt-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-gantt-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-gantt-text: var(--ui-color-text, #0f172a);
+    --ui-gantt-muted: var(--ui-color-muted, #64748b);
+    --ui-gantt-accent: var(--ui-color-primary, #2563eb);
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    border: 1px solid var(--ui-gantt-border);
+    border-radius: 14px;
+    background: var(--ui-gantt-bg);
+    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
+    padding: 12px;
+    display: grid;
+    gap: 10px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--ui-gantt-muted);
+  }
+
+  .rows {
+    display: grid;
+    gap: 8px;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
+    gap: 10px;
+    align-items: center;
+  }
+
+  .label {
+    font-size: 12px;
+    color: var(--ui-gantt-text);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .track {
+    position: relative;
+    border: 1px solid color-mix(in srgb, var(--ui-gantt-border) 72%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-gantt-bg) 90%, transparent);
+    min-block-size: 14px;
+  }
+
+  .bar {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    border-radius: 999px;
+    background: var(--tone, var(--ui-gantt-accent));
+    box-shadow: 0 6px 14px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 26%, transparent);
+    overflow: hidden;
+  }
+
+  .progress {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, color-mix(in srgb, #000 18%, transparent), transparent);
+    opacity: 0.28;
+    width: var(--progress, 0%);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-gantt-bg: #0f172a;
+    --ui-gantt-border: #334155;
+    --ui-gantt-text: #e2e8f0;
+    --ui-gantt-muted: #93a4bd;
+    --ui-gantt-accent: #93c5fd;
+  }
+
+  :host([headless]) .frame {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bar,
+    .progress {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame {
+      box-shadow: none;
+    }
+
+    .track {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-gantt-bg: Canvas;
+      --ui-gantt-border: CanvasText;
+      --ui-gantt-text: CanvasText;
+      --ui-gantt-muted: CanvasText;
+      --ui-gantt-accent: Highlight;
+    }
+
+    .frame,
+    .track,
+    .bar,
+    .progress {
+      forced-color-adjust: none;
+      box-shadow: none;
+      border-color: CanvasText;
+    }
+
+    .frame,
+    .track {
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .bar {
+      background: Highlight;
+    }
+  }
+`,u={default:"var(--ui-color-primary, #2563eb)",info:"var(--ui-color-info, #0891b2)",success:"var(--ui-color-success, #16a34a)",warning:"var(--ui-color-warning, #d97706)",danger:"var(--ui-color-danger, #dc2626)"};function s(o){const e=Date.parse(o);return Number.isFinite(e)?e:null}function k(o){if(!o)return[];try{const e=JSON.parse(o);return Array.isArray(e)?e.map(t=>{if(!t||typeof t!="object")return null;const i=String(t.label||"").trim(),a=String(t.start||"").trim(),n=String(t.end||"").trim();return!i||!a||!n||s(a)==null||s(n)==null?null:{id:t.id?String(t.id):void 0,label:i,start:a,end:n,progress:Number.isFinite(Number(t.progress))?Number(t.progress):void 0,tone:t.tone}}).filter(Boolean):[]}catch{return[]}}class p extends y.ElementBase{static get observedAttributes(){return["tasks","variant","headless"]}render(){const e=k(this.getAttribute("tasks"));if(!e.length){this.setContent(`
+        <style>${d}</style>
+        <section class="frame" part="frame">
+          <div class="header">No tasks in this range</div>
+        </section>
+      `);return}const t=e.map(r=>s(r.start)||0),i=e.map(r=>s(r.end)||0),a=Math.min(...t),n=Math.max(...i),c=Math.max(1,n-a),g=e.map(r=>{const l=s(r.start)||a,f=s(r.end)||l,x=(l-a)/c*100,v=Math.max(2,(Math.max(f,l)-l)/c*100),h=Math.max(0,Math.min(100,Number(r.progress??0))),w=u[r.tone||"default"]||u.default;return`
+          <article class="row" part="row">
+            <span class="label" title="${r.label}">${r.label}</span>
+            <div class="track">
+              <div class="bar" style="left:${x.toFixed(2)}%;width:${v.toFixed(2)}%;--tone:${w}">
+                <span class="progress" style="--progress:${h.toFixed(2)}%"></span>
+              </div>
+            </div>
+          </article>
+        `}).join(""),m=new Date(a).toLocaleDateString(),b=new Date(n).toLocaleDateString();this.setContent(`
+      <style>${d}</style>
+      <section class="frame" part="frame">
+        <header class="header" part="header"><span>${m}</span><span>${b}</span></header>
+        <div class="rows" part="rows">${g}</div>
+      </section>
+    `)}shouldRenderOnAttributeChange(e,t,i){return!0}}typeof customElements<"u"&&!customElements.get("ui-gantt")&&customElements.define("ui-gantt",p);exports.UIGantt=p;

package/dist/gantt.esm.js

@@ -0,0 +1,214 @@
+import { E as w } from "./ElementBase-909688f3.mjs";
+const d = `
+  :host {
+    --ui-gantt-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
+    --ui-gantt-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-gantt-text: var(--ui-color-text, #0f172a);
+    --ui-gantt-muted: var(--ui-color-muted, #64748b);
+    --ui-gantt-accent: var(--ui-color-primary, #2563eb);
+
+    display: block;
+    min-inline-size: 0;
+    color-scheme: light dark;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .frame {
+    border: 1px solid var(--ui-gantt-border);
+    border-radius: 14px;
+    background: var(--ui-gantt-bg);
+    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
+    padding: 12px;
+    display: grid;
+    gap: 10px;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--ui-gantt-muted);
+  }
+
+  .rows {
+    display: grid;
+    gap: 8px;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
+    gap: 10px;
+    align-items: center;
+  }
+
+  .label {
+    font-size: 12px;
+    color: var(--ui-gantt-text);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .track {
+    position: relative;
+    border: 1px solid color-mix(in srgb, var(--ui-gantt-border) 72%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-gantt-bg) 90%, transparent);
+    min-block-size: 14px;
+  }
+
+  .bar {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    border-radius: 999px;
+    background: var(--tone, var(--ui-gantt-accent));
+    box-shadow: 0 6px 14px color-mix(in srgb, var(--tone, var(--ui-gantt-accent)) 26%, transparent);
+    overflow: hidden;
+  }
+
+  .progress {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, color-mix(in srgb, #000 18%, transparent), transparent);
+    opacity: 0.28;
+    width: var(--progress, 0%);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-gantt-bg: #0f172a;
+    --ui-gantt-border: #334155;
+    --ui-gantt-text: #e2e8f0;
+    --ui-gantt-muted: #93a4bd;
+    --ui-gantt-accent: #93c5fd;
+  }
+
+  :host([headless]) .frame {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bar,
+    .progress {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame {
+      box-shadow: none;
+    }
+
+    .track {
+      border-width: 2px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-gantt-bg: Canvas;
+      --ui-gantt-border: CanvasText;
+      --ui-gantt-text: CanvasText;
+      --ui-gantt-muted: CanvasText;
+      --ui-gantt-accent: Highlight;
+    }
+
+    .frame,
+    .track,
+    .bar,
+    .progress {
+      forced-color-adjust: none;
+      box-shadow: none;
+      border-color: CanvasText;
+    }
+
+    .frame,
+    .track {
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .bar {
+      background: Highlight;
+    }
+  }
+`, u = {
+  default: "var(--ui-color-primary, #2563eb)",
+  info: "var(--ui-color-info, #0891b2)",
+  success: "var(--ui-color-success, #16a34a)",
+  warning: "var(--ui-color-warning, #d97706)",
+  danger: "var(--ui-color-danger, #dc2626)"
+};
+function s(o) {
+  const e = Date.parse(o);
+  return Number.isFinite(e) ? e : null;
+}
+function y(o) {
+  if (!o)
+    return [];
+  try {
+    const e = JSON.parse(o);
+    return Array.isArray(e) ? e.map((t) => {
+      if (!t || typeof t != "object")
+        return null;
+      const i = String(t.label || "").trim(), a = String(t.start || "").trim(), n = String(t.end || "").trim();
+      return !i || !a || !n || s(a) == null || s(n) == null ? null : {
+        id: t.id ? String(t.id) : void 0,
+        label: i,
+        start: a,
+        end: n,
+        progress: Number.isFinite(Number(t.progress)) ? Number(t.progress) : void 0,
+        tone: t.tone
+      };
+    }).filter(Boolean) : [];
+  } catch {
+    return [];
+  }
+}
+class k extends w {
+  static get observedAttributes() {
+    return ["tasks", "variant", "headless"];
+  }
+  render() {
+    const e = y(this.getAttribute("tasks"));
+    if (!e.length) {
+      this.setContent(`
+        <style>${d}</style>
+        <section class="frame" part="frame">
+          <div class="header">No tasks in this range</div>
+        </section>
+      `);
+      return;
+    }
+    const t = e.map((r) => s(r.start) || 0), i = e.map((r) => s(r.end) || 0), a = Math.min(...t), n = Math.max(...i), c = Math.max(1, n - a), p = e.map((r) => {
+      const l = s(r.start) || a, b = s(r.end) || l, f = (l - a) / c * 100, x = Math.max(2, (Math.max(b, l) - l) / c * 100), v = Math.max(0, Math.min(100, Number(r.progress ?? 0))), h = u[r.tone || "default"] || u.default;
+      return `
+          <article class="row" part="row">
+            <span class="label" title="${r.label}">${r.label}</span>
+            <div class="track">
+              <div class="bar" style="left:${f.toFixed(2)}%;width:${x.toFixed(2)}%;--tone:${h}">
+                <span class="progress" style="--progress:${v.toFixed(2)}%"></span>
+              </div>
+            </div>
+          </article>
+        `;
+    }).join(""), g = new Date(a).toLocaleDateString(), m = new Date(n).toLocaleDateString();
+    this.setContent(`
+      <style>${d}</style>
+      <section class="frame" part="frame">
+        <header class="header" part="header"><span>${g}</span><span>${m}</span></header>
+        <div class="rows" part="rows">${p}</div>
+      </section>
+    `);
+  }
+  shouldRenderOnAttributeChange(e, t, i) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-gantt") && customElements.define("ui-gantt", k);
+export {
+  k as UIGantt
+};

package/dist/grid.cjs.js

@@ -0,0 +1,67 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-1b301e7f.js"),w={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},g=["display","columns","rows","gap","rowgap","columngap","autoflow","autorows","autocolumns","align","justify","place","aligncontent","justifycontent","placecontent"],v={xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)"},b=`
+  :host {
+    --ui-grid-display: grid;
+    --ui-grid-columns: 1fr;
+    --ui-grid-rows: none;
+    --ui-grid-gap: 0px;
+    --ui-grid-row-gap: var(--ui-grid-gap);
+    --ui-grid-column-gap: var(--ui-grid-gap);
+    --ui-grid-auto-flow: row;
+    --ui-grid-auto-rows: auto;
+    --ui-grid-auto-columns: auto;
+    --ui-grid-align-items: stretch;
+    --ui-grid-justify-items: stretch;
+    --ui-grid-place-items: initial;
+    --ui-grid-align-content: normal;
+    --ui-grid-justify-content: normal;
+    --ui-grid-place-content: initial;
+    --ui-grid-color: var(--ui-color-text, inherit);
+    color-scheme: light dark;
+    display: var(--ui-grid-display);
+    color: var(--ui-grid-color);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    grid-template-columns: var(--ui-grid-columns);
+    grid-template-rows: var(--ui-grid-rows);
+    gap: var(--ui-grid-gap);
+    row-gap: var(--ui-grid-row-gap);
+    column-gap: var(--ui-grid-column-gap);
+    grid-auto-flow: var(--ui-grid-auto-flow);
+    grid-auto-rows: var(--ui-grid-auto-rows);
+    grid-auto-columns: var(--ui-grid-auto-columns);
+    align-items: var(--ui-grid-align-items);
+    justify-items: var(--ui-grid-justify-items);
+    place-items: var(--ui-grid-place-items);
+    align-content: var(--ui-grid-align-content);
+    justify-content: var(--ui-grid-justify-content);
+    place-content: var(--ui-grid-place-content);
+  }
+
+  slot {
+    display: contents;
+  }
+
+  :host([headless]) {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-grid-color: var(--ui-color-text, inherit);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-grid-color: CanvasText;
+    }
+  }
+`;function p(s){if(!s)return null;const i=s.trim();if(!i.startsWith("{"))return null;try{const t=JSON.parse(i);return!t||typeof t!="object"?null:t}catch{return null}}function d(s){return v[s]||s}function m(s,i){switch(s){case"display":return{"--ui-grid-display":i};case"columns":return{"--ui-grid-columns":i};case"rows":return{"--ui-grid-rows":i};case"gap":return{"--ui-grid-gap":d(i)};case"rowgap":return{"--ui-grid-row-gap":d(i)};case"columngap":return{"--ui-grid-column-gap":d(i)};case"autoflow":return{"--ui-grid-auto-flow":i};case"autorows":return{"--ui-grid-auto-rows":i};case"autocolumns":return{"--ui-grid-auto-columns":i};case"align":return{"--ui-grid-align-items":i};case"justify":return{"--ui-grid-justify-items":i};case"place":return{"--ui-grid-place-items":i};case"aligncontent":return{"--ui-grid-align-content":i};case"justifycontent":return{"--ui-grid-justify-content":i};case"placecontent":return{"--ui-grid-place-content":i};default:return{}}}class f extends y.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set}static get observedAttributes(){return["classname","headless",...g]}_syncLegacyClassname(){const i=this.getAttribute("classname")||"";i!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(t=>{t&&this.classList.remove(t)}),i&&i.split(/\s+/).forEach(t=>{t&&this.classList.add(t)}),this._lastClassname=i)}_applyInlineStyles(){this._appliedInlineProps.forEach(i=>this.style.removeProperty(i)),this._appliedInlineProps.clear(),g.forEach(i=>{const t=this.getAttribute(i);if(!t||p(t))return;const u=m(i,t);Object.entries(u).forEach(([a,l])=>{this.style.setProperty(a,l),this._appliedInlineProps.add(a)})})}_buildResponsiveCss(){const i={},t={sm:{},md:{},lg:{},xl:{}};g.forEach(r=>{const o=this.getAttribute(r),e=p(o);if(!e)return;const n=(c,h)=>{Object.assign(c,m(r,h))};typeof e.initial=="string"&&n(i,e.initial),typeof e.sm=="string"&&n(t.sm,e.sm),typeof e.md=="string"&&n(t.md,e.md),typeof e.lg=="string"&&n(t.lg,e.lg),typeof e.xl=="string"&&n(t.xl,e.xl)});const u=(r,o)=>{const e=Object.entries(o);return e.length?`${r} { ${e.map(([n,c])=>`${n}: ${c};`).join(" ")} }`:""},a=[],l=u(":host",i);return l&&a.push(l),Object.keys(t).forEach(r=>{const o=u(":host",t[r]);o&&a.push(`@media (min-width: ${w[r]}) { ${o} }`)}),a.join(`
+`)}render(){this._syncLegacyClassname(),this._applyInlineStyles();const i=this._buildResponsiveCss();this.setContent(`<style>${b}${i?`
+${i}`:""}</style><slot></slot>`),this.dispatchEvent(new CustomEvent("layoutchange",{bubbles:!0,composed:!0}))}shouldRenderOnAttributeChange(i,t,u){return!0}}typeof customElements<"u"&&!customElements.get("ui-grid")&&customElements.define("ui-grid",f);exports.UIGrid=f;

package/dist/grid.esm.js

@@ -0,0 +1,211 @@
+import { E as h } from "./ElementBase-909688f3.mjs";
+const y = {
+  sm: "var(--ui-breakpoint-sm, 640px)",
+  md: "var(--ui-breakpoint-md, 768px)",
+  lg: "var(--ui-breakpoint-lg, 1024px)",
+  xl: "var(--ui-breakpoint-xl, 1280px)"
+}, g = [
+  "display",
+  "columns",
+  "rows",
+  "gap",
+  "rowgap",
+  "columngap",
+  "autoflow",
+  "autorows",
+  "autocolumns",
+  "align",
+  "justify",
+  "place",
+  "aligncontent",
+  "justifycontent",
+  "placecontent"
+], w = {
+  xs: "var(--ui-space-xs, 4px)",
+  sm: "var(--ui-space-sm, 8px)",
+  md: "var(--ui-space-md, 12px)",
+  lg: "var(--ui-space-lg, 20px)",
+  xl: "var(--ui-space-xl, 28px)"
+}, v = `
+  :host {
+    --ui-grid-display: grid;
+    --ui-grid-columns: 1fr;
+    --ui-grid-rows: none;
+    --ui-grid-gap: 0px;
+    --ui-grid-row-gap: var(--ui-grid-gap);
+    --ui-grid-column-gap: var(--ui-grid-gap);
+    --ui-grid-auto-flow: row;
+    --ui-grid-auto-rows: auto;
+    --ui-grid-auto-columns: auto;
+    --ui-grid-align-items: stretch;
+    --ui-grid-justify-items: stretch;
+    --ui-grid-place-items: initial;
+    --ui-grid-align-content: normal;
+    --ui-grid-justify-content: normal;
+    --ui-grid-place-content: initial;
+    --ui-grid-color: var(--ui-color-text, inherit);
+    color-scheme: light dark;
+    display: var(--ui-grid-display);
+    color: var(--ui-grid-color);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    grid-template-columns: var(--ui-grid-columns);
+    grid-template-rows: var(--ui-grid-rows);
+    gap: var(--ui-grid-gap);
+    row-gap: var(--ui-grid-row-gap);
+    column-gap: var(--ui-grid-column-gap);
+    grid-auto-flow: var(--ui-grid-auto-flow);
+    grid-auto-rows: var(--ui-grid-auto-rows);
+    grid-auto-columns: var(--ui-grid-auto-columns);
+    align-items: var(--ui-grid-align-items);
+    justify-items: var(--ui-grid-justify-items);
+    place-items: var(--ui-grid-place-items);
+    align-content: var(--ui-grid-align-content);
+    justify-content: var(--ui-grid-justify-content);
+    place-content: var(--ui-grid-place-content);
+  }
+
+  slot {
+    display: contents;
+  }
+
+  :host([headless]) {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      scroll-behavior: auto;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-grid-color: var(--ui-color-text, inherit);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-grid-color: CanvasText;
+    }
+  }
+`;
+function p(r) {
+  if (!r)
+    return null;
+  const i = r.trim();
+  if (!i.startsWith("{"))
+    return null;
+  try {
+    const t = JSON.parse(i);
+    return !t || typeof t != "object" ? null : t;
+  } catch {
+    return null;
+  }
+}
+function d(r) {
+  return w[r] || r;
+}
+function m(r, i) {
+  switch (r) {
+    case "display":
+      return { "--ui-grid-display": i };
+    case "columns":
+      return { "--ui-grid-columns": i };
+    case "rows":
+      return { "--ui-grid-rows": i };
+    case "gap":
+      return { "--ui-grid-gap": d(i) };
+    case "rowgap":
+      return { "--ui-grid-row-gap": d(i) };
+    case "columngap":
+      return { "--ui-grid-column-gap": d(i) };
+    case "autoflow":
+      return { "--ui-grid-auto-flow": i };
+    case "autorows":
+      return { "--ui-grid-auto-rows": i };
+    case "autocolumns":
+      return { "--ui-grid-auto-columns": i };
+    case "align":
+      return { "--ui-grid-align-items": i };
+    case "justify":
+      return { "--ui-grid-justify-items": i };
+    case "place":
+      return { "--ui-grid-place-items": i };
+    case "aligncontent":
+      return { "--ui-grid-align-content": i };
+    case "justifycontent":
+      return { "--ui-grid-justify-content": i };
+    case "placecontent":
+      return { "--ui-grid-place-content": i };
+    default:
+      return {};
+  }
+}
+class x extends h {
+  constructor() {
+    super(...arguments), this._lastClassname = "", this._appliedInlineProps = /* @__PURE__ */ new Set();
+  }
+  static get observedAttributes() {
+    return ["classname", "headless", ...g];
+  }
+  _syncLegacyClassname() {
+    const i = this.getAttribute("classname") || "";
+    i !== this._lastClassname && (this._lastClassname && this._lastClassname.split(/\s+/).forEach((t) => {
+      t && this.classList.remove(t);
+    }), i && i.split(/\s+/).forEach((t) => {
+      t && this.classList.add(t);
+    }), this._lastClassname = i);
+  }
+  _applyInlineStyles() {
+    this._appliedInlineProps.forEach((i) => this.style.removeProperty(i)), this._appliedInlineProps.clear(), g.forEach((i) => {
+      const t = this.getAttribute(i);
+      if (!t || p(t))
+        return;
+      const u = m(i, t);
+      Object.entries(u).forEach(([a, l]) => {
+        this.style.setProperty(a, l), this._appliedInlineProps.add(a);
+      });
+    });
+  }
+  _buildResponsiveCss() {
+    const i = {}, t = {
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    };
+    g.forEach((e) => {
+      const o = this.getAttribute(e), s = p(o);
+      if (!s)
+        return;
+      const n = (c, f) => {
+        Object.assign(c, m(e, f));
+      };
+      typeof s.initial == "string" && n(i, s.initial), typeof s.sm == "string" && n(t.sm, s.sm), typeof s.md == "string" && n(t.md, s.md), typeof s.lg == "string" && n(t.lg, s.lg), typeof s.xl == "string" && n(t.xl, s.xl);
+    });
+    const u = (e, o) => {
+      const s = Object.entries(o);
+      return s.length ? `${e} { ${s.map(([n, c]) => `${n}: ${c};`).join(" ")} }` : "";
+    }, a = [], l = u(":host", i);
+    return l && a.push(l), Object.keys(t).forEach((e) => {
+      const o = u(":host", t[e]);
+      o && a.push(`@media (min-width: ${y[e]}) { ${o} }`);
+    }), a.join(`
+`);
+  }
+  render() {
+    this._syncLegacyClassname(), this._applyInlineStyles();
+    const i = this._buildResponsiveCss();
+    this.setContent(`<style>${v}${i ? `
+${i}` : ""}</style><slot></slot>`), this.dispatchEvent(new CustomEvent("layoutchange", { bubbles: !0, composed: !0 }));
+  }
+  shouldRenderOnAttributeChange(i, t, u) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-grid") && customElements.define("ui-grid", x);
+export {
+  x as UIGrid
+};