@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiAccordionItem.vue2.js

@@ -0,0 +1,91 @@
+import { defineComponent as y, inject as _, computed as p, ref as b, onMounted as x, nextTick as H, watch as k, withDirectives as C, openBlock as E, createElementBlock as O, normalizeClass as d, createElementVNode as c, renderSlot as g, createTextVNode as $, toDisplayString as w, createVNode as B, vShow as A } from "vue";
+import I from "./CuiIcon.vue.js";
+import { AccordionContextKey as z } from "./accordion-context.js";
+const D = ["aria-expanded", "aria-disabled", "tabindex"], N = { class: "cui-accordion-item__header" }, S = { class: "cui-accordion-item__content" }, R = /* @__PURE__ */ y({
+  __name: "CuiAccordionItem",
+  props: {
+    value: {},
+    label: {},
+    defaultOpen: { type: Boolean, default: !1 },
+    hidden: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const n = a, e = _(z), l = p(() => (e == null ? void 0 : e.isOpen(n.value)) ?? !1), s = p(() => (e == null ? void 0 : e.noAnimation.value) ?? !1), o = b();
+    let r = !1;
+    x(() => {
+      n.defaultOpen && e && !e.isOpen(n.value) && e.toggle(n.value), H(() => {
+        e != null && e.isOpen(n.value) && o.value && (o.value.style.maxHeight = "none"), r = !0;
+      });
+    }), k(l, (t) => {
+      if (!r) return;
+      if (s.value) {
+        o.value && (o.value.style.maxHeight = t ? "none" : "0px");
+        return;
+      }
+      const i = o.value;
+      if (i)
+        if (t) {
+          i.style.maxHeight = "0px", i.offsetHeight, i.style.maxHeight = `${i.scrollHeight}px`;
+          const v = () => {
+            i.style.maxHeight = "none", i.removeEventListener("transitionend", v);
+          };
+          i.addEventListener("transitionend", v);
+        } else
+          i.style.maxHeight = `${i.scrollHeight}px`, i.offsetHeight, i.style.maxHeight = "0px";
+    }, { flush: "post" });
+    function u() {
+      n.disabled || e == null || e.toggle(n.value);
+    }
+    function h(t) {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), u());
+    }
+    const f = `cui-accordion-panel-${n.value}`, m = `cui-accordion-trigger-${n.value}`;
+    return (t, i) => C((E(), O("div", {
+      class: d(["cui-accordion-item", { "cui-accordion-item--open": l.value, "cui-accordion-item--disabled": a.disabled }])
+    }, [
+      c("button", {
+        id: m,
+        type: "button",
+        class: "cui-accordion-item__trigger",
+        "aria-expanded": l.value,
+        "aria-controls": f,
+        "aria-disabled": a.disabled || void 0,
+        tabindex: a.disabled ? -1 : 0,
+        onClick: u,
+        onKeydown: h
+      }, [
+        c("span", N, [
+          g(t.$slots, "header", {}, () => [
+            $(w(a.label), 1)
+          ], !0)
+        ]),
+        B(I, {
+          name: "caret-down",
+          size: "1rem",
+          class: d(["cui-accordion-item__chevron", { "cui-accordion-item__chevron--open": l.value }])
+        }, null, 8, ["class"])
+      ], 40, D),
+      c("div", {
+        id: f,
+        ref_key: "contentRef",
+        ref: o,
+        class: d(["cui-accordion-item__panel", {
+          "cui-accordion-item__panel--open": l.value,
+          "cui-accordion-item__panel--no-animation": s.value
+        }]),
+        role: "region",
+        "aria-labelledby": m
+      }, [
+        c("div", S, [
+          g(t.$slots, "default", {}, void 0, !0)
+        ])
+      ], 2)
+    ], 2)), [
+      [A, !a.hidden]
+    ]);
+  }
+});
+export {
+  R as default
+};

package/dist/components/CuiAlert.vue.js

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

package/dist/components/CuiAlert.vue2.js

