@itguy614/clean-ui 1.2.2 → 1.3.1

package/dist/components/CuiToast.vue2.js

@@ -1,15 +1,15 @@
-import { defineComponent as N, ref as b, computed as n, watch as P, onMounted as S, onUnmounted as T, withDirectives as V, openBlock as i, createElementBlock as a, mergeProps as z, Fragment as E, createTextVNode as g, toDisplayString as v, createBlock as L, createCommentVNode as c, createElementVNode as y, renderSlot as $, unref as O, createVNode as A, normalizeStyle as R, vShow as F } from "vue";
+import { defineComponent as P, ref as y, computed as c, watch as S, onMounted as N, onUnmounted as T, withDirectives as V, openBlock as i, createElementBlock as a, mergeProps as z, renderSlot as m, Fragment as E, createTextVNode as $, toDisplayString as f, createBlock as L, createCommentVNode as n, createElementVNode as _, unref as R, createVNode as A, normalizeStyle as F, vShow as K } from "vue";
 import h from "./CuiIcon.vue.js";
-import { COLOR_ICON_MAP as K } from "../utils/colorIconMap.js";
-import { resolveLiveRegion as U } from "../utils/liveRegion.js";
-import { useMessages as j } from "../composables/useMessages.js";
-const q = {
+import { resolveRoleIcon as U } from "../utils/colorIconMap.js";
+import { resolveLiveRegion as j } from "../utils/liveRegion.js";
+import { useMessages as q } from "../composables/useMessages.js";
+const G = {
   key: 0,
   class: "cui-toast__icon"
-}, G = { class: "cui-toast__body" }, H = {
+}, H = { class: "cui-toast__body" }, J = {
   key: 0,
   class: "cui-toast__title"
-}, J = {
+}, O = {
   key: 1,
   class: "cui-toast__description"
 }, Q = {
@@ -18,7 +18,7 @@ const q = {
 }, W = ["aria-label"], X = {
   key: 2,
   class: "cui-toast__progress"
-}, _ = 50, ot = /* @__PURE__ */ N({
+}, k = 50, oe = /* @__PURE__ */ P({
   __name: "CuiToast",
   props: {
     toastId: {},
@@ -29,101 +29,103 @@ const q = {
     autoDismiss: { default: 5e3 },
     showProgress: { type: Boolean, default: !0 },
     animation: { default: "none" },
-    icon: {},
-    noIcon: { type: Boolean, default: !1 },
     active: { type: Boolean, default: !0 },
     hidden: { type: Boolean, default: !1 },
     color: { default: "primary" },
-    live: {}
+    live: {},
+    icon: {},
+    noIcon: { type: Boolean, default: !1 }
   },
   emits: ["dismiss"],
-  setup(s, { emit: k }) {
-    const o = s, D = k, u = b(!1), l = b(0);
+  setup(o, { emit: p }) {
+    const s = o, D = p, l = y(!1), u = y(0);
     let r = null;
-    const I = n(() => !o.autoDismiss || o.autoDismiss === 0 ? 0 : Math.min(l.value / o.autoDismiss * 100, 100));
-    function m() {
-      r || !o.autoDismiss || o.autoDismiss === 0 || (r = setInterval(() => {
-        !u.value && o.active && (l.value += _, l.value >= o.autoDismiss && f());
-      }, _));
+    const I = c(() => !s.autoDismiss || s.autoDismiss === 0 ? 0 : Math.min(u.value / s.autoDismiss * 100, 100));
+    function b() {
+      r || !s.autoDismiss || s.autoDismiss === 0 || (r = setInterval(() => {
+        !l.value && s.active && (u.value += k, u.value >= s.autoDismiss && g());
+      }, k));
     }
-    P(
-      () => o.active,
-      (t) => {
-        t && !r && m();
+    S(
+      () => s.active,
+      (e) => {
+        e && !r && b();
       }
     );
-    function f() {
+    function g() {
       r && clearInterval(r), D("dismiss");
     }
-    function p() {
-      u.value = !0;
-    }
     function x() {
-      u.value = !1;
+      l.value = !0;
+    }
+    function B() {
+      l.value = !1;
     }
-    S(() => {
-      o.active && m();
+    N(() => {
+      s.active && b();
     }), T(() => {
       r && clearInterval(r);
     });
-    const B = n(() => {
-      const t = o.color, d = o.variant, e = {
-        "--_toast-focus-ring": `var(--cui-${t}-focus-ring)`
+    const M = c(() => {
+      const e = s.color, v = s.variant, t = {
+        "--_toast-focus-ring": `var(--cui-${e}-focus-ring)`
       };
-      return d === "solid" ? (e.background = `var(--cui-${t}-solid, var(--cui-${t}))`, e.color = `var(--cui-${t}-text)`, e["--_toast-icon-color"] = `var(--cui-${t}-text)`, e["--_toast-dismiss-color"] = `var(--cui-${t}-text)`, e["--_toast-progress-bg"] = "rgb(255 255 255 / 0.2)", e["--_toast-progress-bar"] = "rgb(255 255 255 / 0.6)") : d === "outline" ? (e.background = "var(--cui-surface-base)", e.color = `var(--cui-${t})`, e.border = `1px solid var(--cui-${t}-border)`, e["--_toast-icon-color"] = `var(--cui-${t})`, e["--_toast-dismiss-color"] = "var(--cui-text-secondary)", e["--_toast-progress-bg"] = `var(--cui-${t}-bg)`, e["--_toast-progress-bar"] = `var(--cui-${t})`) : (e.background = `var(--cui-${t}-bg)`, e.color = "var(--cui-text-body)", e.border = `1px solid var(--cui-${t}-border)`, e["--_toast-icon-color"] = `var(--cui-${t})`, e["--_toast-dismiss-color"] = "var(--cui-text-secondary)", e["--_toast-progress-bg"] = `var(--cui-${t}-border)`, e["--_toast-progress-bar"] = `var(--cui-${t})`), e;
-    }), C = n(() => K[o.color] ?? "info"), M = n(() => U(o.color, o.live)), w = j();
-    return (t, d) => V((i(), a("div", z({
+      return v === "solid" ? (t.background = `var(--cui-${e}-solid, var(--cui-${e}))`, t.color = `var(--cui-${e}-text)`, t["--_toast-icon-color"] = `var(--cui-${e}-text)`, t["--_toast-dismiss-color"] = `var(--cui-${e}-text)`, t["--_toast-progress-bg"] = "rgb(255 255 255 / 0.2)", t["--_toast-progress-bar"] = "rgb(255 255 255 / 0.6)") : v === "outline" ? (t.background = "var(--cui-surface-base)", t.color = `var(--cui-${e})`, t.border = `1px solid var(--cui-${e}-border)`, t["--_toast-icon-color"] = `var(--cui-${e})`, t["--_toast-dismiss-color"] = "var(--cui-text-secondary)", t["--_toast-progress-bg"] = `var(--cui-${e}-bg)`, t["--_toast-progress-bar"] = `var(--cui-${e})`) : (t.background = `var(--cui-${e}-bg)`, t.color = "var(--cui-text-body)", t.border = `1px solid var(--cui-${e}-border)`, t["--_toast-icon-color"] = `var(--cui-${e})`, t["--_toast-dismiss-color"] = "var(--cui-text-secondary)", t["--_toast-progress-bg"] = `var(--cui-${e}-border)`, t["--_toast-progress-bar"] = `var(--cui-${e})`), t;
+    }), d = c(() => U(s.icon, s.color)), w = c(() => j(s.color, s.live)), C = q();
+    return (e, v) => V((i(), a("div", z({
       class: ["cui-toast", [
-        s.animation !== "none" ? `cui-toast--${s.animation}` : ""
+        o.animation !== "none" ? `cui-toast--${o.animation}` : ""
       ]],
-      style: B.value
-    }, M.value, {
-      onMouseenter: p,
-      onMouseleave: x
+      style: M.value
+    }, w.value, {
+      onMouseenter: x,
+      onMouseleave: B
     }), [
-      s.noIcon ? c("", !0) : (i(), a("div", q, [
-        s.icon ? (i(), a(E, { key: 0 }, [
-          g(v(s.icon), 1)
-        ], 64)) : (i(), L(h, {
-          key: 1,
-          name: C.value,
-          size: "1.25rem"
-        }, null, 8, ["name"]))
+      o.noIcon ? n("", !0) : (i(), a("div", G, [
+        m(e.$slots, "icon", {}, () => [
+          d.value.text ? (i(), a(E, { key: 0 }, [
+            $(f(d.value.text), 1)
+          ], 64)) : (i(), L(h, {
+            key: 1,
+            name: d.value.name,
+            size: "1.25rem"
+          }, null, 8, ["name"]))
+        ], !0)
       ])),
-      y("div", G, [
-        s.title ? (i(), a("div", H, v(s.title), 1)) : c("", !0),
-        s.description || t.$slots.default ? (i(), a("div", J, [
-          $(t.$slots, "default", {}, () => [
-            g(v(s.description), 1)
+      _("div", H, [
+        o.title ? (i(), a("div", J, f(o.title), 1)) : n("", !0),
+        o.description || e.$slots.default ? (i(), a("div", O, [
+          m(e.$slots, "default", {}, () => [
+            $(f(o.description), 1)
           ], !0)
-        ])) : c("", !0),
-        t.$slots.actions ? (i(), a("div", Q, [
-          $(t.$slots, "actions", {}, void 0, !0)
-        ])) : c("", !0)
+        ])) : n("", !0),
+        e.$slots.actions ? (i(), a("div", Q, [
+          m(e.$slots, "actions", {}, void 0, !0)
+        ])) : n("", !0)
       ]),
-      s.dismissible ? (i(), a("button", {
+      o.dismissible ? (i(), a("button", {
         key: 1,
         type: "button",
         class: "cui-toast__dismiss",
-        "aria-label": O(w).dismiss,
-        onClick: f
+        "aria-label": R(C).dismiss,
+        onClick: g
       }, [
         A(h, {
           name: "x",
           size: "0.875rem"
         })
-      ], 8, W)) : c("", !0),
-      s.showProgress && s.autoDismiss && s.autoDismiss > 0 && s.active ? (i(), a("div", X, [
-        y("div", {
+      ], 8, W)) : n("", !0),
+      o.showProgress && o.autoDismiss && o.autoDismiss > 0 && o.active ? (i(), a("div", X, [
+        _("div", {
           class: "cui-toast__progress-bar",
-          style: R({ width: `${100 - I.value}%` })
+          style: F({ width: `${100 - I.value}%` })
         }, null, 4)
-      ])) : c("", !0)
+      ])) : n("", !0)
     ], 16)), [
-      [F, !s.hidden]
+      [K, !o.hidden]
     ]);
   }
 });
 export {
-  ot as default
+  oe as default
 };

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

@@ -1,5 +1,5 @@
-import type { CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps } from "../types/common";
-export interface CuiToggleProps extends HideableProps, ColorableProps, SizeableProps, DisableableProps {
+import type { CuiSize, HideableProps, ColorableProps, SizeableProps, DisableableProps, NativeControlProps } from "../types/common";
+export interface CuiToggleProps extends NativeControlProps, HideableProps, ColorableProps, SizeableProps, DisableableProps {
     /** The value this toggle represents (group mode) */
     value?: string | number;
     /** v-model binding (standalone boolean mode) */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiToggle.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggle.vue"],"names":[],"mappings":"AAsRA,OAAO,KAAK,EAAY,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGzH,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACpG,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4MD,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,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA+BnD,QAAA,MAAM,eAAe;;;;;;;;cA/OR,OAAO;;;;gBAFL,OAAO;6EA0PpB,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":"CuiToggle.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggle.vue"],"names":[],"mappings":"AA4RA,OAAO,KAAK,EAAY,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG7I,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB;IACxH,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkND,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,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA+BnD,QAAA,MAAM,eAAe;;;;;;;;cArPR,OAAO;;;;gBAFL,OAAO;6EAgQpB,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/CuiToggle.vue.js

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

package/dist/components/CuiToggle.vue2.js

@@ -1,13 +1,13 @@
-import { defineComponent as B, inject as D, computed as i, ref as E, withDirectives as N, openBlock as v, createElementBlock as m, normalizeStyle as g, normalizeClass as R, createElementVNode as u, withModifiers as T, createCommentVNode as b, renderSlot as k, createTextVNode as p, toDisplayString as S, vShow as x } from "vue";
-import { ToggleGroupKey as K } from "./multi-select-group-context.js";
-import { clampSize as L } from "../utils/sizing.js";
-const O = ["aria-checked", "aria-disabled", "tabindex"], P = ["value", "checked", "disabled", "readonly"], X = {
+import { defineComponent as D, inject as R, computed as o, ref as E, withDirectives as q, openBlock as v, createElementBlock as m, normalizeStyle as b, normalizeClass as L, createElementVNode as s, withModifiers as N, createCommentVNode as f, renderSlot as k, createTextVNode as p, toDisplayString as S, vShow as T } from "vue";
+import { ToggleGroupKey as x } from "./multi-select-group-context.js";
+import { clampSize as K } from "../utils/sizing.js";
+const O = ["id", "aria-describedby", "aria-required", "aria-labelledby", "aria-checked", "aria-disabled", "tabindex"], P = ["name", "autocomplete", "value", "checked", "disabled", "readonly"], X = {
   key: 0,
   class: "cui-toggle__label-wrap"
 }, j = { class: "cui-toggle__label" }, G = {
   key: 0,
   class: "cui-toggle__description"
-}, Z = /* @__PURE__ */ B({
+}, Z = /* @__PURE__ */ D({
   __name: "CuiToggle",
   props: {
     value: {},
@@ -16,98 +16,110 @@ const O = ["aria-checked", "aria-disabled", "tabindex"], P = ["value", "checked"
     description: {},
     showLabels: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 },
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     color: {},
     size: { default: "md" },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(a, { expose: w, emit: z }) {
-    const t = a, _ = z, e = D(K, null), s = i(() => e && t.value !== void 0 ? e.modelValue.value.includes(t.value) : t.modelValue === !0), n = i(() => e != null && e.disabled.value ? !0 : t.disabled), d = i(() => e != null && e.readonly.value ? !0 : t.readonly), r = i(() => t.color ?? (e == null ? void 0 : e.color.value) ?? "primary"), f = E();
-    function h() {
-      n.value || d.value || (e && t.value !== void 0 ? e.toggle(t.value) : _("update:modelValue", !t.modelValue));
+  setup(e, { expose: w, emit: z }) {
+    const t = e, $ = z, l = R(x, null), r = o(() => l && t.value !== void 0 ? l.modelValue.value.includes(t.value) : t.modelValue === !0), u = o(() => l != null && l.disabled.value ? !0 : t.disabled), d = o(() => l != null && l.readonly.value ? !0 : t.readonly), n = o(() => t.color ?? (l == null ? void 0 : l.color.value) ?? "primary"), g = E();
+    function y() {
+      u.value || d.value || (l && t.value !== void 0 ? l.toggle(t.value) : $("update:modelValue", !t.modelValue));
     }
-    function $(l) {
-      (l.key === " " || l.key === "Enter") && (l.preventDefault(), h());
+    function V(a) {
+      (a.key === " " || a.key === "Enter") && (a.preventDefault(), y());
     }
-    w({ el: f, focus: () => {
-      var l;
-      return (l = f.value) == null ? void 0 : l.focus();
+    w({ el: g, focus: () => {
+      var a;
+      return (a = g.value) == null ? void 0 : a.focus();
     } });
-    const V = ["sm", "md", "lg"], C = {
+    const B = ["sm", "md", "lg"], C = {
       sm: { w: "2rem", h: "1.125rem", knob: "0.875rem", travel: "0.875rem", labelSize: "0.5rem" },
       md: { w: "2.75rem", h: "1.5rem", knob: "1.25rem", travel: "1.25rem", labelSize: "0.625rem" },
       lg: { w: "3.5rem", h: "1.875rem", knob: "1.5rem", travel: "1.625rem", labelSize: "0.6875rem" }
-    }, y = i(() => L(t.size, V)), o = i(() => C[y.value]);
-    return (l, c) => N((v(), m("label", {
+    }, h = o(() => K(t.size, B)), i = o(() => C[h.value]);
+    return (a, c) => q((v(), m("label", {
       ref_key: "elRef",
-      ref: f,
-      class: R(["cui-toggle", {
-        "cui-toggle--checked": s.value,
-        "cui-toggle--disabled": n.value,
+      ref: g,
+      class: L(["cui-toggle", {
+        "cui-toggle--checked": r.value,
+        "cui-toggle--disabled": u.value,
         "cui-toggle--readonly": d.value
       }]),
-      style: g({ "--_toggle-focus-ring": `var(--cui-${r.value}-focus-ring)` }),
+      style: b({ "--_toggle-focus-ring": `var(--cui-${n.value}-focus-ring)` }),
+      id: e.id,
       role: "switch",
-      "aria-checked": s.value,
-      "aria-disabled": n.value || d.value || void 0,
-      tabindex: n.value ? -1 : 0,
-      onClick: h,
-      onKeydown: $
+      "aria-describedby": e.ariaDescribedby,
+      "aria-required": e.ariaRequired || void 0,
+      "aria-labelledby": e.ariaLabelledby,
+      "aria-checked": r.value,
+      "aria-disabled": u.value || d.value || void 0,
+      tabindex: u.value ? -1 : 0,
+      onClick: y,
+      onKeydown: V
     }, [
-      u("input", {
+      s("input", {
+        name: e.name,
+        autocomplete: e.autocomplete,
         type: "checkbox",
-        value: a.value !== void 0 ? String(a.value) : void 0,
-        checked: s.value,
-        disabled: n.value,
+        value: e.value !== void 0 ? String(e.value) : void 0,
+        checked: r.value,
+        disabled: u.value,
         readonly: d.value,
         tabindex: "-1",
         "aria-hidden": "true",
         class: "cui-toggle__input",
-        onClick: c[0] || (c[0] = T(() => {
+        onClick: c[0] || (c[0] = N(() => {
         }, ["stop", "prevent"]))
       }, null, 8, P),
-      u("span", {
+      s("span", {
         class: "cui-toggle__track",
-        style: g({
-          width: o.value.w,
-          height: o.value.h,
-          "--_toggle-color": `var(--cui-${r.value})`,
-          "--_toggle-bg": `var(--cui-${r.value}-bg)`,
-          "--_toggle-hover": `var(--cui-${r.value}-hover)`,
-          "--_toggle-active": `var(--cui-${r.value}-active)`
+        style: b({
+          width: i.value.w,
+          height: i.value.h,
+          "--_toggle-color": `var(--cui-${n.value})`,
+          "--_toggle-bg": `var(--cui-${n.value}-bg)`,
+          "--_toggle-hover": `var(--cui-${n.value}-hover)`,
+          "--_toggle-active": `var(--cui-${n.value}-active)`
         })
       }, [
-        a.showLabels && y.value !== "sm" && s.value ? (v(), m("span", {
+        e.showLabels && h.value !== "sm" && r.value ? (v(), m("span", {
           key: 0,
           class: "cui-toggle__labels",
-          style: g({ fontSize: o.value.labelSize })
+          style: b({ fontSize: i.value.labelSize })
         }, [...c[1] || (c[1] = [
-          u("span", { class: "cui-toggle__on-label" }, "ON", -1)
-        ])], 4)) : b("", !0),
-        u("span", {
+          s("span", { class: "cui-toggle__on-label" }, "ON", -1)
+        ])], 4)) : f("", !0),
+        s("span", {
           class: "cui-toggle__knob",
-          style: g({
-            width: o.value.knob,
-            height: o.value.knob,
-            transform: s.value ? `translateX(${o.value.travel})` : "translateX(0)"
+          style: b({
+            width: i.value.knob,
+            height: i.value.knob,
+            transform: r.value ? `translateX(${i.value.travel})` : "translateX(0)"
           })
         }, null, 4)
       ], 4),
-      a.label || l.$slots.default || a.description || l.$slots.description ? (v(), m("span", X, [
-        u("span", j, [
-          k(l.$slots, "default", {}, () => [
-            p(S(a.label), 1)
+      e.label || a.$slots.default || e.description || a.$slots.description ? (v(), m("span", X, [
+        s("span", j, [
+          k(a.$slots, "default", {}, () => [
+            p(S(e.label), 1)
           ], !0)
         ]),
-        a.description || l.$slots.description ? (v(), m("span", G, [
-          k(l.$slots, "description", {}, () => [
-            p(S(a.description), 1)
+        e.description || a.$slots.description ? (v(), m("span", G, [
+          k(a.$slots, "description", {}, () => [
+            p(S(e.description), 1)
           ], !0)
-        ])) : b("", !0)
-      ])) : b("", !0)
+        ])) : f("", !0)
+      ])) : f("", !0)
     ], 46, O)), [
-      [x, !a.hidden]
+      [T, !e.hidden]
     ]);
   }
 });

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

@@ -1,5 +1,5 @@
-import type { CuiAutoOrientation, HideableProps, ColorableProps, DisableableProps } from "../types/common";
-export interface CuiToggleGroupProps extends HideableProps, ColorableProps, DisableableProps {
+import type { CuiAutoOrientation, HideableProps, ColorableProps, DisableableProps, AriaLabelableProps } from "../types/common";
+export interface CuiToggleGroupProps extends AriaLabelableProps, HideableProps, ColorableProps, DisableableProps {
     /** Array of selected values */
     modelValue?: Array<string | number>;
     /** Layout orientation — auto: horizontal for ≤2 options, vertical for 3+ */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggleGroup.vue"],"names":[],"mappings":"AAiIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAG3G,MAAM,WAAW,mBAAoB,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IAC1F,+BAA+B;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACpC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4GD,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;AAsB/C,QAAA,MAAM,eAAe;;;;;WAzIX,OAAO;cAFJ,OAAO;;;;iBAFJ,kBAAkB;gBAFnB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;6EAuJnC,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":"CuiToggleGroup.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiToggleGroup.vue"],"names":[],"mappings":"AAyIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAI/H,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB;IAC9G,+BAA+B;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACpC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoHD,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;AAwB/C,QAAA,MAAM,eAAe;;;;;WAnJX,OAAO;cAFJ,OAAO;;;;iBAFJ,kBAAkB;gBAFnB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;6EAiKnC,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/CuiToggleGroup.vue.js

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

package/dist/components/CuiToggleGroup.vue2.js

@@ -1,9 +1,7 @@
-import { defineComponent as y, useSlots as h, computed as u, provide as v, toRef as a, withDirectives as b, openBlock as s, createElementBlock as c, normalizeClass as V, createElementVNode as S, renderSlot as B, toDisplayString as C, createCommentVNode as k, vShow as x } from "vue";
-import { ToggleGroupKey as D } from "./multi-select-group-context.js";
-const M = ["aria-label", "aria-invalid"], w = { class: "cui-toggle-group__options" }, z = {
-  key: 0,
-  class: "cui-toggle-group__error"
-}, N = /* @__PURE__ */ y({
+import { defineComponent as p, useSlots as B, computed as u, provide as V, toRef as i, withDirectives as S, openBlock as s, createElementBlock as c, normalizeClass as C, unref as f, createElementVNode as D, renderSlot as q, toDisplayString as k, createCommentVNode as x, vShow as L } from "vue";
+import { useFieldDescribedBy as M } from "../composables/useFieldDescribedBy.js";
+import { ToggleGroupKey as R } from "./multi-select-group-context.js";
+const w = ["id", "aria-labelledby", "aria-describedby", "aria-required", "aria-label", "aria-invalid"], z = { class: "cui-toggle-group__options" }, E = ["id"], $ = /* @__PURE__ */ p({
   __name: "CuiToggleGroup",
   props: {
     modelValue: { default: () => [] },
@@ -12,48 +10,60 @@ const M = ["aria-label", "aria-invalid"], w = { class: "cui-toggle-group__option
     error: { type: Boolean, default: !1 },
     errorMessage: {},
     label: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     color: { default: "primary" },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: f }) {
-    const e = o, g = f, i = h(), m = u(() => {
-      var r;
-      const t = (r = i.default) == null ? void 0 : r.call(i);
-      return t ? t.reduce((l, n) => {
-        var d;
-        return n.type === Symbol.for("v-fgm") || n.type === Symbol.for("v-fgt") ? l + (((d = n.children) == null ? void 0 : d.length) ?? 0) : l + 1;
+  setup(e, { emit: g }) {
+    const r = e, { errorId: b, describedBy: m } = M(r), y = g, t = B(), v = u(() => {
+      var a;
+      const o = (a = t.default) == null ? void 0 : a.call(t);
+      return o ? o.reduce((l, d) => {
+        var n;
+        return d.type === Symbol.for("v-fgm") || d.type === Symbol.for("v-fgt") ? l + (((n = d.children) == null ? void 0 : n.length) ?? 0) : l + 1;
       }, 0) : 0;
-    }), p = u(() => e.orientation !== "auto" ? e.orientation : m.value <= 2 ? "horizontal" : "vertical");
-    return v(D, {
-      modelValue: a(e, "modelValue"),
-      color: a(e, "color"),
-      disabled: a(e, "disabled"),
-      readonly: a(e, "readonly"),
-      toggle(t) {
-        if (e.disabled || e.readonly) return;
-        const r = [...e.modelValue], l = r.indexOf(t);
-        l >= 0 ? r.splice(l, 1) : r.push(t), g("update:modelValue", r);
+    }), h = u(() => r.orientation !== "auto" ? r.orientation : v.value <= 2 ? "horizontal" : "vertical");
+    return V(R, {
+      modelValue: i(r, "modelValue"),
+      color: i(r, "color"),
+      disabled: i(r, "disabled"),
+      readonly: i(r, "readonly"),
+      toggle(o) {
+        if (r.disabled || r.readonly) return;
+        const a = [...r.modelValue], l = a.indexOf(o);
+        l >= 0 ? a.splice(l, 1) : a.push(o), y("update:modelValue", a);
       }
-    }), (t, r) => b((s(), c("div", {
+    }), (o, a) => S((s(), c("div", {
       role: "group",
-      "aria-label": o.label,
-      "aria-invalid": o.error || void 0,
-      class: V(["cui-toggle-group", [
-        `cui-toggle-group--${p.value}`,
-        { "cui-toggle-group--error": o.error }
+      id: e.id,
+      "aria-labelledby": e.ariaLabelledby,
+      "aria-describedby": f(m),
+      "aria-required": e.ariaRequired || void 0,
+      "aria-label": e.ariaLabelledby ? void 0 : e.label,
+      "aria-invalid": e.error || void 0,
+      class: C(["cui-toggle-group", [
+        `cui-toggle-group--${h.value}`,
+        { "cui-toggle-group--error": e.error }
       ]])
     }, [
-      S("div", w, [
-        B(t.$slots, "default", {}, void 0, !0)
+      D("div", z, [
+        q(o.$slots, "default", {}, void 0, !0)
       ]),
-      o.error && o.errorMessage ? (s(), c("div", z, C(o.errorMessage), 1)) : k("", !0)
-    ], 10, M)), [
-      [x, !o.hidden]
+      e.error && e.errorMessage ? (s(), c("div", {
+        key: 0,
+        id: f(b),
+        class: "cui-toggle-group__error"
+      }, k(e.errorMessage), 9, E)) : x("", !0)
+    ], 10, w)), [
+      [L, !e.hidden]
     ]);
   }
 });
 export {
-  N as default
+  $ as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTooltip.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTooltip.vue"],"names":[],"mappings":"AAsRA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IACtF,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsOD,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;AAwC/C,QAAA,MAAM,eAAe;;;;;;;eA5RP,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;6EA4RjB,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":"CuiTooltip.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTooltip.vue"],"names":[],"mappings":"AAgTA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,cAAc,EAAE,gBAAgB;IACtF,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgQD,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;AAyC/C,QAAA,MAAM,eAAe;;;;;;;eAvTP,gBAAgB;aAElB,cAAc;eAEZ,MAAM;eAEN,MAAM;aAER,OAAO;6EAuTjB,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/CuiTooltip.vue.js

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