@helixui/library 1.1.1 → 1.1.2-next.2

package/dist/shared/hx-patient-banner-BoJHddAL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-patient-banner-BoJHddAL.js","sources":["../../src/components/hx-patient-banner/hx-patient-banner.styles.ts","../../src/components/hx-patient-banner/hx-patient-banner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPatientBannerStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n\n    /* ─── Private token vars (3-tier cascade) ─── */\n    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f9fafb));\n    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e5e7eb));\n    --_padding: var(\n      --hx-patient-banner-padding,\n      var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)\n    );\n    --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));\n    --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));\n    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #6b7280));\n    --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));\n    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #111827));\n    --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));\n    --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Banner Container ─── */\n\n  .banner {\n    display: flex;\n    align-items: center;\n    gap: var(--_gap);\n    padding: var(--_padding);\n    background-color: var(--_bg);\n    border-bottom: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n    font-family: var(--_font-family);\n    width: 100%;\n  }\n\n  /* ─── Photo Area ─── */\n\n  .banner__photo-area {\n    flex-shrink: 0;\n    width: var(--_photo-size);\n    height: var(--_photo-size);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--hx-color-neutral-200, #e5e7eb);\n  }\n\n  /* ─── Fields Grid ─── */\n\n  .banner__fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--_gap);\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* ─── Individual Field ─── */\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    min-width: 0;\n  }\n\n  .field__label {\n    font-size: var(--_label-font-size);\n    color: var(--_label-color);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-tight, 1.25);\n    white-space: nowrap;\n  }\n\n  .field__value {\n    font-size: var(--_value-font-size);\n    color: var(--_value-color);\n    font-weight: var(--hx-font-weight-normal, 400);\n    line-height: var(--hx-line-height-normal, 1.5);\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  /* ─── Identifier Rule Violation ─── */\n  /* Visual indicator when Joint Commission two-identifier rule is not met. */\n\n  :host([aria-invalid='true']) .banner {\n    border-bottom-color: var(--hx-color-error-400, #f87171);\n    background-color: var(--hx-color-error-50, #fef2f2);\n    /* Darken label color to maintain 4.5:1 contrast on error-50 background */\n    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #374151));\n    position: relative;\n  }\n\n  :host([aria-invalid='true']) .banner::before {\n    content: '';\n    display: block;\n    position: absolute;\n    inset-inline-start: 0;\n    top: 0;\n    bottom: 0;\n    width: var(--hx-border-width-thick, 4px);\n    background-color: var(--hx-color-error-500, #ef4444);\n    border-radius: 0;\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixPatientBannerStyles } from './hx-patient-banner.styles.js';\n\n/**\n * Patient identification banner implementing Joint Commission NPSG.01.01.01 two-identifier rule.\n * Renders as a landmark region containing named slots for patient identification fields.\n * Integrates with hx-phi-field for HIPAA-compliant display of masked identifiers.\n * Note: hx-phi-access events fired by slotted hx-phi-field elements bubble through this\n * component via composed: true — no re-dispatch is required.\n *\n * @summary Patient identification banner with two-identifier rule enforcement.\n *\n * @tag hx-patient-banner\n *\n * @slot photo - Optional patient photo slot.\n * @slot name - Patient name field content.\n * @slot mrn - Medical record number field content. Use hx-phi-field for HIPAA compliance.\n * @slot dob - Date of birth field content. Use hx-phi-field for HIPAA compliance.\n * @slot allergies - Allergy status/flag content.\n * @slot code-status - Code status content.\n *\n * @csspart banner - The outer banner container.\n * @csspart photo-area - The photo slot wrapper.\n * @csspart fields - The fields grid container.\n * @csspart field - An individual field container (applied to all field wrappers).\n * @csspart field-label - The field label element.\n * @csspart field-value - The field value slot wrapper.\n *\n * @fires {CustomEvent<PatientIdentifierRuleViolationDetail>} hx-identifier-rule-violation - Fired when fewer than 2 identifier slots are populated and enforce-identifier-rule is true.\n *\n * @cssprop [--hx-patient-banner-bg=var(--hx-color-neutral-50,#f9fafb)] - Banner background color.\n * @cssprop [--hx-patient-banner-border-color=var(--hx-color-neutral-200,#e5e7eb)] - Banner border color.\n * @cssprop [--hx-patient-banner-padding=var(--hx-space-3,0.75rem) var(--hx-space-4,1rem)] - Banner padding.\n * @cssprop [--hx-patient-banner-gap=var(--hx-space-4,1rem)] - Gap between banner fields.\n * @cssprop [--hx-patient-banner-font-family=var(--hx-font-family-sans,sans-serif)] - Banner font family.\n * @cssprop [--hx-patient-banner-label-color=var(--hx-color-neutral-500,#6b7280)] - Field label color.\n * @cssprop [--hx-patient-banner-label-font-size=var(--hx-font-size-xs,0.75rem)] - Field label font size.\n * @cssprop [--hx-patient-banner-value-color=var(--hx-color-neutral-900,#111827)] - Field value color.\n * @cssprop [--hx-patient-banner-value-font-size=var(--hx-font-size-sm,0.875rem)] - Field value font size.\n * @cssprop [--hx-patient-banner-photo-size=var(--hx-space-10,2.5rem)] - Photo area size.\n */\n@customElement('hx-patient-banner')\nexport class HelixPatientBanner extends LitElement {\n  static override styles = [tokenStyles, helixPatientBannerStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Optional patient ID used as context in identifier rule violation events.\n   * @attr patient-id\n   */\n  @property({ type: String, attribute: 'patient-id' })\n  patientId: string = '';\n\n  /**\n   * Accessible label for the banner landmark region.\n   * @attr label-patient\n   */\n  @property({ type: String, attribute: 'label-patient' })\n  labelPatient: string = 'Patient identification';\n\n  /**\n   * Visible label for the name field.\n   * @attr label-name\n   */\n  @property({ type: String, attribute: 'label-name' })\n  labelName: string = 'Patient name';\n\n  /**\n   * Visible label for the MRN field.\n   * @attr label-mrn\n   */\n  @property({ type: String, attribute: 'label-mrn' })\n  labelMrn: string = 'MRN';\n\n  /**\n   * Visible label for the date of birth field.\n   * @attr label-dob\n   */\n  @property({ type: String, attribute: 'label-dob' })\n  labelDob: string = 'Date of birth';\n\n  /**\n   * Visible label for the allergies field.\n   * @attr label-allergies\n   */\n  @property({ type: String, attribute: 'label-allergies' })\n  labelAllergies: string = 'Allergies';\n\n  /**\n   * Visible label for the code status field.\n   * @attr label-code-status\n   */\n  @property({ type: String, attribute: 'label-code-status' })\n  labelCodeStatus: string = 'Code status';\n\n  /**\n   * Whether to enforce the Joint Commission NPSG.01.01.01 two-identifier rule.\n   * When true, fires hx-identifier-rule-violation if fewer than 2 identifier\n   * slots (name, mrn, dob) are populated.\n   * @attr enforce-identifier-rule\n   */\n  @property({\n    attribute: 'enforce-identifier-rule',\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => value !== 'false',\n      toAttribute: (value: boolean) => String(value),\n    },\n  })\n  enforceIdentifierRule: boolean = true;\n\n  // ─── Internal State ───\n\n  @state() private _identifierCount: number = 0;\n\n  // ─── Slot Queries ───\n\n  @query('slot[name=\"name\"]') private _nameSlot!: HTMLSlotElement;\n  @query('slot[name=\"mrn\"]') private _mrnSlot!: HTMLSlotElement;\n  @query('slot[name=\"dob\"]') private _dobSlot!: HTMLSlotElement;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'banner');\n    this.setAttribute('aria-label', this.labelPatient);\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('labelPatient')) {\n      this.setAttribute('aria-label', this.labelPatient);\n    }\n\n    if (changedProperties.has('enforceIdentifierRule')) {\n      this._checkIdentifierRule();\n    }\n  }\n\n  // ─── Private Helpers ───\n\n  private _countPopulatedIdentifiers(): number {\n    let count = 0;\n\n    const slots = [this._nameSlot, this._mrnSlot, this._dobSlot];\n    for (const slot of slots) {\n      if (slot && slot.assignedNodes({ flatten: true }).length > 0) {\n        count++;\n      }\n    }\n\n    return count;\n  }\n\n  private _checkIdentifierRule(): void {\n    const count = this._countPopulatedIdentifiers();\n    this._identifierCount = count;\n\n    if (this.enforceIdentifierRule && count < 2) {\n      this.setAttribute('aria-invalid', 'true');\n      this.dispatchEvent(\n        new CustomEvent<PatientIdentifierRuleViolationDetail>('hx-identifier-rule-violation', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            populatedIdentifiers: count,\n            requiredIdentifiers: 2,\n            patientId: this.patientId,\n          },\n        }),\n      );\n    } else {\n      this.removeAttribute('aria-invalid');\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleSlotChange(): void {\n    this._checkIdentifierRule();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"banner\" class=\"banner\">\n        <div part=\"photo-area\" class=\"banner__photo-area\">\n          <slot name=\"photo\"></slot>\n        </div>\n\n        <div part=\"fields\" class=\"banner__fields\">\n          <div part=\"field\" class=\"field\">\n            <span part=\"field-label\" class=\"field__label\">${this.labelName}</span>\n            <div part=\"field-value\" class=\"field__value\">\n              <slot name=\"name\" @slotchange=${this._handleSlotChange}></slot>\n            </div>\n          </div>\n\n          <div part=\"field\" class=\"field\">\n            <span part=\"field-label\" class=\"field__label\">${this.labelMrn}</span>\n            <div part=\"field-value\" class=\"field__value\">\n              <slot name=\"mrn\" @slotchange=${this._handleSlotChange}></slot>\n            </div>\n          </div>\n\n          <div part=\"field\" class=\"field\">\n            <span part=\"field-label\" class=\"field__label\">${this.labelDob}</span>\n            <div part=\"field-value\" class=\"field__value\">\n              <slot name=\"dob\" @slotchange=${this._handleSlotChange}></slot>\n            </div>\n          </div>\n\n          <div part=\"field\" class=\"field\">\n            <span part=\"field-label\" class=\"field__label\">${this.labelAllergies}</span>\n            <div part=\"field-value\" class=\"field__value\">\n              <slot name=\"allergies\"></slot>\n            </div>\n          </div>\n\n          <div part=\"field\" class=\"field\">\n            <span part=\"field-label\" class=\"field__label\">${this.labelCodeStatus}</span>\n            <div part=\"field-value\" class=\"field__value\">\n              <slot name=\"code-status\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport interface PatientIdentifierRuleViolationDetail {\n  populatedIdentifiers: number;\n  requiredIdentifiers: number;\n  patientId: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-patient-banner': HelixPatientBanner;\n  }\n}\n"],"names":["helixPatientBannerStyles","css","HelixPatientBanner","LitElement","changedProperties","count","slots","slot","html","tokenStyles","__decorateClass","property","value","state","query","customElement"],"mappings":"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"}

