@helixui/library 1.0.1 → 1.1.2

package/dist/shared/{hx-date-picker-DDcIBJir.js → hx-date-picker-6voxxxNE.js}

@@ -1,424 +1,9 @@
-import { css as b, LitElement as w, html as c, nothing as u } from "lit";
-import { property as p, state as v, query as x, customElement as D } from "lit/decorators.js";
+import { css as m, LitElement as w, html as _, nothing as p } from "lit";
+import { property as d, state as v, query as g, customElement as D } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
-import { ifDefined as g } from "lit/directives/if-defined.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
 import { tokenStyles as k } from "@helixui/tokens/lit";
-const $ = b`
-  :host {
-    display: block;
-    position: relative;
-  }
-
-  :host([disabled]) {
-    opacity: var(--hx-opacity-disabled, 0.5);
-    pointer-events: none;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));
-    position: relative;
-  }
-
-  /* ─── Label ─── */
-
-  .field__label-wrapper {
-    display: contents;
-  }
-
-  .field__label {
-    display: flex;
-    align-items: baseline;
-    gap: var(--hx-space-1, 0.25rem);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  .field__required-marker {
-    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
-    font-weight: var(--hx-font-weight-bold, 700);
-  }
-
-  /* ─── Input Wrapper ─── */
-
-  .field__input-wrapper {
-    display: flex;
-    align-items: stretch;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));
-    border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
-    transition:
-      border-color var(--hx-transition-fast, 150ms ease),
-      box-shadow var(--hx-transition-fast, 150ms ease);
-    overflow: hidden;
-  }
-
-  .field__input-wrapper:focus-within {
-    border-color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      color-mix(
-        in srgb,
-        var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-
-  /* ─── Error State ─── */
-
-  .field--error .field__input-wrapper {
-    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));
-  }
-
-  .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      color-mix(
-        in srgb,
-        var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
-        transparent
-      );
-  }
-
-  /* ─── Native Input ─── */
-
-  .field__input {
-    flex: 1;
-    border: none;
-    outline: none;
-    background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));
-    line-height: var(--hx-line-height-normal, 1.5);
-    min-height: var(--hx-size-10, 2.5rem);
-    width: 100%;
-    cursor: default;
-  }
-
-  .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #adb5bd);
-  }
-
-  .field__input:disabled {
-    cursor: not-allowed;
-  }
-
-  /* ─── Calendar Trigger Button ─── */
-
-  .field__trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 var(--hx-space-3, 0.75rem);
-    border: none;
-    border-left: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));
-    background: transparent;
-    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: color var(--hx-transition-fast, 150ms ease);
-    outline: none;
-  }
-
-  .field__trigger:focus-visible {
-    color: var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    background-color: color-mix(
-      in srgb,
-      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) 8%,
-      transparent
-    );
-  }
-
-  .field__trigger:hover:not(:disabled) {
-    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));
-    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #212529) 4%, transparent);
-  }
-
-  .field__trigger:disabled {
-    cursor: not-allowed;
-  }
-
-  /* ─── Calendar Popup ─── */
-
-  .calendar {
-    position: absolute;
-    top: calc(100% + var(--hx-space-1, 0.25rem));
-    left: 0;
-    z-index: var(--hx-z-index-dropdown, 1000);
-    min-width: var(--hx-date-picker-calendar-min-width, 18rem);
-    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));
-    border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
-    box-shadow: var(
-      --hx-date-picker-calendar-shadow,
-      0 4px 6px -1px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)),
-      0 2px 4px -2px var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1))
-    );
-    padding: var(--hx-space-3, 0.75rem);
-    outline: none;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .calendar {
-      animation: calendar-appear var(--hx-transition-fast, 150ms ease) forwards;
-    }
-  }
-
-  @keyframes calendar-appear {
-    from {
-      opacity: 0;
-      transform: translateY(-0.25rem);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  /* ─── Month Navigation ─── */
-
-  .calendar__nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--hx-space-3, 0.75rem);
-  }
-
-  .calendar__nav-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
-    min-width: var(--hx-touch-target-min, 2.75rem);
-    min-height: var(--hx-touch-target-min, 2.75rem);
-    width: var(--hx-touch-target-min, 2.75rem);
-    height: var(--hx-touch-target-min, 2.75rem);
-    border: none;
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background: transparent;
-    color: var(--hx-color-neutral-600, #495057);
-    cursor: pointer;
-    font-size: var(--hx-font-size-lg, 1.125rem);
-    line-height: 1;
-    transition:
-      background-color var(--hx-transition-fast, 150ms ease),
-      color var(--hx-transition-fast, 150ms ease);
-    outline: none;
-  }
-
-  .calendar__nav-btn:hover {
-    background-color: var(--hx-color-neutral-100, #f8f9fa);
-    color: var(--hx-color-neutral-900, #212529);
-  }
-
-  .calendar__nav-btn:focus-visible {
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-  }
-
-  .calendar__month-label {
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-800, #212529);
-    flex: 1;
-    text-align: center;
-  }
-
-  /* ─── Calendar Grid ─── */
-
-  .calendar__grid {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hx-space-1, 0.25rem);
-  }
-
-  .calendar__row {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: var(--hx-space-1, 0.25rem);
-  }
-
-  .calendar__weekday {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--hx-size-8, 2rem);
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-500, #6c757d);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  /* ─── Day Cells ─── */
-
-  .calendar__day-cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .calendar__day {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
-    min-width: var(--hx-touch-target-min, 2.75rem);
-    min-height: var(--hx-touch-target-min, 2.75rem);
-    width: var(--hx-touch-target-min, 2.75rem);
-    height: var(--hx-touch-target-min, 2.75rem);
-    border: none;
-    border-radius: var(--hx-border-radius-sm, 0.25rem);
-    background: transparent;
-    color: var(--hx-color-neutral-800, #212529);
-    font-size: var(--hx-font-size-sm, 0.875rem);
-    font-family: inherit;
-    cursor: pointer;
-    transition:
-      background-color var(--hx-transition-fast, 150ms ease),
-      color var(--hx-transition-fast, 150ms ease);
-    outline: none;
-    position: relative;
-  }
-
-  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
-    background-color: var(--hx-color-neutral-100, #f8f9fa);
-    color: var(--hx-color-neutral-900, #212529);
-  }
-
-  .calendar__day:focus-visible {
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
-      var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
-    z-index: 1;
-  }
-
-  .calendar__day--selected {
-    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #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, #1d4ed8));
-  }
-
-  .calendar__day--today:not(.calendar__day--selected) {
-    font-weight: var(--hx-font-weight-bold, 700);
-    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
-  }
-
-  .calendar__day--today:not(.calendar__day--selected)::after {
-    content: '';
-    position: absolute;
-    bottom: 0.2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0.25rem;
-    height: 0.25rem;
-    border-radius: 50%;
-    background-color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
-  }
-
-  .calendar__day--disabled {
-    opacity: var(--hx-opacity-disabled, 0.4);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ─── Live Region ─── */
-
-  .calendar__live-region {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  /* ─── Help Text & Error Messages ─── */
-
-  .field__help-text {
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  .field__error {
-    font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
-    line-height: var(--hx-line-height-normal, 1.5);
-  }
-
-  .calendar__nav-btn:disabled {
-    opacity: var(--hx-opacity-disabled, 0.4);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ─── Forced Colors (High Contrast Mode) ─── */
-
-  @media (forced-colors: active) {
-    .field__input-wrapper {
-      border: 1px solid ButtonText;
-    }
-
-    .field__input-wrapper:focus-within {
-      outline: 2px solid Highlight;
-      outline-offset: 1px;
-      box-shadow: none;
-    }
-
-    .calendar__day:focus-visible {
-      outline: 2px solid Highlight;
-      box-shadow: none;
-    }
-
-    .calendar__day--selected {
-      background-color: Highlight;
-      color: HighlightText;
-      border: 1px solid Highlight;
-    }
-
-    .calendar__day--today:not(.calendar__day--selected) {
-      border: 2px solid LinkText;
-    }
-
-    .calendar__day--today:not(.calendar__day--selected)::after {
-      display: none;
-    }
-
-    .calendar__day--disabled {
-      color: GrayText;
-    }
-
-    .calendar__nav-btn:focus-visible {
-      outline: 2px solid Highlight;
-      box-shadow: none;
-    }
-
-    .field--error .field__input-wrapper {
-      border-color: LinkText;
-    }
-  }
-`;
+const $ = m`:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #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, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:"";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}`;
 var M = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (t, e, r, a) => {
   for (var o = a > 1 ? void 0 : a ? C(e, r) : e, i = t.length - 1, l; i >= 0; i--)
     (l = t[i]) && (o = (a ? l(e, r, o) : l(o)) || o);
@@ -426,10 +11,11 @@ var M = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (t, e, r
 };
 let S = 0, n = class extends w {
   constructor() {
-    super(), this.name = "", this.value = "", this.min = "", this.max = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.format = "MM/DD/YYYY", this.locale = "en-US", this._isOpen = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._focusedDay = null, this._liveMessage = "", this._id = `hx-date-picker-${++S}`, this._inputId = `${this._id}-input`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._calendarId = `${this._id}-calendar`, this._liveRegionId = `${this._id}-live`, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._boundHandleOutsideClick = () => {
+    super(), this.name = "", this.value = "", this.min = "", this.max = "", this.label = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.format = "MM/DD/YYYY", this.locale = "en-US", this.requiredMessage = "This field is required.", this.chooseDateLabel = "Choose a date", this.openCalendarLabel = "Open calendar", this.closeCalendarLabel = "Close calendar", this.previousMonthLabel = "Previous month", this.nextMonthLabel = "Next month", this._isOpen = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._focusedDay = null, this._liveMessage = "", this._id = `hx-date-picker-${++S}`, this._inputId = `${this._id}-input`, this._helpTextId = `${this._id}-help`, this._errorId = `${this._id}-error`, this._calendarId = `${this._id}-calendar`, this._liveRegionId = `${this._id}-live`, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._boundHandleOutsideClick = () => {
     }, this._boundHandleDocumentKeydown = () => {
     }, this._internals = this.attachInternals();
   }
+  /** @internal */
   _handleLabelSlotChange(t) {
     const e = t.target;
     if (this._hasLabelSlot = e.assignedElements().length > 0, this._hasLabelSlot) {
@@ -438,6 +24,7 @@ let S = 0, n = class extends w {
     }
     this.requestUpdate();
   }
+  /** @internal */
   _handleErrorSlotChange(t) {
     const e = t.target;
     this._hasErrorSlot = e.assignedElements().length > 0, this.requestUpdate();
@@ -465,9 +52,11 @@ let S = 0, n = class extends w {
       });
     }
   }
+  /** @internal */
   _handleOutsideClick(t) {
     t.composedPath().includes(this) || this._closeCalendar();
   }
+  /** @internal */
   _handleDocumentKeydown(t) {
     t.key === "Escape" && this._isOpen && this._closeCalendar();
   }
@@ -490,18 +79,23 @@ let S = 0, n = class extends w {
   reportValidity() {
     return this._internals.reportValidity();
   }
+  /** @internal */
   _updateValidity() {
     this.required && !this.value ? this._internals.setValidity(
       { valueMissing: !0 },
-      this.error || "This field is required.",
+      this.error || this.requiredMessage,
       this._input
     ) : this._internals.setValidity({});
   }
   formResetCallback() {
-    this.value = "", this._internals.setFormValue(""), this._isOpen = !1;
+    this.value = "", this._internals.setFormValue(null), this._isOpen = !1;
   }
-  formStateRestoreCallback(t) {
-    this.value = t;
+  formStateRestoreCallback(t, e) {
+    typeof t == "string" && (this.value = t);
+  }
+  /** Called when a parent fieldset is disabled/enabled. */
+  formDisabledCallback(t) {
+    this.disabled = t;
   }
   // ─── Public Methods ───
   focus(t) {
@@ -509,15 +103,18 @@ let S = 0, n = class extends w {
     (e = this._trigger) == null || e.focus(t);
   }
   // ─── Date Utilities ───
+  /** @internal */
   _parseISODate(t) {
     if (!t) return null;
     const e = /* @__PURE__ */ new Date(t + "T00:00:00");
     return isNaN(e.getTime()) ? null : e;
   }
+  /** @internal */
   _toISO(t) {
     const e = t.getFullYear(), r = String(t.getMonth() + 1).padStart(2, "0"), a = String(t.getDate()).padStart(2, "0");
     return `${e}-${r}-${a}`;
   }
+  /** @internal */
   _formatForDisplay(t) {
     const e = this._parseISODate(t);
     return e ? e.toLocaleDateString(this.locale, {
@@ -526,19 +123,24 @@ let S = 0, n = class extends w {
       day: "2-digit"
     }) : "";
   }
+  /** @internal */
   _isDateDisabled(t) {
     const e = this._toISO(t);
     return !!(this.min && e < this.min || this.max && e > this.max);
   }
+  /** @internal */
   _isSameDay(t, e) {
     return t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
   }
+  /** @internal */
   _isToday(t) {
     return this._isSameDay(t, /* @__PURE__ */ new Date());
   }
+  /** @internal */
   _getMonthName(t) {
     return new Date(2e3, t, 1).toLocaleDateString(this.locale, { month: "long" });
   }
+  /** @internal */
   _getDayName(t) {
     return new Date(2e3, 0, 2 + t).toLocaleDateString(this.locale, {
       weekday: "short"
@@ -549,6 +151,7 @@ let S = 0, n = class extends w {
    * Returns an array of Date objects (or null for padding cells) representing
    * the 6-week grid for the current view month.
    */
+  /** @internal */
   _getDaysInGrid() {
     const e = new Date(this._viewYear, this._viewMonth, 1).getDay(), r = new Date(this._viewYear, this._viewMonth + 1, 0).getDate(), a = [];
     for (let i = 0; i < e; i++)
@@ -562,19 +165,23 @@ let S = 0, n = class extends w {
     return a;
   }
   // ─── Calendar Open/Close ───
+  /** @internal */
   _openCalendar() {
     this.disabled || (this._isOpen = !0);
   }
+  /** @internal */
   _closeCalendar() {
     this._isOpen = !1, this.updateComplete.then(() => {
       var t;
       (t = this._trigger) == null || t.focus();
     });
   }
+  /** @internal */
   _toggleCalendar() {
     this._isOpen ? this._closeCalendar() : this._openCalendar();
   }
   // ─── Focus Management ───
+  /** @internal */
   _focusActiveDay() {
     if (!this._calendar) return;
     const t = this.value, e = this._parseISODate(t);
@@ -605,13 +212,16 @@ let S = 0, n = class extends w {
     }));
   }
   // ─── Month Navigation ───
+  /** @internal */
   _prevMonth() {
     this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear = this._viewYear - 1) : this._viewMonth = this._viewMonth - 1;
   }
+  /** @internal */
   _nextMonth() {
     this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear = this._viewYear + 1) : this._viewMonth = this._viewMonth + 1;
   }
   // ─── Day Selection ───
+  /** @internal */
   _selectDay(t) {
     if (this._isDateDisabled(t)) return;
     const e = this._toISO(t);
@@ -624,6 +234,7 @@ let S = 0, n = class extends w {
     ), this._closeCalendar();
   }
   // ─── Calendar Keyboard Navigation ───
+  /** @internal */
   _handleCalendarKeydown(t) {
     const { key: e } = t;
     if (e === "Tab") {
@@ -652,18 +263,18 @@ let S = 0, n = class extends w {
       return;
     }
     if (e === "Home") {
-      const l = new Date(this._viewYear, this._viewMonth, r).getDay(), h = r - l;
-      h >= 1 && (this._focusedDay = h, this.updateComplete.then(() => {
-        var d, _;
-        (_ = (d = this._calendar) == null ? void 0 : d.querySelector(`[data-day="${h}"]`)) == null || _.focus();
+      const l = new Date(this._viewYear, this._viewMonth, r).getDay(), c = r - l;
+      c >= 1 && (this._focusedDay = c, this.updateComplete.then(() => {
+        var h, u;
+        (u = (h = this._calendar) == null ? void 0 : h.querySelector(`[data-day="${c}"]`)) == null || u.focus();
       }));
       return;
     }
     if (e === "End") {
-      const h = 6 - new Date(this._viewYear, this._viewMonth, r).getDay(), d = r + h;
-      d <= a && (this._focusedDay = d, this.updateComplete.then(() => {
-        var _, f;
-        (f = (_ = this._calendar) == null ? void 0 : _.querySelector(`[data-day="${d}"]`)) == null || f.focus();
+      const c = 6 - new Date(this._viewYear, this._viewMonth, r).getDay(), h = r + c;
+      h <= a && (this._focusedDay = h, this.updateComplete.then(() => {
+        var u, f;
+        (f = (u = this._calendar) == null ? void 0 : u.querySelector(`[data-day="${h}"]`)) == null || f.focus();
       }));
       return;
     }
@@ -672,18 +283,18 @@ let S = 0, n = class extends w {
       this._prevMonth();
       const i = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();
       this._focusedDay = i + o, this.updateComplete.then(() => {
-        var h, d;
+        var c, h;
         const l = this._focusedDay;
-        (d = (h = this._calendar) == null ? void 0 : h.querySelector(`[data-day="${l}"]`)) == null || d.focus();
+        (h = (c = this._calendar) == null ? void 0 : c.querySelector(`[data-day="${l}"]`)) == null || h.focus();
       });
       return;
     }
     if (o > a) {
       const i = o - a;
       this._nextMonth(), this._focusedDay = i, this.updateComplete.then(() => {
-        var h, d;
+        var c, h;
         const l = this._focusedDay;
-        (d = (h = this._calendar) == null ? void 0 : h.querySelector(`[data-day="${l}"]`)) == null || d.focus();
+        (h = (c = this._calendar) == null ? void 0 : c.querySelector(`[data-day="${l}"]`)) == null || h.focus();
       });
       return;
     }
@@ -693,17 +304,20 @@ let S = 0, n = class extends w {
     });
   }
   // ─── Navigation Boundary Checks ───
+  /** @internal */
   _isPrevMonthDisabled() {
     if (!this.min) return !1;
     const t = new Date(this._viewYear, this._viewMonth, 1), e = this._parseISODate(this.min);
     return e ? t <= e : !1;
   }
+  /** @internal */
   _isNextMonthDisabled() {
     if (!this.max) return !1;
     const t = new Date(this._viewYear, this._viewMonth + 1, 0), e = this._parseISODate(this.max);
     return e ? t >= e : !1;
   }
   // ─── Focus Trap ───
+  /** @internal */
   _handleCalendarTab(t) {
     var i, l;
     if (t.key !== "Tab" || !this._isOpen) return;
@@ -715,45 +329,47 @@ let S = 0, n = class extends w {
     t.shiftKey ? o === r && (t.preventDefault(), a == null || a.focus()) : o === a && (t.preventDefault(), r == null || r.focus());
   }
   // ─── Render Helpers ───
+  /** @internal */
   _renderWeekdayHeaders() {
     const t = Array.from(
       { length: 7 },
-      (e, r) => c`<div class="calendar__weekday" role="columnheader" aria-label=${this._getDayName(r)}>
+      (e, r) => _`<div class="calendar__weekday" role="columnheader" aria-label=${this._getDayName(r)}>
           ${this._getDayName(r).slice(0, 2)}
         </div>`
     );
-    return c`<div class="calendar__row" role="row">${t}</div>`;
+    return _`<div class="calendar__row" role="row">${t}</div>`;
   }
+  /** @internal */
   _renderDayGrid() {
     const t = this._getDaysInGrid(), e = this._parseISODate(this.value), r = [];
     for (let a = 0; a < t.length; a += 7) {
       const o = t.slice(a, a + 7).map((i) => {
         if (i === null)
-          return c`<div class="calendar__day-cell" role="gridcell" aria-hidden="true"></div>`;
-        const l = e ? this._isSameDay(i, e) : !1, h = this._isToday(i), d = this._isDateDisabled(i), _ = this._focusedDay === i.getDate(), f = i.getDate(), m = i.toLocaleDateString(this.locale, {
+          return _`<div class="calendar__day-cell" role="gridcell" aria-hidden="true"></div>`;
+        const l = e ? this._isSameDay(i, e) : !1, c = this._isToday(i), h = this._isDateDisabled(i), u = this._focusedDay === i.getDate(), f = i.getDate(), x = i.toLocaleDateString(this.locale, {
           weekday: "long",
           year: "numeric",
           month: "long",
           day: "numeric"
         });
-        return c`<div class="calendar__day-cell">
+        return _`<div class="calendar__day-cell">
           <button
             part="day"
             class=${y({
           calendar__day: !0,
           "calendar__day--selected": l,
-          "calendar__day--today": h,
-          "calendar__day--disabled": d
+          "calendar__day--today": c,
+          "calendar__day--disabled": h
         })}
             type="button"
             role="gridcell"
             data-day=${f}
-            aria-label=${m}
-            aria-selected=${l ? "true" : u}
-            aria-disabled=${d ? "true" : u}
-            aria-current=${h ? "date" : u}
-            tabindex=${_ ? "0" : "-1"}
-            ?disabled=${d}
+            aria-label=${x}
+            aria-selected=${l ? "true" : p}
+            aria-disabled=${h ? "true" : p}
+            aria-current=${c ? "date" : p}
+            tabindex=${u ? "0" : "-1"}
+            ?disabled=${h}
             @click=${() => {
           this._selectDay(i);
         }}
@@ -762,7 +378,7 @@ let S = 0, n = class extends w {
           </button>
         </div>`;
       });
-      r.push(c`<div class="calendar__row" role="row">${o}</div>`);
+      r.push(_`<div class="calendar__row" role="row">${o}</div>`);
     }
     return r;
   }
@@ -774,17 +390,17 @@ let S = 0, n = class extends w {
       "field--disabled": this.disabled,
       "field--required": this.required
     }, o = [t ? this._errorId : null, this.helpText ? this._helpTextId : null].filter(Boolean).join(" ") || void 0;
-    return c`
+    return _`
       <div part="field" class=${y(a)}>
         <!-- Label -->
         <div class="field__label-wrapper">
           <slot name="label" @slotchange=${this._handleLabelSlotChange}>
-            ${this.label ? c`
+            ${this.label ? _`
                   <label part="label" class="field__label" for=${this._inputId}>
                     ${this.label}
-                    ${this.required ? c`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
+                    ${this.required ? _`<span class="field__required-marker" aria-hidden="true">*</span>` : p}
                   </label>
-                ` : u}
+                ` : p}
           </slot>
         </div>
 
@@ -797,14 +413,14 @@ let S = 0, n = class extends w {
             type="text"
             readonly
             .value=${e}
-            placeholder=${g(this.format || void 0)}
+            placeholder=${b(this.format || void 0)}
             ?disabled=${this.disabled}
-            aria-labelledby=${g(
+            aria-labelledby=${b(
       this._hasLabelSlot ? `${this._inputId}-slotted-label` : void 0
     )}
-            aria-invalid=${t ? "true" : u}
-            aria-describedby=${g(o)}
-            aria-required=${this.required ? "true" : u}
+            aria-invalid=${t ? "true" : p}
+            aria-describedby=${b(o)}
+            aria-required=${this.required ? "true" : p}
             aria-haspopup="dialog"
             @click=${this._openCalendar}
           />
@@ -812,9 +428,9 @@ let S = 0, n = class extends w {
             part="trigger"
             class="field__trigger"
             type="button"
-            aria-label=${this._isOpen ? "Close calendar" : "Open calendar"}
+            aria-label=${this._isOpen ? this.closeCalendarLabel : this.openCalendarLabel}
             aria-haspopup="dialog"
-            aria-expanded=${this._isOpen ? "true" : u}
+            aria-expanded=${this._isOpen ? "true" : p}
             aria-controls=${this._calendarId}
             ?disabled=${this.disabled}
             @click=${this._toggleCalendar}
@@ -841,14 +457,14 @@ let S = 0, n = class extends w {
         </div>
 
         <!-- Calendar Popup -->
-        ${this._isOpen ? c`
+        ${this._isOpen ? _`
               <div
                 part="calendar"
                 class="calendar"
                 id=${this._calendarId}
                 role="dialog"
                 aria-modal="true"
-                aria-label="Choose a date"
+                aria-label=${this.chooseDateLabel}
                 @keydown=${this._handleCalendarKeydown}
               >
                 <!-- Screen reader live region -->
@@ -866,7 +482,7 @@ let S = 0, n = class extends w {
                   <button
                     class="calendar__nav-btn"
                     type="button"
-                    aria-label="Previous month"
+                    aria-label=${this.previousMonthLabel}
                     ?disabled=${this._isPrevMonthDisabled()}
                     @click=${this._prevMonth}
                   >
@@ -878,7 +494,7 @@ let S = 0, n = class extends w {
                   <button
                     class="calendar__nav-btn"
                     type="button"
-                    aria-label="Next month"
+                    aria-label=${this.nextMonthLabel}
                     ?disabled=${this._isNextMonthDisabled()}
                     @click=${this._nextMonth}
                   >
@@ -891,23 +507,23 @@ let S = 0, n = class extends w {
                   ${this._renderWeekdayHeaders()} ${this._renderDayGrid()}
                 </div>
               </div>
-            ` : u}
+            ` : p}
 
         <!-- Error -->
         <slot name="error" @slotchange=${this._handleErrorSlotChange}>
-          ${this.error ? c`
+          ${this.error ? _`
                 <div part="error" class="field__error" id=${this._errorId} role="alert">
                   ${this.error}
                 </div>
-              ` : u}
+              ` : p}
         </slot>
 
         <!-- Help Text -->
-        ${this.helpText && !t ? c`
+        ${this.helpText && !t ? _`
               <div part="help-text" class="field__help-text" id=${this._helpTextId}>
                 <slot name="help-text">${this.helpText}</slot>
               </div>
-            ` : u}
+            ` : p}
       </div>
     `;
   }
@@ -915,38 +531,56 @@ let S = 0, n = class extends w {
 n.styles = [k, $];
 n.formAssociated = !0;
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "name", 2);
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "value", 2);
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "min", 2);
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "max", 2);
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "label", 2);
 s([
-  p({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], n.prototype, "required", 2);
 s([
-  p({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], n.prototype, "disabled", 2);
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "error", 2);
 s([
-  p({ type: String, attribute: "help-text" })
+  d({ type: String, attribute: "help-text" })
 ], n.prototype, "helpText", 2);
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "format", 2);
 s([
-  p({ type: String })
+  d({ type: String })
 ], n.prototype, "locale", 2);
+s([
+  d({ attribute: "required-message" })
+], n.prototype, "requiredMessage", 2);
+s([
+  d({ attribute: "choose-date-label" })
+], n.prototype, "chooseDateLabel", 2);
+s([
+  d({ attribute: "open-calendar-label" })
+], n.prototype, "openCalendarLabel", 2);
+s([
+  d({ attribute: "close-calendar-label" })
+], n.prototype, "closeCalendarLabel", 2);
+s([
+  d({ attribute: "previous-month-label" })
+], n.prototype, "previousMonthLabel", 2);
+s([
+  d({ attribute: "next-month-label" })
+], n.prototype, "nextMonthLabel", 2);
 s([
   v()
 ], n.prototype, "_isOpen", 2);
@@ -963,13 +597,13 @@ s([
   v()
 ], n.prototype, "_liveMessage", 2);
 s([
-  x(".field__input")
+  g(".field__input")
 ], n.prototype, "_input", 2);
 s([
-  x(".field__trigger")
+  g(".field__trigger")
 ], n.prototype, "_trigger", 2);
 s([
-  x(".calendar")
+  g(".calendar")
 ], n.prototype, "_calendar", 2);
 n = s([
   D("hx-date-picker")
@@ -977,4 +611,4 @@ n = s([
 export {
   n as H
 };
-//# sourceMappingURL=hx-date-picker-DDcIBJir.js.map
+//# sourceMappingURL=hx-date-picker-6voxxxNE.js.map