@itguy614/clean-ui 1.2.1 → 1.3.0

package/dist/components/CuiMaskedInput.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as J, computed as b, ref as K, watch as L, useTemplateRef as N, withDirectives as O, openBlock as Q, createBlock as U, createSlots as W, withCtx as g, renderSlot as C, vShow as X, nextTick as Y } from "vue";
+import { defineComponent as H, computed as T, ref as J, watch as K, useTemplateRef as N, withDirectives as O, openBlock as Q, createBlock as U, createSlots as W, withCtx as g, renderSlot as C, vShow as X, nextTick as Y } from "vue";
 import _ from "./CuiInput.vue.js";
-const ne = /* @__PURE__ */ J({
+const le = /* @__PURE__ */ H({
   __name: "CuiMaskedInput",
   props: {
     modelValue: { default: "" },
@@ -12,83 +12,89 @@ const ne = /* @__PURE__ */ J({
     error: { type: Boolean, default: !1 },
     errorMessage: {},
     readonly: { type: Boolean, default: !1 },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     color: { default: "primary" },
     size: { default: "md" },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "update:formattedValue"],
-  setup(u, { expose: $, emit: F }) {
-    const f = u, B = F, z = {
+  setup(r, { expose: D, emit: $ }) {
+    const f = r, B = $, F = {
       "#": { pattern: /[0-9]/ },
       A: { pattern: /[a-zA-Z]/ },
       "*": { pattern: /[a-zA-Z0-9]/ }
-    }, D = b(() => ({ ...z, ...f.tokens })), c = b(() => {
+    }, z = T(() => ({ ...F, ...f.tokens })), c = T(() => {
       const e = [];
       let t = 0;
-      for (let n = 0; n < f.mask.length; n++) {
-        const l = f.mask[n];
-        if (l === "\\" && n + 1 < f.mask.length) {
-          n++, e.push({ index: t, isToken: !1, char: f.mask[n] }), t++;
+      for (let l = 0; l < f.mask.length; l++) {
+        const n = f.mask[l];
+        if (n === "\\" && l + 1 < f.mask.length) {
+          l++, e.push({ index: t, isToken: !1, char: f.mask[l] }), t++;
           continue;
         }
-        const s = D.value[l];
-        s ? e.push({ index: t, isToken: !0, char: l, pattern: s.pattern }) : e.push({ index: t, isToken: !1, char: l }), t++;
+        const o = z.value[n];
+        o ? e.push({ index: t, isToken: !0, char: n, pattern: o.pattern }) : e.push({ index: t, isToken: !1, char: n }), t++;
       }
       return e;
-    }), v = b(() => c.value.filter((e) => e.isToken));
+    }), v = T(() => c.value.filter((e) => e.isToken));
     function d(e) {
-      let t = 0, n = "";
-      for (const l of c.value)
-        l.isToken ? t < e.length ? (n += e[t], t++) : n += f.fillChar : n += l.char;
-      return n;
+      let t = 0, l = "";
+      for (const n of c.value)
+        n.isToken ? t < e.length ? (l += e[t], t++) : l += f.fillChar : l += n.char;
+      return l;
     }
     function P(e) {
-      var n;
+      var l;
       let t = "";
-      for (const l of c.value)
-        if (l.isToken && l.index < e.length) {
-          const s = e[l.index];
-          s !== f.fillChar && ((n = l.pattern) != null && n.test(s)) && (t += s);
+      for (const n of c.value)
+        if (n.isToken && n.index < e.length) {
+          const o = e[n.index];
+          o !== f.fillChar && ((l = n.pattern) != null && l.test(o)) && (t += o);
         }
       return t;
     }
     function E(e) {
-      var l;
-      let t = "", n = 0;
-      for (const s of e) {
-        if (n >= v.value.length) break;
-        (l = v.value[n].pattern) != null && l.test(s) && (t += s, n++);
+      var n;
+      let t = "", l = 0;
+      for (const o of e) {
+        if (l >= v.value.length) break;
+        (n = v.value[l].pattern) != null && n.test(o) && (t += o, l++);
       }
       return t;
     }
-    const i = K(d(f.modelValue));
-    L(
+    const u = J(d(f.modelValue));
+    K(
       () => f.modelValue,
       (e) => {
         const t = E(e);
-        i.value = d(t);
+        u.value = d(t);
       }
     );
-    const A = b(() => i.value);
-    function x(e) {
+    const q = T(() => u.value);
+    function y(e) {
       let t = 0;
-      for (const n of c.value)
-        if (n.isToken) {
-          if (t === e) return n.index;
+      for (const l of c.value)
+        if (l.isToken) {
+          if (t === e) return l.index;
           t++;
         }
       return c.value.length;
     }
-    function w(e) {
+    function b(e) {
       for (const t of c.value)
         if (t.isToken && t.index >= e) return t.index;
       return c.value.length;
     }
-    const y = N("maskedInputRef");
+    const w = N("maskedInputRef");
     function I() {
       var e;
-      return (e = y.value) == null ? void 0 : e.el;
+      return (e = w.value) == null ? void 0 : e.el;
     }
     function p(e) {
       Y(() => {
@@ -96,127 +102,136 @@ const ne = /* @__PURE__ */ J({
         t && t.setSelectionRange(e, e);
       });
     }
-    function M(e) {
+    function A(e) {
       e.preventDefault();
       const t = I();
       if (!t) return;
-      const n = t.selectionStart ?? 0, l = t.selectionEnd ?? n, s = P(i.value);
+      const l = t.selectionStart ?? 0, n = t.selectionEnd ?? l, o = P(u.value);
       if (e.inputType === "insertText" && e.data) {
-        let a = 0;
-        for (const m of c.value) {
-          if (m.index >= n) break;
-          m.isToken && a++;
+        let s = 0;
+        for (const h of c.value) {
+          if (h.index >= l) break;
+          h.isToken && s++;
         }
-        const r = S(e.data, a);
-        if (!r) return;
-        let o = s;
-        if (n !== l) {
-          const m = k(n), H = k(l);
-          o = o.slice(0, m) + o.slice(H), a = m;
+        const i = S(e.data, s);
+        if (!i) return;
+        let a = o;
+        if (l !== n) {
+          const h = k(l), G = k(n);
+          a = a.slice(0, h) + a.slice(G), s = h;
         }
-        o = o.slice(0, a) + r + o.slice(a), o = o.slice(0, v.value.length), i.value = d(o), T(o);
-        const h = a + r.length, R = x(h);
-        p(w(R));
+        a = a.slice(0, s) + i + a.slice(s), a = a.slice(0, v.value.length), u.value = d(a), x(a);
+        const m = s + i.length, R = y(m);
+        p(b(R));
       } else if (e.inputType === "deleteContentBackward" || e.inputType === "deleteContentForward") {
-        let a = k(n), r = k(l);
-        if (n === l)
+        let s = k(l), i = k(n);
+        if (l === n)
           if (e.inputType === "deleteContentBackward")
-            if (a > 0)
-              a--;
+            if (s > 0)
+              s--;
             else
               return;
-          else if (r < s.length)
-            r++;
+          else if (i < o.length)
+            i++;
           else
             return;
-        const o = s.slice(0, a) + s.slice(r);
-        i.value = d(o), T(o);
-        const h = x(a);
-        e.inputType === "deleteContentBackward" ? p(h) : p(w(h));
+        const a = o.slice(0, s) + o.slice(i);
+        u.value = d(a), x(a);
+        const m = y(s);
+        e.inputType === "deleteContentBackward" ? p(m) : p(b(m));
       } else if (e.inputType === "insertFromPaste") {
-        const a = e.data ?? "";
-        let r = k(n), o = s;
-        if (n !== l) {
-          const m = k(l);
-          o = o.slice(0, r) + o.slice(m);
+        const s = e.data ?? "";
+        let i = k(l), a = o;
+        if (l !== n) {
+          const h = k(n);
+          a = a.slice(0, i) + a.slice(h);
         }
-        const h = Z(a, r);
-        o = o.slice(0, r) + h + o.slice(r), o = o.slice(0, v.value.length), i.value = d(o), T(o);
-        const R = r + h.length;
-        p(x(R));
+        const m = M(s, i);
+        a = a.slice(0, i) + m + a.slice(i), a = a.slice(0, v.value.length), u.value = d(a), x(a);
+        const R = i + m.length;
+        p(y(R));
       }
     }
     function k(e) {
       let t = 0;
-      for (const n of c.value) {
-        if (n.index >= e) break;
-        n.isToken && t++;
+      for (const l of c.value) {
+        if (l.index >= e) break;
+        l.isToken && t++;
       }
       return t;
     }
     function S(e, t) {
-      var s;
-      let n = "", l = t;
-      for (const a of e) {
-        if (l >= v.value.length) break;
-        (s = v.value[l].pattern) != null && s.test(a) && (n += a, l++);
+      var o;
+      let l = "", n = t;
+      for (const s of e) {
+        if (n >= v.value.length) break;
+        (o = v.value[n].pattern) != null && o.test(s) && (l += s, n++);
       }
-      return n;
+      return l;
     }
-    function Z(e, t) {
+    function M(e, t) {
       return S(e, t);
     }
-    function T(e) {
+    function x(e) {
       B("update:modelValue", e), B("update:formattedValue", d(e));
     }
     function V() {
-      const e = P(i.value);
-      return e.length === 0 ? w(0) : x(e.length);
+      const e = P(u.value);
+      return e.length === 0 ? b(0) : y(e.length);
     }
-    function j() {
+    function L() {
       const e = I();
       if (!e) return;
-      const t = e.selectionStart ?? 0, n = V();
-      if (t > n)
-        p(n);
+      const t = e.selectionStart ?? 0, l = V();
+      if (t > l)
+        p(l);
       else {
-        const l = w(t);
-        l > n ? p(n) : l !== t && p(l);
+        const n = b(t);
+        n > l ? p(l) : n !== t && p(n);
       }
     }
-    function q() {
-      i.value = d(""), T(""), p(w(0));
+    function Z() {
+      u.value = d(""), x(""), p(b(0));
     }
-    function G() {
-      (!i.value || i.value === d("")) && (i.value = d("")), p(V());
+    function j() {
+      (!u.value || u.value === d("")) && (u.value = d("")), p(V());
     }
-    return $({
-      el: y,
-      formattedValue: A,
-      focus: () => {
-        var e;
-        return (e = y.value) == null ? void 0 : e.focus();
+    return D({
+      el: w,
+      formattedValue: q,
+      // Forwards FocusOptions, as CuiInput.focus() and the native focus() both do —
+      // callers need { preventScroll } when restoring focus from an overlay (#112).
+      focus: (e) => {
+        var t;
+        return (t = w.value) == null ? void 0 : t.focus(e);
       },
       blur: () => {
         var e;
-        return (e = y.value) == null ? void 0 : e.blur();
+        return (e = w.value) == null ? void 0 : e.blur();
       }
     }), (e, t) => O((Q(), U(_, {
+      class: "cui-masked-input",
       ref: "maskedInputRef",
-      "model-value": i.value,
+      id: r.id,
+      name: r.name,
+      autocomplete: r.autocomplete,
+      "aria-describedby": r.ariaDescribedby,
+      "aria-required": r.ariaRequired || void 0,
+      "aria-labelledby": r.ariaLabelledby,
+      "model-value": u.value,
       type: "text",
-      placeholder: u.placeholder,
-      color: u.color,
-      size: u.size,
-      clearable: u.clearable,
-      error: u.error,
-      "error-message": u.errorMessage,
-      disabled: u.disabled,
-      readonly: u.readonly,
-      onBeforeinput: M,
-      onClick: j,
-      onFocusin: G,
-      onClear: q
+      placeholder: r.placeholder,
+      color: r.color,
+      size: r.size,
+      clearable: r.clearable,
+      error: r.error,
+      "error-message": r.errorMessage,
+      disabled: r.disabled,
+      readonly: r.readonly,
+      onBeforeinput: A,
+      onClick: L,
+      onFocusin: j,
+      onClear: Z
     }, W({ _: 2 }, [
       e.$slots.prefix ? {
         name: "prefix",
@@ -246,11 +261,11 @@ const ne = /* @__PURE__ */ J({
         ]),
         key: "3"
       } : void 0
-    ]), 1032, ["model-value", "placeholder", "color", "size", "clearable", "error", "error-message", "disabled", "readonly"])), [
-      [X, !u.hidden]
+    ]), 1032, ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "model-value", "placeholder", "color", "size", "clearable", "error", "error-message", "disabled", "readonly"])), [
+      [X, !r.hidden]
     ]);
   }
 });
 export {
-  ne as default
+  le as default
 };

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

@@ -1,9 +1,17 @@
 import type { BackdropBlur } from "./CuiBackdrop.vue";
-import type { HideableProps, CuiRounded } from "../types/common";
+import type { HideableProps, CuiRounded, TitleAsProps } from "../types/common";
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
-export interface CuiModalProps extends HideableProps {
+export interface CuiModalProps extends HideableProps, TitleAsProps {
     /** Controls modal visibility (v-model:visible) */
     visible?: boolean;
+    /**
+     * id of the element naming this dialog, for sub-component mode.
+     *
+     * Simple mode (the `title` prop) wires this up on its own. A wrapper that assembles its
+     * own header — `CuiConfirmDialog` does — has no `title` for the modal to name itself
+     * from, and so had no accessible name at all (#158).
+     */
+    ariaLabelledby?: string;
     /** Modal width — named size or custom CSS value */
     size?: ModalSize | string;
     /** Title text (rendered in header) */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModal.vue"],"names":[],"mappings":"AAyMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,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;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAsLD,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;AAiChD,QAAA,MAAM,eAAe;;;;;;;;UA/OZ,SAAS,GAAG,MAAM;aAoBf,UAAU;aAtBV,OAAO;gBAMJ,OAAO;iBAIN,OAAO;mBAFL,OAAO;qBAIL,MAAM;kBAET,YAAY;mBAEX,MAAM;6EAyOtB,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":"CuiModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModal.vue"],"names":[],"mappings":"AAmNA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,YAAY;IAChE,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,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;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AA0LD,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;AAiChD,QAAA,MAAM,eAAe;;;;;;;;UAnPZ,SAAS,GAAG,MAAM;aAoBf,UAAU;aA9BV,OAAO;gBAcJ,OAAO;iBAIN,OAAO;mBAFL,OAAO;qBAIL,MAAM;kBAET,YAAY;mBAEX,MAAM;6EA6OtB,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/CuiModal.vue.js

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

package/dist/components/CuiModal.vue2.js

@@ -1,12 +1,13 @@
-import { defineComponent as x, useTemplateRef as z, computed as N, openBlock as i, createBlock as O, Teleport as $, unref as l, withDirectives as E, createElementBlock as c, normalizeClass as m, createVNode as d, createElementVNode as u, normalizeStyle as M, Fragment as S, withCtx as V, renderSlot as f, vShow as I, createCommentVNode as R } from "vue";
-import { useOverlay as G } from "../composables/useOverlay.js";
-import K from "./CuiBackdrop.vue.js";
-import T from "./CuiModalHeader.vue.js";
-import W from "./CuiModalBody.vue.js";
-const A = { class: "cui-modal-container" }, D = ["aria-labelledby"], J = /* @__PURE__ */ x({
+import { defineComponent as x, useTemplateRef as z, computed as N, openBlock as i, createBlock as O, Teleport as $, unref as l, withDirectives as E, createElementBlock as u, normalizeClass as m, createVNode as d, createElementVNode as b, normalizeStyle as M, Fragment as S, withCtx as V, renderSlot as f, vShow as A, createCommentVNode as I } from "vue";
+import { useOverlay as R } from "../composables/useOverlay.js";
+import G from "./CuiBackdrop.vue.js";
+import K from "./CuiModalHeader.vue.js";
+import L from "./CuiModalBody.vue.js";
+const T = { class: "cui-modal-container" }, W = ["aria-labelledby"], H = /* @__PURE__ */ x({
   __name: "CuiModal",
   props: {
     visible: { type: Boolean, default: !1 },
+    ariaLabelledby: {},
     size: { default: "md" },
     title: {},
     persistent: { type: Boolean, default: !1 },
@@ -18,24 +19,25 @@ const A = { class: "cui-modal-container" }, D = ["aria-labelledby"], J = /* @__P
     backdropImage: {},
     backdropGradient: {},
     rounded: { default: "md" },
-    hidden: { type: Boolean, default: !1 }
+    hidden: { type: Boolean, default: !1 },
+    titleAs: {}
   },
   emits: ["update:visible", "close"],
-  setup(e, { emit: b }) {
-    const o = e, p = {
+  setup(e, { emit: v }) {
+    const t = e, 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"
-    }, n = b, v = z("dialogEl"), { isVisible: y, isAnimating: a, closeOverlay: k, onBackdropClick: C, onKeydown: r } = G({
-      open: () => o.visible,
-      dialogRef: v,
-      persistent: () => o.persistent,
-      allowNested: () => o.allowNested,
-      onUpdateOpen: (t) => n("update:visible", t),
-      onClose: () => n("close")
-    }), g = {
+    }, r = v, p = z("dialogEl"), { isVisible: k, isAnimating: o, closeOverlay: g, onBackdropClick: C, onKeydown: n } = R({
+      open: () => t.visible,
+      dialogRef: p,
+      persistent: () => t.persistent,
+      allowNested: () => t.allowNested,
+      onUpdateOpen: (a) => r("update:visible", a),
+      onClose: () => r("close")
+    }), B = {
       sm: "24rem",
       // 384px
       md: "32rem",
@@ -45,16 +47,16 @@ const A = { class: "cui-modal-container" }, D = ["aria-labelledby"], J = /* @__P
       xl: "64rem",
       // 1024px
       full: "calc(100vw - 2rem)"
-    }, B = N(() => g[o.size] ?? o.size), h = `cui-modal-title-${Math.random().toString(36).slice(2, 8)}`;
-    return (t, s) => (i(), O($, { to: "body" }, [
-      l(y) ? E((i(), c("div", {
+    }, h = N(() => B[t.size] ?? t.size), s = `cui-modal-title-${Math.random().toString(36).slice(2, 8)}`;
+    return (a, c) => (i(), O($, { to: "body" }, [
+      l(k) ? E((i(), u("div", {
         key: 0,
-        class: m(["cui-modal-overlay", { "cui-modal-overlay--visible": l(a) }]),
-        onKeydown: s[0] || (s[0] = //@ts-ignore
-        (...w) => l(r) && l(r)(...w))
+        class: m(["cui-modal-overlay", { "cui-modal-overlay--visible": l(o) }]),
+        onKeydown: c[0] || (c[0] = //@ts-ignore
+        (...w) => l(n) && l(n)(...w))
       }, [
-        d(K, {
-          visible: l(a),
+        d(G, {
+          visible: l(o),
           opacity: e.backdropOpacity,
           blur: e.backdropBlur,
           color: e.backdropColor,
@@ -62,37 +64,39 @@ const A = { class: "cui-modal-container" }, D = ["aria-labelledby"], J = /* @__P
           gradient: e.backdropGradient,
           onClick: l(C)
         }, null, 8, ["visible", "opacity", "blur", "color", "image", "gradient", "onClick"]),
-        u("div", A, [
-          u("div", {
+        b("div", T, [
+          b("div", {
             ref: "dialogEl",
-            class: m(["cui-modal", { "cui-modal--visible": l(a) }]),
-            style: M({ maxWidth: B.value, borderRadius: p[e.rounded] }),
+            class: m(["cui-modal", { "cui-modal--visible": l(o) }]),
+            style: M({ maxWidth: h.value, borderRadius: y[e.rounded] }),
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": e.title ? h : void 0,
+            "aria-labelledby": e.ariaLabelledby ?? (e.title ? s : void 0),
             tabindex: "-1"
           }, [
-            e.title ? (i(), c(S, { key: 0 }, [
-              d(T, {
+            e.title ? (i(), u(S, { key: 0 }, [
+              d(K, {
                 title: e.title,
+                "title-as": e.titleAs,
+                "title-id": s,
                 "no-close-button": e.noCloseButton,
-                onClose: l(k)
-              }, null, 8, ["title", "no-close-button", "onClose"]),
-              d(W, null, {
+                onClose: l(g)
+              }, null, 8, ["title", "title-as", "no-close-button", "onClose"]),
+              d(L, null, {
                 default: V(() => [
-                  f(t.$slots, "default", {}, void 0, !0)
+                  f(a.$slots, "default", {}, void 0, !0)
                 ]),
                 _: 3
               })
-            ], 64)) : f(t.$slots, "default", {}, void 0, !0, 1)
-          ], 14, D)
+            ], 64)) : f(a.$slots, "default", {}, void 0, !0, 1)
+          ], 14, W)
         ])
       ], 34)), [
-        [I, !e.hidden]
-      ]) : R("", !0)
+        [A, !e.hidden]
+      ]) : I("", !0)
     ]));
   }
 });
 export {
-  J as default
+  H as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CuiModalBody.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModalBody.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA2DD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAyB/C,QAAA,MAAM,eAAe;;eAvFP,OAAO;6EA8FnB,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":"CuiModalBody.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModalBody.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA6DD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAyB/C,QAAA,MAAM,eAAe;;eAzFP,OAAO;6EAgGnB,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/CuiModalBody.vue.js

@@ -1,21 +1,24 @@
-import { defineComponent as m, withDirectives as y, openBlock as o, createElementBlock as l, createElementVNode as S, unref as e, normalizeStyle as t, renderSlot as p, createCommentVNode as a, vShow as v } from "vue";
+import { defineComponent as f, withDirectives as y, openBlock as o, createElementBlock as l, createElementVNode as S, unref as e, normalizeStyle as t, renderSlot as p, createCommentVNode as a, vShow as v } from "vue";
 import { useScrollShadows as h, scrollShadowTopStyle as w, scrollShadowBottomStyle as g } from "../composables/useScrollShadows.js";
-const x = { style: {
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  flex: "1 1 auto",
-  minHeight: "0",
-  overflow: "hidden"
-} }, C = /* @__PURE__ */ m({
+const x = {
+  class: "cui-modal-body",
+  style: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    flex: "1 1 auto",
+    minHeight: "0",
+    overflow: "hidden"
+  }
+}, C = /* @__PURE__ */ f({
   __name: "CuiModalBody",
   props: {
     noPadding: { type: Boolean, default: !1 },
     hidden: { type: Boolean, default: !1 }
   },
   setup(n) {
-    const { canScrollUp: d, canScrollDown: c, onScroll: r, onMount: s } = h();
-    return (u, i) => y((o(), l("div", x, [
+    const { canScrollUp: d, canScrollDown: c, onScroll: i, onMount: s } = h();
+    return (u, r) => y((o(), l("div", x, [
       S("div", {
         ref: e(s),
         style: t({
@@ -27,8 +30,8 @@ const x = { style: {
           lineHeight: "1.6",
           color: "var(--cui-text-secondary)"
         }),
-        onScroll: i[0] || (i[0] = //@ts-ignore
-        (...f) => e(r) && e(r)(...f))
+        onScroll: r[0] || (r[0] = //@ts-ignore
+        (...m) => e(i) && e(i)(...m))
       }, [
         p(u.$slots, "default")
       ], 36),

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

@@ -1 +1 @@
-{"version":3,"file":"CuiModalFooter.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModalFooter.vue"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;CACjD;AA4CD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAqB/C,QAAA,MAAM,eAAe;;WApEX,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS;6EA2E/C,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":"CuiModalFooter.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiModalFooter.vue"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;CACjD;AA8CD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAqB/C,QAAA,MAAM,eAAe;;WAtEX,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS;6EA6E/C,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/CuiModalFooter.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as n, withDirectives as i, openBlock as l, createElementBlock as c, normalizeStyle as r, renderSlot as s, vShow as o } from "vue";
+import { defineComponent as n, withDirectives as l, openBlock as c, createElementBlock as i, normalizeStyle as r, renderSlot as s, vShow as o } from "vue";
 const f = /* @__PURE__ */ n({
   __name: "CuiModalFooter",
   props: {
@@ -12,7 +12,8 @@ const f = /* @__PURE__ */ n({
       center: "center",
       between: "space-between"
     };
-    return (a, d) => i((l(), c("div", {
+    return (a, d) => l((c(), i("div", {
+      class: "cui-modal-footer",
       style: r({
         display: "flex",
         alignItems: "center",