@itguy614/clean-ui 1.2.2 → 1.3.1

package/dist/components/CuiDatePicker.vue.js

@@ -1,10 +1,11 @@
-import { defineComponent as ye, ref as z, watch as P, onMounted as ge, computed as D, useTemplateRef as L, withDirectives as he, openBlock as u, createElementBlock as d, toDisplayString as m, createCommentVNode as I, createVNode as s, withCtx as c, createElementVNode as f, Fragment as k, createTextVNode as T, unref as B, renderList as Y, normalizeStyle as W, vShow as pe } from "vue";
-import be from "./CuiMaskedInput.vue.js";
-import xe from "./CuiPopover.vue.js";
-import y from "./CuiButton.vue.js";
-import C from "./CuiIcon.vue.js";
-import { formatToMask as De, formatToRaw as ke, formatDate as Ce, isoToDate as A, daysInMonth as N, firstDayOfMonth as _e, MONTH_NAMES_SHORT as U, DAY_NAMES_SHORT as Me, isDateDisabled as we, parseFormattedDate as ze, isSameDay as Te, isToday as Ye, dateToIso as Se } from "../utils/date.js";
-const Ve = {
+import { defineComponent as we, ref as R, watch as J, onMounted as Ce, computed as k, useTemplateRef as Q, withDirectives as Me, openBlock as c, createElementBlock as v, toDisplayString as g, createCommentVNode as K, createVNode as s, withCtx as m, unref as u, createElementVNode as b, Fragment as C, createTextVNode as I, renderList as B, normalizeStyle as $, vShow as ze } from "vue";
+import Te from "./CuiMaskedInput.vue.js";
+import Se from "./CuiPopover.vue.js";
+import p from "./CuiButton.vue.js";
+import M from "./CuiIcon.vue.js";
+import { calendarCellKey as z, useCalendarKeyboard as Ye } from "../composables/useCalendarKeyboard.js";
+import { formatToMask as _e, formatToRaw as Re, formatDate as Ve, isoToDate as O, daysInMonth as j, firstDayOfMonth as Fe, MONTH_NAMES_SHORT as X, DAY_NAMES_SHORT as Ie, MONTH_NAMES as Z, isDateDisabled as Be, parseFormattedDate as Ne, isSameDay as We, isToday as Ae, dateToIso as Ee } from "../utils/date.js";
+const Ke = {
   key: 0,
   style: {
     display: "block",
@@ -13,10 +14,10 @@ const Ve = {
     fontWeight: "500",
     color: "var(--cui-text-secondary)"
   }
-}, Re = { style: { padding: "calc(0.25rem * var(--cui-density-scale, 1))", minWidth: "260px" } }, Fe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ie = { style: { display: "flex", gap: "calc(0.25rem * var(--cui-density-scale, 1))" } }, Be = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))" } }, We = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "calc(2px * var(--cui-density-scale, 1))" } }, Ae = ["data-disabled", "onClick"], Ne = {
+}, $e = { style: { padding: "calc(0.25rem * var(--cui-density-scale, 1))", minWidth: "260px" } }, Oe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, je = { style: { display: "flex", gap: "calc(0.25rem * var(--cui-density-scale, 1))" } }, He = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))" } }, qe = ["aria-label"], Le = ["data-cui-cell", "tabindex", "aria-selected", "aria-disabled", "aria-label", "data-disabled", "onClick"], Pe = {
   key: 0,
   style: { marginTop: "calc(0.5rem * var(--cui-density-scale, 1))", textAlign: "center" }