@@ -0,0 +1,110 @@
+import { defineComponent as C, ref as f, onMounted as D, onUnmounted as B, computed as u, withDirectives as I, openBlock as s, createElementBlock as a, mergeProps as N, renderSlot as d, createVNode as b, createCommentVNode as r, createElementVNode as A, toDisplayString as M, unref as S, vShow as O } from "vue";
+import $ from "./CuiIcon.vue.js";
+import { COLOR_ICON_MAP as R } from "../utils/colorIconMap.js";
+import { resolveLiveRegion as T } from "../utils/liveRegion.js";
+import { useMessages as V } from "../composables/useMessages.js";
+const w = {
+  key: 0,
+  class: "cui-alert__icon"
+}, z = { class: "cui-alert__body" }, E = {
+  key: 0,
+  class: "cui-alert__title"
+}, L = {
+  key: 1,
+  class: "cui-alert__description"
+}, P = {
+  key: 2,
+  class: "cui-alert__actions"
+}, q = ["aria-label"], J = /* @__PURE__ */ C({
+  __name: "CuiAlert",
+  props: {
+    variant: { default: "subtle" },
+    title: {},
+    noIcon: { type: Boolean, default: !1 },
+    dismissible: { type: Boolean, default: !1 },
+    autoDismiss: {},
+    entrance: { default: "fade" },
+    animation: { default: "none" },
+    rounded: { default: "md" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "info" },
+    live: {}
+  },
+  emits: ["dismiss"],
+  setup(o, { emit: _ }) {
+    const y = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, i = o, g = _, m = f(!0), l = f(!1);
+    let n = null;
+    D(() => {
+      requestAnimationFrame(() => {
+        l.value = !0;
+      }), i.autoDismiss && i.autoDismiss > 0 && (n = setTimeout(() => {
+        v();
+      }, i.autoDismiss));
+    }), B(() => {
+      n && clearTimeout(n);
+    });
+    function v() {
+      l.value = !1, setTimeout(() => {
+        m.value = !1, g("dismiss");
+      }, 300);
+    }
+    const k = u(() => {
+      const e = i.color, c = i.variant, t = {
+        borderRadius: y[i.rounded],
+        "--_alert-color": `var(--cui-${e})`,
+        "--_alert-focus-ring": `var(--cui-${e}-focus-ring)`
+      };
+      return c === "solid" ? (t.background = `var(--cui-${e}-solid, var(--cui-${e}))`, t.color = `var(--cui-${e}-text)`, t.border = "1px solid transparent", t["--_alert-icon-color"] = `var(--cui-${e}-text)`, t["--_alert-dismiss-color"] = `var(--cui-${e}-text)`) : c === "outline" ? (t.background = "transparent", t.color = `var(--cui-${e})`, t.border = `1px solid var(--cui-${e}-border)`, t["--_alert-icon-color"] = `var(--cui-${e})`, t["--_alert-dismiss-color"] = `var(--cui-${e})`) : (t.background = `var(--cui-${e}-bg)`, t.color = "var(--cui-text-body)", t.border = `1px solid var(--cui-${e}-border)`, t["--_alert-icon-color"] = `var(--cui-${e})`, t["--_alert-dismiss-color"] = "var(--cui-text-secondary)"), t;
+    }), p = u(() => R[i.color] ?? "info"), h = u(() => T(i.color, i.live)), x = V();
+    return (e, c) => m.value ? I((s(), a("div", N({
+      key: 0,
+      class: ["cui-alert", [
+        `cui-alert--entrance-${o.entrance}`,
+        { "cui-alert--mounted": l.value },
+        o.animation !== "none" ? `cui-alert--${o.animation}` : ""
+      ]],
+      style: k.value
+    }, h.value), [
+      o.noIcon ? r("", !0) : (s(), a("div", w, [
+        d(e.$slots, "icon", {}, () => [
+          b($, {
+            name: p.value,
+            size: "1.25rem"
+          }, null, 8, ["name"])
+        ], !0)
+      ])),
+      A("div", z, [
+        o.title ? (s(), a("div", E, M(o.title), 1)) : r("", !0),
+        e.$slots.default ? (s(), a("div", L, [
+          d(e.$slots, "default", {}, void 0, !0)
+        ])) : r("", !0),
+        e.$slots.actions ? (s(), a("div", P, [
+          d(e.$slots, "actions", {}, void 0, !0)
+        ])) : r("", !0)
+      ]),
+      o.dismissible ? (s(), a("button", {
+        key: 1,
+        type: "button",
+        class: "cui-alert__dismiss",
+        "aria-label": S(x).dismiss,
+        onClick: v
+      }, [
+        b($, {
+          name: "x",
+          size: "0.875rem"
+        })
+      ], 8, q)) : r("", !0)
+    ], 16)), [
+      [O, !o.hidden]
+    ]) : r("", !0);
+  }
+});
+export {
+  J as default
+};

