@itguy614/clean-ui 1.2.1 → 1.3.0

package/dist/components/CuiSelect.vue2.js

@@ -1,29 +1,27 @@
-import { defineComponent as ie, computed as p, ref as k, onMounted as ne, onUnmounted as ue, withDirectives as re, openBlock as n, createElementBlock as u, createElementVNode as b, normalizeStyle as O, normalizeClass as L, Fragment as z, renderList as I, createTextVNode as S, toDisplayString as m, withModifiers as F, unref as H, createVNode as A, renderSlot as K, createBlock as C, createCommentVNode as f, Teleport as se, vShow as ce, nextTick as P } from "vue";
+import { defineComponent as re, computed as h, ref as k, onMounted as ue, onUnmounted as se, withDirectives as de, openBlock as n, createElementBlock as r, createElementVNode as y, normalizeStyle as O, normalizeClass as I, unref as w, Fragment as S, renderList as R, createTextVNode as A, toDisplayString as m, withModifiers as j, createVNode as B, renderSlot as K, createBlock as C, createCommentVNode as f, Teleport as ce, vShow as ve, nextTick as P } from "vue";
 import g from "./CuiIcon.vue.js";
-import { INPUT_SIZE_SCALE as de } from "../utils/sizing.js";
-import { useMessages as ve } from "../composables/useMessages.js";
-const me = { class: "cui-select-wrapper" }, fe = ["aria-expanded", "aria-disabled", "aria-invalid", "tabindex"], he = { class: "cui-select__value" }, pe = ["aria-label", "onClick"], ge = {
+import { INPUT_SIZE_SCALE as me } from "../utils/sizing.js";
+import { useFieldDescribedBy as fe } from "../composables/useFieldDescribedBy.js";
+import { useMessages as be } from "../composables/useMessages.js";
+const he = { class: "cui-select-wrapper" }, ge = ["id", "aria-describedby", "aria-required", "aria-labelledby", "aria-expanded", "aria-disabled", "aria-invalid", "tabindex"], ye = { class: "cui-select__value" }, pe = ["aria-label", "onClick"], ke = {
   key: 1,
   class: "cui-select__label"
-}, be = {
+}, we = {
   key: 2,
   class: "cui-select__placeholder"
-}, ye = { class: "cui-select__actions" }, ke = ["aria-label"], _e = ["aria-multiselectable"], xe = {
+}, xe = { class: "cui-select__actions" }, Ve = ["aria-label"], _e = ["aria-multiselectable"], ze = {
   key: 0,
   class: "cui-select__loading"
-}, we = {
+}, Se = {
   key: 1,
   class: "cui-select__empty"
-}, Ve = {
+}, Ae = {
   key: 0,
   class: "cui-select__group-header"
-}, ze = ["data-highlighted", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], Se = {
+}, Be = ["data-highlighted", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], Ce = {
   key: 0,
   class: "cui-select__check"
-}, Ae = { class: "cui-select__option-label" }, Ce = {
-  key: 0,
-  class: "cui-select__error"
-}, De = /* @__PURE__ */ ie({
+}, De = { class: "cui-select__option-label" }, Ee = ["id"], Re = /* @__PURE__ */ re({
   __name: "CuiSelect",
   props: {
     modelValue: {},
@@ -37,6 +35,12 @@ const me = { class: "cui-select-wrapper" }, fe = ["aria-expanded", "aria-disable
     errorMessage: {},
     readonly: { type: Boolean, default: !1 },
     rounded: { default: "md" },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     color: { default: "primary" },
     size: { default: "md" },
@@ -46,134 +50,134 @@ const me = { class: "cui-select-wrapper" }, fe = ["aria-expanded", "aria-disable
   setup(a, { expose: Z, emit: G }) {
     const J = {
       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"
-    }, l = a, _ = G, h = p(
+    }, l = a, { errorId: Q, describedBy: W } = fe(l), x = G, b = h(
       () => l.options.map(
         (e) => typeof e == "object" ? e : { value: e, label: String(e) }
       )
-    ), Q = p(() => {
-      const e = /* @__PURE__ */ new Map(), o = [];
-      for (const t of h.value)
-        t.group ? (e.has(t.group) || e.set(t.group, []), e.get(t.group).push(t)) : o.push(t);
-      const i = [];
-      o.length && i.push({ options: o });
-      for (const [t, c] of e)
-        i.push({ group: t, options: c });
-      return i;
-    }), d = p(
-      () => h.value.filter((e) => !e.disabled)
-    ), s = k(!1), r = k(-1), v = k(), E = k();
-    function $(e) {
+    ), X = h(() => {
+      const e = /* @__PURE__ */ new Map(), i = [];
+      for (const t of b.value)
+        t.group ? (e.has(t.group) || e.set(t.group, []), e.get(t.group).push(t)) : i.push(t);
+      const o = [];
+      i.length && o.push({ options: i });
+      for (const [t, d] of e)
+        o.push({ group: t, options: d });
+      return o;
+    }), c = h(
+      () => b.value.filter((e) => !e.disabled)
+    ), s = k(!1), u = k(-1), v = k(), D = k();
+    function E(e) {
       return l.multiple ? Array.isArray(l.modelValue) && l.modelValue.includes(e) : l.modelValue === e;
     }
-    function W() {
+    function Y() {
       if (l.multiple && Array.isArray(l.modelValue))
         return l.modelValue.map((e) => {
-          const o = h.value.find((i) => i.value === e);
-          return (o == null ? void 0 : o.label) ?? String(e);
+          const i = b.value.find((o) => o.value === e);
+          return (i == null ? void 0 : i.label) ?? String(e);
         });
       if (l.modelValue != null) {
-        const e = h.value.find((o) => o.value === l.modelValue);
+        const e = b.value.find((i) => i.value === l.modelValue);
         return e ? [e.label] : [String(l.modelValue)];
       }
       return [];
     }
-    const X = p(W), R = p(() => l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : l.modelValue != null && l.modelValue !== ""), M = p(() => l.multiple || l.modelValue == null ? null : h.value.find((e) => e.value === l.modelValue) ?? null);
-    function Y() {
-      l.disabled || l.readonly || (s.value ? y() : B());
+    const ee = h(Y), H = h(() => l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : l.modelValue != null && l.modelValue !== ""), $ = h(() => l.multiple || l.modelValue == null ? null : b.value.find((e) => e.value === l.modelValue) ?? null);
+    function le() {
+      l.disabled || l.readonly || (s.value ? p() : M());
     }
-    function B() {
-      l.disabled || l.readonly || (s.value = !0, r.value = -1, P(() => {
-        if (j(), !l.multiple && l.modelValue != null) {
-          const e = d.value.findIndex((o) => o.value === l.modelValue);
-          e >= 0 && (r.value = e);
+    function M() {
+      l.disabled || l.readonly || (s.value = !0, u.value = -1, P(() => {
+        if (U(), !l.multiple && l.modelValue != null) {
+          const e = c.value.findIndex((i) => i.value === l.modelValue);
+          e >= 0 && (u.value = e);
         }
       }));
     }
-    function y() {
-      s.value = !1, r.value = -1;
+    function p() {
+      s.value = !1, u.value = -1;
     }
     function T(e) {
       if (!e.disabled)
         if (l.multiple) {
-          const o = Array.isArray(l.modelValue) ? [...l.modelValue] : [], i = o.indexOf(e.value);
-          i >= 0 ? o.splice(i, 1) : o.push(e.value), _("update:modelValue", o);
+          const i = Array.isArray(l.modelValue) ? [...l.modelValue] : [], o = i.indexOf(e.value);
+          o >= 0 ? i.splice(o, 1) : i.push(e.value), x("update:modelValue", i);
         } else
-          _("update:modelValue", e.value), y();
+          x("update:modelValue", e.value), p();
     }
-    function ee(e) {
-      l.disabled || l.readonly || l.multiple && Array.isArray(l.modelValue) && _("update:modelValue", l.modelValue.filter((o) => o !== e));
+    function ae(e) {
+      l.disabled || l.readonly || l.multiple && Array.isArray(l.modelValue) && x("update:modelValue", l.modelValue.filter((i) => i !== e));
     }
-    function le() {
-      l.disabled || l.readonly || _("update:modelValue", l.multiple ? [] : null);
+    function te() {
+      l.disabled || l.readonly || x("update:modelValue", l.multiple ? [] : null);
     }
-    function te(e) {
-      var o;
+    function ie(e) {
+      var i;
       if (!(l.disabled || l.readonly)) {
         if (!s.value) {
-          (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), B());
+          (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), M());
           return;
         }
         switch (e.key) {
           case "ArrowDown":
-            e.preventDefault(), r.value = Math.min(
-              r.value + 1,
-              d.value.length - 1
-            ), x();
+            e.preventDefault(), u.value = Math.min(
+              u.value + 1,
+              c.value.length - 1
+            ), V();
             break;
           case "ArrowUp":
-            e.preventDefault(), r.value = Math.max(r.value - 1, 0), x();
+            e.preventDefault(), u.value = Math.max(u.value - 1, 0), V();
             break;
           case "Enter":
           case " ":
-            e.preventDefault(), r.value >= 0 && r.value < d.value.length && T(d.value[r.value]);
+            e.preventDefault(), u.value >= 0 && u.value < c.value.length && T(c.value[u.value]);
             break;
           case "Escape":
-            e.preventDefault(), y(), (o = v.value) == null || o.focus();
+            e.preventDefault(), p(), (i = v.value) == null || i.focus();
             break;
           case "Home":
-            e.preventDefault(), r.value = 0, x();
+            e.preventDefault(), u.value = 0, V();
             break;
           case "End":
-            e.preventDefault(), r.value = d.value.length - 1, x();
+            e.preventDefault(), u.value = c.value.length - 1, V();
             break;
         }
       }
     }
-    function x() {
+    function V() {
       P(() => {
-        var o;
-        const e = (o = E.value) == null ? void 0 : o.querySelector("[data-highlighted]");
+        var i;
+        const e = (i = D.value) == null ? void 0 : i.querySelector("[data-highlighted]");
         e == null || e.scrollIntoView({ block: "nearest" });
       });
     }
     function N(e) {
-      var i, t;
-      const o = e.target;
-      (i = v.value) != null && i.contains(o) || (t = E.value) != null && t.contains(o) || y();
+      var o, t;
+      const i = e.target;
+      (o = v.value) != null && o.contains(i) || (t = D.value) != null && t.contains(i) || p();
     }
-    function w() {
-      s.value && j();
+    function _() {
+      s.value && U();
     }
-    ne(() => {
-      document.addEventListener("mousedown", N), window.addEventListener("scroll", w, !0), window.addEventListener("resize", w);
-    }), ue(() => {
-      document.removeEventListener("mousedown", N), window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", w);
+    ue(() => {
+      document.addEventListener("mousedown", N), window.addEventListener("scroll", _, !0), window.addEventListener("resize", _);
+    }), se(() => {
+      document.removeEventListener("mousedown", N), window.removeEventListener("scroll", _, !0), window.removeEventListener("resize", _);
     });
-    const U = k({});
-    function j() {
+    const q = k({});
+    function U() {
       if (!v.value) return;
-      const e = v.value.getBoundingClientRect(), o = window.innerHeight, i = o - e.bottom, t = i < 200 && e.top > i, c = Math.min(t ? e.top - 16 : i - 16, 300);
-      U.value = {
+      const e = v.value.getBoundingClientRect(), i = window.innerHeight, o = i - e.bottom, t = o < 200 && e.top > o, d = Math.min(t ? e.top - 16 : o - 16, 300);
+      q.value = {
         position: "fixed",
         left: `${e.left}px`,
         width: `${e.width}px`,
-        maxHeight: `${c}px`,
+        maxHeight: `${d}px`,
         zIndex: "9990",
-        ...t ? { bottom: `${o - e.top + 4}px` } : { top: `${e.bottom + 4}px` }
+        ...t ? { bottom: `${i - e.top + 4}px` } : { top: `${e.bottom + 4}px` }
       };
     }
     Z({
@@ -186,33 +190,37 @@ const me = { class: "cui-select-wrapper" }, fe = ["aria-expanded", "aria-disable
         var e;
         return (e = v.value) == null ? void 0 : e.blur();
       },
-      open: B,
-      close: y
+      open: M,
+      close: p
     });
-    const V = p(() => {
-      const e = de[l.size];
+    const z = h(() => {
+      const e = me[l.size];
       return { minHeight: e.height, px: e.px, fontSize: e.fontSize };
-    }), D = ve();
-    return (e, o) => re((n(), u("div", me, [
-      b("div", {
-        class: L(["cui-select", {
+    }), L = be();
+    return (e, i) => de((n(), r("div", he, [
+      y("div", {
+        class: I(["cui-select", {
           "cui-select--open": s.value,
           "cui-select--error": a.error,
           "cui-select--disabled": a.disabled
         }]),
         style: O({
-          "--_sel-min-height": V.value.minHeight,
-          "--_sel-px": V.value.px,
-          "--_sel-font-size": V.value.fontSize,
+          "--_sel-min-height": z.value.minHeight,
+          "--_sel-px": z.value.px,
+          "--_sel-font-size": z.value.fontSize,
           "--_sel-color": `var(--cui-${a.color})`,
           "--_sel-focus-ring": `var(--cui-${a.color}-focus-ring)`,
           "--_sel-border": a.error ? "var(--cui-error)" : "var(--cui-border-strong)",
           "--_sel-focus-border": a.error ? "var(--cui-error)" : `var(--cui-${a.color})`
         })
       }, [
-        b("div", {
+        y("div", {
           ref_key: "triggerRef",
           ref: v,
+          id: a.id,
+          "aria-describedby": w(W),
+          "aria-required": a.ariaRequired || void 0,
+          "aria-labelledby": a.ariaLabelledby,
           class: "cui-select__trigger",
           style: O({ borderRadius: J[a.rounded] }),
           role: "combobox",
@@ -221,118 +229,116 @@ const me = { class: "cui-select-wrapper" }, fe = ["aria-expanded", "aria-disable
           "aria-disabled": a.disabled || a.readonly || void 0,
           "aria-invalid": a.error || void 0,
           tabindex: a.disabled ? -1 : 0,
-          onClick: Y,
-          onKeydown: te
+          onClick: le,
+          onKeydown: ie
         }, [
-          b("div", he, [
-            a.multiple && Array.isArray(a.modelValue) && a.modelValue.length > 0 ? (n(!0), u(z, { key: 0 }, I(a.modelValue, (i) => {
+          y("div", ye, [
+            a.multiple && Array.isArray(a.modelValue) && a.modelValue.length > 0 ? (n(!0), r(S, { key: 0 }, R(a.modelValue, (o) => {
               var t;
-              return n(), u("span", {
-                key: String(i),
+              return n(), r("span", {
+                key: String(o),
                 class: "cui-select__chip"
               }, [
-                S(m(((t = h.value.find((c) => c.value === i)) == null ? void 0 : t.label) ?? i) + " ", 1),
-                b("button", {
+                A(m(((t = b.value.find((d) => d.value === o)) == null ? void 0 : t.label) ?? o) + " ", 1),
+                y("button", {
                   type: "button",
                   class: "cui-select__chip-remove",
-                  tabindex: "-1",
-                  "aria-label": H(D).remove,
-                  onClick: F((c) => ee(i), ["stop"])
+                  "aria-label": w(L).remove,
+                  onClick: j((d) => ae(o), ["stop"])
                 }, [
-                  A(g, {
+                  B(g, {
                     name: "x",
                     size: "0.75rem"
                   })
                 ], 8, pe)
               ]);
-            }), 128)) : !a.multiple && R.value ? (n(), u("span", ge, [
-              K(e.$slots, "selected", { option: M.value }, () => {
-                var i;
+            }), 128)) : !a.multiple && H.value ? (n(), r("span", ke, [
+              K(e.$slots, "selected", { option: $.value }, () => {
+                var o;
                 return [
-                  (i = M.value) != null && i.icon ? (n(), C(g, {
+                  (o = $.value) != null && o.icon ? (n(), C(g, {
                     key: 0,
-                    name: M.value.icon,
+                    name: $.value.icon,
                     size: "sm",
                     class: "cui-select__option-icon"
                   }, null, 8, ["name"])) : f("", !0),
-                  S(" " + m(X.value[0]), 1)
+                  A(" " + m(ee.value[0]), 1)
                 ];
               }, !0)
-            ])) : (n(), u("span", be, m(a.placeholder), 1))
+            ])) : (n(), r("span", we, m(a.placeholder), 1))
           ]),
-          b("div", ye, [
-            a.clearable && R.value && !a.disabled && !a.readonly ? (n(), u("button", {
+          y("div", xe, [
+            a.clearable && H.value && !a.disabled && !a.readonly ? (n(), r("button", {
               key: 0,
               type: "button",
               class: "cui-select__clear",
-              tabindex: "-1",
-              "aria-label": H(D).clear,
-              onClick: F(le, ["stop"])
+              "aria-label": w(L).clear,
+              onClick: j(te, ["stop"])
             }, [
-              A(g, {
+              B(g, {
                 name: "x",
                 size: "0.75rem"
               })
-            ], 8, ke)) : f("", !0),
-            A(g, {
+            ], 8, Ve)) : f("", !0),
+            B(g, {
               name: "caret-down",
               size: "1rem",
-              class: L(["cui-select__chevron", { "cui-select__chevron--open": s.value }])
+              class: I(["cui-select__chevron", { "cui-select__chevron--open": s.value }])
             }, null, 8, ["class"])
           ])
-        ], 44, fe)
+        ], 44, ge)
       ], 6),
-      (n(), C(se, { to: "body" }, [
-        s.value ? (n(), u("div", {
+      (n(), C(ce, { to: "body" }, [
+        s.value ? (n(), r("div", {
           key: 0,
           ref_key: "dropdownRef",
-          ref: E,
+          ref: D,
           class: "cui-select__dropdown",
           role: "listbox",
           "aria-multiselectable": a.multiple || void 0,
           style: O([
-            U.value,
+            q.value,
             {
               "--_sel-color": `var(--cui-${a.color})`,
-              "--_sel-font-size": V.value.fontSize
+              "--_sel-font-size": z.value.fontSize
             }
           ])
         }, [
-          a.loading ? (n(), u("div", xe, [
-            A(g, {
+          a.loading ? (n(), r("div", ze, [
+            B(g, {
               name: "spinner-gap",
               size: "1rem",
               class: "cui-select__spinner"
             }),
-            S(" " + m(H(D).loading), 1)
-          ])) : h.value.length === 0 ? (n(), u("div", we, m(a.noOptionsText), 1)) : (n(!0), u(z, { key: 2 }, I(Q.value, (i) => (n(), u(z, {
-            key: i.group ?? "__ungrouped"
+            A(" " + m(w(L).loading), 1)
+          ])) : b.value.length === 0 ? (n(), r("div", Se, m(a.noOptionsText), 1)) : (n(!0), r(S, { key: 2 }, R(X.value, (o) => (n(), r(S, {
+            key: o.group ?? "__ungrouped"
           }, [
-            i.group ? (n(), u("div", Ve, m(i.group), 1)) : f("", !0),
-            (n(!0), u(z, null, I(i.options, (t) => {
-              var c, q;
-              return n(), u("div", {
+            o.group ? (n(), r("div", Ae, m(o.group), 1)) : f("", !0),
+            (n(!0), r(S, null, R(o.options, (t) => {
+              var d, F;
+              return n(), r("div", {
                 key: String(t.value),
-                class: L(["cui-select__option", {
-                  "cui-select__option--selected": $(t.value),
-                  "cui-select__option--highlighted": ((c = d.value[r.value]) == null ? void 0 : c.value) === t.value,
+                class: I(["cui-select__option", {
+                  "cui-select__option--selected": E(t.value),
+                  "cui-select__option--highlighted": ((d = c.value[u.value]) == null ? void 0 : d.value) === t.value,
                   "cui-select__option--disabled": t.disabled
                 }]),
-                "data-highlighted": ((q = d.value[r.value]) == null ? void 0 : q.value) === t.value ? "" : void 0,
+                "data-highlighted": ((F = c.value[u.value]) == null ? void 0 : F.value) === t.value ? "" : void 0,
                 role: "option",
-                "aria-selected": $(t.value),
+                "aria-selected": E(t.value),
                 "aria-disabled": t.disabled || void 0,
-                onClick: (ae) => T(t),
-                onMouseenter: (ae) => r.value = d.value.findIndex((oe) => oe.value === t.value)
+                onClick: (oe) => T(t),
+                onMouseenter: (oe) => u.value = c.value.findIndex((ne) => ne.value === t.value)
               }, [
-                a.multiple ? (n(), u("span", Se, [
-                  $(t.value) ? (n(), C(g, {
+                a.multiple ? (n(), r("span", Ce, [
+                  E(t.value) ? (n(), C(g, {
                     key: 0,
                     name: "check",
                     size: "1rem"
                   })) : f("", !0)
                 ])) : f("", !0),
-                b("span", Ae, [
+                y("span", De, [
                   K(e.$slots, "option", { option: t }, () => [
                     t.icon ? (n(), C(g, {
                       key: 0,
@@ -340,20 +346,24 @@ const me = { class: "cui-select-wrapper" }, fe = ["aria-expanded", "aria-disable
                       size: "sm",
                       class: "cui-select__option-icon"
                     }, null, 8, ["name"])) : f("", !0),
-                    S(" " + m(t.label), 1)
+                    A(" " + m(t.label), 1)
                   ], !0)
                 ])
-              ], 42, ze);
+              ], 42, Be);
             }), 128))
           ], 64))), 128))
         ], 12, _e)) : f("", !0)
       ])),
-      a.error && a.errorMessage ? (n(), u("div", Ce, m(a.errorMessage), 1)) : f("", !0)
+      a.error && a.errorMessage ? (n(), r("div", {
+        key: 0,
+        id: w(Q),
+        class: "cui-select__error"
+      }, m(a.errorMessage), 9, Ee)) : f("", !0)
     ], 512)), [
-      [ce, !a.hidden]
+      [ve, !a.hidden]
     ]);
   }
 });
 export {
-  De as default
+  Re as default
 };

package/dist/components/CuiSkeleton.vue.js

@@ -1,7 +1,7 @@
 import o from "./CuiSkeleton.vue2.js";
 /* empty css                 */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3ad2afb1"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4fa1f5f0"]]);
 export {
-  f as default
+  e as default
 };

package/dist/components/CuiSkeleton.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as f, computed as o, withDirectives as b, openBlock as i, createElementBlock as l, unref as y, Fragment as v, renderList as g, normalizeStyle as n, normalizeClass as s, vShow as _ } from "vue";
+import { defineComponent as f, computed as o, withDirectives as b, openBlock as i, createElementBlock as l, unref as v, Fragment as y, renderList as g, normalizeStyle as s, normalizeClass as n, vShow as _ } from "vue";
 import { useMessages as w } from "../composables/useMessages.js";
 const x = ["aria-label"], L = {
   key: 0,
@@ -19,7 +19,7 @@ const x = ["aria-label"], L = {
   setup(e) {
     const t = e, r = {
       none: "0",
-      sm: "0.25rem",
+      sm: "var(--cui-radius-sm, 0.25rem)",
       md: "0.5rem",
       lg: "0.75rem",
       full: "9999px"
@@ -43,32 +43,32 @@ const x = ["aria-label"], L = {
     return (a, k) => b((i(), l("div", {
       role: "status",
       "aria-busy": "true",
-      "aria-label": y(h).skeleton.label,
+      "aria-label": v(h).skeleton.label,
       class: "cui-skeleton"
     }, [
       e.variant === "text" ? (i(), l("div", L, [
-        (i(!0), l(v, null, g(e.lines, (u) => (i(), l("div", {
+        (i(!0), l(y, null, g(e.lines, (u) => (i(), l("div", {
           key: u,
-          class: s(["cui-skeleton__line", {
+          class: n(["cui-skeleton__line", {
             "cui-skeleton__line--shimmer": e.animation === "shimmer",
             "cui-skeleton__line--pulse": e.animation === "pulse"
           }]),
-          style: n(d(u - 1))
+          style: s(d(u - 1))
         }, null, 6))), 128))
       ])) : e.variant === "rectangle" ? (i(), l("div", {
         key: 1,
-        class: s(["cui-skeleton__block", {
+        class: n(["cui-skeleton__block", {
           "cui-skeleton__block--shimmer": e.animation === "shimmer",
           "cui-skeleton__block--pulse": e.animation === "pulse"
         }]),
-        style: n(c.value)
+        style: s(c.value)
       }, null, 6)) : (i(), l("div", {
         key: 2,
-        class: s(["cui-skeleton__block", {
+        class: n(["cui-skeleton__block", {
           "cui-skeleton__block--shimmer": e.animation === "shimmer",
           "cui-skeleton__block--pulse": e.animation === "pulse"
         }]),
-        style: n(m.value)
+        style: s(m.value)
       }, null, 6))
     ], 8, x)), [
       [_, !e.hidden]

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

@@ -1,8 +1,8 @@
 import type { BackdropBlur } from "./CuiBackdrop.vue";
-import type { HideableProps } from "../types/common";
+import type { HideableProps, TitleAsProps } from "../types/common";
 export type SlideoverSide = "right" | "left" | "top" | "bottom";
 export type SlideoverSize = "sm" | "md" | "lg" | "xl" | "full";
-export interface CuiSlideoverProps extends HideableProps {
+export interface CuiSlideoverProps extends HideableProps, TitleAsProps {
     /** Controls slideover visibility (v-model:visible) */
     visible?: boolean;
     /** Which edge the panel slides from */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiSlideover.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSlideover.vue"],"names":[],"mappings":"AAuMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAChE,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC9B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAuND,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgChD,QAAA,MAAM,eAAe;;;;;;;;UA7QZ,aAAa,GAAG,MAAM;aAJnB,OAAO;gBAQJ,OAAO;iBAIN,OAAO;mBAFL,OAAO;qBAIL,MAAM;kBAET,YAAY;mBAEX,MAAM;UAhBf,aAAa;6EAuRpB,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":"CuiSlideover.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiSlideover.vue"],"names":[],"mappings":"AA0MA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAChE,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,YAAY;IACpE,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC9B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AA6ND,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgChD,QAAA,MAAM,eAAe;;;;;;;;UAnRZ,aAAa,GAAG,MAAM;aAJnB,OAAO;gBAQJ,OAAO;iBAIN,OAAO;mBAFL,OAAO;qBAIL,MAAM;kBAET,YAAY;mBAEX,MAAM;UAhBf,aAAa;6EA6RpB,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"}