@itguy614/clean-ui 1.2.2 → 1.3.0

package/dist/components/CuiDateRangePicker.vue.js

@@ -1,9 +1,10 @@
-import { defineComponent as fe, ref as C, watch as j, onMounted as ye, computed as p, withDirectives as ge, openBlock as c, createElementBlock as d, toDisplayString as v, createCommentVNode as E, createVNode as o, withCtx as f, createElementVNode as u, normalizeStyle as M, Fragment as z, createTextVNode as Y, unref as W, renderList as T, vShow as pe } from "vue";
-import he from "./CuiPopover.vue.js";
-import x from "./CuiButton.vue.js";
-import S from "./CuiIcon.vue.js";
-import { formatToMask as be, formatToRaw as O, formatDate as B, isoToDate as I, daysInMonth as P, firstDayOfMonth as xe, MONTH_NAMES_SHORT as F, DAY_NAMES_SHORT as De, isDateDisabled as ke, isToday as Ce, isSameDay as H, dateToIso as ze } from "../utils/date.js";
-const Se = {
+import { defineComponent as Ce, ref as C, useTemplateRef as Se, watch as E, onMounted as ze, computed as x, withDirectives as Me, openBlock as v, createElementBlock as m, toDisplayString as f, createCommentVNode as G, createVNode as u, withCtx as b, createElementVNode as c, normalizeStyle as $, unref as s, Fragment as z, createTextVNode as F, renderList as W, vShow as Re } from "vue";
+import Te from "./CuiPopover.vue.js";
+import w from "./CuiButton.vue.js";
+import M from "./CuiIcon.vue.js";
+import { calendarCellKey as R, useCalendarKeyboard as Be } from "../composables/useCalendarKeyboard.js";
+import { formatToMask as $e, formatToRaw as U, formatDate as _, isoToDate as K, daysInMonth as J, firstDayOfMonth as Ie, MONTH_NAMES_SHORT as Q, DAY_NAMES_SHORT as Ve, MONTH_NAMES as X, isDateDisabled as Ye, isToday as We, isSameDay as Z, dateToIso as _e } from "../utils/date.js";
+const Ae = { class: "cui-date-range-picker" }, Ne = {
   key: 0,
   style: {
     display: "block",
@@ -12,13 +13,13 @@ const Se = {
     fontWeight: "500",
     color: "var(--cui-text-secondary)"
   }
-}, we = ["value", "placeholder"], Me = { style: { color: "var(--cui-text-tertiary)", fontSize: "0.75rem", flexShrink: "0" } }, _e = ["value", "placeholder"], Re = { style: { padding: "calc(0.25rem * var(--cui-density-scale, 1))", minWidth: "260px" } }, Te = { style: {
+}, Ee = ["id", "name", "autocomplete", "aria-describedby", "aria-required", "aria-labelledby", "value", "placeholder"], Fe = { style: { color: "var(--cui-text-tertiary)", fontSize: "0.75rem", flexShrink: "0" } }, Ke = ["value", "placeholder"], Oe = { style: { padding: "calc(0.25rem * var(--cui-density-scale, 1))", minWidth: "260px" } }, je = { style: {
   fontSize: "0.75rem",
   color: "var(--cui-text-secondary)",
   textAlign: "center",
   marginBottom: "calc(0.375rem * var(--cui-density-scale, 1))",
   fontWeight: "500"
-} }, Be = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, $e = { style: { display: "flex", gap: "calc(0.25rem * var(--cui-density-scale, 1))" } }, Ve = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))" } }, Ye = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "calc(1px * var(--cui-density-scale, 1))" } }, We = ["onClick", "onMouseenter"], Ie = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ae = { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" } }, Ne = ["onClick"], je = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ee = { style: { fontSize: "0.8125rem", fontWeight: "600", color: "var(--cui-text-body)" } }, Oe = { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" } }, Pe = ["onClick"], Ge = /* @__PURE__ */ fe({
+} }, Pe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, He = { style: { display: "flex", gap: "calc(0.25rem * var(--cui-density-scale, 1))" } }, Le = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))" } }, qe = ["aria-label"], Ge = ["data-cui-cell", "tabindex", "aria-disabled", "aria-label", "onClick", "onMouseenter"], Ue = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Je = ["aria-label"], Qe = ["data-cui-cell", "tabindex", "aria-label", "onClick"], Xe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ze = { style: { fontSize: "0.8125rem", fontWeight: "600", color: "var(--cui-text-body)" } }, et = ["aria-label"], tt = ["data-cui-cell", "tabindex", "aria-label", "onClick"], st = /* @__PURE__ */ Ce({
   __name: "CuiDateRangePicker",
   props: {
     modelValue: {},
@@ -35,102 +36,138 @@ const Se = {
     endPlaceholder: {},
     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(y, { emit: L }) {
-    const l = y, U = L, r = C((/* @__PURE__ */ new Date()).getFullYear()), i = C((/* @__PURE__ */ new Date()).getMonth()), _ = C(!1), D = C("start"), n = C(null), g = C(null), w = C(null);
-    function A(t) {
-      return t ? t instanceof Date ? t : I(t) : null;
+  setup(d, { emit: ee }) {
+    const n = d, te = ee, l = C((/* @__PURE__ */ new Date()).getFullYear()), i = C((/* @__PURE__ */ new Date()).getMonth()), T = C(!1), D = C("start"), ae = Se("startInput"), r = C(null), p = C(null), S = C(null);
+    function O(a) {
+      return a ? a instanceof Date ? a : K(a) : null;
     }
-    function N() {
-      l.modelValue && (n.value = A(l.modelValue.start), g.value = A(l.modelValue.end), n.value && (r.value = n.value.getFullYear(), i.value = n.value.getMonth()));
+    function j() {
+      n.modelValue && (r.value = O(n.modelValue.start), p.value = O(n.modelValue.end), r.value && (l.value = r.value.getFullYear(), i.value = r.value.getMonth()));
     }
-    j(() => l.modelValue, N, { deep: !0 }), ye(N), p(() => be(l.format)), p(() => n.value ? O(B(n.value, l.format)) : ""), p(() => g.value ? O(B(g.value, l.format)) : "");
-    const q = p(() => n.value ? B(n.value, l.format) : ""), G = p(() => g.value ? B(g.value, l.format) : ""), J = p(() => l.minDate ? I(l.minDate) : null), K = p(() => l.maxDate ? I(l.maxDate) : null);
-    function R(t) {
-      return ke(t, {
-        minDate: J.value,
-        maxDate: K.value,
-        disabledDate: l.disabledDate,
-        disabledDates: l.disabledDates
+    E(() => n.modelValue, j, { deep: !0 }), ze(j), x(() => $e(n.format)), x(() => r.value ? U(_(r.value, n.format)) : ""), x(() => p.value ? U(_(p.value, n.format)) : "");
+    const le = x(() => r.value ? _(r.value, n.format) : ""), re = x(() => p.value ? _(p.value, n.format) : ""), ne = x(() => n.minDate ? K(n.minDate) : null), ie = x(() => n.maxDate ? K(n.maxDate) : null);
+    function I(a) {
+      return Ye(a, {
+        minDate: ne.value,
+        maxDate: ie.value,
+        disabledDate: n.disabledDate,
+        disabledDates: n.disabledDates
       });
     }
-    function Q(t, e) {
-      if (!l.blockSpanningBlackout) return !1;
-      const a = new Date(t);
-      for (; a <= e; ) {
-        if (R(a)) return !0;
-        a.setDate(a.getDate() + 1);
+    function oe(a, e) {
+      if (!n.blockSpanningBlackout) return !1;
+      const t = new Date(a);
+      for (; t <= e; ) {
+        if (I(t)) return !0;
+        t.setDate(t.getDate() + 1);
       }
       return !1;
     }
-    function X() {
-      const t = (e) => e ? l.valueType === "date" ? e : ze(e) : null;
-      U("update:modelValue", { start: t(n.value), end: t(g.value) });
+    function se() {
+      const a = (e) => e ? n.valueType === "date" ? e : _e(e) : null;
+      te("update:modelValue", { start: a(r.value), end: a(p.value) });
     }
-    const Z = p(() => {
-      const t = [], e = P(r.value, i.value), a = xe(r.value, i.value), s = i.value === 0 ? 11 : i.value - 1, b = i.value === 0 ? r.value - 1 : r.value, V = P(b, s);
-      for (let m = a - 1; m >= 0; m--) {
-        const k = new Date(b, s, V - m);
-        t.push({ date: k, inMonth: !1, disabled: R(k) });
+    const ue = x(() => {
+      const a = [], e = J(l.value, i.value), t = Ie(l.value, i.value), o = i.value === 0 ? 11 : i.value - 1, k = i.value === 0 ? l.value - 1 : l.value, N = J(k, o);
+      for (let y = t - 1; y >= 0; y--) {
+        const g = new Date(k, o, N - y);
+        a.push({ date: g, inMonth: !1, disabled: I(g), key: R("days", g) });
       }
-      for (let m = 1; m <= e; m++) {
-        const k = new Date(r.value, i.value, m);
-        t.push({ date: k, inMonth: !0, disabled: R(k) });
+      for (let y = 1; y <= e; y++) {
+        const g = new Date(l.value, i.value, y);
+        a.push({ date: g, inMonth: !0, disabled: I(g), key: R("days", g) });
       }
-      const de = 42 - t.length, ve = i.value === 11 ? 0 : i.value + 1, me = i.value === 11 ? r.value + 1 : r.value;
-      for (let m = 1; m <= de; m++) {
-        const k = new Date(me, ve, m);
-        t.push({ date: k, inMonth: !1, disabled: R(k) });
+      const De = 42 - a.length, ke = i.value === 11 ? 0 : i.value + 1, we = i.value === 11 ? l.value + 1 : l.value;
+      for (let y = 1; y <= De; y++) {
+        const g = new Date(we, ke, y);
+        a.push({ date: g, inMonth: !1, disabled: I(g), key: R("days", g) });
       }
-      return t;
+      return a;
     });
-    function ee(t) {
-      if (!t.disabled)
+    function P(a) {
+      if (!a.disabled)
         if (D.value === "start")
-          n.value = t.date, g.value = null, D.value = "end";
+          r.value = a.date, p.value = null, D.value = "end";
         else {
-          let e = n.value, a = t.date;
-          if (a < e && ([e, a] = [a, e]), Q(e, a)) return;
-          n.value = e, g.value = a, D.value = "start", X(), _.value = !1;
+          let e = r.value, t = a.date;
+          if (t < e && ([e, t] = [t, e]), oe(e, t)) return;
+          r.value = e, p.value = t, D.value = "start", se(), T.value = !1;
         }
     }
-    function te(t) {
-      D.value === "end" && (w.value = t);
+    function de(a) {
+      D.value === "end" && (S.value = a);
     }
-    function ae(t) {
-      if (!n.value) return !1;
-      const e = D.value === "end" && w.value ? w.value : g.value;
+    function ce(a) {
+      if (!r.value) return !1;
+      const e = D.value === "end" && S.value ? S.value : p.value;
       if (!e) return !1;
-      const a = n.value < e ? n.value : e, s = n.value < e ? e : n.value;
-      return t >= a && t <= s;
+      const t = r.value < e ? r.value : e, o = r.value < e ? e : r.value;
+      return a >= t && a <= o;
     }
-    function le(t) {
-      return !!n.value && H(t, n.value);
+    function ve(a) {
+      return !!r.value && Z(a, r.value);
     }
-    function ne(t) {
-      const e = D.value === "end" && w.value ? w.value : g.value;
-      return !!e && H(t, e);
+    function me(a) {
+      const e = D.value === "end" && S.value ? S.value : p.value;
+      return !!e && Z(a, e);
     }
-    function re() {
-      i.value === 0 ? (i.value = 11, r.value--) : i.value--;
+    function fe() {
+      i.value === 0 ? (i.value = 11, l.value--) : i.value--;
     }
-    function ie() {
-      i.value === 11 ? (i.value = 0, r.value++) : i.value++;
+    function ye() {
+      i.value === 11 ? (i.value = 0, l.value++) : i.value++;
     }
-    const h = C("days"), $ = p(() => Math.floor(r.value / 12) * 12), oe = p(() => Array.from({ length: 12 }, (t, e) => $.value + e));
-    function se(t) {
-      i.value = t, h.value = "days";
+    const h = C("days"), V = x(() => Math.floor(l.value / 12) * 12), ge = x(() => Array.from({ length: 12 }, (a, e) => V.value + e));
+    function H(a) {
+      i.value = a, h.value = "days";
     }
-    function ue(t) {
-      r.value = t, h.value = "months";
+    function L(a) {
+      l.value = a, h.value = "months";
     }
-    j(_, (t) => {
-      t && (h.value = "days", D.value = "start", w.value = null, n.value && (r.value = n.value.getFullYear(), i.value = n.value.getMonth()));
+    const {
+      gridRef: Y,
+      focusedDate: be,
+      cellTabIndex: A,
+      onGridKeydown: B,
+      onFieldKeydown: q,
+      resetFocus: pe
+    } = Be({
+      viewMode: h,
+      viewYear: l,
+      viewMonth: i,
+      selectDay: (a) => P({ date: a, disabled: I(a) }),
+      selectMonth: H,
+      selectYear: L,
+      open: () => {
+        T.value = !0;
+      },
+      isDisabled: () => n.disabled,
+      close: () => {
+        T.value = !1;
+      }
+    });
+    E(be, (a) => {
+      D.value === "end" && (S.value = a);
+    });
+    function he() {
+      var t, o;
+      const a = document.activeElement;
+      (a === document.body || a && ((t = Y.value) != null && t.contains(a))) && ((o = ae.value) == null || o.focus({ preventScroll: !0 }));
+    }
+    E(T, (a) => {
+      a ? (h.value = "days", D.value = "start", S.value = null, r.value && (l.value = r.value.getFullYear(), i.value = r.value.getMonth()), pe(r.value ? new Date(r.value) : /* @__PURE__ */ new Date())) : he();
     });
-    function ce(t) {
+    function xe(a) {
       const e = {
         width: "2rem",
         height: "2rem",
@@ -138,72 +175,72 @@ const Se = {
         alignItems: "center",
         justifyContent: "center",
         fontSize: "0.8125rem",
-        cursor: t.disabled ? "default" : "pointer",
+        cursor: a.disabled ? "default" : "pointer",
         transition: "background 0.1s ease, color 0.1s ease",
         position: "relative"
-      }, a = ae(t.date), s = le(t.date), b = ne(t.date), V = l.highlightToday && Ce(t.date);
-      return t.disabled ? (e.color = "var(--cui-text-tertiary)", e.opacity = "0.35") : s || b ? (e.background = "var(--cui-primary)", e.color = "var(--cui-primary-text, white)", e.fontWeight = "600", e.borderRadius = s && !b ? "0.375rem 0 0 0.375rem" : !s && b ? "0 0.375rem 0.375rem 0" : "0.375rem") : a ? (e.background = "var(--cui-primary-bg)", e.color = "var(--cui-primary)", e.borderRadius = "0") : V ? (e.background = "var(--cui-primary-bg)", e.color = "var(--cui-primary)", e.fontWeight = "600", e.borderRadius = "0.375rem") : t.inMonth ? (e.color = "var(--cui-text-body)", e.borderRadius = "0.375rem") : (e.color = "var(--cui-text-tertiary)", e.borderRadius = "0.375rem"), e;
+      }, t = ce(a.date), o = ve(a.date), k = me(a.date), N = n.highlightToday && We(a.date);
+      return a.disabled ? (e.color = "var(--cui-text-tertiary)", e.opacity = "0.35") : o || k ? (e.background = "var(--cui-primary)", e.color = "var(--cui-primary-text, white)", e.fontWeight = "600", e.borderRadius = o && !k ? "0.375rem 0 0 0.375rem" : !o && k ? "0 0.375rem 0.375rem 0" : "0.375rem") : t ? (e.background = "var(--cui-primary-bg)", e.color = "var(--cui-primary)", e.borderRadius = "0") : N ? (e.background = "var(--cui-primary-bg)", e.color = "var(--cui-primary)", e.fontWeight = "600", e.borderRadius = "0.375rem") : a.inMonth ? (e.color = "var(--cui-text-body)", e.borderRadius = "0.375rem") : (e.color = "var(--cui-text-tertiary)", e.borderRadius = "0.375rem"), e;
     }
-    return (t, e) => ge((c(), d("div", null, [
-      y.label ? (c(), d("label", Se, v(y.label), 1)) : E("", !0),
-      o(he, {
-        visible: _.value,
-        "onUpdate:visible": e[7] || (e[7] = (a) => _.value = a),
+    return (a, e) => Me((v(), m("div", Ae, [
+      d.label ? (v(), m("label", Ne, f(d.label), 1)) : G("", !0),
+      u(Te, {
+        visible: T.value,
+        "onUpdate:visible": e[11] || (e[11] = (t) => T.value = t),
         placement: "bottom",
         closable: !1,
         "no-arrow": "",
         width: "auto",
-        disabled: y.disabled
+        disabled: d.disabled
       }, {
-        content: f(() => [
-          u("div", Re, [
-            u("div", Te, v(D.value === "start" ? "Select start date" : "Select end date"), 1),
-            h.value === "days" ? (c(), d(z, { key: 0 }, [
-              u("div", Be, [
-                o(x, {
+        content: b(() => [
+          c("div", Oe, [
+            c("div", je, f(D.value === "start" ? "Select start date" : "Select end date"), 1),
+            h.value === "days" ? (v(), m(z, { key: 0 }, [
+              c("div", Pe, [
+                u(w, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: re
+                  onClick: fe
                 }, {
-                  default: f(() => [
-                    o(S, {
+                  default: b(() => [
+                    u(M, {
                       name: "caret-left",
                       size: "0.875rem"
                     })
                   ]),
                   _: 1
                 }),
-                u("div", $e, [
-                  o(x, {
+                c("div", He, [
+                  u(w, {
                     variant: "ghost",
                     size: "xs",
                     style: { fontWeight: "600" },
-                    onClick: e[0] || (e[0] = (a) => h.value = "months")
+                    onClick: e[1] || (e[1] = (t) => h.value = "months")
                   }, {
-                    default: f(() => [
-                      Y(v(W(F)[i.value]), 1)
+                    default: b(() => [
+                      F(f(s(Q)[i.value]), 1)
                     ]),
                     _: 1
                   }),
-                  o(x, {
+                  u(w, {
                     variant: "ghost",
                     size: "xs",
                     style: { fontWeight: "600" },
-                    onClick: e[1] || (e[1] = (a) => h.value = "years")
+                    onClick: e[2] || (e[2] = (t) => h.value = "years")
                   }, {
-                    default: f(() => [
-                      Y(v(r.value), 1)
+                    default: b(() => [
+                      F(f(l.value), 1)
                     ]),
                     _: 1
                   })
                 ]),
-                o(x, {
+                u(w, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: ie
+                  onClick: ye
                 }, {
-                  default: f(() => [
-                    o(S, {
+                  default: b(() => [
+                    u(M, {
                       name: "caret-right",
                       size: "0.875rem"
                     })
@@ -211,53 +248,66 @@ const Se = {
                   _: 1
                 })
               ]),
-              u("div", Ve, [
-                (c(!0), d(z, null, T(W(De), (a) => (c(), d("div", {
-                  key: a,
+              c("div", Le, [
+                (v(!0), m(z, null, W(s(Ve), (t) => (v(), m("div", {
+                  key: t,
                   style: { textAlign: "center", fontSize: "0.6875rem", fontWeight: "600", color: "var(--cui-text-tertiary)", padding: "calc(0.25rem * var(--cui-density-scale, 1)) 0", textTransform: "uppercase" }
-                }, v(a), 1))), 128))
+                }, f(t), 1))), 128))
               ]),
-              u("div", Ye, [
-                (c(!0), d(z, null, T(Z.value, (a, s) => (c(), d("div", {
-                  key: s,
-                  style: M(ce(a)),
-                  onClick: (b) => ee(a),
-                  onMouseenter: (b) => te(a.date)
-                }, v(a.date.getDate()), 45, We))), 128))
-              ])
-            ], 64)) : h.value === "months" ? (c(), d(z, { key: 1 }, [
-              u("div", Ie, [
-                o(x, {
+              c("div", {
+                ref_key: "gridRef",
+                ref: Y,
+                role: "grid",
+                "aria-label": s(X)[i.value] + " " + l.value,
+                style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "calc(1px * var(--cui-density-scale, 1))" },
+                onKeydown: e[3] || (e[3] = //@ts-ignore
+                (...t) => s(B) && s(B)(...t))
+              }, [
+                (v(!0), m(z, null, W(ue.value, (t, o) => (v(), m("div", {
+                  key: o,
+                  role: "gridcell",
+                  "data-cui-cell": t.key,
+                  tabindex: s(A)(t.key),
+                  "aria-disabled": t.disabled || void 0,
+                  "aria-label": t.date.toDateString(),
+                  style: $(xe(t)),
+                  onClick: (k) => P(t),
+                  onMouseenter: (k) => de(t.date)
+                }, f(t.date.getDate()), 45, Ge))), 128))
+              ], 40, qe)
+            ], 64)) : h.value === "months" ? (v(), m(z, { key: 1 }, [
+              c("div", Ue, [
+                u(w, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: e[2] || (e[2] = (a) => r.value--)
+                  onClick: e[4] || (e[4] = (t) => l.value--)
                 }, {
-                  default: f(() => [
-                    o(S, {
+                  default: b(() => [
+                    u(M, {
                       name: "caret-left",
                       size: "0.875rem"
                     })
                   ]),
                   _: 1
                 }),
-                o(x, {
+                u(w, {
                   variant: "ghost",
                   size: "xs",
                   style: { fontWeight: "600" },
-                  onClick: e[3] || (e[3] = (a) => h.value = "years")
+                  onClick: e[5] || (e[5] = (t) => h.value = "years")
                 }, {
-                  default: f(() => [
-                    Y(v(r.value), 1)
+                  default: b(() => [
+                    F(f(l.value), 1)
                   ]),
                   _: 1
                 }),
-                o(x, {
+                u(w, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: e[4] || (e[4] = (a) => r.value++)
+                  onClick: e[6] || (e[6] = (t) => l.value++)
                 }, {
-                  default: f(() => [
-                    o(S, {
+                  default: b(() => [
+                    u(M, {
                       name: "caret-right",
                       size: "0.875rem"
                     })
@@ -265,36 +315,48 @@ const Se = {
                   _: 1
                 })
               ]),
-              u("div", Ae, [
-                (c(!0), d(z, null, T(W(F), (a, s) => (c(), d("div", {
-                  key: s,
-                  style: M({ padding: "calc(0.5rem * var(--cui-density-scale, 1))", textAlign: "center", borderRadius: "0.375rem", cursor: "pointer", fontSize: "0.8125rem", color: i.value === s ? "var(--cui-primary)" : "var(--cui-text-body)" }),
-                  onClick: (b) => se(s)
-                }, v(a), 13, Ne))), 128))
-              ])
-            ], 64)) : h.value === "years" ? (c(), d(z, { key: 2 }, [
-              u("div", je, [
-                o(x, {
+              c("div", {
+                ref_key: "gridRef",
+                ref: Y,
+                role: "grid",
+                "aria-label": String(l.value),
+                style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" },
+                onKeydown: e[7] || (e[7] = //@ts-ignore
+                (...t) => s(B) && s(B)(...t))
+              }, [
+                (v(!0), m(z, null, W(s(Q), (t, o) => (v(), m("div", {
+                  key: o,
+                  role: "gridcell",
+                  "data-cui-cell": s(R)("months", o),
+                  tabindex: s(A)(s(R)("months", o)),
+                  "aria-label": s(X)[o] + " " + l.value,
+                  style: $({ padding: "calc(0.5rem * var(--cui-density-scale, 1))", textAlign: "center", borderRadius: "0.375rem", cursor: "pointer", fontSize: "0.8125rem", color: i.value === o ? "var(--cui-primary)" : "var(--cui-text-body)" }),
+                  onClick: (k) => H(o)
+                }, f(t), 13, Qe))), 128))
+              ], 40, Je)
+            ], 64)) : h.value === "years" ? (v(), m(z, { key: 2 }, [
+              c("div", Xe, [
+                u(w, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: e[5] || (e[5] = (a) => r.value -= 12)
+                  onClick: e[8] || (e[8] = (t) => l.value -= 12)
                 }, {
-                  default: f(() => [
-                    o(S, {
+                  default: b(() => [
+                    u(M, {
                       name: "caret-left",
                       size: "0.875rem"
                     })
                   ]),
                   _: 1
                 }),
-                u("span", Ee, v($.value) + " – " + v($.value + 11), 1),
-                o(x, {
+                c("span", Ze, f(V.value) + " – " + f(V.value + 11), 1),
+                u(w, {
                   variant: "ghost",
                   size: "xs",
-                  onClick: e[6] || (e[6] = (a) => r.value += 12)
+                  onClick: e[9] || (e[9] = (t) => l.value += 12)
                 }, {
-                  default: f(() => [
-                    o(S, {
+                  default: b(() => [
+                    u(M, {
                       name: "caret-right",
                       size: "0.875rem"
                     })
@@ -302,75 +364,96 @@ const Se = {
                   _: 1
                 })
               ]),
-              u("div", Oe, [
-                (c(!0), d(z, null, T(oe.value, (a) => (c(), d("div", {
-                  key: a,
-                  style: M({ padding: "calc(0.5rem * var(--cui-density-scale, 1))", textAlign: "center", borderRadius: "0.375rem", cursor: "pointer", fontSize: "0.8125rem", fontWeight: r.value === a ? "600" : "400", color: r.value === a ? "var(--cui-primary)" : "var(--cui-text-body)" }),
-                  onClick: (s) => ue(a)
-                }, v(a), 13, Pe))), 128))
-              ])
-            ], 64)) : E("", !0)
+              c("div", {
+                ref_key: "gridRef",
+                ref: Y,
+                role: "grid",
+                "aria-label": V.value + " to " + (V.value + 11),
+                style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" },
+                onKeydown: e[10] || (e[10] = //@ts-ignore
+                (...t) => s(B) && s(B)(...t))
+              }, [
+                (v(!0), m(z, null, W(ge.value, (t) => (v(), m("div", {
+                  key: t,
+                  role: "gridcell",
+                  "data-cui-cell": s(R)("years", t),
+                  tabindex: s(A)(s(R)("years", t)),
+                  "aria-label": String(t),
+                  style: $({ padding: "calc(0.5rem * var(--cui-density-scale, 1))", textAlign: "center", borderRadius: "0.375rem", cursor: "pointer", fontSize: "0.8125rem", fontWeight: l.value === t ? "600" : "400", color: l.value === t ? "var(--cui-primary)" : "var(--cui-text-body)" }),
+                  onClick: (o) => L(t)
+                }, f(t), 13, tt))), 128))
+              ], 40, et)
+            ], 64)) : G("", !0)
           ])
         ]),
-        default: f(() => [
-          u("div", {
-            style: M({
+        default: b(() => [
+          c("div", {
+            style: $({
               display: "flex",
               alignItems: "center",
               gap: "calc(0.375rem * var(--cui-density-scale, 1))",
               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))",
               padding: "0 calc(0.5rem * var(--cui-density-scale, 1))",
               background: "var(--cui-surface-base, white)",
-              opacity: y.disabled ? "0.5" : "1",
-              cursor: y.disabled ? "default" : "pointer"
+              opacity: d.disabled ? "0.5" : "1",
+              cursor: d.disabled ? "default" : "pointer"
             })
           }, [
-            o(S, {
+            u(M, {
               name: "calendar-blank",
               size: "0.875rem",
               style: { color: "var(--cui-text-tertiary)", "flex-shrink": "0" }
             }),
-            u("input", {
-              value: q.value,
-              placeholder: y.startPlaceholder || l.format.toLowerCase(),
+            c("input", {
+              ref: "startInput",
+              onKeydown: e[0] || (e[0] = //@ts-ignore
+              (...t) => s(q) && s(q)(...t)),
+              id: d.id,
+              name: d.name,
+              autocomplete: d.autocomplete,
+              "aria-describedby": d.ariaDescribedby,
+              "aria-required": d.ariaRequired || void 0,
+              "aria-labelledby": d.ariaLabelledby,
+              value: le.value,
+              placeholder: d.startPlaceholder || n.format.toLowerCase(),
               readonly: "",
-              style: M({
+              style: $({
                 border: "none",
                 background: "transparent",
                 outline: "none",
                 fontSize: "0.875rem",
                 color: "var(--cui-text-body)",
                 padding: "calc(0.5rem * var(--cui-density-scale, 1)) 0",
-                width: `${l.format.length + 1}ch`,
+                width: `${n.format.length + 1}ch`,
                 cursor: "pointer"
               })
-            }, null, 12, we),
-            u("span", Me, v(y.separator), 1),
-            u("input", {
-              value: G.value,
-              placeholder: y.endPlaceholder || l.format.toLowerCase(),
+            }, null, 44, Ee),
+            c("span", Fe, f(d.separator), 1),
+            c("input", {
+              value: re.value,
+              placeholder: d.endPlaceholder || n.format.toLowerCase(),
               readonly: "",
-              style: M({
+              style: $({
                 border: "none",
                 background: "transparent",
                 outline: "none",
                 fontSize: "0.875rem",
                 color: "var(--cui-text-body)",
                 padding: "calc(0.5rem * var(--cui-density-scale, 1)) 0",
-                width: `${l.format.length + 1}ch`,
+                width: `${n.format.length + 1}ch`,
                 cursor: "pointer"
               })
-            }, null, 12, _e)
+            }, null, 12, Ke)
           ], 4)
         ]),
         _: 1
       }, 8, ["visible", "disabled"])
     ], 512)), [
-      [pe, !y.hidden]
+      [Re, !d.hidden]
     ]);
   }
 });
 export {
-  Ge as default
+  st as default
 };