@helixui/library 2.1.2 → 3.0.0-next.65

package/dist/shared/{hx-patient-banner-BKiN7nIE.js → hx-patient-banner-uE6gqLpT.js}

@@ -1,26 +1,26 @@
-import { css as c, LitElement as v, nothing as p, html as b } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as a, state as f, query as h, customElement as u } from "lit/decorators.js";
-const _ = c`
+import { css as f, nothing as p, html as b } from "lit";
+import { property as i, state as c, query as h, customElement as v } from "lit/decorators.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
+const _ = f`
   :host {
     display: block;
     width: 100%;
 
     /* ─── Private token vars (3-tier cascade) ─── */
-    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f9fafb));
-    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f8fafc));
+    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e2e8f0));
     --_padding: var(
       --hx-patient-banner-padding,
       var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)
     );
     --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));
     --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));
-    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #6b7280));
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #64748b));
     --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));
-    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #111827));
+    --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #0f172a));
     --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));
     --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));
-    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e5e7eb));
+    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   * {
@@ -47,9 +47,9 @@ const _ = c`
     flex-shrink: 0;
     width: var(--_photo-size);
     height: var(--_photo-size);
-    /* Minimum 44x44px touch target for interactive photo content. */
-    min-width: 44px;
-    min-height: 44px;
+    /* Minimum touch target for interactive photo content (WCAG 2.5.8). */
+    min-width: var(--hx-touch-target-size, 44px);
+    min-height: var(--hx-touch-target-size, 44px);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
     display: flex;
@@ -102,7 +102,7 @@ const _ = c`
     border-bottom-color: var(--hx-color-error-400, #f87171);
     background-color: var(--hx-color-error-50, #fef2f2);
     /* Darken label color to maintain 4.5:1 contrast on error-50 background. */
-    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #374151));
+    --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #334155));
   }
 
   :host([aria-invalid='true']) .banner::before {
@@ -113,7 +113,7 @@ const _ = c`
     top: 0;
     bottom: 0;
     width: var(--hx-border-width-thick, 4px);
-    background-color: var(--hx-color-error-500, #ef4444);
+    background-color: var(--hx-color-error-500, #dc2626);
     border-radius: 0;
   }
 
@@ -140,13 +140,33 @@ const _ = c`
       animation: none !important;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .banner {
+      border-bottom-color: CanvasText;
+    }
+
+    :host([aria-invalid='true']) .banner {
+      border-bottom-color: LinkText;
+    }
+
+    :host([aria-invalid='true']) .banner::before {
+      background-color: LinkText;
+    }
+
+    .banner__photo-area {
+      border: 1px solid CanvasText;
+    }
+  }
 `;
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (e, l, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? g(l, n) : l, s = e.length - 1, d; s >= 0; s--)
-    (d = e[s]) && (r = (o ? d(l, n, r) : d(r)) || r);
-  return o && r && m(l, n, r), r;
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, l, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? g(l, o) : l, s = e.length - 1, d; s >= 0; s--)
+    (d = e[s]) && (r = (n ? d(l, o, r) : d(r)) || r);
+  return n && r && m(l, o, r), r;
 };
-let t = class extends v {
+let t = class extends u {
   constructor() {
     super(...arguments), this.patientId = "", this.labelPatient = "Patient identification", this.labelName = "Patient name", this.labelMrn = "MRN", this.labelDob = "Date of birth", this.labelAllergies = "Allergies", this.labelCodeStatus = "Code status", this.enforceIdentifierRule = !0, this._identifierCount = 0, this._isViolating = !1;
   }
@@ -161,8 +181,8 @@ let t = class extends v {
   _countPopulatedIdentifiers() {
     let e = 0;
     const l = [this._nameSlot, this._mrnSlot, this._dobSlot];
-    for (const n of l)
-      n && n.assignedNodes({ flatten: !0 }).length > 0 && e++;
+    for (const o of l)
+      o && o.assignedNodes({ flatten: !0 }).length > 0 && e++;
     return e;
   }
   _checkIdentifierRule() {
@@ -242,29 +262,29 @@ let t = class extends v {
   }
 };
 t.styles = [_];
-i([
-  a({ type: String, attribute: "patient-id" })
+a([
+  i({ type: String, attribute: "patient-id" })
 ], t.prototype, "patientId", 2);
-i([
-  a({ type: String, attribute: "label-patient" })
+a([
+  i({ type: String, attribute: "label-patient" })
 ], t.prototype, "labelPatient", 2);
-i([
-  a({ type: String, attribute: "label-name" })
+a([
+  i({ type: String, attribute: "label-name" })
 ], t.prototype, "labelName", 2);
-i([
-  a({ type: String, attribute: "label-mrn" })
+a([
+  i({ type: String, attribute: "label-mrn" })
 ], t.prototype, "labelMrn", 2);
-i([
-  a({ type: String, attribute: "label-dob" })
+a([
+  i({ type: String, attribute: "label-dob" })
 ], t.prototype, "labelDob", 2);
-i([
-  a({ type: String, attribute: "label-allergies" })
+a([
+  i({ type: String, attribute: "label-allergies" })
 ], t.prototype, "labelAllergies", 2);
-i([
-  a({ type: String, attribute: "label-code-status" })
+a([
+  i({ type: String, attribute: "label-code-status" })
 ], t.prototype, "labelCodeStatus", 2);
-i([
-  a({
+a([
+  i({
     attribute: "enforce-identifier-rule",
     reflect: !0,
     converter: {
@@ -273,25 +293,25 @@ i([
     }
   })
 ], t.prototype, "enforceIdentifierRule", 2);
-i([
-  f()
+a([
+  c()
 ], t.prototype, "_identifierCount", 2);
-i([
-  f()
+a([
+  c()
 ], t.prototype, "_isViolating", 2);
-i([
+a([
   h('slot[name="name"]')
 ], t.prototype, "_nameSlot", 2);
-i([
+a([
   h('slot[name="mrn"]')
 ], t.prototype, "_mrnSlot", 2);
-i([
+a([
   h('slot[name="dob"]')
 ], t.prototype, "_dobSlot", 2);
-t = i([
-  u("hx-patient-banner")
+t = a([
+  v("hx-patient-banner")
 ], t);
 export {
   t as H
 };
-//# sourceMappingURL=hx-patient-banner-BKiN7nIE.js.map
+//# sourceMappingURL=hx-patient-banner-uE6gqLpT.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-patient-banner-uE6gqLpT.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, #f8fafc));\n    --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e2e8f0));\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, #64748b));\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, #0f172a));\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    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e2e8f0));\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    position: relative;\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    /* Minimum touch target for interactive photo content (WCAG 2.5.8). */\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\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(--_photo-bg);\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, #334155));\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, #dc2626);\n    border-radius: 0;\n  }\n\n  /* ─── Visually-hidden violation live region ─── */\n  /* Announces identifier rule violations to screen readers without visible text. */\n\n  .violation-message {\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  /* ─── Motion reduction ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .banner {\n      border-bottom-color: CanvasText;\n    }\n\n    :host([aria-invalid='true']) .banner {\n      border-bottom-color: LinkText;\n    }\n\n    :host([aria-invalid='true']) .banner::before {\n      background-color: LinkText;\n    }\n\n    .banner__photo-area {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\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 *\n * ## Security Model — Event Composition\n *\n * This component dispatches and propagates two categories of composed events:\n *\n * ### `hx-identifier-rule-violation` (dispatched by this component)\n * Fired with `composed: true` when the two-identifier rule is violated. The event detail\n * contains only structural metadata (`populatedIdentifiers` count, `requiredIdentifiers`\n * count) and the `patientId` attribute value. **No raw PHI is included.**\n *\n * The `patientId` is a developer-provided attribute intended as a correlation key for\n * application logic — it should be an opaque internal identifier (e.g., a UUID or\n * encounter ID), not a human-readable identifier like an MRN or SSN.\n *\n * ### `hx-phi-access` (bubbles from slotted hx-phi-field children)\n * Slotted `hx-phi-field` elements dispatch `hx-phi-access` with `composed: true`. These\n * events bubble through this component's shadow DOM via slot projection. This component\n * does NOT re-dispatch or modify these events. See `hx-phi-field` documentation for the\n * security model of those events.\n *\n * ### Consumer Responsibilities\n *\n * - **Multi-tenant isolation**: In micro-frontend architectures where multiple patient\n *   contexts share a document, scope event listeners to the appropriate DOM subtree.\n *   Both `hx-phi-access` and `hx-identifier-rule-violation` use `composed: true` and\n *   will bubble through shared ancestors across shadow boundaries.\n * - **patientId hygiene**: Set the `patient-id` attribute to an opaque internal\n *   identifier, not a human-readable clinical identifier. This value appears in\n *   composed events that cross shadow boundaries.\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 * @csspart violation-message - The visually-hidden identifier rule violation status message.\n *\n * @fires {CustomEvent<PatientIdentifierRuleViolationDetail>} hx-identifier-rule-violation -\n *   Fired when fewer than 2 identifier slots are populated and enforce-identifier-rule is\n *   true. Contains structural metadata only — no raw PHI. Dispatched with `composed: 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 * @cssprop [--hx-patient-banner-photo-bg=var(--hx-color-neutral-200,#e5e7eb)] - Photo area background color when empty.\n */\n@customElement('hx-patient-banner')\nexport class HelixPatientBanner extends HelixElement {\n  static override styles = [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  /** @internal */\n  @state() private _identifierCount: number = 0;\n\n  /** @internal */\n  @state() private _isViolating: boolean = false;\n\n  // ─── Slot Queries ───\n\n  /** @internal */\n  @query('slot[name=\"name\"]') private _nameSlot!: HTMLSlotElement | null;\n\n  /** @internal */\n  @query('slot[name=\"mrn\"]') private _mrnSlot!: HTMLSlotElement | null;\n\n  /** @internal */\n  @query('slot[name=\"dob\"]') private _dobSlot!: HTMLSlotElement | null;\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._isViolating = true;\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._isViolating = false;\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    const violationMessage = this._isViolating\n      ? `Warning: patient identification incomplete. ${this._identifierCount} of 2 required identifiers present.`\n      : nothing;\n\n    return html`\n      <div part=\"banner\" class=\"banner\">\n        <div part=\"photo-area\" class=\"banner__photo-area\" aria-hidden=\"true\">\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      ${violationMessage !== nothing\n        ? html`<div\n            part=\"violation-message\"\n            class=\"violation-message\"\n            role=\"alert\"\n            aria-live=\"assertive\"\n          >\n            ${violationMessage}\n          </div>`\n        : nothing}\n    `;\n  }\n}\n\n/**\n * Event detail for identifier rule violations. Contains only structural metadata\n * about the validation state — never raw PHI values.\n *\n * **Security note**: The `patientId` field reflects the `patient-id` HTML attribute,\n * which should be set to an opaque internal identifier (UUID, encounter ID), not a\n * human-readable clinical identifier. This value crosses shadow DOM boundaries via\n * `composed: true` events.\n */\nexport interface PatientIdentifierRuleViolationDetail {\n  /** Number of identifier slots currently populated (0, 1, or 2). */\n  populatedIdentifiers: number;\n  /** Minimum required identifiers per NPSG.01.01.01 (always 2). */\n  requiredIdentifiers: number;\n  /** Opaque patient identifier from the patient-id attribute. Should NOT contain raw PHI. */\n  patientId: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-patient-banner': HelixPatientBanner;\n  }\n}\n"],"names":["helixPatientBannerStyles","css","HelixPatientBanner","HelixElement","changedProperties","count","slots","slot","violationMessage","nothing","html","__decorateClass","property","value","state","query","customElement"],"mappings":";;;AAEO,MAAMA,IAA2BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC0EjC,IAAMC,IAAN,cAAiCC,EAAa;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,YAAoB,IAOpB,KAAA,eAAuB,0BAOvB,KAAA,YAAoB,gBAOpB,KAAA,WAAmB,OAOnB,KAAA,WAAmB,iBAOnB,KAAA,iBAAyB,aAOzB,KAAA,kBAA0B,eAgB1B,KAAA,wBAAiC,IAKxB,KAAQ,mBAA2B,GAGnC,KAAQ,eAAwB;AAAA,EAAA;AAAA;AAAA,EAehC,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,QAAQ,GAClC,KAAK,aAAa,cAAc,KAAK,YAAY;AAAA,EACnD;AAAA,EAEmB,QAAQC,GAA+C;AACxE,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,cAAc,KACtC,KAAK,aAAa,cAAc,KAAK,YAAY,GAG/CA,EAAkB,IAAI,uBAAuB,KAC/C,KAAK,qBAAA;AAAA,EAET;AAAA;AAAA,EAIQ,6BAAqC;AAC3C,QAAIC,IAAQ;AAEZ,UAAMC,IAAQ,CAAC,KAAK,WAAW,KAAK,UAAU,KAAK,QAAQ;AAC3D,eAAWC,KAAQD;AACjB,MAAIC,KAAQA,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS,KACzDF;AAIJ,WAAOA;AAAA,EACT;AAAA,EAEQ,uBAA6B;AACnC,UAAMA,IAAQ,KAAK,2BAAA;AACnB,SAAK,mBAAmBA,GAEpB,KAAK,yBAAyBA,IAAQ,KACxC,KAAK,eAAe,IACpB,KAAK,aAAa,gBAAgB,MAAM,GACxC,KAAK;AAAA,MACH,IAAI,YAAkD,gCAAgC;AAAA,QACpF,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,UACN,sBAAsBA;AAAA,UACtB,qBAAqB;AAAA,UACrB,WAAW,KAAK;AAAA,QAAA;AAAA,MAClB,CACD;AAAA,IAAA,MAGH,KAAK,eAAe,IACpB,KAAK,gBAAgB,cAAc;AAAA,EAEvC;AAAA;AAAA,EAIQ,oBAA0B;AAChC,SAAK,qBAAA;AAAA,EACP;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMG,IAAmB,KAAK,eAC1B,+CAA+C,KAAK,gBAAgB,wCACpEC;AAEJ,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4DAQiD,KAAK,SAAS;AAAA;AAAA,8CAE5B,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4DAKR,KAAK,QAAQ;AAAA;AAAA,6CAE5B,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4DAKP,KAAK,QAAQ;AAAA;AAAA,6CAE5B,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4DAKP,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4DAOnB,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQxEF,MAAqBC,IACnBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMIF,CAAgB;AAAA,oBAEpBC,CAAO;AAAA;AAAA,EAEf;AACF;AAzNaP,EACK,SAAS,CAACF,CAAwB;AASlDW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GATxCV,EAUX,WAAA,aAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAhB3CV,EAiBX,WAAA,gBAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAvBxCV,EAwBX,WAAA,aAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA9BvCV,EA+BX,WAAA,YAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GArCvCV,EAsCX,WAAA,YAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GA5C7CV,EA6CX,WAAA,kBAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,qBAAqB;AAAA,GAnD/CV,EAoDX,WAAA,mBAAA,CAAA;AAgBAS,EAAA;AAAA,EARCC,EAAS;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,MACT,eAAe,CAACC,MAAyBA,MAAU;AAAA,MACnD,aAAa,CAACA,MAAmB,OAAOA,CAAK;AAAA,IAAA;AAAA,EAC/C,CACD;AAAA,GAnEUX,EAoEX,WAAA,yBAAA,CAAA;AAKiBS,EAAA;AAAA,EAAhBG,EAAA;AAAM,GAzEIZ,EAyEM,WAAA,oBAAA,CAAA;AAGAS,EAAA;AAAA,EAAhBG,EAAA;AAAM,GA5EIZ,EA4EM,WAAA,gBAAA,CAAA;AAKmBS,EAAA;AAAA,EAAnCI,EAAM,mBAAmB;AAAA,GAjFfb,EAiFyB,WAAA,aAAA,CAAA;AAGDS,EAAA;AAAA,EAAlCI,EAAM,kBAAkB;AAAA,GApFdb,EAoFwB,WAAA,YAAA,CAAA;AAGAS,EAAA;AAAA,EAAlCI,EAAM,kBAAkB;AAAA,GAvFdb,EAuFwB,WAAA,YAAA,CAAA;AAvFxBA,IAANS,EAAA;AAAA,EADNK,EAAc,mBAAmB;AAAA,GACrBd,CAAA;"}

package/dist/shared/{hx-phi-field-BiJH3V-k.js → hx-phi-field-BC_XowhC.js}

@@ -1,7 +1,8 @@
-import { css as c, LitElement as p, html as h } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as n, state as u, customElement as f } from "lit/decorators.js";
-const m = c`
+import { css as c, html as h } from "lit";
+import { classMap as u } from "lit/directives/class-map.js";
+import { property as n, state as p, customElement as f } from "lit/decorators.js";
+import { H as m } from "./helix-element-BNEYeiys.js";
+const _ = c`
   :host {
     display: inline-flex;
   }
@@ -20,12 +21,12 @@ const m = c`
   .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;
+    color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #64748b));
+    letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
   }
 
   .phi-field__value--revealed {
-    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-phi-field-value-color, var(--hx-color-neutral-900, #0f172a));
   }
 
   /* ─── Screen Reader Status ─── */
@@ -47,9 +48,12 @@ const m = c`
   .phi-field__toggle {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     background: none;
     border: none;
     padding: var(--hx-space-1, 0.25rem);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     color: var(--hx-phi-field-toggle-color, var(--hx-color-primary-500, #2563eb));
     cursor: pointer;
     line-height: 1;
@@ -98,50 +102,132 @@ const m = c`
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast Mode) ─── */
+
+  @media (forced-colors: active) {
+    .phi-field__toggle {
+      border: 1px solid ButtonText;
+      forced-color-adjust: none;
+    }
+
+    .phi-field__toggle:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
 `;
-var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (e, t, l, r) => {
-  for (var i = r > 1 ? void 0 : r ? b(t, l) : t, o = e.length - 1, d; o >= 0; o--)
-    (d = e[o]) && (i = (r ? d(t, l, i) : d(i)) || i);
-  return r && i && _(t, l, i), i;
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (e, t, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? v(t, s) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (a = (o ? d(t, s, a) : d(a)) || a);
+  return o && a && b(t, s, a), a;
 };
-let a = class extends p {
+let i = class extends m {
   constructor() {
-    super(...arguments), this.data = "", this.fieldType = "ssn", this.fieldId = "", this.clipboardTimeout = 3e4, this.label = "", this.disabled = !1, this._masked = !0, this._clipboardTimer = null;
+    super(...arguments), this.data = "", this.fieldType = "ssn", this.fieldId = "", this.clipboardTimeout = 3e4, this.label = "", this.autoHideDelay = 60, this.disabled = !1, this._masked = !0, this._clipboardTimer = null, this._autoHideTimer = null, this._boundHandleVisibilityChange = () => {
+      document.visibilityState === "hidden" && (this._masked && this._clipboardTimer === null || this._clearClipboard());
+    }, this._boundResetAutoHideTimer = () => {
+      this._resetAutoHideTimer();
+    };
   }
-  // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.setAttribute("autocomplete", "off");
+    if (super.connectedCallback(), this.setAttribute("autocomplete", "off"), document.addEventListener("visibilitychange", this._boundHandleVisibilityChange), this.hasAttribute("data")) {
+      const e = this.getAttribute("data");
+      e !== null && (this.data = e), this.removeAttribute("data");
+    }
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._cancelClipboardTimer();
+    super.disconnectedCallback(), this._cancelClipboardTimer(), this._cancelAutoHideTimer(), document.removeEventListener("visibilitychange", this._boundHandleVisibilityChange);
   }
   // ─── Private Helpers ───
   /** @internal */
   _cancelClipboardTimer() {
     this._clipboardTimer !== null && (clearTimeout(this._clipboardTimer), this._clipboardTimer = null);
   }
-  /** @internal */
-  _scheduleClipboardClear() {
-    this._cancelClipboardTimer(), this._clipboardTimer = setTimeout(() => {
-      this._clearClipboard();
-    }, this.clipboardTimeout);
+  /** @internal Cancel the auto-hide timer if running. */
+  _cancelAutoHideTimer() {
+    this._autoHideTimer !== null && (clearTimeout(this._autoHideTimer), this._autoHideTimer = null), this._removeAutoHideInteractionListeners();
   }
-  /** @internal */
-  _clearClipboard() {
-    var e;
-    this._clipboardTimer = null, typeof navigator < "u" && navigator.clipboard && ((e = navigator == null ? void 0 : navigator.clipboard) == null || e.writeText("").catch(() => {
-    })), this.dispatchEvent(
+  /** @internal Start the auto-hide countdown. Resets if already running. */
+  _scheduleAutoHide() {
+    this._cancelAutoHideTimer(), !(this.autoHideDelay <= 0) && (this._addAutoHideInteractionListeners(), this._autoHideTimer = setTimeout(() => {
+      this._autoHideTimer = null, this._autoHide();
+    }, this.autoHideDelay * 1e3));
+  }
+  /** @internal Reset the auto-hide timer on user interaction. */
+  _resetAutoHideTimer() {
+    this._autoHideTimer !== null && this._scheduleAutoHide();
+  }
+  /** @internal Auto-hide PHI and dispatch audit event. */
+  _autoHide() {
+    this._masked || (this._removeAutoHideInteractionListeners(), this._masked = !0, this.dispatchEvent(
       new CustomEvent("hx-phi-access", {
         bubbles: !0,
         composed: !0,
         detail: {
           fieldId: this.fieldId || this.id || "",
-          action: "clipboard-clear",
+          action: "auto-hide",
           timestamp: (/* @__PURE__ */ new Date()).toISOString(),
           fieldType: this.fieldType
         }
       })
-    ), this._masked = !0;
+    ));
+  }
+  /** @internal Add interaction listeners to reset auto-hide timer. */
+  _addAutoHideInteractionListeners() {
+    for (const e of i._AUTO_HIDE_INTERACTION_EVENTS)
+      this.addEventListener(e, this._boundResetAutoHideTimer);
+  }
+  /** @internal Remove interaction listeners. */
+  _removeAutoHideInteractionListeners() {
+    for (const e of i._AUTO_HIDE_INTERACTION_EVENTS)
+      this.removeEventListener(e, this._boundResetAutoHideTimer);
+  }
+  /** @internal */
+  _scheduleClipboardClear() {
+    this._cancelClipboardTimer(), this._clipboardTimer = setTimeout(() => {
+      this._clearClipboard();
+    }, this.clipboardTimeout);
+  }
+  /** @internal */
+  _clearClipboard() {
+    this._cancelClipboardTimer(), this._cancelAutoHideTimer(), this._masked = !0;
+    const e = (t) => {
+      this.dispatchEvent(
+        new CustomEvent("hx-phi-access", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            fieldId: this.fieldId || this.id || "",
+            action: t ? "clipboard-clear" : "clipboard-clear-failed",
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            fieldType: this.fieldType
+          }
+        })
+      );
+    };
+    if (typeof navigator > "u") {
+      e(!1);
+      return;
+    }
+    try {
+      const t = navigator.clipboard;
+      if (!t) {
+        e(!1);
+        return;
+      }
+      const s = t.writeText;
+      if (typeof s != "function") {
+        e(!1);
+        return;
+      }
+      Promise.resolve(s.call(t, "")).then(
+        () => e(!0),
+        () => e(!1)
+      );
+    } catch {
+      e(!1);
+    }
   }
   /** @internal */
   _getMaskedValue() {
@@ -153,11 +239,11 @@ let a = class extends p {
       }
       case "mrn": {
         const e = this.data.split(""), t = [];
-        e.forEach((o, d) => {
-          /[a-zA-Z0-9]/.test(o) && t.push(d);
+        e.forEach((l, d) => {
+          /[a-zA-Z0-9]/.test(l) && t.push(d);
         });
-        const l = Math.min(4, t.length), r = t.length - l, i = new Set(t.slice(0, r));
-        return e.map((o, d) => i.has(d) ? "*" : o).join("");
+        const s = Math.min(4, t.length), o = t.length - s, a = new Set(t.slice(0, o));
+        return e.map((l, d) => a.has(d) ? "*" : l).join("");
       }
       case "dob":
         return this.data.replace(/\d/g, "*");
@@ -183,7 +269,7 @@ let a = class extends p {
           fieldType: this.fieldType
         }
       })
-    ), this._masked ? (this._masked = !1, this._scheduleClipboardClear()) : (this._cancelClipboardTimer(), this._masked = !0));
+    ), this._masked ? (this._masked = !1, this._scheduleClipboardClear(), this._scheduleAutoHide()) : (this._cancelAutoHideTimer(), this._masked = !0));
   }
   /** @internal */
   _handleCopy(e) {
@@ -233,28 +319,31 @@ let a = class extends p {
   }
   // ─── Render ───
   render() {
-    const e = this.label || "Protected health information", t = `${e} is masked`, l = `${e} is revealed`, r = `Reveal ${e.toLowerCase()}`, i = `Hide ${e.toLowerCase()}`;
+    const e = this.label || "Protected health information", t = `${e} is masked`, s = `${e} is revealed`, o = `Reveal ${e.toLowerCase()}`, a = `Hide ${e.toLowerCase()}`;
     return h`
       <div
         part="container"
-        class="phi-field${this.disabled ? " phi-field--disabled" : ""}"
+        class=${u({ "phi-field": !0, "phi-field--disabled": this.disabled })}
         @copy=${this._handleCopy}
         @paste=${this._handlePaste}
       >
-        ${this._masked ? h`<span part="value" class="phi-field__value phi-field__value--masked"
+        ${this._masked ? h`<span
+              part="value"
+              class="phi-field__value phi-field__value--masked"
+              aria-hidden="true"
               >${this._getMaskedValue()}</span
             >` : h`<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 ? t : l}
+          ${this._masked ? t : s}
         </span>
         <button
           part="toggle"
           class="phi-field__toggle"
           type="button"
           ?disabled=${this.disabled}
-          aria-label=${this._masked ? r : i}
+          aria-label=${this._masked ? o : a}
           aria-pressed=${String(!this._masked)}
           @click=${this._handleToggle}
         >
@@ -264,32 +353,42 @@ let a = class extends p {
     `;
   }
 };
-a.styles = [m];
-s([
-  n({ type: String })
-], a.prototype, "data", 2);
-s([
+i.styles = [_];
+i._AUTO_HIDE_INTERACTION_EVENTS = [
+  "mouseenter",
+  "mousemove",
+  "focusin",
+  "keydown",
+  "pointerdown"
+];
+r([
+  n({ attribute: !1 })
+], i.prototype, "data", 2);
+r([
   n({ type: String, reflect: !0, attribute: "field-type" })
-], a.prototype, "fieldType", 2);
-s([
+], i.prototype, "fieldType", 2);
+r([
   n({ type: String, attribute: "field-id" })
-], a.prototype, "fieldId", 2);
-s([
+], i.prototype, "fieldId", 2);
+r([
   n({ type: Number, attribute: "clipboard-timeout" })
-], a.prototype, "clipboardTimeout", 2);
-s([
+], i.prototype, "clipboardTimeout", 2);
+r([
   n({ type: String })
-], a.prototype, "label", 2);
-s([
+], i.prototype, "label", 2);
+r([
+  n({ type: Number, attribute: "auto-hide-delay" })
+], i.prototype, "autoHideDelay", 2);
+r([
   n({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
-s([
-  u()
-], a.prototype, "_masked", 2);
-a = s([
+], i.prototype, "disabled", 2);
+r([
+  p()
+], i.prototype, "_masked", 2);
+i = r([
   f("hx-phi-field")
-], a);
+], i);
 export {
-  a as H
+  i as H
 };
-//# sourceMappingURL=hx-phi-field-BiJH3V-k.js.map
+//# sourceMappingURL=hx-phi-field-BC_XowhC.js.map