@itguy614/clean-ui 1.2.1 → 1.3.0

package/dist/components/CuiAlert.vue.js

@@ -1,7 +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-568c7fd8"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-38857f01"]]);
 export {
   p as default
 };

package/dist/components/CuiAlert.vue2.js

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

package/dist/components/CuiBadge.vue.js

@@ -1,7 +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-b21f1636"]]);
+import a from "../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ a(o, [["__scopeId", "data-v-0a96d4a3"]]);
 export {
-  m as default
+  p as default
 };

package/dist/components/CuiBadge.vue2.js

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

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

@@ -1,23 +1,28 @@
-import type { HideableProps, ColorableProps, LiveRegionProps } from "../types/common";
-export type BannerPosition = "top" | "bottom";
+import type { HideableProps, ColorableProps, LiveRegionProps, RoleIconProps } from "../types/common";
+export type BannerPosition = "top" | "bottom" | "inline";
 export type BannerVariant = "solid" | "subtle";
-export interface CuiBannerProps extends HideableProps, ColorableProps, LiveRegionProps {
+export interface CuiBannerProps extends HideableProps, ColorableProps, LiveRegionProps, RoleIconProps {
     /** Visual variant */
     variant?: BannerVariant;
-    /** Sticky position */
+    /**
+     * Where the banner sits. `top` and `bottom` pin it to that page edge, sticky, with a
+     * rule against the edge. `inline` puts it in the flow instead — no edge rule, a closed
+     * box with a radius — for a notice inside a card or panel, where the rule has nothing
+     * to sit against (#120).
+     */
     position?: BannerPosition;
     /** Show dismiss button */
     dismissible?: boolean;
-    /** Hide the default role icon */
-    noIcon?: boolean;
     /** Persist dismissal to localStorage under this key */
     storageKey?: string;
 }
-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<CuiBannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: () => any;
@@ -28,8 +33,8 @@ declare const __VLS_component: import("vue").DefineComponent<CuiBannerProps, {},
     color: import("..").CuiColor;
     variant: BannerVariant;
     position: BannerPosition;
-    noIcon: boolean;
     dismissible: boolean;
+    noIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiBanner.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBanner.vue"],"names":[],"mappings":"AAkHA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAOtF,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,eAAe;IACpF,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiJD,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;AA4B/C,QAAA,MAAM,eAAe;;;;;;;aAzLT,aAAa;cAEZ,cAAc;YAIhB,OAAO;iBAFF,OAAO;6EA6LrB,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":"CuiBanner.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiBanner.vue"],"names":[],"mappings":"AA4NA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQrG,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa;IACnG,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAoLD,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;AA6B/C,QAAA,MAAM,eAAe;;;;;;;aAjOT,aAAa;cAOZ,cAAc;iBAEX,OAAO;;6EAgOrB,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/CuiBanner.vue.js

@@ -1,82 +1,7 @@
-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";
-import { safeGetItem as K, safeSetItem as N } from "../utils/storage.js";
-const S = { style: { flex: "1", "font-size": "0.875rem", "font-weight": "500", "text-align": "center" } }, _ = {
-  key: 1,
-  style: { "flex-shrink": "0", display: "flex", "align-items": "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))" }
-}, j = /* @__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 ? K(`cui-banner-${e.storageKey}`) === "1" : !1
-    );
-    function f() {
-      n.value = !0, e.storageKey && N(`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, O) => 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", S, [
-        c(o.$slots, "default")
-      ]),
-      o.$slots.actions ? (i(), l("div", _, [
-        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]
-    ]);
-  }
-});
+import o from "./CuiBanner.vue2.js";
+/* empty css               */
+import r from "../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-10c192b3"]]);
 export {
-  j as default
+  p as default
 };

package/dist/components/CuiBanner.vue2.js

