@itguy614/clean-ui 1.2.2 → 1.3.0

package/dist/components/CuiTreeView.vue.js

@@ -1,12 +1,13 @@
-import { defineComponent as z, ref as v, computed as u, withDirectives as y, openBlock as s, createElementBlock as m, Fragment as B, renderList as V, createBlock as b, withCtx as k, renderSlot as E, mergeProps as C, vShow as A } from "vue";
-import L from "./CuiTreeNode.vue.js";
-import { scaleDensity as d, scaleControlHeight as c } from "../utils/sizing.js";
-const X = { role: "tree" }, T = /* @__PURE__ */ z({
+import { defineComponent as U, useTemplateRef as W, ref as L, computed as m, watch as $, withDirectives as j, openBlock as D, createElementBlock as N, Fragment as G, renderList as J, createBlock as O, withCtx as Q, renderSlot as Z, mergeProps as _, vShow as ee, nextTick as te } from "vue";
+import ne from "./CuiTreeNode.vue.js";
+import { scaleDensity as u, scaleControlHeight as C } from "../utils/sizing.js";
+const le = ["aria-multiselectable"], oe = /* @__PURE__ */ U({
   __name: "CuiTreeView",
   props: {
     nodes: {},
     modelValue: {},
     multiple: { type: Boolean, default: !1 },
+    expanded: {},
     defaultExpanded: {},
     expandAll: { type: Boolean, default: !1 },
     showLines: { type: Boolean, default: !0 },
@@ -15,59 +16,201 @@ const X = { role: "tree" }, T = /* @__PURE__ */ z({
     size: { default: "md" },
     hidden: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue", "node-click", "node-expand"],
-  setup(a, { emit: f }) {
-    const l = a, i = f, o = v(new Set(l.defaultExpanded ?? []));
-    if (l.expandAll) {
-      let e = function(t) {
-        for (const n of t)
-          n.children && n.children.length > 0 && (o.value.add(n.id), e(n.children));
-      };
-      e(l.nodes);
+  emits: ["update:modelValue", "update:expanded", "node-click", "node-expand"],
+  setup(r, { expose: K, emit: F }) {
+    const a = r, p = F, b = W("el");
+    function y(e) {
+      return e.flatMap(
+        (t) => t.children && t.children.length > 0 ? [t.id, ...y(t.children)] : []
+      );
+    }
+    function T(e, t) {
+      for (const n of e) {
+        if (n.id === t) return n;
+        const l = n.children && T(n.children, t);
+        if (l) return l;
+      }
+    }
+    const E = L(
+      new Set(a.expandAll ? y(a.nodes) : a.defaultExpanded ?? [])
+    ), o = m(
+      () => a.expanded !== void 0 ? new Set(a.expanded) : E.value
+    );
+    function v(e) {
+      a.expanded === void 0 && (E.value = e), p("update:expanded", [...e]);
     }
-    const r = u(() => l.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(l.modelValue) ? new Set(l.modelValue) : /* @__PURE__ */ new Set([l.modelValue]));
-    function p(e) {
-      const t = new Set(o.value), n = t.has(e.id);
-      n ? t.delete(e.id) : t.add(e.id), o.value = t, i("node-expand", e, !n);
+    function f(e, t) {
+      const n = new Set(o.value);
+      if (n.has(e) === t) return;
+      t ? n.add(e) : n.delete(e), v(n);
+      const l = T(a.nodes, e);
+      l && p("node-expand", l, t);
     }
-    function h(e) {
-      if (!(!l.selectable || e.disabled))
-        if (i("node-click", e), l.multiple) {
-          const t = new Set(r.value);
-          t.has(e.id) ? t.delete(e.id) : t.add(e.id), i("update:modelValue", [...t]);
+    function B(e) {
+      f(e.id, !o.value.has(e.id));
+    }
+    const k = m(() => a.modelValue == null ? /* @__PURE__ */ new Set() : Array.isArray(a.modelValue) ? new Set(a.modelValue) : /* @__PURE__ */ new Set([a.modelValue]));
+    function V(e) {
+      if (!(!a.selectable || e.disabled))
+        if (p("node-click", e), a.multiple) {
+          const t = new Set(k.value);
+          t.has(e.id) ? t.delete(e.id) : t.add(e.id), p("update:modelValue", [...t]);
         } else
-          i("update:modelValue", r.value.has(e.id) ? null : e.id);
+          p("update:modelValue", k.value.has(e.id) ? null : e.id);
+    }
+    const g = m(() => {
+      const e = [], t = (n, l, i) => {
+        for (const d of n) {
+          const x = !!d.children && d.children.length > 0;
+          e.push({ node: d, depth: l, parentId: i, hasChildren: x }), x && o.value.has(d.id) && t(d.children, l + 1, d.id);
+        }
+      };
+      return t(a.nodes, 0, null), e;
+    }), s = m(() => g.value.filter((e) => !e.node.disabled)), c = L(null), h = m(() => {
+      const e = s.value;
+      return e.length === 0 ? null : c.value == null || !e.some((t) => t.node.id === c.value) ? e[0].node.id : c.value;
+    });
+    function M(e) {
+      var n;
+      const t = (n = b.value) == null ? void 0 : n.querySelectorAll('[role="treeitem"]');
+      for (const l of t ?? [])
+        if (l.dataset.cuiTreeId === String(e)) return l;
+      return null;
+    }
+    function w(e) {
+      e != null && (c.value = e, te(() => {
+        var t;
+        return (t = M(e)) == null ? void 0 : t.focus();
+      }));
+    }
+    function z(e) {
+      const t = s.value;
+      if (t.length === 0) return;
+      const n = t.findIndex((i) => i.node.id === h.value), l = Math.min(t.length - 1, Math.max(0, (n === -1 ? 0 : n) + e));
+      w(t[l].node.id);
+    }
+    function X() {
+      return g.value.find((e) => e.node.id === h.value);
+    }
+    let A = "", I = null;
+    function Y(e) {
+      I && clearTimeout(I), A += e.toLowerCase(), I = setTimeout(() => {
+        A = "";
+      }, 600);
+      const t = s.value, n = t.findIndex((l) => l.node.id === h.value);
+      for (let l = 1; l <= t.length; l++) {
+        const i = t[(n + l) % t.length];
+        if (i.node.label.toLowerCase().startsWith(A)) {
+          w(i.node.id);
+          return;
+        }
+      }
+    }
+    function H(e) {
+      const t = X();
+      if (!t) return;
+      const { node: n, hasChildren: l, parentId: i } = t, d = o.value.has(n.id);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), z(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), z(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault(), l && !d ? f(n.id, !0) : l && d && z(1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), l && d ? f(n.id, !1) : i != null && w(i);
+          break;
+        case "Home":
+          e.preventDefault(), s.value.length && w(s.value[0].node.id);
+          break;
+        case "End":
+          e.preventDefault(), s.value.length && w(s.value[s.value.length - 1].node.id);
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), l && !a.selectable ? B(n) : V(n);
+          break;
+        case "*": {
+          e.preventDefault();
+          const x = g.value.filter((S) => S.parentId === i && S.hasChildren);
+          x.length && v(/* @__PURE__ */ new Set([...o.value, ...x.map((S) => S.node.id)]));
+          break;
+        }
+        default:
+          e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), Y(e.key));
+      }
+    }
+    function R(e) {
+      c.value = e;
     }
-    const S = {
-      sm: { fontSize: "0.8125rem", iconSize: "0.75rem", hitSize: c("0.75rem"), indent: d("1rem"), padY: d("0.1875rem"), padX: d("0.375rem") },
-      md: { fontSize: "0.875rem", iconSize: "0.875rem", hitSize: c("0.875rem"), indent: d("1.25rem"), padY: d("0.25rem"), padX: d("0.5rem") },
-      lg: { fontSize: "0.9375rem", iconSize: "1rem", hitSize: c("1rem"), indent: d("1.5rem"), padY: d("0.375rem"), padX: d("0.625rem") }
-    }, g = u(() => S[l.size]);
-    return (e, t) => y((s(), m("div", X, [
-      (s(!0), m(B, null, V(a.nodes, (n, x) => (s(), b(L, {
+    $(g, () => {
+      c.value != null && (s.value.some((e) => e.node.id === c.value) || (c.value = h.value));
+    });
+    const q = {
+      sm: { fontSize: "0.8125rem", iconSize: "0.75rem", hitSize: C("0.75rem"), indent: u("1rem"), padY: u("0.1875rem"), padX: u("0.375rem") },
+      md: { fontSize: "0.875rem", iconSize: "0.875rem", hitSize: C("0.875rem"), indent: u("1.25rem"), padY: u("0.25rem"), padX: u("0.5rem") },
+      lg: { fontSize: "0.9375rem", iconSize: "1rem", hitSize: C("1rem"), indent: u("1.5rem"), padY: u("0.375rem"), padX: u("0.625rem") }
+    }, P = m(() => q[a.size]);
+    return K({
+      el: b,
+      /** Expand one node by id. No-op if it is already expanded. */
+      expand: (e) => f(e, !0),
+      /** Collapse one node by id. No-op if it is already collapsed. */
+      collapse: (e) => f(e, !1),
+      /** Flip one node's expanded state. */
+      toggleExpand: (e) => f(e, !o.value.has(e)),
+      /** Expand every node that has children, at any depth. */
+      expandAll: () => v(new Set(y(a.nodes))),
+      /** Collapse everything. */
+      collapseAll: () => v(/* @__PURE__ */ new Set()),
+      /** Expand a node and all of its ancestors, so a deep node is revealed. */
+      reveal: (e) => {
+        const t = [], n = (l, i) => l.some((d) => d.id === e ? (t.push(...i), !0) : d.children ? n(d.children, [...i, d.id]) : !1);
+        n(a.nodes, []) && v(/* @__PURE__ */ new Set([...o.value, ...t]));
+      },
+      /** Whether a node id is currently expanded. */
+      isExpanded: (e) => o.value.has(e),
+      /** The ids currently expanded, in insertion order. */
+      expandedIds: () => [...o.value]
+    }), (e, t) => j((D(), N("div", {
+      ref_key: "el",
+      ref: b,
+      class: "cui-tree-view",
+      role: "tree",
+      "aria-multiselectable": r.multiple || void 0,
+      onKeydown: H
+    }, [
+      (D(!0), N(G, null, J(r.nodes, (n, l) => (D(), O(ne, {
         key: String(n.id),
         node: n,
         depth: 0,
-        "is-last": x === a.nodes.length - 1,
+        "is-last": l === r.nodes.length - 1,
         expanded: o.value,
-        "selected-set": r.value,
-        selectable: a.selectable,
-        "show-lines": a.showLines,
-        animated: a.animated,
-        cfg: g.value,
-        onToggleExpand: p,
-        onSelectNode: h
+        "selected-set": k.value,
+        selectable: r.selectable,
+        "show-lines": r.showLines,
+        animated: r.animated,
+        cfg: P.value,
+        "active-id": h.value,
+        "size-of-set": r.nodes.length,
+        "position-in-set": l + 1,
+        onToggleExpand: B,
+        onSelectNode: V,
+        onNodeFocused: R
       }, {
-        node: k((w) => [
-          E(e.$slots, "node", C({ ref_for: !0 }, w))
+        node: Q((i) => [
+          Z(e.$slots, "node", _({ ref_for: !0 }, i))
         ]),
         _: 3
-      }, 8, ["node", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg"]))), 128))
-    ], 512)), [
-      [A, !a.hidden]
+      }, 8, ["node", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg", "active-id", "size-of-set", "position-in-set"]))), 128))
+    ], 40, le)), [
+      [ee, !r.hidden]
     ]);
   }
 });
 export {
-  T as default
+  oe as default
 };

package/dist/composables/useCalendarKeyboard.d.ts

@@ -0,0 +1,48 @@
+import { type Ref } from "vue";
+export type CalendarViewMode = "days" | "months" | "years";
+export interface UseCalendarKeyboardOptions {
+    /** Which grid is showing — the same ref the component switches on. */
+    viewMode: Ref<CalendarViewMode>;
+    viewYear: Ref<number>;
+    viewMonth: Ref<number>;
+    /** How many years one page of the years grid shows. */
+    yearsPerPage?: number;
+    selectDay: (date: Date) => void;
+    selectMonth: (month: number) => void;
+    selectYear: (year: number) => void;
+    /** Open the panel. */
+    open: () => void;
+    /** Close the panel and hand focus back to the trigger. */
+    close: () => void;
+    /** Whether the control is currently disabled. */
+    isDisabled?: () => boolean;
+}
+/** Stable key for a cell, so focus can be restored to it after a re-render. */
+export declare function calendarCellKey(mode: CalendarViewMode, value: Date | number): string;
+/**
+ * Keyboard navigation for the day/month/year grids shared by CuiDatePicker and
+ * CuiDateRangePicker (#74). Both built their calendar out of unfocusable
+ * `<div>`s with a click handler, so a date could only be picked with a pointer.
+ *
+ * One piece of state drives all three grids: `focusedDate`. The months grid
+ * focuses its month, the years grid its year, so switching views keeps the
+ * user where they were instead of resetting to today. Movement also pulls
+ * `viewMonth`/`viewYear` along, so stepping off the edge of a month pages the
+ * calendar rather than focusing a cell nobody can see.
+ *
+ * Movement deliberately does NOT skip disabled dates — unlike a menu, a
+ * calendar is a grid whose shape carries meaning, and holes in it make it
+ * impossible to navigate predictably. Disabled cells are reachable and
+ * announced via `aria-disabled`; it is *selection* that refuses.
+ */
+export declare function useCalendarKeyboard(options: UseCalendarKeyboardOptions): {
+    gridRef: Ref<HTMLElement | null, HTMLElement | null>;
+    focusedDate: Ref<Date, Date>;
+    focusedKey: import("vue").ComputedRef<string>;
+    cellTabIndex: (key: string) => 0 | -1;
+    onGridKeydown: (e: KeyboardEvent) => void;
+    onFieldKeydown: (e: KeyboardEvent) => void;
+    resetFocus: (date?: Date) => void;
+    focusCell: () => void;
+};
+//# sourceMappingURL=useCalendarKeyboard.d.ts.map

package/dist/composables/useCalendarKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendarKeyboard.d.ts","sourceRoot":"","sources":["../../src/composables/useCalendarKeyboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAGxD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,0BAA0B;IACzC,sEAAsE;IACtE,QAAQ,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChC,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sBAAsB;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;CAC5B;AAKD,+EAA+E;AAC/E,wBAAgB,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAMpF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B;;;;wBA+B1C,MAAM;uBA6BP,aAAa;wBAuEZ,aAAa;wBAzEd,IAAI;;EA2F/B"}

package/dist/composables/useCalendarKeyboard.js

@@ -0,0 +1,91 @@
+import { ref as w, computed as R, nextTick as T } from "vue";
+import { YEARS_PER_PAGE as x, addYears as u, addMonths as y, addDays as m, yearPageStart as U } from "../utils/date.js";
+const G = { days: 7, months: 3, years: 3 };
+function v(o, r) {
+  if (o === "days") {
+    const l = r;
+    return `d:${l.getFullYear()}-${l.getMonth()}-${l.getDate()}`;
+  }
+  return `${o === "months" ? "m" : "y"}:${r}`;
+}
+function q(o) {
+  const { viewMode: r, viewYear: l, viewMonth: k, selectDay: b, selectMonth: M, selectYear: P, open: Y, close: F } = o, f = o.yearsPerPage ?? x, E = o.isDisabled ?? (() => !1), D = w(null), c = w(/* @__PURE__ */ new Date());
+  function A() {
+    const e = c.value;
+    (r.value === "days" || r.value === "months") && (k.value = e.getMonth()), l.value = e.getFullYear();
+  }
+  const i = R(() => {
+    const e = c.value;
+    return r.value === "days" ? v("days", e) : r.value === "months" ? v("months", e.getMonth()) : v("years", e.getFullYear());
+  }), K = (e) => e === i.value ? 0 : -1;
+  function g() {
+    const e = i.value;
+    T(() => {
+      var a, t;
+      (t = (a = D.value) == null ? void 0 : a.querySelector(`[data-cui-cell="${e}"]`)) == null || t.focus({ preventScroll: !0 });
+    });
+  }
+  function n(e) {
+    c.value = e, A(), g();
+  }
+  const S = (e = /* @__PURE__ */ new Date()) => n(e);
+  function $(e) {
+    const a = r.value, t = c.value, p = G[a], d = (s) => a === "days" ? m(t, s) : a === "months" ? y(t, s) : u(t, s);
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault(), n(d(-1));
+        break;
+      case "ArrowRight":
+        e.preventDefault(), n(d(1));
+        break;
+      case "ArrowUp":
+        e.preventDefault(), n(d(-p));
+        break;
+      case "ArrowDown":
+        e.preventDefault(), n(d(p));
+        break;
+      case "Home":
+      case "End": {
+        e.preventDefault();
+        const s = e.key === "End";
+        if (a === "days") n(m(t, s ? 6 - t.getDay() : -t.getDay()));
+        else if (a === "months") n(new Date(t.getFullYear(), s ? 11 : 0, 1));
+        else {
+          const h = U(t.getFullYear(), f);
+          n(new Date(s ? h + f - 1 : h, t.getMonth(), 1));
+        }
+        break;
+      }
+      case "PageUp":
+        e.preventDefault(), n(a === "years" ? u(t, -f) : e.shiftKey ? u(t, -1) : y(t, -1));
+        break;
+      case "PageDown":
+        e.preventDefault(), n(a === "years" ? u(t, f) : e.shiftKey ? u(t, 1) : y(t, 1));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), a === "days" ? b(new Date(t)) : a === "months" ? M(t.getMonth()) : P(t.getFullYear());
+        break;
+      case "Escape":
+        e.preventDefault(), e.stopPropagation(), F();
+        break;
+    }
+  }
+  function C(e) {
+    E() || e.key === "ArrowDown" && (e.preventDefault(), Y());
+  }
+  return {
+    gridRef: D,
+    focusedDate: c,
+    focusedKey: i,
+    cellTabIndex: K,
+    onGridKeydown: $,
+    onFieldKeydown: C,
+    resetFocus: S,
+    focusCell: g
+  };
+}
+export {
+  v as calendarCellKey,
+  q as useCalendarKeyboard
+};

package/dist/composables/useFieldDescribedBy.d.ts

@@ -0,0 +1,30 @@
+import { type ComputedRef } from "vue";
+/** The props any control needs for this: its own id, a caller's descriptions, and an error. */
+interface DescribableProps {
+    id?: string;
+    ariaDescribedby?: string;
+    error?: boolean;
+    errorMessage?: string;
+}
+/**
+ * Wire a control's own error message into `aria-describedby`.
+ *
+ * A control that sets `aria-invalid` and renders an unreferenced error message tells a
+ * screen-reader user that something is wrong and never what (#175). Put `errorId` on the
+ * message element and `describedBy` on the control.
+ *
+ * Caller-supplied ids come first, then ours: `aria-describedby` is read in the order given,
+ * and a caller's own help text is the more general description.
+ *
+ * The id falls back to Vue's `useId()` rather than `Math.random()`, which is what the rest
+ * of the library still uses: `useId()` is stable across re-renders *and* identical between
+ * a server render and its hydration, so it does not produce an attribute mismatch. Eight
+ * components render an error message this way; extracting it means the next six do not each
+ * re-derive the id-list rule.
+ */
+export declare function useFieldDescribedBy(props: DescribableProps): {
+    errorId: ComputedRef<string>;
+    describedBy: ComputedRef<string | undefined>;
+};
+export {};
+//# sourceMappingURL=useFieldDescribedBy.d.ts.map

package/dist/composables/useFieldDescribedBy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldDescribedBy.d.ts","sourceRoot":"","sources":["../../src/composables/useFieldDescribedBy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAExD,+FAA+F;AAC/F,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG;IAC5D,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CAC9C,CASA"}

package/dist/composables/useFieldDescribedBy.js

@@ -0,0 +1,11 @@
+import { useId as n, computed as d } from "vue";
+function u(e) {
+  const c = n(), i = d(() => `${e.id ?? c}-error`), t = d(() => {
+    const r = e.error && e.errorMessage ? i.value : void 0;
+    return e.ariaDescribedby && r ? `${e.ariaDescribedby} ${r}` : e.ariaDescribedby ?? r;
+  });
+  return { errorId: i, describedBy: t };
+}
+export {
+  u as useFieldDescribedBy
+};

package/dist/composables/useMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessages.d.ts","sourceRoot":"","sources":["../../src/composables/useMessages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAMhE;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,CAEtD"}
+{"version":3,"file":"useMessages.d.ts","sourceRoot":"","sources":["../../src/composables/useMessages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAW/E;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,CAEtD"}

package/dist/composables/useMessages.js

@@ -1,10 +1,10 @@
 import { inject as e, computed as o } from "vue";
-import { CuiConfigKey as t } from "../components/config-context.js";
-import { defaultMessages as r } from "../messages.js";
-const s = o(() => r);
-function n() {
-  return e(t, s);
+import { CuiConfigKey as s } from "../components/config-context.js";
+import { mergeMessages as r, defaultMessages as t } from "../messages.js";
+const m = o(() => r(t));
+function u() {
+  return e(s, m);
 }
 export {
-  n as useMessages
+  u as useMessages
 };

package/dist/composables/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/composables/usePopover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,KAAK,gBAAgB,EAAW,MAAM,KAAK,CAAC;AACrF,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/C,8CAA8C;IAC9C,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC1C,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EzD"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/composables/usePopover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,KAAK,gBAAgB,EAAW,MAAM,KAAK,CAAC;AACrF,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC/C,8CAA8C;IAC9C,cAAc,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC1C,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFzD"}

package/dist/composables/usePopover.js

@@ -19,6 +19,16 @@ function F(e = {}) {
       placement: d,
       middleware: m,
       strategy: e.strategy ?? "absolute",
+      // `left`/`top` rather than Floating UI's default `transform: translate()`.
+      // A panel that animates in owns its own `transform`, and a CSS animation
+      // on that property REPLACES the element's transform for the animation's
+      // whole duration — so the positioning translate was dropped and the panel
+      // rendered at the top-left corner of the screen for 0.15s before snapping
+      // into place. Visible on every CuiPopover consumer (date/time pickers,
+      // the data grid's column manager) and on CuiTooltip, where the show delay
+      // usually hid it. Positioning through `left`/`top` leaves `transform`
+      // free for the animation.
+      transform: !1,
       whileElementsMounted: k
     }
   ), x = o(() => {

package/dist/composables/useScrollShadows.d.ts

@@ -14,6 +14,7 @@ export declare function useScrollShadows(): {
 /** Inline style for a top edge fade */
 export declare const scrollShadowTopStyle: {
     position: "absolute";
+    borderRadius: string;
     top: string;
     left: string;
     right: string;
@@ -25,6 +26,7 @@ export declare const scrollShadowTopStyle: {
 /** Inline style for a bottom edge fade */
 export declare const scrollShadowBottomStyle: {
     position: "absolute";
+    borderRadius: string;
     bottom: string;
     left: string;
     right: string;
@@ -36,6 +38,7 @@ export declare const scrollShadowBottomStyle: {
 /** Inline style for a right edge fade */
 export declare const scrollShadowRightStyle: {
     position: "absolute";
+    borderRadius: string;
     right: string;
     top: string;
     bottom: string;

package/dist/composables/useScrollShadows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollShadows.d.ts","sourceRoot":"","sources":["../../src/composables/useScrollShadows.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB;;;;;kBAcT,KAAK;kBAIL,OAAO;iBAZR,WAAW;EA0BhC;AAMD,uCAAuC;AACvC,eAAO,MAAM,oBAAoB;;;;;;;;;CAShC,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,uBAAuB;;;;;;;;;CASnC,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,sBAAsB;;;;;;;;;CASlC,CAAC"}
+{"version":3,"file":"useScrollShadows.d.ts","sourceRoot":"","sources":["../../src/composables/useScrollShadows.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB;;;;;kBAcT,KAAK;kBAIL,OAAO;iBAZR,WAAW;EA0BhC;AAYD,uCAAuC;AACvC,eAAO,MAAM,oBAAoB;;;;;;;;;;CAUhC,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,uBAAuB;;;;;;;;;;CAUnC,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,sBAAsB;;;;;;;;;;CAUlC,CAAC"}

package/dist/composables/useScrollShadows.js

@@ -1,27 +1,28 @@
 import { ref as o } from "vue";
-function p() {
-  const r = o(!1), l = o(!1), s = o(!1), a = o(!1);
+function u() {
+  const r = o(!1), l = o(!1), i = o(!1), s = o(!1);
   function n(t) {
-    r.value = t.scrollTop > 4, l.value = t.scrollHeight - t.scrollTop - t.clientHeight > 4, s.value = t.scrollLeft > 4, a.value = t.scrollWidth - t.scrollLeft - t.clientWidth > 4;
+    r.value = t.scrollTop > 4, l.value = t.scrollHeight - t.scrollTop - t.clientHeight > 4, i.value = t.scrollLeft > 4, s.value = t.scrollWidth - t.scrollLeft - t.clientWidth > 4;
   }
-  function c(t) {
+  function a(t) {
     n(t.target);
   }
-  function i(t) {
+  function c(t) {
     t && requestAnimationFrame(() => n(t));
   }
   return {
     canScrollUp: r,
     canScrollDown: l,
-    canScrollLeft: s,
-    canScrollRight: a,
-    onScroll: c,
-    onMount: i,
+    canScrollLeft: i,
+    canScrollRight: s,
+    onScroll: a,
+    onMount: c,
     update: n
   };
 }
-const e = "var(--cui-surface-base, white)", u = {
+const e = "var(--cui-surface-base, white)", p = {
   position: "absolute",
+  borderRadius: "inherit",
   top: "0",
   left: "0",
   right: "0",
@@ -31,6 +32,7 @@ const e = "var(--cui-surface-base, white)", u = {
   background: `linear-gradient(to bottom, ${e}, transparent)`
 }, f = {
   position: "absolute",
+  borderRadius: "inherit",
   bottom: "0",
   left: "0",
   right: "0",
@@ -40,6 +42,7 @@ const e = "var(--cui-surface-base, white)", u = {
   background: `linear-gradient(to top, ${e}, transparent)`
 }, g = {
   position: "absolute",
+  borderRadius: "inherit",
   right: "0",
   top: "0",
   bottom: "0",
@@ -51,6 +54,6 @@ const e = "var(--cui-surface-base, white)", u = {
 export {
   f as scrollShadowBottomStyle,
   g as scrollShadowRightStyle,
-  u as scrollShadowTopStyle,
-  p as useScrollShadows
+  p as scrollShadowTopStyle,
+  u as useScrollShadows
 };

package/dist/icons/builtin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builtin.d.ts","sourceRoot":"","sources":["../../src/icons/builtin.ts"],"names":[],"mappings":"AAwEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,iDAAiD;AACjD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAkEnD,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAa,CAAC"}
+{"version":3,"file":"builtin.d.ts","sourceRoot":"","sources":["../../src/icons/builtin.ts"],"names":[],"mappings":"AAyEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC,iDAAiD;AACjD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAmEnD,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAa,CAAC"}