@helixui/library 3.7.0 → 3.8.0-next.145

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

@@ -1 +0,0 @@
-{"version":3,"file":"hx-file-upload-D3rKROK5.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-file-upload-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-text-strong, #202b39);\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-border-strong, #66787b));\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-surface-raised, #f5f8f3));\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-text-secondary, #313e4b);\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(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-color: var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n  }\n\n  .dropzone--drag-over {\n    border-color: var(--hx-color-primary-500, #429797);\n    background-color: var(\n      --hx-file-upload-dropzone-active-bg,\n      color-mix(\n        in srgb,\n        var(--hx-color-primary-500, #429797) 8%,\n        var(--hx-color-surface-default, #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, #e5493e));\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-border-default, #d6dbd5);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: var(--hx-color-surface-default, #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-text-strong, #202b39);\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-text-muted, #4a5362);\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-text-muted, #4a5362);\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, #c92a2a));\n    background-color: color-mix(in srgb, var(--hx-color-error-500, #e5493e) 8%, transparent);\n  }\n\n  .file-item__remove:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\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-border-default, #d6dbd5);\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, #429797));\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, #c92a2a));\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 { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.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 { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextFileUploadId = createIdCounter('hx-file-upload');\n\ninterface FileEntry {\n  file: File;\n  progress: number;\n}\n\n/** Detail for the hx-upload event dispatched by hx-file-upload. */\nexport interface HxFileUploadDetail {\n  files: File[];\n}\n\n/** Detail for the hx-remove event dispatched by hx-file-upload. */\nexport interface HxFileRemoveDetail {\n  file: File;\n  index: number;\n}\n\n/** Detail for the hx-error event dispatched by hx-file-upload. */\nexport interface HxFileErrorDetail {\n  message: string;\n  files: File[];\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 * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-file-upload-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-space-32] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-file-upload-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-file-upload-progress-height=var(--hx-space-1)] - Height.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends FormMixin(mixinDelegatesAria(HelixElement)) {\n  static override styles = [helixFileUploadStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The form field name used during form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\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   * Accessible label for the dropzone when no visible label text is provided.\n   * Falls back to `label-dropzone` prop value, then a default string.\n   *\n   * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n   * `accessible-label` takes precedence when both are set.\n   *\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string = '';\n\n  /**\n   * Returns the effective label for the dropzone, checking accessible-label first,\n   * then the aria-label attribute, falling back to empty string.\n   * @internal\n   */\n  private get _effectiveLabel(): string {\n    return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n  }\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 = _nextFileUploadId();\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    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    this._files = [];\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    _state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): 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._handleInteractionInput();\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._effectiveLabel || (!this.label ? dropzoneLabel : undefined))}\n          aria-labelledby=${ifDefined(\n            !this._effectiveLabel && this.label ? this._labelId : undefined,\n          )}\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","_nextFileUploadId","createIdCounter","HelixFileUpload","FormMixin","mixinDelegatesAria","HelixElement","name","progress","_a","_b","slot","changedProperties","errorEl","msg","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","dt","input","removedFile","_","removeButtons","targetIndex","targetButton","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","forcedColorsField","__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;AA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"}

package/dist/shared/hx-help-text-Xb2Yr8x2.js