-}, $e = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ee = { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" } }, je = ["onClick"], Oe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, He = { style: { fontSize: "0.8125rem", fontWeight: "600", color: "var(--cui-text-body)" } }, Pe = { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" } }, Le = ["onClick"], Xe = /* @__PURE__ */ ye({
+}, Ue = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ge = ["aria-label"], Je = ["data-cui-cell", "tabindex", "aria-label", "onClick"], Qe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Xe = { style: { fontSize: "0.8125rem", fontWeight: "600", color: "var(--cui-text-body)" } }, Ze = ["aria-label"], ea = ["data-cui-cell", "tabindex", "aria-label", "onClick"], sa = /* @__PURE__ */ we({
   __name: "CuiDatePicker",
   props: {
     modelValue: {},
@@ -32,91 +33,118 @@ const Ve = {
     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(g, { expose: q, emit: G }) {
-    const i = g, $ = G, l = z((/* @__PURE__ */ new Date()).getFullYear()), o = z((/* @__PURE__ */ new Date()).getMonth()), h = z(i.mode === "month" ? "months" : "days"), _ = z(!1), n = z(null);
-    function J() {
-      return i.modelValue ? i.modelValue instanceof Date ? i.modelValue : A(i.modelValue) : null;
+  setup(d, { expose: ee, emit: ae }) {
+    const n = d, H = ae, l = R((/* @__PURE__ */ new Date()).getFullYear()), r = R((/* @__PURE__ */ new Date()).getMonth()), h = R(n.mode === "month" ? "months" : "days"), w = R(!1), i = R(null);
+    function te() {
+      return n.modelValue ? n.modelValue instanceof Date ? n.modelValue : O(n.modelValue) : null;
     }
-    function E() {
-      const e = J();
-      n.value = e, e && (l.value = e.getFullYear(), o.value = e.getMonth());
+    function q() {
+      const e = te();
+      i.value = e, e && (l.value = e.getFullYear(), r.value = e.getMonth());
     }
-    P(() => i.modelValue, E), ge(E);
-    const j = D(() => De(i.format)), K = D(() => i.placeholder ?? i.format.toLowerCase()), Q = D(() => n.value ? ke(Ce(n.value, i.format)) : "");
-    function S(e) {
-      n.value = e, i.valueType === "date" ? $("update:modelValue", e) : $("update:modelValue", Se(e));
+    J(() => n.modelValue, q), Ce(q);
+    const L = k(() => _e(n.format)), le = k(() => n.placeholder ?? n.format.toLowerCase()), ie = k(() => i.value ? Re(Ve(i.value, n.format)) : "");
+    function N(e) {
+      i.value = e, n.valueType === "date" ? H("update:modelValue", e) : H("update:modelValue", Ee(e));
     }
-    const X = D(() => i.minDate ? A(i.minDate) : null), Z = D(() => i.maxDate ? A(i.maxDate) : null);
-    function M(e) {
-      return we(e, {
-        minDate: X.value,
-        maxDate: Z.value,
-        disabledDate: i.disabledDate,
-        disabledDates: i.disabledDates
+    const ne = k(() => n.minDate ? O(n.minDate) : null), re = k(() => n.maxDate ? O(n.maxDate) : null);
+    function T(e) {
+      return Be(e, {
+        minDate: ne.value,
+        maxDate: re.value,
+        disabledDate: n.disabledDate,
+        disabledDates: n.disabledDates
       });
     }
-    const ee = D(() => {
-      const e = [], t = N(l.value, o.value), a = _e(l.value, o.value), r = o.value === 0 ? 11 : o.value - 1, p = o.value === 0 ? l.value - 1 : l.value, b = N(p, r);
-      for (let v = a - 1; v >= 0; v--) {
-        const x = new Date(p, r, b - v);
-        e.push({ date: x, inMonth: !1, disabled: M(x) });
+    const oe = k(() => {
+      const e = [], t = j(l.value, r.value), a = Fe(l.value, r.value), o = r.value === 0 ? 11 : r.value - 1, x = r.value === 0 ? l.value - 1 : l.value, D = j(x, o);
+      for (let f = a - 1; f >= 0; f--) {
+        const y = new Date(x, o, D - f);
+        e.push({ date: y, inMonth: !1, disabled: T(y), key: z("days", y) });
       }
-      for (let v = 1; v <= t; v++) {
-        const x = new Date(l.value, o.value, v);
-        e.push({ date: x, inMonth: !0, disabled: M(x) });
+      for (let f = 1; f <= t; f++) {
+        const y = new Date(l.value, r.value, f);
+        e.push({ date: y, inMonth: !0, disabled: T(y), key: z("days", y) });
       }
-      const w = 42 - e.length, me = o.value === 11 ? 0 : o.value + 1, fe = o.value === 11 ? l.value + 1 : l.value;
-      for (let v = 1; v <= w; v++) {
-        const x = new Date(fe, me, v);
-        e.push({ date: x, inMonth: !1, disabled: M(x) });
+      const _ = 42 - e.length, De = r.value === 11 ? 0 : r.value + 1, ke = r.value === 11 ? l.value + 1 : l.value;
+      for (let f = 1; f <= _; f++) {
+        const y = new Date(ke, De, f);
+        e.push({ date: y, inMonth: !1, disabled: T(y), key: z("days", y) });
       }
       return e;
     });
-    function O(e) {
-      e.disabled || (S(e.date), _.value = !1);
+    function W(e) {
+      e.disabled || (N(e.date), w.value = !1);
     }
-    function te(e) {
-      if (o.value = e, i.mode === "month") {
-        const t = i.fillDay === "last" ? N(l.value, e) : 1;
-        S(new Date(l.value, e, t)), _.value = !1;
+    function P(e) {
+      if (r.value = e, n.mode === "month") {
+        const t = n.fillDay === "last" ? j(l.value, e) : 1;
+        N(new Date(l.value, e, t)), w.value = !1;
       } else
         h.value = "days";
     }
-    function ae(e) {
-      l.value = e, h.value = (i.mode === "month", "months");
+    function U(e) {
+      l.value = e, h.value = (n.mode === "month", "months");
     }
-    function le() {
-      o.value === 0 ? (o.value = 11, l.value--) : o.value--;
+    function se() {
+      r.value === 0 ? (r.value = 11, l.value--) : r.value--;
     }
-    function ie() {
-      o.value === 11 ? (o.value = 0, l.value++) : o.value++;
+    function ue() {
+      r.value === 11 ? (r.value = 0, l.value++) : r.value++;
     }
-    const V = D(() => Math.floor(l.value / 12) * 12), ne = D(() => Array.from({ length: 12 }, (e, t) => V.value + t));
-    function oe() {
+    const Y = k(() => Math.floor(l.value / 12) * 12), de = k(() => Array.from({ length: 12 }, (e, t) => Y.value + t));
+    function ce() {
       l.value -= 12;
     }
-    function se() {
+    function ve() {
       l.value += 12;
     }
-    function re() {
+    const {
+      gridRef: V,
+      cellTabIndex: A,
+      onGridKeydown: S,
+      onFieldKeydown: me,
+      resetFocus: fe
+    } = Ye({
+      viewMode: h,
+      viewYear: l,
+      viewMonth: r,
+      selectDay: (e) => W({ date: e, disabled: T(e) }),
+      selectMonth: P,
+      selectYear: U,
+      open: () => {
+        w.value = !0;
+      },
+      isDisabled: () => n.disabled,
+      close: () => {
+        w.value = !1;
+      }
+    });
+    function ye() {
       h.value = "months";
     }
-    function H() {
+    function G() {
       h.value = "years";
     }
-    function ue(e) {
-      const t = String(e), a = j.value.split("");
-      let r = 0, p = "";
-      for (const w of a)
-        w === "#" || w === "A" ? p += r < t.length ? t[r++] : "" : p += w;
-      const b = ze(p, i.format);
-      b && !isNaN(b.getTime()) && !M(b) && (S(b), l.value = b.getFullYear(), o.value = b.getMonth());
+    function ge(e) {
+      const t = String(e), a = L.value.split("");
+      let o = 0, x = "";
+      for (const _ of a)
+        _ === "#" || _ === "A" ? x += o < t.length ? t[o++] : "" : x += _;
+      const D = Ne(x, n.format);
+      D && !isNaN(D.getTime()) && !T(D) && (N(D), l.value = D.getFullYear(), r.value = D.getMonth());
     }
-    function de(e) {
+    function be(e) {
       const t = {
         width: "2rem",
         height: "2rem",
@@ -127,82 +155,93 @@ const Ve = {
         fontSize: "0.8125rem",
         cursor: e.disabled ? "default" : "pointer",
         transition: "background 0.1s ease, color 0.1s ease"
-      }, a = n.value && Te(e.date, n.value), r = i.highlightToday && Ye(e.date);
-      return e.disabled ? (t.color = "var(--cui-text-tertiary)", t.opacity = "0.35") : a ? (t.background = "var(--cui-primary)", t.color = "var(--cui-primary-text, white)", t.fontWeight = "600") : r ? (t.background = "var(--cui-primary-bg)", t.color = "var(--cui-primary)", t.fontWeight = "600") : e.inMonth ? t.color = "var(--cui-text-body)" : t.color = "var(--cui-text-tertiary)", t;
+      }, a = i.value && We(e.date, i.value), o = n.highlightToday && Ae(e.date);
+      return e.disabled ? (t.color = "var(--cui-text-tertiary)", t.opacity = "0.35") : a ? (t.background = "var(--cui-primary)", t.color = "var(--cui-primary-text, white)", t.fontWeight = "600") : o ? (t.background = "var(--cui-primary-bg)", t.color = "var(--cui-primary)", t.fontWeight = "600") : e.inMonth ? t.color = "var(--cui-text-body)" : t.color = "var(--cui-text-tertiary)", t;
     }
-    const R = L("rootEl"), F = L("maskedInput");
-    function ce(e) {
+    const E = Q("rootEl"), F = Q("maskedInput");
+    function pe(e) {
       var t;
-      F.value ? F.value.focus() : (t = R.value) == null || t.focus(e);
+      F.value ? F.value.focus({ preventScroll: !0 }) : (t = E.value) == null || t.focus(e);
     }
-    function ve() {
+    function he() {
       var e;
       (e = F.value) == null || e.blur();
     }
-    return q({ el: R, focus: ce, blur: ve }), P(_, (e) => {
-      e && (h.value = i.mode === "month" ? "months" : "days", n.value && (l.value = n.value.getFullYear(), o.value = n.value.getMonth()));
-    }), (e, t) => he((u(), d("div", {
+    ee({ el: E, focus: pe, blur: he });
+    function xe() {
+      var a, o;
+      const e = document.activeElement;
+      (e === document.body || e && ((a = V.value) != null && a.contains(e))) && ((o = F.value) == null || o.focus({ preventScroll: !0 }));
+    }
+    return J(w, (e) => {
+      if (!e) {
+        xe();
+        return;
+      }
+      h.value = n.mode === "month" ? "months" : "days", i.value && (l.value = i.value.getFullYear(), r.value = i.value.getMonth()), fe(i.value ? new Date(i.value) : /* @__PURE__ */ new Date());
+    }), (e, t) => Me((c(), v("div", {
+      class: "cui-date-picker",
       ref_key: "rootEl",
-      ref: R
+      ref: E
     }, [
-      g.label ? (u(), d("label", Ve, m(g.label), 1)) : I("", !0),
-      s(xe, {
-        visible: _.value,
-        "onUpdate:visible": t[3] || (t[3] = (a) => _.value = a),
+      d.label ? (c(), v("label", Ke, g(d.label), 1)) : K("", !0),
+      s(Se, {
+        visible: w.value,
+        "onUpdate:visible": t[6] || (t[6] = (a) => w.value = a),
         placement: "bottom",
         closable: !1,
         "no-arrow": "",
         width: "auto",
-        disabled: g.disabled
+        disabled: d.disabled
       }, {
-        content: c(() => [
-          f("div", Re, [
-            h.value === "days" ? (u(), d(k, { key: 0 }, [
-              f("div", Fe, [
-                s(y, {
+        content: m(() => [
+          b("div", $e, [
+            h.value === "days" ? (c(), v(C, { key: 0 }, [
+              b("div", Oe, [
+                s(p, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: le
+                  onClick: se
                 }, {
-                  default: c(() => [
-                    s(C, {
+                  default: m(() => [
+                    s(M, {
                       name: "caret-left",
                       size: "0.875rem"
                     })
                   ]),
                   _: 1
                 }),
-                f("div", Ie, [
-                  s(y, {
+                b("div", je, [
+                  s(p, {
                     variant: "ghost",
                     size: "xs",
                     style: { fontWeight: "600" },
-                    onClick: re
+                    onClick: ye
                   }, {
-                    default: c(() => [
-                      T(m(B(U)[o.value]), 1)
+                    default: m(() => [
+                      I(g(u(X)[r.value]), 1)
                     ]),
                     _: 1
                   }),
-                  s(y, {
+                  s(p, {
                     variant: "ghost",
                     size: "xs",
                     style: { fontWeight: "600" },
-                    onClick: H
+                    onClick: G
                   }, {
-                    default: c(() => [
-                      T(m(l.value), 1)
+                    default: m(() => [
+                      I(g(l.value), 1)
                     ]),
                     _: 1
                   })
                 ]),
-                s(y, {
+                s(p, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: ie
+                  onClick: ue
                 }, {
-                  default: c(() => [
-                    s(C, {
+                  default: m(() => [
+                    s(M, {
                       name: "caret-right",
                       size: "0.875rem"
                     })
@@ -210,8 +249,8 @@ const Ve = {
                   _: 1
                 })
               ]),
-              f("div", Be, [
-                (u(!0), d(k, null, Y(B(Me), (a) => (u(), d("div", {
+              b("div", He, [
+                (c(!0), v(C, null, B(u(Ie), (a) => (c(), v("div", {
                   key: a,
                   style: {
                     textAlign: "center",
@@ -221,61 +260,75 @@ const Ve = {
                     padding: "calc(0.25rem * var(--cui-density-scale, 1)) 0",
                     textTransform: "uppercase"
                   }
-                }, m(a), 1))), 128))
+                }, g(a), 1))), 128))
               ]),
-              f("div", We, [
-                (u(!0), d(k, null, Y(ee.value, (a, r) => (u(), d("div", {
-                  key: r,
-                  style: W(de(a)),
+              b("div", {
+                ref_key: "gridRef",
+                ref: V,
+                role: "grid",
+                "aria-label": u(Z)[r.value] + " " + l.value,
+                style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "calc(2px * var(--cui-density-scale, 1))" },
+                onKeydown: t[0] || (t[0] = //@ts-ignore
+                (...a) => u(S) && u(S)(...a))
+              }, [
+                (c(!0), v(C, null, B(oe.value, (a, o) => (c(), v("div", {
+                  key: o,
+                  role: "gridcell",
+                  "data-cui-cell": a.key,
+                  tabindex: u(A)(a.key),
+                  "aria-selected": i.value ? a.date.toDateString() === i.value.toDateString() : !1,
+                  "aria-disabled": a.disabled || void 0,
+                  "aria-label": a.date.toDateString(),
+                  style: $(be(a)),
                   "data-disabled": a.disabled,
-                  onClick: (p) => O(a)
-                }, m(a.date.getDate()), 13, Ae))), 128))
-              ]),
-              g.highlightToday ? (u(), d("div", Ne, [
-                s(y, {
+                  onClick: (x) => W(a)
+                }, g(a.date.getDate()), 13, Le))), 128))
+              ], 40, qe),
+              d.highlightToday ? (c(), v("div", Pe, [
+                s(p, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: t[0] || (t[0] = (a) => O({ date: /* @__PURE__ */ new Date(), disabled: M(/* @__PURE__ */ new Date()) }))
+                  onClick: t[1] || (t[1] = (a) => W({ date: /* @__PURE__ */ new Date(), disabled: T(/* @__PURE__ */ new Date()) }))
                 }, {
-                  default: c(() => [...t[4] || (t[4] = [
-                    T(" Today ", -1)
+                  default: m(() => [...t[7] || (t[7] = [
+                    I(" Today ", -1)
                   ])]),
                   _: 1
                 })
-              ])) : I("", !0)
-            ], 64)) : h.value === "months" ? (u(), d(k, { key: 1 }, [
-              f("div", $e, [
-                s(y, {
+              ])) : K("", !0)
+            ], 64)) : h.value === "months" ? (c(), v(C, { key: 1 }, [
+              b("div", Ue, [
+                s(p, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: t[1] || (t[1] = (a) => l.value--)
+                  onClick: t[2] || (t[2] = (a) => l.value--)
                 }, {
-                  default: c(() => [
-                    s(C, {
+                  default: m(() => [
+                    s(M, {
                       name: "caret-left",
                       size: "0.875rem"
                     })
                   ]),
                   _: 1
                 }),
-                s(y, {
+                s(p, {
                   variant: "ghost",
                   size: "xs",
                   style: { fontWeight: "600" },
-                  onClick: H
+                  onClick: G
                 }, {
-                  default: c(() => [
-                    T(m(l.value), 1)
+                  default: m(() => [
+                    I(g(l.value), 1)
                   ]),
                   _: 1
                 }),
-                s(y, {
+                s(p, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: t[2] || (t[2] = (a) => l.value++)
+                  onClick: t[3] || (t[3] = (a) => l.value++)
                 }, {
-                  default: c(() => [
-                    s(C, {
+                  default: m(() => [
+                    s(M, {
                       name: "caret-right",
                       size: "0.875rem"
                     })
@@ -283,46 +336,58 @@ const Ve = {
                   _: 1
                 })
               ]),
-              f("div", Ee, [
-                (u(!0), d(k, null, Y(B(U), (a, r) => (u(), d("div", {
-                  key: r,
-                  style: W({
+              b("div", {
+                ref_key: "gridRef",
+                ref: V,
+                role: "grid",
+                "aria-label": String(l.value),
+                style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" },
+                onKeydown: t[4] || (t[4] = //@ts-ignore
+                (...a) => u(S) && u(S)(...a))
+              }, [
+                (c(!0), v(C, null, B(u(X), (a, o) => (c(), v("div", {
+                  key: o,
+                  role: "gridcell",
+                  "data-cui-cell": u(z)("months", o),
+                  tabindex: u(A)(u(z)("months", o)),
+                  "aria-label": u(Z)[o] + " " + l.value,
+                  style: $({
                     padding: "calc(0.5rem * var(--cui-density-scale, 1))",
                     textAlign: "center",
                     borderRadius: "0.375rem",
                     cursor: "pointer",
                     fontSize: "0.8125rem",
-                    fontWeight: n.value && n.value.getMonth() === r && n.value.getFullYear() === l.value ? "600" : "400",
-                    background: n.value && n.value.getMonth() === r && n.value.getFullYear() === l.value ? "var(--cui-primary)" : "transparent",
-                    color: n.value && n.value.getMonth() === r && n.value.getFullYear() === l.value ? "var(--cui-primary-text, white)" : o.value === r ? "var(--cui-primary)" : "var(--cui-text-body)",
+                    fontWeight: i.value && i.value.getMonth() === o && i.value.getFullYear() === l.value ? "600" : "400",
+                    background: i.value && i.value.getMonth() === o && i.value.getFullYear() === l.value ? "var(--cui-primary)" : "transparent",
+                    color: i.value && i.value.getMonth() === o && i.value.getFullYear() === l.value ? "var(--cui-primary-text, white)" : r.value === o ? "var(--cui-primary)" : "var(--cui-text-body)",
                     transition: "background 0.1s ease"
                   }),
-                  onClick: (p) => te(r)
-                }, m(a), 13, je))), 128))
-              ])
-            ], 64)) : h.value === "years" ? (u(), d(k, { key: 2 }, [
-              f("div", Oe, [
-                s(y, {
+                  onClick: (x) => P(o)
+                }, g(a), 13, Je))), 128))
+              ], 40, Ge)
+            ], 64)) : h.value === "years" ? (c(), v(C, { key: 2 }, [
+              b("div", Qe, [
+                s(p, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: oe
+                  onClick: ce
                 }, {
-                  default: c(() => [
-                    s(C, {
+                  default: m(() => [
+                    s(M, {
                       name: "caret-left",
                       size: "0.875rem"
                     })
                   ]),
                   _: 1
                 }),
-                f("span", He, m(V.value) + " – " + m(V.value + 11), 1),
-                s(y, {
+                b("span", Xe, g(Y.value) + " – " + g(Y.value + 11), 1),
+                s(p, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: se
+                  onClick: ve
                 }, {
-                  default: c(() => [
-                    s(C, {
+                  default: m(() => [
+                    s(M, {
                       name: "caret-right",
                       size: "0.875rem"
                     })
@@ -330,53 +395,72 @@ const Ve = {
                   _: 1
                 })
               ]),
-              f("div", Pe, [
-                (u(!0), d(k, null, Y(ne.value, (a) => (u(), d("div", {
+              b("div", {
+                ref_key: "gridRef",
+                ref: V,
+                role: "grid",
+                "aria-label": Y.value + " to " + (Y.value + 11),
+                style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" },
+                onKeydown: t[5] || (t[5] = //@ts-ignore
+                (...a) => u(S) && u(S)(...a))
+              }, [
+                (c(!0), v(C, null, B(de.value, (a) => (c(), v("div", {
                   key: a,
-                  style: W({
+                  role: "gridcell",
+                  "data-cui-cell": u(z)("years", a),
+                  tabindex: u(A)(u(z)("years", a)),
+                  "aria-label": String(a),
+                  style: $({
                     padding: "calc(0.5rem * var(--cui-density-scale, 1))",
                     textAlign: "center",
                     borderRadius: "0.375rem",
                     cursor: "pointer",
                     fontSize: "0.8125rem",
                     fontWeight: l.value === a ? "600" : "400",
-                    background: n.value && n.value.getFullYear() === a ? "var(--cui-primary)" : "transparent",
-                    color: n.value && n.value.getFullYear() === a ? "var(--cui-primary-text, white)" : l.value === a ? "var(--cui-primary)" : "var(--cui-text-body)",
+                    background: i.value && i.value.getFullYear() === a ? "var(--cui-primary)" : "transparent",
+                    color: i.value && i.value.getFullYear() === a ? "var(--cui-primary-text, white)" : l.value === a ? "var(--cui-primary)" : "var(--cui-text-body)",
                     transition: "background 0.1s ease"
                   }),
-                  onClick: (r) => ae(a)
-                }, m(a), 13, Le))), 128))
-              ])
-            ], 64)) : I("", !0)
+                  onClick: (o) => U(a)
+                }, g(a), 13, ea))), 128))
+              ], 40, Ze)
+            ], 64)) : K("", !0)
           ])
         ]),
-        default: c(() => [
-          s(be, {
+        default: m(() => [
+          s(Te, {
             ref: "maskedInput",
-            "model-value": Q.value,
-            mask: j.value,
-            placeholder: K.value,
-            size: g.size,
-            disabled: g.disabled,
-            "onUpdate:modelValue": ue
+            onKeydown: u(me),
+            id: d.id,
+            name: d.name,
+            autocomplete: d.autocomplete,
+            "aria-describedby": d.ariaDescribedby,
+            "aria-required": d.ariaRequired || void 0,
+            "aria-labelledby": d.ariaLabelledby,
+            "model-value": ie.value,
+            mask: L.value,
+            placeholder: le.value,
+            size: d.size,
+            disabled: d.disabled,
+            "onUpdate:modelValue": ge
           }, {
-            suffix: c(() => [
-              s(C, {
+            suffix: m(() => [
+              s(M, {
                 name: "calendar-blank",
                 size: "0.875rem",
                 style: { color: "var(--cui-text-tertiary)" }
               })
             ]),
             _: 1
-          }, 8, ["model-value", "mask", "placeholder", "size", "disabled"])
+          }, 8, ["onKeydown", "id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "model-value", "mask", "placeholder", "size", "disabled"])
         ]),
         _: 1
       }, 8, ["visible", "disabled"])
     ], 512)), [
-      [pe, !g.hidden]
+      [ze, !d.hidden]
     ]);
   }
 });
 export {
-  Xe as default
+  sa as default
 };