@helixui/library 3.6.0 → 3.8.0-next.145

package/dist/shared/{hx-date-picker-B49yo4Vm.js → hx-date-picker-CziP3Hm1.js}

@@ -1,9 +1,9 @@
-import { css as z, html as y, nothing as D } from "lit";
-import { property as h, state as _, query as N, customElement as W } from "lit/decorators.js";
+import { css as z, html as m, nothing as D } from "lit";
+import { property as d, state as _, query as N, customElement as W } from "lit/decorators.js";
 import { F as G } from "./FormMixin-B8PXk5RQ.js";
 import { classMap as B } from "lit/directives/class-map.js";
-import { ifDefined as U } from "lit/directives/if-defined.js";
-import { b as V } from "./forced-colors-CTEDFRGa.js";
+import { ifDefined as V } from "lit/directives/if-defined.js";
+import { b as U } from "./forced-colors-CTEDFRGa.js";
 import { s as j, i as P, r as q } from "./aria-idref-DCuEaknC.js";
 import { f as k } from "./aria-flatten-DY6v2vah.js";
 import { H as K } from "./helix-element-BNEYeiys.js";
@@ -115,7 +115,8 @@ const J = z`
     font-size: var(--hx-font-size-md, 1rem);
     color: var(--hx-date-picker-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 (Enhanced) AAA — primary input surface must meet 44×44. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     width: 100%;
     cursor: default;
   }
@@ -136,6 +137,10 @@ const J = z`
     display: flex;
     align-items: center;
     justify-content: center;
+    /* WCAG 2.5.5 (Enhanced) AAA — calendar trigger must clear 44×44.
+       Without min-width the icon button collapses to ~41 px wide. */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: 0 var(--hx-space-3, 0.75rem);
     border: none;
     border-left: var(--hx-border-width-thin, 1px) solid
@@ -309,13 +314,16 @@ const J = z`
   }
 
   .calendar__day--selected {
-    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-action-primary-bg, #0f7078));
     color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
   .calendar__day--selected:hover {
-    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #0f7078));
+    background-color: var(
+      --hx-date-picker-selected-hover-bg,
+      var(--hx-color-action-primary-bg-hover, #0f6363)
+    );
   }
 
   .calendar__day--today:not(.calendar__day--selected) {
@@ -431,6 +439,11 @@ const J = z`
       border-color: LinkText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated calendar trigger SVG. */
