@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sources":["../../source/components/file-upload/file-upload.style.ts","../../source/components/file-upload/file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const fileUploadStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .file-upload {\n    font-family: var(--bp-font-family);\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-md);\n  }\n\n  /* Hidden file input - standard sr-only pattern */\n  input[type='file'] {\n    position: absolute;\n    width: var(--bp-spacing-0-5);\n    height: var(--bp-spacing-0-5);\n    padding: var(--bp-spacing-0);\n    margin: calc(var(--bp-spacing-0-5) * -1);\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* Visually hidden but accessible - standard sr-only pattern */\n  .visually-hidden {\n    position: absolute;\n    width: var(--bp-spacing-0-5);\n    height: var(--bp-spacing-0-5);\n    padding: var(--bp-spacing-0);\n    margin: calc(var(--bp-spacing-0-5) * -1);\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* Dropzone */\n  .file-upload__dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bp-spacing-sm);\n    padding: var(--bp-spacing-xl);\n    border: var(--bp-focus-width) dashed var(--bp-color-border);\n    border-radius: var(--bp-border-radius-lg);\n    background-color: var(--bp-color-surface);\n    cursor: pointer;\n    transition:\n      border-color var(--bp-transition-fast),\n      background-color var(--bp-transition-fast);\n    text-align: center;\n  }\n\n  .file-upload__dropzone:hover:not(.file-upload__dropzone--disabled) {\n    border-color: var(--bp-color-primary);\n    background-color: var(--bp-color-surface-elevated);\n  }\n\n  .file-upload__dropzone:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n    border-color: var(--bp-color-primary);\n  }\n\n  .file-upload__dropzone:active:not(.file-upload__dropzone--disabled) {\n    transform: scale(0.995);\n  }\n\n  /* Drag over state */\n  .file-upload__dropzone--drag-over {\n    border-color: var(--bp-color-primary);\n    background-color: var(--bp-color-surface-elevated);\n    border-style: solid;\n  }\n\n  /* Disabled state */\n  .file-upload__dropzone--disabled {\n    opacity: var(--bp-opacity-disabled);\n    cursor: not-allowed;\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  /* Icon */\n  .file-upload__icon {\n    width: var(--bp-spacing-2xl);\n    height: var(--bp-spacing-2xl);\n    color: var(--bp-color-text-muted);\n    transition: color var(--bp-transition-fast);\n  }\n\n  .file-upload__dropzone:hover:not(.file-upload__dropzone--disabled)\n    .file-upload__icon,\n  .file-upload__dropzone--drag-over .file-upload__icon {\n    color: var(--bp-color-primary);\n  }\n\n  /* Label */\n  .file-upload__label {\n    font-size: var(--bp-font-size-base);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Description */\n  .file-upload__description {\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text-muted);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Variants */\n  .file-upload__dropzone--success {\n    border-color: var(--bp-color-success);\n  }\n\n  .file-upload__dropzone--success:hover:not(.file-upload__dropzone--disabled) {\n    border-color: var(--bp-color-success);\n  }\n\n  .file-upload__dropzone--error {\n    border-color: var(--bp-color-error);\n  }\n\n  .file-upload__dropzone--error:hover:not(.file-upload__dropzone--disabled) {\n    border-color: var(--bp-color-error);\n  }\n\n  .file-upload__dropzone--warning {\n    border-color: var(--bp-color-warning);\n  }\n\n  .file-upload__dropzone--warning:hover:not(.file-upload__dropzone--disabled) {\n    border-color: var(--bp-color-warning);\n  }\n\n  /* Size variants */\n  .file-upload__dropzone--sm {\n    padding: var(--bp-spacing-lg);\n    gap: var(--bp-spacing-xs);\n  }\n\n  .file-upload__dropzone--sm .file-upload__icon {\n    width: var(--bp-spacing-xl);\n    height: var(--bp-spacing-xl);\n  }\n\n  .file-upload__dropzone--sm .file-upload__label {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .file-upload__dropzone--sm .file-upload__description {\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .file-upload__dropzone--md {\n    padding: var(--bp-spacing-xl);\n  }\n\n  .file-upload__dropzone--lg {\n    padding: var(--bp-spacing-2xl);\n    gap: var(--bp-spacing-md);\n  }\n\n  .file-upload__dropzone--lg .file-upload__icon {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n  }\n\n  .file-upload__dropzone--lg .file-upload__label {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* File list */\n  .file-upload__file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-sm);\n  }\n\n  .file-upload__file-item {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-md);\n    padding: var(--bp-spacing-md);\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    transition:\n      background-color var(--bp-transition-fast),\n      border-color var(--bp-transition-fast),\n      transform var(--bp-transition-fast);\n  }\n\n  .file-upload__file-item:hover {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .file-upload__file-item:active {\n    transform: scale(0.99);\n  }\n\n  /* File preview */\n  .file-upload__preview {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n    object-fit: cover;\n    border-radius: var(--bp-border-radius-sm);\n    flex-shrink: 0;\n  }\n\n  .file-upload__file-icon {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--bp-color-text-muted);\n    transition: color var(--bp-transition-fast);\n  }\n\n  .file-upload__file-icon svg {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  /* File info */\n  .file-upload__file-info {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-2xs);\n    flex: 1;\n    min-width: 0;\n  }\n\n  .file-upload__file-name {\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .file-upload__file-size {\n    font-size: var(--bp-font-size-xs);\n    color: var(--bp-color-text-muted);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Remove button */\n  .file-upload__remove-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    padding: 0;\n    border: none;\n    background: transparent;\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .file-upload__remove-button:hover:not(:disabled) {\n    background-color: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .file-upload__remove-button:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .file-upload__remove-button:disabled {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n  }\n\n  .file-upload__remove-button svg {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  /* Message */\n  .file-upload__message {\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text-muted);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .file-upload__message--success {\n    color: var(--bp-color-success);\n  }\n\n  .file-upload__message--error {\n    color: var(--bp-color-error);\n  }\n\n  .file-upload__message--warning {\n    color: var(--bp-color-warning);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { fileUploadStyles } from './file-upload.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\n\n/**\n * File information object returned in events\n */\nexport interface FileInfo {\n  /** Original File object */\n  file: File;\n  /** File name */\n  name: string;\n  /** File size in bytes */\n  size: number;\n  /** MIME type */\n  type: string;\n  /** Unique identifier */\n  id: string;\n  /** Preview URL for images */\n  previewUrl?: string;\n  /** Upload progress (0-100) */\n  progress?: number;\n  /** Upload status */\n  status?: 'pending' | 'uploading' | 'complete' | 'error';\n  /** Error message if upload failed */\n  error?: string;\n}\n\n/**\n * A file upload component with drag-and-drop support.\n *\n * @element bp-file-upload\n *\n * @fires bp-change - Fired when files are added or removed\n * @fires bp-file-added - Fired when a file is added\n * @fires bp-file-removed - Fired when a file is removed\n * @fires bp-file-rejected - Fired when a file is rejected (wrong type/size)\n *\n * @csspart dropzone - The drop zone container\n * @csspart input - The hidden file input\n * @csspart label - The label text\n * @csspart description - The description text\n * @csspart icon - The upload icon\n * @csspart file-list - The file list container\n * @csspart file-item - Individual file item\n * @csspart file-name - File name text\n * @csspart file-size - File size text\n * @csspart file-remove - Remove file button\n */\n@customElement('bp-file-upload')\nexport class BpFileUpload extends LitElement {\n  /** Name attribute for form submission */\n  @property({ type: String }) declare name: string;\n\n  /** Label text displayed in the drop zone */\n  @property({ type: String }) declare label: string;\n\n  /** Description text displayed below the label */\n  @property({ type: String }) declare description: string;\n\n  /** Accepted file types (comma-separated MIME types or extensions) */\n  @property({ type: String }) declare accept: string;\n\n  /** Whether multiple files can be selected */\n  @property({ type: Boolean }) declare multiple: boolean;\n\n  /** Maximum file size in bytes */\n  @property({ type: Number }) declare maxSize: number;\n\n  /** Maximum number of files allowed */\n  @property({ type: Number }) declare maxFiles: number;\n\n  /** Whether the component is disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Whether a file is required */\n  @property({ type: Boolean }) declare required: boolean;\n\n  /** Visual variant for validation states */\n  @property({ type: String }) declare variant:\n    | 'default'\n    | 'success'\n    | 'error'\n    | 'warning';\n\n  /** Helper or error message text */\n  @property({ type: String }) declare message: string;\n\n  /** Size variant */\n  @property({ type: String }) declare size: 'sm' | 'md' | 'lg';\n\n  /** Whether to show file previews for images */\n  @property({ converter: booleanConverter, reflect: true })\n  declare showPreviews: boolean;\n\n  /** Whether drag is currently over the drop zone */\n  @state() private isDragOver = false;\n\n  /** List of selected files */\n  @state() private files: FileInfo[] = [];\n\n  /** Reference to the hidden file input */\n  @query('input[type=\"file\"]') private fileInput!: HTMLInputElement;\n\n  static styles = [fileUploadStyles];\n\n  constructor() {\n    super();\n    this.name = '';\n    this.label = 'Drop files here or click to upload';\n    this.description = '';\n    this.accept = '';\n    this.multiple = false;\n    this.maxSize = 0;\n    this.maxFiles = 0;\n    this.disabled = false;\n    this.required = false;\n    this.variant = 'default';\n    this.message = '';\n    this.size = 'md';\n    this.showPreviews = true;\n  }\n\n  /**\n   * Get the list of selected files\n   */\n  getFiles(): FileInfo[] {\n    return [...this.files];\n  }\n\n  /**\n   * Clear all selected files\n   */\n  clearFiles(): void {\n    // Revoke object URLs to prevent memory leaks\n    this.files.forEach((fileInfo) => {\n      if (fileInfo.previewUrl) {\n        URL.revokeObjectURL(fileInfo.previewUrl);\n      }\n    });\n    this.files = [];\n    if (this.fileInput) {\n      this.fileInput.value = '';\n    }\n    this.dispatchChangeEvent();\n  }\n\n  /**\n   * Remove a specific file by ID\n   */\n  removeFile(fileId: string): void {\n    const fileIndex = this.files.findIndex((f) => f.id === fileId);\n    if (fileIndex !== -1) {\n      const removedFile = this.files[fileIndex];\n      if (removedFile.previewUrl) {\n        URL.revokeObjectURL(removedFile.previewUrl);\n      }\n      this.files = this.files.filter((f) => f.id !== fileId);\n      this.dispatchEvent(\n        new CustomEvent('bp-file-removed', {\n          detail: { file: removedFile },\n          bubbles: true,\n          composed: true,\n        })\n      );\n      this.dispatchChangeEvent();\n    }\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.fileInput?.click();\n    }\n  }\n\n  private handleKeyDown(event: globalThis.KeyboardEvent): void {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.fileInput?.click();\n    }\n  }\n\n  private handleInputChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    if (input.files) {\n      this.processFiles(Array.from(input.files));\n    }\n  }\n\n  private handleDragEnter(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled) {\n      this.isDragOver = true;\n    }\n  }\n\n  private handleDragOver(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled && event.dataTransfer) {\n      event.dataTransfer.dropEffect = 'copy';\n    }\n  }\n\n  private handleDragLeave(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    // Only set isDragOver to false if we're leaving the dropzone entirely\n    const relatedTarget = event.relatedTarget as Node | null;\n    if (!this.contains(relatedTarget)) {\n      this.isDragOver = false;\n    }\n  }\n\n  private handleDrop(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n\n    if (this.disabled) return;\n\n    const dataTransfer = event.dataTransfer;\n    if (dataTransfer?.files) {\n      this.processFiles(Array.from(dataTransfer.files));\n    }\n  }\n\n  private processFiles(newFiles: File[]): void {\n    const validFiles: FileInfo[] = [];\n\n    for (const file of newFiles) {\n      // Check if max files limit is reached\n      if (\n        this.maxFiles > 0 &&\n        this.files.length + validFiles.length >= this.maxFiles\n      ) {\n        this.dispatchRejectEvent(file, 'Maximum number of files exceeded');\n        continue;\n      }\n\n      // Check file type\n      if (this.accept && !this.isFileTypeAccepted(file)) {\n        this.dispatchRejectEvent(file, 'File type not accepted');\n        continue;\n      }\n\n      // Check file size\n      if (this.maxSize > 0 && file.size > this.maxSize) {\n        this.dispatchRejectEvent(file, 'File size exceeds limit');\n        continue;\n      }\n\n      // Create file info object\n      const fileInfo: FileInfo = {\n        file,\n        name: file.name,\n        size: file.size,\n        type: file.type,\n        id: this.generateFileId(),\n        status: 'pending',\n        progress: 0,\n      };\n\n      // Generate preview for images\n      if (this.showPreviews && file.type.startsWith('image/')) {\n        fileInfo.previewUrl = URL.createObjectURL(file);\n      }\n\n      validFiles.push(fileInfo);\n\n      this.dispatchEvent(\n        new CustomEvent('bp-file-added', {\n          detail: { file: fileInfo },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n\n    if (validFiles.length > 0) {\n      if (this.multiple) {\n        this.files = [...this.files, ...validFiles];\n      } else {\n        // Single file mode - replace existing file\n        this.files.forEach((existingFile) => {\n          if (existingFile.previewUrl) {\n            URL.revokeObjectURL(existingFile.previewUrl);\n          }\n        });\n        this.files = validFiles.slice(0, 1);\n      }\n      this.dispatchChangeEvent();\n    }\n  }\n\n  private isFileTypeAccepted(file: File): boolean {\n    if (!this.accept) return true;\n\n    const acceptedTypes = this.accept\n      .split(',')\n      .map((type) => type.trim().toLowerCase());\n    const fileType = file.type.toLowerCase();\n    const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();\n\n    return acceptedTypes.some((accepted) => {\n      // Check MIME type match\n      if (accepted === fileType) return true;\n      // Check extension match\n      if (accepted === fileExtension) return true;\n      // Check wildcard MIME type (e.g., image/*)\n      if (accepted.endsWith('/*')) {\n        const category = accepted.slice(0, -2);\n        return fileType.startsWith(category + '/');\n      }\n      return false;\n    });\n  }\n\n  private dispatchChangeEvent(): void {\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { files: this.getFiles() },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private dispatchRejectEvent(file: File, reason: string): void {\n    this.dispatchEvent(\n      new CustomEvent('bp-file-rejected', {\n        detail: { file, reason },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private generateFileId(): string {\n    return `file-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  private formatFileSize(bytes: number): string {\n    if (bytes === 0) return '0 B';\n    const units = ['B', 'KB', 'MB', 'GB'];\n    const exponent = Math.min(\n      Math.floor(Math.log(bytes) / Math.log(1024)),\n      units.length - 1\n    );\n    const size = bytes / Math.pow(1024, exponent);\n    return `${size.toFixed(exponent > 0 ? 1 : 0)} ${units[exponent]}`;\n  }\n\n  private handleRemoveFile(event: Event, fileId: string): void {\n    event.stopPropagation();\n    this.removeFile(fileId);\n  }\n\n  private renderUploadIcon() {\n    return html`\n      <svg\n        class=\"file-upload__icon\"\n        part=\"icon\"\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=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <polyline points=\"17 8 12 3 7 8\" />\n        <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n      </svg>\n    `;\n  }\n\n  private renderFileList() {\n    if (this.files.length === 0) return nothing;\n\n    return html`\n      <div\n        class=\"file-upload__file-list\"\n        part=\"file-list\"\n        role=\"list\"\n        aria-label=\"Selected files\"\n      >\n        ${this.files.map(\n          (fileInfo) => html`\n            <div\n              class=\"file-upload__file-item\"\n              part=\"file-item\"\n              role=\"listitem\"\n            >\n              ${fileInfo.previewUrl\n                ? html`\n                    <img\n                      class=\"file-upload__preview\"\n                      src=\"${fileInfo.previewUrl}\"\n                      alt=\"Preview of ${fileInfo.name}\"\n                    />\n                  `\n                : html`\n                    <div class=\"file-upload__file-icon\" aria-hidden=\"true\">\n                      <svg\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                      >\n                        <path\n                          d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\n                        />\n                        <polyline points=\"14 2 14 8 20 8\" />\n                      </svg>\n                    </div>\n                  `}\n              <div class=\"file-upload__file-info\">\n                <span class=\"file-upload__file-name\" part=\"file-name\"\n                  >${fileInfo.name}</span\n                >\n                <span class=\"file-upload__file-size\" part=\"file-size\"\n                  >${this.formatFileSize(fileInfo.size)}</span\n                >\n              </div>\n              <button\n                type=\"button\"\n                class=\"file-upload__remove-button\"\n                part=\"file-remove\"\n                @click=${(e: Event) => this.handleRemoveFile(e, fileInfo.id)}\n                aria-label=\"Remove ${fileInfo.name}\"\n                ?disabled=${this.disabled}\n              >\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                >\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                </svg>\n              </button>\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    const dropzoneClasses = {\n      'file-upload__dropzone': true,\n      'file-upload__dropzone--drag-over': this.isDragOver,\n      'file-upload__dropzone--disabled': this.disabled,\n      'file-upload__dropzone--has-files': this.files.length > 0,\n      [`file-upload__dropzone--${this.variant}`]: this.variant !== 'default',\n      [`file-upload__dropzone--${this.size}`]: true,\n    };\n\n    const acceptDescription = this.accept\n      ? `Accepted file types: ${this.accept}`\n      : '';\n    const sizeDescription =\n      this.maxSize > 0\n        ? `Maximum file size: ${this.formatFileSize(this.maxSize)}`\n        : '';\n\n    return html`\n      <div class=\"file-upload\">\n        <div\n          class=${classMap(dropzoneClasses)}\n          part=\"dropzone\"\n          role=\"button\"\n          tabindex=${this.disabled ? -1 : 0}\n          aria-disabled=${this.disabled}\n          aria-describedby=\"file-upload-description\"\n          @click=${this.handleClick}\n          @keydown=${this.handleKeyDown}\n          @dragenter=${this.handleDragEnter}\n          @dragover=${this.handleDragOver}\n          @dragleave=${this.handleDragLeave}\n          @drop=${this.handleDrop}\n        >\n          <input\n            type=\"file\"\n            part=\"input\"\n            .name=${this.name}\n            .accept=${this.accept}\n            ?multiple=${this.multiple}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            @change=${this.handleInputChange}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n          />\n\n          ${this.renderUploadIcon()}\n\n          <span class=\"file-upload__label\" part=\"label\">${this.label}</span>\n\n          ${this.description\n            ? html`<span class=\"file-upload__description\" part=\"description\"\n                >${this.description}</span\n              >`\n            : nothing}\n        </div>\n\n        <span id=\"file-upload-description\" class=\"visually-hidden\">\n          ${acceptDescription} ${sizeDescription}\n        </span>\n\n        ${this.renderFileList()}\n        ${this.message\n          ? html`<div\n              class=\"file-upload__message file-upload__message--${this.variant}\"\n              part=\"message\"\n            >\n              ${this.message}\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-file-upload': BpFileUpload;\n  }\n}\n"],"names":["fileUploadStyles","css","BpFileUpload","LitElement","fileInfo","fileId","fileIndex","f","removedFile","event","input","relatedTarget","dataTransfer","newFiles","validFiles","file","existingFile","acceptedTypes","type","fileType","fileExtension","accepted","category","reason","bytes","units","exponent","html","nothing","e","dropzoneClasses","acceptDescription","sizeDescription","classMap","__decorateClass","property","booleanConverter","state","query","customElement"],"mappings":";;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/components/heading.js

@@ -0,0 +1,161 @@
+import { css as p, LitElement as d, html as s } from "lit";
+import { property as g, customElement as f } from "lit/decorators.js";
+const c = p`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .heading {
+    margin: 0;
+    padding: 0;
+    color: var(--bp-color-text);
+    font-family: var(--bp-font-family);
+  }
+
+  /* Sizes */
+  .heading--xs {
+    font-size: var(--bp-font-size-xs);
+    line-height: 1.5;
+  }
+
+  .heading--sm {
+    font-size: var(--bp-font-size-sm);
+    line-height: 1.45;
+  }
+
+  .heading--md {
+    font-size: var(--bp-font-size-base);
+    line-height: 1.4;
+  }
+
+  .heading--lg {
+    font-size: var(--bp-font-size-lg);
+    line-height: 1.35;
+  }
+
+  .heading--xl {
+    font-size: var(--bp-font-size-xl);
+    line-height: 1.3;
+  }
+
+  .heading--2xl {
+    font-size: var(--bp-font-size-2xl);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  .heading--3xl {
+    font-size: var(--bp-font-size-3xl);
+    line-height: 1.2;
+    letter-spacing: -0.015em;
+  }
+
+  .heading--4xl {
+    font-size: var(--bp-font-size-4xl);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  /* Font weights */
+  .heading--light {
+    font-weight: var(--bp-font-weight-light);
+  }
+
+  .heading--normal {
+    font-weight: var(--bp-font-weight-normal);
+  }
+
+  .heading--medium {
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  .heading--semibold {
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  .heading--bold {
+    font-weight: var(--bp-font-weight-bold);
+  }
+`;
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (t, e, l, h) => {
+  for (var i = h > 1 ? void 0 : h ? m(e, l) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (i = (h ? o(e, l, i) : o(i)) || i);
+  return h && i && b(e, l, i), i;
+};
+let n = class extends d {
+  constructor() {
+    super(), this.level = 1, this.size = "4xl", this.weight = "bold";
+  }
+  render() {
+    const t = `heading--${this.size}`, e = `heading--${this.weight}`;
+    switch (this.level) {
+      case 1:
+        return s`<h1
+          part="heading"
+          class="heading ${t} ${e}"
+        >
+          <slot></slot>
+        </h1>`;
+      case 2:
+        return s`<h2
+          part="heading"
+          class="heading ${t} ${e}"
+        >
+          <slot></slot>
+        </h2>`;
+      case 3:
+        return s`<h3
+          part="heading"
+          class="heading ${t} ${e}"
+        >
+          <slot></slot>
+        </h3>`;
+      case 4:
+        return s`<h4
+          part="heading"
+          class="heading ${t} ${e}"
+        >
+          <slot></slot>
+        </h4>`;
+      case 5:
+        return s`<h5
+          part="heading"
+          class="heading ${t} ${e}"
+        >
+          <slot></slot>
+        </h5>`;
+      case 6:
+        return s`<h6
+          part="heading"
+          class="heading ${t} ${e}"
+        >
+          <slot></slot>
+        </h6>`;
+      default:
+        return s`<h1
+          part="heading"
+          class="heading ${t} ${e}"
+        >
+          <slot></slot>
+        </h1>`;
+    }
+  }
+};
+n.styles = [c];
+a([
+  g({ type: Number, reflect: !0 })
+], n.prototype, "level", 2);
+a([
+  g({ type: String, reflect: !0 })
+], n.prototype, "size", 2);
+a([
+  g({ type: String, reflect: !0 })
+], n.prototype, "weight", 2);
+n = a([
+  f("bp-heading")
+], n);
+export {
+  n as BpHeading
+};
+//# sourceMappingURL=heading.js.map

package/dist/components/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sources":["../../source/components/heading/heading.style.ts","../../source/components/heading/heading.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const headingStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .heading {\n    margin: 0;\n    padding: 0;\n    color: var(--bp-color-text);\n    font-family: var(--bp-font-family);\n  }\n\n  /* Sizes */\n  .heading--xs {\n    font-size: var(--bp-font-size-xs);\n    line-height: 1.5;\n  }\n\n  .heading--sm {\n    font-size: var(--bp-font-size-sm);\n    line-height: 1.45;\n  }\n\n  .heading--md {\n    font-size: var(--bp-font-size-base);\n    line-height: 1.4;\n  }\n\n  .heading--lg {\n    font-size: var(--bp-font-size-lg);\n    line-height: 1.35;\n  }\n\n  .heading--xl {\n    font-size: var(--bp-font-size-xl);\n    line-height: 1.3;\n  }\n\n  .heading--2xl {\n    font-size: var(--bp-font-size-2xl);\n    line-height: 1.25;\n    letter-spacing: -0.01em;\n  }\n\n  .heading--3xl {\n    font-size: var(--bp-font-size-3xl);\n    line-height: 1.2;\n    letter-spacing: -0.015em;\n  }\n\n  .heading--4xl {\n    font-size: var(--bp-font-size-4xl);\n    line-height: 1.1;\n    letter-spacing: -0.02em;\n  }\n\n  /* Font weights */\n  .heading--light {\n    font-weight: var(--bp-font-weight-light);\n  }\n\n  .heading--normal {\n    font-weight: var(--bp-font-weight-normal);\n  }\n\n  .heading--medium {\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  .heading--semibold {\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  .heading--bold {\n    font-weight: var(--bp-font-weight-bold);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { headingStyles } from './heading.style.js';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingSize =\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl';\nexport type HeadingWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';\n\n/**\n * A typography component for semantic headings (h1-h6).\n *\n * @element bp-heading\n *\n * @property {HeadingLevel} level - The semantic heading level (h1-h6)\n * @property {HeadingSize} size - The visual size of the heading\n * @property {HeadingWeight} weight - The font weight of the heading\n *\n * @slot - The heading text content\n *\n * @cssprop --bp-heading-color - Custom color for the heading\n * @cssprop --bp-heading-font-family - Custom font family for the heading\n *\n * @csspart heading - The heading element (h1-h6)\n */\n@customElement('bp-heading')\nexport class BpHeading extends LitElement {\n  /**\n   * The semantic heading level (h1-h6).\n   * Determines the actual HTML element rendered.\n   */\n  @property({ type: Number, reflect: true }) declare level: HeadingLevel;\n\n  /**\n   * The visual size of the heading.\n   * Allows visual hierarchy independent of semantic level.\n   * Defaults to match the level when not specified.\n   */\n  @property({ type: String, reflect: true }) declare size: HeadingSize;\n\n  /**\n   * The font weight of the heading.\n   */\n  @property({ type: String, reflect: true }) declare weight: HeadingWeight;\n\n  static styles = [headingStyles];\n\n  constructor() {\n    super();\n    this.level = 1;\n    this.size = '4xl';\n    this.weight = 'bold';\n  }\n\n  render() {\n    const sizeClass = `heading--${this.size}`;\n    const weightClass = `heading--${this.weight}`;\n\n    // Using a switch to create the proper heading element\n    switch (this.level) {\n      case 1:\n        return html`<h1\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h1>`;\n      case 2:\n        return html`<h2\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h2>`;\n      case 3:\n        return html`<h3\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h3>`;\n      case 4:\n        return html`<h4\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h4>`;\n      case 5:\n        return html`<h5\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h5>`;\n      case 6:\n        return html`<h6\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h6>`;\n      default:\n        return html`<h1\n          part=\"heading\"\n          class=\"heading ${sizeClass} ${weightClass}\"\n        >\n          <slot></slot>\n        </h1>`;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-heading': BpHeading;\n  }\n}\n"],"names":["headingStyles","css","BpHeading","LitElement","sizeClass","weightClass","html","__decorateClass","property","customElement"],"mappings":";;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC+BtB,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EAqBxC,cAAc;AACZ,UAAA,GACA,KAAK,QAAQ,GACb,KAAK,OAAO,OACZ,KAAK,SAAS;AAAA,EAChB;AAAA,EAEA,SAAS;AACP,UAAMC,IAAY,YAAY,KAAK,IAAI,IACjCC,IAAc,YAAY,KAAK,MAAM;AAG3C,YAAQ,KAAK,OAAA;AAAA,MACX,KAAK;AACH,eAAOC;AAAA;AAAA,2BAEYF,CAAS,IAAIC,CAAW;AAAA;AAAA;AAAA;AAAA,MAI7C,KAAK;AACH,eAAOC;AAAA;AAAA,2BAEYF,CAAS,IAAIC,CAAW;AAAA;AAAA;AAAA;AAAA,MAI7C,KAAK;AACH,eAAOC;AAAA;AAAA,2BAEYF,CAAS,IAAIC,CAAW;AAAA;AAAA;AAAA;AAAA,MAI7C,KAAK;AACH,eAAOC;AAAA;AAAA,2BAEYF,CAAS,IAAIC,CAAW;AAAA;AAAA;AAAA;AAAA,MAI7C,KAAK;AACH,eAAOC;AAAA;AAAA,2BAEYF,CAAS,IAAIC,CAAW;AAAA;AAAA;AAAA;AAAA,MAI7C,KAAK;AACH,eAAOC;AAAA;AAAA,2BAEYF,CAAS,IAAIC,CAAW;AAAA;AAAA;AAAA;AAAA,MAI7C;AACE,eAAOC;AAAA;AAAA,2BAEYF,CAAS,IAAIC,CAAW;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAKjD;AACF;AArFaH,EAmBJ,SAAS,CAACF,CAAa;AAdqBO,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAKwC,WAAA,SAAA,CAAA;AAOAK,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAZ9BN,EAYwC,WAAA,QAAA,CAAA;AAKAK,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjB9BN,EAiBwC,WAAA,UAAA,CAAA;AAjBxCA,IAANK,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdP,CAAA;"}