package/dist/components/CuiAvatar.vue.js

@@ -0,0 +1,99 @@
+import { defineComponent as y, ref as x, computed as i, withDirectives as D, openBlock as o, createElementBlock as n, normalizeStyle as u, toDisplayString as k, createBlock as w, createCommentVNode as p, vShow as O } from "vue";
+import z from "./CuiIcon.vue.js";
+import { scaleDensity as t } from "../utils/sizing.js";
+const C = ["src", "alt"], S = {
+  key: 1,
+  class: "cui-avatar__initials"
+}, I = /* @__PURE__ */ y({
+  __name: "CuiAvatar",
+  props: {
+    src: {},
+    alt: {},
+    name: {},
+    initials: {},
+    icon: {},
+    shape: { default: "circle" },
+    statusAnimation: {},
+    status: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "md" }
+  },
+  setup(s) {
+    const e = s, c = x(!1), l = i(() => e.src && !c.value), m = i(() => e.initials ? e.initials : e.name ? e.name.split(" ").filter(Boolean).slice(0, 2).map((r) => r[0].toUpperCase()).join("") : ""), b = {
+      xs: { box: t("1.5rem"), font: "0.5rem", icon: t("0.75rem"), statusDot: t("0.5rem"), statusOffset: t("-2px") },
+      sm: { box: t("2rem"), font: "0.625rem", icon: t("0.875rem"), statusDot: t("0.625rem"), statusOffset: t("-2px") },
+      md: { box: t("2.5rem"), font: "0.75rem", icon: t("1rem"), statusDot: t("0.625rem"), statusOffset: t("-1px") },
+      lg: { box: t("3.5rem"), font: "1rem", icon: t("1.25rem"), statusDot: t("0.75rem"), statusOffset: t("0px") },
+      xl: { box: t("5rem"), font: "1.375rem", icon: t("1.75rem"), statusDot: t("1rem"), statusOffset: t("2px") }
+    }, a = i(() => b[e.size]), g = i(() => ({
+      width: a.value.box,
+      height: a.value.box,
+      borderRadius: e.shape === "circle" ? "50%" : "20%",
+      fontSize: a.value.font,
+      background: l.value ? "transparent" : `var(--cui-${e.color}-bg)`,
+      color: l.value ? "transparent" : `var(--cui-${e.color})`
+    })), f = {
+      online: "var(--cui-success)",
+      offline: "var(--cui-text-tertiary, #999)",
+      away: "var(--cui-warning)",
+      busy: "var(--cui-error)"
+    }, h = i(() => {
+      if (!e.status) return {};
+      const r = {
+        width: a.value.statusDot,
+        height: a.value.statusDot,
+        background: f[e.status],
+        border: "2px solid var(--cui-surface-base, white)",
+        borderRadius: "50%",
+        position: "absolute",
+        bottom: a.value.statusOffset,
+        right: a.value.statusOffset
+      };
+      return e.statusAnimation === "pulse" && (r.animation = "cui-pulse 2s ease-in-out infinite"), r;
+    }), v = i(() => {
+      if (!(!e.status || e.statusAnimation !== "ping"))
+        return {
+          width: a.value.statusDot,
+          height: a.value.statusDot,
+          background: f[e.status],
+          borderRadius: "50%",
+          position: "absolute",
+          bottom: a.value.statusOffset,
+          right: a.value.statusOffset,
+          opacity: "0.75",
+          animation: "cui-avatar-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite"
+        };
+    });
+    return (r, d) => D((o(), n("div", {
+      class: "cui-avatar",
+      style: u(g.value)
+    }, [
+      l.value ? (o(), n("img", {
+        key: 0,
+        src: s.src,
+        alt: s.alt || s.name || "Avatar",
+        class: "cui-avatar__img",
+        style: u({ borderRadius: s.shape === "circle" ? "50%" : "20%" }),
+        onError: d[0] || (d[0] = (A) => c.value = !0)
+      }, null, 44, C)) : m.value ? (o(), n("span", S, k(m.value), 1)) : (o(), w(z, {
+        key: 2,
+        name: s.icon || "user",
+        size: a.value.icon
+      }, null, 8, ["name", "size"])),
+      v.value ? (o(), n("span", {
+        key: 3,
+        style: u(v.value)
+      }, null, 4)) : p("", !0),
+      s.status ? (o(), n("span", {
+        key: 4,
+        style: u(h.value)
+      }, null, 4)) : p("", !0)
+    ], 4)), [
+      [O, !s.hidden]
+    ]);
+  }
+});
+export {
+  I as default
+};

