@vielzeug/buildit 2.0.0

package/dist/inputs/combobox/combobox.d.ts

@@ -0,0 +1,28 @@
+import type { AddEventListeners } from '../../types';
+import '../../feedback/chip/chip';
+import { type BitComboboxEvents } from './combobox.types';
+export type { BitComboboxEvents, BitComboboxOptionProps, BitComboboxProps } from './combobox.types';
+/**
+ * `bit-combobox-option` — A child element of `<bit-combobox>` that represents one option.
+ *
+ * @slot         - Label text for the option.
+ * @slot icon    - Optional leading icon or decoration.
+ */
+export declare const COMBOBOX_OPTION_TAG: string;
+/**
+ * `bit-combobox` — Autocomplete/combobox text input with a filterable listbox.
+ *
+ * Place `<bit-combobox-option>` elements as children to define the available options.
+ * Each option supports a `label` attribute (falls back to text content) and an `icon` named slot.
+ *
+ * @example
+ * ```html
+ * <bit-combobox label="Country" placeholder="Search\u2026">
+ *   <bit-combobox-option value="us">United States</bit-combobox-option>
+ *   <bit-combobox-option value="gb">United Kingdom</bit-combobox-option>
+ *   <bit-combobox-option value="de" disabled>Germany</bit-combobox-option>
+ * </bit-combobox>
+ * ```
+ */
+export declare const COMBOBOX_TAG: AddEventListeners<BitComboboxEvents>;
+//# sourceMappingURL=combobox.d.ts.map

package/dist/inputs/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,0BAA0B,CAAC;AAiBlC,OAAO,EACL,KAAK,iBAAiB,EAIvB,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAUpG;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAe9B,CAAC;AAMH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,EAkoBR,iBAAiB,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/inputs/combobox/combobox.types.d.ts

@@ -0,0 +1,36 @@
+import type { VisualVariant } from '../../types';
+import type { SelectableFieldProps } from '../shared/base-props';
+import type { ChoiceChangeDetail } from '../shared/utils';
+export type BitComboboxEvents = {
+    change: ChoiceChangeDetail;
+    search: {
+        query: string;
+    };
+};
+export type ComboboxOptionItem = {
+    disabled: boolean;
+    iconEl: Element | null;
+    label: string;
+    value: string;
+};
+export type ComboboxSelectionItem = {
+    label: string;
+    value: string;
+};
+export type BitComboboxProps = SelectableFieldProps<Exclude<VisualVariant, 'glass' | 'text' | 'frost'>> & {
+    clearable?: boolean;
+    /** Allow typing a new value to create a new option */
+    creatable?: boolean;
+    /** Show loading state in the dropdown */
+    loading?: boolean;
+    multiple?: boolean;
+    'no-filter'?: boolean;
+    options?: ComboboxOptionItem[];
+};
+export type BitComboboxOptionProps = {
+    disabled?: boolean;
+    /** Explicit label text; falls back to the element's text content. */
+    label?: string;
+    value?: string;
+};
+//# sourceMappingURL=combobox.types.d.ts.map