+  .field__trigger-glyph {
+    --hx-icon-size: 16px;
+  }
 `;
 var Q = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
   for (var i = a > 1 ? void 0 : a ? Z(e, r) : e, s = t.length - 1, o; s >= 0; s--)
@@ -545,8 +558,8 @@ let l = class extends G(K) {
       if (s.nodeType === Node.ELEMENT_NODE) {
         const o = s;
         if (r.push(o), o.getAttribute("aria-hidden") === "true") continue;
-        const d = k(o);
-        d && a.push(d);
+        const h = k(o);
+        h && a.push(h);
       } else if (s.nodeType === Node.TEXT_NODE) {
         const o = (s.textContent ?? "").trim();
         o && a.push(o);
@@ -657,42 +670,42 @@ let l = class extends G(K) {
       this._invalid !== u && (this._invalid = u);
       return;
     }
-    const r = this.getAttribute("aria-label"), a = r !== null && r.trim() || "", i = ((H = this.shadowRoot) == null ? void 0 : H.getElementById(this._labelId)) ?? null, s = this._slottedLabelEls, o = ((F = this.shadowRoot) == null ? void 0 : F.getElementById(this._helpTextId)) ?? null, d = ((Y = this.shadowRoot) == null ? void 0 : Y.getElementById(this._errorId)) ?? null, c = this.getAttribute("aria-labelledby");
+    const r = this.getAttribute("aria-label"), a = r !== null && r.trim() || "", i = ((H = this.shadowRoot) == null ? void 0 : H.getElementById(this._labelId)) ?? null, s = this._slottedLabelEls, o = ((F = this.shadowRoot) == null ? void 0 : F.getElementById(this._helpTextId)) ?? null, h = ((Y = this.shadowRoot) == null ? void 0 : Y.getElementById(this._errorId)) ?? null, c = this.getAttribute("aria-labelledby");
     this._consumerLabelledBy = c;
     const p = this.getAttribute("aria-describedby");
     this._consumerDescribedBy = p;
-    const f = q(this, this._consumerLabelledBy), w = f.length > 0, m = q(this, this._consumerDescribedBy);
-    this._installExternalRefsObserver([...f, ...m]);
+    const f = q(this, this._consumerLabelledBy), w = f.length > 0, y = q(this, this._consumerDescribedBy);
+    this._installExternalRefsObserver([...f, ...y]);
     const v = !!(this.error || this._hasErrorSlot), L = !t.validity.valid || v;
     this._invalid !== L && (this._invalid = L);
     const x = typeof this.accessibleLabel == "string" && this.accessibleLabel.trim().length > 0 ? this.accessibleLabel : null, O = (u) => u.getAttribute("aria-hidden") !== "true" && !u.hasAttribute("hidden"), S = [];
     x || (S.push(...f.filter(O)), !w && !a && (this._labelSource === "slot" && s.length > 0 ? S.push(...s.filter(O)) : this._labelSource === "string" && i && S.push(i)));
-    const M = [...m.filter(O)];
-    if (o && !v && this._hasHelpSlot && M.push(o), d && v && M.push(d), this._supportsIdrefRefs) {
+    const E = [...y.filter(O)];
+    if (o && !v && this._hasHelpSlot && E.push(o), h && v && E.push(h), this._supportsIdrefRefs) {
       const u = t;
-      u.ariaLabelledByElements = S.length > 0 ? S : null, u.ariaDescribedByElements = M.length > 0 ? M : null, x ? t.ariaLabel = x : t.ariaLabel = null;
+      u.ariaLabelledByElements = S.length > 0 ? S : null, u.ariaDescribedByElements = E.length > 0 ? E : null, x ? t.ariaLabel = x : t.ariaLabel = null;
     }
-    const I = (u) => u.filter(O).map((A) => k(A)).filter((A) => A.length > 0).join(" ");
-    let b = null, T = null, $ = "";
-    if (!x && w && ($ = I(f)), x)
+    const A = (u) => u.filter(O).map((C) => k(C)).filter((C) => C.length > 0).join(" ");
+    let b = null, M = null, I = "";
+    if (!x && w && (I = A(f)), x)
       b = x;
-    else if ($)
-      b = $;
+    else if (I)
+      b = I;
     else if (a)
       b = a;
     else if (this._labelSource === "slot") {
       if (this._labelSlotText)
         b = this._labelSlotText;
       else if (s.length > 0) {
-        const u = I(s);
+        const u = A(s);
         u && (b = u);
       }
-    } else this._labelSource === "string" && (i != null && i.id ? T = i.id : this.label && (b = this.label));
-    T ? (e.getAttribute("aria-labelledby") !== T && e.setAttribute("aria-labelledby", T), e.hasAttribute("aria-label") && e.removeAttribute("aria-label")) : b ? (e.getAttribute("aria-label") !== b && e.setAttribute("aria-label", b), e.hasAttribute("aria-labelledby") && e.removeAttribute("aria-labelledby")) : (e.hasAttribute("aria-label") && e.removeAttribute("aria-label"), e.hasAttribute("aria-labelledby") && e.removeAttribute("aria-labelledby"));
-    const E = ((R = this.shadowRoot) == null ? void 0 : R.getElementById(this._consumerDescId)) ?? null, C = I(m);
-    E && E.textContent !== C && (E.textContent = C);
+    } else this._labelSource === "string" && (i != null && i.id ? M = i.id : this.label && (b = this.label));
+    M ? (e.getAttribute("aria-labelledby") !== M && e.setAttribute("aria-labelledby", M), e.hasAttribute("aria-label") && e.removeAttribute("aria-label")) : b ? (e.getAttribute("aria-label") !== b && e.setAttribute("aria-label", b), e.hasAttribute("aria-labelledby") && e.removeAttribute("aria-labelledby")) : (e.hasAttribute("aria-label") && e.removeAttribute("aria-label"), e.hasAttribute("aria-labelledby") && e.removeAttribute("aria-labelledby"));
+    const T = ((R = this.shadowRoot) == null ? void 0 : R.getElementById(this._consumerDescId)) ?? null, $ = A(y);
+    T && T.textContent !== $ && (T.textContent = $);
     const g = [];
-    if (C && E && g.push(this._consumerDescId), o && !v && this._hasHelpSlot && g.push(this._helpTextId), d && v && g.push(this._errorId), !this._hasHelpSlot && this.helpText && !v && o && !g.includes(this._helpTextId) && g.push(this._helpTextId), g.length > 0) {
+    if ($ && T && g.push(this._consumerDescId), o && !v && this._hasHelpSlot && g.push(this._helpTextId), h && v && g.push(this._errorId), !this._hasHelpSlot && this.helpText && !v && o && !g.includes(this._helpTextId) && g.push(this._helpTextId), g.length > 0) {
       const u = g.join(" ");
       e.getAttribute("aria-describedby") !== u && e.setAttribute("aria-describedby", u);
     } else e.hasAttribute("aria-describedby") && e.removeAttribute("aria-describedby");
@@ -999,15 +1012,15 @@ let l = class extends G(K) {
       return;
     }
     if (e === "Home") {
-      const o = new Date(this._viewYear, this._viewMonth, r).getDay(), d = r - o;
-      d >= 1 && (this._focusedDay = d, this.updateComplete.then(() => {
+      const o = new Date(this._viewYear, this._viewMonth, r).getDay(), h = r - o;
+      h >= 1 && (this._focusedDay = h, this.updateComplete.then(() => {
         var c, p;
-        (p = (c = this._calendar) == null ? void 0 : c.querySelector(`[data-day="${d}"]`)) == null || p.focus();
+        (p = (c = this._calendar) == null ? void 0 : c.querySelector(`[data-day="${h}"]`)) == null || p.focus();
       }));
       return;
     }
     if (e === "End") {
-      const d = 6 - new Date(this._viewYear, this._viewMonth, r).getDay(), c = r + d;
+      const h = 6 - new Date(this._viewYear, this._viewMonth, r).getDay(), c = r + h;
       c <= a && (this._focusedDay = c, this.updateComplete.then(() => {
         var p, f;
         (f = (p = this._calendar) == null ? void 0 : p.querySelector(`[data-day="${c}"]`)) == null || f.focus();
@@ -1019,18 +1032,18 @@ let l = class extends G(K) {
       this._prevMonth();
       const s = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
       this._focusedDay = s + i, this.updateComplete.then(() => {
-        var d, c;
+        var h, c;
         const o = this._focusedDay;
-        (c = (d = this._calendar) == null ? void 0 : d.querySelector(`[data-day="${o}"]`)) == null || c.focus();
+        (c = (h = this._calendar) == null ? void 0 : h.querySelector(`[data-day="${o}"]`)) == null || c.focus();
       });
       return;
     }
     if (i > a) {
       const s = i - a;
       this._nextMonth(), this._focusedDay = s, this.updateComplete.then(() => {
-        var d, c;
+        var h, c;
         const o = this._focusedDay;
-        (c = (d = this._calendar) == null ? void 0 : d.querySelector(`[data-day="${o}"]`)) == null || c.focus();
+        (c = (h = this._calendar) == null ? void 0 : h.querySelector(`[data-day="${o}"]`)) == null || c.focus();
       });
       return;
     }
@@ -1068,11 +1081,11 @@ let l = class extends G(K) {
   /** @internal */
   _renderWeekdayHeaders() {
     const e = this._getWeekdayNames().map(
-      (r) => y`<div class="calendar__weekday" role="columnheader" aria-label=${r}>
+      (r) => m`<div class="calendar__weekday" role="columnheader" aria-label=${r}>
           ${r.slice(0, 2)}
         </div>`
     );
