@helixui/library 3.6.0 → 3.8.0

package/dist/shared/{hx-copy-button-sUVuikyH.js → hx-copy-button-DJirFCUL.js}

@@ -1,8 +1,8 @@
-import { css as u, html as a, nothing as p } from "lit";
+import { css as u, html as s, nothing as p } from "lit";
 import { property as i, state as d, customElement as b } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
-import { f as v } from "./forced-colors-CTEDFRGa.js";
-import { H as m } from "./helix-element-BNEYeiys.js";
+import { f as m } from "./forced-colors-CTEDFRGa.js";
+import { H as v } from "./helix-element-BNEYeiys.js";
 const x = u`
   :host {
     display: inline-block;
@@ -60,10 +60,13 @@ const x = u`
     font-size: var(--hx-font-size-sm);
   }
 
+  /* md — WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+     Bound to --hx-touch-target-min so the default md variant clears the
+     AAA-strict floor without requiring consumers to opt into sm or lg. */
   .button--md {
     padding: var(--hx-space-2);
-    min-width: var(--hx-size-10);
-    height: var(--hx-size-10);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-md);
   }
 
@@ -156,13 +159,13 @@ const x = u`
     }
   }
 `;
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, n, c, s) => {
-  for (var r = s > 1 ? void 0 : s ? g(n, c) : n, l = e.length - 1, h; l >= 0; l--)
-    (h = e[l]) && (r = (s ? h(n, c, r) : h(r)) || r);
-  return s && r && y(n, c, r), r;
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, n, c, a) => {
+  for (var r = a > 1 ? void 0 : a ? g(n, c) : n, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (r = (a ? h(n, c, r) : h(r)) || r);
+  return a && r && y(n, c, r), r;
 };
 const _ = 300, w = /* @__PURE__ */ new Set(["sm", "md", "lg"]);
-let t = class extends m {
+let t = class extends v {
   constructor() {
     super(...arguments), this.value = "", this.label = "Copy to clipboard", this.feedbackDuration = 2e3, this.size = "md", this.disabled = !1, this.labelCopied = "Copied", this.labelError = "Copy failed", this._copied = !1, this._announcement = "", this._feedbackTimer = null;
   }
@@ -241,16 +244,16 @@ let t = class extends m {
   }
   /** @internal */
   _renderIcon() {
-    return a`
+    return s`
       <span part="icon" class="icon">
-        ${this._copied ? a`<slot name="success-icon"></slot>` : a`<slot name="copy-icon"></slot>`}
+        ${this._copied ? s`<slot name="success-icon"></slot>` : s`<slot name="copy-icon"></slot>`}
       </span>
     `;
   }
   // ─── Render ───
   render() {
     const e = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;
-    return a`
+    return s`
       <button
         part="button"
         class=${f(this._buttonClasses())}
@@ -270,7 +273,7 @@ let t = class extends m {
     `;
   }
 };
-t.styles = [x, v];
+t.styles = [x, m];
 o([
   i({ type: String })
 ], t.prototype, "value", 2);
@@ -304,4 +307,4 @@ t = o([
 export {
   t as H
 };
-//# sourceMappingURL=hx-copy-button-sUVuikyH.js.map
+//# sourceMappingURL=hx-copy-button-DJirFCUL.js.map

package/dist/shared/hx-copy-button-DJirFCUL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-copy-button-DJirFCUL.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2);\n    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-copy-button-bg, transparent);\n    color: var(--hx-copy-button-color, var(--hx-color-primary-500, #429797));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n    font-family: var(--hx-copy-button-font-family, var(--hx-font-family-sans));\n    font-weight: var(--hx-font-weight-medium);\n    white-space: nowrap;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\n  }\n\n  .button:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .button--sm {\n    padding: var(--hx-space-1);\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-sm);\n  }\n\n  /* md — WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.\n     Bound to --hx-touch-target-min so the default md variant clears the\n     AAA-strict floor without requiring consumers to opt into sm or lg. */\n  .button--md {\n    padding: var(--hx-space-2);\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    min-width: var(--hx-size-12);\n    height: var(--hx-size-12);\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Copied / Success State ─── */\n\n  .button--copied {\n    color: var(\n      --hx-copy-button-copied-color,\n      var(--hx-color-success-text, var(--hx-color-success-700, #146831))\n    );\n    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n       A border provides visual differentiation for users with color blindness. */\n    border-color: var(--hx-copy-button-copied-border-color, var(--hx-color-success-500, #3b9e58));\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n    flex-shrink: 0;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  /* ─── Screen Reader Only ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .button {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .button:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .button[disabled] {\n      background-color: ButtonFace;\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    .button--copied {\n      border-color: Highlight;\n      color: Highlight;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCopyButtonStyles } from './hx-copy-button.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\n\n/** Minimum allowed value for feedbackDuration (ms). */\nconst MIN_FEEDBACK_DURATION = 300;\n\n/** Allowed size values for runtime validation. */\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/**\n * A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n *\n * The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n *\n * Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n *\n * @summary One-click clipboard copy with accessible success feedback.\n *\n * @tag hx-copy-button\n *\n * @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n *\n * @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n *   has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: Error}>} hx-copy-error - Dispatched\n *   when the clipboard write fails (permission denied, iframe restriction, etc.).\n *   The `error` detail contains the caught error for diagnostic use.\n *\n * @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n *\n * @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-success-text] - Color.\n * @cssprop [--hx-copy-button-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-filter-brightness-hover] - CSS filter.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-copy-button/AAA-AUDIT.md\n * @keyboard-contract activate=Enter,Space; disabled-suppresses=true\n * @aria-pattern button\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/button/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-copy-button\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends HelixElement {\n  static override styles = [helixCopyButtonStyles, forcedColorsInteractive];\n\n  // ─── Public Properties ───\n\n  /**\n   * The text value to write to the clipboard on click. Required for the\n   * component to perform a copy operation.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Accessible label applied as `aria-label` and `title` on the button.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Copy to clipboard';\n\n  /**\n   * Duration in milliseconds to display the success (copied) state before\n   * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n   * to ensure the success announcement remains visible long enough for\n   * assistive technology and human perception.\n   * @attr feedback-duration\n   */\n  @property({ type: Number, attribute: 'feedback-duration' })\n  feedbackDuration = 2000;\n\n  /**\n   * Visual size of the button. Maps to fixed height and padding tokens.\n   * Accepts: 'sm' | 'md' | 'lg'. Invalid values are silently coerced to 'md'.\n   *\n   * **Accessibility (WCAG 2.5.8):** The `sm` variant uses `--hx-size-8` for\n   * its minimum width and height. Ensure this token resolves to at least 24×24 px\n   * (WCAG 2.5.8 AA minimum target size). For touch-primary interfaces such as\n   * mobile clinical apps, prefer `md` or `lg` to meet the 44×44 px recommended\n   * target size (WCAG 2.5.5 AAA / Apple HIG / Android guidelines).\n   *\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the button is disabled. When true, click events are suppressed\n   * and clipboard writes do not occur.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Text announced to screen readers and appended to aria-label after a\n   * successful copy. Also used as the content of the aria-live announcement.\n   * @attr label-copied\n   */\n  @property({ type: String, attribute: 'label-copied' })\n  labelCopied = 'Copied';\n\n  /**\n   * Accessible label announced when copy fails. Override for i18n.\n   * @attr label-error\n   */\n  @property({ type: String, attribute: 'label-error' })\n  labelError = 'Copy failed';\n\n  // ─── Private State ───\n\n  /** True while the success feedback window is active. */\n  /** @internal */\n  @state() private _copied = false;\n\n  /** Non-empty string shown in the aria-live region; cleared when not active. */\n  /** @internal */\n  @state() private _announcement = '';\n\n  /** Timeout handle used to revert the copied state. */\n  /** @internal */\n  private _feedbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearFeedbackTimer();\n  }\n\n  // ─── Private Helpers ───\n\n  /**\n   * Returns the effective feedback duration, clamped to the minimum allowed\n   * value. Prevents zero/negative timeouts that would cause the success state\n   * to immediately revert with no visible or audible feedback.\n   */\n  /** @internal */\n  private _effectiveDuration(): number {\n    return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n  }\n\n  /**\n   * Returns the effective size, falling back to 'md' if the runtime value is\n   * not in the set of valid sizes. Prevents `button--xl` and similar class\n   * names that have no matching CSS rule.\n   */\n  /** @internal */\n  private _effectiveSize(): 'sm' | 'md' | 'lg' {\n    return VALID_SIZES.has(this.size) ? this.size : 'md';\n  }\n\n  /** @internal */\n  private _clearFeedbackTimer(): void {\n    if (this._feedbackTimer !== null) {\n      clearTimeout(this._feedbackTimer);\n      this._feedbackTimer = null;\n    }\n  }\n\n  /** @internal */\n  private async _copyToClipboard(): Promise<void> {\n    await navigator?.clipboard?.writeText(this.value);\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    void this._performCopy();\n  }\n\n  /** @internal */\n  private async _performCopy(): Promise<void> {\n    try {\n      await this._copyToClipboard();\n    } catch (error: unknown) {\n      // Clipboard write failed — notify consumers and announce failure.\n      this._announcement = this.labelError;\n\n      /**\n       * Dispatched when the clipboard write fails (permission denied, iframe\n       * restriction, browser security policy, etc.).\n       * @event hx-copy-error\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ value: string; error: Error }>('hx-copy-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            value: this.value,\n            error: error instanceof Error ? error : new Error(String(error)),\n          },\n        }),\n      );\n      return;\n    }\n\n    this._clearFeedbackTimer();\n    this._copied = true;\n    this._announcement = this.labelCopied;\n\n    /**\n     * Dispatched after the value has been successfully written to the\n     * clipboard.\n     * @event hx-copy\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n\n    this._feedbackTimer = setTimeout(() => {\n      this._copied = false;\n      this._announcement = '';\n      this._feedbackTimer = null;\n    }, this._effectiveDuration());\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _buttonClasses() {\n    const size = this._effectiveSize();\n    return {\n      button: true,\n      [`button--${size}`]: true,\n      'button--copied': this._copied,\n    };\n  }\n\n  /** @internal */\n  private _renderIcon() {\n    // Show success-icon slot when copied, copy-icon slot otherwise.\n    return html`\n      <span part=\"icon\" class=\"icon\">\n        ${this._copied\n          ? html`<slot name=\"success-icon\"></slot>`\n          : html`<slot name=\"copy-icon\"></slot>`}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Reflect copied state in aria-label so re-focused button has an accurate\n    // accessible name (WCAG 1.3.1). The live region handles the initial\n    // announcement; this covers re-focus scenarios.\n    const ariaLabel = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._buttonClasses())}\n        type=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=${ariaLabel}\n        title=${this.label}\n        @click=${this._handleClick}\n      >\n        ${this._renderIcon()}\n        <slot></slot>\n      </button>\n\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n        ${this._announcement || nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-copy-button': HelixCopyButton;\n  }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","HelixElement","_a","error","html","ariaLabel","classMap","nothing","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-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";
@@ -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) {
@@ -545,8 +553,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 +665,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 +1007,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 +1027,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 +1076,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 +1088,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 +1101,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 +1116,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 +1128,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>
@@ -1288,58 +1296,58 @@ l.styles = [J, V];
 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 +1403,4 @@ l = n([
 export {
   l as H
 };
-//# sourceMappingURL=hx-date-picker-B49yo4Vm.js.map
+//# sourceMappingURL=hx-date-picker-0PtEav0K.js.map