package/dist/components/CuiAvatar.vue3.js

@@ -0,0 +1,5 @@
+import o from "./CuiAvatar.vue.js";
+/* empty css               */
+export {
+  o as default
+};

package/dist/components/CuiAvatarGroup.vue.js

@@ -0,0 +1,22 @@
+import { defineComponent as t, withDirectives as r, openBlock as n, createElementBlock as o, normalizeStyle as i, renderSlot as l, vShow as s } from "vue";
+const u = /* @__PURE__ */ t({
+  __name: "CuiAvatarGroup",
+  props: {
+    spacing: { default: "-0.5rem" },
+    max: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (a, c) => r((n(), o("div", {
+      class: "cui-avatar-group",
+      style: i({ "--_avatar-group-spacing": e.spacing })
+    }, [
+      l(a.$slots, "default")
+    ], 4)), [
+      [s, !e.hidden]
+    ]);
+  }
+});
+export {
+  u as default
+};

package/dist/components/CuiAvatarGroup.vue3.js

@@ -0,0 +1,5 @@
+import o from "./CuiAvatarGroup.vue.js";
+/* empty css                    */
+export {
+  o as default
+};

package/dist/components/CuiBackdrop.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiBackdrop.vue2.js";
+/* empty css                 */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-96035f2e"]]);
+export {
+  f as default
+};

package/dist/components/CuiBackdrop.vue2.js