package/dist/inputs/combobox/combobox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.types.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,GAAG;IACxG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dist/inputs/file-input/file-input.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_font-size:var(--file-input-font-size,var(--text-sm));--_radius:var(--file-input-radius,var(--rounded-lg));--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,var(--color-contrast-300));--_min-height:var(--file-input-min-height,var(--size-36));flex-direction:column;align-items:stretch;display:inline-flex}.file-input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:default;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.dropzone{box-sizing:border-box;gap:var(--size-2);min-height:var(--_min-height);padding:var(--size-6) var(--size-4);text-align:center;cursor:pointer;background:var(--_bg);border:var(--border-2) dashed var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dropzone-content{gap:var(--size-2);pointer-events:none;flex-direction:column;align-items:center;display:flex}.dropzone-icon{color:var(--color-contrast-400);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:flex}.dropzone-title{font-size:var(--_font-size);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--color-contrast-700)}.dropzone-title u{color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;transition:text-decoration-color var(--transition-fast);-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.dropzone-hint{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400)}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.file-list{gap:var(--size-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.file-item{box-sizing:border-box;gap:var(--size-3);padding:var(--size-2) var(--size-3);background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast);align-items:center;display:flex}.file-item:hover{background:var(--color-contrast-100)}.file-icon{color:var(--_theme-focus,var(--color-primary));flex-shrink:0}.file-meta{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.file-name{text-overflow:ellipsis;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-700);white-space:nowrap;overflow:hidden}.file-size{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-remove{padding:var(--size-1);color:var(--color-contrast-400);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-remove:hover{color:var(--color-error);background:var(--color-error-backdrop,color-mix(in srgb, var(--color-error) 12%, transparent))}:host(:not([disabled])) .dropzone:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .dropzone:hover .dropzone-title u{-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));text-decoration-color:var(--_theme-focus,var(--color-primary))}:host(:not([disabled])) .dropzone:focus-visible{border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .dropzone:hover .dropzone-icon,:host(:not([disabled])) .dropzone:focus-visible .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-2px)}:host([drag-over]) .dropzone{background:color-mix(in srgb, var(--_theme-base,var(--color-primary)) 8%, var(--color-canvas));border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([drag-over]) .dropzone .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-4px)scale(1.1)}:host([invalid]) .dropzone{border-color:var(--color-error)}:host([invalid]) .label-outside,.helper-text-error{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .dropzone,:host([variant=solid]) .dropzone{background:var(--color-contrast-50);border-color:var(--color-contrast-300)}:host([variant=flat]) .dropzone{border-color:var(--_theme-border)}:host([variant=flat]) .dropzone:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .dropzone:focus-visible,:host([variant=flat][drag-over]) .dropzone{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .dropzone{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) .dropzone:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .dropzone{background:0 0}:host([variant=ghost]) .dropzone{border-color:var(--color-contrast-200);background:0 0}:host([variant=ghost]) .dropzone:hover{background:var(--color-contrast-100)}}@layer buildit.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
+//# sourceMappingURL=file-input.css?inline.cjs.map

package/dist/inputs/file-input/file-input.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-remove {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in srgb, var(--color-error) 12%, transparent));\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in srgb, var(--_theme-base, var(--color-primary)) 8%, var(--color-canvas));\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-4px) scale(1.1);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) */\n  :host(:not([variant])) .dropzone,\n  :host([variant='solid']) .dropzone {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n  }\n\n  /* Flat */\n  :host([variant='flat']) .dropzone {\n    border-color: var(--_theme-border);\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300));\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) .dropzone {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline */\n  :host([variant='outline']) .dropzone {\n    background: transparent;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) .dropzone {\n    background: transparent;\n    border-color: var(--color-contrast-200);\n  }\n\n  :host([variant='ghost']) .dropzone:hover {\n    background: var(--color-contrast-100);\n  }\n}\n\n@layer buildit.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/file-input/file-input.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/file-input/file-input.css?inline
+var e = "@layer buildit.base{:host{--_font-size:var(--file-input-font-size,var(--text-sm));--_radius:var(--file-input-radius,var(--rounded-lg));--_bg:var(--file-input-bg,var(--color-contrast-100));--_border-color:var(--file-input-border-color,var(--color-contrast-300));--_min-height:var(--file-input-min-height,var(--size-36));flex-direction:column;align-items:stretch;display:inline-flex}.file-input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:default;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.dropzone{box-sizing:border-box;gap:var(--size-2);min-height:var(--_min-height);padding:var(--size-6) var(--size-4);text-align:center;cursor:pointer;background:var(--_bg);border:var(--border-2) dashed var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dropzone-content{gap:var(--size-2);pointer-events:none;flex-direction:column;align-items:center;display:flex}.dropzone-icon{color:var(--color-contrast-400);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:flex}.dropzone-title{font-size:var(--_font-size);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--color-contrast-700)}.dropzone-title u{color:var(--_theme-focus,var(--color-primary));text-underline-offset:2px;transition:text-decoration-color var(--transition-fast);-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.dropzone-hint{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400)}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.file-list{gap:var(--size-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.file-item{box-sizing:border-box;gap:var(--size-3);padding:var(--size-2) var(--size-3);background:var(--color-contrast-50);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast);align-items:center;display:flex}.file-item:hover{background:var(--color-contrast-100)}.file-icon{color:var(--_theme-focus,var(--color-primary));flex-shrink:0}.file-meta{gap:var(--size-0-5);flex-direction:column;flex:1;min-width:0;display:flex}.file-name{text-overflow:ellipsis;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-700);white-space:nowrap;overflow:hidden}.file-size{font-size:var(--text-xs);color:var(--color-contrast-400)}.file-remove{padding:var(--size-1);color:var(--color-contrast-400);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.file-remove:hover{color:var(--color-error);background:var(--color-error-backdrop,color-mix(in srgb, var(--color-error) 12%, transparent))}:host(:not([disabled])) .dropzone:hover{border-color:var(--color-contrast-400)}:host(:not([disabled])) .dropzone:hover .dropzone-title u{-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));-webkit-text-decoration-color:var(--_theme-focus,var(--color-primary));text-decoration-color:var(--_theme-focus,var(--color-primary))}:host(:not([disabled])) .dropzone:focus-visible{border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host(:not([disabled])) .dropzone:hover .dropzone-icon,:host(:not([disabled])) .dropzone:focus-visible .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-2px)}:host([drag-over]) .dropzone{background:color-mix(in srgb, var(--_theme-base,var(--color-primary)) 8%, var(--color-canvas));border-color:var(--_theme-focus,var(--color-primary));box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow))}:host([drag-over]) .dropzone .dropzone-icon{color:var(--_theme-focus,var(--color-primary));transform:translateY(-4px)scale(1.1)}:host([invalid]) .dropzone{border-color:var(--color-error)}:host([invalid]) .label-outside,.helper-text-error{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .dropzone,:host([variant=solid]) .dropzone{background:var(--color-contrast-50);border-color:var(--color-contrast-300)}:host([variant=flat]) .dropzone{border-color:var(--_theme-border)}:host([variant=flat]) .dropzone:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .dropzone:focus-visible,:host([variant=flat][drag-over]) .dropzone{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .dropzone{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) .dropzone:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .dropzone{background:0 0}:host([variant=ghost]) .dropzone{border-color:var(--color-contrast-200);background:0 0}:host([variant=ghost]) .dropzone:hover{background:var(--color-contrast-100)}}@layer buildit.utilities{:host([fullwidth]){width:100%}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=file-input.css?inline.js.map

