@itguy614/clean-ui 1.2.2 → 1.3.1

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

@@ -1,15 +1,23 @@
-import type { HideableProps } from "../types/common";
-export interface CuiModalHeaderProps extends HideableProps {
+import type { HideableProps, TitleAsProps } from "../types/common";
+export interface CuiModalHeaderProps extends HideableProps, TitleAsProps {
     /** Convenience: title text */
     title?: string;
+    /**
+     * id for the title element, so the dialog can point `aria-labelledby` at it.
+     *
+     * `CuiModal` and `CuiSlideover` generate one and pass it down. Without it their
+     * `aria-labelledby` referenced an id that was never rendered, so every titled dialog
+     * in the library was announced unnamed (#158).
+     */
+    titleId?: string;
     /** Hide the close button */
     noCloseButton?: boolean;
 }
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<CuiModalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
@@ -18,6 +26,7 @@ declare const __VLS_component: import("vue").DefineComponent<CuiModalHeaderProps
 }>, {
     hidden: boolean;
     noCloseButton: boolean;
+    titleAs: import("../index.js").CuiTitleAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"CuiModalHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModalHeader.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6GD,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;AAwB/C,QAAA,MAAM,eAAe;;;;;;mBAzIH,OAAO;6EAiJvB,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":"CuiModalHeader.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModalHeader.vue"],"names":[],"mappings":"AAqGA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGnE,MAAM,WAAW,mBAAoB,SAAQ,aAAa,EAAE,YAAY;IACtE,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmID,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;AAwB/C,QAAA,MAAM,eAAe;;;;;;mBA/JH,OAAO;;6EAuKvB,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/CuiModalHeader.vue.js

