@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/file-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import {\n  computed,\n  createId,\n  defineComponent,\n  defineField,\n  effect,\n  handle,\n  html,\n  onCleanup,\n  onMount,\n  ref,\n  signal,\n} from '@vielzeug/craftit';\nimport { each } from '@vielzeug/craftit/directives';\nimport { createDropZone } from '@vielzeug/dragit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { clearIcon, fileIcon, uploadIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { FILE_INPUT_SIZE_PRESET } from '../shared/design-presets';\n\n// ============================================\n// Helpers\n// ============================================\n\nfunction formatBytes(bytes: number): string {\n  if (bytes === 0) return '0 B';\n\n  const units = ['B', 'KB', 'MB', 'GB'] as const;\n  const k = 1024;\n  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), units.length - 1);\n\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${units[i]}`;\n}\n\nfunction matchesAccept(file: File, accept: string | undefined): boolean {\n  if (!accept) return true;\n\n  return accept\n    .split(',')\n    .map((s) => s.trim())\n    .some((pattern) => {\n      if (pattern.startsWith('.')) return file.name.toLowerCase().endsWith(pattern.toLowerCase());\n\n      if (pattern.endsWith('/*')) return file.type.startsWith(pattern.slice(0, -1));\n\n      return file.type === pattern;\n    });\n}\n\nfunction isFileAccepted(file: File, accept: string | undefined): boolean {\n  return !accept || matchesAccept(file, accept);\n}\n\nfunction isFileSizeAllowed(file: File, maxBytes: number | undefined): boolean {\n  if (maxBytes == null) return true;\n\n  return maxBytes === 0 || file.size <= maxBytes;\n}\n\n// ============================================\n// Component Styles\n// ============================================\n\nimport componentStyles from './file-input.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** FileInput component properties */\n\nexport type BitFileInputEvents = {\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n};\n\nexport type BitFileInputProps = {\n  /** Accepted file types (MIME types or extensions, comma-separated) */\n  accept?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Full width mode */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Label text */\n  label?: string;\n  /** Maximum number of files (0 = unlimited) */\n  'max-files'?: number;\n  /** Maximum file size in bytes (0 = unlimited) */\n  'max-size'?: number;\n  /** Allow multiple file selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Mark as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: Exclude<RoundedSize, 'full'>;\n  /** Component size */\n  size?: ComponentSize;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;\n};\n\n// ============================================\n// Component Definition\n// ============================================\n\n/**\n * A file upload component with drag-and-drop support, file list management,\n * and full form integration.\n *\n * @element bit-file-input\n *\n * @attr {string} accept - Accepted file types (MIME types or extensions, e.g. \"image/*,.pdf\")\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} disabled - Disable all interaction\n * @attr {string} error - Error message\n * @attr {boolean} fullwidth - Full width mode\n * @attr {string} helper - Helper text below the dropzone\n * @attr {string} label - Label text displayed above the dropzone\n * @attr {number} max-files - Maximum number of files (0 = unlimited)\n * @attr {number} max-size - Maximum file size in bytes (0 = unlimited)\n * @attr {boolean} multiple - Allow selecting multiple files\n * @attr {string} name - Form field name\n * @attr {boolean} required - Mark as required\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n *\n * @fires change - Emitted when the file selection changes. detail: { value: File[], files: File[], originalEvent?: Event }\n * @fires remove - Emitted when a file is removed from the list. detail: { value: File[], file: File, files: File[], originalEvent?: Event }\n *\n * @part wrapper - The outer wrapper div\n * @part label - The label element\n * @part dropzone - The drag-and-drop zone\n * @part input - The hidden native file input\n * @part helper - The helper text element\n * @part error - The error text element\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-radius - Border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <bit-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <bit-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const FILE_INPUT_TAG = defineComponent<BitFileInputProps, BitFileInputEvents>({\n  formAssociated: true,\n  props: {\n    accept: { default: '' },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'max-files': { default: 0, type: Number },\n    'max-size': { default: 0, type: Number },\n    multiple: { default: false },\n    name: { default: '' },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    // ============================================\n    // State\n    // ============================================\n    const files = signal<File[]>([]);\n    const isDragging = signal(false);\n\n    // ============================================\n    // Form Integration\n    // ============================================\n    defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        toFormValue: (fi: File[]) => {\n          if (fi.length === 0) return null;\n\n          const name = props.name.value || 'file';\n          const fd = new FormData();\n\n          for (const file of fi) fd.append(name, file);\n\n          return fd;\n        },\n        value: files,\n      },\n      {\n        onReset: () => {\n          files.value = [];\n        },\n      },\n    );\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    effect(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      isInvalid.value ? host.setAttribute('invalid', '') : host.removeAttribute('invalid');\n    });\n    effect(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      isDragging.value ? host.setAttribute('drag-over', '') : host.removeAttribute('drag-over');\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = props['max-size'].value ?? 0;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = props['max-files'].value ?? 0;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // File Management\n    // ============================================\n    function addFiles(newFiles: File[], originalEvent?: Event): void {\n      if (props.disabled.value) return;\n\n      const maxFilesLimit = props['max-files'].value ?? 0;\n      const maxSizeLimit = props['max-size'].value ?? 0;\n      const acceptVal = props.accept.value;\n      const isMultiple = Boolean(props.multiple.value);\n      let incoming = Array.from(newFiles);\n\n      if (!isMultiple) incoming = incoming.slice(0, 1);\n\n      incoming = incoming.filter((f) => isFileAccepted(f, acceptVal) && isFileSizeAllowed(f, maxSizeLimit));\n\n      let updated: File[] = isMultiple ? [...files.value] : [];\n\n      for (const f of incoming) {\n        if (!updated.includes(f)) updated.push(f);\n      }\n\n      if (maxFilesLimit > 0 && updated.length > maxFilesLimit) {\n        updated = updated.slice(0, maxFilesLimit);\n      }\n\n      files.value = updated;\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    function removeFile(file: File, originalEvent?: Event): void {\n      files.value = files.value.filter((f) => f !== file);\n      emit('remove', { file, files: files.value, originalEvent, value: files.value });\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    // ============================================\n    // Mount\n    // ============================================\n    onMount(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n\n      // Native input → add files\n      handle(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n\n        if (input.files?.length) addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      handle(dz, 'click', () => {\n        if (!props.disabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      handle(dz, 'keydown', (e: KeyboardEvent) => {\n        if ((e.key === 'Enter' || e.key === ' ') && !props.disabled.value) {\n          e.preventDefault();\n          inp.click();\n        }\n      });\n\n      const dropZone = createDropZone({\n        disabled: () => Boolean(props.disabled.value),\n        element: dz,\n        onDrop: (droppedFiles, e) => addFiles(droppedFiles, e),\n        onHoverChange: (hovered) => {\n          isDragging.value = hovered;\n        },\n      });\n\n      onCleanup(() => dropZone.destroy());\n    });\n\n    // ============================================\n    // Template\n    // ============================================\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${() => props.label.value}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=${() => (props.disabled.value ? '-1' : '0')}\n          :aria-disabled=${() => String(props.disabled.value)}\n          :aria-label=${() => (!props.label.value ? 'File upload drop zone' : null)}\n          :aria-labelledby=${() => (props.label.value ? labelId : null)}\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=${() => props.accept.value}\n            ?multiple=${() => props.multiple.value}\n            ?required=${() => props.required.value}\n            ?disabled=${() => props.disabled.value}\n            :name=${() => props.name.value}\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\"> ${uploadIcon} </span>\n            <span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul class=\"file-list\" role=\"list\" aria-label=\"Selected files\" ?hidden=${() => files.value.length === 0}>\n          ${each(\n            files,\n            (file: File) => html`\n              <li class=\"file-item\">\n                <span class=\"file-icon\" aria-hidden=\"true\"> ${fileIcon} </span>\n                <span class=\"file-meta\">\n                  <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                  <span class=\"file-size\">${formatBytes(file.size)}</span>\n                </span>\n                <button\n                  class=\"file-remove\"\n                  type=\"button\"\n                  aria-label=\"${`Remove ${file.name}`}\"\n                  @click=${(e: Event) => removeFile(file, e)}>\n                  ${clearIcon}\n                </button>\n              </li>\n            `,\n            undefined,\n            {\n              key: (file: File) => `${file.name}:${file.size}:${file.lastModified}`,\n            },\n          )}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${() => props.helper.value}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n  tag: 'bit-file-input',\n});\n"],"mappings":"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"}
+{"version":3,"file":"file-input.js","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import {\n  define,\n  computed,\n  createId,\n  defineField,\n  handle,\n  html,\n  onCleanup,\n  onMount,\n  ref,\n  signal,\n} from '@vielzeug/craftit';\nimport { createPressControl } from '@vielzeug/craftit/controls';\nimport { each } from '@vielzeug/craftit/directives';\nimport { createDropZone } from '@vielzeug/dragit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport { FILE_INPUT_SIZE_PRESET } from '../shared/design-presets';\n\n// ============================================\n// Helpers\n// ============================================\n\nfunction formatBytes(bytes: number): string {\n  if (bytes === 0) return '0 B';\n\n  const units = ['B', 'KB', 'MB', 'GB'] as const;\n  const k = 1024;\n  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), units.length - 1);\n\n  return `${(bytes / k ** i).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;\n}\nfunction matchesAccept(file: File, accept: string | undefined): boolean {\n  if (!accept) return true;\n\n  return accept\n    .split(',')\n    .map((s) => s.trim())\n    .some((pattern) => {\n      if (pattern.startsWith('.')) return file.name.toLowerCase().endsWith(pattern.toLowerCase());\n\n      if (pattern.endsWith('/*')) return file.type.startsWith(pattern.slice(0, -1));\n\n      return file.type === pattern;\n    });\n}\n\nfunction isFileAccepted(file: File, accept: string | undefined): boolean {\n  return !accept || matchesAccept(file, accept);\n}\n\nfunction isFileSizeAllowed(file: File, maxBytes: number | undefined): boolean {\n  if (maxBytes == null) return true;\n\n  return maxBytes === 0 || file.size <= maxBytes;\n}\n\n// ============================================\n// Component Styles\n// ============================================\n\nimport componentStyles from './file-input.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** FileInput component properties */\n\nexport type BitFileInputEvents = {\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n};\n\nexport type BitFileInputProps = {\n  /** Accepted file types (MIME types or extensions, comma-separated) */\n  accept?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Full width mode */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Label text */\n  label?: string;\n  /** Maximum number of files (0 = unlimited) */\n  'max-files'?: number;\n  /** Maximum file size in bytes (0 = unlimited) */\n  'max-size'?: number;\n  /** Allow multiple file selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Mark as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: Exclude<RoundedSize, 'full'>;\n  /** Component size */\n  size?: ComponentSize;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;\n};\n\n// ============================================\n// Component Definition\n// ============================================\n\nconst fileInputProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...roundableBundle,\n  accept: '',\n  error: { default: '' as string, omit: true },\n  fullwidth: false,\n  helper: '',\n  label: '',\n  'max-files': 0,\n  'max-size': 0,\n  multiple: false,\n  name: '',\n  required: false,\n  variant: undefined,\n} satisfies PropBundle<BitFileInputProps>;\n\n/**\n * A file upload component with drag-and-drop support, file list management,\n * and full form integration.\n *\n * @element bit-file-input\n *\n * @attr {string} accept - Accepted file types (MIME types or extensions, e.g. \"image/*,.pdf\")\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} disabled - Disable all interaction\n * @attr {string} error - Error message\n * @attr {boolean} fullwidth - Full width mode\n * @attr {string} helper - Helper text below the dropzone\n * @attr {string} label - Label text displayed above the dropzone\n * @attr {number} max-files - Maximum number of files (0 = unlimited)\n * @attr {number} max-size - Maximum file size in bytes (0 = unlimited)\n * @attr {boolean} multiple - Allow selecting multiple files\n * @attr {string} name - Form field name\n * @attr {boolean} required - Mark as required\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n *\n * @fires change - Emitted when the file selection changes. detail: { value: File[], files: File[], originalEvent?: Event }\n * @fires remove - Emitted when a file is removed from the list. detail: { value: File[], file: File, files: File[], originalEvent?: Event }\n *\n * @part wrapper - The outer wrapper div\n * @part label - The label element\n * @part dropzone - The drag-and-drop zone\n * @part input - The hidden native file input\n * @part helper - The helper text element\n * @part error - The error text element\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-radius - Border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <bit-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <bit-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const FILE_INPUT_TAG = define<BitFileInputProps, BitFileInputEvents>('bit-file-input', {\n  formAssociated: true,\n  props: fileInputProps,\n  setup({ emit, host, props }) {\n    // ============================================\n    // State\n    // ============================================\n\n    const files = signal<File[]>([]);\n    const isDragging = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const maxFilesLimit = computed(() => props['max-files'].value ?? 0);\n    const maxSizeLimit = computed(() => props['max-size'].value ?? 0);\n\n    // ============================================\n    // Form Integration\n    // ============================================\n\n    defineField(\n      {\n        disabled: isDisabled,\n        toFormValue: (fi: File[]) => {\n          if (fi.length === 0) return null;\n\n          const name = props.name.value || 'file';\n          const fd = new FormData();\n\n          for (const file of fi) fd.append(name, file);\n\n          return fd;\n        },\n        value: files,\n      },\n      {\n        onReset: () => {\n          files.value = [];\n        },\n      },\n    );\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    host.bind('attr', {\n      'drag-over': () => (isDragging.value ? true : undefined),\n      invalid: () => (isInvalid.value ? true : undefined),\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = maxSizeLimit.value;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = maxFilesLimit.value;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // File Management\n    // ============================================\n    function addFiles(newFiles: File[], originalEvent?: Event): void {\n      if (isDisabled.value) return;\n\n      const acceptVal = props.accept.value;\n      const isMultiple = Boolean(props.multiple.value);\n      let incoming = Array.from(newFiles);\n\n      if (!isMultiple) incoming = incoming.slice(0, 1);\n\n      incoming = incoming.filter((f) => isFileAccepted(f, acceptVal) && isFileSizeAllowed(f, maxSizeLimit.value));\n\n      let updated: File[] = isMultiple ? [...files.value] : [];\n\n      for (const f of incoming) {\n        if (!updated.includes(f)) updated.push(f);\n      }\n\n      if (maxFilesLimit.value > 0 && updated.length > maxFilesLimit.value) {\n        updated = updated.slice(0, maxFilesLimit.value);\n      }\n\n      files.value = updated;\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    function removeFile(file: File, originalEvent?: Event): void {\n      files.value = files.value.filter((f) => f !== file);\n      emit('remove', { file, files: files.value, originalEvent, value: files.value });\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    // ============================================\n    // Mount\n    // ============================================\n    onMount(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n      let skipNextClick = false;\n      const pressControl = createPressControl({\n        disabled: () => isDisabled.value,\n        onPress: () => {\n          inp.click();\n        },\n      });\n\n      // Native input → add files\n      handle(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n\n        if (input.files?.length) addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      handle(dz, 'click', (e: MouseEvent) => {\n        if (e.target === inp) return;\n\n        if (skipNextClick) {\n          skipNextClick = false;\n\n          return;\n        }\n\n        if (!isDisabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      handle(dz, 'keydown', (e: KeyboardEvent) => {\n        skipNextClick = pressControl.handleKeydown(e) && e.key === 'Enter';\n      });\n\n      const dropZone = createDropZone({\n        disabled: () => isDisabled.value,\n        element: dz,\n        onDrop: (droppedFiles, e) => addFiles(droppedFiles, e),\n        onHoverChange: (hovered) => {\n          isDragging.value = hovered;\n        },\n      });\n\n      onCleanup(() => dropZone.destroy());\n    });\n\n    // ============================================\n    // Template\n    // ============================================\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${() => props.label.value}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=${() => (isDisabled.value ? '-1' : '0')}\n          :aria-disabled=${() => String(isDisabled.value)}\n          :aria-label=${() => (!props.label.value ? 'File upload drop zone' : null)}\n          :aria-labelledby=${() => (props.label.value ? labelId : null)}\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=${() => props.accept.value}\n            ?multiple=${() => props.multiple.value}\n            ?required=${() => props.required.value}\n            ?disabled=${() => isDisabled.value}\n            :name=${() => props.name.value}\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\">\n              <bit-icon name=\"upload\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></bit-icon>\n            </span>\n            <span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul class=\"file-list\" role=\"list\" aria-label=\"Selected files\" ?hidden=${() => files.value.length === 0}>\n          ${each(files, {\n            key: (file: File) => `${file.name}:${file.size}:${file.lastModified}`,\n            render: (file: File) => html`\n              <li class=\"file-item\">\n                <span class=\"file-icon\" aria-hidden=\"true\">\n                  <bit-icon name=\"file\" size=\"18\" stroke-width=\"1.75\" aria-hidden=\"true\"></bit-icon>\n                </span>\n                <span class=\"file-meta\">\n                  <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                  <span class=\"file-size\">${formatBytes(file.size)}</span>\n                </span>\n                <button\n                  class=\"file-remove\"\n                  type=\"button\"\n                  aria-label=\"${`Remove ${file.name}`}\"\n                  @click=${(e: Event) => removeFile(file, e)}>\n                  <bit-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\n                </button>\n              </li>\n            `,\n          })}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${() => props.helper.value}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/form.cjs

@@ -1,11 +1,11 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/form-context.cjs`),t=require(`./inputs/form/form.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=(0,n.defineComponent)({props:{disabled:(0,n.typed)(!1),novalidate:(0,n.typed)(!1),orientation:(0,n.typed)(`vertical`),size:(0,n.typed)(void 0),validateOn:(0,n.typed)(void 0),variant:(0,n.typed)(void 0)},setup({emit:t,host:r,props:i}){(0,n.provide)(e.FORM_CTX,{disabled:(0,n.computed)(()=>!!i.disabled.value),size:i.size,validateOn:(0,n.computed)(()=>i.validateOn.value??`submit`),variant:i.variant});function a(e){let n=e,i=r.shadowRoot?.querySelector(`form`);i&&(e.preventDefault(),t(`submit`,{formData:new FormData(i),originalEvent:n}))}function o(e){t(`reset`,{originalEvent:e})}return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./inputs/shared/form-context.cjs`),n=require(`./inputs/form/form.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i={...e.sizableBundle,...e.disablableBundle,novalidate:!1,orientation:`vertical`,validateOn:void 0,variant:void 0},a=(0,r.define)(`bit-form`,{props:i,setup({emit:e,props:n,shadowRoot:i}){(0,r.provide)(t.FORM_CTX,{disabled:(0,r.computed)(()=>!!n.disabled.value),size:n.size,validateOn:(0,r.computed)(()=>n.validateOn.value??`submit`),variant:n.variant});function a(t){let n=t,r=i?.querySelector(`form`);r&&(t.preventDefault(),e(`submit`,{formData:new FormData(r),originalEvent:n}))}function o(t){e(`reset`,{originalEvent:t})}return r.html`
       <form
         part="form"
-        :novalidate="${()=>i.novalidate.value||null}"
-        :aria-disabled="${()=>i.disabled.value?`true`:null}"
+        :novalidate="${()=>n.novalidate.value||null}"
+        :aria-disabled="${()=>n.disabled.value?`true`:null}"
         @submit="${a}"
         @reset="${o}">
         <slot></slot>
       </form>
-    `},shadow:{delegatesFocus:!1},styles:[t.default],tag:`bit-form`});exports.FORM_TAG=r;
+    `},shadow:{delegatesFocus:!1},styles:[n.default]});exports.FORM_TAG=a;
 //# sourceMappingURL=form.cjs.map

package/dist/form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.cjs","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { computed, defineComponent, html, typed, provide } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './form.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\nexport type BitFormEvents = {\n  reset: { originalEvent: Event };\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\nexport type BitFormProps = {\n  /** Disable all child form fields */\n  disabled?: boolean;\n  /** Native form novalidate */\n  novalidate?: boolean;\n  /** Form layout orientation */\n  orientation?: 'vertical' | 'horizontal';\n  /** Default size for all child fields */\n  size?: ComponentSize;\n  /**\n   * When to validate child form controls.\n   * - `'submit'` (default): validate only when the form is submitted\n   * - `'blur'`: validate each field as it loses focus\n   * - `'change'`: validate on every value change (most immediate feedback)\n   */\n  validateOn?: 'submit' | 'blur' | 'change';\n  /** Default variant for all child fields */\n  variant?: Exclude<VisualVariant, 'glass' | 'frost' | 'text'>;\n};\n\n/**\n * `bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`\n * context to all child `bit-*` form fields. Intercepts submit/reset events.\n *\n * @element bit-form\n *\n * @attr {boolean} disabled - Disable all child form fields\n * @attr {string} size - Default size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Default visual variant for child fields\n * @attr {string} orientation - Layout direction: 'vertical' | 'horizontal'\n * @attr {boolean} novalidate - Skip native browser validation\n *\n * @fires submit - Fired on form submit; detail contains `formData` and `originalEvent`\n * @fires reset  - Fired on form reset; detail contains `originalEvent`\n *\n * @slot - Form content (bit-input, bit-select, etc.)\n *\n * @cssprop --form-gap - Spacing between child form controls\n *\n * @example\n * ```html\n * <bit-form id=\"my-form\" size=\"sm\" variant=\"flat\">\n *   <bit-input name=\"email\" label=\"Email\" type=\"email\"></bit-input>\n *   <bit-select name=\"role\" label=\"Role\">\n *     <option value=\"admin\">Admin</option>\n *   </bit-select>\n *   <bit-button type=\"submit\">Submit</bit-button>\n * </bit-form>\n * ```\n */\nexport const FORM_TAG = defineComponent<BitFormProps, BitFormEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    novalidate: typed<boolean>(false),\n    orientation: typed<BitFormProps['orientation']>('vertical'),\n    size: typed<BitFormProps['size']>(undefined),\n    validateOn: typed<BitFormProps['validateOn']>(undefined),\n    variant: typed<BitFormProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Provide context to all child bit-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n    // ── Event handlers ────────────────────────────────────────────────────────\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = host.shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${() => props.novalidate.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n  tag: 'bit-form',\n});\n"],"mappings":"yMAqEA,IAAa,GAAA,EAAA,EAAA,iBAAwD,CACnE,MAAO,CACL,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,YAAA,EAAA,EAAA,OAA2B,GAAM,CACjC,aAAA,EAAA,EAAA,OAAgD,WAAW,CAC3D,MAAA,EAAA,EAAA,OAAkC,IAAA,GAAU,CAC5C,YAAA,EAAA,EAAA,OAA8C,IAAA,GAAU,CACxD,SAAA,EAAA,EAAA,OAAwC,IAAA,GAAU,CACnD,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,EAE3B,EAAA,EAAA,SAAQ,EAAA,SAAU,CAChB,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,MAAO,CACvD,KAAM,EAAM,KACZ,YAAA,EAAA,EAAA,cAA2B,EAAM,WAAW,OAAS,SAAS,CAC9D,QAAS,EAAM,QAChB,CAAC,CAEF,SAAS,EAAa,EAAU,CAC9B,IAAM,EAAc,EACd,EAAS,EAAK,YAAY,cAAc,OAAO,CAEhD,IAEL,EAAE,gBAAgB,CAIlB,EAAK,SAAU,CAAE,SAFA,IAAI,SAAS,EAAO,CAEV,cAAe,EAAa,CAAC,EAE1D,SAAS,EAAY,EAAU,CAC7B,EAAK,QAAS,CAAE,cAAe,EAAG,CAAC,CAGrC,MAAO,GAAA,IAAI;;;2BAGc,EAAM,WAAW,OAAS,KAAK;8BAC3B,EAAM,SAAS,MAAQ,OAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;OAK5B,OAAQ,CAAE,eAAgB,GAAO,CACjC,OAAQ,CAAC,EAAA,QAAgB,CACzB,IAAK,WACN,CAAC"}
+{"version":3,"file":"form.cjs","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { define, computed, html, provide } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { disablableBundle, sizableBundle, type PropBundle } from '../shared/bundles';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './form.css?inline';\n\nexport type BitFormEvents = {\n  reset: { originalEvent: Event };\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\nexport type BitFormProps = {\n  /** Disable all child form fields */\n  disabled?: boolean;\n  /** Native form novalidate */\n  novalidate?: boolean;\n  /** Form layout orientation */\n  orientation?: 'vertical' | 'horizontal';\n  /** Default size for all child fields */\n  size?: ComponentSize;\n  /**\n   * When to validate child form controls.\n   * - `'submit'` (default): validate only when the form is submitted\n   * - `'blur'`: validate each field as it loses focus\n   * - `'change'`: validate on every value change (most immediate feedback)\n   */\n  validateOn?: 'submit' | 'blur' | 'change';\n  /** Default variant for all child fields */\n  variant?: Exclude<VisualVariant, 'glass' | 'frost' | 'text'>;\n};\n\nconst formProps = {\n  ...sizableBundle,\n  ...disablableBundle,\n  novalidate: false,\n  orientation: 'vertical',\n  validateOn: undefined,\n  variant: undefined,\n} satisfies PropBundle<BitFormProps>;\n\n/**\n * `bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`\n * context to all child `bit-*` form fields. Intercepts submit/reset events.\n *\n * @element bit-form\n *\n * @attr {boolean} disabled - Disable all child form fields\n * @attr {string} size - Default size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Default visual variant for child fields\n * @attr {string} orientation - Layout direction: 'vertical' | 'horizontal'\n * @attr {boolean} novalidate - Skip native browser validation\n *\n * @fires submit - Fired on form submit; detail contains `formData` and `originalEvent`\n * @fires reset  - Fired on form reset; detail contains `originalEvent`\n *\n * @slot - Form content (bit-input, bit-select, etc.)\n *\n * @cssprop --form-gap - Spacing between child form controls\n *\n * @example\n * ```html\n * <bit-form id=\"my-form\" size=\"sm\" variant=\"flat\">\n *   <bit-input name=\"email\" label=\"Email\" type=\"email\"></bit-input>\n *   <bit-select name=\"role\" label=\"Role\">\n *     <option value=\"admin\">Admin</option>\n *   </bit-select>\n *   <bit-button type=\"submit\">Submit</bit-button>\n * </bit-form>\n * ```\n */\nexport const FORM_TAG = define<BitFormProps, BitFormEvents>('bit-form', {\n  props: formProps,\n  setup({ emit, props, shadowRoot }) {\n    // Provide context to all child bit-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${() => props.novalidate.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n});\n"],"mappings":"kPAiCA,IAAM,EAAY,CAChB,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,WAAY,GACZ,YAAa,WACb,WAAY,IAAA,GACZ,QAAS,IAAA,GACV,CAgCY,GAAA,EAAA,EAAA,QAA+C,WAAY,CACtE,MAAO,EACP,MAAM,CAAE,OAAM,QAAO,cAAc,EAEjC,EAAA,EAAA,SAAQ,EAAA,SAAU,CAChB,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,MAAO,CACvD,KAAM,EAAM,KACZ,YAAA,EAAA,EAAA,cAA2B,EAAM,WAAW,OAAS,SAAS,CAC9D,QAAS,EAAM,QAChB,CAAC,CAEF,SAAS,EAAa,EAAU,CAC9B,IAAM,EAAc,EACd,EAAS,GAAY,cAAc,OAAO,CAE3C,IAEL,EAAE,gBAAgB,CAIlB,EAAK,SAAU,CAAE,SAFA,IAAI,SAAS,EAAO,CAEV,cAAe,EAAa,CAAC,EAG1D,SAAS,EAAY,EAAU,CAC7B,EAAK,QAAS,CAAE,cAAe,EAAG,CAAC,CAGrC,MAAO,GAAA,IAAI;;;2BAGc,EAAM,WAAW,OAAS,KAAK;8BAC3B,EAAM,SAAS,MAAQ,OAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;OAK5B,OAAQ,CAAE,eAAgB,GAAO,CACjC,OAAQ,CAAC,EAAA,QAAgB,CAC1B,CAAC"}

package/dist/form.js

@@ -1,49 +1,48 @@
-import { FORM_CTX as e } from "./inputs/shared/form-context.js";
-import t from "./inputs/form/form.css?inline.js";
-import { computed as n, defineComponent as r, html as i, provide as a, typed as o } from "@vielzeug/craftit";
-//#region src/inputs/form/form.ts
-var s = r({
+import { disablableBundle as e, sizableBundle as t } from "./inputs/shared/bundles.js";
+import { FORM_CTX as n } from "./inputs/shared/form-context.js";
+import r from "./inputs/form/form.css?inline.js";
+import { computed as i, define as a, html as o, provide as s } from "@vielzeug/craftit";
+var c = a("bit-form", {
 	props: {
-		disabled: o(!1),
-		novalidate: o(!1),
-		orientation: o("vertical"),
-		size: o(void 0),
-		validateOn: o(void 0),
-		variant: o(void 0)
+		...t,
+		...e,
+		novalidate: !1,
+		orientation: "vertical",
+		validateOn: void 0,
+		variant: void 0
 	},
-	setup({ emit: t, host: r, props: o }) {
-		a(e, {
-			disabled: n(() => !!o.disabled.value),
-			size: o.size,
-			validateOn: n(() => o.validateOn.value ?? "submit"),
-			variant: o.variant
+	setup({ emit: e, props: t, shadowRoot: r }) {
+		s(n, {
+			disabled: i(() => !!t.disabled.value),
+			size: t.size,
+			validateOn: i(() => t.validateOn.value ?? "submit"),
+			variant: t.variant
 		});
-		function s(e) {
-			let n = e, i = r.shadowRoot?.querySelector("form");
-			i && (e.preventDefault(), t("submit", {
+		function a(t) {
+			let n = t, i = r?.querySelector("form");
+			i && (t.preventDefault(), e("submit", {
 				formData: new FormData(i),
 				originalEvent: n
 			}));
 		}
-		function c(e) {
-			t("reset", { originalEvent: e });
+		function c(t) {
+			e("reset", { originalEvent: t });
 		}
-		return i`
+		return o`
       <form
         part="form"
-        :novalidate="${() => o.novalidate.value || null}"
-        :aria-disabled="${() => o.disabled.value ? "true" : null}"
-        @submit="${s}"
+        :novalidate="${() => t.novalidate.value || null}"
+        :aria-disabled="${() => t.disabled.value ? "true" : null}"
+        @submit="${a}"
         @reset="${c}">
         <slot></slot>
       </form>
     `;
 	},
 	shadow: { delegatesFocus: !1 },
-	styles: [t],
-	tag: "bit-form"
+	styles: [r]
 });
 //#endregion
-export { s as FORM_TAG };
+export { c as FORM_TAG };
 
 //# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { computed, defineComponent, html, typed, provide } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './form.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\nexport type BitFormEvents = {\n  reset: { originalEvent: Event };\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\nexport type BitFormProps = {\n  /** Disable all child form fields */\n  disabled?: boolean;\n  /** Native form novalidate */\n  novalidate?: boolean;\n  /** Form layout orientation */\n  orientation?: 'vertical' | 'horizontal';\n  /** Default size for all child fields */\n  size?: ComponentSize;\n  /**\n   * When to validate child form controls.\n   * - `'submit'` (default): validate only when the form is submitted\n   * - `'blur'`: validate each field as it loses focus\n   * - `'change'`: validate on every value change (most immediate feedback)\n   */\n  validateOn?: 'submit' | 'blur' | 'change';\n  /** Default variant for all child fields */\n  variant?: Exclude<VisualVariant, 'glass' | 'frost' | 'text'>;\n};\n\n/**\n * `bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`\n * context to all child `bit-*` form fields. Intercepts submit/reset events.\n *\n * @element bit-form\n *\n * @attr {boolean} disabled - Disable all child form fields\n * @attr {string} size - Default size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Default visual variant for child fields\n * @attr {string} orientation - Layout direction: 'vertical' | 'horizontal'\n * @attr {boolean} novalidate - Skip native browser validation\n *\n * @fires submit - Fired on form submit; detail contains `formData` and `originalEvent`\n * @fires reset  - Fired on form reset; detail contains `originalEvent`\n *\n * @slot - Form content (bit-input, bit-select, etc.)\n *\n * @cssprop --form-gap - Spacing between child form controls\n *\n * @example\n * ```html\n * <bit-form id=\"my-form\" size=\"sm\" variant=\"flat\">\n *   <bit-input name=\"email\" label=\"Email\" type=\"email\"></bit-input>\n *   <bit-select name=\"role\" label=\"Role\">\n *     <option value=\"admin\">Admin</option>\n *   </bit-select>\n *   <bit-button type=\"submit\">Submit</bit-button>\n * </bit-form>\n * ```\n */\nexport const FORM_TAG = defineComponent<BitFormProps, BitFormEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    novalidate: typed<boolean>(false),\n    orientation: typed<BitFormProps['orientation']>('vertical'),\n    size: typed<BitFormProps['size']>(undefined),\n    validateOn: typed<BitFormProps['validateOn']>(undefined),\n    variant: typed<BitFormProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Provide context to all child bit-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n    // ── Event handlers ────────────────────────────────────────────────────────\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = host.shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${() => props.novalidate.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n  tag: 'bit-form',\n});\n"],"mappings":";;;;AAqEA,IAAa,IAAW,EAA6C;CACnE,OAAO;EACL,UAAU,EAAe,GAAM;EAC/B,YAAY,EAAe,GAAM;EACjC,aAAa,EAAmC,WAAW;EAC3D,MAAM,EAA4B,KAAA,EAAU;EAC5C,YAAY,EAAkC,KAAA,EAAU;EACxD,SAAS,EAA+B,KAAA,EAAU;EACnD;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;AAE3B,IAAQ,GAAU;GAChB,UAAU,QAAe,EAAQ,EAAM,SAAS,MAAO;GACvD,MAAM,EAAM;GACZ,YAAY,QAAe,EAAM,WAAW,SAAS,SAAS;GAC9D,SAAS,EAAM;GAChB,CAAC;EAEF,SAAS,EAAa,GAAU;GAC9B,IAAM,IAAc,GACd,IAAS,EAAK,YAAY,cAAc,OAAO;AAEhD,SAEL,EAAE,gBAAgB,EAIlB,EAAK,UAAU;IAAE,UAFA,IAAI,SAAS,EAAO;IAEV,eAAe;IAAa,CAAC;;EAE1D,SAAS,EAAY,GAAU;AAC7B,KAAK,SAAS,EAAE,eAAe,GAAG,CAAC;;AAGrC,SAAO,CAAI;;;6BAGc,EAAM,WAAW,SAAS,KAAK;gCAC3B,EAAM,SAAS,QAAQ,SAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;;;CAK5B,QAAQ,EAAE,gBAAgB,IAAO;CACjC,QAAQ,CAAC,EAAgB;CACzB,KAAK;CACN,CAAC"}
+{"version":3,"file":"form.js","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { define, computed, html, provide } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { disablableBundle, sizableBundle, type PropBundle } from '../shared/bundles';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './form.css?inline';\n\nexport type BitFormEvents = {\n  reset: { originalEvent: Event };\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\nexport type BitFormProps = {\n  /** Disable all child form fields */\n  disabled?: boolean;\n  /** Native form novalidate */\n  novalidate?: boolean;\n  /** Form layout orientation */\n  orientation?: 'vertical' | 'horizontal';\n  /** Default size for all child fields */\n  size?: ComponentSize;\n  /**\n   * When to validate child form controls.\n   * - `'submit'` (default): validate only when the form is submitted\n   * - `'blur'`: validate each field as it loses focus\n   * - `'change'`: validate on every value change (most immediate feedback)\n   */\n  validateOn?: 'submit' | 'blur' | 'change';\n  /** Default variant for all child fields */\n  variant?: Exclude<VisualVariant, 'glass' | 'frost' | 'text'>;\n};\n\nconst formProps = {\n  ...sizableBundle,\n  ...disablableBundle,\n  novalidate: false,\n  orientation: 'vertical',\n  validateOn: undefined,\n  variant: undefined,\n} satisfies PropBundle<BitFormProps>;\n\n/**\n * `bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`\n * context to all child `bit-*` form fields. Intercepts submit/reset events.\n *\n * @element bit-form\n *\n * @attr {boolean} disabled - Disable all child form fields\n * @attr {string} size - Default size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Default visual variant for child fields\n * @attr {string} orientation - Layout direction: 'vertical' | 'horizontal'\n * @attr {boolean} novalidate - Skip native browser validation\n *\n * @fires submit - Fired on form submit; detail contains `formData` and `originalEvent`\n * @fires reset  - Fired on form reset; detail contains `originalEvent`\n *\n * @slot - Form content (bit-input, bit-select, etc.)\n *\n * @cssprop --form-gap - Spacing between child form controls\n *\n * @example\n * ```html\n * <bit-form id=\"my-form\" size=\"sm\" variant=\"flat\">\n *   <bit-input name=\"email\" label=\"Email\" type=\"email\"></bit-input>\n *   <bit-select name=\"role\" label=\"Role\">\n *     <option value=\"admin\">Admin</option>\n *   </bit-select>\n *   <bit-button type=\"submit\">Submit</bit-button>\n * </bit-form>\n * ```\n */\nexport const FORM_TAG = define<BitFormProps, BitFormEvents>('bit-form', {\n  props: formProps,\n  setup({ emit, props, shadowRoot }) {\n    // Provide context to all child bit-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${() => props.novalidate.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n});\n"],"mappings":";;;;AAwEA,IAAa,IAAW,EAAoC,YAAY;CACtE,OAxCgB;EAChB,GAAG;EACH,GAAG;EACH,YAAY;EACZ,aAAa;EACb,YAAY,KAAA;EACZ,SAAS,KAAA;EACV;CAkCC,MAAM,EAAE,SAAM,UAAO,iBAAc;AAEjC,IAAQ,GAAU;GAChB,UAAU,QAAe,EAAQ,EAAM,SAAS,MAAO;GACvD,MAAM,EAAM;GACZ,YAAY,QAAe,EAAM,WAAW,SAAS,SAAS;GAC9D,SAAS,EAAM;GAChB,CAAC;EAEF,SAAS,EAAa,GAAU;GAC9B,IAAM,IAAc,GACd,IAAS,GAAY,cAAc,OAAO;AAE3C,SAEL,EAAE,gBAAgB,EAIlB,EAAK,UAAU;IAAE,UAFA,IAAI,SAAS,EAAO;IAEV,eAAe;IAAa,CAAC;;EAG1D,SAAS,EAAY,GAAU;AAC7B,KAAK,SAAS,EAAE,eAAe,GAAG,CAAC;;AAGrC,SAAO,CAAI;;;6BAGc,EAAM,WAAW,SAAS,KAAK;gCAC3B,EAAM,SAAS,QAAQ,SAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;;;CAK5B,QAAQ,EAAE,gBAAgB,IAAO;CACjC,QAAQ,CAAC,EAAgB;CAC1B,CAAC"}

package/dist/grid-item.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./layout/grid-item/grid-item.css?inline.cjs`);let t=require(`@vielzeug/craftit`);var n=(0,t.defineComponent)({props:{align:{default:void 0},col:{default:``},colSpan:{default:void 0},justify:{default:void 0},row:{default:``},rowSpan:{default:void 0}},setup({host:e,props:n}){return(0,t.effect)(()=>{let t=n.col.value,r=n.colSpan.value;t?e.style.setProperty(`grid-column`,t):r===`full`?e.style.setProperty(`grid-column`,`1 / -1`):r?e.style.setProperty(`grid-column`,`span ${r}`):e.style.removeProperty(`grid-column`)}),(0,t.effect)(()=>{let t=n.row.value,r=n.rowSpan.value;t?e.style.setProperty(`grid-row`,t):r===`full`?e.style.setProperty(`grid-row`,`1 / -1`):r?e.style.setProperty(`grid-row`,`span ${r}`):e.style.removeProperty(`grid-row`)}),t.html`<slot></slot>`},styles:[e.default],tag:`bit-grid-item`});exports.GRID_ITEM_TAG=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./layout/grid-item/grid-item.css?inline.cjs`);let t=require(`@vielzeug/craftit`);var n=(0,t.define)(`bit-grid-item`,{props:{align:void 0,col:``,colSpan:void 0,justify:void 0,row:``,rowSpan:void 0},setup({host:e,props:n}){return(0,t.effect)(()=>{let t=n.col.value,r=n.colSpan.value;t?e.el.style.setProperty(`grid-column`,t):r===`full`?e.el.style.setProperty(`grid-column`,`1 / -1`):r?e.el.style.setProperty(`grid-column`,`span ${r}`):e.el.style.removeProperty(`grid-column`)}),(0,t.effect)(()=>{let t=n.row.value,r=n.rowSpan.value;t?e.el.style.setProperty(`grid-row`,t):r===`full`?e.el.style.setProperty(`grid-row`,`1 / -1`):r?e.el.style.setProperty(`grid-row`,`span ${r}`):e.el.style.removeProperty(`grid-row`)}),t.html`<slot></slot>`},styles:[e.default]});exports.GRID_ITEM_TAG=n;
 //# sourceMappingURL=grid-item.cjs.map

package/dist/grid-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.cjs","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { defineComponent, effect, html } from '@vielzeug/craftit';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type BitGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * bit-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element bit-grid-item\n *\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <bit-grid-item col-span=\"2\">Wide</bit-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <bit-grid-item col-span=\"full\">Banner</bit-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <bit-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</bit-grid-item>\n */\nexport const GRID_ITEM_TAG = defineComponent<BitGridItemProps>({\n  props: {\n    align: { default: undefined },\n    col: { default: '' },\n    colSpan: { default: undefined },\n    justify: { default: undefined },\n    row: { default: '' },\n    rowSpan: { default: undefined },\n  },\n  setup({ host, props }) {\n    effect(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) {\n        host.style.setProperty('grid-column', col);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-column', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-column', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-column');\n      }\n    });\n    effect(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) {\n        host.style.setProperty('grid-row', row);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-row', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-row', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-row');\n      }\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-grid-item',\n});\n"],"mappings":"qKAkDA,IAAa,GAAA,EAAA,EAAA,iBAAkD,CAC7D,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,IAAK,CAAE,QAAS,GAAI,CACpB,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,IAAK,CAAE,QAAS,GAAI,CACpB,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,SAAS,CA8BrB,OA7BA,EAAA,EAAA,YAAa,CACX,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAEvB,EACF,EAAK,MAAM,YAAY,cAAe,EAAI,CACjC,IAAS,OAClB,EAAK,MAAM,YAAY,cAAe,SAAS,CACtC,EACT,EAAK,MAAM,YAAY,cAAe,QAAQ,IAAO,CAErD,EAAK,MAAM,eAAe,cAAc,EAE1C,EACF,EAAA,EAAA,YAAa,CACX,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAEvB,EACF,EAAK,MAAM,YAAY,WAAY,EAAI,CAC9B,IAAS,OAClB,EAAK,MAAM,YAAY,WAAY,SAAS,CACnC,EACT,EAAK,MAAM,YAAY,WAAY,QAAQ,IAAO,CAElD,EAAK,MAAM,eAAe,WAAW,EAEvC,CAEK,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CAChB,IAAK,gBACN,CAAC"}
+{"version":3,"file":"grid-item.cjs","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { define, effect, html } from '@vielzeug/craftit';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type BitGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * bit-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element bit-grid-item\n *\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <bit-grid-item col-span=\"2\">Wide</bit-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <bit-grid-item col-span=\"full\">Banner</bit-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <bit-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</bit-grid-item>\n */\nexport const GRID_ITEM_TAG = define<BitGridItemProps>('bit-grid-item', {\n  props: {\n    align: undefined,\n    col: '',\n    colSpan: undefined,\n    justify: undefined,\n    row: '',\n    rowSpan: undefined,\n  },\n  setup({ host, props }) {\n    effect(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) {\n        host.el.style.setProperty('grid-column', col);\n      } else if (span === 'full') {\n        host.el.style.setProperty('grid-column', '1 / -1');\n      } else if (span) {\n        host.el.style.setProperty('grid-column', `span ${span}`);\n      } else {\n        host.el.style.removeProperty('grid-column');\n      }\n    });\n    effect(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) {\n        host.el.style.setProperty('grid-row', row);\n      } else if (span === 'full') {\n        host.el.style.setProperty('grid-row', '1 / -1');\n      } else if (span) {\n        host.el.style.setProperty('grid-row', `span ${span}`);\n      } else {\n        host.el.style.removeProperty('grid-row');\n      }\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":"qKAkDA,IAAa,GAAA,EAAA,EAAA,QAAyC,gBAAiB,CACrE,MAAO,CACL,MAAO,IAAA,GACP,IAAK,GACL,QAAS,IAAA,GACT,QAAS,IAAA,GACT,IAAK,GACL,QAAS,IAAA,GACV,CACD,MAAM,CAAE,OAAM,SAAS,CA8BrB,OA7BA,EAAA,EAAA,YAAa,CACX,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAEvB,EACF,EAAK,GAAG,MAAM,YAAY,cAAe,EAAI,CACpC,IAAS,OAClB,EAAK,GAAG,MAAM,YAAY,cAAe,SAAS,CACzC,EACT,EAAK,GAAG,MAAM,YAAY,cAAe,QAAQ,IAAO,CAExD,EAAK,GAAG,MAAM,eAAe,cAAc,EAE7C,EACF,EAAA,EAAA,YAAa,CACX,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAEvB,EACF,EAAK,GAAG,MAAM,YAAY,WAAY,EAAI,CACjC,IAAS,OAClB,EAAK,GAAG,MAAM,YAAY,WAAY,SAAS,CACtC,EACT,EAAK,GAAG,MAAM,YAAY,WAAY,QAAQ,IAAO,CAErD,EAAK,GAAG,MAAM,eAAe,WAAW,EAE1C,CAEK,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CACjB,CAAC"}

package/dist/grid-item.js

@@ -1,26 +1,25 @@
 import e from "./layout/grid-item/grid-item.css?inline.js";
-import { defineComponent as t, effect as n, html as r } from "@vielzeug/craftit";
+import { define as t, effect as n, html as r } from "@vielzeug/craftit";
 //#region src/layout/grid-item/grid-item.ts
-var i = t({
+var i = t("bit-grid-item", {
 	props: {
-		align: { default: void 0 },
-		col: { default: "" },
-		colSpan: { default: void 0 },
-		justify: { default: void 0 },
-		row: { default: "" },
-		rowSpan: { default: void 0 }
+		align: void 0,
+		col: "",
+		colSpan: void 0,
+		justify: void 0,
+		row: "",
+		rowSpan: void 0
 	},
 	setup({ host: e, props: t }) {
 		return n(() => {
 			let n = t.col.value, r = t.colSpan.value;
-			n ? e.style.setProperty("grid-column", n) : r === "full" ? e.style.setProperty("grid-column", "1 / -1") : r ? e.style.setProperty("grid-column", `span ${r}`) : e.style.removeProperty("grid-column");
+			n ? e.el.style.setProperty("grid-column", n) : r === "full" ? e.el.style.setProperty("grid-column", "1 / -1") : r ? e.el.style.setProperty("grid-column", `span ${r}`) : e.el.style.removeProperty("grid-column");
 		}), n(() => {
 			let n = t.row.value, r = t.rowSpan.value;
-			n ? e.style.setProperty("grid-row", n) : r === "full" ? e.style.setProperty("grid-row", "1 / -1") : r ? e.style.setProperty("grid-row", `span ${r}`) : e.style.removeProperty("grid-row");
+			n ? e.el.style.setProperty("grid-row", n) : r === "full" ? e.el.style.setProperty("grid-row", "1 / -1") : r ? e.el.style.setProperty("grid-row", `span ${r}`) : e.el.style.removeProperty("grid-row");
 		}), r`<slot></slot>`;
 	},
-	styles: [e],
-	tag: "bit-grid-item"
+	styles: [e]
 });
 //#endregion
 export { i as GRID_ITEM_TAG };

package/dist/grid-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.js","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { defineComponent, effect, html } from '@vielzeug/craftit';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type BitGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * bit-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element bit-grid-item\n *\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <bit-grid-item col-span=\"2\">Wide</bit-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <bit-grid-item col-span=\"full\">Banner</bit-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <bit-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</bit-grid-item>\n */\nexport const GRID_ITEM_TAG = defineComponent<BitGridItemProps>({\n  props: {\n    align: { default: undefined },\n    col: { default: '' },\n    colSpan: { default: undefined },\n    justify: { default: undefined },\n    row: { default: '' },\n    rowSpan: { default: undefined },\n  },\n  setup({ host, props }) {\n    effect(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) {\n        host.style.setProperty('grid-column', col);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-column', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-column', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-column');\n      }\n    });\n    effect(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) {\n        host.style.setProperty('grid-row', row);\n      } else if (span === 'full') {\n        host.style.setProperty('grid-row', '1 / -1');\n      } else if (span) {\n        host.style.setProperty('grid-row', `span ${span}`);\n      } else {\n        host.style.removeProperty('grid-row');\n      }\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-grid-item',\n});\n"],"mappings":";;;AAkDA,IAAa,IAAgB,EAAkC;CAC7D,OAAO;EACL,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,KAAK,EAAE,SAAS,IAAI;EACpB,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,KAAK,EAAE,SAAS,IAAI;EACpB,SAAS,EAAE,SAAS,KAAA,GAAW;EAChC;CACD,MAAM,EAAE,SAAM,YAAS;AA8BrB,SA7BA,QAAa;GACX,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;AAE3B,GAAI,IACF,EAAK,MAAM,YAAY,eAAe,EAAI,GACjC,MAAS,SAClB,EAAK,MAAM,YAAY,eAAe,SAAS,GACtC,IACT,EAAK,MAAM,YAAY,eAAe,QAAQ,IAAO,GAErD,EAAK,MAAM,eAAe,cAAc;IAE1C,EACF,QAAa;GACX,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;AAE3B,GAAI,IACF,EAAK,MAAM,YAAY,YAAY,EAAI,GAC9B,MAAS,SAClB,EAAK,MAAM,YAAY,YAAY,SAAS,GACnC,IACT,EAAK,MAAM,YAAY,YAAY,QAAQ,IAAO,GAElD,EAAK,MAAM,eAAe,WAAW;IAEvC,EAEK,CAAI;;CAEb,QAAQ,CAAC,EAAO;CAChB,KAAK;CACN,CAAC"}
+{"version":3,"file":"grid-item.js","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { define, effect, html } from '@vielzeug/craftit';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type BitGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * bit-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element bit-grid-item\n *\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <bit-grid-item col-span=\"2\">Wide</bit-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <bit-grid-item col-span=\"full\">Banner</bit-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <bit-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</bit-grid-item>\n */\nexport const GRID_ITEM_TAG = define<BitGridItemProps>('bit-grid-item', {\n  props: {\n    align: undefined,\n    col: '',\n    colSpan: undefined,\n    justify: undefined,\n    row: '',\n    rowSpan: undefined,\n  },\n  setup({ host, props }) {\n    effect(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) {\n        host.el.style.setProperty('grid-column', col);\n      } else if (span === 'full') {\n        host.el.style.setProperty('grid-column', '1 / -1');\n      } else if (span) {\n        host.el.style.setProperty('grid-column', `span ${span}`);\n      } else {\n        host.el.style.removeProperty('grid-column');\n      }\n    });\n    effect(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) {\n        host.el.style.setProperty('grid-row', row);\n      } else if (span === 'full') {\n        host.el.style.setProperty('grid-row', '1 / -1');\n      } else if (span) {\n        host.el.style.setProperty('grid-row', `span ${span}`);\n      } else {\n        host.el.style.removeProperty('grid-row');\n      }\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":";;;AAkDA,IAAa,IAAgB,EAAyB,iBAAiB;CACrE,OAAO;EACL,OAAO,KAAA;EACP,KAAK;EACL,SAAS,KAAA;EACT,SAAS,KAAA;EACT,KAAK;EACL,SAAS,KAAA;EACV;CACD,MAAM,EAAE,SAAM,YAAS;AA8BrB,SA7BA,QAAa;GACX,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;AAE3B,GAAI,IACF,EAAK,GAAG,MAAM,YAAY,eAAe,EAAI,GACpC,MAAS,SAClB,EAAK,GAAG,MAAM,YAAY,eAAe,SAAS,GACzC,IACT,EAAK,GAAG,MAAM,YAAY,eAAe,QAAQ,IAAO,GAExD,EAAK,GAAG,MAAM,eAAe,cAAc;IAE7C,EACF,QAAa;GACX,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;AAE3B,GAAI,IACF,EAAK,GAAG,MAAM,YAAY,YAAY,EAAI,GACjC,MAAS,SAClB,EAAK,GAAG,MAAM,YAAY,YAAY,SAAS,GACtC,IACT,EAAK,GAAG,MAAM,YAAY,YAAY,QAAQ,IAAO,GAErD,EAAK,GAAG,MAAM,eAAe,WAAW;IAE1C,EAEK,CAAI;;CAEb,QAAQ,CAAC,EAAO;CACjB,CAAC"}

package/dist/grid.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./craftit/dist/labs/observers.cjs`);require(`./craftit/dist/labs.cjs`);const t=require(`./layout/grid/grid.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],i=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],a=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},o={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},s=(0,n.defineComponent)({props:{align:{default:void 0},areas:{default:``},areas2xl:{default:``},areasLg:{default:``},areasMd:{default:``},areasSm:{default:``},areasXl:{default:``},cols:{default:void 0},cols2xl:{default:void 0},colsLg:{default:void 0},colsMd:{default:void 0},colsSm:{default:void 0},colsXl:{default:void 0},flow:{default:void 0},fullwidth:{default:!1},gap:{default:void 0},justify:{default:void 0},minColWidth:{default:``},responsive:{default:!1},rows:{default:void 0}},setup({host:t,props:s}){let c=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,l=()=>{let e=t.offsetWidth,n=!!s.responsive.value,i=s.minColWidth.value??``,l;for(let[n,i]of r)if(e>=a(t,i,o[i])&&s[n].value){l=s[n].value;break}l||=s.cols.value||void 0;let u=c(l,n,i);u?t.style.setProperty(`--_cols`,u):t.style.removeProperty(`--_cols`)};(0,n.effect)(()=>{s.cols.value,s.colsSm.value,s.colsMd.value,s.colsLg.value,s.colsXl.value,s.cols2xl.value,s.responsive.value,s.minColWidth.value,l()});let u=()=>{let e=t.offsetWidth,n=``;for(let[r,c]of i)if(e>=a(t,c,o[c])&&s[r].value){n=s[r].value;break}n||=s.areas.value||``,n?t.style.setProperty(`grid-template-areas`,n):t.style.removeProperty(`grid-template-areas`)};return(0,n.onMount)(()=>{let r=e.n(t);(0,n.effect)(()=>{r.value,l(),u()})}),(0,n.effect)(()=>{let e=s.rows.value;e&&e!==`auto`?t.style.setProperty(`--_rows`,`repeat(${e}, 1fr)`):t.style.removeProperty(`--_rows`)}),(0,n.effect)(()=>{s.areas.value,s.areasSm.value,s.areasMd.value,s.areasLg.value,s.areasXl.value,s.areas2xl.value,u()}),n.html`<slot></slot>`},styles:[t.default],tag:`bit-grid`});exports.GRID_TAG=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./packages/craftit/dist/observers/resize-observe.cjs`),t=require(`./layout/grid/grid.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],i=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],a=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},o={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},s=(0,n.define)(`bit-grid`,{props:{align:void 0,areas:``,areas2xl:``,areasLg:``,areasMd:``,areasSm:``,areasXl:``,cols:void 0,cols2xl:void 0,colsLg:void 0,colsMd:void 0,colsSm:void 0,colsXl:void 0,flow:void 0,fullwidth:!1,gap:void 0,justify:void 0,minColWidth:``,responsive:!1,rows:void 0},setup({host:t,props:s}){let c=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,l=()=>{let e=t.el.offsetWidth,n=!!s.responsive.value,i=s.minColWidth.value??``,l;for(let[n,i]of r)if(e>=a(t.el,i,o[i])&&s[n].value){l=s[n].value;break}l||=s.cols.value||void 0;let u=c(l,n,i);u?t.el.style.setProperty(`--_cols`,u):t.el.style.removeProperty(`--_cols`)};(0,n.effect)(()=>{s.cols.value,s.colsSm.value,s.colsMd.value,s.colsLg.value,s.colsXl.value,s.cols2xl.value,s.responsive.value,s.minColWidth.value,l()});let u=()=>{let e=t.el.offsetWidth,n=``;for(let[r,c]of i)if(e>=a(t.el,c,o[c])&&s[r].value){n=s[r].value;break}n||=s.areas.value||``,n?t.el.style.setProperty(`grid-template-areas`,n):t.el.style.removeProperty(`grid-template-areas`)};return(0,n.onMount)(()=>{let r=e.n(t.el);(0,n.effect)(()=>{r.value,l(),u()})}),(0,n.effect)(()=>{let e=s.rows.value;e&&e!==`auto`?t.el.style.setProperty(`--_rows`,`repeat(${e}, 1fr)`):t.el.style.removeProperty(`--_rows`)}),(0,n.effect)(()=>{s.areas.value,s.areasSm.value,s.areasMd.value,s.areasLg.value,s.areasXl.value,s.areas2xl.value,u()}),n.html`<slot></slot>`},styles:[t.default]});exports.GRID_TAG=s;
 //# sourceMappingURL=grid.cjs.map

package/dist/grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid.cjs","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { defineComponent, effect, html, onMount } from '@vielzeug/craftit';\nimport { observeResize } from '@vielzeug/craftit/labs';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\nimport styles from './grid.css?inline';\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type BitGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * bit-grid — Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element bit-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <bit-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </bit-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <bit-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </bit-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <bit-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </bit-grid>\n */\nexport const GRID_TAG = defineComponent<BitGridProps>({\n  props: {\n    align: { default: undefined },\n    areas: { default: '' },\n    areas2xl: { default: '' },\n    areasLg: { default: '' },\n    areasMd: { default: '' },\n    areasSm: { default: '' },\n    areasXl: { default: '' },\n    cols: { default: undefined },\n    cols2xl: { default: undefined },\n    colsLg: { default: undefined },\n    colsMd: { default: undefined },\n    colsSm: { default: undefined },\n    colsXl: { default: undefined },\n    flow: { default: undefined },\n    fullwidth: { default: false },\n    gap: { default: undefined },\n    justify: { default: undefined },\n    minColWidth: { default: '' },\n    responsive: { default: false },\n    rows: { default: undefined },\n  },\n  setup({ host, props }) {\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = host.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(host, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      colsValue ? host.style.setProperty('--_cols', colsValue) : host.style.removeProperty('--_cols');\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    effect(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = host.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(host, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      active ? host.style.setProperty('grid-template-areas', active) : host.style.removeProperty('grid-template-areas');\n    };\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMount(() => {\n      const size = observeResize(host);\n\n      effect(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n    // Rows\n    effect(() => {\n      const rows = props.rows.value;\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      rows && rows !== 'auto'\n        ? host.style.setProperty('--_rows', `repeat(${rows}, 1fr)`)\n        : host.style.removeProperty('--_rows');\n    });\n    // Grid template areas (responsive)\n    effect(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-grid',\n});\n"],"mappings":"mPAGA,IAAM,EAAiF,CACrF,CAAC,UAAW,oBAAoB,CAChC,CAAC,SAAU,mBAAmB,CAC9B,CAAC,SAAU,mBAAmB,CAC9B,CAAC,SAAU,mBAAmB,CAC9B,CAAC,SAAU,mBAAmB,CAC/B,CAEK,EAA4F,CAChG,CAAC,WAAY,oBAAoB,CACjC,CAAC,UAAW,mBAAmB,CAC/B,CAAC,UAAW,mBAAmB,CAC/B,CAAC,UAAW,mBAAmB,CAC/B,CAAC,UAAW,mBAAmB,CAChC,CAEK,GAAa,EAAmB,EAAiB,IAA6B,CAClF,IAAM,EAAM,iBAAiB,EAAK,CAAC,iBAAiB,EAAQ,CAAC,MAAM,CAC7D,EAAS,OAAO,WAAW,EAAI,CAErC,OAAO,OAAO,SAAS,EAAO,CAAG,EAAS,GAGtC,EAAuC,CAC3C,oBAAqB,KACrB,mBAAoB,KACpB,mBAAoB,IACpB,mBAAoB,IACpB,mBAAoB,KACrB,CA4GY,GAAA,EAAA,EAAA,iBAAyC,CACpD,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,MAAO,CAAE,QAAS,GAAI,CACtB,SAAU,CAAE,QAAS,GAAI,CACzB,QAAS,CAAE,QAAS,GAAI,CACxB,QAAS,CAAE,QAAS,GAAI,CACxB,QAAS,CAAE,QAAS,GAAI,CACxB,QAAS,CAAE,QAAS,GAAI,CACxB,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,UAAW,CAAE,QAAS,GAAO,CAC7B,IAAK,CAAE,QAAS,IAAA,GAAW,CAC3B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,YAAa,CAAE,QAAS,GAAI,CAC5B,WAAY,CAAE,QAAS,GAAO,CAC9B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC7B,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAe,EAAgC,EAAqB,IACpE,IAAe,QAAW,CAAC,GAAc,EACpC,2BAA2B,GAAQ,QAAQ,SAG7C,EAAa,UAAU,EAAW,QAAU,KAE/C,MAAmB,CACvB,IAAM,EAAI,EAAK,YACT,EAAa,EAAQ,EAAM,WAAW,MACtC,EAAO,EAAM,YAAY,OAAS,GACpC,EAEJ,IAAK,GAAM,CAAC,EAAK,KAAW,EAC1B,GAAI,GAAK,EAAU,EAAM,EAAQ,EAAa,GAAQ,EAAI,EAAM,GAAK,MAAO,CAC1E,EAAa,EAAM,GAAK,MACxB,MAGJ,IAAe,EAAM,KAAK,OAAS,IAAA,GAEnC,IAAM,EAAY,EAAY,EAAY,EAAY,EAAK,CAG3D,EAAY,EAAK,MAAM,YAAY,UAAW,EAAU,CAAG,EAAK,MAAM,eAAe,UAAU,GAIjG,EAAA,EAAA,YAAa,CAET,EAAM,KAAK,MACX,EAAM,OAAO,MACb,EAAM,OAAO,MACb,EAAM,OAAO,MACb,EAAM,OAAO,MACb,EAAM,QAAQ,MACd,EAAM,WAAW,MACjB,EAAM,YAAY,MAEpB,GAAY,EACZ,CAEF,IAAM,MAAoB,CACxB,IAAM,EAAI,EAAK,YACX,EAAS,GAEb,IAAK,GAAM,CAAC,EAAK,KAAW,EAC1B,GAAI,GAAK,EAAU,EAAM,EAAQ,EAAa,GAAQ,EAAI,EAAM,GAAK,MAAO,CAC1E,EAAS,EAAM,GAAK,MACpB,MAGJ,IAAW,EAAM,MAAM,OAAS,GAEhC,EAAS,EAAK,MAAM,YAAY,sBAAuB,EAAO,CAAG,EAAK,MAAM,eAAe,sBAAsB,EAmCnH,OA/BA,EAAA,EAAA,aAAc,CACZ,IAAM,EAAO,EAAA,EAAc,EAAK,EAEhC,EAAA,EAAA,YAAa,CACN,EAAK,MACV,GAAY,CACZ,GAAa,EACb,EACF,EAEF,EAAA,EAAA,YAAa,CACX,IAAM,EAAO,EAAM,KAAK,MAGxB,GAAQ,IAAS,OACb,EAAK,MAAM,YAAY,UAAW,UAAU,EAAK,QAAQ,CACzD,EAAK,MAAM,eAAe,UAAU,EACxC,EAEF,EAAA,EAAA,YAAa,CAET,EAAM,MAAM,MACZ,EAAM,QAAQ,MACd,EAAM,QAAQ,MACd,EAAM,QAAQ,MACd,EAAM,QAAQ,MACd,EAAM,SAAS,MAEjB,GAAa,EACb,CAEK,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CAChB,IAAK,WACN,CAAC"}
+{"version":3,"file":"grid.cjs","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, effect, html, onMount } from '@vielzeug/craftit';\nimport { resizeObserver } from '@vielzeug/craftit/observers';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\nimport styles from './grid.css?inline';\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type BitGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * bit-grid — Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element bit-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <bit-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </bit-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <bit-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </bit-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <bit-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </bit-grid>\n */\nexport const GRID_TAG = define<BitGridProps>('bit-grid', {\n  props: {\n    align: undefined,\n    areas: '',\n    areas2xl: '',\n    areasLg: '',\n    areasMd: '',\n    areasSm: '',\n    areasXl: '',\n    cols: undefined,\n    cols2xl: undefined,\n    colsLg: undefined,\n    colsMd: undefined,\n    colsSm: undefined,\n    colsXl: undefined,\n    flow: undefined,\n    fullwidth: false,\n    gap: undefined,\n    justify: undefined,\n    minColWidth: '',\n    responsive: false,\n    rows: undefined,\n  },\n  setup({ host, props }) {\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = host.el.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(host.el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      colsValue ? host.el.style.setProperty('--_cols', colsValue) : host.el.style.removeProperty('--_cols');\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    effect(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = host.el.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(host.el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      active\n        ? host.el.style.setProperty('grid-template-areas', active)\n        : host.el.style.removeProperty('grid-template-areas');\n    };\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMount(() => {\n      const size = resizeObserver(host.el);\n\n      effect(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n    // Rows\n    effect(() => {\n      const rows = props.rows.value;\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      rows && rows !== 'auto'\n        ? host.el.style.setProperty('--_rows', `repeat(${rows}, 1fr)`)\n        : host.el.style.removeProperty('--_rows');\n    });\n    // Grid template areas (responsive)\n    effect(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/grid.js

@@ -1,7 +1,6 @@
-import { n as e } from "./craftit/dist/labs/observers.js";
-import "./craftit/dist/labs.js";
+import { n as e } from "./packages/craftit/dist/observers/resize-observe.js";
 import t from "./layout/grid/grid.css?inline.js";
-import { defineComponent as n, effect as r, html as i, onMount as a } from "@vielzeug/craftit";
+import { define as n, effect as r, html as i, onMount as a } from "@vielzeug/craftit";
 //#region src/layout/grid/grid.ts
 var o = [
 	["cols2xl", "--size-screen-2xl"],
@@ -24,65 +23,64 @@ var o = [
 	"--size-screen-md": 768,
 	"--size-screen-sm": 640,
 	"--size-screen-xl": 1280
-}, u = n({
+}, u = n("bit-grid", {
 	props: {
-		align: { default: void 0 },
-		areas: { default: "" },
-		areas2xl: { default: "" },
-		areasLg: { default: "" },
-		areasMd: { default: "" },
-		areasSm: { default: "" },
-		areasXl: { default: "" },
-		cols: { default: void 0 },
-		cols2xl: { default: void 0 },
-		colsLg: { default: void 0 },
-		colsMd: { default: void 0 },
-		colsSm: { default: void 0 },
-		colsXl: { default: void 0 },
-		flow: { default: void 0 },
-		fullwidth: { default: !1 },
-		gap: { default: void 0 },
-		justify: { default: void 0 },
-		minColWidth: { default: "" },
-		responsive: { default: !1 },
-		rows: { default: void 0 }
+		align: void 0,
+		areas: "",
+		areas2xl: "",
+		areasLg: "",
+		areasMd: "",
+		areasSm: "",
+		areasXl: "",
+		cols: void 0,
+		cols2xl: void 0,
+		colsLg: void 0,
+		colsMd: void 0,
+		colsSm: void 0,
+		colsXl: void 0,
+		flow: void 0,
+		fullwidth: !1,
+		gap: void 0,
+		justify: void 0,
+		minColWidth: "",
+		responsive: !1,
+		rows: void 0
 	},
 	setup({ host: t, props: n }) {
 		let u = (e, t, n) => e === "auto" || !e && t ? `repeat(auto-fit, minmax(${n || "250px"}, 1fr))` : e ? `repeat(${e}, 1fr)` : null, d = () => {
-			let e = t.offsetWidth, r = !!n.responsive.value, i = n.minColWidth.value ?? "", a;
-			for (let [r, i] of o) if (e >= c(t, i, l[i]) && n[r].value) {
+			let e = t.el.offsetWidth, r = !!n.responsive.value, i = n.minColWidth.value ?? "", a;
+			for (let [r, i] of o) if (e >= c(t.el, i, l[i]) && n[r].value) {
 				a = n[r].value;
 				break;
 			}
 			a ||= n.cols.value || void 0;
 			let s = u(a, r, i);
-			s ? t.style.setProperty("--_cols", s) : t.style.removeProperty("--_cols");
+			s ? t.el.style.setProperty("--_cols", s) : t.el.style.removeProperty("--_cols");
 		};
 		r(() => {
 			n.cols.value, n.colsSm.value, n.colsMd.value, n.colsLg.value, n.colsXl.value, n.cols2xl.value, n.responsive.value, n.minColWidth.value, d();
 		});
 		let f = () => {
-			let e = t.offsetWidth, r = "";
-			for (let [i, a] of s) if (e >= c(t, a, l[a]) && n[i].value) {
+			let e = t.el.offsetWidth, r = "";
+			for (let [i, a] of s) if (e >= c(t.el, a, l[a]) && n[i].value) {
 				r = n[i].value;
 				break;
 			}
-			r ||= n.areas.value || "", r ? t.style.setProperty("grid-template-areas", r) : t.style.removeProperty("grid-template-areas");
+			r ||= n.areas.value || "", r ? t.el.style.setProperty("grid-template-areas", r) : t.el.style.removeProperty("grid-template-areas");
 		};
 		return a(() => {
-			let n = e(t);
+			let n = e(t.el);
 			r(() => {
 				n.value, d(), f();
 			});
 		}), r(() => {
 			let e = n.rows.value;
-			e && e !== "auto" ? t.style.setProperty("--_rows", `repeat(${e}, 1fr)`) : t.style.removeProperty("--_rows");
+			e && e !== "auto" ? t.el.style.setProperty("--_rows", `repeat(${e}, 1fr)`) : t.el.style.removeProperty("--_rows");
 		}), r(() => {
 			n.areas.value, n.areasSm.value, n.areasMd.value, n.areasLg.value, n.areasXl.value, n.areas2xl.value, f();
 		}), i`<slot></slot>`;
 	},
-	styles: [t],
-	tag: "bit-grid"
+	styles: [t]
 });
 //#endregion
 export { u as GRID_TAG };