package/dist/inputs/file-input/file-input.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.css?inline.js","names":[],"sources":["../../../src/inputs/file-input/file-input.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--file-input-font-size, var(--text-sm));\n    --_radius: var(--file-input-radius, var(--rounded-lg));\n    --_bg: var(--file-input-bg, var(--color-contrast-100));\n    --_border-color: var(--file-input-border-color, var(--color-contrast-300));\n    --_min-height: var(--file-input-min-height, var(--size-36));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .file-input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-outside {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--color-contrast-500);\n    cursor: default;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* ========================================\n       Dropzone\n       ======================================== */\n\n  .dropzone {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    min-height: var(--_min-height);\n    padding: var(--size-6) var(--size-4);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: var(--_bg);\n    border: var(--border-2) dashed var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .dropzone-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .dropzone-title {\n    font-size: var(--_font-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-snug);\n    color: var(--color-contrast-700);\n  }\n\n  .dropzone-title u {\n    color: var(--_theme-focus, var(--color-primary));\n    text-decoration: underline;\n    text-decoration-color: transparent;\n    text-underline-offset: 2px;\n    transition: text-decoration-color var(--transition-fast);\n  }\n\n  .dropzone-hint {\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       File List\n       ======================================== */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .file-item {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    padding: var(--size-2) var(--size-3);\n    background: var(--color-contrast-50);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition: background var(--transition-fast);\n  }\n\n  .file-item:hover {\n    background: var(--color-contrast-100);\n  }\n\n  .file-icon {\n    flex-shrink: 0;\n    color: var(--_theme-focus, var(--color-primary));\n  }\n\n  .file-meta {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n  }\n\n  .file-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n    white-space: nowrap;\n  }\n\n  .file-size {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-400);\n  }\n\n  .file-remove {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-1);\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .file-remove:hover {\n    color: var(--color-error);\n    background: var(--color-error-backdrop, color-mix(in srgb, var(--color-error) 12%, transparent));\n  }\n\n  /* ========================================\n       Hover & Focus\n       ======================================== */\n\n  :host(:not([disabled])) .dropzone:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-title u {\n    text-decoration-color: var(--_theme-focus, var(--color-primary));\n  }\n\n  :host(:not([disabled])) .dropzone:focus-visible {\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host(:not([disabled])) .dropzone:hover .dropzone-icon,\n  :host(:not([disabled])) .dropzone:focus-visible .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-2px);\n  }\n\n  /* ========================================\n       Drag-Over State\n       ======================================== */\n\n  :host([drag-over]) .dropzone {\n    background: color-mix(in srgb, var(--_theme-base, var(--color-primary)) 8%, var(--color-canvas));\n    border-color: var(--_theme-focus, var(--color-primary));\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([drag-over]) .dropzone .dropzone-icon {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-4px) scale(1.1);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([invalid]) .dropzone {\n    border-color: var(--color-error);\n  }\n\n  :host([invalid]) .label-outside {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error Text\n       ======================================== */\n\n  .helper-text-error {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) */\n  :host(:not([variant])) .dropzone,\n  :host([variant='solid']) .dropzone {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n  }\n\n  /* Flat */\n  :host([variant='flat']) .dropzone {\n    border-color: var(--_theme-border);\n  }\n\n  :host([variant='flat']) .dropzone:hover {\n    background: color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300));\n  }\n\n  :host([variant='flat']) .dropzone:focus-visible,\n  :host([variant='flat'][drag-over]) .dropzone {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) .dropzone {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) .dropzone:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline */\n  :host([variant='outline']) .dropzone {\n    background: transparent;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) .dropzone {\n    background: transparent;\n    border-color: var(--color-contrast-200);\n  }\n\n  :host([variant='ghost']) .dropzone:hover {\n    background: var(--color-contrast-100);\n  }\n}\n\n@layer buildit.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/file-input/file-input.d.ts

