@itguy614/clean-ui 1.2.2 → 1.3.1

package/dist/components/CuiTimePicker.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as L, computed as u, ref as v, watch as V, onMounted as O, useTemplateRef as Z, withDirectives as j, openBlock as h, createElementBlock as S, toDisplayString as k, createCommentVNode as z, createVNode as s, withCtx as f, createElementVNode as p, normalizeStyle as x, createTextVNode as A, vShow as q } from "vue";
-import F from "./CuiPopover.vue.js";
-import C from "./CuiInputStepper.vue.js";
-import P from "./CuiButton.vue.js";
-import G from "./CuiIcon.vue.js";
-import { INPUT_SIZE_SCALE as J } from "../utils/sizing.js";
-const K = {
+import { defineComponent as X, computed as s, ref as b, watch as z, onMounted as Y, useTemplateRef as M, nextTick as _, withDirectives as ee, openBlock as w, createElementBlock as E, toDisplayString as T, createCommentVNode as D, createVNode as c, withCtx as g, createElementVNode as h, normalizeStyle as A, withKeys as te, withModifiers as ae, createTextVNode as I, vShow as re } from "vue";
+import ie from "./CuiPopover.vue.js";
+import B from "./CuiInputStepper.vue.js";
+import R from "./CuiButton.vue.js";
+import le from "./CuiIcon.vue.js";
+import { INPUT_SIZE_SCALE as ne } from "../utils/sizing.js";
+const oe = {
   key: 0,
   style: {
     display: "block",
@@ -13,10 +13,10 @@ const K = {
     fontWeight: "500",
     color: "var(--cui-text-secondary)"
   }
-}, Q = { style: { display: "flex", alignItems: "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", padding: "calc(0.5rem * var(--cui-density-scale, 1))" } }, X = {
+}, ue = ["aria-expanded", "aria-disabled", "id", "aria-describedby", "aria-required", "aria-labelledby", "tabindex"], de = {
   key: 0,
   style: { display: "flex", flexDirection: "column", gap: "calc(0.125rem * var(--cui-density-scale, 1))", marginLeft: "calc(0.25rem * var(--cui-density-scale, 1))" }
-}, ie = /* @__PURE__ */ L({
+}, be = /* @__PURE__ */ X({
   __name: "CuiTimePicker",
   props: {
     modelValue: { default: "" },
@@ -27,170 +27,245 @@ const K = {
     placeholder: {},
     size: { default: "md" },
     label: {},
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(i, { expose: w, emit: I }) {
-    const a = i, y = u(() => J[a.size]), T = I, l = v(12), o = v(0), r = v("AM"), g = v(!1);
-    function b(t) {
-      if (!t) return;
-      const e = t.match(/^(\d{1,2}):(\d{2})$/);
-      if (e) {
-        const d = parseInt(e[1]), H = parseInt(e[2]);
-        a.format === "12" ? (r.value = d >= 12 ? "PM" : "AM", l.value = d === 0 ? 12 : d > 12 ? d - 12 : d) : l.value = d, o.value = H;
+  setup(a, { expose: W, emit: q }) {
+    const r = a, x = s(() => ne[r.size]), L = q, o = b(12), d = b(0), l = b("AM"), u = b(!1);
+    function S(e) {
+      if (!e) return;
+      const t = e.match(/^(\d{1,2}):(\d{2})$/);
+      if (t) {
+        const n = parseInt(t[1]), y = parseInt(t[2]);
+        r.format === "12" ? (l.value = n >= 12 ? "PM" : "AM", o.value = n === 0 ? 12 : n > 12 ? n - 12 : n) : o.value = n, d.value = y;
         return;
       }
-      const n = t.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-      n && (l.value = parseInt(n[1]), o.value = parseInt(n[2]), r.value = n[3].toUpperCase());
+      const i = e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+      i && (o.value = parseInt(i[1]), d.value = parseInt(i[2]), l.value = i[3].toUpperCase());
     }
-    V(() => a.modelValue, b), O(() => b(a.modelValue));
-    function M() {
-      return a.format === "24" ? `${String(l.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")}` : `${String(l.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")} ${r.value}`;
+    z(() => r.modelValue, S), Y(() => S(r.modelValue));
+    function $() {
+      return r.format === "24" ? `${String(o.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")}` : `${String(o.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")} ${l.value}`;
     }
     function m() {
-      T("update:modelValue", M());
+      L("update:modelValue", $());
     }
-    const $ = u(() => a.modelValue ? M() : "");
-    u(() => a.format === "24" ? "##:##" : "##:## AA");
-    const E = u(
-      () => a.placeholder ?? (a.format === "24" ? "hh:mm" : "hh:mm AM")
+    const V = s(() => r.modelValue ? $() : "");
+    s(() => r.format === "24" ? "##:##" : "##:## AA");
+    const K = s(
+      () => r.placeholder ?? (r.format === "24" ? "hh:mm" : "hh:mm AM")
     );
-    u(() => a.modelValue ? a.format === "24" ? `${String(l.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}` : `${String(l.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}${r.value}` : "");
-    const W = u(() => a.format === "12" ? 1 : 0), B = u(() => a.format === "12" ? 12 : 23);
-    function N(t) {
-      l.value = t, m();
+    s(() => r.modelValue ? r.format === "24" ? `${String(o.value).padStart(2, "0")}${String(d.value).padStart(2, "0")}` : `${String(o.value).padStart(2, "0")}${String(d.value).padStart(2, "0")}${l.value}` : "");
+    const N = s(() => r.format === "12" ? 1 : 0), U = s(() => r.format === "12" ? 12 : 23);
+    function F(e) {
+      o.value = e, m();
     }
-    function U(t) {
-      o.value = t, m();
+    function H(e) {
+      d.value = e, m();
     }
-    V(g, (t) => {
-      t && b(a.modelValue);
-    });
-    const c = Z("rootEl");
-    function D(t) {
+    const k = M("panelEl");
+    let v = [];
+    function P() {
       var e;
-      (e = c.value) == null || e.focus(t);
+      return v.length === 0 && (v = [...((e = k.value) == null ? void 0 : e.querySelectorAll('[role="spinbutton"], .cui-time-picker__period')) ?? []]), v;
     }
-    function R() {
+    function O(e) {
+      var y, C;
+      if (e.key === "Enter") {
+        ((y = document.activeElement) == null ? void 0 : y.classList.contains(
+          "cui-time-picker__period"
+        )) || e.preventDefault(), requestAnimationFrame(() => {
+          m(), u.value = !1;
+        });
+        return;
+      }
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      const t = P(), i = t.indexOf(document.activeElement);
+      if (i === -1) return;
+      e.preventDefault();
+      const n = i + (e.key === "ArrowRight" ? 1 : -1);
+      (C = t[Math.min(t.length - 1, Math.max(0, n))]) == null || C.focus({ preventScroll: !0 });
+    }
+    function Z() {
+      var e;
+      v = [], (e = P()[0]) == null || e.focus({ preventScroll: !0 });
+    }
+    function j() {
+      var i, n;
+      const e = document.activeElement;
+      (e === document.body || e && ((i = k.value) != null && i.contains(e))) && ((n = p.value) == null || n.focus({ preventScroll: !0 }));
+    }
+    z(u, (e) => {
+      if (!e) {
+        v = [], j();
+        return;
+      }
+      S(r.modelValue), _(() => Z());
+    });
+    const f = M("rootEl"), p = M("triggerEl");
+    function G(e) {
+      if (!r.disabled) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault(), u.value = !0;
+          return;
+        }
+        e.key === "Escape" && u.value && (e.preventDefault(), u.value = !1);
+      }
+    }
+    function J(e) {
       var t;
-      (t = c.value) == null || t.blur();
+      (t = p.value ?? f.value) == null || t.focus(e);
+    }
+    function Q() {
+      var e;
+      (e = p.value ?? f.value) == null || e.blur();
     }
-    return w({ el: c, focus: D, blur: R }), (t, e) => j((h(), S("div", {
+    return W({ el: f, focus: J, blur: Q }), (e, t) => ee((w(), E("div", {
+      class: "cui-time-picker",
       ref_key: "rootEl",
-      ref: c
+      ref: f
     }, [
-      i.label ? (h(), S("label", K, k(i.label), 1)) : z("", !0),
-      s(F, {
-        visible: g.value,
-        "onUpdate:visible": e[2] || (e[2] = (n) => g.value = n),
+      a.label ? (w(), E("label", oe, T(a.label), 1)) : D("", !0),
+      c(ie, {
+        visible: u.value,
+        "onUpdate:visible": t[3] || (t[3] = (i) => u.value = i),
         placement: "bottom",
         closable: !1,
         "no-arrow": "",
         width: "auto",
-        disabled: i.disabled
+        disabled: a.disabled
       }, {
-        content: f(() => [
-          p("div", Q, [
-            s(C, {
-              "model-value": l.value,
-              min: W.value,
-              max: B.value,
+        content: g(() => [
+          h("div", {
+            ref_key: "panelEl",
+            ref: k,
+            class: "cui-time-picker__panel",
+            onKeydown: [
+              t[2] || (t[2] = te(ae((i) => u.value = !1, ["prevent", "stop"]), ["escape"])),
+              O
+            ],
+            style: { display: "flex", alignItems: "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", padding: "calc(0.5rem * var(--cui-density-scale, 1))" }
+          }, [
+            c(B, {
+              "model-value": o.value,
+              min: N.value,
+              max: U.value,
               step: 1,
               orientation: "vertical",
               size: "sm",
               pad: 2,
               wrap: "",
-              "onUpdate:modelValue": N
+              "onUpdate:modelValue": F
             }, null, 8, ["model-value", "min", "max"]),
-            e[5] || (e[5] = p("span", { style: { fontSize: "1.25rem", fontWeight: "700", color: "var(--cui-text-body)", lineHeight: "1" } }, ":", -1)),
-            s(C, {
-              "model-value": o.value,
+            t[6] || (t[6] = h("span", { style: { fontSize: "1.25rem", fontWeight: "700", color: "var(--cui-text-body)", lineHeight: "1" } }, ":", -1)),
+            c(B, {
+              "model-value": d.value,
               min: 0,
               max: 59,
-              step: i.minuteStep,
+              step: a.minuteStep,
               orientation: "vertical",
               size: "sm",
               pad: 2,
               wrap: "",
-              "onUpdate:modelValue": U
+              "onUpdate:modelValue": H
             }, null, 8, ["model-value", "step"]),
-            i.format === "12" ? (h(), S("div", X, [
-              s(P, {
+            a.format === "12" ? (w(), E("div", de, [
+              c(R, {
                 variant: "ghost",
                 size: "xs",
-                style: x({
-                  fontWeight: r.value === "AM" ? "700" : "400",
-                  color: r.value === "AM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
-                  background: r.value === "AM" ? "var(--cui-primary-bg)" : "transparent",
+                style: A({
+                  fontWeight: l.value === "AM" ? "700" : "400",
+                  color: l.value === "AM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
+                  background: l.value === "AM" ? "var(--cui-primary-bg)" : "transparent",
                   borderRadius: "0.25rem",
                   minWidth: "2.5rem"
                 }),
-                onClick: e[0] || (e[0] = (n) => {
-                  r.value = "AM", m();
+                class: "cui-time-picker__period",
+                onClick: t[0] || (t[0] = (i) => {
+                  l.value = "AM", m();
                 })
               }, {
-                default: f(() => [...e[3] || (e[3] = [
-                  A("AM", -1)
+                default: g(() => [...t[4] || (t[4] = [
+                  I("AM", -1)
                 ])]),
                 _: 1
               }, 8, ["style"]),
-              s(P, {
+              c(R, {
                 variant: "ghost",
                 size: "xs",
-                style: x({
-                  fontWeight: r.value === "PM" ? "700" : "400",
-                  color: r.value === "PM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
-                  background: r.value === "PM" ? "var(--cui-primary-bg)" : "transparent",
+                style: A({
+                  fontWeight: l.value === "PM" ? "700" : "400",
+                  color: l.value === "PM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
+                  background: l.value === "PM" ? "var(--cui-primary-bg)" : "transparent",
                   borderRadius: "0.25rem",
                   minWidth: "2.5rem"
                 }),
-                onClick: e[1] || (e[1] = (n) => {
-                  r.value = "PM", m();
+                class: "cui-time-picker__period",
+                onClick: t[1] || (t[1] = (i) => {
+                  l.value = "PM", m();
                 })
               }, {
-                default: f(() => [...e[4] || (e[4] = [
-                  A("PM", -1)
+                default: g(() => [...t[5] || (t[5] = [
+                  I("PM", -1)
                 ])]),
                 _: 1
               }, 8, ["style"])
-            ])) : z("", !0)
-          ])
+            ])) : D("", !0)
+          ], 544)
         ]),
-        default: f(() => [
-          p("div", {
+        default: g(() => [
+          h("div", {
+            ref_key: "triggerEl",
+            ref: p,
             class: "cui-time-picker__trigger",
-            style: x({
+            role: "combobox",
+            "aria-haspopup": "dialog",
+            "aria-expanded": u.value,
+            "aria-disabled": a.disabled || void 0,
+            id: a.id,
+            "aria-describedby": a.ariaDescribedby,
+            "aria-required": a.ariaRequired || void 0,
+            "aria-labelledby": a.ariaLabelledby,
+            tabindex: a.disabled ? -1 : 0,
+            onKeydown: G,
+            style: A({
               display: "inline-flex",
               alignItems: "center",
               gap: "calc(0.5rem * var(--cui-density-scale, 1))",
-              height: y.value.height,
-              padding: `0 ${y.value.px}`,
+              height: x.value.height,
+              padding: `0 ${x.value.px}`,
               border: "1px solid var(--cui-border-strong, var(--cui-border))",
-              borderRadius: "var(--cui-button-radius, 0.375rem)",
+              borderRadius: "var(--cui-button-radius, var(--cui-radius-md, 0.375rem))",
               background: "var(--cui-surface-base, white)",
-              cursor: i.disabled ? "default" : "pointer",
-              opacity: i.disabled ? "0.5" : "1",
-              fontSize: y.value.fontSize,
-              color: $.value ? "var(--cui-text-body)" : "var(--cui-text-tertiary)",
-              minWidth: i.format === "24" ? "6rem" : "8rem"
+              cursor: a.disabled ? "default" : "pointer",
+              opacity: a.disabled ? "0.5" : "1",
+              fontSize: x.value.fontSize,
+              color: V.value ? "var(--cui-text-body)" : "var(--cui-text-tertiary)",
+              minWidth: a.format === "24" ? "6rem" : "8rem"
             })
           }, [
-            s(G, {
+            c(le, {
               name: "clock",
               size: "0.875rem",
               style: { color: "var(--cui-text-tertiary)", flexShrink: "0" }
             }),
-            p("span", null, k($.value || E.value), 1)
-          ], 4)
+            h("span", null, T(V.value || K.value), 1)
+          ], 44, ue)
         ]),
         _: 1
       }, 8, ["visible", "disabled"])
     ], 512)), [
-      [q, !i.hidden]
+      [re, !a.hidden]
     ]);
   }
 });
 export {
-  ie as default
+  be as default
 };

package/dist/components/CuiTimeline.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTimeline.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimeline.vue"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgCD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAoB/C,QAAA,MAAM,eAAe;;aAvDT,OAAO;6EA8DjB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTimeline.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimeline.vue"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAkCD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAoB/C,QAAA,MAAM,eAAe;;aAzDT,OAAO;6EAgEjB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTimeline.vue.js

@@ -1,5 +1,6 @@
-import { defineComponent as o, withDirectives as l, openBlock as i, createElementBlock as n, renderSlot as a, vShow as s } from "vue";
-const r = {
+import { defineComponent as o, withDirectives as l, openBlock as i, createElementBlock as n, renderSlot as s, vShow as a } from "vue";
+const c = {
+  class: "cui-timeline",
   style: {
     display: "flex",
     flexDirection: "column",
@@ -13,10 +14,10 @@ const r = {
     hidden: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (t, c) => l((i(), n("div", r, [
-      a(t.$slots, "default")
+    return (t, r) => l((i(), n("div", c, [
+      s(t.$slots, "default")
     ], 512)), [
-      [s, !e.hidden]
+      [a, !e.hidden]
     ]);
   }
 });

package/dist/components/CuiTimelineItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiTimelineItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimelineItem.vue"],"names":[],"mappings":"AA6HA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,oBAAqB,SAAQ,aAAa,EAAE,cAAc;IACzE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA+HD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAsB/C,QAAA,MAAM,eAAe;;;UAzJZ,OAAO;6EAgKd,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiTimelineItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimelineItem.vue"],"names":[],"mappings":"AA8HA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,oBAAqB,SAAQ,aAAa,EAAE,cAAc;IACzE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAiID,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAsB/C,QAAA,MAAM,eAAe;;;UA3JZ,OAAO;6EAkKd,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiTimelineItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as m, computed as u, withDirectives as y, openBlock as i, createElementBlock as a, normalizeStyle as o, createElementVNode as c, renderSlot as n, createBlock as f, createCommentVNode as l, toDisplayString as s, vShow as v } from "vue";
+import { defineComponent as m, computed as u, withDirectives as y, openBlock as i, createElementBlock as l, normalizeStyle as o, createElementVNode as c, renderSlot as n, createBlock as f, createCommentVNode as a, toDisplayString as s, vShow as v } from "vue";
 import h from "./CuiIcon.vue.js";
 const x = {
   key: 0,
@@ -53,7 +53,8 @@ const x = {
       zIndex: "1",
       boxShadow: t.icon ? "none" : "0 0 0 3px var(--cui-surface-base, white)"
     }));
-    return (r, k) => y((i(), a("div", {
+    return (r, k) => y((i(), l("div", {
+      class: "cui-timeline-item",
       style: o({
         display: "flex",
         gap: "calc(0.875rem * var(--cui-density-scale, 1))",
@@ -79,19 +80,19 @@ const x = {
               key: 0,
               name: e.icon,
               size: "0.875rem"
-            }, null, 8, ["name"])) : l("", !0)
+            }, null, 8, ["name"])) : a("", !0)
           ])
         ], 4),
-        e.last ? l("", !0) : (i(), a("div", x))
+        e.last ? a("", !0) : (i(), l("div", x))
       ], 4),
       c("div", {
         style: o({ flex: "1", minWidth: "0", paddingTop: e.icon ? "calc(0.125rem * var(--cui-density-scale, 1))" : "0" })
       }, [
-        e.title || e.timestamp ? (i(), a("div", g, [
-          e.title ? (i(), a("span", p, s(e.title), 1)) : l("", !0),
-          e.timestamp ? (i(), a("span", b, s(e.timestamp), 1)) : l("", !0)
-        ])) : l("", !0),
-        r.$slots.default ? (i(), a("div", {
+        e.title || e.timestamp ? (i(), l("div", g, [
+          e.title ? (i(), l("span", p, s(e.title), 1)) : a("", !0),
+          e.timestamp ? (i(), l("span", b, s(e.timestamp), 1)) : a("", !0)
+        ])) : a("", !0),
+        r.$slots.default ? (i(), l("div", {
           key: 1,
           style: o({
             fontSize: "0.8125rem",
@@ -101,7 +102,7 @@ const x = {
           })
         }, [
           n(r.$slots, "default")
-        ], 4)) : l("", !0)
+        ], 4)) : a("", !0)
       ], 4)
     ], 4)), [
       [v, !e.hidden]

package/dist/components/CuiToast.vue.d.ts

@@ -1,6 +1,6 @@
-import type { CuiColor, HideableProps, ColorableProps, LiveRegionProps } from "../types/common";
+import type { CuiColor, HideableProps, ColorableProps, LiveRegionProps, RoleIconProps } from "../types/common";
 import type { AlertAnimation, AlertVariant } from "./CuiAlert.vue";
-export interface CuiToastProps extends HideableProps, ColorableProps, LiveRegionProps {
+export interface CuiToastProps extends HideableProps, ColorableProps, LiveRegionProps, RoleIconProps {
     /** Internal toast id */
     toastId?: string;
     /** Title text */
@@ -17,18 +17,16 @@ export interface CuiToastProps extends HideableProps, ColorableProps, LiveRegion
     showProgress?: boolean;
     /** Persistent animation */
     animation?: AlertAnimation;
-    /** Custom icon (emoji or text) */
-    icon?: string;
-    /** Hide the default role icon */
-    noIcon?: boolean;
     /** Whether this toast is the topmost (active) — timer only runs when true */
     active?: boolean;
 }
-declare var __VLS_4: {}, __VLS_6: {};
+declare var __VLS_1: {}, __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_4) => any;
+    icon?: (props: typeof __VLS_1) => any;
 } & {
-    actions?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    actions?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<CuiToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
@@ -40,9 +38,9 @@ declare const __VLS_component: import("vue").DefineComponent<CuiToastProps, {},
     color: CuiColor;
     variant: AlertVariant;
     animation: AlertAnimation;
-    noIcon: boolean;
     dismissible: boolean;
     autoDismiss: number;
+    noIcon: boolean;
     showProgress: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/components/CuiToast.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CuiToast.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToast.vue"],"names":[],"mappings":"AAuTA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEhG,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnE,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,cAAc,EAAE,eAAe;IACnF,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuPD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8B/C,QAAA,MAAM,eAAe;;;;;YAzRV,OAAO;;;aAdN,YAAY;eAQV,cAAc;YAIjB,OAAO;iBAVF,OAAO;iBAEP,MAAM;kBAEL,OAAO;6EAyStB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CuiToast.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToast.vue"],"names":[],"mappings":"AAqTA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE/G,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnE,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa;IAClG,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAyPD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC9D,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8B/C,QAAA,MAAM,eAAe;;;;;YA5RV,OAAO;;;aAVN,YAAY;eAQV,cAAc;iBANZ,OAAO;iBAEP,MAAM;;kBAEL,OAAO;6EAwStB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CuiToast.vue.js

@@ -1,7 +1,7 @@
 import o from "./CuiToast.vue2.js";
 /* empty css              */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ad2b7bea"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-af0e9c33"]]);
 export {
-  p as default
+  m as default
 };