-    return y`<div class="calendar__row" role="row">${e}</div>`;
+    return m`<div class="calendar__row" role="row">${e}</div>`;
   }
   /** @internal */
   _renderDayGrid() {
@@ -1080,12 +1093,12 @@ let l = class extends G(K) {
     for (let i = 0; i < t.length; i += 7) {
       const s = t.slice(i, i + 7).map((o) => {
         if (o === null)
-          return y`<div class="calendar__day-cell" role="gridcell" aria-hidden="true"></div>`;
-        const d = e ? this._isSameDay(o, e) : !1, c = this._isSameDay(o, r), p = this._isDateDisabled(o), f = this._focusedDay === o.getDate(), w = o.getDate(), m = this._toISO(o), v = this._dayAriaLabels.get(m) ?? m;
-        return y`<div
+          return m`<div class="calendar__day-cell" role="gridcell" aria-hidden="true"></div>`;
+        const h = e ? this._isSameDay(o, e) : !1, c = this._isSameDay(o, r), p = this._isDateDisabled(o), f = this._focusedDay === o.getDate(), w = o.getDate(), y = this._toISO(o), v = this._dayAriaLabels.get(y) ?? y;
+        return m`<div
           class="calendar__day-cell"
           role="gridcell"
-          aria-selected=${d ? "true" : "false"}
+          aria-selected=${h ? "true" : "false"}
           aria-disabled=${p ? "true" : D}
           aria-current=${c ? "date" : D}
         >
@@ -1093,13 +1106,13 @@ let l = class extends G(K) {
             part="day"
             class=${B({
           calendar__day: !0,
-          "calendar__day--selected": d,
+          "calendar__day--selected": h,
           "calendar__day--today": c,
           "calendar__day--disabled": p
         })}
             type="button"
             data-day=${w}
-            data-date=${m}
+            data-date=${y}
             aria-label=${v}
             tabindex=${f ? "0" : "-1"}
             ?disabled=${p}
@@ -1108,7 +1121,7 @@ let l = class extends G(K) {
           </button>
         </div>`;
       });
-      a.push(y`<div class="calendar__row" role="row">${s}</div>`);
+      a.push(m`<div class="calendar__row" role="row">${s}</div>`);
     }
     return a;
   }
@@ -1120,15 +1133,15 @@ let l = class extends G(K) {
       "field--disabled": this.disabled,
       "field--required": this.required
     };
-    return y`
+    return m`
       <div part="field" class=${B(a)}>
         <!-- Label -->
         <div class="field__label-wrapper">
           <slot name="label" @slotchange=${this._handleLabelSlotChange}>
-            ${this.label ? y`
+            ${this.label ? m`
                   <label part="label" id=${this._labelId} class="field__label" for=${this._inputId}>
                     ${this.label}
-                    ${this.required ? y`<span class="field__required-marker" aria-hidden="true">*</span>` : D}
+                    ${this.required ? m`<span class="field__required-marker" aria-hidden="true">*</span>` : D}
                   </label>
                 ` : D}
           </slot>
@@ -1152,7 +1165,7 @@ let l = class extends G(K) {
             type="text"
             readonly
             .value=${e}
-            placeholder=${U(this.format || void 0)}
+            placeholder=${V(this.format || void 0)}
             ?disabled=${this.disabled}
             aria-invalid=${this._invalid ? "true" : "false"}
             aria-required=${this.required ? "true" : "false"}
@@ -1171,24 +1184,12 @@ let l = class extends G(K) {
             ?disabled=${this.disabled}
             @click=${this._toggleCalendar}
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+            <hx-icon
+              class="field__trigger-glyph"
+              library="helix"
+              name="calendar"
               aria-hidden="true"
-              focusable="false"
-            >
-              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="16" y1="2" x2="16" y2="6"></line>
-              <line x1="8" y1="2" x2="8" y2="6"></line>
-              <line x1="3" y1="10" x2="21" y2="10"></line>
-            </svg>
+            ></hx-icon>
           </button>
         </div>
 
@@ -1284,62 +1285,62 @@ let l = class extends G(K) {
     `;
   }
 };
-l.styles = [J, V];
+l.styles = [J, U];
 l.formAssociated = !0;
 l.__testSupportsIdrefRefsOverride = null;
 n([
-  h({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], l.prototype, "name", 2);
 n([
-  h({ type: String })
+  d({ type: String })
 ], l.prototype, "value", 2);
 n([
-  h({ type: String })
+  d({ type: String })
 ], l.prototype, "min", 2);
 n([
-  h({ type: String })
+  d({ type: String })
 ], l.prototype, "max", 2);
 n([
-  h({ type: String })
+  d({ type: String })
 ], l.prototype, "label", 2);
 n([
-  h({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "required", 2);
 n([
-  h({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "disabled", 2);
 n([
-  h({ type: String })
+  d({ type: String })
 ], l.prototype, "error", 2);
 n([
-  h({ type: String, attribute: "help-text" })
+  d({ type: String, attribute: "help-text" })
 ], l.prototype, "helpText", 2);
 n([
-  h({ type: String })
+  d({ type: String })
 ], l.prototype, "format", 2);
 n([
-  h({ type: String })
+  d({ type: String })
 ], l.prototype, "locale", 2);
 n([
-  h({ type: String, attribute: "required-message" })
+  d({ type: String, attribute: "required-message" })
 ], l.prototype, "requiredMessage", 2);
 n([
-  h({ type: String, attribute: "choose-date-label" })
+  d({ type: String, attribute: "choose-date-label" })
 ], l.prototype, "chooseDateLabel", 2);
 n([
-  h({ type: String, attribute: "open-calendar-label" })
+  d({ type: String, attribute: "open-calendar-label" })
 ], l.prototype, "openCalendarLabel", 2);
 n([
-  h({ type: String, attribute: "close-calendar-label" })
+  d({ type: String, attribute: "close-calendar-label" })
 ], l.prototype, "closeCalendarLabel", 2);
 n([
-  h({ type: String, attribute: "previous-month-label" })
+  d({ type: String, attribute: "previous-month-label" })
 ], l.prototype, "previousMonthLabel", 2);
 n([
-  h({ type: String, attribute: "next-month-label" })
+  d({ type: String, attribute: "next-month-label" })
 ], l.prototype, "nextMonthLabel", 2);
 n([
-  h({ type: String, attribute: "accessible-label" })
+  d({ type: String, attribute: "accessible-label" })
 ], l.prototype, "accessibleLabel", 2);
 n([
   _()
@@ -1395,4 +1396,4 @@ l = n([
 export {
   l as H
 };
-//# sourceMappingURL=hx-date-picker-B49yo4Vm.js.map
+//# sourceMappingURL=hx-date-picker-CziP3Hm1.js.map