@@ -1,4 +1,92 @@
-import f from "./CuiBanner.vue.js";
+import { defineComponent as $, ref as _, computed as a, withDirectives as h, openBlock as n, createElementBlock as r, mergeProps as k, renderSlot as c, Fragment as B, createTextVNode as C, toDisplayString as I, createBlock as u, createCommentVNode as s, createElementVNode as x, unref as K, withCtx as S, createVNode as w, vShow as N } from "vue";
+import m from "./CuiIcon.vue.js";
+import V from "./CuiButton.vue.js";
+import { resolveRoleIcon as z } from "../utils/colorIconMap.js";
+import { resolveLiveRegion as D } from "../utils/liveRegion.js";
+import { safeGetItem as E, safeSetItem as R } from "../utils/storage.js";
+import { useMessages as A } from "../composables/useMessages.js";
+const F = {
+  key: 0,
+  class: "cui-banner__icon"
+}, G = { class: "cui-banner__content" }, L = {
+  key: 1,
+  class: "cui-banner__actions"
+}, O = /* @__PURE__ */ $({
+  __name: "CuiBanner",
+  props: {
+    variant: { default: "subtle" },
+    position: { default: "top" },
+    dismissible: { type: Boolean, default: !0 },
+    storageKey: {},
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "primary" },
+    live: {},
+    icon: {},
+    noIcon: { type: Boolean, default: !1 }
+  },
+  emits: ["dismiss"],
+  setup(o, { emit: d }) {
+    const t = o, v = d, l = _(
+      t.storageKey ? E(`cui-banner-${t.storageKey}`) === "1" : !1
+    );
+    function f() {
+      l.value = !0, t.storageKey && R(`cui-banner-${t.storageKey}`, "1"), v("dismiss");
+    }
+    const i = a(() => z(t.icon, t.color)), b = A(), y = a(() => D(t.color, t.live)), p = a(() => {
+      const e = t.color;
+      return t.variant === "solid" ? {
+        "--_banner-bg": `var(--cui-${e}-solid, var(--cui-${e}))`,
+        "--_banner-color": `var(--cui-${e}-text, white)`,
+        "--_banner-border-color": "transparent"
+      } : {
+        "--_banner-bg": `var(--cui-${e}-bg)`,
+        "--_banner-color": `var(--cui-${e})`,
+        "--_banner-border-color": `var(--cui-${e}-border)`
+      };
+    });
+    return (e, g) => l.value ? s("", !0) : h((n(), r("div", k({
+      key: 0,
+      class: ["cui-banner", [`cui-banner--${o.variant}`, `cui-banner--${o.position}`]],
+      style: p.value
+    }, y.value), [
+      o.noIcon ? s("", !0) : (n(), r("span", F, [
+        c(e.$slots, "icon", {}, () => [
+          i.value.text ? (n(), r(B, { key: 0 }, [
+            C(I(i.value.text), 1)
+          ], 64)) : (n(), u(m, {
+            key: 1,
+            name: i.value.name,
+            size: "1.125rem"
+          }, null, 8, ["name"]))
+        ], !0)
+      ])),
+      x("div", G, [
+        c(e.$slots, "default", {}, void 0, !0)
+      ]),
+      e.$slots.actions ? (n(), r("div", L, [
+        c(e.$slots, "actions", {}, void 0, !0)
+      ])) : s("", !0),
+      o.dismissible ? (n(), u(V, {
+        key: 2,
+        variant: "ghost",
+        size: "xs",
+        class: "cui-banner__dismiss",
+        "aria-label": K(b).dismiss,
+        onClick: f
+      }, {
+        default: S(() => [
+          w(m, {
+            name: "x",
+            size: "0.875rem"
+          })
+        ]),
+        _: 1
+      }, 8, ["aria-label"])) : s("", !0)
+    ], 16)), [
+      [N, !o.hidden]
+    ]);
+  }
+});
 export {
-  f as default
+  O as default
 };

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

@@ -13,6 +13,14 @@ export interface CuiButtonProps extends HideableProps, ColorableProps, SizeableP
     to?: string | object;
     /** Loading state — shows spinner and disables interaction */
     loading?: boolean;
+    /**
+     * Icon-only button: square, with no horizontal padding.
+     *
+     * Also opts out of the `--cui-control-min-target` floor, so an `xs` button at compact
+     * density can go below the 24px WCAG 2.5.8 minimum. That is the only size/density
+     * combination where the floor currently binds.
+     */
+    icon?: boolean;
 }
 declare function focus(opts?: FocusOptions): void;
 declare function blur(): void;
@@ -33,6 +41,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiButtonProps, {
     size: import("../index.js").CuiSize;
     color: CuiColor;
     type: "button" | "submit" | "reset";
+    icon: boolean;
     variant: ButtonVariant;
     rounded: CuiRounded;
     loading: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiButton.vue"],"names":[],"mappings":"AAsRA,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,cACf,SAAQ,aAAa,EACnB,cAAc,EACd,aAAa,EACb,gBAAgB;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+CD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAsLD,QAAA,IAAuB,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA0B/C,QAAA,MAAM,eAAe;;;;;;;;UAhRZ,QAAQ,GAAG,QAAQ,GAAG,OAAO;aAJ1B,aAAa;aAEb,UAAU;aAQV,OAAO;;6EAkRjB,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":"CuiButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiButton.vue"],"names":[],"mappings":"AAmUA,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,gBAAgB,EACjB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,cACf,SAAQ,aAAa,EACnB,cAAc,EACd,aAAa,EACb,gBAAgB;IAClB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAgDD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;AAwLD,QAAA,IAAuB,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA0B/C,QAAA,MAAM,eAAe;;;;;;;;UA3RZ,QAAQ,GAAG,QAAQ,GAAG,OAAO;UAc7B,OAAO;aAlBJ,aAAa;aAEb,UAAU;aAQV,OAAO;;6EA6RjB,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/CuiButton.vue.js

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