@@ -1,156 +0,0 @@
-import { css as p, nothing as c, html as l } from "lit";
-import { property as v, customElement as f } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-import { a as u } from "./forced-colors-CTEDFRGa.js";
-import { H as m } from "./helix-element-BNEYeiys.js";
-const g = p`
-  :host {
-    display: block;
-  }
-
-  .help-text {
-    display: inline-flex;
-    align-items: baseline;
-    gap: var(--hx-help-text-icon-gap, 0.375rem);
-    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));
-    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
-    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
-    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
-    color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));
-    margin: 0;
-  }
-
-  .help-text__icon {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .help-text__text {
-    min-width: 0;
-  }
-
-  /* ─── Variant: default ─── */
-
-  .help-text--default {
-    --hx-help-text-color: var(--hx-color-text-muted, #4a5362);
-  }
-
-  /* ─── Variant: error ─── */
-
-  .help-text--error {
-    --hx-help-text-color: var(--hx-color-error-600, #c92a2a);
-  }
-
-  /* ─── Variant: warning ─── */
-
-  .help-text--warning {
-    --hx-help-text-color: var(--hx-color-warning-700, #804605);
-  }
-
-  /* ─── Variant: success ─── */
-
-  .help-text--success {
-    --hx-help-text-color: var(--hx-color-success-700, #146831);
-  }
-
-  /* ─── High Contrast Mode (forced-colors) ─── */
-
-  @media (forced-colors: active) {
-    .help-text {
-      color: GrayText;
-    }
-
-    .help-text--error {
-      color: LinkText;
-    }
-
-    .help-text--warning {
-      color: CanvasText;
-    }
-
-    .help-text--success {
-      color: CanvasText;
-    }
-  }
-`;
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, x = (i, e, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? y(e, o) : e, a = i.length - 1, s; a >= 0; a--)
-    (s = i[a]) && (t = (r ? s(e, o, t) : s(t)) || t);
-  return r && t && w(e, o, t), t;
-};
-const k = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
-  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none" />
-  <line
-    x1="8"
-    y1="4.5"
-    x2="8"
-    y2="8.5"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-  />
-  <circle cx="8" cy="11" r="0.75" fill="currentColor" />
-</svg>`, _ = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
-  <path
-    d="M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z"
-    stroke="currentColor"
-    stroke-width="1.25"
-    fill="none"
-  />
-  <line
-    x1="8"
-    y1="6"
-    x2="8"
-    y2="9"
-    stroke="currentColor"
-    stroke-width="1.25"
-    stroke-linecap="round"
-  />
-  <circle cx="8" cy="11" r="0.625" fill="currentColor" />
-</svg>`, C = l`<svg viewBox="0 0 16 16" aria-hidden="true" width="1em" height="1em">
-  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none" />
-  <path
-    d="M5.25 8.25l1.75 1.75 3.75-3.75"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    fill="none"
-  />
-</svg>`, H = {
-  default: c,
-  error: k,
-  warning: _,
-  success: C
-};
-let n = class extends m {
-  constructor() {
-    super(...arguments), this.variant = "default";
-  }
-  render() {
-    const i = {
-      "help-text": !0,
-      [`help-text--${this.variant}`]: !0
-    }, e = H[this.variant], o = this.variant === "error" ? "alert" : void 0, r = this.variant === "warning" || this.variant === "success" ? "polite" : void 0;
-    return l`<span
-      part="base"
-      class=${d(i)}
-      role=${h(o)}
-      aria-live=${h(r)}
-      >${e !== c ? l`<span part="icon" class="help-text__icon">${e}</span>` : c}<span part="text" class="help-text__text"><slot></slot></span>
-    </span>`;
-  }
-};
-n.styles = [g, u];
-x([
-  v({ type: String, reflect: !0 })
-], n.prototype, "variant", 2);
-n = x([
-  f("hx-help-text")
-], n);
-export {
-  n as H
-};
-//# sourceMappingURL=hx-help-text-Xb2Yr8x2.js.map