package/dist/shared/hx-phi-field-EDWna59z.js

@@ -0,0 +1,261 @@
+import { css as c, LitElement as p, html as n } from "lit";
+import { property as h, state as u, customElement as f } from "lit/decorators.js";
+import { tokenStyles as m } from "@helixui/tokens/lit";
+const _ = c`
+  :host {
+    display: inline-flex;
+  }
+
+  /* ─── Container ─── */
+
+  .phi-field {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    font-family: var(--hx-phi-field-font-family, var(--hx-font-family-mono, monospace));
+  }
+
+  /* ─── Value ─── */
+
+  .phi-field__value--masked {
+    user-select: none;
+    -webkit-user-select: none;
+    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #6b7280));
+    letter-spacing: 0.1em;
+  }
+
+  .phi-field__value--revealed {
+    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #111827));
+  }
+
+  /* ─── Screen Reader Status ─── */
+
+  .phi-field__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    padding: 0;
+    margin: -1px;
+  }
+
+  /* ─── Toggle Button ─── */
+
+  .phi-field__toggle {
+    display: inline-flex;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: var(--hx-space-1, 0.25rem);
+    color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));
+    cursor: pointer;
+    line-height: 1;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  .phi-field__toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-phi-field-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .phi-field__toggle:hover {
+    opacity: var(--hx-opacity-90, 0.9);
+  }
+
+  .phi-field__toggle:active {
+    opacity: var(--hx-opacity-50, 0.5);
+  }
+
+  .phi-field__toggle svg {
+    width: 1em;
+    height: 1em;
+    pointer-events: none;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .phi-field__toggle {
+      transition: none;
+    }
+  }
+`;
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, d, l) => {
+  for (var i = l > 1 ? void 0 : l ? g(t, d) : t, r = e.length - 1, s; r >= 0; r--)
+    (s = e[r]) && (i = (l ? s(t, d, i) : s(i)) || i);
+  return l && i && v(t, d, i), i;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.data = "", this.fieldType = "ssn", this.fieldId = "", this.clipboardTimeout = 3e4, this._masked = !0, this._clipboardTimer = null;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("autocomplete", "off");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cancelClipboardTimer();
+  }
+  // ─── Private Helpers ───
+  _cancelClipboardTimer() {
+    this._clipboardTimer !== null && (clearTimeout(this._clipboardTimer), this._clipboardTimer = null);
+  }
+  _scheduleClipboardClear() {
+    this._cancelClipboardTimer(), this._clipboardTimer = setTimeout(() => {
+      this._clearClipboard();
+    }, this.clipboardTimeout);
+  }
+  _clearClipboard() {
+    var e;
+    this._clipboardTimer = null, typeof navigator < "u" && navigator.clipboard && ((e = navigator == null ? void 0 : navigator.clipboard) == null || e.writeText("").catch(() => {
+    })), this.dispatchEvent(
+      new CustomEvent("hx-phi-access", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          fieldId: this.fieldId || this.id || "",
+          action: "hide",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          fieldType: this.fieldType
+        }
+      })
+    ), this._masked = !0;
+  }
+  _getMaskedValue() {
+    if (!this.data) return "";
+    switch (this.fieldType) {
+      case "ssn": {
+        const e = this.data.match(/^(\d{3})(-?)(\d{2})(-?)(\d{4})$/);
+        return e ? `***${e[2]}**${e[4]}${e[5]}` : this.data.slice(0, -4).replace(/\d/g, "*") + this.data.slice(-4);
+      }
+      case "mrn": {
+        const e = this.data.split(""), t = [];
+        e.forEach((r, s) => {
+          /[a-zA-Z0-9]/.test(r) && t.push(s);
+        });
+        const d = Math.min(4, t.length), l = t.length - d, i = new Set(t.slice(0, l));
+        return e.map((r, s) => i.has(s) ? "*" : r).join("");
+      }
+      case "dob":
+        return this.data.replace(/\d/g, "*");
+      case "insurance": {
+        const e = this.data.match(/^(\d{4})(-?)(\d{4})(-?)(\d{4})(-?)(\d{4})$/);
+        return e ? `****${e[2]}****${e[4]}****${e[6]}${e[7]}` : this.data.slice(0, -4).replace(/[a-zA-Z0-9]/g, "*") + this.data.slice(-4);
+      }
+      default:
+        return this.fieldType;
+    }
+  }
+  // ─── Event Handlers ───
+  _handleToggle() {
+    this.dispatchEvent(
+      new CustomEvent("hx-phi-access", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          fieldId: this.fieldId || this.id || "",
+          action: this._masked ? "reveal" : "hide",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          fieldType: this.fieldType
+        }
+      })
+    ), this._masked ? (this._masked = !1, this._scheduleClipboardClear()) : (this._cancelClipboardTimer(), this._masked = !0);
+  }
+  _handleCopy(e) {
+    this._masked && e.preventDefault();
+  }
+  _handlePaste(e) {
+    this._masked && e.preventDefault();
+  }
+  // ─── Render Helpers ───
+  _renderEyeIcon() {
+    return n`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    `;
+  }
+  _renderEyeOffIcon() {
+    return n`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+        <line x1="1" y1="1" x2="23" y2="23" />
+      </svg>
+    `;
+  }
+  // ─── Render ───
+  render() {
+    return n`
+      <div part="container" class="phi-field" @copy=${this._handleCopy} @paste=${this._handlePaste}>
+        ${this._masked ? n`<span part="value" class="phi-field__value phi-field__value--masked"
+              >${this._getMaskedValue()}</span
+            >` : n`<span part="value" class="phi-field__value phi-field__value--revealed"
+              >${this.data}</span
+            >`}
+        <span role="status" aria-live="polite" aria-atomic="true" class="phi-field__status">
+          ${this._masked ? "Protected health information is masked" : "Protected health information is revealed"}
+        </span>
+        <button
+          part="toggle"
+          class="phi-field__toggle"
+          type="button"
+          aria-label=${this._masked ? "Reveal protected health information" : "Hide protected health information"}
+          aria-pressed=${String(!this._masked)}
+          @click=${this._handleToggle}
+        >
+          ${this._masked ? this._renderEyeIcon() : this._renderEyeOffIcon()}
+        </button>
+      </div>
+    `;
+  }
+};
+a.styles = [m, _];
+o([
+  h({ type: String })
+], a.prototype, "data", 2);
+o([
+  h({ type: String, reflect: !0, attribute: "field-type" })
+], a.prototype, "fieldType", 2);
+o([
+  h({ type: String, attribute: "field-id" })
+], a.prototype, "fieldId", 2);
+o([
+  h({ type: Number, attribute: "clipboard-timeout" })
+], a.prototype, "clipboardTimeout", 2);
+o([
+  u()
+], a.prototype, "_masked", 2);
+a = o([
+  f("hx-phi-field")
+], a);
+export {
+  a as H
+};
+//# sourceMappingURL=hx-phi-field-EDWna59z.js.map