@@ -0,0 +1,49 @@
+import { defineComponent as m, ref as k, onMounted as f, computed as c, withDirectives as v, openBlock as g, createElementBlock as y, normalizeStyle as h, normalizeClass as B, vShow as x } from "vue";
+import { resolveColor as C } from "../utils/color.js";
+const w = /* @__PURE__ */ m({
+  __name: "CuiBackdrop",
+  props: {
+    opacity: { default: 0.5 },
+    blur: { default: "none" },
+    color: { default: "black" },
+    image: {},
+    gradient: {},
+    visible: { type: Boolean },
+    hidden: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(l, { emit: s }) {
+    const e = l, u = s, d = {
+      none: "none",
+      sm: "2px",
+      md: "4px",
+      lg: "8px"
+    }, r = k(!1);
+    f(() => {
+      requestAnimationFrame(() => {
+        r.value = !0;
+      });
+    });
+    const b = c(() => e.visible !== void 0 ? e.visible : r.value), p = c(() => {
+      const i = d[e.blur] ?? e.blur, n = i !== "none", o = {}, t = [];
+      e.gradient && t.push(e.gradient), e.image && t.push(`url("${e.image}") repeat`);
+      const a = C(e.color, "black");
+      return n ? (t.push(`color-mix(in srgb, ${a} ${Math.round(e.opacity * 100)}%, transparent)`), o.backdropFilter = `blur(${i})`, o.webkitBackdropFilter = `blur(${i})`) : t.push(a), o.background = t.join(", "), o;
+    });
+    return (i, n) => v((g(), y("div", {
+      class: B(["cui-backdrop", { "cui-backdrop--visible": b.value }]),
+      style: h({
+        ...p.value,
+        // When no blur, use element opacity for the fade-in
+        ...!l.blur || l.blur === "none" ? { "--_backdrop-opacity": String(l.opacity) } : {}
+      }),
+      "aria-hidden": "true",
+      onClick: n[0] || (n[0] = (o) => u("click", o))
+    }, null, 6)), [
+      [x, !l.hidden]
+    ]);
+  }
+});
+export {
+  w as default
+};

package/dist/components/CuiBadge.vue.js

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

package/dist/components/CuiBadge.vue2.js

@@ -0,0 +1,79 @@
+import { defineComponent as z, computed as s, withDirectives as c, openBlock as i, createElementBlock as l, normalizeClass as m, createElementVNode as b, normalizeStyle as d, createCommentVNode as v, vShow as f, renderSlot as h, withModifiers as x, unref as B, createVNode as C } from "vue";
+import { clampSize as E } from "../utils/sizing.js";
+import w from "./CuiIcon.vue.js";
+import { useMessages as M } from "../composables/useMessages.js";
+const N = { class: "cui-badge__content" }, V = ["aria-label"], O = /* @__PURE__ */ z({
+  __name: "CuiBadge",
+  props: {
+    variant: { default: "subtle" },
+    dot: { type: Boolean, default: !1 },
+    removable: { type: Boolean, default: !1 },
+    animation: { default: "none" },
+    rounded: { default: "full" },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    size: { default: "sm" }
+  },
+  emits: ["remove"],
+  setup(a, { emit: g }) {
+    const p = ["sm", "md"], t = a, y = {
+      none: "0",
+      sm: "0.25rem",
+      md: "var(--cui-button-radius, 0.375rem)",
+      lg: "0.5rem",
+      full: "9999px"
+    }, $ = g, k = s(() => {
+      const o = t.color, n = t.variant, e = {};
+      return n === "solid" ? (e.background = `var(--cui-${o}-solid, var(--cui-${o}))`, e.color = `var(--cui-${o}-text)`, e.border = "1px solid transparent") : n === "outline" ? (e.background = "transparent", e.color = `var(--cui-${o})`, e.border = `1px solid var(--cui-${o}-border)`) : (e.background = `var(--cui-${o}-bg)`, e.color = `var(--cui-${o})`, e.border = "1px solid transparent"), e.borderRadius = y[t.rounded], e;
+    }), u = s(() => ({
+      background: `var(--cui-${t.color})`
+    })), r = s(() => E(t.size, p)), S = M();
+    return (o, n) => a.dot ? c((i(), l("span", {
+      key: 0,
+      class: m(["cui-badge cui-badge--dot", [
+        `cui-badge--${r.value}`,
+        a.animation !== "none" ? `cui-badge--${a.animation}` : ""
+      ]])
+    }, [
+      b("span", {
+        class: "cui-badge__dot",
+        style: d(u.value)
+      }, null, 4),
+      a.animation === "ping" ? (i(), l("span", {
+        key: 0,
+        class: "cui-badge__ping",
+        style: d(u.value)
+      }, null, 4)) : v("", !0)
+    ], 2)), [
+      [f, !a.hidden]
+    ]) : c((i(), l("span", {
+      key: 1,
+      class: m(["cui-badge", [
+        `cui-badge--${r.value}`,
+        a.animation !== "none" ? `cui-badge--${a.animation}` : ""
+      ]]),
+      style: d(k.value)
+    }, [
+      b("span", N, [
+        h(o.$slots, "default", {}, void 0, !0)
+      ]),
+      a.removable ? (i(), l("button", {
+        key: 0,
+        type: "button",
+        class: "cui-badge__remove",
+        "aria-label": B(S).remove,
+        onClick: n[0] || (n[0] = x((e) => $("remove"), ["stop"]))
+      }, [
+        C(w, {
+          name: "x",
+          size: r.value === "sm" ? "0.625rem" : "0.75rem"
+        }, null, 8, ["size"])
+      ], 8, V)) : v("", !0)
+    ], 6)), [
+      [f, !a.hidden]
+    ]);
+  }
+});
+export {
+  O as default
+};

package/dist/components/CuiBanner.vue.js

@@ -0,0 +1,81 @@
+import { defineComponent as g, ref as h, computed as s, withDirectives as k, openBlock as i, createElementBlock as l, mergeProps as b, createBlock as a, createCommentVNode as r, createElementVNode as x, renderSlot as c, withCtx as $, createVNode as C, vShow as B } from "vue";
+import d from "./CuiIcon.vue.js";
+import I from "./CuiButton.vue.js";
+import { COLOR_ICON_MAP as w } from "../utils/colorIconMap.js";
+import { resolveLiveRegion as z } from "../utils/liveRegion.js";
+const K = { style: { flex: "1", "font-size": "0.875rem", "font-weight": "500", "text-align": "center" } }, N = {
+  key: 1,
+  style: { "flex-shrink": "0", display: "flex", "align-items": "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))" }
+}, L = /* @__PURE__ */ g({
+  __name: "CuiBanner",
+  props: {
+    variant: { default: "subtle" },
+    position: { default: "top" },
+    dismissible: { type: Boolean, default: !0 },
+    noIcon: { type: Boolean, default: !1 },
+    storageKey: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    live: {}
+  },
+  emits: ["dismiss"],
+  setup(t, { emit: u }) {
+    const e = t, m = u, n = h(
+      e.storageKey ? localStorage.getItem(`cui-banner-${e.storageKey}`) === "1" : !1
+    );
+    function f() {
+      n.value = !0, e.storageKey && localStorage.setItem(`cui-banner-${e.storageKey}`, "1"), m("dismiss");
+    }
+    const p = s(() => w[e.color] ?? "info"), v = s(() => z(e.color, e.live)), y = s(() => {
+      const o = {
+        position: "sticky",
+        left: "0",
+        right: "0",
+        zIndex: "50",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "calc(0.75rem * var(--cui-density-scale, 1))",
+        padding: "calc(0.625rem * var(--cui-density-scale, 1)) calc(1rem * var(--cui-density-scale, 1))"
+      };
+      return o[e.position] = "0", e.variant === "solid" ? (o.background = `var(--cui-${e.color}-solid, var(--cui-${e.color}))`, o.color = `var(--cui-${e.color}-text, white)`) : (o.background = `var(--cui-${e.color}-bg)`, o.color = `var(--cui-${e.color})`, o.borderBottom = e.position === "top" ? `1px solid var(--cui-${e.color}-border)` : "none", o.borderTop = e.position === "bottom" ? `1px solid var(--cui-${e.color}-border)` : "none"), o;
+    });
+    return (o, S) => n.value ? r("", !0) : k((i(), l("div", b({
+      key: 0,
+      style: y.value
+    }, v.value), [
+      t.noIcon ? r("", !0) : (i(), a(d, {
+        key: 0,
+        name: p.value,
+        size: "1.125rem",
+        style: { "flex-shrink": "0" }
+      }, null, 8, ["name"])),
+      x("div", K, [
+        c(o.$slots, "default")
+      ]),
+      o.$slots.actions ? (i(), l("div", N, [
+        c(o.$slots, "actions")
+      ])) : r("", !0),
+      t.dismissible ? (i(), a(I, {
+        key: 2,
+        variant: "ghost",
+        size: "xs",
+        style: { "flex-shrink": "0", color: "currentColor", opacity: "0.7" },
+        onClick: f
+      }, {
+        default: $(() => [
+          C(d, {
+            name: "x",
+            size: "0.875rem"
+          })
+        ]),
+        _: 1
+      })) : r("", !0)
+    ], 16)), [
+      [B, !t.hidden]
+    ]);
+  }
+});
+export {
+  L as default
+};

package/dist/components/CuiBanner.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiBanner.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiBreadcrumb.vue.js

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

package/dist/components/CuiBreadcrumb.vue2.js

@@ -0,0 +1,29 @@
+import { defineComponent as t, provide as o, withDirectives as s, openBlock as c, createElementBlock as l, unref as n, createElementVNode as d, renderSlot as i, vShow as u } from "vue";
+import { BreadcrumbContextKey as m } from "./breadcrumb-context.js";
+import { useMessages as p } from "../composables/useMessages.js";
+const b = ["aria-label"], f = { class: "cui-breadcrumb__list" }, g = /* @__PURE__ */ t({
+  __name: "CuiBreadcrumb",
+  props: {
+    separator: { default: "/" },
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    o(m, {
+      separator: e.separator
+    });
+    const r = p();
+    return (a, h) => s((c(), l("nav", {
+      "aria-label": n(r).breadcrumb.label,
+      class: "cui-breadcrumb"
+    }, [
+      d("ol", f, [
+        i(a.$slots, "default", {}, void 0, !0)
+      ])
+    ], 8, b)), [
+      [u, !e.hidden]
+    ]);
+  }
+});
+export {
+  g as default
+};

package/dist/components/CuiBreadcrumbItem.vue.js

@@ -0,0 +1,7 @@
+import o from "./CuiBreadcrumbItem.vue2.js";
+/* empty css                       */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-956ad9cf"]]);
+export {
+  c as default
+};

package/dist/components/CuiBreadcrumbItem.vue2.js

@@ -0,0 +1,46 @@
+import { defineComponent as d, inject as p, ref as i, onMounted as v, computed as l, withDirectives as h, openBlock as o, createElementBlock as c, createBlock as _, resolveDynamicComponent as b, mergeProps as k, withCtx as y, renderSlot as C, toDisplayString as B, unref as g, createCommentVNode as x, vShow as S } from "vue";
+import { BreadcrumbContextKey as w } from "./breadcrumb-context.js";
+const D = {
+  key: 0,
+  class: "cui-breadcrumb-item__separator",
+  "aria-hidden": "true"
+}, R = /* @__PURE__ */ d({
+  __name: "CuiBreadcrumbItem",
+  props: {
+    href: {},
+    to: {},
+    hidden: { type: Boolean, default: !1 }
+  },
+  setup(u) {
+    const e = u, s = p(w, { separator: "/" }), t = i(), r = i(!1);
+    v(() => {
+      var a;
+      if ((a = t.value) != null && a.parentElement) {
+        const n = t.value.parentElement.querySelectorAll(".cui-breadcrumb-item");
+        r.value = n[n.length - 1] === t.value;
+      }
+    });
+    const m = l(() => r.value ? "span" : e.to ? "router-link" : e.href ? "a" : "span"), f = l(() => r.value ? {} : e.to ? { to: e.to } : e.href ? { href: e.href } : {});
+    return (a, n) => h((o(), c("li", {
+      ref_key: "elRef",
+      ref: t,
+      class: "cui-breadcrumb-item"
+    }, [
+      (o(), _(b(m.value), k(f.value, {
+        class: ["cui-breadcrumb-item__link", { "cui-breadcrumb-item__link--current": r.value }],
+        "aria-current": r.value ? "page" : void 0
+      }), {
+        default: y(() => [
+          C(a.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 16, ["class", "aria-current"])),
+      r.value ? x("", !0) : (o(), c("span", D, B(g(s).separator), 1))
+    ], 512)), [
+      [S, !u.hidden]
+    ]);
+  }
+});
+export {
+  R as default
+};