@helixui/library 1.1.2 → 2.0.0

package/dist/shared/hx-patient-banner-wk4qWmsH.js

@@ -0,0 +1,297 @@
+import { css as c, LitElement as v, nothing as p, html as b } from "lit";
+import { property as a, state as f, query as h, customElement as u } from "lit/decorators.js";
+import { tokenStyles as _ } from "@helixui/tokens/lit";
+const m = c`
+  :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));
+    --_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-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-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));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Banner Container ─── */
+
+  .banner {
+    display: flex;
+    align-items: center;
+    gap: var(--_gap);
+    padding: var(--_padding);
+    background-color: var(--_bg);
+    border-bottom: var(--hx-border-width-thin, 1px) solid var(--_border-color);
+    font-family: var(--_font-family);
+    width: 100%;
+    position: relative;
+  }
+
+  /* ─── Photo Area ─── */
+
+  .banner__photo-area {
+    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;
+    border-radius: var(--hx-border-radius-full, 9999px);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--_photo-bg);
+  }
+
+  /* ─── Fields Grid ─── */
+
+  .banner__fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--_gap);
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Individual Field ─── */
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    min-width: 0;
+  }
+
+  .field__label {
+    font-size: var(--_label-font-size);
+    color: var(--_label-color);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+  }
+
+  .field__value {
+    font-size: var(--_value-font-size);
+    color: var(--_value-color);
+    font-weight: var(--hx-font-weight-normal, 400);
+    line-height: var(--hx-line-height-normal, 1.5);
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  /* ─── Identifier Rule Violation ─── */
+  /* Visual indicator when Joint Commission two-identifier rule is not met. */
+
+  :host([aria-invalid='true']) .banner {
+    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));
+  }
+
+  :host([aria-invalid='true']) .banner::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--hx-border-width-thick, 4px);
+    background-color: var(--hx-color-error-500, #ef4444);
+    border-radius: 0;
+  }
+
+  /* ─── Visually-hidden violation live region ─── */
+  /* Announces identifier rule violations to screen readers without visible text. */
+
+  .violation-message {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── Motion reduction ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+`;
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (e, l, n, o) => {
+  for (var r = o > 1 ? void 0 : o ? x(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 && g(l, n, r), r;
+};
+let t = class extends v {
+  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;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "banner"), this.setAttribute("aria-label", this.labelPatient);
+  }
+  updated(e) {
+    super.updated(e), e.has("labelPatient") && this.setAttribute("aria-label", this.labelPatient), e.has("enforceIdentifierRule") && this._checkIdentifierRule();
+  }
+  // ─── Private Helpers ───
+  _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++;
+    return e;
+  }
+  _checkIdentifierRule() {
+    const e = this._countPopulatedIdentifiers();
+    this._identifierCount = e, this.enforceIdentifierRule && e < 2 ? (this._isViolating = !0, this.setAttribute("aria-invalid", "true"), this.dispatchEvent(
+      new CustomEvent("hx-identifier-rule-violation", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          populatedIdentifiers: e,
+          requiredIdentifiers: 2,
+          patientId: this.patientId
+        }
+      })
+    )) : (this._isViolating = !1, this.removeAttribute("aria-invalid"));
+  }
+  // ─── Event Handlers ───
+  _handleSlotChange() {
+    this._checkIdentifierRule();
+  }
+  // ─── Render ───
+  render() {
+    const e = this._isViolating ? `Warning: patient identification incomplete. ${this._identifierCount} of 2 required identifiers present.` : p;
+    return b`
+      <div part="banner" class="banner">
+        <div part="photo-area" class="banner__photo-area" aria-hidden="true">
+          <slot name="photo"></slot>
+        </div>
+
+        <div part="fields" class="banner__fields">
+          <div part="field" class="field">
+            <span part="field-label" class="field__label">${this.labelName}</span>
+            <div part="field-value" class="field__value">
+              <slot name="name" @slotchange=${this._handleSlotChange}></slot>
+            </div>
+          </div>
+
+          <div part="field" class="field">
+            <span part="field-label" class="field__label">${this.labelMrn}</span>
+            <div part="field-value" class="field__value">
+              <slot name="mrn" @slotchange=${this._handleSlotChange}></slot>
+            </div>
+          </div>
+
+          <div part="field" class="field">
+            <span part="field-label" class="field__label">${this.labelDob}</span>
+            <div part="field-value" class="field__value">
+              <slot name="dob" @slotchange=${this._handleSlotChange}></slot>
+            </div>
+          </div>
+
+          <div part="field" class="field">
+            <span part="field-label" class="field__label">${this.labelAllergies}</span>
+            <div part="field-value" class="field__value">
+              <slot name="allergies"></slot>
+            </div>
+          </div>
+
+          <div part="field" class="field">
+            <span part="field-label" class="field__label">${this.labelCodeStatus}</span>
+            <div part="field-value" class="field__value">
+              <slot name="code-status"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      ${e !== p ? b`<div
+            part="violation-message"
+            class="violation-message"
+            role="alert"
+            aria-live="assertive"
+          >
+            ${e}
+          </div>` : p}
+    `;
+  }
+};
+t.styles = [_, m];
+i([
+  a({ type: String, attribute: "patient-id" })
+], t.prototype, "patientId", 2);
+i([
+  a({ type: String, attribute: "label-patient" })
+], t.prototype, "labelPatient", 2);
+i([
+  a({ type: String, attribute: "label-name" })
+], t.prototype, "labelName", 2);
+i([
+  a({ type: String, attribute: "label-mrn" })
+], t.prototype, "labelMrn", 2);
+i([
+  a({ type: String, attribute: "label-dob" })
+], t.prototype, "labelDob", 2);
+i([
+  a({ type: String, attribute: "label-allergies" })
+], t.prototype, "labelAllergies", 2);
+i([
+  a({ type: String, attribute: "label-code-status" })
+], t.prototype, "labelCodeStatus", 2);
+i([
+  a({
+    attribute: "enforce-identifier-rule",
+    reflect: !0,
+    converter: {
+      fromAttribute: (e) => e !== "false",
+      toAttribute: (e) => String(e)
+    }
+  })
+], t.prototype, "enforceIdentifierRule", 2);
+i([
+  f()
+], t.prototype, "_identifierCount", 2);
+i([
+  f()
+], t.prototype, "_isViolating", 2);
+i([
+  h('slot[name="name"]')
+], t.prototype, "_nameSlot", 2);
+i([
+  h('slot[name="mrn"]')
+], t.prototype, "_mrnSlot", 2);
+i([
+  h('slot[name="dob"]')
+], t.prototype, "_dobSlot", 2);
+t = i([
+  u("hx-patient-banner")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-patient-banner-wk4qWmsH.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-patient-banner-wk4qWmsH.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    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e5e7eb));\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 44x44px touch target for interactive photo content. */\n    min-width: 44px;\n    min-height: 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, #374151));\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  /* ─── 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","import { LitElement, html, nothing, 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 * @csspart violation-message - The visually-hidden identifier rule violation status message.\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 * @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 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  /** @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;\n\n  /** @internal */\n  @query('slot[name=\"mrn\"]') private _mrnSlot!: HTMLSlotElement;\n\n  /** @internal */\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._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\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","violationMessage","nothing","html","tokenStyles","__decorateClass","property","value","state","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,295 @@
+import { css as c, LitElement as p, html as h } from "lit";
+import { property as n, 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;
+  }
+
+  /* ─── Disabled State ─── */
+
+  :host([disabled]) {
+    opacity: var(--hx-phi-field-disabled-opacity, var(--hx-opacity-50, 0.5));
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .phi-field--disabled .phi-field__toggle {
+    cursor: not-allowed;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .phi-field__toggle {
+      transition: none;
+    }
+  }
+`;
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (e, t, l, r) => {
+  for (var i = r > 1 ? void 0 : r ? v(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 && b(t, l, i), i;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.data = "", this.fieldType = "ssn", this.fieldId = "", this.clipboardTimeout = 3e4, this.label = "", this.disabled = !1, this._masked = !0, this._clipboardTimer = null;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("autocomplete", "off");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cancelClipboardTimer();
+  }
+  // ─── 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 */
+  _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: "clipboard-clear",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          fieldType: this.fieldType
+        }
+      })
+    ), this._masked = !0;
+  }
+  /** @internal */
+  _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((o, d) => {
+          /[a-zA-Z0-9]/.test(o) && 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("");
+      }
+      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 ───
+  /** @internal */
+  _handleToggle() {
+    this.disabled || (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));
+  }
+  /** @internal */
+  _handleCopy(e) {
+    this._masked && e.preventDefault();
+  }
+  /** @internal */
+  _handlePaste(e) {
+    this._masked && e.preventDefault();
+  }
+  // ─── Render Helpers ───
+  /** @internal */
+  _renderEyeIcon() {
+    return h`
+      <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>
+    `;
+  }
+  /** @internal */
+  _renderEyeOffIcon() {
+    return h`
+      <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() {
+    const e = this.label || "Protected health information", t = `${e} is masked`, l = `${e} is revealed`, r = `Reveal ${e.toLowerCase()}`, i = `Hide ${e.toLowerCase()}`;
+    return h`
+      <div
+        part="container"
+        class="phi-field${this.disabled ? " phi-field--disabled" : ""}"
+        @copy=${this._handleCopy}
+        @paste=${this._handlePaste}
+      >
+        ${this._masked ? h`<span part="value" class="phi-field__value phi-field__value--masked"
+              >${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}
+        </span>
+        <button
+          part="toggle"
+          class="phi-field__toggle"
+          type="button"
+          ?disabled=${this.disabled}
+          aria-label=${this._masked ? r : i}
+          aria-pressed=${String(!this._masked)}
+          @click=${this._handleToggle}
+        >
+          ${this._masked ? this._renderEyeIcon() : this._renderEyeOffIcon()}
+        </button>
+      </div>
+    `;
+  }
+};
+a.styles = [m, _];
+s([
+  n({ type: String })
+], a.prototype, "data", 2);
+s([
+  n({ type: String, reflect: !0, attribute: "field-type" })
+], a.prototype, "fieldType", 2);
+s([
+  n({ type: String, attribute: "field-id" })
+], a.prototype, "fieldId", 2);
+s([
+  n({ type: Number, attribute: "clipboard-timeout" })
+], a.prototype, "clipboardTimeout", 2);
+s([
+  n({ type: String })
+], a.prototype, "label", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+s([
+  u()
+], a.prototype, "_masked", 2);
+a = s([
+  f("hx-phi-field")
+], a);
+export {
+  a as H
+};
+//# sourceMappingURL=hx-phi-field-DX9z3nu0.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-phi-field-DX9z3nu0.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  /* ─── Disabled State ─── */\n\n  :host([disabled]) {\n    opacity: var(--hx-phi-field-disabled-opacity, var(--hx-opacity-50, 0.5));\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  .phi-field--disabled .phi-field__toggle {\n    cursor: not-allowed;\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-clear actions.\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 * @cssprop [--hx-phi-field-disabled-opacity=var(--hx-opacity-50,0.5)] - Opacity applied when the field is disabled.\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  /**\n   * Accessible label describing the PHI field. Used as a prefix in screen reader\n   * announcements (e.g., \"Social Security Number is masked\").\n   * @attr label\n   */\n  @property({ type: String })\n  label: string = '';\n\n  /**\n   * When set, disables all interaction with the field and prevents reveal.\n   * @attr disabled\n   * @reflect\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _masked = true;\n\n  /** @internal */\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  /** @internal */\n  private _cancelClipboardTimer(): void {\n    if (this._clipboardTimer !== null) {\n      clearTimeout(this._clipboardTimer);\n      this._clipboardTimer = null;\n    }\n  }\n\n  /** @internal */\n  private _scheduleClipboardClear(): void {\n    this._cancelClipboardTimer();\n    this._clipboardTimer = setTimeout(() => {\n      this._clearClipboard();\n    }, this.clipboardTimeout);\n  }\n\n  /** @internal */\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: 'clipboard-clear',\n          timestamp: new Date().toISOString(),\n          fieldType: this.fieldType,\n        },\n      }),\n    );\n    this._masked = true;\n  }\n\n  /** @internal */\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  /** @internal */\n  private _handleToggle(): void {\n    if (this.disabled) return;\n\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  /** @internal */\n  private _handleCopy(e: ClipboardEvent): void {\n    if (this._masked) {\n      e.preventDefault();\n    }\n  }\n\n  /** @internal */\n  private _handlePaste(e: ClipboardEvent): void {\n    if (this._masked) {\n      e.preventDefault();\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\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  /** @internal */\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    const fieldLabel = this.label || 'Protected health information';\n    const maskedLabel = `${fieldLabel} is masked`;\n    const revealedLabel = `${fieldLabel} is revealed`;\n    const revealActionLabel = `Reveal ${fieldLabel.toLowerCase()}`;\n    const hideActionLabel = `Hide ${fieldLabel.toLowerCase()}`;\n\n    return html`\n      <div\n        part=\"container\"\n        class=\"phi-field${this.disabled ? ' phi-field--disabled' : ''}\"\n        @copy=${this._handleCopy}\n        @paste=${this._handlePaste}\n      >\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 ? maskedLabel : revealedLabel}\n        </span>\n        <button\n          part=\"toggle\"\n          class=\"phi-field__toggle\"\n          type=\"button\"\n          ?disabled=${this.disabled}\n          aria-label=${this._masked ? revealActionLabel : hideActionLabel}\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  /** The action that triggered the audit event. */\n  action: 'reveal' | 'hide' | 'clipboard-clear';\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","fieldLabel","maskedLabel","revealedLabel","revealActionLabel","hideActionLabel","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}