@@ -1,47 +1,59 @@
-import { defineComponent as u, withDirectives as m, openBlock as r, createElementBlock as o, createElementVNode as y, renderSlot as n, toDisplayString as g, createCommentVNode as s, unref as f, createVNode as p, vShow as v } from "vue";
-import h from "./CuiIcon.vue.js";
-import { useMessages as b } from "../composables/useMessages.js";
-const k = { style: {
-  display: "flex",
-  alignItems: "flex-start",
-  gap: "calc(0.75rem * var(--cui-density-scale, 1))",
-  padding: "calc(1.25rem * var(--cui-density-scale, 1)) calc(1.5rem * var(--cui-density-scale, 1)) calc(0.25rem * var(--cui-density-scale, 1))",
-  flexShrink: "0",
-  background: "var(--cui-surface-base)",
-  position: "relative",
-  zIndex: "1"
-} }, x = { style: { flex: "1", "min-width": "0" } }, C = {
-  key: 0,
+import { defineComponent as u, withDirectives as m, openBlock as a, createElementBlock as o, createElementVNode as y, renderSlot as s, createBlock as g, resolveDynamicComponent as f, withCtx as v, createTextVNode as h, toDisplayString as p, createCommentVNode as l, unref as k, createVNode as x, vShow as b } from "vue";
+import C from "./CuiIcon.vue.js";
+import { useMessages as B } from "../composables/useMessages.js";
+const I = {
+  class: "cui-modal-header",
   style: {
-    fontSize: "1.125rem",
-    fontWeight: "600",
-    lineHeight: "1.4",
-    color: "var(--cui-text-emphasis)",
-    margin: "0"
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "calc(0.75rem * var(--cui-density-scale, 1))",
+    padding: "calc(1.25rem * var(--cui-density-scale, 1)) calc(1.5rem * var(--cui-density-scale, 1)) calc(0.25rem * var(--cui-density-scale, 1))",
+    flexShrink: "0",
+    background: "var(--cui-surface-base)",
+    position: "relative",
+    zIndex: "1"
   }
-}, B = {
+}, S = { style: { flex: "1", "min-width": "0" } }, w = {
   key: 0,
   style: { display: "flex", "align-items": "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", "flex-shrink": "0" }
-}, S = ["aria-label"], z = /* @__PURE__ */ u({
+}, M = ["aria-label"], D = /* @__PURE__ */ u({
   __name: "CuiModalHeader",
   props: {
     title: {},
+    titleId: {},
     noCloseButton: { type: Boolean, default: !1 },
-    hidden: { type: Boolean, default: !1 }
+    hidden: { type: Boolean, default: !1 },
+    titleAs: { default: "h2" }
   },
   emits: ["close"],
-  setup(i, { emit: l }) {
-    const c = l, d = b();
-    return (a, e) => m((r(), o("div", k, [
-      y("div", x, [
-        n(a.$slots, "default", {}, () => [
-          i.title ? (r(), o("h2", C, g(i.title), 1)) : s("", !0)
+  setup(e, { emit: n }) {
+    const c = n, d = B();
+    return (r, t) => m((a(), o("div", I, [
+      y("div", S, [
+        s(r.$slots, "default", {}, () => [
+          e.title ? (a(), g(f(e.titleAs), {
+            key: 0,
+            id: e.titleId,
+            class: "cui-modal-header__title",
+            style: {
+              fontSize: "1.125rem",
+              fontWeight: "600",
+              lineHeight: "1.4",
+              color: "var(--cui-text-emphasis)",
+              margin: "0"
+            }
+          }, {
+            default: v(() => [
+              h(p(e.title), 1)
+            ]),
+            _: 1
+          }, 8, ["id"])) : l("", !0)
         ])
       ]),
-      a.$slots.actions ? (r(), o("div", B, [
-        n(a.$slots, "actions")
-      ])) : s("", !0),
-      i.noCloseButton ? s("", !0) : (r(), o("button", {
+      r.$slots.actions ? (a(), o("div", w, [
+        s(r.$slots, "actions")
+      ])) : l("", !0),
+      e.noCloseButton ? l("", !0) : (a(), o("button", {
         key: 1,
         type: "button",
         style: {
@@ -61,25 +73,25 @@ const k = { style: {
           marginRight: "calc(-0.25rem * var(--cui-density-scale, 1))",
           transition: "color 0.15s ease, background 0.15s ease"
         },
-        "aria-label": f(d).close,
-        onClick: e[0] || (e[0] = (t) => c("close")),
-        onMouseenter: e[1] || (e[1] = (t) => {
-          t.target.style.color = "var(--cui-text-body)", t.target.style.background = "var(--cui-primary-bg)";
+        "aria-label": k(d).close,
+        onClick: t[0] || (t[0] = (i) => c("close")),
+        onMouseenter: t[1] || (t[1] = (i) => {
+          i.target.style.color = "var(--cui-text-body)", i.target.style.background = "var(--cui-primary-bg)";
         }),
-        onMouseleave: e[2] || (e[2] = (t) => {
-          t.target.style.color = "var(--cui-text-tertiary)", t.target.style.background = "none";
+        onMouseleave: t[2] || (t[2] = (i) => {
+          i.target.style.color = "var(--cui-text-tertiary)", i.target.style.background = "none";
         })
       }, [
-        p(h, {
+        x(C, {
           name: "x",
           size: "1rem"
         })
-      ], 40, S))
+      ], 40, M))
     ], 512)), [
-      [v, !i.hidden]
+      [b, !e.hidden]
     ]);
   }
 });
 export {
-  z as default
+  D as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CuiPagination.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiPagination.vue"],"names":[],"mappings":"AA4VA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIvG,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa;IACtF,oCAAoC;IACpC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;;;;;;;;;;oBAPkB,MAAM,EAAE;iBAEX,OAAO;cAEV,OAAO;gBAEL,MAAM;;AAgUrB,wBAQG"}
+{"version":3,"file":"CuiPagination.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiPagination.vue"],"names":[],"mappings":"AA+VA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIvG,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa;IACtF,oCAAoC;IACpC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;;;;;;;;;;oBAPkB,MAAM,EAAE;iBAEX,OAAO;cAEV,OAAO;gBAEL,MAAM;;AAmUrB,wBAQG"}

package/dist/components/CuiPagination.vue.js

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

package/dist/components/CuiPagination.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as F, computed as n, withDirectives as L, openBlock as r, createElementBlock as u, normalizeClass as p, toDisplayString as x, unref as T, createCommentVNode as $, createElementVNode as v, createVNode as k, Fragment as B, renderList as U, normalizeStyle as R, vShow as W } from "vue";
+import { defineComponent as F, computed as i, withDirectives as L, openBlock as r, createElementBlock as u, normalizeClass as g, toDisplayString as x, unref as T, createCommentVNode as $, createElementVNode as v, createVNode as k, Fragment as B, renderList as U, normalizeStyle as R, vShow as W } from "vue";
 import N from "./CuiIcon.vue.js";
 import Z from "./CuiSelect.vue.js";
 import { clampSize as j } from "../utils/sizing.js";
@@ -33,46 +33,46 @@ const G = {
   },
   emits: ["update:currentPage", "update:perPage"],
   setup(s, { emit: I }) {
-    const a = s, f = I, M = ["sm", "md"], m = n(() => j(a.size, M)), i = n(() => {
+    const a = s, f = I, M = ["sm", "md"], m = i(() => j(a.size, M)), n = i(() => {
       var e;
       return a.currentPage ?? ((e = a.meta) == null ? void 0 : e.current_page) ?? 1;
-    }), _ = n(() => {
+    }), _ = i(() => {
       var e;
       return a.totalPages ?? ((e = a.meta) == null ? void 0 : e.last_page) ?? 1;
-    }), b = n(() => {
+    }), b = i(() => {
       var e;
       return a.perPage ?? ((e = a.meta) == null ? void 0 : e.per_page) ?? 15;
-    }), d = n(() => {
+    }), d = i(() => {
       var e;
       return a.total ?? ((e = a.meta) == null ? void 0 : e.total) ?? 0;
-    }), E = n(() => {
+    }), E = i(() => {
       var e;
-      return ((e = a.meta) == null ? void 0 : e.from) != null ? a.meta.from : d.value === 0 ? 0 : (i.value - 1) * b.value + 1;
-    }), O = n(() => {
+      return ((e = a.meta) == null ? void 0 : e.from) != null ? a.meta.from : d.value === 0 ? 0 : (n.value - 1) * b.value + 1;
+    }), O = i(() => {
       var e;
-      return ((e = a.meta) == null ? void 0 : e.to) != null ? a.meta.to : Math.min(i.value * b.value, d.value);
-    }), z = n(() => i.value <= 1), C = n(() => i.value >= _.value), V = n(() => {
-      const e = _.value, o = i.value, t = a.maxButtons;
+      return ((e = a.meta) == null ? void 0 : e.to) != null ? a.meta.to : Math.min(n.value * b.value, d.value);
+    }), z = i(() => n.value <= 1), C = i(() => n.value >= _.value), V = i(() => {
+      const e = _.value, o = n.value, t = a.maxButtons;
       if (e <= t + 2)
-        return Array.from({ length: e }, (g, w) => w + 1);
+        return Array.from({ length: e }, (p, w) => w + 1);
       const l = [], c = Math.floor(t / 2);
       let h = Math.max(2, o - c), y = Math.min(e - 1, o + c);
       o <= c + 1 && (y = t), o >= e - c && (h = e - t + 1), l.push(1), h > 2 && l.push("ellipsis");
-      for (let g = h; g <= y; g++)
-        l.push(g);
+      for (let p = h; p <= y; p++)
+        l.push(p);
       return y < e - 1 && l.push("ellipsis"), e > 1 && l.push(e), l;
     });
     function P(e) {
-      e < 1 || e > _.value || e === i.value || f("update:currentPage", e);
+      e < 1 || e > _.value || e === n.value || f("update:currentPage", e);
     }
     function A(e) {
       e != null && !Array.isArray(e) && (f("update:perPage", Number(e)), f("update:currentPage", 1));
     }
-    const S = q(), D = n(
+    const S = q(), D = i(
       () => a.perPageOptions.map((e) => ({ value: e, label: S.value.pagination.perPage(e) }))
     );
     return (e, o) => L((r(), u("div", {
-      class: p(["cui-pagination", `cui-pagination--${m.value}`])
+      class: g(["cui-pagination", `cui-pagination--${m.value}`])
     }, [
       !s.hideInfo && d.value > 0 ? (r(), u("div", G, x(T(S).pagination.summary({ from: E.value, to: O.value, total: d.value })), 1)) : $("", !0),
       v("div", H, [
@@ -86,10 +86,11 @@ const G = {
         ])),
         v("nav", K, [
           v("button", {
-            class: p(["cui-pagination__btn cui-pagination__btn--nav", { "cui-pagination__btn--disabled": z.value }]),
+            type: "button",
+            class: g(["cui-pagination__btn cui-pagination__btn--nav", { "cui-pagination__btn--disabled": z.value }]),
             disabled: z.value,
             "aria-label": "Previous page",
-            onClick: o[0] || (o[0] = (t) => P(i.value - 1))
+            onClick: o[0] || (o[0] = (t) => P(n.value - 1))
           }, [
             k(N, {
               name: "caret-left",
@@ -99,25 +100,27 @@ const G = {
           (r(!0), u(B, null, U(V.value, (t, l) => (r(), u(B, { key: l }, [
             t === "ellipsis" ? (r(), u("span", X, "...")) : (r(), u("button", {
               key: 1,
-              class: p(["cui-pagination__btn", {
-                "cui-pagination__btn--active": t === i.value
+              type: "button",
+              class: g(["cui-pagination__btn", {
+                "cui-pagination__btn--active": t === n.value
               }]),
-              style: R(t === i.value ? {
+              style: R(t === n.value ? {
                 background: `var(--cui-${s.color}-bg)`,
                 color: `var(--cui-${s.color})`,
                 borderColor: `var(--cui-${s.color}-border)`,
                 fontWeight: "600"
               } : {}),
               "aria-label": `Page ${t}`,
-              "aria-current": t === i.value ? "page" : void 0,
+              "aria-current": t === n.value ? "page" : void 0,
               onClick: (c) => P(t)
             }, x(t), 15, Y))
           ], 64))), 128)),
           v("button", {
-            class: p(["cui-pagination__btn cui-pagination__btn--nav", { "cui-pagination__btn--disabled": C.value }]),
+            type: "button",
+            class: g(["cui-pagination__btn cui-pagination__btn--nav", { "cui-pagination__btn--disabled": C.value }]),
             disabled: C.value,
             "aria-label": "Next page",
-            onClick: o[1] || (o[1] = (t) => P(i.value + 1))
+            onClick: o[1] || (o[1] = (t) => P(n.value + 1))
           }, [
             k(N, {
               name: "caret-right",

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

@@ -1 +1 @@
-{"version":3,"file":"CuiPopover.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiPopover.vue"],"names":[],"mappings":"AAsRA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG9E,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGnF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,gBAAgB;IACtE,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAsRD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;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;AAiD/C,QAAA,MAAM,eAAe;;;;;;aA7UT,UAAU;;eAlBR,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;cAQN,OAAO;6EAuVlB,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":"CuiPopover.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiPopover.vue"],"names":[],"mappings":"AA4TA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG9E,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGnF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,gBAAgB;IACtE,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA+TD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACrF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;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;AAiD/C,QAAA,MAAM,eAAe;;;;;;aAtXT,UAAU;;eAlBR,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;cAQN,OAAO;6EAgYlB,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/CuiPopover.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as U, useSlots as q, ref as S, watch as M, computed as l, onUnmounted as G, withDirectives as J, openBlock as a, createElementBlock as s, createElementVNode as p, renderSlot as f, createBlock as Q, Teleport as X, normalizeStyle as g, unref as v, toDisplayString as Y, withModifiers as Z, createVNode as ee, createCommentVNode as u, vShow as te } from "vue";
-import { usePopover as oe } from "../composables/usePopover.js";
-import { useClickOutside as ie } from "../composables/useClickOutside.js";
-import re from "./CuiIcon.vue.js";
+import { defineComponent as q, useSlots as G, ref as S, watch as E, computed as c, onUnmounted as J, useId as Q, withDirectives as X, openBlock as n, createElementBlock as l, createElementVNode as f, renderSlot as v, createBlock as Y, Teleport as Z, normalizeStyle as g, unref as h, toDisplayString as ee, withModifiers as te, createVNode as oe, createCommentVNode as u, vShow as ie } from "vue";
+import { usePopover as re } from "../composables/usePopover.js";
+import { useClickOutside as ne } from "../composables/useClickOutside.js";
+import ae from "./CuiIcon.vue.js";
 import { useMessages as le } from "../composables/useMessages.js";
-const ae = ["aria-labelledby"], ne = {
+const se = ["aria-labelledby"], ce = {
   key: 0,
   style: {
     display: "flex",
@@ -12,12 +12,12 @@ const ae = ["aria-labelledby"], ne = {
     gap: "calc(0.5rem * var(--cui-density-scale, 1))",
     padding: "calc(0.75rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1)) calc(0.25rem * var(--cui-density-scale, 1))"
   }
-}, se = ["id"], ce = ["aria-label"], ue = {
+}, ue = { style: { fontSize: "0.875rem", fontWeight: "600", color: "var(--cui-text-body)" } }, de = ["aria-label"], fe = {
   key: 1,
   style: {
     padding: "0 calc(0.875rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))"
   }
-}, ge = /* @__PURE__ */ U({
+}, be = /* @__PURE__ */ q({
   __name: "CuiPopover",
   props: {
     title: {},
@@ -35,41 +35,42 @@ const ae = ["aria-labelledby"], ne = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:visible"],
-  setup(c, { emit: R }) {
-    const e = c, T = {
+  setup(s, { emit: M }) {
+    const e = s, R = {
       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"
-    }, d = R, h = q(), o = S(!1);
-    let n = null, i = null;
-    M(
+    }, d = M, b = G(), o = S(!1);
+    let a = null, i = null;
+    E(
       () => e.visible,
       (t) => {
         t !== void 0 && (o.value = t);
-      }
+      },
+      { immediate: !0 }
     );
-    const { referenceRef: C, floatingRef: b, arrowRef: E, floatingStyles: D, arrowStyle: B, currentSide: _, isPositioned: P } = oe({
-      placement: l(() => e.placement),
-      offsetDistance: l(() => e.offset ?? 10),
+    const { referenceRef: T, floatingRef: w, arrowRef: C, floatingStyles: _, arrowStyle: D, currentSide: B, isPositioned: P } = re({
+      placement: c(() => e.placement),
+      offsetDistance: c(() => e.offset ?? 10),
       arrow: !e.noArrow
-    }), w = S(null);
-    ie(
-      () => [w.value, b.value],
+    }), k = S(null);
+    ne(
+      () => [k.value, w.value],
       () => {
         o.value && e.trigger === "click" && r();
       }
-    ), M(o, (t) => {
-      typeof document > "u" || (t ? document.addEventListener("keydown", y) : document.removeEventListener("keydown", y));
-    });
+    ), E(o, (t) => {
+      typeof document > "u" || (t ? document.addEventListener("keydown", p) : document.removeEventListener("keydown", p));
+    }, { immediate: !0 });
     function m() {
-      e.disabled || (i && (clearTimeout(i), i = null), e.showDelay > 0 ? n = setTimeout(() => {
+      e.disabled || (i && (clearTimeout(i), i = null), e.showDelay > 0 ? a = setTimeout(() => {
         o.value = !0, d("update:visible", !0);
       }, e.showDelay) : (o.value = !0, d("update:visible", !0)));
     }
     function r() {
-      n && (clearTimeout(n), n = null), e.hideDelay > 0 ? i = setTimeout(() => {
+      a && (clearTimeout(a), a = null), e.hideDelay > 0 ? i = setTimeout(() => {
         o.value = !1, d("update:visible", !1);
       }, e.hideDelay) : (o.value = !1, d("update:visible", !1));
     }
@@ -85,13 +86,13 @@ const ae = ["aria-labelledby"], ne = {
     function L() {
       (e.trigger === "focus" || e.trigger === "hover-focus") && m();
     }
-    function V() {
+    function $() {
       (e.trigger === "focus" || e.trigger === "hover-focus") && r();
     }
-    function $() {
+    function V() {
       e.trigger === "click" && I();
     }
-    function y(t) {
+    function p(t) {
       t.key === "Escape" && o.value && r();
     }
     function A() {
@@ -100,15 +101,15 @@ const ae = ["aria-labelledby"], ne = {
     function H() {
       (e.trigger === "hover" || e.trigger === "hover-focus") && r();
     }
-    G(() => {
-      n && clearTimeout(n), i && clearTimeout(i), typeof document < "u" && document.removeEventListener("keydown", y);
+    J(() => {
+      a && clearTimeout(a), i && clearTimeout(i), typeof document < "u" && document.removeEventListener("keydown", p);
     });
-    const k = l(() => e.title || h.header), N = l(() => !!h.footer), x = l(() => e.title ? "cui-popover-title" : void 0), W = l(() => {
+    const y = () => !!(e.title || b.header), N = () => !!b.footer, x = `cui-popover-title-${Q()}`, W = c(() => {
       const t = {
         zIndex: "9998",
         background: "var(--cui-surface-base)",
         border: "1px solid var(--cui-border)",
-        borderRadius: T[e.rounded],
+        borderRadius: R[e.rounded],
         boxShadow: "0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.08)",
         minWidth: "12rem",
         maxWidth: "24rem",
@@ -117,56 +118,63 @@ const ae = ["aria-labelledby"], ne = {
         overflow: "hidden"
       };
       return e.width && (t.width = e.width), t;
-    }), j = l(() => ({
+    }), j = c(() => {
+      const t = {};
+      return P.value || (t.opacity = "0", t.pointerEvents = "none", t.animation = "none"), t;
+    }), O = c(() => ({
       width: "8px",
       height: "8px",
       background: "var(--cui-surface-base)",
       border: "1px solid var(--cui-border)",
       transform: "rotate(45deg)",
       position: "absolute",
-      ...B.value
-    })), O = {
+      ...D.value
+    })), U = {
       top: "polygon(0% 0%, 100% 0%, 100% 100%)",
       bottom: "polygon(0% 0%, 0% 100%, 100% 100%)",
       left: "polygon(0% 0%, 100% 0%, 100% 100%)",
       right: "polygon(0% 0%, 0% 100%, 100% 100%)"
     }, K = le();
-    return (t, de) => J((a(), s("div", {
+    return (t, ve) => X((n(), l("div", {
+      class: "cui-popover",
       ref_key: "wrapperRef",
-      ref: w,
+      ref: k,
       style: { display: "inline-flex" },
       onMouseenter: z,
       onMouseleave: F,
       onFocusin: L,
-      onFocusout: V,
-      onClick: $
+      onFocusout: $,
+      onClick: V
     }, [
-      p("div", {
+      f("div", {
         ref_key: "referenceRef",
-        ref: C,
+        ref: T,
         style: { display: "inline-flex" }
       }, [
-        f(t.$slots, "default")
+        v(t.$slots, "default")
       ], 512),
-      (a(), Q(X, { to: "body" }, [
-        o.value ? (a(), s("div", {
+      (n(), Y(Z, { to: "body" }, [
+        o.value ? (n(), l("div", {
           key: 0,
           ref_key: "floatingRef",
-          ref: b,
-          style: g({ ...v(D), ...W.value, visibility: v(P) ? "visible" : "hidden" }),
+          ref: w,
+          class: "cui-popover__panel",
+          style: g({ ...h(_), ...W.value, ...j.value }),
           role: "dialog",
-          "aria-labelledby": x.value,
+          "aria-labelledby": y() ? x : void 0,
           onMouseenter: A,
           onMouseleave: H
         }, [
-          k.value ? (a(), s("div", ne, [
-            f(t.$slots, "header", {}, () => [
-              p("span", {
-                id: x.value,
-                style: { fontSize: "0.875rem", fontWeight: "600", color: "var(--cui-text-body)" }
-              }, Y(c.title), 9, se)
+          y() ? (n(), l("div", ce, [
+            f("div", {
+              id: x,
+              style: { display: "contents" }
+            }, [
+              v(t.$slots, "header", {}, () => [
+                f("span", ue, ee(s.title), 1)
+              ])
             ]),
-            c.closable ? (a(), s("button", {
+            s.closable ? (n(), l("button", {
               key: 0,
               type: "button",
               style: {
@@ -184,44 +192,44 @@ const ae = ["aria-labelledby"], ne = {
                 marginTop: "calc(-0.0625rem * var(--cui-density-scale, 1))",
                 marginRight: "calc(-0.125rem * var(--cui-density-scale, 1))"
               },
-              "aria-label": v(K).close,
-              onClick: Z(r, ["stop"])
+              "aria-label": h(K).close,
+              onClick: te(r, ["stop"])
             }, [
-              ee(re, {
+              oe(ae, {
                 name: "x",
                 size: "0.8125rem"
               })
-            ], 8, ce)) : u("", !0)
+            ], 8, de)) : u("", !0)
           ])) : u("", !0),
-          p("div", {
+          f("div", {
             style: g({
-              padding: k.value ? "calc(0.25rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))" : "calc(0.75rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1))",
+              padding: y() ? "calc(0.25rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))" : "calc(0.75rem * var(--cui-density-scale, 1)) calc(0.875rem * var(--cui-density-scale, 1))",
               fontSize: "0.875rem",
               lineHeight: "1.55",
               color: "var(--cui-text-secondary)"
             })
           }, [
-            f(t.$slots, "content")
+            v(t.$slots, "content")
           ], 4),
-          N.value ? (a(), s("div", ue, [
-            f(t.$slots, "footer")
+          N() ? (n(), l("div", fe, [
+            v(t.$slots, "footer")
           ])) : u("", !0),
-          c.noArrow ? u("", !0) : (a(), s("div", {
+          s.noArrow ? u("", !0) : (n(), l("div", {
             key: 2,
             ref_key: "arrowRef",
-            ref: E,
+            ref: C,
             style: g({
-              ...j.value,
-              clipPath: O[v(_)] || void 0
+              ...O.value,
+              clipPath: U[h(B)] || void 0
             })
           }, null, 4))
-        ], 44, ae)) : u("", !0)
+        ], 44, se)) : u("", !0)
       ]))
     ], 544)), [
-      [te, !c.hidden]
+      [ie, !s.hidden]
     ]);
   }
 });
 export {
-  ge as default
+  be as default
 };

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

@@ -1,5 +1,5 @@
-import type { HideableProps, ColorableProps, DisableableProps } from "../types/common";
-export interface CuiRadioProps extends HideableProps, ColorableProps, DisableableProps {
+import type { HideableProps, ColorableProps, DisableableProps, NativeControlProps } from "../types/common";
+export interface CuiRadioProps extends NativeControlProps, HideableProps, ColorableProps, DisableableProps {
     /** The value this radio represents */
     value: string | number | boolean;
     /** v-model binding (standalone mode) */
@@ -8,8 +8,6 @@ export interface CuiRadioProps extends HideableProps, ColorableProps, Disableabl
     label?: string;
     /** Description text (or use #description slot) */
     description?: string;
-    /** Name attribute (standalone mode) */
-    name?: string;
     /** Readonly state */
     readonly?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CuiRadio.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiRadio.vue"],"names":[],"mappings":"AAkVA,OAAO,KAAK,EAAY,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGjG,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IACpF,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8ND,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC9D,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,GAC5C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA+BnD,QAAA,MAAM,eAAe;;;;;;;;cAlQR,OAAO;;;6EA2QlB,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":"CuiRadio.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiRadio.vue"],"names":[],"mappings":"AAyVA,OAAO,KAAK,EAAY,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGrH,MAAM,WAAW,aAAc,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB;IACxG,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuOD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC9D,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,GAC5C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA+BnD,QAAA,MAAM,eAAe;;;;;;;;cA3QR,OAAO;;;6EAoRlB,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/CuiRadio.vue.js

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