package/dist/shared/hx-phi-field-EDWna59z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-phi-field-EDWna59z.js","sources":["../../src/components/hx-phi-field/hx-phi-field.styles.ts","../../src/components/hx-phi-field/hx-phi-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPhiFieldStyles = css`\n  :host {\n    display: inline-flex;\n  }\n\n  /* ─── Container ─── */\n\n  .phi-field {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-phi-field-font-family, var(--hx-font-family-mono, monospace));\n  }\n\n  /* ─── Value ─── */\n\n  .phi-field__value--masked {\n    user-select: none;\n    -webkit-user-select: none;\n    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #6b7280));\n    letter-spacing: 0.1em;\n  }\n\n  .phi-field__value--revealed {\n    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #111827));\n  }\n\n  /* ─── Screen Reader Status ─── */\n\n  .phi-field__status {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n    padding: 0;\n    margin: -1px;\n  }\n\n  /* ─── Toggle Button ─── */\n\n  .phi-field__toggle {\n    display: inline-flex;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: var(--hx-space-1, 0.25rem);\n    color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));\n    cursor: pointer;\n    line-height: 1;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  .phi-field__toggle:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-phi-field-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .phi-field__toggle:hover {\n    opacity: var(--hx-opacity-90, 0.9);\n  }\n\n  .phi-field__toggle:active {\n    opacity: var(--hx-opacity-50, 0.5);\n  }\n\n  .phi-field__toggle svg {\n    width: 1em;\n    height: 1em;\n    pointer-events: none;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .phi-field__toggle {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixPhiFieldStyles } from './hx-phi-field.styles.js';\n\n/**\n * HIPAA-compliant field component for rendering masked Protected Health Information (PHI).\n * PHI is masked by default and only rendered to the DOM when explicitly revealed. Access\n * events are fired on reveal, hide, and clipboard auto-clear for audit trail purposes.\n *\n * @summary HIPAA-compliant field for rendering masked Protected Health Information.\n *\n * @tag hx-phi-field\n *\n * @csspart container - The outer wrapper element.\n * @csspart value - The value display span (masked or revealed).\n * @csspart toggle - The reveal/hide toggle button.\n *\n * @fires {CustomEvent<PhiAccessEventDetail>} hx-phi-access - Fired on reveal, hide, and clipboard auto-clear.\n *\n * @cssprop [--hx-phi-field-font-family=var(--hx-font-family-mono,monospace)] - Font family for the masked value.\n * @cssprop [--hx-phi-field-value-color=var(--hx-color-neutral-900,#111827)] - Value text color.\n * @cssprop [--hx-phi-field-masked-color=var(--hx-color-neutral-500,#6b7280)] - Masked value text color.\n * @cssprop [--hx-phi-field-toggle-color=var(--hx-color-primary-500,#2563eb)] - Toggle button color.\n * @cssprop [--hx-phi-field-focus-ring-color=var(--hx-focus-ring-color,var(--hx-color-primary-500,#2563eb))] - Focus ring color.\n */\n@customElement('hx-phi-field')\nexport class HelixPhiField extends LitElement {\n  static override styles = [tokenStyles, helixPhiFieldStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The Protected Health Information value to display or mask.\n   * @attr data\n   */\n  @property({ type: String })\n  data: string = '';\n\n  /**\n   * The type of PHI field. Controls the masking pattern applied.\n   * @attr field-type\n   */\n  @property({ type: String, reflect: true, attribute: 'field-type' })\n  fieldType: 'ssn' | 'mrn' | 'dob' | 'insurance' = 'ssn';\n\n  /**\n   * Identifier used in audit events. Falls back to the element's id attribute.\n   * @attr field-id\n   */\n  @property({ type: String, attribute: 'field-id' })\n  fieldId: string = '';\n\n  /**\n   * Milliseconds after clipboard write before the clipboard is automatically cleared.\n   * Defaults to 30000 (30 seconds).\n   * @attr clipboard-timeout\n   */\n  @property({ type: Number, attribute: 'clipboard-timeout' })\n  clipboardTimeout: number = 30000;\n\n  // ─── Internal State ───\n\n  @state() private _masked = true;\n\n  private _clipboardTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Enforce HIPAA compliance: prevent browser autofill on the host element\n    this.setAttribute('autocomplete', 'off');\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cancelClipboardTimer();\n  }\n\n  // ─── Private Helpers ───\n\n  private _cancelClipboardTimer(): void {\n    if (this._clipboardTimer !== null) {\n      clearTimeout(this._clipboardTimer);\n      this._clipboardTimer = null;\n    }\n  }\n\n  private _scheduleClipboardClear(): void {\n    this._cancelClipboardTimer();\n    this._clipboardTimer = setTimeout(() => {\n      this._clearClipboard();\n    }, this.clipboardTimeout);\n  }\n\n  private _clearClipboard(): void {\n    this._clipboardTimer = null;\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator?.clipboard?.writeText('').catch(() => {\n        // Clipboard clear failure is non-fatal — silently ignore\n      });\n    }\n    this.dispatchEvent(\n      new CustomEvent<PhiAccessEventDetail>('hx-phi-access', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          fieldId: this.fieldId || this.id || '',\n          action: 'hide',\n          timestamp: new Date().toISOString(),\n          fieldType: this.fieldType,\n        },\n      }),\n    );\n    this._masked = true;\n  }\n\n  private _getMaskedValue(): string {\n    if (!this.data) return '';\n\n    switch (this.fieldType) {\n      case 'ssn': {\n        // Format: xxx-xx-xxxx → ***-**-xxxx (show last 4 digits)\n        // Match the separator-delimited pattern first\n        const ssnMatch = this.data.match(/^(\\d{3})(-?)(\\d{2})(-?)(\\d{4})$/);\n        if (ssnMatch) {\n          return `***${ssnMatch[2]}**${ssnMatch[4]}${ssnMatch[5]}`;\n        }\n        // Fallback: mask all but last 4 chars\n        return this.data.slice(0, -4).replace(/\\d/g, '*') + this.data.slice(-4);\n      }\n\n      case 'mrn': {\n        // Mask all but last 4 alphanumeric characters, preserve separators\n        const chars = this.data.split('');\n        const alphanumericIndices: number[] = [];\n        chars.forEach((ch, i) => {\n          if (/[a-zA-Z0-9]/.test(ch)) {\n            alphanumericIndices.push(i);\n          }\n        });\n        const revealCount = Math.min(4, alphanumericIndices.length);\n        const maskUntilIdx = alphanumericIndices.length - revealCount;\n        const indicesToMask = new Set(alphanumericIndices.slice(0, maskUntilIdx));\n        return chars.map((ch, i) => (indicesToMask.has(i) ? '*' : ch)).join('');\n      }\n\n      case 'dob': {\n        // Replace ALL digits with *, preserve separators\n        return this.data.replace(/\\d/g, '*');\n      }\n\n      case 'insurance': {\n        // Format: xxxx-xxxx-xxxx-xxxx → ****-****-****-xxxx (show last 4 digits)\n        const insMatch = this.data.match(/^(\\d{4})(-?)(\\d{4})(-?)(\\d{4})(-?)(\\d{4})$/);\n        if (insMatch) {\n          return `****${insMatch[2]}****${insMatch[4]}****${insMatch[6]}${insMatch[7]}`;\n        }\n        // Fallback: mask all but last 4 chars\n        return this.data.slice(0, -4).replace(/[a-zA-Z0-9]/g, '*') + this.data.slice(-4);\n      }\n\n      default: {\n        // Exhaustive check — fieldType is typed, but guard defensively\n        const _exhaustive: never = this.fieldType;\n        return _exhaustive;\n      }\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleToggle(): void {\n    // Dispatch BEFORE toggling state so action reflects the upcoming state\n    this.dispatchEvent(\n      new CustomEvent<PhiAccessEventDetail>('hx-phi-access', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          fieldId: this.fieldId || this.id || '',\n          action: this._masked ? 'reveal' : 'hide',\n          timestamp: new Date().toISOString(),\n          fieldType: this.fieldType,\n        },\n      }),\n    );\n\n    if (this._masked) {\n      // Revealing: start clipboard clear timer\n      this._masked = false;\n      this._scheduleClipboardClear();\n    } else {\n      // Hiding: cancel any pending clipboard clear\n      this._cancelClipboardTimer();\n      this._masked = true;\n    }\n  }\n\n  private _handleCopy(e: ClipboardEvent): void {\n    if (this._masked) {\n      e.preventDefault();\n    }\n  }\n\n  private _handlePaste(e: ClipboardEvent): void {\n    if (this._masked) {\n      e.preventDefault();\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderEyeIcon(): TemplateResult {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n        <circle cx=\"12\" cy=\"12\" r=\"3\" />\n      </svg>\n    `;\n  }\n\n  private _renderEyeOffIcon(): TemplateResult {\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\" />\n        <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\" />\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"container\" class=\"phi-field\" @copy=${this._handleCopy} @paste=${this._handlePaste}>\n        ${this._masked\n          ? html`<span part=\"value\" class=\"phi-field__value phi-field__value--masked\"\n              >${this._getMaskedValue()}</span\n            >`\n          : html`<span part=\"value\" class=\"phi-field__value phi-field__value--revealed\"\n              >${this.data}</span\n            >`}\n        <span role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"phi-field__status\">\n          ${this._masked\n            ? 'Protected health information is masked'\n            : 'Protected health information is revealed'}\n        </span>\n        <button\n          part=\"toggle\"\n          class=\"phi-field__toggle\"\n          type=\"button\"\n          aria-label=${this._masked\n            ? 'Reveal protected health information'\n            : 'Hide protected health information'}\n          aria-pressed=${String(!this._masked)}\n          @click=${this._handleToggle}\n        >\n          ${this._masked ? this._renderEyeIcon() : this._renderEyeOffIcon()}\n        </button>\n      </div>\n    `;\n  }\n}\n\nexport interface PhiAccessEventDetail {\n  fieldId: string;\n  action: 'reveal' | 'hide';\n  timestamp: string;\n  fieldType: 'ssn' | 'mrn' | 'dob' | 'insurance';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-phi-field': HelixPhiField;\n  }\n}\n"],"names":["helixPhiFieldStyles","css","HelixPhiField","LitElement","_a","ssnMatch","chars","alphanumericIndices","ch","i","revealCount","maskUntilIdx","indicesToMask","insMatch","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-popover-DxE67miP.js → hx-popover-D6kYQkt3.js}

@@ -1,8 +1,7 @@
-import { css as x, LitElement as E, html as y } from "lit";
-import { property as l, state as A, customElement as k } from "lit/decorators.js";
-import { tokenStyles as S } from "@helixui/tokens/lit";
-import { offset as $, flip as C, shift as T, arrow as F, computePosition as P } from "@floating-ui/dom";
-const D = x`
+import { css as k, LitElement as H, nothing as $, html as g } from "lit";
+import { property as d, state as C, customElement as P } from "lit/decorators.js";
+import { tokenStyles as D } from "@helixui/tokens/lit";
+const F = k`
   :host {
     /* P2-05: display:contents lets the trigger-wrapper control layout inline;
        position:relative was vestigial — body uses position:fixed via Floating UI */
@@ -65,23 +64,28 @@ const D = x`
   }
 `;
 var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, h = (e, t, r, o) => {
-  for (var i = o > 1 ? void 0 : o ? M(t, r) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (o ? n(t, r, i) : n(i)) || i);
+  for (var i = o > 1 ? void 0 : o ? M(t, r) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (i = (o ? s(t, r, i) : s(i)) || i);
   return o && i && L(t, r, i), i;
 };
-let R = 0, a = class extends E {
+let R = 0, a = class extends H {
   constructor() {
-    super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this.distance = 8, this.skidding = 0, this.arrow = !1, this.label = "Popover", this._visible = !1, this._previousFocus = null, this._popoverId = `hx-popover-${++R}`, this._showTimer = null, this._handleFocusTrap = (e) => {
-      var n, d, c;
-      if (e.key !== "Tab" || !this._visible) return;
-      const t = this._getFocusableElements();
-      if (t.length === 0) return;
-      const r = (n = this.shadowRoot) == null ? void 0 : n.querySelector('[part="body"]'), o = r ? [r, ...t] : t;
-      if (o.length === 0) return;
-      const i = o[0], s = o[o.length - 1];
-      e.shiftKey ? (document.activeElement === i || ((d = this.shadowRoot) == null ? void 0 : d.activeElement) === i) && (e.preventDefault(), s.focus()) : (document.activeElement === s || ((c = this.shadowRoot) == null ? void 0 : c.activeElement) === s) && (e.preventDefault(), i.focus());
-    }, this._handleDocumentKeydown = (e) => {
-      e.key === "Escape" && this._visible && this._hide(!0);
+    super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this.distance = 8, this.skidding = 0, this.arrow = !1, this.label = "Popover", this._visible = !1, this._previousFocus = null, this._popoverId = `hx-popover-${++R}`, this._showTimer = null, this._hoverHideTimer = null, this._handleDocumentKeydown = (e) => {
+      var t, r, o;
+      if (this._visible) {
+        if (e.key === "Escape") {
+          this._hide(!0);
+          return;
+        }
+        if (e.key === "Tab") {
+          const i = this._getFocusableElements();
+          if (i.length === 0) return;
+          const n = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="body"]'), s = n ? [n, ...i] : i;
+          if (s.length === 0) return;
+          const l = s[0], c = s[s.length - 1];
+          e.shiftKey ? (document.activeElement === l || ((r = this.shadowRoot) == null ? void 0 : r.activeElement) === l) && (e.preventDefault(), c.focus()) : (document.activeElement === c || ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === c) && (e.preventDefault(), l.focus());
+        }
+      }
     }, this._handleDocumentClick = (e) => {
       e.target !== this && !this.contains(e.target) && this._hide(!1);
     }, this._handleAnchorClick = () => {
@@ -89,11 +93,11 @@ let R = 0, a = class extends E {
     }, this._handleAnchorMouseEnter = () => {
       this.trigger === "hover" && this._show();
     }, this._handleAnchorMouseLeave = () => {
-      this.trigger === "hover" && this._hide(!1);
+      this.trigger === "hover" && this._scheduleHoverHide();
     }, this._handleBodyMouseEnter = () => {
-      this.trigger === "hover" && this._show();
+      this.trigger === "hover" && this._cancelHoverHide();
     }, this._handleBodyMouseLeave = () => {
-      this.trigger === "hover" && this._hide(!1);
+      this.trigger === "hover" && this._scheduleHoverHide();
     }, this._handleAnchorFocusIn = () => {
       this.trigger !== "focus" && this.trigger !== "hover" || this._show();
     }, this._handleAnchorFocusOut = (e) => {
@@ -105,7 +109,7 @@ let R = 0, a = class extends E {
   }
   // ─── Lifecycle ───
   disconnectedCallback() {
-    super.disconnectedCallback(), this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown), document.removeEventListener("keydown", this._handleFocusTrap);
+    super.disconnectedCallback(), this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), this._hoverHideTimer !== null && (clearTimeout(this._hoverHideTimer), this._hoverHideTimer = null), document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown);
   }
   firstUpdated() {
     this._setAnchorAriaAttributes(!1), this.open && this._show();
@@ -129,16 +133,16 @@ let R = 0, a = class extends E {
   /** Return all keyboard-focusable elements inside the popover body's slotted content. */
   /** @internal */
   _getFocusableElements() {
-    var s;
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[part="body"]');
+    var n;
+    const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector('[part="body"]');
     if (!e) return [];
     const t = e.querySelector("slot:not([name])");
     if (!t) return [];
     const r = t.assignedElements({ flatten: !0 }), o = 'a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary', i = [];
-    for (const n of r) {
-      n.matches(o) && i.push(n);
-      const d = n.querySelectorAll(o);
-      i.push(...d);
+    for (const s of r) {
+      s.matches(o) && i.push(s);
+      const l = s.querySelectorAll(o);
+      i.push(...l);
     }
     return i;
   }
@@ -147,9 +151,9 @@ let R = 0, a = class extends E {
   async _show() {
     var t;
     if (this._visible) return;
-    this._previousFocus = document.activeElement, this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })), this._visible = !0, this.open = !0, this._setAnchorAriaAttributes(!0), document.addEventListener("keydown", this._handleDocumentKeydown), document.addEventListener("keydown", this._handleFocusTrap), await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-show", { bubbles: !0, composed: !0 }));
+    this._previousFocus = document.activeElement, this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })), this._visible = !0, this.open = !0, this._setAnchorAriaAttributes(!0), document.addEventListener("keydown", this._handleDocumentKeydown), await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-show", { bubbles: !0, composed: !0 }));
     const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="body"]');
-    e && e.focus(), this._showTimer !== null && clearTimeout(this._showTimer), this._showTimer = setTimeout(() => {
+    e && this._getFocusableElements().length > 0 && e.focus(), this._showTimer !== null && clearTimeout(this._showTimer), this._showTimer = setTimeout(() => {
       this._showTimer = null, document.addEventListener("click", this._handleDocumentClick);
     }, 0), await this._updatePosition();
   }
@@ -158,60 +162,83 @@ let R = 0, a = class extends E {
   /** @internal */
   async _hide(e = !0) {
     var t;
-    this._visible && (document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown), document.removeEventListener("keydown", this._handleFocusTrap), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })), this._visible = !1, this.open = !1, this._setAnchorAriaAttributes(!1), e && ((t = this._previousFocus) == null || t.focus()), this._previousFocus = null, await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
+    this._visible && (document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })), this._visible = !1, this.open = !1, this._setAnchorAriaAttributes(!1), e && ((t = this._previousFocus) == null || t.focus()), this._previousFocus = null, await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
   }
   // ─── Positioning ───
   /** @internal */
   async _updatePosition() {
-    var u, v, f;
-    const e = (u = this.shadowRoot) == null ? void 0 : u.querySelector(
+    var f, m, b;
+    const e = (f = this.shadowRoot) == null ? void 0 : f.querySelector(
       'slot[name="anchor"]'
     );
     if (!e) return;
-    const t = e.assignedElements()[0], r = (v = this.shadowRoot) == null ? void 0 : v.querySelector('[part="body"]'), o = this.arrow ? (f = this.shadowRoot) == null ? void 0 : f.querySelector('[part="arrow"]') : null;
+    const t = e.assignedElements()[0], r = (m = this.shadowRoot) == null ? void 0 : m.querySelector('[part="body"]'), o = this.arrow ? (b = this.shadowRoot) == null ? void 0 : b.querySelector('[part="arrow"]') : null;
     if (!t || !r) return;
-    const i = [
-      $({ mainAxis: this.distance, crossAxis: this.skidding }),
-      C(),
-      T({ padding: 8 })
+    const { computePosition: i, flip: n, shift: s, offset: l, arrow: c } = await import("@floating-ui/dom"), p = [
+      l({ mainAxis: this.distance, crossAxis: this.skidding }),
+      n(),
+      s({ padding: 8 })
     ];
-    o && i.push(F({ element: o }));
-    const { x: s, y: n, placement: d, middlewareData: c } = await P(t, r, {
+    o && p.push(c({ element: o }));
+    const { x, y: w, placement: E, middlewareData: v } = await i(t, r, {
       placement: this.placement,
       strategy: "fixed",
-      middleware: i
+      middleware: p
     });
     if (Object.assign(r.style, {
-      left: `${s}px`,
-      top: `${n}px`
-    }), o && c.arrow) {
-      const p = c.arrow, b = d.split("-")[0] ?? "bottom", _ = { top: "bottom", right: "left", bottom: "top", left: "right" }[b] ?? "bottom";
+      left: `${x}px`,
+      top: `${w}px`
+    }), o && v.arrow) {
+      const u = v.arrow, _ = E.split("-")[0] ?? "bottom", A = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      }[_] ?? "bottom";
       Object.assign(o.style, {
-        left: p.x != null ? `${p.x}px` : "",
-        top: p.y != null ? `${p.y}px` : "",
+        left: u.x != null ? `${u.x}px` : "",
+        top: u.y != null ? `${u.y}px` : "",
         right: "",
         bottom: "",
-        [_]: "-5px"
+        [A]: "-5px"
       });
-      const g = ["border-top", "border-right", "border-bottom", "border-left"];
-      for (const w of g)
-        o.style.setProperty(w, "");
-      const m = {
+      const S = ["border-top", "border-right", "border-bottom", "border-left"];
+      for (const T of S)
+        o.style.setProperty(T, "");
+      const y = {
         bottom: ["border-bottom", "border-right"],
         top: ["border-top", "border-left"],
         right: ["border-top", "border-right"],
         left: ["border-bottom", "border-left"]
-      }[b] ?? ["border-bottom", "border-right"];
-      o.style.setProperty(m[0], "1px solid transparent"), o.style.setProperty(m[1], "1px solid transparent");
+      }[_] ?? ["border-bottom", "border-right"];
+      o.style.setProperty(y[0], "1px solid transparent"), o.style.setProperty(y[1], "1px solid transparent");
     }
   }
+  /**
+   * Schedules a hide with a 150 ms delay for hover-triggered dismissal.
+   * WCAG 1.4.13: the delay allows the pointer to travel between the anchor
+   * and the popover body without the content disappearing.
+   * @internal
+   */
+  _scheduleHoverHide() {
+    this._cancelHoverHide(), this._hoverHideTimer = setTimeout(() => {
+      this._hoverHideTimer = null, this._hide(!1);
+    }, 150);
+  }
+  /**
+   * Cancels any pending hover-triggered hide.
+   * @internal
+   */
+  _cancelHoverHide() {
+    this._hoverHideTimer !== null && (clearTimeout(this._hoverHideTimer), this._hoverHideTimer = null);
+  }
   /** @internal */
   _handleAnchorSlotChange() {
     this._setAnchorAriaAttributes(this._visible);
   }
   // ─── Render ───
   render() {
-    return y`
+    return g`
       <div
         class="trigger-wrapper"
         @click=${this._handleAnchorClick}
@@ -227,7 +254,7 @@ let R = 0, a = class extends E {
         id=${this._popoverId}
         role="dialog"
         aria-label=${this.label}
-        aria-hidden="${this._visible ? "false" : "true"}"
+        aria-hidden=${this._visible ? $ : "true"}
         tabindex="-1"
         ?inert=${!this._visible}
         class=${this._visible ? "visible" : ""}
@@ -235,40 +262,40 @@ let R = 0, a = class extends E {
         @mouseleave=${this._handleBodyMouseLeave}
       >
         <slot></slot>
-        ${this.arrow ? y`<div part="arrow"></div>` : ""}
+        ${this.arrow ? g`<div part="arrow"></div>` : ""}
       </div>
     `;
   }
 };
-a.styles = [S, D];
+a.styles = [D, F];
 h([
-  l({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], a.prototype, "open", 2);
 h([
-  l({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], a.prototype, "placement", 2);
 h([
-  l({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], a.prototype, "trigger", 2);
 h([
-  l({ type: Number, reflect: !0 })
+  d({ type: Number, reflect: !0 })
 ], a.prototype, "distance", 2);
 h([
-  l({ type: Number, reflect: !0 })
+  d({ type: Number, reflect: !0 })
 ], a.prototype, "skidding", 2);
 h([
-  l({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], a.prototype, "arrow", 2);
 h([
-  l({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], a.prototype, "label", 2);
 h([
-  A()
+  C()
 ], a.prototype, "_visible", 2);
 a = h([
-  k("hx-popover")
+  P("hx-popover")
 ], a);
 export {
   a as H
 };
-//# sourceMappingURL=hx-popover-DxE67miP.js.map
+//# sourceMappingURL=hx-popover-D6kYQkt3.js.map