package/dist/shared/hx-help-text-Xb2Yr8x2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-help-text-Xb2Yr8x2.js","sources":["../../src/components/hx-help-text/hx-help-text.styles.ts","../../src/components/hx-help-text/hx-help-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixHelpTextStyles = css`\n  :host {\n    display: block;\n  }\n\n  .help-text {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-help-text-icon-gap, 0.375rem);\n    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));\n    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));\n    color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));\n    margin: 0;\n  }\n\n  .help-text__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .help-text__text {\n    min-width: 0;\n  }\n\n  /* ─── Variant: default ─── */\n\n  .help-text--default {\n    --hx-help-text-color: var(--hx-color-text-muted, #4a5362);\n  }\n\n  /* ─── Variant: error ─── */\n\n  .help-text--error {\n    --hx-help-text-color: var(--hx-color-error-600, #c92a2a);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  .help-text--warning {\n    --hx-help-text-color: var(--hx-color-warning-700, #804605);\n  }\n\n  /* ─── Variant: success ─── */\n\n  .help-text--success {\n    --hx-help-text-color: var(--hx-color-success-700, #146831);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .help-text {\n      color: GrayText;\n    }\n\n    .help-text--error {\n      color: LinkText;\n    }\n\n    .help-text--warning {\n      color: CanvasText;\n    }\n\n    .help-text--success {\n      color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing } 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 { HelixElement } from '../../base/index.js';\nimport { helixHelpTextStyles } from './hx-help-text.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/** Icon SVG for error variant (circle with exclamation mark). */\nconst errorIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <line\n    x1=\"8\"\n    y1=\"4.5\"\n    x2=\"8\"\n    y2=\"8.5\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for warning variant (triangle with exclamation mark). */\nconst warningIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <path\n    d=\"M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    fill=\"none\"\n  />\n  <line\n    x1=\"8\"\n    y1=\"6\"\n    x2=\"8\"\n    y2=\"9\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.625\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for success variant (circle with checkmark). */\nconst successIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <path\n    d=\"M5.25 8.25l1.75 1.75 3.75-3.75\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    fill=\"none\"\n  />\n</svg>`;\n\n/** Map of variant to icon template. Default has no icon. */\nconst variantIcons = {\n  default: nothing,\n  error: errorIcon,\n  warning: warningIcon,\n  success: successIcon,\n} as const;\n\n/**\n * Standardized help/hint text displayed below form fields.\n * Used by hx-field as a consistent sub-component for guidance and validation messages.\n *\n * Non-default variants render an inline icon alongside the text to satisfy\n * WCAG 1.4.1 (color is not the sole visual indicator). The `error` variant\n * uses `role=\"alert\"` for immediate screen-reader announcement; `warning`\n * and `success` use `aria-live=\"polite\"` for non-intrusive announcements.\n *\n * @summary Help text displayed below form controls for guidance or validation feedback.\n *\n * @tag hx-help-text\n *\n * @slot - The help text content.\n *\n * @csspart base - The root element of the help text.\n * @csspart icon - The icon wrapper (only rendered for non-default variants).\n * @csspart text - The text wrapper around the default slot.\n *\n * @cssprop [--hx-help-text-color=var(--hx-color-neutral-500)] - Text color.\n * @cssprop [--hx-help-text-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-help-text-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-help-text-font-weight=var(--hx-font-weight-normal)] - Font weight.\n * @cssprop [--hx-help-text-line-height=var(--hx-line-height-normal)] - Line height.\n * @cssprop [--hx-help-text-icon-gap=0.375rem] - Gap between icon and text.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-normal] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n * @cssprop [--hx-color-warning-700] - Color.\n * @cssprop [--hx-color-success-700] - Color.\n */\n@customElement('hx-help-text')\nexport class HelixHelpText extends HelixElement {\n  static override styles = [helixHelpTextStyles, forcedColorsSurface];\n\n  /**\n   * Visual variant that determines the text color and icon.\n   * Use `error` for validation errors, `warning` for cautions, `success` for confirmation.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'error' | 'warning' | 'success' = 'default';\n\n  override render() {\n    const classes = {\n      'help-text': true,\n      [`help-text--${this.variant}`]: true,\n    };\n\n    const icon = variantIcons[this.variant];\n    const role = this.variant === 'error' ? 'alert' : undefined;\n    const ariaLive =\n      this.variant === 'warning' || this.variant === 'success' ? 'polite' : undefined;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap(classes)}\n      role=${ifDefined(role)}\n      aria-live=${ifDefined(ariaLive)}\n      >${icon !== nothing\n        ? html`<span part=\"icon\" class=\"help-text__icon\">${icon}</span>`\n        : nothing}<span part=\"text\" class=\"help-text__text\"><slot></slot></span>\n    </span>`;\n  }\n}\n\n/** Canonical type alias for the hx-help-text component. */\nexport type HxHelpText = HelixHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-help-text': HelixHelpText;\n  }\n}\n"],"names":["helixHelpTextStyles","css","errorIcon","html","warningIcon","successIcon","variantIcons","nothing","HelixHelpText","HelixElement","classes","icon","role","ariaLive","classMap","ifDefined","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACQnC,MAAMC,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAeZC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoBdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAadG,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOL;AAAA,EACP,SAASE;AAAA,EACT,SAASC;AACX;AAqCO,IAAMG,IAAN,cAA4BC,EAAa;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,UAAuD;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,aAAa;AAAA,MACb,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAOL,EAAa,KAAK,OAAO,GAChCM,IAAO,KAAK,YAAY,UAAU,UAAU,QAC5CC,IACJ,KAAK,YAAY,aAAa,KAAK,YAAY,YAAY,WAAW;AAExE,WAAOV;AAAA;AAAA,cAEGW,EAASJ,CAAO,CAAC;AAAA,aAClBK,EAAUH,CAAI,CAAC;AAAA,kBACVG,EAAUF,CAAQ,CAAC;AAAA,SAC5BF,MAASJ,IACRJ,8CAAiDQ,CAAI,YACrDJ,CAAO;AAAA;AAAA,EAEf;AACF;AAhCaC,EACK,SAAS,CAACR,GAAqBgB,CAAmB;AAQlEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BV,EASX,WAAA,WAAA,CAAA;AATWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;"}

package/dist/shared/hx-icon-fuVm4-bk.js

@@ -1,283 +0,0 @@
-import { css as _, nothing as o, html as m } from "lit";
-import { property as c, state as u, customElement as S } from "lit/decorators.js";
-import { unsafeHTML as x } from "lit/directives/unsafe-html.js";
-import { a as y } from "./forced-colors-CTEDFRGa.js";
-import { H as b } from "./helix-element-BNEYeiys.js";
-const z = _`
-  :host {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    /* vertical-align: middle ensures the icon aligns to the visual centre of
-       adjacent inline text rather than the text baseline. */
-    vertical-align: middle;
-    /* overflow: hidden prevents malformed or oversized icons from painting
-       outside the component boundary. The inner SVG may still set
-       overflow: visible for its own viewBox content. */
-    overflow: hidden;
-    width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
-    height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));
-    color: var(--hx-icon-color, currentColor);
-    flex-shrink: 0;
-  }
-
-  /* ─── Size Variants ───
-     Fallback pixel values mirror the design token values at time of writing.
-     If token values are updated the fallbacks should be updated to match. */
-
-  :host([hx-size='xs']) {
-    --hx-icon-size: var(--hx-size-4, 1rem);
-  }
-
-  :host([hx-size='sm']) {
-    --hx-icon-size: var(--hx-size-5, 1.25rem);
-  }
-
-  :host([hx-size='md']) {
-    --hx-icon-size: var(--hx-size-6, 1.5rem);
-  }
-
-  :host([hx-size='lg']) {
-    --hx-icon-size: var(--hx-size-8, 2rem);
-  }
-
-  :host([hx-size='xl']) {
-    --hx-icon-size: var(--hx-size-10, 2.5rem);
-  }
-
-  /* ─── SVG (sprite mode) ───
-     In sprite mode [part="svg"] is an actual <svg> element. The selector
-     targets it specifically. In inline mode the part is applied to a <span>
-     wrapper — see .icon__inline below. */
-
-  svg[part='svg'] {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-    display: block;
-    overflow: visible;
-  }
-
-  /* ─── Inline SVG wrapper ───
-     In inline mode [part="svg"] is a <span> that wraps the fetched SVG.
-     The inner <svg> is sized to fill the wrapper. */
-
-  .icon__inline {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .icon__inline svg {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-    display: block;
-  }
-
-  /* ─── Forced Colors (Windows High Contrast) ─── */
-
-  @media (forced-colors: active) {
-    :host {
-      color: CanvasText;
-    }
-  }
-`;
-var $ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (e, i, r, n) => {
-  for (var t = n > 1 ? void 0 : n ? A(i, r) : i, l = e.length - 1, f; l >= 0; l--)
-    (f = e[l]) && (t = (n ? f(i, r, t) : f(t)) || t);
-  return n && t && $(i, r, t), t;
-};
-let s = class extends b {
-  constructor() {
-    super(...arguments), this.name = "", this.src = void 0, this.spriteUrl = void 0, this.size = "md", this.label = "", this.allowedOrigins = "", this._inlineSvg = "", this._fetchedSrc = void 0, this._fetchSeq = 0;
-  }
-  // ─── Lifecycle ───
-  updated(e) {
-    super.updated(e), e.has("src") && this.src !== this._fetchedSrc && this._fetchInlineSvg(this.src);
-  }
-  // ─── Inline SVG Fetch ───
-  /** @internal */
-  async _fetchInlineSvg(e) {
-    const i = ++this._fetchSeq;
-    if (!e) {
-      this._inlineSvg = "", this._fetchedSrc = void 0;
-      return;
-    }
-    if (!this._isAllowedOrigin(e)) {
-      console.warn(
-        `[hx-icon] Blocked cross-origin SVG fetch: "${e}". Only same-origin URLs are allowed by default. Set the allowed-origins attribute to permit specific external origins.`
-      ), this._inlineSvg = "", this._fetchedSrc = void 0;
-      return;
-    }
-    try {
-      let r = d.get(e);
-      r || (r = fetch(e).then(async (l) => l.ok ? l.text() : (d.delete(e), "")), d.set(e, r));
-      const n = await r;
-      if (i !== this._fetchSeq) return;
-      if (!n) {
-        this._inlineSvg = "", this._fetchedSrc = void 0;
-        return;
-      }
-      const t = this._sanitizeSvg(n);
-      this._inlineSvg = t, this._fetchedSrc = e;
-    } catch {
-      if (i !== this._fetchSeq) return;
-      d.delete(e), this._inlineSvg = "", this._fetchedSrc = void 0;
-    }
-  }
-  /**
-   * Checks whether a URL is same-origin or matches the configured allowedOrigins.
-   * Relative URLs and data: URIs are always allowed. Cross-origin URLs are blocked
-   * unless their origin appears in the allowedOrigins list.
-   * @internal
-   */
-  _isAllowedOrigin(e) {
-    if (e.startsWith("/") || e.startsWith("./") || e.startsWith("../"))
-      return !0;
-    try {
-      const i = new URL(e, window.location.href);
-      return i.origin === window.location.origin ? !0 : this.allowedOrigins ? this.allowedOrigins.split(",").map((n) => n.trim().toLowerCase()).filter(Boolean).includes(i.origin.toLowerCase()) : !1;
-    } catch {
-      return !1;
-    }
-  }
-  /**
-   * Parses the raw SVG text, strips dangerous content (script elements,
-   * foreignObject, on* event-handler attributes, javascript:/data: URIs,
-   * and style attributes that could carry CSS injection payloads), and
-   * returns the outer SVG markup safe for rendering via `unsafeHTML`.
-   *
-   * Additionally injects `focusable="false"` on the root SVG element to
-   * prevent IE11/old-Edge from making the SVG keyboard-focusable, and strips
-   * any ARIA attributes from the inner SVG to prevent conflicts with the
-   * wrapper's own ARIA semantics.
-   */
-  /** @internal */
-  _sanitizeSvg(e) {
-    const r = new DOMParser().parseFromString(e, "image/svg+xml");
-    if (r.querySelector("parsererror"))
-      return "";
-    const t = r.querySelector("svg");
-    if (!t)
-      return "";
-    const l = [
-      "script",
-      "foreignObject",
-      "style",
-      "animate",
-      "animateTransform",
-      "animateMotion",
-      "set"
-    ];
-    t.querySelectorAll(l.join(", ")).forEach((h) => {
-      h.remove();
-    });
-    const f = /* @__PURE__ */ new Set(["href", "xlink:href", "src", "action", "formaction"]), w = /* @__PURE__ */ new Set(["role", "aria-label", "aria-labelledby", "aria-hidden"]);
-    return [t, ...Array.from(t.querySelectorAll("*"))].forEach((h) => {
-      Array.from(h.attributes).forEach((p) => {
-        const v = p.name.toLowerCase();
-        if (v.startsWith("on")) {
-          h.removeAttribute(p.name);
-          return;
-        }
-        if (v === "style") {
-          h.removeAttribute(p.name);
-          return;
-        }
-        if (f.has(v)) {
-          const g = p.value.replace(/\s/g, "").toLowerCase();
-          (g.startsWith("javascript:") || g.startsWith("data:")) && h.removeAttribute(p.name);
-        }
-      });
-    }), w.forEach((h) => t.removeAttribute(h)), t.setAttribute("focusable", "false"), t.outerHTML;
-  }
-  // ─── Render Helpers ───
-  /**
-   * Returns the href used in the `<use>` element for sprite mode.
-   * If `name` already begins with `#` it is treated as an inline reference.
-   */
-  /** @internal */
-  _spriteHref() {
-    const e = this.name;
-    if (e.startsWith("#"))
-      return e;
-    const i = this.spriteUrl ?? "";
-    return i ? `${i}#${e}` : `#${e}`;
-  }
-  /** @internal */
-  _renderSprite() {
-    const e = !this.label.trim();
-    return m`
-      <svg
-        part="svg"
-        class="icon__svg"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-        role=${e ? o : "img"}
-        aria-label=${e ? o : this.label}
-        aria-hidden=${e ? "true" : o}
-        focusable="false"
-      >
-        ${e ? o : m`<title>${this.label}</title>`}
-        <use href=${this._spriteHref()}></use>
-      </svg>
-    `;
-  }
-  /** @internal */
-  _renderInline() {
-    if (!this._inlineSvg)
-      return o;
-    const e = !this.label.trim();
-    return m`
-      <span
-        part="svg"
-        class="icon__inline"
-        role=${e ? o : "img"}
-        aria-label=${e ? o : this.label}
-        aria-hidden=${e ? "true" : o}
-      >
-        ${x(this._inlineSvg)}
-      </span>
-    `;
-  }
-  // ─── Render ───
-  render() {
-    return typeof this.src == "string" && this.src.trim().length > 0 ? this._renderInline() : this.name ? this._renderSprite() : o;
-  }
-};
-s.styles = [z, y];
-a([
-  c({ type: String })
-], s.prototype, "name", 2);
-a([
-  c({ type: String })
-], s.prototype, "src", 2);
-a([
-  c({ type: String, attribute: "sprite-url" })
-], s.prototype, "spriteUrl", 2);
-a([
-  c({ type: String, reflect: !0, attribute: "hx-size" })
-], s.prototype, "size", 2);
-a([
-  c({ type: String })
-], s.prototype, "label", 2);
-a([
-  c({ type: String, attribute: "allowed-origins" })
-], s.prototype, "allowedOrigins", 2);
-a([
-  u()
-], s.prototype, "_inlineSvg", 2);
-a([
-  u()
-], s.prototype, "_fetchedSrc", 2);
-s = a([
-  S("hx-icon")
-], s);
-const d = /* @__PURE__ */ new Map();
-export {
-  s as H
-};
-//# sourceMappingURL=hx-icon-fuVm4-bk.js.map

package/dist/shared/hx-icon-fuVm4-bk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-icon-fuVm4-bk.js","sources":["../../src/components/hx-icon/hx-icon.styles.ts","../../src/components/hx-icon/hx-icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* vertical-align: middle ensures the icon aligns to the visual centre of\n       adjacent inline text rather than the text baseline. */\n    vertical-align: middle;\n    /* overflow: hidden prevents malformed or oversized icons from painting\n       outside the component boundary. The inner SVG may still set\n       overflow: visible for its own viewBox content. */\n    overflow: hidden;\n    width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n    height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n    color: var(--hx-icon-color, currentColor);\n    flex-shrink: 0;\n  }\n\n  /* ─── Size Variants ───\n     Fallback pixel values mirror the design token values at time of writing.\n     If token values are updated the fallbacks should be updated to match. */\n\n  :host([hx-size='xs']) {\n    --hx-icon-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) {\n    --hx-icon-size: var(--hx-size-5, 1.25rem);\n  }\n\n  :host([hx-size='md']) {\n    --hx-icon-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) {\n    --hx-icon-size: var(--hx-size-8, 2rem);\n  }\n\n  :host([hx-size='xl']) {\n    --hx-icon-size: var(--hx-size-10, 2.5rem);\n  }\n\n  /* ─── SVG (sprite mode) ───\n     In sprite mode [part=\"svg\"] is an actual <svg> element. The selector\n     targets it specifically. In inline mode the part is applied to a <span>\n     wrapper — see .icon__inline below. */\n\n  svg[part='svg'] {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n    display: block;\n    overflow: visible;\n  }\n\n  /* ─── Inline SVG wrapper ───\n     In inline mode [part=\"svg\"] is a <span> that wraps the fetched SVG.\n     The inner <svg> is sized to fill the wrapper. */\n\n  .icon__inline {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon__inline svg {\n    width: 100%;\n    height: 100%;\n    fill: currentColor;\n    display: block;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    :host {\n      color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixIconStyles } from './hx-icon.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * An icon component that supports inline SVG fetching and SVG sprite sheet references.\n * Decorative icons are automatically hidden from assistive technology.\n * When a label is provided the icon is announced as an image with that label.\n *\n * **Render modes:**\n * - **Sprite mode** (recommended for Drupal/SSR): Set `name` and optionally `sprite-url`.\n *   Renders an `<svg><use href=\"...#name\">` — works server-side without JavaScript.\n * - **Inline mode**: Set `src` to a URL of a standalone SVG file. The component fetches,\n *   sanitizes, and embeds the SVG markup. Requires JavaScript; not server-side renderable.\n *   For Drupal/Twig templates use sprite mode to avoid content shift before hydration.\n *\n * @summary SVG icon with sprite and inline fetch modes for healthcare applications.\n *\n * @tag hx-icon\n *\n * @csspart svg - The SVG element rendered in sprite mode, or the inline SVG container\n *   in inline mode. In sprite mode this is an `<svg>` element; in inline mode it is a\n *   `<span>` element wrapping the fetched SVG. Both expose the same `part` name for\n *   consistent external styling via `::part(svg)`.\n *\n * @cssprop [--hx-icon-size=var(--hx-size-6,1.5rem)] - Width and height of the icon.\n * @cssprop [--hx-icon-color=currentColor] - Icon color.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-size-5] - Size token.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-size-10] - Size token.\n */\n@customElement('hx-icon')\nexport class HelixIcon extends HelixElement {\n  static override styles = [helixIconStyles, forcedColorsSurface];\n\n  /**\n   * Icon name used as the fragment identifier when referencing a sprite sheet.\n   * For sprite mode provide the bare symbol id (e.g. `check`). The component\n   * will build the full href as `${spriteUrl}#${name}`. If `name` already\n   * starts with `#` it is used as-is (inline sprite reference without a base\n   * URL).\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * URL of a standalone SVG file to fetch and render inline. Takes precedence\n   * over sprite mode when both `src` and `spriteUrl`/`name` are set.\n   *\n   * **Note:** Inline mode requires browser JavaScript (`fetch` + `DOMParser`).\n   * It is not server-side renderable. For Drupal/Twig use sprite mode instead.\n   * @attr src\n   */\n  @property({ type: String })\n  src: string | undefined = undefined;\n\n  /**\n   * Base URL of the SVG sprite sheet. Used together with `name` to construct\n   * the `<use>` href: `${spriteUrl}#${name}`.\n   * @attr sprite-url\n   */\n  @property({ type: String, attribute: 'sprite-url' })\n  spriteUrl: string | undefined = undefined;\n\n  /**\n   * Size variant of the icon.\n   *\n   * Set via the `hx-size` HTML attribute (e.g. `hx-size=\"lg\"`) or via the\n   * `size` JavaScript property (e.g. `el.size = 'lg'`). Both are equivalent —\n   * the `attribute: 'hx-size'` mapping is used to avoid colliding with the\n   * native `<input>` `size` attribute in Drupal attribute-passthrough scenarios.\n   * The CEM exposes both the JS property name (`size`) and the HTML attribute\n   * name (`hx-size`).\n   *\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Accessible label for the icon. When non-empty, `role=\"img\"` and\n   * `aria-label` are applied so assistive technology announces the icon.\n   * When empty the icon is treated as decorative and `aria-hidden=\"true\"` is\n   * applied.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Comma-separated list of allowed origins for cross-origin SVG fetches.\n   * By default, only same-origin URLs are permitted. Set this to allow\n   * specific CDN or asset server origins (e.g., \"https://cdn.example.com,https://assets.example.com\").\n   * @attr allowed-origins\n   */\n  @property({ type: String, attribute: 'allowed-origins' })\n  allowedOrigins = '';\n\n  /**\n   * Stores the sanitized inner markup of an externally fetched SVG.\n   * @internal\n   */\n  @state()\n  private _inlineSvg = '';\n\n  /**\n   * Tracks the `src` URL that was last successfully fetched so that we only\n   * refetch when it genuinely changes.\n   * @internal\n   */\n  @state()\n  private _fetchedSrc: string | undefined = undefined;\n\n  /**\n   * Monotonically-increasing sequence number. Incremented before each fetch so\n   * that stale out-of-order responses can be discarded.\n   */\n  /** @internal */\n  private _fetchSeq = 0;\n\n  // ─── Lifecycle ───\n\n  override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n    if (changed.has('src') && this.src !== this._fetchedSrc) {\n      void this._fetchInlineSvg(this.src);\n    }\n  }\n\n  // ─── Inline SVG Fetch ───\n\n  /** @internal */\n  private async _fetchInlineSvg(url: string | undefined): Promise<void> {\n    const seq = ++this._fetchSeq;\n\n    if (!url) {\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n      return;\n    }\n\n    // Validate URL origin — only allow same-origin or data: URIs by default.\n    // Cross-origin SVGs are blocked unless explicitly allowed via allowedOrigins.\n    if (!this._isAllowedOrigin(url)) {\n      console.warn(\n        `[hx-icon] Blocked cross-origin SVG fetch: \"${url}\". ` +\n          'Only same-origin URLs are allowed by default. ' +\n          'Set the allowed-origins attribute to permit specific external origins.',\n      );\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n      return;\n    }\n\n    // Use module-level cache to avoid duplicate network requests for the same URL.\n    // Multiple hx-icon instances sharing the same src will share one in-flight fetch.\n    try {\n      let pending = _svgCache.get(url);\n      if (!pending) {\n        pending = fetch(url).then(async (response) => {\n          if (!response.ok) {\n            _svgCache.delete(url);\n            return '';\n          }\n          return response.text();\n        });\n        _svgCache.set(url, pending);\n      }\n\n      const text = await pending;\n      if (seq !== this._fetchSeq) return;\n\n      if (!text) {\n        this._inlineSvg = '';\n        this._fetchedSrc = undefined;\n        return;\n      }\n\n      const sanitized = this._sanitizeSvg(text);\n      this._inlineSvg = sanitized;\n      this._fetchedSrc = url;\n    } catch {\n      if (seq !== this._fetchSeq) return;\n      _svgCache.delete(url);\n      this._inlineSvg = '';\n      this._fetchedSrc = undefined;\n    }\n  }\n\n  /**\n   * Checks whether a URL is same-origin or matches the configured allowedOrigins.\n   * Relative URLs and data: URIs are always allowed. Cross-origin URLs are blocked\n   * unless their origin appears in the allowedOrigins list.\n   * @internal\n   */\n  private _isAllowedOrigin(url: string): boolean {\n    // Relative URLs are always same-origin\n    if (url.startsWith('/') || url.startsWith('./') || url.startsWith('../')) {\n      return true;\n    }\n\n    try {\n      const parsed = new URL(url, window.location.href);\n\n      // Same-origin is always allowed\n      if (parsed.origin === window.location.origin) {\n        return true;\n      }\n\n      // Check configured allowlist\n      if (this.allowedOrigins) {\n        const allowed = this.allowedOrigins\n          .split(',')\n          .map((o) => o.trim().toLowerCase())\n          .filter(Boolean);\n        return allowed.includes(parsed.origin.toLowerCase());\n      }\n\n      return false;\n    } catch {\n      // Unparseable URL — block it\n      return false;\n    }\n  }\n\n  /**\n   * Parses the raw SVG text, strips dangerous content (script elements,\n   * foreignObject, on* event-handler attributes, javascript:/data: URIs,\n   * and style attributes that could carry CSS injection payloads), and\n   * returns the outer SVG markup safe for rendering via `unsafeHTML`.\n   *\n   * Additionally injects `focusable=\"false\"` on the root SVG element to\n   * prevent IE11/old-Edge from making the SVG keyboard-focusable, and strips\n   * any ARIA attributes from the inner SVG to prevent conflicts with the\n   * wrapper's own ARIA semantics.\n   */\n  /** @internal */\n  private _sanitizeSvg(raw: string): string {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(raw, 'image/svg+xml');\n\n    const parseError = doc.querySelector('parsererror');\n    if (parseError) {\n      return '';\n    }\n\n    const svgEl = doc.querySelector('svg');\n    if (!svgEl) {\n      return '';\n    }\n\n    // Remove dangerous embedded elements:\n    // - script: arbitrary code execution\n    // - foreignObject: can embed arbitrary HTML including scripts\n    // - style: CSS injection (url() payloads, expression(), external references)\n    // - animate, animateTransform, animateMotion, set: SMIL animation elements\n    //   can trigger event handlers and modify attributes to bypass sanitization\n    const dangerousElements = [\n      'script',\n      'foreignObject',\n      'style',\n      'animate',\n      'animateTransform',\n      'animateMotion',\n      'set',\n    ];\n    svgEl.querySelectorAll(dangerousElements.join(', ')).forEach((s) => {\n      s.remove();\n    });\n\n    // URL-bearing attributes that can carry javascript:/data: payloads.\n    const urlAttrs = new Set(['href', 'xlink:href', 'src', 'action', 'formaction']);\n\n    // ARIA attributes that may conflict with the wrapper element's own semantics.\n    // The wrapper <span part=\"svg\"> owns role/aria-label/aria-hidden — the inner\n    // SVG must not duplicate or contradict these.\n    const ariaAttrs = new Set(['role', 'aria-label', 'aria-labelledby', 'aria-hidden']);\n\n    // Sanitize every element including the root svg.\n    const allElements: Element[] = [svgEl, ...Array.from(svgEl.querySelectorAll('*'))];\n    allElements.forEach((el) => {\n      const attrs = Array.from(el.attributes);\n      attrs.forEach((attr) => {\n        const attrName = attr.name.toLowerCase();\n        // Strip event-handler attributes.\n        if (attrName.startsWith('on')) {\n          el.removeAttribute(attr.name);\n          return;\n        }\n        // Strip style attributes — CSS can carry injection payloads via\n        // url(javascript:...), expression(), or external filter/clip-path references.\n        if (attrName === 'style') {\n          el.removeAttribute(attr.name);\n          return;\n        }\n        // Strip javascript: and data: URIs from URL-bearing attributes.\n        if (urlAttrs.has(attrName)) {\n          const val = attr.value.replace(/\\s/g, '').toLowerCase();\n          if (val.startsWith('javascript:') || val.startsWith('data:')) {\n            el.removeAttribute(attr.name);\n          }\n        }\n      });\n    });\n\n    // Strip ARIA attributes from the root SVG only — they conflict with the\n    // wrapper element's ARIA. Child elements' ARIA is left intact.\n    ariaAttrs.forEach((a) => svgEl.removeAttribute(a));\n\n    // Inject focusable=\"false\" so IE11/old-Edge do not tab into the SVG.\n    svgEl.setAttribute('focusable', 'false');\n\n    return svgEl.outerHTML;\n  }\n\n  // ─── Render Helpers ───\n\n  /**\n   * Returns the href used in the `<use>` element for sprite mode.\n   * If `name` already begins with `#` it is treated as an inline reference.\n   */\n  /** @internal */\n  private _spriteHref(): string {\n    const n = this.name;\n    if (n.startsWith('#')) {\n      return n;\n    }\n    const base = this.spriteUrl ?? '';\n    return base ? `${base}#${n}` : `#${n}`;\n  }\n\n  /** @internal */\n  private _renderSprite() {\n    const isDecorative = !this.label.trim();\n\n    return html`\n      <svg\n        part=\"svg\"\n        class=\"icon__svg\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=${isDecorative ? nothing : 'img'}\n        aria-label=${isDecorative ? nothing : this.label}\n        aria-hidden=${isDecorative ? 'true' : nothing}\n        focusable=\"false\"\n      >\n        ${isDecorative ? nothing : html`<title>${this.label}</title>`}\n        <use href=${this._spriteHref()}></use>\n      </svg>\n    `;\n  }\n\n  /** @internal */\n  private _renderInline() {\n    if (!this._inlineSvg) {\n      return nothing;\n    }\n\n    const isDecorative = !this.label.trim();\n\n    // The fetched SVG is rendered inside a wrapper span that carries the\n    // csspart and ARIA semantics. The inner SVG from unsafeHTML fills the\n    // container via the `.icon__inline svg` CSS rule. ARIA attributes and\n    // focusable=\"false\" are injected into the inner SVG by _sanitizeSvg.\n    return html`\n      <span\n        part=\"svg\"\n        class=\"icon__inline\"\n        role=${isDecorative ? nothing : 'img'}\n        aria-label=${isDecorative ? nothing : this.label}\n        aria-hidden=${isDecorative ? 'true' : nothing}\n      >\n        ${unsafeHTML(this._inlineSvg)}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Inline fetch mode takes precedence when src is a non-empty string.\n    if (typeof this.src === 'string' && this.src.trim().length > 0) {\n      return this._renderInline();\n    }\n\n    // Sprite mode: requires at least a name.\n    if (this.name) {\n      return this._renderSprite();\n    }\n\n    return nothing;\n  }\n}\n\n/**\n * Module-level SVG fetch cache. Shared across all `hx-icon` instances so that\n * multiple icons sharing the same `src` URL issue only one network request.\n * The cache stores in-flight `Promise<string>` values — resolved entries remain\n * cached for the lifetime of the page to prevent redundant re-fetches.\n */\nconst _svgCache = new Map<string, Promise<string>>();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon': HelixIcon;\n  }\n}\n"],"names":["helixIconStyles","css","HelixIcon","HelixElement","changed","url","seq","pending","_svgCache","response","text","sanitized","parsed","o","raw","doc","svgEl","dangerousElements","s","urlAttrs","ariaAttrs","el","attr","attrName","val","a","n","base","isDecorative","html","nothing","unsafeHTML","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":"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"}