@itguy614/clean-ui 1.2.1 → 1.3.0

package/dist/components/CuiTextarea.vue2.js

@@ -1,15 +1,13 @@
-import { defineComponent as k, useTemplateRef as H, computed as m, onMounted as F, nextTick as f, watch as $, withDirectives as A, openBlock as l, createElementBlock as i, createElementVNode as w, normalizeStyle as I, normalizeClass as z, toDisplayString as h, createCommentVNode as B, vShow as D } from "vue";
-import { TEXTAREA_SIZE_SCALE as N } from "../utils/sizing.js";
-const W = { class: "cui-textarea-wrapper" }, O = ["value", "placeholder", "disabled", "readonly", "rows", "aria-invalid"], X = {
+import { defineComponent as q, useTemplateRef as D, computed as m, onMounted as I, nextTick as v, watch as $, withDirectives as A, openBlock as i, createElementBlock as l, createElementVNode as w, normalizeStyle as N, normalizeClass as B, unref as L, toDisplayString as f, createCommentVNode as R, vShow as W } from "vue";
+import { TEXTAREA_SIZE_SCALE as O } from "../utils/sizing.js";
+import { useFieldDescribedBy as X } from "../composables/useFieldDescribedBy.js";
+const Y = { class: "cui-textarea-wrapper" }, Z = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "placeholder", "disabled", "readonly", "rows", "aria-invalid"], j = {
   key: 0,
   class: "cui-textarea__footer"
-}, Y = {
-  key: 0,
-  class: "cui-textarea__error"
-}, Z = {
+}, G = ["id"], J = {
   key: 1,
   class: "cui-textarea__spacer"
-}, G = /* @__PURE__ */ k({
+}, U = /* @__PURE__ */ q({
   __name: "CuiTextarea",
   props: {
     modelValue: { default: "" },
@@ -22,69 +20,81 @@ const W = { class: "cui-textarea-wrapper" }, O = ["value", "placeholder", "disab
     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" },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: C, emit: L }) {
-    const R = {
+  setup(e, { expose: z, emit: C }) {
+    const S = {
       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"
-    }, a = e, S = L, d = H("textareaEl"), v = m(() => a.modelValue.length), n = m(() => a.maxLength !== void 0 && v.value > a.maxLength);
-    function p(t) {
-      const o = t.target;
-      let r = o.value;
-      a.maxLength !== void 0 && r.length > a.maxLength && (r = r.slice(0, a.maxLength), o.value = r), S("update:modelValue", r), a.autoResize && f(u);
+    }, t = e, { errorId: T, describedBy: E } = X(t), M = C, d = D("textareaEl"), h = m(() => t.modelValue.length), u = m(() => t.maxLength !== void 0 && h.value > t.maxLength);
+    function V(a) {
+      const r = a.target;
+      let o = r.value;
+      t.maxLength !== void 0 && o.length > t.maxLength && (o = o.slice(0, t.maxLength), r.value = o), M("update:modelValue", o), t.autoResize && v(n);
     }
-    function u() {
-      const t = d.value;
-      if (!t) return;
-      t.style.height = "auto";
-      const o = parseFloat(getComputedStyle(t).lineHeight) || 20, r = parseFloat(getComputedStyle(t).paddingTop) || 0, g = parseFloat(getComputedStyle(t).paddingBottom) || 0, x = parseFloat(getComputedStyle(t).borderTopWidth) || 0, y = parseFloat(getComputedStyle(t).borderBottomWidth) || 0, M = o * a.rows + r + g + x + y;
-      let c = 1 / 0;
-      a.maxRows && (c = o * a.maxRows + r + g + x + y);
-      const b = t.scrollHeight, V = Math.min(Math.max(b, M), c);
-      t.style.height = `${V}px`, t.style.overflowY = b > c ? "auto" : "hidden";
+    function n() {
+      const a = d.value;
+      if (!a) return;
+      a.style.height = "auto";
+      const r = parseFloat(getComputedStyle(a).lineHeight) || 20, o = parseFloat(getComputedStyle(a).paddingTop) || 0, g = parseFloat(getComputedStyle(a).paddingBottom) || 0, y = parseFloat(getComputedStyle(a).borderTopWidth) || 0, x = parseFloat(getComputedStyle(a).borderBottomWidth) || 0, F = r * t.rows + o + g + y + x;
+      let s = 1 / 0;
+      t.maxRows && (s = r * t.maxRows + o + g + y + x);
+      const b = a.scrollHeight, p = Math.min(Math.max(b, F), s);
+      a.style.height = `${p}px`, a.style.overflowY = b > s ? "auto" : "hidden";
     }
-    F(() => {
-      a.autoResize && f(u);
-    }), $(() => a.modelValue, () => {
-      a.autoResize && f(u);
+    I(() => {
+      t.autoResize && v(n);
+    }), $(() => t.modelValue, () => {
+      t.autoResize && v(n);
     });
-    function T(t) {
-      var o;
-      (o = d.value) == null || o.focus(t);
+    function k(a) {
+      var r;
+      (r = d.value) == null || r.focus(a);
     }
-    function E() {
-      var t;
-      (t = d.value) == null || t.blur();
+    function H() {
+      var a;
+      (a = d.value) == null || a.blur();
     }
-    C({ el: d, focus: T, blur: E });
-    const s = m(() => N[a.size]);
-    return (t, o) => A((l(), i("div", W, [
+    z({ el: d, focus: k, blur: H });
+    const c = m(() => O[t.size]);
+    return (a, r) => A((i(), l("div", Y, [
       w("div", {
-        class: z(["cui-textarea", {
-          "cui-textarea--error": e.error || n.value,
+        class: B(["cui-textarea", {
+          "cui-textarea--error": e.error || u.value,
           "cui-textarea--disabled": e.disabled
         }]),
-        style: I({
-          borderRadius: R[e.rounded],
-          "--_ta-px": s.value.px,
-          "--_ta-py": s.value.py,
-          "--_ta-font-size": s.value.fontSize,
+        style: N({
+          borderRadius: S[e.rounded],
+          "--_ta-px": c.value.px,
+          "--_ta-py": c.value.py,
+          "--_ta-font-size": c.value.fontSize,
           "--_ta-color": `var(--cui-${e.color})`,
           "--_ta-focus-ring": `var(--cui-${e.color}-focus-ring)`,
-          "--_ta-border": e.error || n.value ? "var(--cui-error)" : "var(--cui-border-strong)",
-          "--_ta-focus-border": e.error || n.value ? "var(--cui-error)" : `var(--cui-${e.color})`
+          "--_ta-border": e.error || u.value ? "var(--cui-error)" : "var(--cui-border-strong)",
+          "--_ta-focus-border": e.error || u.value ? "var(--cui-error)" : `var(--cui-${e.color})`
         })
       }, [
         w("textarea", {
           ref: "textareaEl",
+          id: e.id,
+          name: e.name,
+          autocomplete: e.autocomplete,
+          "aria-describedby": L(E),
+          "aria-required": e.ariaRequired || void 0,
+          "aria-labelledby": e.ariaLabelledby,
           value: e.modelValue,
           placeholder: e.placeholder,
           disabled: e.disabled,
@@ -92,21 +102,25 @@ const W = { class: "cui-textarea-wrapper" }, O = ["value", "placeholder", "disab
           rows: e.rows,
           "aria-invalid": e.error || void 0,
           class: "cui-textarea__native",
-          onInput: p
-        }, null, 40, O)
+          onInput: V
+        }, null, 40, Z)
       ], 6),
-      e.error && e.errorMessage || e.maxLength !== void 0 ? (l(), i("div", X, [
-        e.error && e.errorMessage ? (l(), i("div", Y, h(e.errorMessage), 1)) : (l(), i("div", Z)),
-        e.maxLength !== void 0 ? (l(), i("div", {
+      e.error && e.errorMessage || e.maxLength !== void 0 ? (i(), l("div", j, [
+        e.error && e.errorMessage ? (i(), l("div", {
+          key: 0,
+          id: L(T),
+          class: "cui-textarea__error"
+        }, f(e.errorMessage), 9, G)) : (i(), l("div", J)),
+        e.maxLength !== void 0 ? (i(), l("div", {
           key: 2,
-          class: z(["cui-textarea__counter", { "cui-textarea__counter--over": n.value }])
-        }, h(v.value) + "/" + h(e.maxLength), 3)) : B("", !0)
-      ])) : B("", !0)
+          class: B(["cui-textarea__counter", { "cui-textarea__counter--over": u.value }])
+        }, f(h.value) + "/" + f(e.maxLength), 3)) : R("", !0)
+      ])) : R("", !0)
     ], 512)), [
-      [D, !e.hidden]
+      [W, !e.hidden]
     ]);
   }
 });
 export {
-  G as default
+  U as default
 };

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

@@ -1,6 +1,6 @@
-import type { HideableProps, DisableableProps } from "../types/common";
+import type { HideableProps, DisableableProps, NativeControlProps } from "../types/common";
 export type TimePickerFormat = "12" | "24";
-export interface CuiTimePickerProps extends HideableProps, DisableableProps {
+export interface CuiTimePickerProps extends NativeControlProps, HideableProps, DisableableProps {
     /** Time value as "HH:mm" (24h) or "hh:mm AM/PM" (12h) */
     modelValue?: string;
     /** Clock format */

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTimePicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimePicker.vue"],"names":[],"mappings":"AAiRA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,gBAAgB;IACzE,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0HD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAEjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UAnIQ,IAAI,GAAG,IAAI,GAAG,IAAI;;gBAZZ,MAAM;YAEV,gBAAgB;gBAEZ,MAAM;;AA4ZrB,wBASG"}
+{"version":3,"file":"CuiTimePicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimePicker.vue"],"names":[],"mappings":"AAsaA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE3F,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB,EAAE,aAAa,EAAE,gBAAgB;IAC7F,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuPD,iBAAS,KAAK,CAAC,IAAI,CAAC,EAAE,YAAY,QAGjC;AAED,iBAAS,IAAI,SAEZ;;;;;;;;;;;UAjQQ,IAAI,GAAG,IAAI,GAAG,IAAI;;gBAZZ,MAAM;YAEV,gBAAgB;gBAEZ,MAAM;;AAgkBrB,wBASG"}

package/dist/components/CuiTimePicker.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as H, ref as v, watch as V, onMounted as L, computed as d, useTemplateRef as O, withDirectives as j, openBlock as g, createElementBlock as h, toDisplayString as $, createCommentVNode as k, createVNode as s, withCtx as f, createElementVNode as p, normalizeStyle as x, createTextVNode as A, vShow as q } from "vue";
-import F from "./CuiPopover.vue.js";
-import C from "./CuiInputStepper.vue.js";
-import z from "./CuiButton.vue.js";
-import G from "./CuiIcon.vue.js";
-const J = {
+import { defineComponent as X, computed as s, ref as b, watch as z, onMounted as Y, useTemplateRef as M, nextTick as _, withDirectives as ee, openBlock as w, createElementBlock as E, toDisplayString as T, createCommentVNode as D, createVNode as c, withCtx as g, createElementVNode as h, normalizeStyle as A, withKeys as te, withModifiers as ae, createTextVNode as I, vShow as re } from "vue";
+import ie from "./CuiPopover.vue.js";
+import B from "./CuiInputStepper.vue.js";
+import R from "./CuiButton.vue.js";
+import le from "./CuiIcon.vue.js";
+import { INPUT_SIZE_SCALE as ne } from "../utils/sizing.js";
+const oe = {
   key: 0,
   style: {
     display: "block",
@@ -12,10 +13,10 @@ const J = {
     fontWeight: "500",
     color: "var(--cui-text-secondary)"
   }
-}, K = { style: { display: "flex", alignItems: "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", padding: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Q = {
+}, ue = ["aria-expanded", "aria-disabled", "id", "aria-describedby", "aria-required", "aria-labelledby", "tabindex"], de = {
   key: 0,
   style: { display: "flex", flexDirection: "column", gap: "calc(0.125rem * var(--cui-density-scale, 1))", marginLeft: "calc(0.25rem * var(--cui-density-scale, 1))" }
-}, te = /* @__PURE__ */ H({
+}, be = /* @__PURE__ */ X({
   __name: "CuiTimePicker",
   props: {
     modelValue: { default: "" },
@@ -26,168 +27,245 @@ const J = {
     placeholder: {},
     size: { default: "md" },
     label: {},
+    name: {},
+    autocomplete: {},
+    id: {},
+    ariaDescribedby: {},
+    ariaLabelledby: {},
+    ariaRequired: { type: Boolean },
     hidden: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(l, { expose: w, emit: P }) {
-    const a = l, I = P, i = v(12), o = v(0), r = v("AM"), y = v(!1);
-    function b(t) {
-      if (!t) return;
-      const e = t.match(/^(\d{1,2}):(\d{2})$/);
-      if (e) {
-        const u = parseInt(e[1]), D = parseInt(e[2]);
-        a.format === "12" ? (r.value = u >= 12 ? "PM" : "AM", i.value = u === 0 ? 12 : u > 12 ? u - 12 : u) : i.value = u, o.value = D;
+  setup(a, { expose: W, emit: q }) {
+    const r = a, x = s(() => ne[r.size]), L = q, o = b(12), d = b(0), l = b("AM"), u = b(!1);
+    function S(e) {
+      if (!e) return;
+      const t = e.match(/^(\d{1,2}):(\d{2})$/);
+      if (t) {
+        const n = parseInt(t[1]), y = parseInt(t[2]);
+        r.format === "12" ? (l.value = n >= 12 ? "PM" : "AM", o.value = n === 0 ? 12 : n > 12 ? n - 12 : n) : o.value = n, d.value = y;
         return;
       }
-      const n = t.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
-      n && (i.value = parseInt(n[1]), o.value = parseInt(n[2]), r.value = n[3].toUpperCase());
+      const i = e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+      i && (o.value = parseInt(i[1]), d.value = parseInt(i[2]), l.value = i[3].toUpperCase());
     }
-    V(() => a.modelValue, b), L(() => b(a.modelValue));
-    function S() {
-      return a.format === "24" ? `${String(i.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")}` : `${String(i.value).padStart(2, "0")}:${String(o.value).padStart(2, "0")} ${r.value}`;
+    z(() => r.modelValue, S), Y(() => S(r.modelValue));
+    function $() {
+      return r.format === "24" ? `${String(o.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")}` : `${String(o.value).padStart(2, "0")}:${String(d.value).padStart(2, "0")} ${l.value}`;
     }
     function m() {
-      I("update:modelValue", S());
+      L("update:modelValue", $());
     }
-    const M = d(() => a.modelValue ? S() : "");
-    d(() => a.format === "24" ? "##:##" : "##:## AA");
-    const T = d(
-      () => a.placeholder ?? (a.format === "24" ? "hh:mm" : "hh:mm AM")
+    const V = s(() => r.modelValue ? $() : "");
+    s(() => r.format === "24" ? "##:##" : "##:## AA");
+    const K = s(
+      () => r.placeholder ?? (r.format === "24" ? "hh:mm" : "hh:mm AM")
     );
-    d(() => a.modelValue ? a.format === "24" ? `${String(i.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}` : `${String(i.value).padStart(2, "0")}${String(o.value).padStart(2, "0")}${r.value}` : "");
-    const W = d(() => a.format === "12" ? 1 : 0), B = d(() => a.format === "12" ? 12 : 23);
-    function E(t) {
-      i.value = t, m();
+    s(() => r.modelValue ? r.format === "24" ? `${String(o.value).padStart(2, "0")}${String(d.value).padStart(2, "0")}` : `${String(o.value).padStart(2, "0")}${String(d.value).padStart(2, "0")}${l.value}` : "");
+    const N = s(() => r.format === "12" ? 1 : 0), U = s(() => r.format === "12" ? 12 : 23);
+    function F(e) {
+      o.value = e, m();
     }
-    function N(t) {
-      o.value = t, m();
+    function H(e) {
+      d.value = e, m();
     }
-    V(y, (t) => {
-      t && b(a.modelValue);
-    });
-    const c = O("rootEl");
-    function R(t) {
+    const k = M("panelEl");
+    let v = [];
+    function P() {
       var e;
-      (e = c.value) == null || e.focus(t);
+      return v.length === 0 && (v = [...((e = k.value) == null ? void 0 : e.querySelectorAll('[role="spinbutton"], .cui-time-picker__period')) ?? []]), v;
     }
-    function U() {
+    function O(e) {
+      var y, C;
+      if (e.key === "Enter") {
+        ((y = document.activeElement) == null ? void 0 : y.classList.contains(
+          "cui-time-picker__period"
+        )) || e.preventDefault(), requestAnimationFrame(() => {
+          m(), u.value = !1;
+        });
+        return;
+      }
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      const t = P(), i = t.indexOf(document.activeElement);
+      if (i === -1) return;
+      e.preventDefault();
+      const n = i + (e.key === "ArrowRight" ? 1 : -1);
+      (C = t[Math.min(t.length - 1, Math.max(0, n))]) == null || C.focus({ preventScroll: !0 });
+    }
+    function Z() {
+      var e;
+      v = [], (e = P()[0]) == null || e.focus({ preventScroll: !0 });
+    }
+    function j() {
+      var i, n;
+      const e = document.activeElement;
+      (e === document.body || e && ((i = k.value) != null && i.contains(e))) && ((n = p.value) == null || n.focus({ preventScroll: !0 }));
+    }
+    z(u, (e) => {
+      if (!e) {
+        v = [], j();
+        return;
+      }
+      S(r.modelValue), _(() => Z());
+    });
+    const f = M("rootEl"), p = M("triggerEl");
+    function G(e) {
+      if (!r.disabled) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault(), u.value = !0;
+          return;
+        }
+        e.key === "Escape" && u.value && (e.preventDefault(), u.value = !1);
+      }
+    }
+    function J(e) {
       var t;
-      (t = c.value) == null || t.blur();
+      (t = p.value ?? f.value) == null || t.focus(e);
+    }
+    function Q() {
+      var e;
+      (e = p.value ?? f.value) == null || e.blur();
     }
-    return w({ el: c, focus: R, blur: U }), (t, e) => j((g(), h("div", {
+    return W({ el: f, focus: J, blur: Q }), (e, t) => ee((w(), E("div", {
+      class: "cui-time-picker",
       ref_key: "rootEl",
-      ref: c
+      ref: f
     }, [
-      l.label ? (g(), h("label", J, $(l.label), 1)) : k("", !0),
-      s(F, {
-        visible: y.value,
-        "onUpdate:visible": e[2] || (e[2] = (n) => y.value = n),
+      a.label ? (w(), E("label", oe, T(a.label), 1)) : D("", !0),
+      c(ie, {
+        visible: u.value,
+        "onUpdate:visible": t[3] || (t[3] = (i) => u.value = i),
         placement: "bottom",
         closable: !1,
         "no-arrow": "",
         width: "auto",
-        disabled: l.disabled
+        disabled: a.disabled
       }, {
-        content: f(() => [
-          p("div", K, [
-            s(C, {
-              "model-value": i.value,
-              min: W.value,
-              max: B.value,
+        content: g(() => [
+          h("div", {
+            ref_key: "panelEl",
+            ref: k,
+            class: "cui-time-picker__panel",
+            onKeydown: [
+              t[2] || (t[2] = te(ae((i) => u.value = !1, ["prevent", "stop"]), ["escape"])),
+              O
+            ],
+            style: { display: "flex", alignItems: "center", gap: "calc(0.5rem * var(--cui-density-scale, 1))", padding: "calc(0.5rem * var(--cui-density-scale, 1))" }
+          }, [
+            c(B, {
+              "model-value": o.value,
+              min: N.value,
+              max: U.value,
               step: 1,
               orientation: "vertical",
               size: "sm",
               pad: 2,
               wrap: "",
-              "onUpdate:modelValue": E
+              "onUpdate:modelValue": F
             }, null, 8, ["model-value", "min", "max"]),
-            e[5] || (e[5] = p("span", { style: { fontSize: "1.25rem", fontWeight: "700", color: "var(--cui-text-body)", lineHeight: "1" } }, ":", -1)),
-            s(C, {
-              "model-value": o.value,
+            t[6] || (t[6] = h("span", { style: { fontSize: "1.25rem", fontWeight: "700", color: "var(--cui-text-body)", lineHeight: "1" } }, ":", -1)),
+            c(B, {
+              "model-value": d.value,
               min: 0,
               max: 59,
-              step: l.minuteStep,
+              step: a.minuteStep,
               orientation: "vertical",
               size: "sm",
               pad: 2,
               wrap: "",
-              "onUpdate:modelValue": N
+              "onUpdate:modelValue": H
             }, null, 8, ["model-value", "step"]),
-            l.format === "12" ? (g(), h("div", Q, [
-              s(z, {
+            a.format === "12" ? (w(), E("div", de, [
+              c(R, {
                 variant: "ghost",
                 size: "xs",
-                style: x({
-                  fontWeight: r.value === "AM" ? "700" : "400",
-                  color: r.value === "AM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
-                  background: r.value === "AM" ? "var(--cui-primary-bg)" : "transparent",
+                style: A({
+                  fontWeight: l.value === "AM" ? "700" : "400",
+                  color: l.value === "AM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
+                  background: l.value === "AM" ? "var(--cui-primary-bg)" : "transparent",
                   borderRadius: "0.25rem",
                   minWidth: "2.5rem"
                 }),
-                onClick: e[0] || (e[0] = (n) => {
-                  r.value = "AM", m();
+                class: "cui-time-picker__period",
+                onClick: t[0] || (t[0] = (i) => {
+                  l.value = "AM", m();
                 })
               }, {
-                default: f(() => [...e[3] || (e[3] = [
-                  A("AM", -1)
+                default: g(() => [...t[4] || (t[4] = [
+                  I("AM", -1)
                 ])]),
                 _: 1
               }, 8, ["style"]),
-              s(z, {
+              c(R, {
                 variant: "ghost",
                 size: "xs",
-                style: x({
-                  fontWeight: r.value === "PM" ? "700" : "400",
-                  color: r.value === "PM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
-                  background: r.value === "PM" ? "var(--cui-primary-bg)" : "transparent",
+                style: A({
+                  fontWeight: l.value === "PM" ? "700" : "400",
+                  color: l.value === "PM" ? "var(--cui-primary)" : "var(--cui-text-tertiary)",
+                  background: l.value === "PM" ? "var(--cui-primary-bg)" : "transparent",
                   borderRadius: "0.25rem",
                   minWidth: "2.5rem"
                 }),
-                onClick: e[1] || (e[1] = (n) => {
-                  r.value = "PM", m();
+                class: "cui-time-picker__period",
+                onClick: t[1] || (t[1] = (i) => {
+                  l.value = "PM", m();
                 })
               }, {
-                default: f(() => [...e[4] || (e[4] = [
-                  A("PM", -1)
+                default: g(() => [...t[5] || (t[5] = [
+                  I("PM", -1)
                 ])]),
                 _: 1
               }, 8, ["style"])
-            ])) : k("", !0)
-          ])
+            ])) : D("", !0)
+          ], 544)
         ]),
-        default: f(() => [
-          p("div", {
-            style: x({
+        default: g(() => [
+          h("div", {
+            ref_key: "triggerEl",
+            ref: p,
+            class: "cui-time-picker__trigger",
+            role: "combobox",
+            "aria-haspopup": "dialog",
+            "aria-expanded": u.value,
+            "aria-disabled": a.disabled || void 0,
+            id: a.id,
+            "aria-describedby": a.ariaDescribedby,
+            "aria-required": a.ariaRequired || void 0,
+            "aria-labelledby": a.ariaLabelledby,
+            tabindex: a.disabled ? -1 : 0,
+            onKeydown: G,
+            style: A({
               display: "inline-flex",
               alignItems: "center",
               gap: "calc(0.5rem * var(--cui-density-scale, 1))",
-              padding: "calc(0.4375rem * var(--cui-density-scale, 1)) calc(0.625rem * var(--cui-density-scale, 1))",
+              height: x.value.height,
+              padding: `0 ${x.value.px}`,
               border: "1px solid var(--cui-border-strong, var(--cui-border))",
-              borderRadius: "var(--cui-button-radius, 0.375rem)",
+              borderRadius: "var(--cui-button-radius, var(--cui-radius-md, 0.375rem))",
               background: "var(--cui-surface-base, white)",
-              cursor: l.disabled ? "default" : "pointer",
-              opacity: l.disabled ? "0.5" : "1",
-              fontSize: "0.875rem",
-              color: M.value ? "var(--cui-text-body)" : "var(--cui-text-tertiary)",
-              minWidth: l.format === "24" ? "6rem" : "8rem"
+              cursor: a.disabled ? "default" : "pointer",
+              opacity: a.disabled ? "0.5" : "1",
+              fontSize: x.value.fontSize,
+              color: V.value ? "var(--cui-text-body)" : "var(--cui-text-tertiary)",
+              minWidth: a.format === "24" ? "6rem" : "8rem"
             })
           }, [
-            s(G, {
+            c(le, {
               name: "clock",
               size: "0.875rem",
               style: { color: "var(--cui-text-tertiary)", flexShrink: "0" }
             }),
-            p("span", null, $(M.value || T.value), 1)
-          ], 4)
+            h("span", null, T(V.value || K.value), 1)
+          ], 44, ue)
         ]),
         _: 1
       }, 8, ["visible", "disabled"])
     ], 512)), [
-      [q, !l.hidden]
+      [re, !a.hidden]
     ]);
   }
 });
 export {
-  te as default
+  be as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTimeline.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimeline.vue"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgCD,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;AAoB/C,QAAA,MAAM,eAAe;;aAvDT,OAAO;6EA8DjB,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":"CuiTimeline.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimeline.vue"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAkCD,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;AAoB/C,QAAA,MAAM,eAAe;;aAzDT,OAAO;6EAgEjB,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/CuiTimeline.vue.js

@@ -1,5 +1,6 @@
-import { defineComponent as o, withDirectives as l, openBlock as i, createElementBlock as n, renderSlot as a, vShow as s } from "vue";
-const r = {
+import { defineComponent as o, withDirectives as l, openBlock as i, createElementBlock as n, renderSlot as s, vShow as a } from "vue";
+const c = {
+  class: "cui-timeline",
   style: {
     display: "flex",
     flexDirection: "column",
@@ -13,10 +14,10 @@ const r = {
     hidden: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (t, c) => l((i(), n("div", r, [
-      a(t.$slots, "default")
+    return (t, r) => l((i(), n("div", c, [
+      s(t.$slots, "default")
     ], 512)), [
-      [s, !e.hidden]
+      [a, !e.hidden]
     ]);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CuiTimelineItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimelineItem.vue"],"names":[],"mappings":"AA6HA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,oBAAqB,SAAQ,aAAa,EAAE,cAAc;IACzE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA+HD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAsB/C,QAAA,MAAM,eAAe;;;UAzJZ,OAAO;6EAgKd,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":"CuiTimelineItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/CuiTimelineItem.vue"],"names":[],"mappings":"AA8HA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrE,MAAM,WAAW,oBAAqB,SAAQ,aAAa,EAAE,cAAc;IACzE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAiID,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAsB/C,QAAA,MAAM,eAAe;;;UA3JZ,OAAO;6EAkKd,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"}