@@ -0,0 +1,94 @@
+import type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';
+/** FileInput component properties */
+export type BitFileInputEvents = {
+    change: {
+        files: File[];
+        originalEvent?: Event;
+        value: File[];
+    };
+    remove: {
+        file: File;
+        files: File[];
+        originalEvent?: Event;
+        value: File[];
+    };
+};
+export type BitFileInputProps = {
+    /** Accepted file types (MIME types or extensions, comma-separated) */
+    accept?: string;
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Error message (marks field as invalid) */
+    error?: string;
+    /** Full width mode */
+    fullwidth?: boolean;
+    /** Helper text */
+    helper?: string;
+    /** Label text */
+    label?: string;
+    /** Maximum number of files (0 = unlimited) */
+    'max-files'?: number;
+    /** Maximum file size in bytes (0 = unlimited) */
+    'max-size'?: number;
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Mark as required */
+    required?: boolean;
+    /** Border radius */
+    rounded?: Exclude<RoundedSize, 'full'>;
+    /** Component size */
+    size?: ComponentSize;
+    /** Visual variant */
+    variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;
+};
+/**
+ * A file upload component with drag-and-drop support, file list management,
+ * and full form integration.
+ *
+ * @element bit-file-input
+ *
+ * @attr {string} accept - Accepted file types (MIME types or extensions, e.g. "image/*,.pdf")
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {boolean} disabled - Disable all interaction
+ * @attr {string} error - Error message
+ * @attr {boolean} fullwidth - Full width mode
+ * @attr {string} helper - Helper text below the dropzone
+ * @attr {string} label - Label text displayed above the dropzone
+ * @attr {number} max-files - Maximum number of files (0 = unlimited)
+ * @attr {number} max-size - Maximum file size in bytes (0 = unlimited)
+ * @attr {boolean} multiple - Allow selecting multiple files
+ * @attr {string} name - Form field name
+ * @attr {boolean} required - Mark as required
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
+ *
+ * @fires change - Emitted when the file selection changes. detail: { value: File[], files: File[], originalEvent?: Event }
+ * @fires remove - Emitted when a file is removed from the list. detail: { value: File[], file: File, files: File[], originalEvent?: Event }
+ *
+ * @part wrapper - The outer wrapper div
+ * @part label - The label element
+ * @part dropzone - The drag-and-drop zone
+ * @part input - The hidden native file input
+ * @part helper - The helper text element
+ * @part error - The error text element
+ *
+ * @cssprop --file-input-bg - Dropzone background color
+ * @cssprop --file-input-border-color - Dropzone border color
+ * @cssprop --file-input-radius - Border radius
+ * @cssprop --file-input-min-height - Minimum dropzone height
+ * @cssprop --file-input-font-size - Font size
+ *
+ * @example
+ * ```html
+ * <bit-file-input label="Upload files" accept="image/*" multiple />
+ * <bit-file-input label="Resume" accept=".pdf,.doc,.docx" max-size="5242880" />
+ * <bit-file-input variant="bordered" color="primary" />
+ * ```
+ */
+export declare const FILE_INPUT_TAG: string;
+//# sourceMappingURL=file-input.d.ts.map

package/dist/inputs/file-input/file-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../../src/inputs/file-input/file-input.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAuDzF,qCAAqC;AAErC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE;QAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAChE,MAAM,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;CAC7E,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACvC,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CAC9D,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,cAAc,QAgQzB,CAAC"}

