@helixui/library 2.1.2-next.51 → 2.1.2-next.52

package/custom-elements.json

@@ -10136,6 +10136,10 @@
               },
               "description": "Returns a read-only copy of the currently selected files.",
               "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_internals"
             }
           ],
           "events": [

package/dist/components/hx-file-upload/hx-file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hx-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/hx-file-upload/hx-file-upload.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"hx-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/hx-file-upload/hx-file-upload.ts"],"names":[],"mappings":"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"}

package/dist/components/hx-list/index.js

@@ -1,4 +1,4 @@
-import { H as s, a as t } from "../../shared/hx-list-CnDK30Yk.js";
+import { H as s, a as t } from "../../shared/hx-list-Dnei26t4.js";
 export {
   s as HelixList,
   t as HelixListItem

package/dist/components/hx-phi-field/index.js

@@ -1,4 +1,4 @@
-import { H as l } from "../../shared/hx-phi-field-Df06K0J3.js";
+import { H as l } from "../../shared/hx-phi-field-DD1qcBSO.js";
 export {
   l as HelixPhiField
 };

package/dist/css/helix-all.css

@@ -5487,7 +5487,7 @@ export const helixGridItemStyles = css`
     user-select: none;
     -webkit-user-select: none;
     color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #6b7280));
-    letter-spacing: 0.1em;
+    letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
   }
 
   .phi-field__value--revealed {

package/dist/css/hx-phi-field.css

@@ -18,7 +18,7 @@
     user-select: none;
     -webkit-user-select: none;
     color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #6b7280));
-    letter-spacing: 0.1em;
+    letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
   }
 
   .phi-field__value--revealed {

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-04-15T03:07:33.631Z */
+/* index.css — generated 2026-04-15T04:36:12.256Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';

package/dist/css/manifest.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2026-04-15T03:07:33.630Z",
+  "generated": "2026-04-15T04:36:12.255Z",
   "components": [
     {
       "name": "hx-accordion",
@@ -1466,6 +1466,7 @@
         "--hx-opacity-90",
         "--hx-phi-field-disabled-opacity",
         "--hx-phi-field-font-family",
+        "--hx-phi-field-letter-spacing",
         "--hx-phi-field-masked-color",
         "--hx-phi-field-toggle-color",
         "--hx-phi-field-value-color",

package/dist/index.js

@@ -36,7 +36,7 @@ import { H as Ae } from "./shared/hx-icon-BKHs3OLu.js";
 import { H as Le } from "./shared/hx-icon-button-CJuy9xbw.js";
 import { H as Ne } from "./shared/hx-image-ztiXumZB.js";
 import { H as Ge } from "./shared/hx-link-CN7AvGOW.js";
-import { H as $e, a as Ve } from "./shared/hx-list-CnDK30Yk.js";
+import { H as $e, a as Ve } from "./shared/hx-list-Dnei26t4.js";
 import { H as We, a as Xe, b as Ye } from "./shared/hx-menu-divider-DRT8yHRZ.js";
 import { H as qe } from "./shared/hx-meter-BcVC9yrt.js";
 import { H as Je } from "./shared/hx-nav-l0Rp7WPW.js";
@@ -44,7 +44,7 @@ import { H as Qe } from "./shared/hx-number-input-0Waw7Z7u.js";
 import { H as eo } from "./shared/hx-overflow-menu-DElwFSCd.js";
 import { H as to } from "./shared/hx-pagination-BNtx-LG6.js";
 import { H as ao } from "./shared/hx-patient-banner-BKiN7nIE.js";
-import { H as so } from "./shared/hx-phi-field-Df06K0J3.js";
+import { H as so } from "./shared/hx-phi-field-DD1qcBSO.js";
 import { H as Ho } from "./shared/hx-popover-CydNuVkT.js";
 import { H as po } from "./shared/hx-popup-DbzezTOd.js";
 import { H as mo } from "./shared/hx-progress-bar-Cm0VihTN.js";

package/dist/shared/hx-file-upload-Di_vpQaG.js.map

@@ -1 +1 @@
-{"version":3,"file":"hx-file-upload-Di_vpQaG.js","sources":["../../src/components/hx-file-upload/hx-file-upload.styles.ts","../../src/components/hx-file-upload/hx-file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFileUploadStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Label ─── */\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-neutral-700, #343a40);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Dropzone ─── */\n\n  .dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-space-32, 8rem);\n    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);\n    border: var(--hx-border-width-thin, 1px) dashed\n      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));\n    cursor: pointer;\n    text-align: center;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    color: var(--hx-color-neutral-600, #495057);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .dropzone:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-color: var(\n      --hx-file-upload-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-500))\n    );\n  }\n\n  .dropzone--drag-over {\n    border-color: var(--hx-color-primary-500, #2563eb);\n    background-color: var(\n      --hx-file-upload-dropzone-active-bg,\n      color-mix(\n        in srgb,\n        var(--hx-color-primary-500, #2563eb) 8%,\n        var(--hx-color-neutral-0, #ffffff)\n      )\n    );\n    border-style: solid;\n  }\n\n  .dropzone--error {\n    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dropzone {\n      transition: none;\n    }\n  }\n\n  /* ─── Hidden file input ─── */\n\n  .file-input {\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  /* ─── File list ─── */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .file-list:empty {\n    display: none;\n  }\n\n  /* ─── File item ─── */\n\n  .file-item {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .file-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .file-item__name {\n    flex: 1;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-neutral-800, #212529);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .file-item__size {\n    flex-shrink: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-neutral-500, #6c757d);\n  }\n\n  .file-item__remove {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 44px;\n    min-height: 44px;\n    padding: var(--hx-space-1, 0.25rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-neutral-500, #6c757d);\n    cursor: pointer;\n    line-height: 1;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .file-item__remove:hover {\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);\n  }\n\n  .file-item__remove:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .file-item__remove {\n      transition: none;\n    }\n  }\n\n  /* ─── Progress bar ─── */\n\n  .progress-track {\n    width: 100%;\n    height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));\n    background-color: var(--hx-color-neutral-200, #e9ecef);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    width: 100%;\n    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));\n    border-radius: inherit;\n    transform-origin: left center;\n    transform: scaleX(var(--_progress-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only utility ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Error message ─── */\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Forced colors (Windows High Contrast / Forced Colors Mode) ─── */\n\n  @media (forced-colors: active) {\n    .dropzone {\n      border: 2px dashed ButtonText;\n      background-color: Canvas;\n      color: ButtonText;\n    }\n\n    .dropzone--drag-over {\n      border: 2px solid Highlight;\n      outline: none;\n      background-color: Canvas;\n    }\n\n    .dropzone--error {\n      border: 2px solid LinkText;\n    }\n\n    .dropzone:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .progress-bar {\n      background: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .file-item__remove:hover {\n      outline: 2px solid Highlight;\n      background-color: transparent;\n      color: ButtonText;\n    }\n\n    .file-item__remove:focus-visible {\n      outline: 2px solid Highlight;\n    }\n\n    :host([disabled]) .dropzone {\n      border-color: GrayText;\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxFileUploadIdCounter = 0;\n\ninterface FileEntry {\n  file: File;\n  progress: number;\n}\n\n/**\n * A drag-and-drop file upload component with client-side validation,\n * file list management, per-file progress, and native form association.\n *\n * @summary Form-associated file upload dropzone with drag-and-drop, validation, and progress tracking.\n *\n * @tag hx-file-upload\n *\n * @slot - Default dropzone content. Replaces the built-in \"Drag files here or click to browse\" prompt.\n * @slot file-list - Custom file list display. When provided, the built-in file list is hidden.\n *\n * @fires {CustomEvent<{files: File[]}>} hx-upload - Dispatched when valid files are selected via drag-and-drop or the file picker.\n * @fires {CustomEvent<{file: File, index: number}>} hx-remove - Dispatched when a file is removed from the list.\n * @fires {CustomEvent<{message: string, files: File[]}>} hx-error - Dispatched when file validation fails (type or size constraint).\n *\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart file-list - The container wrapping the list of selected files.\n * @csspart file-item - An individual file entry in the list.\n * @csspart progress - The progress bar track for a file item.\n * @csspart label - The visible label element.\n * @csspart error - The error message container below the dropzone.\n *\n * @cssprop [--hx-file-upload-dropzone-bg=var(--hx-color-neutral-50)] - Dropzone background color.\n * @cssprop [--hx-file-upload-dropzone-border-color=var(--hx-color-neutral-300)] - Dropzone border color.\n * @cssprop [--hx-file-upload-dropzone-border-radius=var(--hx-border-radius-lg)] - Dropzone border radius.\n * @cssprop [--hx-file-upload-dropzone-active-bg] - Dropzone background when a file is dragged over.\n * @cssprop [--hx-file-upload-progress-color=var(--hx-color-primary-500)] - Progress bar fill color.\n * @cssprop [--hx-file-upload-error-color=var(--hx-color-error-500)] - Error state and remove-button hover color.\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends mixinDelegatesAria(LitElement) {\n  static override styles = [helixFileUploadStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static formAssociated = true;\n\n  /** Holds the ElementInternals instance used for form value and validity management. @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The form field name used during form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Accepted file types as a comma-separated list of MIME types or extensions.\n   * Mirrors the native `<input type=\"file\" accept>` attribute.\n   * @attr accept\n   */\n  @property({ type: String })\n  accept = '';\n\n  /**\n   * Maximum allowed file size in bytes. 0 means unlimited.\n   * @attr max-size\n   */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  /**\n   * Maximum number of files that can be selected. 0 means unlimited.\n   * @attr max-files\n   */\n  @property({ type: Number, attribute: 'max-files' })\n  maxFiles = 0;\n\n  /**\n   * Whether multiple files may be selected at once.\n   * @attr multiple\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Visible label text for the dropzone.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the component is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message displayed below the dropzone. Also puts the dropzone in an error visual state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Instructional text shown in the dropzone when no custom slot content is provided.\n   * Also used as the accessible label for the dropzone.\n   * @attr label-dropzone\n   */\n  @property({ type: String, attribute: 'label-dropzone' })\n  labelDropzone = 'Drag files here or click to browse';\n\n  /** Accessible label for the selected files list. */\n  @property({ type: String, attribute: 'label-file-list' })\n  labelFileList = 'Selected files';\n\n  /**\n   * Generates upload progress description for screen readers.\n   * @param name - file name\n   * @param progress - progress percentage 0-100\n   */\n  @property({ attribute: false })\n  labelUploadProgress: (name: string, progress: number) => string = (name, progress) =>\n    `Upload progress for ${name}: ${progress}%`;\n\n  /**\n   * Screen reader announcement when file drag detected. Override for i18n.\n   * @attr label-drag-detected\n   */\n  @property({ attribute: 'label-drag-detected' })\n  labelDragDetected = 'File detected. Release to upload.';\n\n  // ─── Internal State ───\n\n  /** The list of currently selected file entries, each with a file reference and upload progress. @internal */\n  @state() private _files: FileEntry[] = [];\n  /** Whether a file is currently being dragged over the dropzone. @internal */\n  @state() private _dragOver = false;\n  /** Whether the named file-list slot contains projected content. @internal */\n  @state() private _hasFileListSlot = false;\n\n  // ─── Internal References ───\n\n  /** Reference to the hidden native file input element used to open the OS file picker. @internal */\n  @query('.file-input')\n  private _fileInput: HTMLInputElement | null | undefined;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private readonly _baseId = `hx-file-upload-${++_hxFileUploadIdCounter}`;\n  /** @internal */\n  private readonly _labelId = `${this._baseId}-label`;\n  /** @internal */\n  private readonly _errorId = `${this._baseId}-error`;\n  /** @internal */\n  private readonly _dropzoneId = `${this._baseId}-dropzone`;\n  /** @internal */\n  private readonly _liveId = `${this._baseId}-live`;\n\n  // ─── Slot Handling ───\n\n  /** @internal */\n  private _handleFileListSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFileListSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_files' as keyof HelixFileUpload) || changedProperties.has('name')) {\n      this._syncFormValue();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the component satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this._files = [];\n    this._internals.setFormValue(null);\n  }\n\n  /** @internal */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(_state: string | File | FormData, mode: string): void {\n    if (mode === 'restore' || mode === 'autocomplete') {\n      this._files = [];\n      this._internals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this._files.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n\n    if (this._files.length === 1) {\n      // Single file — pass directly as File (accepted by setFormValue)\n      const firstEntry = this._files[0];\n      if (firstEntry) {\n        this._internals.setFormValue(firstEntry.file);\n      }\n      return;\n    }\n\n    // Multiple files — use FormData so all files are submitted under the same name\n    const formData = new FormData();\n    for (const entry of this._files) {\n      formData.append(this.name, entry.file, entry.file.name);\n    }\n    this._internals.setFormValue(formData);\n  }\n\n  // ─── Validation ───\n\n  /**\n   * Validates a file against `accept` and `maxSize` constraints.\n   * Returns null on success, or an error message string on failure.\n   */\n  /** @internal */\n  private _validateFile(file: File): string | null {\n    if (this.accept) {\n      const accepted = this._isAccepted(file);\n      if (!accepted) {\n        return `\"${file.name}\" has an unsupported file type. Accepted types: ${this.accept}`;\n      }\n    }\n\n    if (this.maxSize > 0 && file.size > this.maxSize) {\n      const maxMb = (this.maxSize / (1024 * 1024)).toFixed(1);\n      return `\"${file.name}\" exceeds the maximum size of ${maxMb} MB.`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Checks whether a file is accepted given the `accept` attribute value.\n   * Handles MIME types (e.g. \"image/png\"), wildcard MIME types (e.g. \"image/*\"),\n   * and extensions (e.g. \".pdf\").\n   */\n  /** @internal */\n  private _isAccepted(file: File): boolean {\n    const tokens = this.accept.split(',').map((t) => t.trim().toLowerCase());\n\n    for (const token of tokens) {\n      if (token.startsWith('.')) {\n        // Extension match\n        if (file.name.toLowerCase().endsWith(token)) return true;\n      } else if (token.endsWith('/*')) {\n        // Wildcard MIME type e.g. \"image/*\"\n        const baseType = token.slice(0, -2);\n        if (file.type.toLowerCase().startsWith(baseType)) return true;\n      } else {\n        // Exact MIME type\n        if (file.type.toLowerCase() === token) return true;\n      }\n    }\n\n    return false;\n  }\n\n  // ─── File Processing ───\n\n  /** @internal */\n  private _processFiles(rawFiles: File[]): void {\n    if (this.disabled) return;\n\n    const candidateFiles = this.multiple ? rawFiles : rawFiles.slice(0, 1);\n    const validFiles: File[] = [];\n    const invalidFiles: File[] = [];\n    const errorMessages: string[] = [];\n\n    for (const file of candidateFiles) {\n      const validationError = this._validateFile(file);\n      if (validationError) {\n        invalidFiles.push(file);\n        errorMessages.push(validationError);\n      } else {\n        validFiles.push(file);\n      }\n    }\n\n    if (invalidFiles.length > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: { message: errorMessages.join(' '), files: invalidFiles },\n        }),\n      );\n    }\n\n    if (validFiles.length === 0) return;\n\n    // Enforce maxFiles limit (only in multiple mode — single-file mode always replaces)\n    const currentCount = this.multiple ? this._files.length : 0;\n    const capacity =\n      this.maxFiles > 0 ? Math.max(0, this.maxFiles - currentCount) : validFiles.length;\n    const allowedFiles = validFiles.slice(0, capacity);\n\n    if (allowedFiles.length === 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n            files: validFiles,\n          },\n        }),\n      );\n      return;\n    }\n\n    if (allowedFiles.length > 0) {\n      const newEntries: FileEntry[] = allowedFiles.map((file) => ({ file, progress: 0 }));\n\n      if (this.multiple) {\n        this._files = [...this._files, ...newEntries];\n      } else {\n        this._files = newEntries;\n      }\n\n      this.dispatchEvent(\n        new CustomEvent<{ files: File[] }>('hx-upload', {\n          bubbles: true,\n          composed: true,\n          detail: { files: allowedFiles },\n        }),\n      );\n    }\n\n    // If remaining valid files were cut by maxFiles, report that too\n    const overflow = validFiles.slice(capacity);\n    if (overflow.length > 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed. ${overflow.length} file${overflow.length === 1 ? ' was' : 's were'} not added.`,\n            files: overflow,\n          },\n        }),\n      );\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Sets the upload progress for a file at the given index.\n   * @param index - Zero-based index into the current file list.\n   * @param percent - Progress percentage from 0 to 100.\n   */\n  setProgress(index: number, percent: number): void {\n    if (index < 0 || index >= this._files.length) return;\n    const clamped = Math.max(0, Math.min(100, percent));\n    this._files = this._files.map((entry, i) =>\n      i === index ? { ...entry, progress: clamped } : entry,\n    );\n  }\n\n  /**\n   * Returns a read-only copy of the currently selected files.\n   */\n  get files(): File[] {\n    return this._files.map((e) => e.file);\n  }\n\n  // ─── Drag and Drop Handlers ───\n\n  /** @internal */\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this._dragOver = true;\n  }\n\n  /** @internal */\n  private _handleDragLeave(e: DragEvent): void {\n    // Only clear drag state when leaving the dropzone entirely\n    const target = e.relatedTarget as Node | null;\n    if (target && this.contains(target)) return;\n    const dropzone = this.shadowRoot?.querySelector('.dropzone');\n    if (dropzone && dropzone.contains(target)) return;\n    this._dragOver = false;\n  }\n\n  /** @internal */\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this._dragOver = false;\n    if (this.disabled) return;\n\n    const dt = e.dataTransfer;\n    if (!dt) return;\n\n    const rawFiles = Array.from(dt.files);\n    if (rawFiles.length === 0) return;\n\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Click / Keyboard Handlers ───\n\n  /** @internal */\n  private _handleDropzoneClick(): void {\n    if (this.disabled) return;\n    this._fileInput?.click();\n  }\n\n  /** @internal */\n  private _handleDropzoneKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._fileInput?.click();\n    }\n  }\n\n  /** @internal */\n  private _handleFileInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const rawFiles = Array.from(input.files);\n    // Reset the input so the same file can be re-selected after removal\n    input.value = '';\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Remove Handler ───\n\n  /** @internal */\n  private _handleRemove(index: number): void {\n    if (this.disabled) return;\n    const entry = this._files[index];\n    if (!entry) return;\n\n    const removedFile = entry.file;\n    this._files = this._files.filter((_, i) => i !== index);\n\n    this.dispatchEvent(\n      new CustomEvent<{ file: File; index: number }>('hx-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { file: removedFile, index },\n      }),\n    );\n\n    // Restore focus after removal so keyboard users are not stranded.\n    this.updateComplete\n      .then(() => {\n        if (this._files.length === 0) {\n          // List is now empty — return focus to the dropzone.\n          const dropzone = this.shadowRoot?.querySelector<HTMLElement>('[part=\"dropzone\"]');\n          dropzone?.focus();\n        } else {\n          // Focus the remove button at the same position, or the previous one if\n          // the removed item was the last in the list.\n          const removeButtons =\n            this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.file-item__remove');\n          if (removeButtons && removeButtons.length > 0) {\n            const targetIndex = index < this._files.length ? index : this._files.length - 1;\n            const targetButton = removeButtons[targetIndex];\n            if (targetButton) {\n              targetButton.focus();\n            }\n          }\n        }\n      })\n      .catch(() => {\n        // Focus restoration is best-effort; ignore errors.\n      });\n  }\n\n  // ─── Formatters ───\n\n  /** @internal */\n  private _formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderFileList() {\n    if (this._hasFileListSlot) return nothing;\n    if (this._files.length === 0) return nothing;\n\n    return html`\n      <ul part=\"file-list\" class=\"file-list\" aria-label=${this.labelFileList}>\n        ${repeat(\n          this._files,\n          (entry) => entry.file.name + entry.file.size,\n          (entry, index) => html`\n            <li part=\"file-item\" class=\"file-item\">\n              <div class=\"file-item__row\">\n                <span class=\"file-item__name\" title=${entry.file.name}> ${entry.file.name} </span>\n                <span class=\"file-item__size\">${this._formatSize(entry.file.size)}</span>\n                <button\n                  type=\"button\"\n                  class=\"file-item__remove\"\n                  aria-label=${`Remove ${entry.file.name}`}\n                  @click=${() => this._handleRemove(index)}\n                >\n                  <svg\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M1 1L13 13M13 1L1 13\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.75\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                </button>\n              </div>\n              <div\n                part=\"progress\"\n                class=\"progress-track\"\n                role=\"progressbar\"\n                aria-valuenow=${entry.progress}\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-label=${this.labelUploadProgress(entry.file.name, entry.progress)}\n              >\n                <div\n                  class=\"progress-bar\"\n                  style=\"--_progress-ratio: ${String(entry.progress / 100)}\"\n                ></div>\n              </div>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error;\n\n    const dropzoneClasses = {\n      dropzone: true,\n      'dropzone--drag-over': this._dragOver,\n      'dropzone--error': hasError,\n    };\n\n    const dropzoneLabel = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;\n\n    return html`\n      <div class=\"field\">\n        ${this.label\n          ? html`\n              <label part=\"label\" class=\"field__label\" id=${this._labelId} for=${this._dropzoneId}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n\n        <div\n          part=\"dropzone\"\n          class=${classMap(dropzoneClasses)}\n          id=${this._dropzoneId}\n          role=\"button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-label=${ifDefined(!this.label ? (this.ariaLabel ?? dropzoneLabel) : undefined)}\n          aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-invalid=${hasError ? 'true' : nothing}\n          aria-describedby=${ifDefined(hasError ? this._errorId : undefined)}\n          @click=${this._handleDropzoneClick}\n          @keydown=${this._handleDropzoneKeyDown}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n          @drop=${this._handleDrop}\n        >\n          <slot>${this.labelDropzone}</slot>\n        </div>\n\n        <input\n          class=\"file-input\"\n          type=\"file\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          accept=${ifDefined(this.accept || undefined)}\n          ?multiple=${this.multiple}\n          ?disabled=${this.disabled}\n          @change=${this._handleFileInputChange}\n        />\n\n        <slot name=\"file-list\" @slotchange=${this._handleFileListSlotChange}></slot>\n\n        ${this._renderFileList()}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>\n            `\n          : nothing}\n\n        <div id=${this._liveId} class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${this._dragOver ? this.labelDragDetected : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-file-upload': HelixFileUpload;\n  }\n}\n"],"names":["helixFileUploadStyles","css","_hxFileUploadIdCounter","HelixFileUpload","mixinDelegatesAria","LitElement","name","progress","slot","changedProperties","disabled","_state","mode","firstEntry","formData","entry","file","maxMb","tokens","token","baseType","rawFiles","candidateFiles","validFiles","invalidFiles","errorMessages","validationError","currentCount","capacity","allowedFiles","newEntries","overflow","index","percent","clamped","i","target","dropzone","_a","dt","input","removedFile","_","removeButtons","_b","targetIndex","targetButton","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAwBC;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;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;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"}
+{"version":3,"file":"hx-file-upload-Di_vpQaG.js","sources":["../../src/components/hx-file-upload/hx-file-upload.styles.ts","../../src/components/hx-file-upload/hx-file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFileUploadStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Label ─── */\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-neutral-700, #343a40);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Dropzone ─── */\n\n  .dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-space-32, 8rem);\n    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);\n    border: var(--hx-border-width-thin, 1px) dashed\n      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));\n    cursor: pointer;\n    text-align: center;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    color: var(--hx-color-neutral-600, #495057);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .dropzone:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-color: var(\n      --hx-file-upload-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-500))\n    );\n  }\n\n  .dropzone--drag-over {\n    border-color: var(--hx-color-primary-500, #2563eb);\n    background-color: var(\n      --hx-file-upload-dropzone-active-bg,\n      color-mix(\n        in srgb,\n        var(--hx-color-primary-500, #2563eb) 8%,\n        var(--hx-color-neutral-0, #ffffff)\n      )\n    );\n    border-style: solid;\n  }\n\n  .dropzone--error {\n    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dropzone {\n      transition: none;\n    }\n  }\n\n  /* ─── Hidden file input ─── */\n\n  .file-input {\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  /* ─── File list ─── */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .file-list:empty {\n    display: none;\n  }\n\n  /* ─── File item ─── */\n\n  .file-item {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .file-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .file-item__name {\n    flex: 1;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-neutral-800, #212529);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .file-item__size {\n    flex-shrink: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-neutral-500, #6c757d);\n  }\n\n  .file-item__remove {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 44px;\n    min-height: 44px;\n    padding: var(--hx-space-1, 0.25rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-neutral-500, #6c757d);\n    cursor: pointer;\n    line-height: 1;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .file-item__remove:hover {\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);\n  }\n\n  .file-item__remove:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .file-item__remove {\n      transition: none;\n    }\n  }\n\n  /* ─── Progress bar ─── */\n\n  .progress-track {\n    width: 100%;\n    height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));\n    background-color: var(--hx-color-neutral-200, #e9ecef);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    width: 100%;\n    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #2563eb));\n    border-radius: inherit;\n    transform-origin: left center;\n    transform: scaleX(var(--_progress-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only utility ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Error message ─── */\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Forced colors (Windows High Contrast / Forced Colors Mode) ─── */\n\n  @media (forced-colors: active) {\n    .dropzone {\n      border: 2px dashed ButtonText;\n      background-color: Canvas;\n      color: ButtonText;\n    }\n\n    .dropzone--drag-over {\n      border: 2px solid Highlight;\n      outline: none;\n      background-color: Canvas;\n    }\n\n    .dropzone--error {\n      border: 2px solid LinkText;\n    }\n\n    .dropzone:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .progress-bar {\n      background: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .file-item__remove:hover {\n      outline: 2px solid Highlight;\n      background-color: transparent;\n      color: ButtonText;\n    }\n\n    .file-item__remove:focus-visible {\n      outline: 2px solid Highlight;\n    }\n\n    :host([disabled]) .dropzone {\n      border-color: GrayText;\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxFileUploadIdCounter = 0;\n\ninterface FileEntry {\n  file: File;\n  progress: number;\n}\n\n/**\n * A drag-and-drop file upload component with client-side validation,\n * file list management, per-file progress, and native form association.\n *\n * @summary Form-associated file upload dropzone with drag-and-drop, validation, and progress tracking.\n *\n * @tag hx-file-upload\n *\n * @slot - Default dropzone content. Replaces the built-in \"Drag files here or click to browse\" prompt.\n * @slot file-list - Custom file list display. When provided, the built-in file list is hidden.\n *\n * @fires {CustomEvent<{files: File[]}>} hx-upload - Dispatched when valid files are selected via drag-and-drop or the file picker.\n * @fires {CustomEvent<{file: File, index: number}>} hx-remove - Dispatched when a file is removed from the list.\n * @fires {CustomEvent<{message: string, files: File[]}>} hx-error - Dispatched when file validation fails (type or size constraint).\n *\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart file-list - The container wrapping the list of selected files.\n * @csspart file-item - An individual file entry in the list.\n * @csspart progress - The progress bar track for a file item.\n * @csspart label - The visible label element.\n * @csspart error - The error message container below the dropzone.\n *\n * @cssprop [--hx-file-upload-dropzone-bg=var(--hx-color-neutral-50)] - Dropzone background color.\n * @cssprop [--hx-file-upload-dropzone-border-color=var(--hx-color-neutral-300)] - Dropzone border color.\n * @cssprop [--hx-file-upload-dropzone-border-radius=var(--hx-border-radius-lg)] - Dropzone border radius.\n * @cssprop [--hx-file-upload-dropzone-active-bg] - Dropzone background when a file is dragged over.\n * @cssprop [--hx-file-upload-progress-color=var(--hx-color-primary-500)] - Progress bar fill color.\n * @cssprop [--hx-file-upload-error-color=var(--hx-color-error-500)] - Error state and remove-button hover color.\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends mixinDelegatesAria(LitElement) {\n  static override styles = [helixFileUploadStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static formAssociated = true;\n\n  /** Holds the ElementInternals instance used for form value and validity management. @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The form field name used during form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Accepted file types as a comma-separated list of MIME types or extensions.\n   * Mirrors the native `<input type=\"file\" accept>` attribute.\n   * @attr accept\n   */\n  @property({ type: String })\n  accept = '';\n\n  /**\n   * Maximum allowed file size in bytes. 0 means unlimited.\n   * @attr max-size\n   */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  /**\n   * Maximum number of files that can be selected. 0 means unlimited.\n   * @attr max-files\n   */\n  @property({ type: Number, attribute: 'max-files' })\n  maxFiles = 0;\n\n  /**\n   * Whether multiple files may be selected at once.\n   * @attr multiple\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Visible label text for the dropzone.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the component is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message displayed below the dropzone. Also puts the dropzone in an error visual state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Instructional text shown in the dropzone when no custom slot content is provided.\n   * Also used as the accessible label for the dropzone.\n   * @attr label-dropzone\n   */\n  @property({ type: String, attribute: 'label-dropzone' })\n  labelDropzone = 'Drag files here or click to browse';\n\n  /** Accessible label for the selected files list. */\n  @property({ type: String, attribute: 'label-file-list' })\n  labelFileList = 'Selected files';\n\n  /**\n   * Generates upload progress description for screen readers.\n   * @param name - file name\n   * @param progress - progress percentage 0-100\n   */\n  @property({ attribute: false })\n  labelUploadProgress: (name: string, progress: number) => string = (name, progress) =>\n    `Upload progress for ${name}: ${progress}%`;\n\n  /**\n   * Screen reader announcement when file drag detected. Override for i18n.\n   * @attr label-drag-detected\n   */\n  @property({ attribute: 'label-drag-detected' })\n  labelDragDetected = 'File detected. Release to upload.';\n\n  // ─── Internal State ───\n\n  /** The list of currently selected file entries, each with a file reference and upload progress. @internal */\n  @state() private _files: FileEntry[] = [];\n  /** Whether a file is currently being dragged over the dropzone. @internal */\n  @state() private _dragOver = false;\n  /** Whether the named file-list slot contains projected content. @internal */\n  @state() private _hasFileListSlot = false;\n\n  // ─── Internal References ───\n\n  /** Reference to the hidden native file input element used to open the OS file picker. @internal */\n  @query('.file-input')\n  private _fileInput: HTMLInputElement | null | undefined;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private readonly _baseId = `hx-file-upload-${++_hxFileUploadIdCounter}`;\n  /** @internal */\n  private readonly _labelId = `${this._baseId}-label`;\n  /** @internal */\n  private readonly _errorId = `${this._baseId}-error`;\n  /** @internal */\n  private readonly _dropzoneId = `${this._baseId}-dropzone`;\n  /** @internal */\n  private readonly _liveId = `${this._baseId}-live`;\n\n  // ─── Slot Handling ───\n\n  /** @internal */\n  private _handleFileListSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFileListSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_files' as keyof HelixFileUpload) || changedProperties.has('name')) {\n      this._syncFormValue();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the component satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this._files = [];\n    this._internals.setFormValue(null);\n  }\n\n  /** @internal */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(_state: string | File | FormData, mode: string): void {\n    if (mode === 'restore' || mode === 'autocomplete') {\n      this._files = [];\n      this._internals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this._files.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n\n    if (this._files.length === 1) {\n      // Single file — pass directly as File (accepted by setFormValue)\n      const firstEntry = this._files[0];\n      if (firstEntry) {\n        this._internals.setFormValue(firstEntry.file);\n      }\n      return;\n    }\n\n    // Multiple files — use FormData so all files are submitted under the same name\n    const formData = new FormData();\n    for (const entry of this._files) {\n      formData.append(this.name, entry.file, entry.file.name);\n    }\n    this._internals.setFormValue(formData);\n  }\n\n  // ─── Validation ───\n\n  /**\n   * Validates a file against `accept` and `maxSize` constraints.\n   * Returns null on success, or an error message string on failure.\n   */\n  /** @internal */\n  private _validateFile(file: File): string | null {\n    if (this.accept) {\n      const accepted = this._isAccepted(file);\n      if (!accepted) {\n        return `\"${file.name}\" has an unsupported file type. Accepted types: ${this.accept}`;\n      }\n    }\n\n    if (this.maxSize > 0 && file.size > this.maxSize) {\n      const maxMb = (this.maxSize / (1024 * 1024)).toFixed(1);\n      return `\"${file.name}\" exceeds the maximum size of ${maxMb} MB.`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Checks whether a file is accepted given the `accept` attribute value.\n   * Handles MIME types (e.g. \"image/png\"), wildcard MIME types (e.g. \"image/*\"),\n   * and extensions (e.g. \".pdf\").\n   */\n  /** @internal */\n  private _isAccepted(file: File): boolean {\n    const tokens = this.accept.split(',').map((t) => t.trim().toLowerCase());\n\n    for (const token of tokens) {\n      if (token.startsWith('.')) {\n        // Extension match\n        if (file.name.toLowerCase().endsWith(token)) return true;\n      } else if (token.endsWith('/*')) {\n        // Wildcard MIME type e.g. \"image/*\"\n        const baseType = token.slice(0, -2);\n        if (file.type.toLowerCase().startsWith(baseType)) return true;\n      } else {\n        // Exact MIME type\n        if (file.type.toLowerCase() === token) return true;\n      }\n    }\n\n    return false;\n  }\n\n  // ─── File Processing ───\n\n  /** @internal */\n  private _processFiles(rawFiles: File[]): void {\n    if (this.disabled) return;\n\n    const candidateFiles = this.multiple ? rawFiles : rawFiles.slice(0, 1);\n    const validFiles: File[] = [];\n    const invalidFiles: File[] = [];\n    const errorMessages: string[] = [];\n\n    for (const file of candidateFiles) {\n      const validationError = this._validateFile(file);\n      if (validationError) {\n        invalidFiles.push(file);\n        errorMessages.push(validationError);\n      } else {\n        validFiles.push(file);\n      }\n    }\n\n    if (invalidFiles.length > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: { message: errorMessages.join(' '), files: invalidFiles },\n        }),\n      );\n    }\n\n    if (validFiles.length === 0) return;\n\n    // Enforce maxFiles limit (only in multiple mode — single-file mode always replaces)\n    const currentCount = this.multiple ? this._files.length : 0;\n    const capacity =\n      this.maxFiles > 0 ? Math.max(0, this.maxFiles - currentCount) : validFiles.length;\n    const allowedFiles = validFiles.slice(0, capacity);\n\n    if (allowedFiles.length === 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n            files: validFiles,\n          },\n        }),\n      );\n      return;\n    }\n\n    if (allowedFiles.length > 0) {\n      const newEntries: FileEntry[] = allowedFiles.map((file) => ({ file, progress: 0 }));\n\n      if (this.multiple) {\n        this._files = [...this._files, ...newEntries];\n      } else {\n        this._files = newEntries;\n      }\n\n      this.dispatchEvent(\n        new CustomEvent<{ files: File[] }>('hx-upload', {\n          bubbles: true,\n          composed: true,\n          detail: { files: allowedFiles },\n        }),\n      );\n    }\n\n    // If remaining valid files were cut by maxFiles, report that too\n    const overflow = validFiles.slice(capacity);\n    if (overflow.length > 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed. ${overflow.length} file${overflow.length === 1 ? ' was' : 's were'} not added.`,\n            files: overflow,\n          },\n        }),\n      );\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Sets the upload progress for a file at the given index.\n   * @param index - Zero-based index into the current file list.\n   * @param percent - Progress percentage from 0 to 100.\n   */\n  setProgress(index: number, percent: number): void {\n    if (index < 0 || index >= this._files.length) return;\n    const clamped = Math.max(0, Math.min(100, percent));\n    this._files = this._files.map((entry, i) =>\n      i === index ? { ...entry, progress: clamped } : entry,\n    );\n  }\n\n  /**\n   * Returns a read-only copy of the currently selected files.\n   */\n  get files(): File[] {\n    return this._files.map((e) => e.file);\n  }\n\n  // ─── Drag and Drop Handlers ───\n\n  /** @internal */\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this._dragOver = true;\n  }\n\n  /** @internal */\n  private _handleDragLeave(e: DragEvent): void {\n    // Only clear drag state when leaving the dropzone entirely\n    const target = e.relatedTarget as Node | null;\n    if (target && this.contains(target)) return;\n    const dropzone = this.shadowRoot?.querySelector('.dropzone');\n    if (dropzone && dropzone.contains(target)) return;\n    this._dragOver = false;\n  }\n\n  /** @internal */\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this._dragOver = false;\n    if (this.disabled) return;\n\n    const dt = e.dataTransfer;\n    if (!dt) return;\n\n    const rawFiles = Array.from(dt.files);\n    if (rawFiles.length === 0) return;\n\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Click / Keyboard Handlers ───\n\n  /** @internal */\n  private _handleDropzoneClick(): void {\n    if (this.disabled) return;\n    this._fileInput?.click();\n  }\n\n  /** @internal */\n  private _handleDropzoneKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._fileInput?.click();\n    }\n  }\n\n  /** @internal */\n  private _handleFileInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const rawFiles = Array.from(input.files);\n    // Reset the input so the same file can be re-selected after removal\n    input.value = '';\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Remove Handler ───\n\n  /** @internal */\n  private _handleRemove(index: number): void {\n    if (this.disabled) return;\n    const entry = this._files[index];\n    if (!entry) return;\n\n    const removedFile = entry.file;\n    this._files = this._files.filter((_, i) => i !== index);\n\n    this.dispatchEvent(\n      new CustomEvent<{ file: File; index: number }>('hx-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { file: removedFile, index },\n      }),\n    );\n\n    // Restore focus after removal so keyboard users are not stranded.\n    this.updateComplete\n      .then(() => {\n        if (this._files.length === 0) {\n          // List is now empty — return focus to the dropzone.\n          const dropzone = this.shadowRoot?.querySelector<HTMLElement>('[part=\"dropzone\"]');\n          dropzone?.focus();\n        } else {\n          // Focus the remove button at the same position, or the previous one if\n          // the removed item was the last in the list.\n          const removeButtons =\n            this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.file-item__remove');\n          if (removeButtons && removeButtons.length > 0) {\n            const targetIndex = index < this._files.length ? index : this._files.length - 1;\n            const targetButton = removeButtons[targetIndex];\n            if (targetButton) {\n              targetButton.focus();\n            }\n          }\n        }\n      })\n      .catch(() => {\n        // Focus restoration is best-effort; ignore errors.\n      });\n  }\n\n  // ─── Formatters ───\n\n  /** @internal */\n  private _formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderFileList() {\n    if (this._hasFileListSlot) return nothing;\n    if (this._files.length === 0) return nothing;\n\n    return html`\n      <ul part=\"file-list\" class=\"file-list\" aria-label=${this.labelFileList}>\n        ${repeat(\n          this._files,\n          (entry) => entry.file.name + entry.file.size,\n          (entry, index) => html`\n            <li part=\"file-item\" class=\"file-item\">\n              <div class=\"file-item__row\">\n                <span class=\"file-item__name\" title=${entry.file.name}> ${entry.file.name} </span>\n                <span class=\"file-item__size\">${this._formatSize(entry.file.size)}</span>\n                <button\n                  type=\"button\"\n                  class=\"file-item__remove\"\n                  aria-label=${`Remove ${entry.file.name}`}\n                  @click=${() => this._handleRemove(index)}\n                >\n                  <svg\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M1 1L13 13M13 1L1 13\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.75\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                </button>\n              </div>\n              <div\n                part=\"progress\"\n                class=\"progress-track\"\n                role=\"progressbar\"\n                aria-valuenow=${entry.progress}\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-label=${this.labelUploadProgress(entry.file.name, entry.progress)}\n              >\n                <div\n                  class=\"progress-bar\"\n                  style=\"--_progress-ratio: ${String(entry.progress / 100)}\"\n                ></div>\n              </div>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error;\n\n    const dropzoneClasses = {\n      dropzone: true,\n      'dropzone--drag-over': this._dragOver,\n      'dropzone--error': hasError,\n    };\n\n    const dropzoneLabel = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;\n\n    return html`\n      <div class=\"field\">\n        ${this.label\n          ? html`\n              <label part=\"label\" class=\"field__label\" id=${this._labelId} for=${this._dropzoneId}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n\n        <div\n          part=\"dropzone\"\n          class=${classMap(dropzoneClasses)}\n          id=${this._dropzoneId}\n          role=\"button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-label=${ifDefined(!this.label ? (this.ariaLabel ?? dropzoneLabel) : undefined)}\n          aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-invalid=${hasError ? 'true' : nothing}\n          aria-describedby=${ifDefined(hasError ? this._errorId : undefined)}\n          @click=${this._handleDropzoneClick}\n          @keydown=${this._handleDropzoneKeyDown}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n          @drop=${this._handleDrop}\n        >\n          <slot>${this.labelDropzone}</slot>\n        </div>\n\n        <input\n          class=\"file-input\"\n          type=\"file\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          accept=${ifDefined(this.accept || undefined)}\n          ?multiple=${this.multiple}\n          ?disabled=${this.disabled}\n          @change=${this._handleFileInputChange}\n        />\n\n        <slot name=\"file-list\" @slotchange=${this._handleFileListSlotChange}></slot>\n\n        ${this._renderFileList()}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>\n            `\n          : nothing}\n\n        <div id=${this._liveId} class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${this._dragOver ? this.labelDragDetected : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-file-upload': HelixFileUpload;\n  }\n}\n"],"names":["helixFileUploadStyles","css","_hxFileUploadIdCounter","HelixFileUpload","mixinDelegatesAria","LitElement","name","progress","slot","changedProperties","disabled","_state","mode","firstEntry","formData","entry","file","maxMb","tokens","token","baseType","rawFiles","candidateFiles","validFiles","invalidFiles","errorMessages","validationError","currentCount","capacity","allowedFiles","newEntries","overflow","index","percent","clamped","i","target","dropzone","_a","dt","input","removedFile","_","removeButtons","_b","targetIndex","targetButton","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAwBC;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;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;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"}

package/dist/shared/{hx-list-CnDK30Yk.js → hx-list-Dnei26t4.js}

@@ -1,4 +1,4 @@
-import { css as v, LitElement as b, html as a, nothing as p } from "lit";
+import { css as v, LitElement as b, html as a, nothing as h } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
 import { property as n, customElement as x } from "lit/decorators.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
@@ -254,7 +254,7 @@ let o = class extends b {
         <dt
           part="base"
           class=${u({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           ${this._renderContent()}
         </dt>
@@ -262,7 +262,7 @@ let o = class extends b {
         <dd
           part="base"
           class=${u({ "list-item": !0, "list-item--disabled": this.disabled })}
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           ${this._renderContent()}
         </dd>
@@ -285,7 +285,7 @@ let o = class extends b {
           part="base"
           class="list-item"
           role="listitem"
-          aria-disabled=${this.disabled ? "true" : p}
+          aria-disabled=${this.disabled ? "true" : h}
         >
           <a class="list-item__link" href=${m(this.href)} @click=${this._handleClick}>
             ${this._renderContent()}
@@ -300,7 +300,7 @@ let o = class extends b {
       "list-item--disabled": this.disabled
     })}
         role="listitem"
-        aria-disabled=${this.disabled ? "true" : p}
+        aria-disabled=${this.disabled ? "true" : h}
         @click=${this._handleClick}
         @keydown=${this._handleKeydown}
       >
@@ -340,7 +340,7 @@ var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (t, e, r
     (d = t[l]) && (i = (s ? d(e, r, i) : d(i)) || i);
   return s && i && $(e, r, i), i;
 };
-let h = class extends b {
+let p = class extends b {
   constructor() {
     super(...arguments), this.variant = "plain", this.divided = !1, this.label = void 0, this._handleKeydown = (t) => {
       var l;
@@ -429,8 +429,8 @@ let h = class extends b {
         part="base"
         class="list list--${this.variant}"
         role=${t ? "listbox" : "list"}
-        aria-label=${t ? this.label || "List" : m(this.label)}
-        aria-multiselectable=${t ? "false" : p}
+        aria-label=${t ? this.label || h : m(this.label)}
+        aria-multiselectable=${t ? "false" : h}
         @hx-list-item-click=${this._handleItemClick}
       >
         ${s}
@@ -438,21 +438,21 @@ let h = class extends b {
     `;
   }
 };
-h.styles = [y];
+p.styles = [y];
 f([
   n({ type: String, reflect: !0 })
-], h.prototype, "variant", 2);
+], p.prototype, "variant", 2);
 f([
   n({ type: Boolean, reflect: !0 })
-], h.prototype, "divided", 2);
+], p.prototype, "divided", 2);
 f([
   n({ type: String })
-], h.prototype, "label", 2);
-h = f([
+], p.prototype, "label", 2);
+p = f([
   x("hx-list")
-], h);
+], p);
 export {
-  h as H,
+  p as H,
   o as a
 };
-//# sourceMappingURL=hx-list-CnDK30Yk.js.map
+//# sourceMappingURL=hx-list-Dnei26t4.js.map

package/dist/shared/{hx-list-CnDK30Yk.js.map → hx-list-Dnei26t4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-list-CnDK30Yk.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n  :host {\n    display: block;\n  }\n\n  .list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-list-gap, 0);\n  }\n\n  /* ─── Variant: bulleted ─── */\n\n  .list--bulleted {\n    padding-inline-start: var(--hx-space-6, 1.5rem);\n    list-style: disc;\n  }\n\n  /* ─── Variant: numbered ─── */\n\n  .list--numbered {\n    padding-inline-start: var(--hx-space-6, 1.5rem);\n    list-style: decimal;\n  }\n\n  /* ─── Variant: interactive ─── */\n\n  .list--interactive {\n    list-style: none;\n    padding: 0;\n  }\n\n  /* ─── Variant: description ─── */\n\n  .list--description {\n    padding: 0;\n    list-style: none;\n  }\n\n  /* ─── Dividers ─── */\n\n  :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base list item ─── */\n\n  .list-item {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n    color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: default;\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── */\n\n  :host([interactive]) .list-item {\n    cursor: pointer;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n    background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  :host([interactive]):focus-visible .list-item {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Selected state ─── */\n\n  .list-item--selected {\n    background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));\n    color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1d4ed8));\n  }\n\n  /* ─── Disabled state ─── */\n\n  .list-item--disabled {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Link mode ─── */\n\n  .list-item__link {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-3, 0.75rem);\n    width: 100%;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  .list-item__link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  /* ─── Slots ─── */\n\n  .list-item__prefix,\n  .list-item__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .list-item__body {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .list-item__label {\n    display: block;\n  }\n\n  .list-item__description {\n    display: block;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));\n    margin-top: var(--hx-space-1, 0.25rem);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host([interactive]) .list-item {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast / forced-colors mode) ─── */\n\n  @media (forced-colors: active) {\n    /* Selected state: replace background-color with a visible border using system Highlight color */\n    :host([interactive]) .list-item--selected {\n      background-color: transparent;\n      border: 2px solid Highlight;\n      color: HighlightText;\n      forced-color-adjust: none;\n    }\n\n    /* Hover state: use an outline instead of background-color */\n    :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n      background-color: transparent;\n      outline: 1px solid Highlight;\n      outline-offset: -1px;\n    }\n\n    /* Disabled state: use system GrayText color */\n    :host([interactive][disabled]) .list-item,\n    :host([interactive]) .list-item--disabled {\n      color: GrayText;\n    }\n\n    /* Focus ring: ensure visibility in forced-colors mode */\n    :host([interactive]):focus-visible .list-item {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/**\n * A rich list item for use inside `hx-list`.\n *\n * @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n *\n * @tag hx-list-item\n *\n * @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-list-item-click -\n *   Dispatched when the item is clicked and not disabled.\n *\n * @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n *\n * @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-list-item')\nexport class HelixListItem extends LitElement {\n  static override styles = [helixListItemStyles];\n\n  /**\n   * Whether the item is disabled. Prevents interaction.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the item is selected (used in interactive mode).\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * When set, renders the item as a link (only in non-interactive variants).\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * The value associated with this item (used with hx-select).\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Set by the parent hx-list to indicate this item is part of an interactive listbox.\n   * Controls CSS styling and ARIA role via host attributes.\n   * @attr interactive\n   */\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  /**\n   * Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n   * @attr type\n   */\n  @property({ type: String, reflect: true })\n  type: 'default' | 'term' | 'definition' = 'default';\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (\n      changedProps.has('interactive') ||\n      changedProps.has('selected') ||\n      changedProps.has('disabled')\n    ) {\n      this._syncHostAria();\n    }\n  }\n\n  /**\n   * Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n   * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n   */\n  /** @internal */\n  private _syncHostAria(): void {\n    if (this.interactive) {\n      this.setAttribute('role', 'option');\n      this.setAttribute('aria-selected', String(this.selected));\n      if (this.disabled) {\n        this.setAttribute('aria-disabled', 'true');\n      } else {\n        this.removeAttribute('aria-disabled');\n      }\n      if (!this.disabled) {\n        this.setAttribute('tabindex', '0');\n      } else {\n        this.removeAttribute('tabindex');\n      }\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-selected');\n      this.removeAttribute('aria-disabled');\n      this.removeAttribute('tabindex');\n    }\n  }\n\n  /** @internal */\n  private _dispatchListItemClick(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-list-item-click', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this, value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this._dispatchListItemClick();\n  }\n\n  /** @internal */\n  private _renderContent() {\n    return html`\n      <span part=\"prefix\" class=\"list-item__prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span class=\"list-item__body\">\n        <span part=\"label\" class=\"list-item__label\">\n          <slot></slot>\n        </span>\n        <span part=\"description\" class=\"list-item__description\">\n          <slot name=\"description\"></slot>\n        </span>\n      </span>\n      <span part=\"suffix\" class=\"list-item__suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  override render() {\n    // Description list: render as <dt> (term) or <dd> (definition)\n    if (this.type === 'term') {\n      return html`\n        <dt\n          part=\"base\"\n          class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          ${this._renderContent()}\n        </dt>\n      `;\n    }\n\n    if (this.type === 'definition') {\n      return html`\n        <dd\n          part=\"base\"\n          class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          ${this._renderContent()}\n        </dd>\n      `;\n    }\n\n    // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n    // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n    if (this.interactive) {\n      // In interactive mode, links are not rendered as <a> to avoid\n      // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n      return html`\n        <li\n          part=\"base\"\n          role=\"presentation\"\n          class=${classMap({\n            'list-item': true,\n            'list-item--selected': this.selected,\n            'list-item--disabled': this.disabled,\n          })}\n          @click=${this._handleClick}\n          @keydown=${this._handleKeydown}\n        >\n          ${this._renderContent()}\n        </li>\n      `;\n    }\n\n    // Non-interactive with href: render as link\n    if (this.href !== undefined && !this.disabled) {\n      return html`\n        <li\n          part=\"base\"\n          class=\"list-item\"\n          role=\"listitem\"\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n            ${this._renderContent()}\n          </a>\n        </li>\n      `;\n    }\n\n    // Default non-interactive\n    return html`\n      <li\n        part=\"base\"\n        class=${classMap({\n          'list-item': true,\n          'list-item--selected': this.selected,\n          'list-item--disabled': this.disabled,\n        })}\n        role=\"listitem\"\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n      >\n        ${this._renderContent()}\n      </li>\n    `;\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.disabled) {\n        this._dispatchListItemClick();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-list-item': HelixListItem;\n  }\n}\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n *\n * @summary Container for list items with optional dividers and interactive selection.\n *\n * @tag hx-list\n *\n * @slot - Default slot for `hx-list-item` elements.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-select - Dispatched\n *   when an item is clicked in interactive mode.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n */\n@customElement('hx-list')\nexport class HelixList extends LitElement {\n  static override styles = [helixListStyles];\n\n  /**\n   * Visual variant of the list.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'plain' | 'bulleted' | 'numbered' | 'description' | 'interactive' = 'plain';\n\n  /**\n   * Whether to show dividers between list items.\n   * @attr divided\n   */\n  @property({ type: Boolean, reflect: true })\n  divided = false;\n\n  /**\n   * Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (changedProps.has('variant')) {\n      this._updateItemStates();\n    }\n    if (this.variant === 'interactive' && !this.label) {\n      devWarn(\n        'hx-list',\n        'The \"label\" attribute is required when variant is \"interactive\". ' +\n          'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n      );\n    }\n  }\n\n  /**\n   * Sets the `interactive` property on all child hx-list-item elements\n   * so they can style and behave correctly without `:host-context()`.\n   */\n  /** @internal */\n  private _updateItemStates(): void {\n    const isInteractive = this.variant === 'interactive';\n    const items = this.querySelectorAll('hx-list-item');\n    for (const item of items) {\n      (item as HelixListItem).interactive = isInteractive;\n    }\n  }\n\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._updateItemStates();\n  }\n\n  /** @internal */\n  private readonly _handleKeydown = (e: KeyboardEvent): void => {\n    if (this.variant !== 'interactive') return;\n\n    const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n    if (items.length === 0) return;\n\n    const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n    const currentIndex = focused ? items.indexOf(focused) : -1;\n\n    let nextIndex = currentIndex;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextIndex = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextIndex = items.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    items[nextIndex]?.focus();\n  };\n\n  /** @internal */\n  private _handleItemClick(e: Event): void {\n    if (this.variant !== 'interactive') return;\n\n    if (!(e.target instanceof HelixListItem)) return;\n    const item = e.target;\n    if (item.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item, value: item.value },\n      }),\n    );\n  }\n\n  override render() {\n    const isInteractive = this.variant === 'interactive';\n    const isNumbered = this.variant === 'numbered';\n    const isDescription = this.variant === 'description';\n\n    const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n    if (isDescription) {\n      return html`\n        <dl\n          part=\"base\"\n          class=\"list list--${this.variant}\"\n          aria-label=${ifDefined(this.label)}\n          @hx-list-item-click=${this._handleItemClick}\n        >\n          ${slot}\n        </dl>\n      `;\n    }\n\n    if (isNumbered) {\n      return html`\n        <div\n          part=\"base\"\n          role=\"list\"\n          class=\"list list--${this.variant}\"\n          aria-label=${ifDefined(this.label)}\n          @hx-list-item-click=${this._handleItemClick}\n        >\n          ${slot}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"list list--${this.variant}\"\n        role=${isInteractive ? 'listbox' : 'list'}\n        aria-label=${isInteractive ? this.label || 'List' : ifDefined(this.label)}\n        aria-multiselectable=${isInteractive ? 'false' : nothing}\n        @hx-list-item-click=${this._handleItemClick}\n      >\n        ${slot}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-list': HelixList;\n  }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","LitElement","changedProps","e","html","classMap","nothing","ifDefined","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":"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"}
+{"version":3,"file":"hx-list-Dnei26t4.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n  :host {\n    display: block;\n  }\n\n  .list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-list-gap, 0);\n  }\n\n  /* ─── Variant: bulleted ─── */\n\n  .list--bulleted {\n    padding-inline-start: var(--hx-space-6, 1.5rem);\n    list-style: disc;\n  }\n\n  /* ─── Variant: numbered ─── */\n\n  .list--numbered {\n    padding-inline-start: var(--hx-space-6, 1.5rem);\n    list-style: decimal;\n  }\n\n  /* ─── Variant: interactive ─── */\n\n  .list--interactive {\n    list-style: none;\n    padding: 0;\n  }\n\n  /* ─── Variant: description ─── */\n\n  .list--description {\n    padding: 0;\n    list-style: none;\n  }\n\n  /* ─── Dividers ─── */\n\n  :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Base list item ─── */\n\n  .list-item {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n    color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: default;\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── */\n\n  :host([interactive]) .list-item {\n    cursor: pointer;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n    background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  :host([interactive]):focus-visible .list-item {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Selected state ─── */\n\n  .list-item--selected {\n    background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));\n    color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1d4ed8));\n  }\n\n  /* ─── Disabled state ─── */\n\n  .list-item--disabled {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  /* ─── Link mode ─── */\n\n  .list-item__link {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-3, 0.75rem);\n    width: 100%;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  .list-item__link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-600, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  /* ─── Slots ─── */\n\n  .list-item__prefix,\n  .list-item__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .list-item__body {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  .list-item__label {\n    display: block;\n  }\n\n  .list-item__description {\n    display: block;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));\n    margin-top: var(--hx-space-1, 0.25rem);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host([interactive]) .list-item {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast / forced-colors mode) ─── */\n\n  @media (forced-colors: active) {\n    /* Selected state: replace background-color with a visible border using system Highlight color */\n    :host([interactive]) .list-item--selected {\n      background-color: transparent;\n      border: 2px solid Highlight;\n      color: HighlightText;\n      forced-color-adjust: none;\n    }\n\n    /* Hover state: use an outline instead of background-color */\n    :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n      background-color: transparent;\n      outline: 1px solid Highlight;\n      outline-offset: -1px;\n    }\n\n    /* Disabled state: use system GrayText color */\n    :host([interactive][disabled]) .list-item,\n    :host([interactive]) .list-item--disabled {\n      color: GrayText;\n    }\n\n    /* Focus ring: ensure visibility in forced-colors mode */\n    :host([interactive]):focus-visible .list-item {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/**\n * A rich list item for use inside `hx-list`.\n *\n * @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n *\n * @tag hx-list-item\n *\n * @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-list-item-click -\n *   Dispatched when the item is clicked and not disabled.\n *\n * @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n *\n * @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-list-item')\nexport class HelixListItem extends LitElement {\n  static override styles = [helixListItemStyles];\n\n  /**\n   * Whether the item is disabled. Prevents interaction.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the item is selected (used in interactive mode).\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * When set, renders the item as a link (only in non-interactive variants).\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * The value associated with this item (used with hx-select).\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  /**\n   * Set by the parent hx-list to indicate this item is part of an interactive listbox.\n   * Controls CSS styling and ARIA role via host attributes.\n   * @attr interactive\n   */\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  /**\n   * Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n   * @attr type\n   */\n  @property({ type: String, reflect: true })\n  type: 'default' | 'term' | 'definition' = 'default';\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (\n      changedProps.has('interactive') ||\n      changedProps.has('selected') ||\n      changedProps.has('disabled')\n    ) {\n      this._syncHostAria();\n    }\n  }\n\n  /**\n   * Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n   * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n   */\n  /** @internal */\n  private _syncHostAria(): void {\n    if (this.interactive) {\n      this.setAttribute('role', 'option');\n      this.setAttribute('aria-selected', String(this.selected));\n      if (this.disabled) {\n        this.setAttribute('aria-disabled', 'true');\n      } else {\n        this.removeAttribute('aria-disabled');\n      }\n      if (!this.disabled) {\n        this.setAttribute('tabindex', '0');\n      } else {\n        this.removeAttribute('tabindex');\n      }\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-selected');\n      this.removeAttribute('aria-disabled');\n      this.removeAttribute('tabindex');\n    }\n  }\n\n  /** @internal */\n  private _dispatchListItemClick(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-list-item-click', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this, value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this._dispatchListItemClick();\n  }\n\n  /** @internal */\n  private _renderContent() {\n    return html`\n      <span part=\"prefix\" class=\"list-item__prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <span class=\"list-item__body\">\n        <span part=\"label\" class=\"list-item__label\">\n          <slot></slot>\n        </span>\n        <span part=\"description\" class=\"list-item__description\">\n          <slot name=\"description\"></slot>\n        </span>\n      </span>\n      <span part=\"suffix\" class=\"list-item__suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n\n  override render() {\n    // Description list: render as <dt> (term) or <dd> (definition)\n    if (this.type === 'term') {\n      return html`\n        <dt\n          part=\"base\"\n          class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          ${this._renderContent()}\n        </dt>\n      `;\n    }\n\n    if (this.type === 'definition') {\n      return html`\n        <dd\n          part=\"base\"\n          class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          ${this._renderContent()}\n        </dd>\n      `;\n    }\n\n    // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n    // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n    if (this.interactive) {\n      // In interactive mode, links are not rendered as <a> to avoid\n      // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n      return html`\n        <li\n          part=\"base\"\n          role=\"presentation\"\n          class=${classMap({\n            'list-item': true,\n            'list-item--selected': this.selected,\n            'list-item--disabled': this.disabled,\n          })}\n          @click=${this._handleClick}\n          @keydown=${this._handleKeydown}\n        >\n          ${this._renderContent()}\n        </li>\n      `;\n    }\n\n    // Non-interactive with href: render as link\n    if (this.href !== undefined && !this.disabled) {\n      return html`\n        <li\n          part=\"base\"\n          class=\"list-item\"\n          role=\"listitem\"\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n            ${this._renderContent()}\n          </a>\n        </li>\n      `;\n    }\n\n    // Default non-interactive\n    return html`\n      <li\n        part=\"base\"\n        class=${classMap({\n          'list-item': true,\n          'list-item--selected': this.selected,\n          'list-item--disabled': this.disabled,\n        })}\n        role=\"listitem\"\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n      >\n        ${this._renderContent()}\n      </li>\n    `;\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.disabled) {\n        this._dispatchListItemClick();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-list-item': HelixListItem;\n  }\n}\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n *\n * @summary Container for list items with optional dividers and interactive selection.\n *\n * @tag hx-list\n *\n * @slot - Default slot for `hx-list-item` elements.\n *\n * @fires {CustomEvent<{item: HelixListItem, value: string | undefined}>} hx-select - Dispatched\n *   when an item is clicked in interactive mode.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n */\n@customElement('hx-list')\nexport class HelixList extends LitElement {\n  static override styles = [helixListStyles];\n\n  /**\n   * Visual variant of the list.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'plain' | 'bulleted' | 'numbered' | 'description' | 'interactive' = 'plain';\n\n  /**\n   * Whether to show dividers between list items.\n   * @attr divided\n   */\n  @property({ type: Boolean, reflect: true })\n  divided = false;\n\n  /**\n   * Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n   * @attr label\n   */\n  @property({ type: String })\n  label: string | undefined = undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (changedProps.has('variant')) {\n      this._updateItemStates();\n    }\n    if (this.variant === 'interactive' && !this.label) {\n      devWarn(\n        'hx-list',\n        'The \"label\" attribute is required when variant is \"interactive\". ' +\n          'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n      );\n    }\n  }\n\n  /**\n   * Sets the `interactive` property on all child hx-list-item elements\n   * so they can style and behave correctly without `:host-context()`.\n   */\n  /** @internal */\n  private _updateItemStates(): void {\n    const isInteractive = this.variant === 'interactive';\n    const items = this.querySelectorAll('hx-list-item');\n    for (const item of items) {\n      (item as HelixListItem).interactive = isInteractive;\n    }\n  }\n\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._updateItemStates();\n  }\n\n  /** @internal */\n  private readonly _handleKeydown = (e: KeyboardEvent): void => {\n    if (this.variant !== 'interactive') return;\n\n    const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n    if (items.length === 0) return;\n\n    const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n    const currentIndex = focused ? items.indexOf(focused) : -1;\n\n    let nextIndex = currentIndex;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextIndex = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextIndex = items.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    items[nextIndex]?.focus();\n  };\n\n  /** @internal */\n  private _handleItemClick(e: Event): void {\n    if (this.variant !== 'interactive') return;\n\n    if (!(e.target instanceof HelixListItem)) return;\n    const item = e.target;\n    if (item.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent<{ item: HelixListItem; value: string | undefined }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item, value: item.value },\n      }),\n    );\n  }\n\n  override render() {\n    const isInteractive = this.variant === 'interactive';\n    const isNumbered = this.variant === 'numbered';\n    const isDescription = this.variant === 'description';\n\n    const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n    if (isDescription) {\n      return html`\n        <dl\n          part=\"base\"\n          class=\"list list--${this.variant}\"\n          aria-label=${ifDefined(this.label)}\n          @hx-list-item-click=${this._handleItemClick}\n        >\n          ${slot}\n        </dl>\n      `;\n    }\n\n    if (isNumbered) {\n      return html`\n        <div\n          part=\"base\"\n          role=\"list\"\n          class=\"list list--${this.variant}\"\n          aria-label=${ifDefined(this.label)}\n          @hx-list-item-click=${this._handleItemClick}\n        >\n          ${slot}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"list list--${this.variant}\"\n        role=${isInteractive ? 'listbox' : 'list'}\n        aria-label=${isInteractive ? this.label || nothing : ifDefined(this.label)}\n        aria-multiselectable=${isInteractive ? 'false' : nothing}\n        @hx-list-item-click=${this._handleItemClick}\n      >\n        ${slot}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-list': HelixList;\n  }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","LitElement","changedProps","e","html","classMap","nothing","ifDefined","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":"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"}

package/dist/shared/{hx-phi-field-Df06K0J3.js → hx-phi-field-DD1qcBSO.js}

@@ -21,7 +21,7 @@ const m = c`
     user-select: none;
     -webkit-user-select: none;
     color: var(--hx-phi-field-masked-color, var(--hx-color-neutral-500, #6b7280));
-    letter-spacing: 0.1em;
+    letter-spacing: var(--hx-phi-field-letter-spacing, 0.1em);
   }
 
   .phi-field__value--revealed {
@@ -309,4 +309,4 @@ a = s([
 export {
   a as H
 };
-//# sourceMappingURL=hx-phi-field-Df06K0J3.js.map
+//# sourceMappingURL=hx-phi-field-DD1qcBSO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-phi-field-DD1qcBSO.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: var(--hx-phi-field-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  /* ─── Forced Colors (Windows High Contrast Mode) ─── */\n\n  @media (forced-colors: active) {\n    .phi-field__toggle {\n      border: 1px solid ButtonText;\n      forced-color-adjust: none;\n    }\n\n    .phi-field__toggle:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n`;\n","import { LitElement, html, type TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { helixPhiFieldStyles } from './hx-phi-field.styles.js';\nimport { devWarn } from '../../utils/dev-warn.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 = [helixPhiFieldStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The Protected Health Information value to display or mask.\n   * Must be set via the JavaScript property (`element.data = \"...\"`) — not as an HTML attribute.\n   * Setting PHI as an HTML attribute exposes it in the DOM and browser caches (HIPAA violation).\n   */\n  @property({ attribute: false })\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    // Warn if a developer mistakenly sets PHI via the HTML attribute\n    if (this.hasAttribute('data')) {\n      devWarn(\n        'hx-phi-field',\n        'Setting PHI via the `data` HTML attribute is not supported and may expose sensitive data in the DOM. Use the `data` property (element.data = \"...\") instead.',\n      );\n    }\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\n              part=\"value\"\n              class=\"phi-field__value phi-field__value--masked\"\n              aria-hidden=\"true\"\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","__decorateClass","property","state","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helixui/library",
-  "version": "2.1.2-next.51",
+  "version": "2.1.2-next.52",
   "description": "Enterprise Web Component Library built with Lit 3.x",
   "type": "module",
   "sideEffects": [
@@ -45,7 +45,7 @@
   "customElements": "custom-elements.json",
   "dependencies": {
     "lit": "^3.3.2",
-    "@helixui/tokens": "2.1.2-next.51"
+    "@helixui/tokens": "2.1.2-next.52"
   },
   "peerDependencies": {
     "@floating-ui/dom": "^1.7.6"

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

@@ -1 +0,0 @@
-{"version":3,"file":"hx-phi-field-Df06K0J3.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  /* ─── Forced Colors (Windows High Contrast Mode) ─── */\n\n  @media (forced-colors: active) {\n    .phi-field__toggle {\n      border: 1px solid ButtonText;\n      forced-color-adjust: none;\n    }\n\n    .phi-field__toggle:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n`;\n","import { LitElement, html, type TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { helixPhiFieldStyles } from './hx-phi-field.styles.js';\nimport { devWarn } from '../../utils/dev-warn.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 = [helixPhiFieldStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The Protected Health Information value to display or mask.\n   * Must be set via the JavaScript property (`element.data = \"...\"`) — not as an HTML attribute.\n   * Setting PHI as an HTML attribute exposes it in the DOM and browser caches (HIPAA violation).\n   */\n  @property({ attribute: false })\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    // Warn if a developer mistakenly sets PHI via the HTML attribute\n    if (this.hasAttribute('data')) {\n      devWarn(\n        'hx-phi-field',\n        'Setting PHI via the `data` HTML attribute is not supported and may expose sensitive data in the DOM. Use the `data` property (element.data = \"...\") instead.',\n      );\n    }\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\n              part=\"value\"\n              class=\"phi-field__value phi-field__value--masked\"\n              aria-hidden=\"true\"\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","__decorateClass","property","state","customElement"],"mappings":"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"}