@editora/ui-core 0.1.21 → 0.1.23

package/dist/gantt.esm.js

@@ -1,5 +1,5 @@
-import { E as It } from "./ElementBase-YlTLMsGk.mjs";
-const I = 1440 * 60 * 1e3, y = 42, _ = 62, J = 376, N = 28, At = 15, vt = At * Math.SQRT2 / 2, gt = {
+import { E as It } from "./ElementBase-BeZT54Hj.mjs";
+const I = 1440 * 60 * 1e3, y = 42, j = 62, J = 376, N = 28, At = 15, vt = At * Math.SQRT2 / 2, gt = {
   day: 36,
   week: 13,
   month: 4.4,
@@ -12,7 +12,7 @@ const I = 1440 * 60 * 1e3, y = 42, _ = 62, J = 376, N = 28, At = 15, vt = At * M
     --ui-gantt-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
     --ui-gantt-grid: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 56%, transparent);
     --ui-gantt-text: var(--ui-color-text, #0f172a);
-    --ui-gantt-muted: var(--ui-color-muted, #64748b);
+    --ui-gantt-muted: var(--ui-color-muted, #526175);
     --ui-gantt-accent: var(--ui-color-primary, #2563eb);
     --ui-gantt-selected: color-mix(in srgb, var(--ui-gantt-accent) 10%, transparent);
     display: block;
@@ -95,7 +95,7 @@ const I = 1440 * 60 * 1e3, y = 42, _ = 62, J = 376, N = 28, At = 15, vt = At * M
   .zoom-button[aria-pressed="true"] {
     border-color: color-mix(in srgb, var(--ui-gantt-accent) 46%, var(--ui-gantt-border));
     background: color-mix(in srgb, var(--ui-gantt-accent) 10%, var(--ui-gantt-panel));
-    color: var(--ui-gantt-accent);
+    color: color-mix(in srgb, var(--ui-gantt-accent) 82%, var(--ui-gantt-text));
   }
 
   .viewport {
@@ -119,6 +119,17 @@ const I = 1440 * 60 * 1e3, y = 42, _ = 62, J = 376, N = 28, At = 15, vt = At * M
     border-bottom: 1px solid var(--ui-gantt-border);
   }
 
+  /* Explicit placement: the treegrid wrapper (display: contents) now holds the grid head and body
+     next to each other in the DOM, so the four panes no longer rely on source order. */
+  .grid-head { grid-column: 1; grid-row: 1; }
+  .timeline-head { grid-column: 2; grid-row: 1; }
+  .grid-body { grid-column: 1; grid-row: 2; }
+  .timeline-body { grid-column: 2; grid-row: 2; }
+
+  .grid-semantics {
+    display: contents;
+  }
+
   .grid-head {
     left: 0;
     z-index: 5;
@@ -665,65 +676,65 @@ const I = 1440 * 60 * 1e3, y = 42, _ = 62, J = 376, N = 28, At = 15, vt = At * M
   }
 `, mt = {
   default: "var(--ui-color-primary, #2563eb)",
-  info: "var(--ui-color-info, #0891b2)",
-  success: "var(--ui-color-success, #16a34a)",
-  warning: "var(--ui-color-warning, #d97706)",
+  info: "var(--ui-color-info, #0e7490)",
+  success: "var(--ui-color-success, #15803d)",
+  warning: "var(--ui-color-warning, #b45309)",
   danger: "var(--ui-color-danger, #dc2626)"
 };
-function f(a) {
+function b(a) {
   return String(a ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function b(a) {
+function f(a) {
   if (a instanceof Date) {
     const n = a.getTime();
-    return Number.isFinite(n) ? D(n) : null;
+    return Number.isFinite(n) ? F(n) : null;
   }
   const t = String(a || "").trim(), i = /^(\d{4})-(\d{2})-(\d{2})$/.exec(t);
   if (i) {
     const n = Number(i[1]), s = Number(i[2]), l = Number(i[3]), p = new Date(n, s - 1, l).getTime();
-    return Number.isFinite(p) ? D(p) : null;
+    return Number.isFinite(p) ? F(p) : null;
   }
   const e = Date.parse(t);
-  return Number.isFinite(e) ? D(e) : null;
+  return Number.isFinite(e) ? F(e) : null;
 }
-function D(a) {
+function F(a) {
   const t = new Date(a);
   return t.setHours(0, 0, 0, 0), t.getTime();
 }
 function x(a, t) {
-  return D(a + t * I);
+  return F(a + t * I);
 }
-function S(a) {
+function E(a) {
   const t = new Date(a), i = t.getFullYear(), e = String(t.getMonth() + 1).padStart(2, "0"), n = String(t.getDate()).padStart(2, "0");
   return `${i}-${e}-${n}`;
 }
 function O(a) {
   return new Intl.DateTimeFormat(void 0, { month: "short", day: "numeric" }).format(new Date(a));
 }
-function ft(a) {
+function bt(a) {
   return a === "day" || a === "month" || a === "quarter" || a === "year" ? a : "week";
 }
-function j(a) {
+function _(a) {
   return a === "start" || a === "end" || a === "label" || a === "progress" ? a : "none";
 }
 function Lt(a) {
   return a === "soft" || a === "striped" || a === "outline" || a === "glass" ? a : "solid";
 }
-function Ft(a, t) {
+function Dt(a, t) {
   if (!a) return [];
   try {
     const i = JSON.parse(a);
     return Array.isArray(i) ? i.map((e, n) => {
       if (!e || typeof e != "object") return null;
-      const s = e, l = String(s.label || s.text || "").trim(), o = b(s.start), p = Number(s.duration);
-      let u = b(s.end);
+      const s = e, l = String(s.label || s.text || "").trim(), o = f(s.start), p = Number(s.duration);
+      let u = f(s.end);
       if (u == null && o != null && Number.isFinite(p) && (u = x(o, Math.max(0, p))), !l || o == null) return null;
       const d = s.type === "summary" || s.type === "milestone" ? s.type : "task", g = d === "milestone" ? o : Math.max(u ?? x(o, 1), x(o, 1)), c = String(s.id || `task-${n + 1}`), m = t.get(c) || {};
       return {
         id: c,
         label: l,
-        start: m.start || S(o),
-        end: m.end || S(g),
+        start: m.start || E(o),
+        end: m.end || E(g),
         progress: Number.isFinite(Number(s.progress)) ? Math.max(0, Math.min(100, Number(s.progress))) : void 0,
         tone: typeof s.tone == "string" ? s.tone : void 0,
         type: d,
@@ -741,7 +752,7 @@ function Ft(a, t) {
     return [];
   }
 }
-function Dt(a) {
+function Ft(a) {
   if (!a) return [];
   try {
     const t = JSON.parse(a);
@@ -760,7 +771,7 @@ function Rt(a, t) {
   return t === "none" ? a : [...a].sort((i, e) => {
     if (t === "label") return i.label.localeCompare(e.label);
     if (t === "progress") return Number(e.progress ?? 0) - Number(i.progress ?? 0);
-    const n = b(t === "start" ? i.start : i.end) ?? 0, s = b(t === "start" ? e.start : e.end) ?? 0;
+    const n = f(t === "start" ? i.start : i.end) ?? 0, s = f(t === "start" ? e.start : e.end) ?? 0;
     return n - s;
   });
 }
@@ -773,7 +784,7 @@ function qt(a, t, i, e) {
   const l = i.trim().toLowerCase(), o = (d) => !l || d.label.toLowerCase().includes(l) || (d.assignee || "").toLowerCase().includes(l) ? !0 : (n.get(d.id) || []).some(o), p = [], u = (d, g) => {
     Rt(n.get(d) || [], e).forEach((c) => {
       if (!o(c)) return;
-      const m = b(c.start), h = b(c.end);
+      const m = f(c.start), h = f(c.end);
       if (m == null || h == null) return;
       const w = (n.get(c.id) || []).length > 0;
       p.push({ ...c, depth: g, hasChildren: w, startMs: m, endMs: h }), w && !t.has(c.id) && u(c.id, g + 1);
@@ -785,14 +796,14 @@ function Nt(a, t, i, e, n = 0, s = Number.POSITIVE_INFINITY) {
   const l = Math.max(1, Math.ceil((t - a) / I)), o = e === "day" ? 1 : e === "week" ? 7 : e === "month" ? 30 : e === "quarter" ? 91 : 365, p = Math.max(0, Math.floor(Math.max(0, n - 480) / i / o) * o), u = Math.min(l, Math.ceil((n + s + 960) / i / o) * o), d = [];
   for (let g = p; g <= u; g += o) {
     const c = g * i, m = x(a, g), h = e === "day" ? O(m) : new Intl.DateTimeFormat(void 0, { month: "short", year: e === "week" || e === "month" ? void 0 : "numeric" }).format(new Date(m));
-    d.push(`<span class="tick" style="left:${c.toFixed(2)}px">${f(h)}</span>`);
+    d.push(`<span class="tick" style="left:${c.toFixed(2)}px">${b(h)}</span>`);
   }
   return d.join("");
 }
 function H(a) {
   return a.type === "summary" || a.hasChildren ? "summary" : a.type === "milestone" || a.startMs === a.endMs ? "milestone" : "task";
 }
-function bt(a) {
+function ft(a) {
   const t = H(a);
   return t === "summary" ? 17 + 9 / 2 : t === "milestone" ? 7 + N / 2 : 12 + 18 / 2;
 }
@@ -808,8 +819,8 @@ function xt(a, t, i) {
 function Wt(a = "e2s") {
   return a === "s2s" ? { source: "start", target: "start" } : a === "e2e" ? { source: "end", target: "end" } : a === "s2e" ? { source: "start", target: "end" } : { source: "end", target: "start" };
 }
-function _t(a, t, i, e, n, s) {
-  const l = Wt(n), o = l.source === "start" ? -1 : 1, p = l.target === "start" ? 1 : -1, u = xt(a, l.source, s), d = xt(i, l.target, s), g = t * y + bt(a), c = e * y + bt(i), m = 22, h = u + o * m, w = d - p * m, M = 26;
+function jt(a, t, i, e, n, s) {
+  const l = Wt(n), o = l.source === "start" ? -1 : 1, p = l.target === "start" ? 1 : -1, u = xt(a, l.source, s), d = xt(i, l.target, s), g = t * y + ft(a), c = e * y + ft(i), m = 22, h = u + o * m, w = d - p * m, M = 26;
   let k = (h + w) / 2;
   if (o === p) {
     const T = o === 1 ? Math.max(h, w, u, d) + M : Math.min(h, w, u, d) - M;
@@ -819,7 +830,7 @@ function _t(a, t, i, e, n, s) {
   const A = Math.abs(c - g) < 1 ? l.target === "start" ? c - 16 : c + 16 : c > g ? c - y / 2 + 3 : c + y / 2 - 3;
   return [[u, g], [h, g], [k, g], [k, A], [w, A], [w, c], [d, c]].map(([T, R], P) => `${P === 0 ? "M" : "L"} ${T.toFixed(1)} ${R.toFixed(1)}`).join(" ");
 }
-class jt extends It {
+class _t extends It {
   constructor() {
     super(...arguments), this.collapsed = /* @__PURE__ */ new Set(), this.overrides = /* @__PURE__ */ new Map(), this.drag = null, this.selectedId = null, this.internalFilter = "", this.viewportTop = 0, this.viewportLeft = 0, this.viewportWidth = 1800, this.viewportHeight = 620, this.renderedFirstRow = 0, this.renderedLastRow = 0, this.scrollFrame = null, this.overridesVersion = 0, this.taskCacheRaw = null, this.taskCacheVersion = -1, this.taskCache = [], this.linkCacheRaw = null, this.linkCache = [], this.visibleCacheKey = "", this.visibleCache = [];
   }
@@ -827,7 +838,7 @@ class jt extends It {
     return ["tasks", "links", "zoom", "filter", "sort", "bar-variant", "variant", "readonly", "show-toolbar", "show-today", "headless"];
   }
   render() {
-    const t = this.getTasks(), i = this.getLinks(), e = ft(this.getAttribute("zoom")), n = j(this.getAttribute("sort")), s = Lt(this.getAttribute("bar-variant")), l = this.getAttribute("filter") ?? this.internalFilter, o = this.getVisibleTasks(t, l, n), p = this.hasAttribute("readonly"), u = this.getAttribute("show-toolbar") !== "false", d = this.getAttribute("show-today") !== "false";
+    const t = this.getTasks(), i = this.getLinks(), e = bt(this.getAttribute("zoom")), n = _(this.getAttribute("sort")), s = Lt(this.getAttribute("bar-variant")), l = this.getAttribute("filter") ?? this.internalFilter, o = this.getVisibleTasks(t, l, n), p = this.hasAttribute("readonly"), u = this.getAttribute("show-toolbar") !== "false", d = this.getAttribute("show-today") !== "false";
     if (!t.length) {
       this.setContent(`
         <style>${ht}</style>
@@ -837,24 +848,24 @@ class jt extends It {
       `);
       return;
     }
-    const g = t.map((r) => b(r.start)).filter((r) => r != null), c = t.map((r) => b(r.end)).filter((r) => r != null), m = x(Math.min(...g), -2), h = x(Math.max(...c), 3), w = Math.max(7, Math.ceil((h - m) / I)), M = gt[e], k = Math.max(680, w * M), A = Math.max(o.length * y, y), z = this.getAttribute("virtualized") !== "false" && o.length > 240, T = Math.max(20, Math.ceil(Math.max(420, this.viewportHeight - _) / y)), R = 160, P = Math.max(0, this.viewportTop - _), wt = Math.max(0, Math.floor(P / y)), X = Math.max(180, T * 4), L = z ? Math.max(0, Math.floor(wt / X) * X - R) : 0, B = z ? Math.min(o.length, L + T + R * 2 + X) : o.length, K = o.slice(L, B), V = L * y, W = Math.max(0, (o.length - B) * y);
+    const g = t.map((r) => f(r.start)).filter((r) => r != null), c = t.map((r) => f(r.end)).filter((r) => r != null), m = x(Math.min(...g), -2), h = x(Math.max(...c), 3), w = Math.max(7, Math.ceil((h - m) / I)), M = gt[e], k = Math.max(680, w * M), A = Math.max(o.length * y, y), S = this.getAttribute("virtualized") !== "false" && o.length > 240, T = Math.max(20, Math.ceil(Math.max(420, this.viewportHeight - j) / y)), R = 160, P = Math.max(0, this.viewportTop - j), wt = Math.max(0, Math.floor(P / y)), X = Math.max(180, T * 4), L = S ? Math.max(0, Math.floor(wt / X) * X - R) : 0, B = S ? Math.min(o.length, L + T + R * 2 + X) : o.length, K = o.slice(L, B), V = L * y, W = Math.max(0, (o.length - B) * y);
     this.renderedFirstRow = L, this.renderedLastRow = B;
-    const Q = new Map(o.map((r, $) => [r.id, { task: r, index: $ }])), tt = new Set(K.map((r) => r.id)), C = (r) => (r - m) / I * M, yt = K.map((r, $) => {
-      const E = L + $, v = this.selectedId === r.id ? " selected" : "", F = H(r), G = r.progress == null ? "-" : `${Math.round(r.progress)}%`, U = F === "milestone" ? O(r.startMs) : `${O(r.startMs)} - ${O(r.endMs)}`;
+    const Q = new Map(o.map((r, $) => [r.id, { task: r, index: $ }])), tt = new Set(K.map((r) => r.id)), z = (r) => (r - m) / I * M, yt = K.map((r, $) => {
+      const C = L + $, v = this.selectedId === r.id ? " selected" : "", D = H(r), G = r.progress == null ? "-" : `${Math.round(r.progress)}%`, U = D === "milestone" ? O(r.startMs) : `${O(r.startMs)} - ${O(r.endMs)}`;
       return `
-        <article class="grid-row${v}" part="grid-row" data-task-id="${f(r.id)}" role="row" aria-rowindex="${E + 2}" aria-level="${r.depth + 1}" ${r.hasChildren ? `aria-expanded="${!this.collapsed.has(r.id)}"` : ""}>
+        <div class="grid-row${v}" part="grid-row" data-task-id="${b(r.id)}" role="row" aria-rowindex="${C + 2}" aria-level="${r.depth + 1}" ${r.hasChildren ? `aria-expanded="${!this.collapsed.has(r.id)}"` : ""}>
           <div class="grid-cell task-name" role="gridcell" style="padding-left:${10 + r.depth * 18}px">
-            ${r.hasChildren ? `<button class="expander" data-action="toggle" data-task-id="${f(r.id)}" aria-label="${this.collapsed.has(r.id) ? "Expand" : "Collapse"} ${f(r.label)}">${this.collapsed.has(r.id) ? "›" : "⌄"}</button>` : '<span style="inline-size:22px"></span>'}
-            <span class="name-text" title="${f(r.label)}">${f(r.label)}</span>
+            ${r.hasChildren ? `<button class="expander" data-action="toggle" data-task-id="${b(r.id)}" aria-label="${this.collapsed.has(r.id) ? "Expand" : "Collapse"} ${b(r.label)}">${this.collapsed.has(r.id) ? "›" : "⌄"}</button>` : '<span style="inline-size:22px"></span>'}
+            <span class="name-text" title="${b(r.label)}">${b(r.label)}</span>
           </div>
-          <div class="grid-cell badge" role="gridcell">${f(r.assignee || F)}</div>
-          <div class="grid-cell badge" role="gridcell">${f(U)}</div>
-          <div class="grid-cell badge" role="gridcell">${f(G)}</div>
-        </article>
+          <div class="grid-cell badge" role="gridcell">${b(r.assignee || D)}</div>
+          <div class="grid-cell badge" role="gridcell">${b(U)}</div>
+          <div class="grid-cell badge" role="gridcell">${b(G)}</div>
+        </div>
       `;
     }).join(""), kt = K.map((r, $) => {
-      const E = L + $, v = H(r), F = this.selectedId === r.id ? " selected" : "", G = this.selectedId === r.id || !this.selectedId && E === 0, U = mt[r.tone || (v === "summary" ? "info" : "default")] || mt.default, rt = v === "milestone" ? C(r.startMs) - N / 2 : C(r.startMs), St = C(v === "milestone" ? r.startMs : r.endMs), zt = v === "milestone" ? N : Math.max(12, St - rt), Ct = Math.max(0, Math.min(100, Number(r.progress ?? 0))), at = !p && !r.readonly && v !== "summary", nt = at && v === "task", it = v === "task" && r.segments?.length ? r.segments.map((st) => {
-        const ot = b(st.start), lt = b(st.end);
+      const C = L + $, v = H(r), D = this.selectedId === r.id ? " selected" : "", G = this.selectedId === r.id || !this.selectedId && C === 0, U = mt[r.tone || (v === "summary" ? "info" : "default")] || mt.default, rt = v === "milestone" ? z(r.startMs) - N / 2 : z(r.startMs), St = z(v === "milestone" ? r.startMs : r.endMs), zt = v === "milestone" ? N : Math.max(12, St - rt), Ct = Math.max(0, Math.min(100, Number(r.progress ?? 0))), at = !p && !r.readonly && v !== "summary", nt = at && v === "task", it = v === "task" && r.segments?.length ? r.segments.map((st) => {
+        const ot = f(st.start), lt = f(st.end);
         if (ot == null || lt == null) return "";
         const dt = Math.max(I, r.endMs - r.startMs), Z = Math.max(r.startMs, ot), ct = Math.min(r.endMs, lt);
         if (ct <= Z) return "";
@@ -862,19 +873,17 @@ class jt extends It {
         return ut <= 0 ? "" : `<span class="split-segment" style="left:${pt.toFixed(2)}%;width:${ut.toFixed(2)}%"></span>`;
       }).join("") : "";
       return `
-        <article class="timeline-row${F}" part="timeline-row" data-task-id="${f(r.id)}" role="row" aria-rowindex="${E + 2}">
-          ${r.baselineStart && r.baselineEnd ? `<span class="baseline" style="left:${C(b(r.baselineStart) || r.startMs).toFixed(2)}px;width:${Math.max(4, C(b(r.baselineEnd) || r.endMs) - C(b(r.baselineStart) || r.startMs)).toFixed(2)}px"></span>` : ""}
+        <div class="timeline-row${D}" part="timeline-row" data-task-id="${b(r.id)}">
+          ${r.baselineStart && r.baselineEnd ? `<span class="baseline" style="left:${z(f(r.baselineStart) || r.startMs).toFixed(2)}px;width:${Math.max(4, z(f(r.baselineEnd) || r.endMs) - z(f(r.baselineStart) || r.startMs)).toFixed(2)}px"></span>` : ""}
           <button
             class="bar ${v}${r.critical ? " critical" : ""}${it ? " split" : ""}"
             part="bar ${v}"
-            data-task-id="${f(r.id)}"
+            data-task-id="${b(r.id)}"
             data-kind="${v}"
-            role="gridcell"
             tabindex="${G ? "0" : "-1"}"
-            aria-selected="${this.selectedId === r.id}"
-            aria-colindex="5"
+            ${this.selectedId === r.id ? 'aria-current="true"' : ""}
             style="left:${rt.toFixed(2)}px;width:${zt.toFixed(2)}px;--tone:${U};--progress:${Ct.toFixed(2)}%"
-            aria-label="${f(r.label)}"
+            aria-label="${b(r.label)}"
             ${at ? 'data-draggable="true"' : ""}
           >
             ${nt ? '<span class="handle start" data-mode="resize-start"></span>' : ""}
@@ -884,14 +893,14 @@ class jt extends It {
             <span class="drag-tip"></span>
             ${nt ? '<span class="handle end" data-mode="resize-end"></span>' : ""}
           </button>
-        </article>
+        </div>
       `;
     }).join(""), et = i.map((r) => {
-      const $ = Q.get(r.source), E = Q.get(r.target);
-      if (!$ || !E || z && !tt.has(r.source) && !tt.has(r.target)) return "";
-      const v = _t($.task, $.index, E.task, E.index, r.type, C), F = `${$.task.label} dependency to ${E.task.label}`;
-      return `<path class="link-hit" d="${v}" data-link-id="${f(r.id)}" data-source-id="${f(r.source)}" data-target-id="${f(r.target)}" data-link-type="${f(r.type || "e2s")}" aria-label="${f(F)}" /><path d="${v}" />`;
-    }).join(""), $t = et ? '<defs><marker id="ui-gantt-arrow" markerWidth="9" markerHeight="9" refX="8.5" refY="4.5" orient="auto" markerUnits="userSpaceOnUse"><path d="M 0.5 0.75 L 8.5 4.5 L 0.5 8.25 z" /></marker></defs>' : "", Y = D(Date.now()), Mt = C(Y), Et = d && Y >= m && Y <= h ? `<div class="today" part="today" style="left:${Mt.toFixed(2)}px"></div>` : "";
+      const $ = Q.get(r.source), C = Q.get(r.target);
+      if (!$ || !C || S && !tt.has(r.source) && !tt.has(r.target)) return "";
+      const v = jt($.task, $.index, C.task, C.index, r.type, z), D = `${$.task.label} dependency to ${C.task.label}`;
+      return `<path class="link-hit" d="${v}" data-link-id="${b(r.id)}" data-source-id="${b(r.source)}" data-target-id="${b(r.target)}" data-link-type="${b(r.type || "e2s")}" aria-label="${b(D)}" /><path d="${v}" />`;
+    }).join(""), $t = et ? '<defs><marker id="ui-gantt-arrow" markerWidth="9" markerHeight="9" refX="8.5" refY="4.5" orient="auto" markerUnits="userSpaceOnUse"><path d="M 0.5 0.75 L 8.5 4.5 L 0.5 8.25 z" /></marker></defs>' : "", Y = F(Date.now()), Mt = z(Y), Et = d && Y >= m && Y <= h ? `<div class="today" part="today" style="left:${Mt.toFixed(2)}px"></div>` : "";
     this.setContent(`
       <style>${ht}</style>
       <section class="frame" part="frame" data-bar-variant="${s}">
@@ -899,7 +908,7 @@ class jt extends It {
           <header class="toolbar" part="toolbar">
             <div class="title">Project schedule <span class="meta">${o.length}/${t.length} tasks</span></div>
             <div class="controls">
-              <input class="control" value="${f(l)}" placeholder="Filter tasks" aria-label="Filter tasks" />
+              <input class="control" value="${b(l)}" placeholder="Filter tasks" aria-label="Filter tasks" />
               <select class="select" aria-label="Sort tasks">
                 ${[
       ["none", "Manual"],
@@ -915,26 +924,28 @@ class jt extends It {
         ` : ""}
         <div class="viewport" part="viewport">
           <div class="surface" part="surface" style="--day-width:${M}px;grid-template-columns:${J}px ${k.toFixed(2)}px;inline-size:max(100%, ${(J + k).toFixed(2)}px)">
-            <header class="grid-head" part="grid-head" role="row">
-              <button class="head-button" data-sort="label" role="columnheader" aria-sort="${n === "label" ? "ascending" : "none"}">Task</button>
-              <span role="columnheader">Owner</span>
-              <button class="head-button" data-sort="start" role="columnheader" aria-sort="${n === "start" ? "ascending" : "none"}">Dates</button>
-              <button class="head-button" data-sort="progress" role="columnheader" aria-sort="${n === "progress" ? "descending" : "none"}">%</button>
-            </header>
-            <header class="timeline-head" part="timeline-head">
+            <div class="grid-semantics" role="treegrid" aria-label="${b(this.getAttribute("aria-label") || "Project schedule")}" aria-rowcount="${o.length + 1}" aria-colcount="4">
+              <div class="grid-head" part="grid-head" role="row">
+                <div role="columnheader" aria-sort="${n === "label" ? "ascending" : "none"}" style="display:contents"><button class="head-button" data-sort="label">Task</button></div>
+                <span role="columnheader">Owner</span>
+                <div role="columnheader" aria-sort="${n === "start" ? "ascending" : "none"}" style="display:contents"><button class="head-button" data-sort="start">Dates</button></div>
+                <div role="columnheader" aria-sort="${n === "progress" ? "descending" : "none"}" style="display:contents"><button class="head-button" data-sort="progress">%</button></div>
+              </div>
+              <div class="grid-body" part="grid-body" role="rowgroup">
+                ${S && V ? `<div style="height:${V}px"></div>` : ""}
+                ${yt || '<div class="empty">No matching tasks</div>'}
+                ${S && W ? `<div style="height:${W}px"></div>` : ""}
+              </div>
+            </div>
+            <div class="timeline-head" part="timeline-head" aria-hidden="true">
               <div class="scale" style="width:${k.toFixed(2)}px">${Nt(m, h, M, e, this.viewportLeft, this.viewportWidth)}</div>
-            </header>
-            <div class="grid-body" part="grid-body" role="treegrid" aria-rowcount="${o.length + 1}" aria-colcount="4">
-              ${z && V ? `<div style="height:${V}px"></div>` : ""}
-              ${yt || '<div class="empty">No matching tasks</div>'}
-              ${z && W ? `<div style="height:${W}px"></div>` : ""}
             </div>
-            <div class="timeline-body" part="timeline-body" style="width:${k.toFixed(2)}px;min-height:${A}px">
+            <div class="timeline-body" part="timeline-body" role="group" aria-label="Timeline" style="width:${k.toFixed(2)}px;min-height:${A}px">
               <svg class="links" width="${k.toFixed(0)}" height="${A}" viewBox="0 0 ${k.toFixed(0)} ${A}" aria-hidden="true">${$t}${et}</svg>
               ${Et}
-              ${z && V ? `<div style="height:${V}px"></div>` : ""}
+              ${S && V ? `<div style="height:${V}px"></div>` : ""}
               ${kt}
-              ${z && W ? `<div style="height:${W}px"></div>` : ""}
+              ${S && W ? `<div style="height:${W}px"></div>` : ""}
             </div>
           </div>
         </div>
@@ -968,18 +979,18 @@ class jt extends It {
       });
     }), this.root.querySelectorAll(".head-button[data-sort]").forEach((t) => {
       t.addEventListener("click", () => {
-        const i = j(t.dataset.sort || null);
+        const i = _(t.dataset.sort || null);
         i === "none" ? this.removeAttribute("sort") : this.setAttribute("sort", i), this.dispatchEvent(new CustomEvent("sortchange", { detail: { sort: i }, bubbles: !0, composed: !0 }));
       });
     }), this.root.querySelector(".viewport")?.addEventListener("scroll", (t) => {
-      const i = t.currentTarget, e = i.scrollTop, n = i.scrollLeft, s = Math.max(20, Math.ceil(Math.max(420, this.viewportHeight - _) / y)), l = Math.max(0, Math.floor(Math.max(0, e - _) / y)), o = l < this.renderedFirstRow + 64 || l + s > this.renderedLastRow - 64, p = Math.abs(n - this.viewportLeft) >= Math.max(480, this.viewportWidth * 0.6);
+      const i = t.currentTarget, e = i.scrollTop, n = i.scrollLeft, s = Math.max(20, Math.ceil(Math.max(420, this.viewportHeight - j) / y)), l = Math.max(0, Math.floor(Math.max(0, e - j) / y)), o = l < this.renderedFirstRow + 64 || l + s > this.renderedLastRow - 64, p = Math.abs(n - this.viewportLeft) >= Math.max(480, this.viewportWidth * 0.6);
       this.viewportTop = e, this.viewportLeft = n, !(!o && !p) && this.scrollFrame == null && (this.scrollFrame = window.setTimeout(() => {
         this.scrollFrame = null, this.requestRender();
       }, 24));
     }, { passive: !0 }), this.root.querySelector(".control")?.addEventListener("input", (t) => {
       this.internalFilter = t.currentTarget.value, this.dispatchEvent(new CustomEvent("filterchange", { detail: { filter: this.internalFilter }, bubbles: !0, composed: !0 })), this.requestRender();
     }), this.root.querySelector(".select")?.addEventListener("change", (t) => {
-      const i = j(t.currentTarget.value);
+      const i = _(t.currentTarget.value);
       i === "none" ? this.removeAttribute("sort") : this.setAttribute("sort", i), this.dispatchEvent(new CustomEvent("sortchange", { detail: { sort: i }, bubbles: !0, composed: !0 }));
     }), this.root.querySelectorAll(".link-hit").forEach((t) => {
       t.addEventListener("click", (i) => {
@@ -999,10 +1010,10 @@ class jt extends It {
         if (e.button !== 0) return;
         const n = t.dataset.taskId;
         if (!n) return;
-        const l = this.getTasks().find((h) => h.id === n), o = b(l?.start), p = b(l?.end);
+        const l = this.getTasks().find((h) => h.id === n), o = f(l?.start), p = f(l?.end);
         if (!l || o == null || p == null) return;
         e.preventDefault();
-        const u = t.dataset.kind || "task", d = e.target.dataset.mode || "move", g = u === "milestone" ? "move" : d, c = ft(this.getAttribute("zoom")), m = this.selectedId !== n;
+        const u = t.dataset.kind || "task", d = e.target.dataset.mode || "move", g = u === "milestone" ? "move" : d, c = bt(this.getAttribute("zoom")), m = this.selectedId !== n;
         this.selectedId = n, this.dispatchEvent(new CustomEvent("taskselect", { detail: { id: n }, bubbles: !0, composed: !0 })), this.drag = {
           taskId: n,
           mode: g,
@@ -1041,7 +1052,7 @@ class jt extends It {
           const o = (this.drag.latestStart - this.drag.rangeMin) / I * this.drag.dayWidth - (this.drag.kind === "milestone" ? N / 2 : 0), p = this.drag.kind === "milestone" ? N : Math.max(12, (this.drag.latestEnd - this.drag.latestStart) / I * this.drag.dayWidth);
           this.drag.bar.style.left = `${o.toFixed(2)}px`, this.drag.bar.style.width = `${p.toFixed(2)}px`;
           const u = this.drag.bar.querySelector(".drag-tip");
-          u && (u.textContent = this.drag.kind === "milestone" ? S(this.drag.latestStart) : `${S(this.drag.latestStart)} - ${S(this.drag.latestEnd)}`);
+          u && (u.textContent = this.drag.kind === "milestone" ? E(this.drag.latestStart) : `${E(this.drag.latestStart)} - ${E(this.drag.latestEnd)}`);
         }));
       });
       const i = () => {
@@ -1054,8 +1065,8 @@ class jt extends It {
         }
         const n = {
           id: e.taskId,
-          start: S(e.latestStart),
-          end: S(e.latestEnd)
+          start: E(e.latestStart),
+          end: E(e.latestEnd)
         };
         this.overrides.set(e.taskId, { start: n.start, end: n.end }), this.bumpOverrides(), this.dispatchEvent(new CustomEvent("taskchange", {
           detail: n,
@@ -1079,17 +1090,17 @@ class jt extends It {
           return;
         }
         if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-        const l = this.getTasks().find((h) => h.id === n), o = b(l?.start), p = b(l?.end);
+        const l = this.getTasks().find((h) => h.id === n), o = f(l?.start), p = f(l?.end);
         if (!l || o == null || p == null) return;
         e.preventDefault();
-        const u = e.key === "ArrowLeft" ? -1 : 1, d = t.dataset.kind === "milestone", g = e.shiftKey && !d ? o : x(o, u), c = d ? g : e.shiftKey ? Math.max(x(p, u), x(o, 1)) : x(p, u), m = { id: n, start: S(g), end: S(c) };
+        const u = e.key === "ArrowLeft" ? -1 : 1, d = t.dataset.kind === "milestone", g = e.shiftKey && !d ? o : x(o, u), c = d ? g : e.shiftKey ? Math.max(x(p, u), x(o, 1)) : x(p, u), m = { id: n, start: E(g), end: E(c) };
         this.overrides.set(n, { start: m.start, end: m.end }), this.bumpOverrides(), this.dispatchEvent(new CustomEvent("taskchange", { detail: m, bubbles: !0, composed: !0 })), this.requestRender();
       });
     });
   }
   rangeMin() {
-    const i = this.getTasks().map((e) => b(e.start)).filter((e) => e != null);
-    return i.length ? x(Math.min(...i), -2) : D(Date.now());
+    const i = this.getTasks().map((e) => f(e.start)).filter((e) => e != null);
+    return i.length ? x(Math.min(...i), -2) : F(Date.now());
   }
   selectTask(t) {
     if (this.captureViewport(), this.selectedId === t) {
@@ -1102,7 +1113,7 @@ class jt extends It {
     const e = this.getVisibleTasks(
       this.getTasks(),
       this.getAttribute("filter") ?? this.internalFilter,
-      j(this.getAttribute("sort"))
+      _(this.getAttribute("sort"))
     ), n = e.findIndex((l) => l.id === t), s = e[Math.max(0, Math.min(e.length - 1, n + i))];
     !s || s.id === t || (this.selectedId = s.id, this.dispatchEvent(new CustomEvent("taskselect", { detail: { id: s.id }, bubbles: !0, composed: !0 })), this.requestRender(), window.requestAnimationFrame(() => {
       this.root.querySelector(`.bar[data-task-id="${CSS.escape(s.id)}"]`)?.focus();
@@ -1114,11 +1125,11 @@ class jt extends It {
   }
   getTasks() {
     const t = this.getAttribute("tasks");
-    return t === this.taskCacheRaw && this.taskCacheVersion === this.overridesVersion ? this.taskCache : (this.taskCacheRaw = t, this.taskCacheVersion = this.overridesVersion, this.taskCache = Ft(t, this.overrides), this.visibleCacheKey = "", this.taskCache);
+    return t === this.taskCacheRaw && this.taskCacheVersion === this.overridesVersion ? this.taskCache : (this.taskCacheRaw = t, this.taskCacheVersion = this.overridesVersion, this.taskCache = Dt(t, this.overrides), this.visibleCacheKey = "", this.taskCache);
   }
   getLinks() {
     const t = this.getAttribute("links");
-    return t === this.linkCacheRaw ? this.linkCache : (this.linkCacheRaw = t, this.linkCache = Dt(t), this.linkCache);
+    return t === this.linkCacheRaw ? this.linkCache : (this.linkCacheRaw = t, this.linkCache = Ft(t), this.linkCache);
   }
   getVisibleTasks(t, i, e) {
     const n = Array.from(this.collapsed).sort().join(","), s = `${this.taskCacheRaw || ""}|${this.overridesVersion}|${i}|${e}|${n}`;
@@ -1131,7 +1142,7 @@ class jt extends It {
     return t === "tasks" && (this.overrides.clear(), this.bumpOverrides(), this.viewportTop = 0, this.viewportLeft = 0), t === "links" && (this.linkCacheRaw = null), !0;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-gantt") && customElements.define("ui-gantt", jt);
+typeof customElements < "u" && !customElements.get("ui-gantt") && customElements.define("ui-gantt", _t);
 export {
-  jt as UIGantt
+  _t as UIGantt
 };

package/dist/grid.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-EV6mVBUV.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=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.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;

package/dist/grid.esm.js

@@ -1,4 +1,4 @@
-import { E as h } from "./ElementBase-YlTLMsGk.mjs";
+import { E as h } from "./ElementBase-BeZT54Hj.mjs";
 const y = {
   sm: "var(--ui-breakpoint-sm, 640px)",
   md: "var(--ui-breakpoint-md, 768px)",

package/dist/hover-card.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-EV6mVBUV.js"),p=require("./positioner-D_fqyx_j.js"),v=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-DxbvhLJs.js"),p=require("./positioner-D_fqyx_j.js"),v=`
   :host {
     --ui-hover-card-z: 1700;
     --ui-hover-card-radius: var(--base-card-radius, var(--ui-radius, 4px));

package/dist/hover-card.esm.js

@@ -1,4 +1,4 @@
-import { E as d } from "./ElementBase-YlTLMsGk.mjs";
+import { E as d } from "./ElementBase-BeZT54Hj.mjs";
 import { e as u } from "./positioner-D0VGxtYU.mjs";
 const p = `
   :host {

package/dist/icon-cloud.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("./ElementBase-EV6mVBUV.js"),z="920px",x=.86,R=1,$="20px",S="118px",E="40px",A="118px",N="30px",D=new Set(["clockwise","counterclockwise"]),I=new Set(["surface","soft","solid","glass","contrast","minimal"]),X=new Set(["brand","neutral","info","success","warning","danger"]),Y=new Set(["sm","md","lg","xl","1","2","3","4"]),q=new Set(["none","low","high"]),c={sm:{radius:"90px",radiusPx:90,itemSize:"32px",itemSizePx:32,centerSize:"84px",padding:"14px",shellRadius:"24px"},md:{radius:S,radiusPx:118,itemSize:E,itemSizePx:40,centerSize:A,padding:"18px",shellRadius:"28px"},lg:{radius:"140px",radiusPx:140,itemSize:"46px",itemSizePx:46,centerSize:"132px",padding:"22px",shellRadius:"32px"},xl:{radius:"164px",radiusPx:164,itemSize:"54px",itemSizePx:54,centerSize:"152px",padding:"26px",shellRadius:"36px"}},U=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("./ElementBase-DxbvhLJs.js"),z="920px",x=.86,R=1,$="20px",S="118px",E="40px",A="118px",N="30px",D=new Set(["clockwise","counterclockwise"]),I=new Set(["surface","soft","solid","glass","contrast","minimal"]),X=new Set(["brand","neutral","info","success","warning","danger"]),Y=new Set(["sm","md","lg","xl","1","2","3","4"]),q=new Set(["none","low","high"]),c={sm:{radius:"90px",radiusPx:90,itemSize:"32px",itemSizePx:32,centerSize:"84px",padding:"14px",shellRadius:"24px"},md:{radius:S,radiusPx:118,itemSize:E,itemSizePx:40,centerSize:A,padding:"18px",shellRadius:"28px"},lg:{radius:"140px",radiusPx:140,itemSize:"46px",itemSizePx:46,centerSize:"132px",padding:"22px",shellRadius:"32px"},xl:{radius:"164px",radiusPx:164,itemSize:"54px",itemSizePx:54,centerSize:"152px",padding:"26px",shellRadius:"36px"}},U=`
   :host {
     --ui-icon-cloud-radius: ${S};
     --ui-icon-cloud-item-size: ${E};
@@ -115,7 +115,7 @@
   }
 
   :host([tone="neutral"]) {
-    --ui-icon-cloud-accent: #64748b;
+    --ui-icon-cloud-accent: #526175;
   }
 
   :host([tone="info"]) {
@@ -123,11 +123,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-icon-cloud-accent: var(--ui-color-success, #16a34a);
+    --ui-icon-cloud-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-icon-cloud-accent: var(--ui-color-warning, #d97706);
+    --ui-icon-cloud-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {

package/dist/icon-cloud.esm.js

@@ -1,4 +1,4 @@
-import { E as C } from "./ElementBase-YlTLMsGk.mjs";
+import { E as C } from "./ElementBase-BeZT54Hj.mjs";
 const z = "920px", x = 0.86, O = 1, R = "20px", S = "118px", E = "40px", A = "118px", $ = "30px", N = /* @__PURE__ */ new Set(["clockwise", "counterclockwise"]), D = /* @__PURE__ */ new Set(["surface", "soft", "solid", "glass", "contrast", "minimal"]), I = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "danger"]), X = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "1", "2", "3", "4"]), Y = /* @__PURE__ */ new Set(["none", "low", "high"]), c = {
   sm: {
     radius: "90px",
@@ -153,7 +153,7 @@ const z = "920px", x = 0.86, O = 1, R = "20px", S = "118px", E = "40px", A = "11
   }
 
   :host([tone="neutral"]) {
-    --ui-icon-cloud-accent: #64748b;
+    --ui-icon-cloud-accent: #526175;
   }
 
   :host([tone="info"]) {
@@ -161,11 +161,11 @@ const z = "920px", x = 0.86, O = 1, R = "20px", S = "118px", E = "40px", A = "11
   }
 
   :host([tone="success"]) {
-    --ui-icon-cloud-accent: var(--ui-color-success, #16a34a);
+    --ui-icon-cloud-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-icon-cloud-accent: var(--ui-color-warning, #d97706);
+    --ui-icon-cloud-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {

package/dist/icon.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ui-icon-BzVNC_lr.js");exports.UIIcon=e.UIIcon;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ui-icon-D3avtxX_.js");exports.UIIcon=e.UIIcon;

package/dist/icon.esm.js

@@ -1,4 +1,4 @@
-import { U as I } from "./ui-icon-YI6lyuqU.mjs";
+import { U as I } from "./ui-icon-DLhB08Fo.mjs";
 export {
   I as UIIcon
 };