@itguy614/clean-ui 1.2.1 → 1.3.0

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.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 f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-fc0b9696"]]);
 export {
-  r as default
+  f as default
 };

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;AAgD/C,QAAA,MAAM,eAAe;;;;;;aA5UT,UAAU;;eAlBR,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;cAQN,OAAO;6EAsVlB,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":"AAiTA,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;AAmTD,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;;;;;;aA1WT,UAAU;;eAlBR,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;cAQN,OAAO;6EAoXlB,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 K, useSlots as U, ref as S, watch as M, computed as l, onUnmounted as q, withDirectives as G, openBlock as a, createElementBlock as s, createElementVNode as y, renderSlot as f, createBlock as J, Teleport as Q, normalizeStyle as p, unref as g, toDisplayString as X, withModifiers as Y, createVNode as Z, createCommentVNode as u, vShow as ee } from "vue";
-import { usePopover as te } from "../composables/usePopover.js";
-import { useClickOutside as oe } from "../composables/useClickOutside.js";
-import re from "./CuiIcon.vue.js";
-import { useMessages as ie } from "../composables/useMessages.js";
-const le = ["aria-labelledby"], ae = {
+import { defineComponent as q, useSlots as G, ref as S, watch as E, computed as r, onUnmounted as J, withDirectives as Q, openBlock as n, createElementBlock as s, createElementVNode as p, renderSlot as f, createBlock as X, Teleport as Y, normalizeStyle as y, unref as g, toDisplayString as Z, withModifiers as ee, createVNode as te, createCommentVNode as u, vShow as oe } from "vue";
+import { usePopover as ie } from "../composables/usePopover.js";
+import { useClickOutside as re } from "../composables/useClickOutside.js";
+import ae from "./CuiIcon.vue.js";
+import { useMessages as ne } from "../composables/useMessages.js";
+const le = ["aria-labelledby"], se = {
   key: 0,
   style: {
     display: "flex",
@@ -12,12 +12,12 @@ const le = ["aria-labelledby"], ae = {
     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))"
   }
-}, ne = ["id"], se = ["aria-label"], ce = {
+}, ce = ["id"], ue = ["aria-label"], de = {
   key: 1,
   style: {
     padding: "0 calc(0.875rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))"
   }
-}, pe = /* @__PURE__ */ K({
+}, he = /* @__PURE__ */ q({
   __name: "CuiPopover",
   props: {
     title: {},
@@ -35,80 +35,80 @@ const le = ["aria-labelledby"], ae = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:visible"],
-  setup(c, { emit: R }) {
-    const e = c, T = {
+  setup(c, { emit: M }) {
+    const e = c, 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 = U(), o = S(!1);
-    let n = null, r = null;
-    M(
+    }, d = M, h = G(), o = S(!1);
+    let l = null, i = null;
+    E(
       () => e.visible,
       (t) => {
         t !== void 0 && (o.value = t);
       }
     );
-    const { referenceRef: C, floatingRef: b, arrowRef: E, floatingStyles: D, arrowStyle: B, currentSide: _ } = te({
-      placement: l(() => e.placement),
-      offsetDistance: l(() => e.offset ?? 10),
+    const { referenceRef: T, floatingRef: b, arrowRef: C, floatingStyles: _, arrowStyle: D, currentSide: B, isPositioned: P } = ie({
+      placement: r(() => e.placement),
+      offsetDistance: r(() => e.offset ?? 10),
       arrow: !e.noArrow
     }), w = S(null);
-    oe(
+    re(
       () => [w.value, b.value],
       () => {
-        o.value && e.trigger === "click" && i();
+        o.value && e.trigger === "click" && a();
       }
-    ), M(o, (t) => {
+    ), E(o, (t) => {
       typeof document > "u" || (t ? document.addEventListener("keydown", m) : document.removeEventListener("keydown", m));
     });
     function v() {
-      e.disabled || (r && (clearTimeout(r), r = null), e.showDelay > 0 ? n = setTimeout(() => {
+      e.disabled || (i && (clearTimeout(i), i = null), e.showDelay > 0 ? l = setTimeout(() => {
         o.value = !0, d("update:visible", !0);
       }, e.showDelay) : (o.value = !0, d("update:visible", !0)));
     }
-    function i() {
-      n && (clearTimeout(n), n = null), e.hideDelay > 0 ? r = setTimeout(() => {
+    function a() {
+      l && (clearTimeout(l), l = null), e.hideDelay > 0 ? i = setTimeout(() => {
         o.value = !1, d("update:visible", !1);
       }, e.hideDelay) : (o.value = !1, d("update:visible", !1));
     }
     function I() {
-      o.value ? i() : v();
-    }
-    function P() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && v();
+      o.value ? a() : v();
     }
     function z() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && i();
+      (e.trigger === "hover" || e.trigger === "hover-focus") && v();
     }
     function F() {
-      (e.trigger === "focus" || e.trigger === "hover-focus") && v();
+      (e.trigger === "hover" || e.trigger === "hover-focus") && a();
     }
     function L() {
-      (e.trigger === "focus" || e.trigger === "hover-focus") && i();
+      (e.trigger === "focus" || e.trigger === "hover-focus") && v();
     }
     function V() {
+      (e.trigger === "focus" || e.trigger === "hover-focus") && a();
+    }
+    function $() {
       e.trigger === "click" && I();
     }
     function m(t) {
-      t.key === "Escape" && o.value && i();
-    }
-    function $() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && r && (clearTimeout(r), r = null);
+      t.key === "Escape" && o.value && a();
     }
     function A() {
-      (e.trigger === "hover" || e.trigger === "hover-focus") && i();
+      (e.trigger === "hover" || e.trigger === "hover-focus") && i && (clearTimeout(i), i = null);
+    }
+    function H() {
+      (e.trigger === "hover" || e.trigger === "hover-focus") && a();
     }
-    q(() => {
-      n && clearTimeout(n), r && clearTimeout(r), typeof document < "u" && document.removeEventListener("keydown", m);
+    J(() => {
+      l && clearTimeout(l), i && clearTimeout(i), typeof document < "u" && document.removeEventListener("keydown", m);
     });
-    const k = l(() => e.title || h.header), H = l(() => !!h.footer), x = l(() => e.title ? "cui-popover-title" : void 0), N = l(() => {
+    const k = r(() => e.title || h.header), N = r(() => !!h.footer), x = r(() => e.title ? "cui-popover-title" : void 0), W = r(() => {
       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 +117,61 @@ const le = ["aria-labelledby"], ae = {
         overflow: "hidden"
       };
       return e.width && (t.width = e.width), t;
-    }), W = l(() => ({
+    }), j = r(() => {
+      const t = {};
+      return P.value || (t.opacity = "0", t.pointerEvents = "none", t.animation = "none"), t;
+    }), O = r(() => ({
       width: "8px",
       height: "8px",
       background: "var(--cui-surface-base)",
       border: "1px solid var(--cui-border)",
       transform: "rotate(45deg)",
       position: "absolute",
-      ...B.value
-    })), j = {
+      ...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%)"
-    }, O = ie();
-    return (t, ue) => G((a(), s("div", {
+    }, K = ne();
+    return (t, fe) => Q((n(), s("div", {
+      class: "cui-popover",
       ref_key: "wrapperRef",
       ref: w,
       style: { display: "inline-flex" },
-      onMouseenter: P,
-      onMouseleave: z,
-      onFocusin: F,
-      onFocusout: L,
-      onClick: V
+      onMouseenter: z,
+      onMouseleave: F,
+      onFocusin: L,
+      onFocusout: V,
+      onClick: $
     }, [
-      y("div", {
+      p("div", {
         ref_key: "referenceRef",
-        ref: C,
+        ref: T,
         style: { display: "inline-flex" }
       }, [
         f(t.$slots, "default")
       ], 512),
-      (a(), J(Q, { to: "body" }, [
-        o.value ? (a(), s("div", {
+      (n(), X(Y, { to: "body" }, [
+        o.value ? (n(), s("div", {
           key: 0,
           ref_key: "floatingRef",
           ref: b,
-          style: p({ ...g(D), ...N.value }),
+          class: "cui-popover__panel",
+          style: y({ ...g(_), ...W.value, ...j.value }),
           role: "dialog",
           "aria-labelledby": x.value,
-          onMouseenter: $,
-          onMouseleave: A
+          onMouseenter: A,
+          onMouseleave: H
         }, [
-          k.value ? (a(), s("div", ae, [
+          k.value ? (n(), s("div", se, [
             f(t.$slots, "header", {}, () => [
-              y("span", {
+              p("span", {
                 id: x.value,
                 style: { fontSize: "0.875rem", fontWeight: "600", color: "var(--cui-text-body)" }
-              }, X(c.title), 9, ne)
+              }, Z(c.title), 9, ce)
             ]),
-            c.closable ? (a(), s("button", {
+            c.closable ? (n(), s("button", {
               key: 0,
               type: "button",
               style: {
@@ -184,17 +189,17 @@ const le = ["aria-labelledby"], ae = {
                 marginTop: "calc(-0.0625rem * var(--cui-density-scale, 1))",
                 marginRight: "calc(-0.125rem * var(--cui-density-scale, 1))"
               },
-              "aria-label": g(O).close,
-              onClick: Y(i, ["stop"])
+              "aria-label": g(K).close,
+              onClick: ee(a, ["stop"])
             }, [
-              Z(re, {
+              te(ae, {
                 name: "x",
                 size: "0.8125rem"
               })
-            ], 8, se)) : u("", !0)
+            ], 8, ue)) : u("", !0)
           ])) : u("", !0),
-          y("div", {
-            style: p({
+          p("div", {
+            style: y({
               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))",
               fontSize: "0.875rem",
               lineHeight: "1.55",
@@ -203,25 +208,25 @@ const le = ["aria-labelledby"], ae = {
           }, [
             f(t.$slots, "content")
           ], 4),
-          H.value ? (a(), s("div", ce, [
+          N.value ? (n(), s("div", de, [
             f(t.$slots, "footer")
           ])) : u("", !0),
-          c.noArrow ? u("", !0) : (a(), s("div", {
+          c.noArrow ? u("", !0) : (n(), s("div", {
             key: 2,
             ref_key: "arrowRef",
-            ref: E,
-            style: p({
-              ...W.value,
-              clipPath: j[g(_)] || void 0
+            ref: C,
+            style: y({
+              ...O.value,
+              clipPath: U[g(B)] || void 0
             })
           }, null, 4))
         ], 44, le)) : u("", !0)
       ]))
     ], 544)), [
-      [ee, !c.hidden]
+      [oe, !c.hidden]
     ]);
   }
 });
 export {
-  pe as default
+  he 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
 };