package/dist/inputs/form/form.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{display:block}form{gap:var(--form-gap,var(--size-4,1rem));align-items:start;display:grid}}@layer buildit.orientation{:host([orientation=horizontal]) form{flex-wrap:wrap;align-items:center;display:flex}}`;exports.default=e;
+//# sourceMappingURL=form.css?inline.cjs.map

package/dist/inputs/form/form.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.css?inline.cjs","names":[],"sources":["../../../src/inputs/form/form.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n  }\n\n  form {\n    display: grid;\n    gap: var(--form-gap, var(--size-4, 1rem));\n    align-items: start;\n  }\n}\n\n@layer buildit.orientation {\n  :host([orientation='horizontal']) form {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/form/form.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/form/form.css?inline
+var e = "@layer buildit.base{:host{display:block}form{gap:var(--form-gap,var(--size-4,1rem));align-items:start;display:grid}}@layer buildit.orientation{:host([orientation=horizontal]) form{flex-wrap:wrap;align-items:center;display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=form.css?inline.js.map

package/dist/inputs/form/form.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.css?inline.js","names":[],"sources":["../../../src/inputs/form/form.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n  }\n\n  form {\n    display: grid;\n    gap: var(--form-gap, var(--size-4, 1rem));\n    align-items: start;\n  }\n}\n\n@layer buildit.orientation {\n  :host([orientation='horizontal']) form {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n}\n"],"mappings":""}

package/dist/inputs/form/form.d.ts

@@ -0,0 +1,61 @@
+import type { ComponentSize, VisualVariant } from '../../types';
+export type BitFormEvents = {
+    reset: {
+        originalEvent: Event;
+    };
+    submit: {
+        formData: FormData;
+        originalEvent: SubmitEvent;
+    };
+};
+export type BitFormProps = {
+    /** Disable all child form fields */
+    disabled?: boolean;
+    /** Native form novalidate */
+    novalidate?: boolean;
+    /** Form layout orientation */
+    orientation?: 'vertical' | 'horizontal';
+    /** Default size for all child fields */
+    size?: ComponentSize;
+    /**
+     * When to validate child form controls.
+     * - `'submit'` (default): validate only when the form is submitted
+     * - `'blur'`: validate each field as it loses focus
+     * - `'change'`: validate on every value change (most immediate feedback)
+     */
+    validateOn?: 'submit' | 'blur' | 'change';
+    /** Default variant for all child fields */
+    variant?: Exclude<VisualVariant, 'glass' | 'frost' | 'text'>;
+};
+/**
+ * `bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`
+ * context to all child `bit-*` form fields. Intercepts submit/reset events.
+ *
+ * @element bit-form
+ *
+ * @attr {boolean} disabled - Disable all child form fields
+ * @attr {string} size - Default size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Default visual variant for child fields
+ * @attr {string} orientation - Layout direction: 'vertical' | 'horizontal'
+ * @attr {boolean} novalidate - Skip native browser validation
+ *
+ * @fires submit - Fired on form submit; detail contains `formData` and `originalEvent`
+ * @fires reset  - Fired on form reset; detail contains `originalEvent`
+ *
+ * @slot - Form content (bit-input, bit-select, etc.)
+ *
+ * @cssprop --form-gap - Spacing between child form controls
+ *
+ * @example
+ * ```html
+ * <bit-form id="my-form" size="sm" variant="flat">
+ *   <bit-input name="email" label="Email" type="email"></bit-input>
+ *   <bit-select name="role" label="Role">
+ *     <option value="admin">Admin</option>
+ *   </bit-select>
+ *   <bit-button type="submit">Submit</bit-button>
+ * </bit-form>
+ * ```
+ */
+export declare const FORM_TAG: string;
+//# sourceMappingURL=form.d.ts.map

package/dist/inputs/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/inputs/form/form.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYhE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAA;KAAE,CAAC;IAChC,MAAM,EAAE;QAAE,QAAQ,EAAE,QAAQ,CAAC;QAAC,aAAa,EAAE,WAAW,CAAA;KAAE,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1C,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,QAAQ,QAgDnB,CAAC"}

package/dist/inputs/index.cjs

@@ -0,0 +1 @@
+require(`../button-group.cjs`),require(`../button.cjs`),require(`./shared/form-context.cjs`),require(`../checkbox-group.cjs`),require(`../checkbox.cjs`),require(`../combobox.cjs`),require(`../file-input.cjs`),require(`../form.cjs`),require(`../input.cjs`),require(`../number-input.cjs`),require(`../otp-input.cjs`),require(`../radio-group.cjs`),require(`../radio.cjs`),require(`../rating.cjs`),require(`../select.cjs`),require(`../slider.cjs`),require(`../switch.cjs`),require(`../textarea.cjs`);

package/dist/inputs/index.d.ts

@@ -0,0 +1,38 @@
+export { BUTTON_GROUP_CTX, BUTTON_GROUP_TAG } from './button-group/button-group';
+export type { BitButtonGroupProps, ButtonGroupContext } from './button-group/button-group';
+export { BUTTON_TAG } from './button/button';
+export type { BitButtonProps } from './button/button';
+export { CHECKBOX_GROUP_CTX, CHECKBOX_GROUP_TAG } from './checkbox-group/checkbox-group';
+export type { BitCheckboxGroupEvents, BitCheckboxGroupProps } from './checkbox-group/checkbox-group';
+export { CHECKBOX_TAG } from './checkbox/checkbox';
+export type { BitCheckboxEvents, BitCheckboxProps } from './checkbox/checkbox';
+export { COMBOBOX_OPTION_TAG, COMBOBOX_TAG } from './combobox/combobox';
+export type { BitComboboxEvents, BitComboboxOptionProps, BitComboboxProps } from './combobox/combobox';
+export { FILE_INPUT_TAG } from './file-input/file-input';
+export type { BitFileInputEvents, BitFileInputProps } from './file-input/file-input';
+export { FORM_TAG } from './form/form';
+export type { BitFormEvents, BitFormProps } from './form/form';
+export { INPUT_TAG } from './input/input';
+export type { BitInputEvents, BitInputProps } from './input/input';
+export { NUMBER_INPUT_TAG } from './number-input/number-input';
+export type { BitNumberInputEvents, BitNumberInputProps } from './number-input/number-input';
+export { OTP_INPUT_TAG } from './otp-input/otp-input';
+export type { BitOtpInputEvents, BitOtpInputProps } from './otp-input/otp-input';
+export { RADIO_GROUP_CTX, RADIO_GROUP_TAG } from './radio-group/radio-group';
+export type { BitRadioGroupEvents, BitRadioGroupProps } from './radio-group/radio-group';
+export { RADIO_TAG } from './radio/radio';
+export type { BitRadioEvents, BitRadioProps } from './radio/radio';
+export { RATING_TAG } from './rating/rating';
+export type { BitRatingEvents, BitRatingProps } from './rating/rating';
+export { SELECT_TAG } from './select/select';
+export type { BitSelectEvents, BitSelectProps } from './select/select';
+export { SLIDER_TAG } from './slider/slider';
+export type { BitSliderEvents, BitSliderProps } from './slider/slider';
+export { SWITCH_TAG } from './switch/switch';
+export type { BitSwitchEvents, BitSwitchProps } from './switch/switch';
+export { TEXTAREA_TAG } from './textarea/textarea';
+export type { BitTextareaEvents, BitTextareaProps } from './textarea/textarea';
+export { FORM_CTX } from './shared/form-context';
+export type { FormContext } from './shared/form-context';
+export type { BaseFormProps, SelectableFieldProps, TextFieldProps } from './shared/base-props';
+//# sourceMappingURL=index.d.ts.map

package/dist/inputs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACzF,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxE,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC7E,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/inputs/index.js

@@ -0,0 +1,18 @@
+import "../button-group.js";
+import "../button.js";
+import "./shared/form-context.js";
+import "../checkbox-group.js";
+import "../checkbox.js";
+import "../combobox.js";
+import "../file-input.js";
+import "../form.js";
+import "../input.js";
+import "../number-input.js";
+import "../otp-input.js";
+import "../radio-group.js";
+import "../radio.js";
+import "../rating.js";
+import "../select.js";
+import "../slider.js";
+import "../switch.js";
+import "../textarea.js";

package/dist/inputs/input/input.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow,var(--shadow-2xs));transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-slow), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.field:has(.label-inset:not([hidden])){height:auto}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label-inset,.label-outside,label.label-inset,label.label-outside{text-overflow:ellipsis;font-weight:var(--font-medium);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));overflow:hidden}.label-inset,label.label-inset{font-size:var(--text-xs);line-height:var(--leading-tight);margin-bottom:2px}.label-outside,label.label-outside{font-size:var(--text-sm);line-height:var(--leading-none)}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);overflow-wrap:anywhere;padding-left:2px;padding-right:2px}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer buildit.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow));transform:translateY(-1px)}:host(:not([disabled])) .field:focus-within .label-inset,:host(:not([disabled])) .field:focus-within .label-outside,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.char-counter:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=""])) .label-inset,:host([error]:not([error=""])) .label-outside,.helper-text[role=alert]{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .field,:host([variant=solid]) .field{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]) .field{border-color:var(--_theme-border);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .field:focus-within{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .field{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) input{color:var(--color-contrast-900)}:host([variant=bordered]) input::placeholder{color:var(--_placeholder)}:host([variant=bordered]) .field:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .field{box-shadow:none;background:0 0}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]) .field{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .field:hover{background:var(--color-contrast-100)}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;background:0 0;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--_theme-focus);transform:none}}@layer buildit.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
+//# sourceMappingURL=input.css?inline.cjs.map

package/dist/inputs/input/input.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.css?inline.cjs","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow, var(--shadow-2xs));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-fast),\n      backdrop-filter var(--transition-slow),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast)\n    );\n  }\n\n  /* Expand height to fit inset label + input row */\n  .field:has(.label-inset:not([hidden])) {\n    height: auto;\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label-inset,\n  .label-outside,\n  label.label-inset,\n  label.label-outside {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .label-inset,\n  label.label-inset {\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n  }\n\n  .label-outside,\n  label.label-outside {\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    overflow-wrap: anywhere;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer buildit.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n    transform: translateY(-1px);\n  }\n\n  :host(:not([disabled])) .field:focus-within .label-inset,\n  :host(:not([disabled])) .field:focus-within .label-outside {\n    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) - Standard input with background */\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat - Minimal with subtle color hint */\n  :host([variant='flat']) .field {\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300));\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered - Filled with theme color */\n  :host([variant='bordered']) .field {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) input {\n    color: var(--color-contrast-900);\n  }\n\n  :host([variant='bordered']) input::placeholder {\n    color: var(--_placeholder);\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline - Transparent background */\n  :host([variant='outline']) .field {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost - Transparent until hover */\n  :host([variant='ghost']) .field {\n    background: transparent;\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Text - Underline style */\n  :host([variant='text']) .field {\n    background: transparent;\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--_theme-focus);\n    transform: none;\n  }\n}\n\n@layer buildit.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/input/input.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/input/input.css?inline
+var e = "@layer buildit.base{:host{--_font-size:var(--input-font-size,var(--text-sm));--_gap:var(--input-gap,var(--size-2));--_field-height:var(--input-height,var(--size-10));--_padding:var(--input-padding,var(--size-1-5) var(--size-3));--_radius:var(--input-radius,var(--rounded-lg));--_placeholder:var(--input-placeholder-color,var(--color-contrast-500));--_bg:var(--input-bg,var(--color-contrast-100));--_border-color:var(--input-border-color,var(--color-contrast-300));flex-direction:column;align-items:stretch;display:inline-flex}.input-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:var(--_field-height);padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow,var(--shadow-2xs));transition:var(--_motion-transition,background var(--transition-fast), backdrop-filter var(--transition-slow), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex}.field:has(.label-inset:not([hidden])){height:auto}.input-row{gap:var(--_gap);flex:1;align-items:center;display:flex}.label-inset,.label-outside,label.label-inset,label.label-outside{text-overflow:ellipsis;font-weight:var(--font-medium);color:var(--color-contrast-500);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--_motion-transition,color var(--transition-fast));overflow:hidden}.label-inset,label.label-inset{font-size:var(--text-xs);line-height:var(--leading-tight);margin-bottom:2px}.label-outside,label.label-outside{font-size:var(--text-sm);line-height:var(--leading-none)}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);overflow-wrap:anywhere;padding-left:2px;padding-right:2px}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer buildit.overrides{input{min-width:0;font:inherit;font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--color-contrast-900);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}input:focus-visible{outline:none}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow));transform:translateY(-1px)}:host(:not([disabled])) .field:focus-within .label-inset,:host(:not([disabled])) .field:focus-within .label-outside,:host(:not([disabled])) .field:focus-within ::slotted([slot=prefix]),:host(:not([disabled])) .field:focus-within ::slotted([slot=suffix]){color:var(--_theme-focus)}.clear-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.clear-btn:hover{color:var(--color-contrast-900)}.clear-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([clearable]) .clear-btn{display:flex}:host([clearable]:not([has-value])) .clear-btn{visibility:hidden;pointer-events:none}.pwd-toggle-btn{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:var(--_motion-transition,color var(--transition-fast));background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.pwd-toggle-btn:hover{color:var(--color-contrast-900)}.pwd-toggle-btn:focus-visible{outline:var(--border-2) solid var(--_theme-focus);outline-offset:var(--border)}:host([type=password]) .pwd-toggle-btn{display:flex}.char-counter{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);white-space:nowrap;padding-left:2px;padding-right:2px}.char-counter:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.char-counter:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.char-counter[data-near-limit]{color:var(--color-warning,#f59e0b)}.char-counter[data-at-limit]{color:var(--color-error)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=\"\"])) .label-inset,:host([error]:not([error=\"\"])) .label-outside,.helper-text[role=alert]{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .field,:host([variant=solid]) .field{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]) .field{border-color:var(--_theme-border);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .field:focus-within{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .field{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) input{color:var(--color-contrast-900)}:host([variant=bordered]) input::placeholder{color:var(--_placeholder)}:host([variant=bordered]) .field:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .field{box-shadow:none;background:0 0}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]) .field{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .field:hover{background:var(--color-contrast-100)}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=text]) .field{border:none;border-bottom:var(--border) solid var(--_border-color);box-shadow:none;background:0 0;border-radius:0}:host([variant=text]) .field:focus-within{border-bottom:var(--border-2) solid var(--_theme-focus);transform:none}}@layer buildit.utilities{:host([fullwidth]){width:100%}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=input.css?inline.js.map

package/dist/inputs/input/input.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.css?inline.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow, var(--shadow-2xs));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-fast),\n      backdrop-filter var(--transition-slow),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast)\n    );\n  }\n\n  /* Expand height to fit inset label + input row */\n  .field:has(.label-inset:not([hidden])) {\n    height: auto;\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label-inset,\n  .label-outside,\n  label.label-inset,\n  label.label-outside {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .label-inset,\n  label.label-inset {\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n  }\n\n  .label-outside,\n  label.label-outside {\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    overflow-wrap: anywhere;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer buildit.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n    transform: translateY(-1px);\n  }\n\n  :host(:not([disabled])) .field:focus-within .label-inset,\n  :host(:not([disabled])) .field:focus-within .label-outside {\n    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) - Standard input with background */\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat - Minimal with subtle color hint */\n  :host([variant='flat']) .field {\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300));\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered - Filled with theme color */\n  :host([variant='bordered']) .field {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) input {\n    color: var(--color-contrast-900);\n  }\n\n  :host([variant='bordered']) input::placeholder {\n    color: var(--_placeholder);\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline - Transparent background */\n  :host([variant='outline']) .field {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost - Transparent until hover */\n  :host([variant='ghost']) .field {\n    background: transparent;\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Text - Underline style */\n  :host([variant='text']) .field {\n    background: transparent;\n    border: none;\n    border-bottom: var(--border) solid var(--_border-color);\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    border-bottom: var(--border-2) solid var(--_theme-focus);\n    transform: none;\n  }\n}\n\n@layer buildit.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/input/input.d.ts

@@ -0,0 +1,82 @@
+import type { InputType, VisualVariant } from '../../types';
+import type { TextFieldProps } from '../shared/base-props';
+/** Input component properties */
+export type BitInputEvents = {
+    change: {
+        originalEvent: Event;
+        value: string;
+    };
+    input: {
+        originalEvent: Event;
+        value: string;
+    };
+};
+export type BitInputProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost'>> & {
+    /** Autocomplete hint */
+    autocomplete?: string;
+    /** Show a clear (×) button when the field has a value */
+    clearable?: boolean;
+    /** Virtual keyboard hint for mobile devices */
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Maximum character length — shows a counter below the input */
+    maxlength?: number;
+    /** Minimum character length */
+    minlength?: number;
+    /** HTML pattern attribute for client-side validation */
+    pattern?: string;
+    /** HTML input type */
+    type?: InputType;
+};
+/**
+ * A customizable text input component with multiple variants, label placements, and form features.
+ *
+ * @element bit-input
+ *
+ * @attr {string} label - Label text
+ * @attr {string} label-placement - Label placement: 'inset' | 'outside'
+ * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
+ * @attr {string} value - Current input value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} name - Form field name
+ * @attr {string} helper - Helper text displayed below the input
+ * @attr {string} error - Error message (marks field as invalid)
+ * @attr {boolean} disabled - Disable input interaction
+ * @attr {boolean} readonly - Make the input read-only
+ * @attr {boolean} required - Mark the field as required
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'
+ * @attr {string} size - Input size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ *
+ * @fires input - Emitted when input value changes (on every keystroke)
+ * @fires change - Emitted when input loses focus with changed value
+ *
+ * @slot prefix - Content before the input (e.g., icons)
+ * @slot suffix - Content after the input (e.g., clear button, validation icon)
+ * @slot helper - Complex helper content below the input
+ *
+ * @part wrapper - The input wrapper element
+ * @part label - The label element (inset or outside)
+ * @part field - The field container element
+ * @part input-row - The input row container element
+ * @part input - The input element
+ * @part helper - The helper text element
+ *
+ * @cssprop --input-bg - Background color
+ * @cssprop --input-color - Text color
+ * @cssprop --input-border-color - Border color
+ * @cssprop --input-focus - Focus border color
+ * @cssprop --input-placeholder-color - Placeholder text color
+ * @cssprop --input-radius - Border radius
+ * @cssprop --input-padding - Inner padding (vertical horizontal)
+ * @cssprop --input-gap - Gap between prefix/suffix and input
+ * @cssprop --input-font-size - Font size
+ *
+ * @example
+ * ```html
+ * <bit-input type="email" label="Email" placeholder="you@example.com" />
+ * <bit-input label="Name" variant="bordered" color="primary" />
+ * ```
+ */
+export declare const INPUT_TAG: string;
+//# sourceMappingURL=input.d.ts.map

package/dist/inputs/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAU3D,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC,GAAG;IACtF,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,SAAS,QA4MpB,CAAC"}

package/dist/inputs/number-input/number-input.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{width:fit-content;display:inline-flex}:host([fullwidth]){width:100%}.wrapper{gap:var(--size-1);align-items:center;width:100%;display:inline-flex}bit-input::part(input){text-align:center}bit-input{width:var(--size-20)}:host([fullwidth]) bit-input{flex:1;width:auto;min-width:0}}`;exports.default=e;
+//# sourceMappingURL=number-input.css?inline.cjs.map

package/dist/inputs/number-input/number-input.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: inline-flex;\n    width: fit-content;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .wrapper {\n    display: inline-flex;\n    gap: var(--size-1);\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Style the inner <input> through bit-input's exported part */\n  bit-input::part(input) {\n    text-align: center;\n  }\n\n  bit-input {\n    width: var(--size-20);\n  }\n\n  :host([fullwidth]) bit-input {\n    flex: 1;\n    width: auto;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/inputs/number-input/number-input.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/number-input/number-input.css?inline
+var e = "@layer buildit.base{:host{width:fit-content;display:inline-flex}:host([fullwidth]){width:100%}.wrapper{gap:var(--size-1);align-items:center;width:100%;display:inline-flex}bit-input::part(input){text-align:center}bit-input{width:var(--size-20)}:host([fullwidth]) bit-input{flex:1;width:auto;min-width:0}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=number-input.css?inline.js.map