@vielzeug/buildit 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.css?inline.js","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.d.ts

@@ -0,0 +1,76 @@
+import type { DisablableProps, SizableProps, ThemableProps, VisualVariant } from '../../types';
+import '../button/button';
+import '../input/input';
+export type BitNumberInputEvents = {
+    change: {
+        originalEvent?: Event;
+        value: number | null;
+    };
+    input: {
+        originalEvent?: Event;
+        value: number | null;
+    };
+};
+/** Number Input props */
+export type BitNumberInputProps = ThemableProps & SizableProps & DisablableProps & {
+    /** Stretch to full width of container */
+    fullwidth?: boolean;
+    /** Visible label */
+    label?: string;
+    /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */
+    'label-placement'?: 'inset' | 'outside';
+    /** Large step (for Page Up/Down, default: 10 × step) */
+    'large-step'?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Minimum allowed value */
+    min?: number;
+    name?: string;
+    /** Allow null/empty value */
+    nullable?: boolean;
+    /** Form field name */
+    /** Placeholder text */
+    placeholder?: string;
+    /** Make the input read-only */
+    readonly?: boolean;
+    /** Step size for increment/decrement */
+    step?: number;
+    /** Current numeric value */
+    value?: number;
+    /** Visual variant */
+    variant?: VisualVariant;
+};
+/**
+ * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.
+ *
+ * @element bit-number-input
+ *
+ * @attr {number} value - Current value
+ * @attr {number} min - Minimum value
+ * @attr {number} max - Maximum value
+ * @attr {number} step - Increment/decrement step (default: 1)
+ * @attr {number} large-step - Step for Page Up/Down (default: 10)
+ * @attr {boolean} disabled - Disables the control
+ * @attr {boolean} readonly - Read-only mode
+ * @attr {string} label - Visible label
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {string} placeholder - Input placeholder
+ *
+ * @fires change - On committed value change. detail: { value: number | null, originalEvent?: Event }
+ * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }
+ *
+ * @cssprop --number-input-height - Control height
+ * @cssprop --number-input-border-color - Border color
+ * @cssprop --number-input-radius - Border radius
+ * @cssprop --number-input-bg - Background
+ * @cssprop --number-input-btn-bg - Spin button background
+ *
+ * @example
+ * ```html
+ * <bit-number-input label="Quantity" value="1" min="1" max="99" step="1"></bit-number-input>
+ * ```
+ */
+export declare const NUMBER_INPUT_TAG: string;
+//# sourceMappingURL=number-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/inputs/number-input/number-input.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK/F,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAGxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CACxD,CAAC;AAEF,yBAAyB;AACzB,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAC7C,YAAY,GACZ,eAAe,GAAG;IAChB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oGAAoG;IACpG,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IAEtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,gBAAgB,QA+M3B,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_cell-size:var(--otp-cell-size,var(--size-12));--_cell-gap:var(--otp-cell-gap,var(--size-2));--_cell-font-size:var(--otp-cell-font-size,var(--text-xl));--_cell-radius:var(--otp-cell-radius,var(--rounded-lg));--_cell-border:var(--otp-cell-border,var(--border));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300));--_cell-bg:var(--otp-cell-bg,var(--color-canvas));--_cell-focus-border:var(--otp-cell-focus-border,var(--_theme-base,var(--color-contrast-700)));gap:var(--size-1);flex-direction:column;display:inline-flex}.otp-group{gap:var(--_cell-gap);align-items:center;display:flex}.cell{box-sizing:border-box;width:var(--_cell-size);height:var(--_cell-size);font-size:var(--_cell-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;caret-color:var(--_cell-focus-border);background:var(--_cell-bg);border:var(--_cell-border) solid var(--_cell-border-color);border-radius:var(--_cell-radius);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:0;line-height:1;display:block}.cell::selection{background:var(--_theme-backdrop,var(--color-contrast-100))}.cell:focus{border-color:var(--_cell-focus-border);box-shadow:0 0 0 var(--border-2) color-mix(in srgb, var(--_cell-focus-border) 20%, transparent);outline:none}.cell:disabled{cursor:not-allowed;opacity:.5}.separator{font-size:var(--_cell-font-size);color:var(--color-contrast-400);-webkit-user-select:none;user-select:none}}@layer buildit.variants{:host(:not([variant])) .cell,:host([variant=solid]) .cell{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host([variant=flat]) .cell{background:var(--color-contrast-100);border-color:var(--_theme-border,var(--color-contrast-200));box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .cell:hover:not(:disabled){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]) .cell:focus{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_cell-focus-border) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .cell{color:var(--_theme-content,var(--color-contrast-900));caret-color:var(--_theme-content,var(--_cell-focus-border));background:var(--_theme-backdrop,var(--color-contrast-50));border-color:color-mix(in srgb, var(--_cell-focus-border) 70%, transparent)}:host([variant=bordered][color=secondary]) .cell{color:var(--_theme-base);caret-color:var(--_theme-base)}:host([variant=bordered]) .cell:hover:not(:disabled){border-color:var(--_cell-focus-border)}:host([variant=outline]) .cell{box-shadow:none;background:0 0}:host([variant=ghost]) .cell{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .cell:hover:not(:disabled){background:var(--color-contrast-100)}}@layer buildit.utilities{:host([size=sm]){--_cell-size:var(--size-9);--_cell-font-size:var(--text-base)}:host([size=lg]){--_cell-size:var(--size-14);--_cell-font-size:var(--text-2xl)}}`;exports.default=e;
+//# sourceMappingURL=otp-input.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.css?inline.cjs","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in srgb, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (default) */\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) .cell {\n    background: var(--color-contrast-100);\n    border-color: var(--_theme-border, var(--color-contrast-200));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\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']) .cell:focus {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_cell-focus-border) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-content, var(--color-contrast-900));\n    caret-color: var(--_theme-content, var(--_cell-focus-border));\n    background: var(--_theme-backdrop, var(--color-contrast-50));\n    border-color: color-mix(in srgb, var(--_cell-focus-border) 70%, transparent);\n  }\n\n  :host([variant='bordered'][color='secondary']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--_cell-focus-border);\n  }\n\n  /* Outline */\n  :host([variant='outline']) .cell {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) .cell {\n    background: transparent;\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--color-contrast-100);\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/otp-input/otp-input.css?inline
+var e = "@layer buildit.base{:host{--_cell-size:var(--otp-cell-size,var(--size-12));--_cell-gap:var(--otp-cell-gap,var(--size-2));--_cell-font-size:var(--otp-cell-font-size,var(--text-xl));--_cell-radius:var(--otp-cell-radius,var(--rounded-lg));--_cell-border:var(--otp-cell-border,var(--border));--_cell-border-color:var(--otp-cell-border-color,var(--color-contrast-300));--_cell-bg:var(--otp-cell-bg,var(--color-canvas));--_cell-focus-border:var(--otp-cell-focus-border,var(--_theme-base,var(--color-contrast-700)));gap:var(--size-1);flex-direction:column;display:inline-flex}.otp-group{gap:var(--_cell-gap);align-items:center;display:flex}.cell{box-sizing:border-box;width:var(--_cell-size);height:var(--_cell-size);font-size:var(--_cell-font-size);font-weight:var(--font-semibold);color:var(--color-contrast-900);text-align:center;caret-color:var(--_cell-focus-border);background:var(--_cell-bg);border:var(--_cell-border) solid var(--_cell-border-color);border-radius:var(--_cell-radius);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:0;line-height:1;display:block}.cell::selection{background:var(--_theme-backdrop,var(--color-contrast-100))}.cell:focus{border-color:var(--_cell-focus-border);box-shadow:0 0 0 var(--border-2) color-mix(in srgb, var(--_cell-focus-border) 20%, transparent);outline:none}.cell:disabled{cursor:not-allowed;opacity:.5}.separator{font-size:var(--_cell-font-size);color:var(--color-contrast-400);-webkit-user-select:none;user-select:none}}@layer buildit.variants{:host(:not([variant])) .cell,:host([variant=solid]) .cell{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host([variant=flat]) .cell{background:var(--color-contrast-100);border-color:var(--_theme-border,var(--color-contrast-200));box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .cell:hover:not(:disabled){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]) .cell:focus{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_cell-focus-border) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .cell{color:var(--_theme-content,var(--color-contrast-900));caret-color:var(--_theme-content,var(--_cell-focus-border));background:var(--_theme-backdrop,var(--color-contrast-50));border-color:color-mix(in srgb, var(--_cell-focus-border) 70%, transparent)}:host([variant=bordered][color=secondary]) .cell{color:var(--_theme-base);caret-color:var(--_theme-base)}:host([variant=bordered]) .cell:hover:not(:disabled){border-color:var(--_cell-focus-border)}:host([variant=outline]) .cell{box-shadow:none;background:0 0}:host([variant=ghost]) .cell{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .cell:hover:not(:disabled){background:var(--color-contrast-100)}}@layer buildit.utilities{:host([size=sm]){--_cell-size:var(--size-9);--_cell-font-size:var(--text-base)}:host([size=lg]){--_cell-size:var(--size-14);--_cell-font-size:var(--text-2xl)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=otp-input.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.css?inline.js","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n    --_cell-border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_cell-bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_cell-bg);\n    border: var(--_cell-border) solid var(--_cell-border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n    box-shadow: 0 0 0 var(--border-2) color-mix(in srgb, var(--_cell-focus-border) 20%, transparent);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (default) */\n  :host(:not([variant])) .cell,\n  :host([variant='solid']) .cell {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n    box-shadow: var(--shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']) .cell {\n    background: var(--color-contrast-100);\n    border-color: var(--_theme-border, var(--color-contrast-200));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .cell:hover:not(:disabled) {\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']) .cell:focus {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_cell-focus-border) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) .cell {\n    color: var(--_theme-content, var(--color-contrast-900));\n    caret-color: var(--_theme-content, var(--_cell-focus-border));\n    background: var(--_theme-backdrop, var(--color-contrast-50));\n    border-color: color-mix(in srgb, var(--_cell-focus-border) 70%, transparent);\n  }\n\n  :host([variant='bordered'][color='secondary']) .cell {\n    color: var(--_theme-base);\n    caret-color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) .cell:hover:not(:disabled) {\n    border-color: var(--_cell-focus-border);\n  }\n\n  /* Outline */\n  :host([variant='outline']) .cell {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) .cell {\n    background: transparent;\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .cell:hover:not(:disabled) {\n    background: var(--color-contrast-100);\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,71 @@
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+export type BitOtpInputEvents = {
+    change: {
+        complete: boolean;
+        originalEvent?: Event;
+        value: string;
+    };
+    complete: {
+        originalEvent?: Event;
+        value: string;
+    };
+};
+/** OTP Input props */
+export type BitOtpInputProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Make inputs disabled */
+    disabled?: boolean;
+    /** Accessible label */
+    label?: string;
+    /** Number of input cells */
+    length?: number;
+    /** Mask input (show dots instead of characters) */
+    masked?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Show a separator in the middle (e.g. "–") */
+    separator?: string;
+    /** Component size */
+    size?: ComponentSize;
+    /** Input type: 'numeric' (digits only) or 'alphanumeric' */
+    type?: 'numeric' | 'alphanumeric';
+    /** Current value */
+    value?: string;
+    /** Visual variant */
+    variant?: Exclude<VisualVariant, 'text' | 'frost' | 'glass'>;
+};
+/**
+ * A segmented OTP (One-Time Password) input with N individual cells.
+ * Auto-advances focus on input, auto-backs on Backspace, handles paste.
+ *
+ * @element bit-otp-input
+ *
+ * @attr {number} length - Number of cells (default: 6)
+ * @attr {string} type - 'numeric' (default) | 'alphanumeric'
+ * @attr {string} value - Current code value
+ * @attr {boolean} disabled - Disable all cells
+ * @attr {boolean} masked - Show as password
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {string} color - Theme color
+ * @attr {string} name - Form field name
+ * @attr {string} label - Group aria-label
+ * @attr {string} separator - Optional separator character shown in the middle
+ *
+ * @fires change - Emitted whenever a cell changes. detail: { value: string, complete: boolean, originalEvent?: Event }
+ * @fires complete - Emitted when all cells are filled. detail: { value: string, originalEvent?: Event }
+ *
+ * @cssprop --otp-cell-size - Width and height of each cell
+ * @cssprop --otp-cell-gap - Gap between cells
+ * @cssprop --otp-cell-font-size - Font size inside cells
+ * @cssprop --otp-cell-radius - Border radius of cells
+ * @cssprop --otp-cell-border-color - Default border color
+ * @cssprop --otp-cell-focus-border - Focused border color
+ *
+ * @example
+ * ```html
+ * <bit-otp-input length="6" color="primary"></bit-otp-input>
+ * ```
+ */
+export declare const OTP_INPUT_TAG: string;
+//# sourceMappingURL=otp-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/inputs/otp-input/otp-input.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,QAAQ,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD,CAAC;AAEF,sBAAsB;AACtB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAClC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;CAC9D,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,QAsKxB,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-slower), border-color var(--transition-slower), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500)}.helper-text: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))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text: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)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer buildit.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
+//# sourceMappingURL=radio.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.css?inline.cjs","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-slower),\n      border-color var(--transition-slower),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/radio/radio.css?inline
+var e = "@layer buildit.base{:host{--_size:var(--radio-size,var(--size-5));--_font-size:var(--radio-font-size,var(--text-sm));--_bg:var(--radio-bg,var(--color-contrast-200));--_border:var(--radio-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.radio-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.circle{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);transition:background var(--transition-slower), border-color var(--transition-slower), box-shadow var(--transition-normal);border-radius:50%;position:relative}:host(:focus-visible) .circle{box-shadow:var(--_focus-shadow)}.dot{background:var(--_dot-color);opacity:0;width:50%;height:50%;transition:opacity var(--transition-spring), transform var(--transition-spring);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500)}.helper-text: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))){padding-left:calc(var(--_size) + var(--size-2))}.helper-text: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)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer buildit.overrides{:host{--_active-bg:var(--radio-checked-bg,var(--_theme-base));--_dot-color:var(--radio-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .circle{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .dot{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=radio.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.css?inline.js","names":[],"sources":["../../../src/inputs/radio/radio.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--radio-size, var(--size-5));\n    --_font-size: var(--radio-font-size, var(--text-sm));\n    --_bg: var(--radio-bg, var(--color-contrast-200));\n    --_border: var(--radio-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .radio-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .circle {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: 50%;\n    transition:\n      background var(--transition-slower),\n      border-color var(--transition-slower),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  :host(:focus-visible) .circle {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Inner Dot\n       ======================================== */\n\n  .dot {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 50%;\n    height: 50%;\n    background: var(--_dot-color);\n    border-radius: 50%;\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.overrides {\n  /* Map theme variables to radio-specific variables */\n  :host {\n    --_active-bg: var(--radio-checked-bg, var(--_theme-base));\n    --_dot-color: var(--radio-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .circle {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .dot {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio/radio.d.ts

@@ -0,0 +1,41 @@
+import type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';
+/** Radio component properties */
+export type BitRadioEvents = {
+    change: {
+        checked: boolean;
+        fieldValue: string;
+        originalEvent?: Event;
+        value: boolean;
+    };
+};
+export type BitRadioProps = CheckableProps & ThemableProps & SizableProps & DisablableProps & {
+    /** Error message (marks field as invalid) */
+    error?: string;
+    /** Helper text displayed below the radio */
+    helper?: string;
+};
+/**
+ * A customizable radio button component for mutually exclusive selections.
+ *
+ * @element bit-radio
+ *
+ * @attr {boolean} checked - Checked state
+ * @attr {boolean} disabled - Disable radio interaction
+ * @attr {string} value - Field value (required for radio groups)
+ * @attr {string} name - Form field name (required for radio groups)
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'
+ * @attr {string} error - Error message (marks field as invalid)
+ * @attr {string} helper - Helper text displayed below the radio
+ *
+ * @fires change - Emitted when radio is selected. detail: { value: boolean, checked: boolean, fieldValue: string, originalEvent?: Event }
+ *
+ * @slot - Radio button label text
+ *
+ * @part radio - The radio wrapper element
+ * @part circle - The visual radio circle
+ * @part label - The label element
+ * @part helper-text - The helper/error text element
+ */
+export declare const RADIO_TAG: string;
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/inputs/radio/radio.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAShG,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC;CACzF,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,aAAa,GACb,YAAY,GACZ,eAAe,GAAG;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,QA0MpB,CAAC"}

package/dist/inputs/radio-group/radio-group.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{display:block}fieldset{border:none;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--size-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-600);padding:0}legend[hidden]{display:none}.radio-group-items{flex-direction:var(--radio-group-direction,column);gap:var(--radio-group-gap,var(--size-2));display:flex}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.error-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-error);padding-left:2px;padding-right:2px}}@layer buildit.variants{:host([orientation=horizontal]) .radio-group-items{--radio-group-direction:row;flex-wrap:wrap}}`;exports.default=e;
+//# sourceMappingURL=radio-group.css?inline.cjs.map

package/dist/inputs/radio-group/radio-group.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.css?inline.cjs","names":[],"sources":["../../../src/inputs/radio-group/radio-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .radio-group-items {\n    display: flex;\n    flex-direction: var(--radio-group-direction, column);\n    gap: var(--radio-group-gap, var(--size-2));\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  :host([orientation='horizontal']) .radio-group-items {\n    --radio-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio-group/radio-group.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/radio-group/radio-group.css?inline
+var e = "@layer buildit.base{:host{display:block}fieldset{border:none;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--size-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-600);padding:0}legend[hidden]{display:none}.radio-group-items{flex-direction:var(--radio-group-direction,column);gap:var(--radio-group-gap,var(--size-2));display:flex}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.error-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-error);padding-left:2px;padding-right:2px}}@layer buildit.variants{:host([orientation=horizontal]) .radio-group-items{--radio-group-direction:row;flex-wrap:wrap}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=radio-group.css?inline.js.map

package/dist/inputs/radio-group/radio-group.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.css?inline.js","names":[],"sources":["../../../src/inputs/radio-group/radio-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .radio-group-items {\n    display: flex;\n    flex-direction: var(--radio-group-direction, column);\n    gap: var(--radio-group-gap, var(--size-2));\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  :host([orientation='horizontal']) .radio-group-items {\n    --radio-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/radio-group/radio-group.d.ts

@@ -0,0 +1,61 @@
+import { type ReadonlySignal } from '@vielzeug/craftit';
+import type { ComponentSize, ThemeColor } from '../../types';
+import { type ChoiceChangeDetail } from '../shared/utils';
+export type RadioGroupContext = {
+    color: ReadonlySignal<ThemeColor | undefined>;
+    disabled: ReadonlySignal<boolean>;
+    name: ReadonlySignal<string | undefined>;
+    select: (value: string, originalEvent?: Event) => void;
+    size: ReadonlySignal<ComponentSize | undefined>;
+    value: ReadonlySignal<string>;
+};
+export declare const RADIO_GROUP_CTX: import("@vielzeug/craftit").InjectionKey<RadioGroupContext>;
+export type BitRadioGroupProps = {
+    /** Theme color — propagated to all child bit-radio elements */
+    color?: ThemeColor;
+    /** Disable all radios in the group */
+    disabled?: boolean;
+    /** Error message shown below the group */
+    error?: string;
+    /** Helper text shown below the group */
+    helper?: string;
+    /** Legend / label for the fieldset. Required for accessibility. */
+    label?: string;
+    /** Form field name — propagated to all child bit-radio elements */
+    name?: string;
+    /** Layout direction of the radio options */
+    orientation?: 'vertical' | 'horizontal';
+    /** Mark the group as required */
+    required?: boolean;
+    /** Size — propagated to all child bit-radio elements */
+    size?: ComponentSize;
+    /** Currently selected value */
+    value?: string;
+};
+export type BitRadioGroupEvents = {
+    change: ChoiceChangeDetail;
+};
+/**
+ * A fieldset wrapper that groups `bit-radio` elements, provides shared
+ * `name`, `color`, and `size` via context, and manages roving tabindex
+ * keyboard navigation.
+ *
+ * @element bit-radio-group
+ *
+ * @attr {string} label - Legend text (required for a11y)
+ * @attr {string} value - Currently selected value
+ * @attr {string} name - Form field name (propagated to all bit-radio children)
+ * @attr {boolean} disabled - Disable all radios in the group
+ * @attr {string} error - Error message
+ * @attr {string} helper - Helper text
+ * @attr {string} color - Theme color
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string} orientation - Layout: 'vertical' | 'horizontal'
+ * @attr {boolean} required - Required field
+ *
+ * @fires change - Emitted when a radio is selected. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }
+ *
+ * @slot - Place `bit-radio` elements here
+ */
+export declare const RADIO_GROUP_TAG: string;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/inputs/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,KAAK,cAAc,EAGpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,EAA4B,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKpF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACzC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,eAAe,6DAAwD,CAAC;AAIrF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,eAAe,QAqK1B,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_star-size:var(--rating-star-size,var(--size-7));--_color-empty:var(--rating-color-empty,var(--color-contrast-200));--_color-filled:var(--rating-color-filled,var(--_theme-base,var(--color-warning)));--_gap:var(--rating-gap,var(--size-0_5));align-items:center;display:inline-flex}.stars{gap:var(--_gap);align-items:center;display:flex;position:relative}.sparkle-layer{pointer-events:none;position:absolute;inset:0;overflow:visible}.sparkle{pointer-events:none;background:var(--_color-filled);animation:var(--_motion-animation,sparkle-fly var(--_dur,.5s) ease-out forwards);border-radius:50%;position:absolute}@keyframes sparkle-fly{0%{opacity:.9;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0)}}.star-btn{all:unset;width:var(--_star-size);min-width:var(--_touch-target);height:var(--_star-size);min-height:var(--_touch-target);color:var(--_color-empty);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.star-btn[data-filled]{color:var(--_color-filled)}.star-btn:hover:not([disabled]),.star-btn:focus-visible:not([disabled]){transform:scale(1.15)}.star-btn:focus-visible{outline:var(--border-2) solid var(--_color-filled);outline-offset:var(--border-2)}.star-btn[disabled]{cursor:default}:host([readonly]) .star-btn,:host([disabled]) .star-btn{pointer-events:none}:host([disabled]){opacity:.5}svg{width:100%;height:100%}}@layer buildit.utilities{:host([size=sm]){--_star-size:var(--size-5)}:host([size=lg]){--_star-size:var(--size-9)}@media (forced-colors:active){.star-btn{color:buttontext}.star-btn[data-filled]{color:highlight;forced-color-adjust:none}.star-btn:focus-visible{box-shadow:none;outline:2px solid highlight}}}@media (prefers-reduced-motion:reduce){.sparkle{display:none}}`;exports.default=e;
+//# sourceMappingURL=rating.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.css?inline.cjs","names":[],"sources":["../../../src/inputs/rating/rating.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_star-size: var(--rating-star-size, var(--size-7));\n    --_color-empty: var(--rating-color-empty, var(--color-contrast-200));\n    --_color-filled: var(--rating-color-filled, var(--_theme-base, var(--color-warning)));\n    --_gap: var(--rating-gap, var(--size-0_5));\n\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .stars {\n    position: relative;\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  .sparkle-layer {\n    position: absolute;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n  }\n\n  .sparkle {\n    position: absolute;\n    pointer-events: none;\n    background: var(--_color-filled);\n    border-radius: 50%;\n    animation: var(--_motion-animation, sparkle-fly var(--_dur, 500ms) ease-out forwards);\n  }\n\n  @keyframes sparkle-fly {\n    from {\n      opacity: 0.9;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0);\n    }\n  }\n\n  .star-btn {\n    all: unset;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_star-size);\n    min-width: var(--_touch-target);\n    height: var(--_star-size);\n    min-height: var(--_touch-target);\n    color: var(--_color-empty);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .star-btn[data-filled] {\n    color: var(--_color-filled);\n  }\n\n  .star-btn:hover:not([disabled]),\n  .star-btn:focus-visible:not([disabled]) {\n    transform: scale(1.15);\n  }\n\n  .star-btn:focus-visible {\n    outline: var(--border-2) solid var(--_color-filled);\n    outline-offset: var(--border-2);\n  }\n\n  .star-btn[disabled] {\n    cursor: default;\n  }\n\n  :host([readonly]) .star-btn,\n  :host([disabled]) .star-btn {\n    pointer-events: none;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_star-size: var(--size-5);\n  }\n\n  :host([size='lg']) {\n    --_star-size: var(--size-9);\n  }\n\n  @media (forced-colors: active) {\n    /* Distinguish filled vs unfilled stars with system button colors */\n    .star-btn {\n      color: ButtonText;\n    }\n\n    .star-btn[data-filled] {\n      color: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .star-btn:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sparkle {\n    display: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/rating/rating.css?inline
+var e = "@layer buildit.base{:host{--_star-size:var(--rating-star-size,var(--size-7));--_color-empty:var(--rating-color-empty,var(--color-contrast-200));--_color-filled:var(--rating-color-filled,var(--_theme-base,var(--color-warning)));--_gap:var(--rating-gap,var(--size-0_5));align-items:center;display:inline-flex}.stars{gap:var(--_gap);align-items:center;display:flex;position:relative}.sparkle-layer{pointer-events:none;position:absolute;inset:0;overflow:visible}.sparkle{pointer-events:none;background:var(--_color-filled);animation:var(--_motion-animation,sparkle-fly var(--_dur,.5s) ease-out forwards);border-radius:50%;position:absolute}@keyframes sparkle-fly{0%{opacity:.9;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0)}}.star-btn{all:unset;width:var(--_star-size);min-width:var(--_touch-target);height:var(--_star-size);min-height:var(--_touch-target);color:var(--_color-empty);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.star-btn[data-filled]{color:var(--_color-filled)}.star-btn:hover:not([disabled]),.star-btn:focus-visible:not([disabled]){transform:scale(1.15)}.star-btn:focus-visible{outline:var(--border-2) solid var(--_color-filled);outline-offset:var(--border-2)}.star-btn[disabled]{cursor:default}:host([readonly]) .star-btn,:host([disabled]) .star-btn{pointer-events:none}:host([disabled]){opacity:.5}svg{width:100%;height:100%}}@layer buildit.utilities{:host([size=sm]){--_star-size:var(--size-5)}:host([size=lg]){--_star-size:var(--size-9)}@media (forced-colors:active){.star-btn{color:buttontext}.star-btn[data-filled]{color:highlight;forced-color-adjust:none}.star-btn:focus-visible{box-shadow:none;outline:2px solid highlight}}}@media (prefers-reduced-motion:reduce){.sparkle{display:none}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=rating.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.css?inline.js","names":[],"sources":["../../../src/inputs/rating/rating.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_star-size: var(--rating-star-size, var(--size-7));\n    --_color-empty: var(--rating-color-empty, var(--color-contrast-200));\n    --_color-filled: var(--rating-color-filled, var(--_theme-base, var(--color-warning)));\n    --_gap: var(--rating-gap, var(--size-0_5));\n\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .stars {\n    position: relative;\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  .sparkle-layer {\n    position: absolute;\n    inset: 0;\n    overflow: visible;\n    pointer-events: none;\n  }\n\n  .sparkle {\n    position: absolute;\n    pointer-events: none;\n    background: var(--_color-filled);\n    border-radius: 50%;\n    animation: var(--_motion-animation, sparkle-fly var(--_dur, 500ms) ease-out forwards);\n  }\n\n  @keyframes sparkle-fly {\n    from {\n      opacity: 0.9;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(0) scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) rotate(var(--_angle)) translateY(calc(-1 * var(--_dist))) scale(0);\n    }\n  }\n\n  .star-btn {\n    all: unset;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_star-size);\n    min-width: var(--_touch-target);\n    height: var(--_star-size);\n    min-height: var(--_touch-target);\n    color: var(--_color-empty);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  .star-btn[data-filled] {\n    color: var(--_color-filled);\n  }\n\n  .star-btn:hover:not([disabled]),\n  .star-btn:focus-visible:not([disabled]) {\n    transform: scale(1.15);\n  }\n\n  .star-btn:focus-visible {\n    outline: var(--border-2) solid var(--_color-filled);\n    outline-offset: var(--border-2);\n  }\n\n  .star-btn[disabled] {\n    cursor: default;\n  }\n\n  :host([readonly]) .star-btn,\n  :host([disabled]) .star-btn {\n    pointer-events: none;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_star-size: var(--size-5);\n  }\n\n  :host([size='lg']) {\n    --_star-size: var(--size-9);\n  }\n\n  @media (forced-colors: active) {\n    /* Distinguish filled vs unfilled stars with system button colors */\n    .star-btn {\n      color: ButtonText;\n    }\n\n    .star-btn[data-filled] {\n      color: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .star-btn:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sparkle {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/inputs/rating/rating.d.ts

@@ -0,0 +1,48 @@
+import type { DisablableProps, SizableProps, ThemableProps } from '../../types';
+export type BitRatingEvents = {
+    change: {
+        originalEvent?: Event;
+        value: number;
+    };
+};
+/** Rating props */
+export type BitRatingProps = ThemableProps & SizableProps & DisablableProps & {
+    /** Accessible group label */
+    label?: string;
+    /** Maximum rating (number of stars) */
+    max?: number;
+    /** Form field name */
+    name?: string;
+    /** Make rating read-only */
+    readonly?: boolean;
+    /** Current rating value */
+    value?: number;
+};
+/**
+ * A star rating input.
+ *
+ * @element bit-rating
+ *
+ * @attr {number} value - Current rating value (default: 0)
+ * @attr {number} max - Maximum number of stars (default: 5)
+ * @attr {boolean} readonly - Read-only display mode
+ * @attr {boolean} disabled - Disabled state
+ * @attr {string} label - aria-label for the group (default: 'Rating')
+ * @attr {string} color - Theme color for filled stars
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ * @attr {string} name - Form field name
+ *
+ * @fires change - Emitted when value changes. detail: { value: number, originalEvent?: Event }
+ *
+ * @cssprop --rating-star-size - Star diameter
+ * @cssprop --rating-color-empty - Empty star color
+ * @cssprop --rating-color-filled - Filled star color
+ * @cssprop --rating-gap - Gap between stars
+ *
+ * @example
+ * ```html
+ * <bit-rating value="3" max="5" color="warning"></bit-rating>
+ * ```
+ */
+export declare const RATING_TAG: string;
+//# sourceMappingURL=rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/inputs/rating/rating.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAUhF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE;QAAE,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF,mBAAmB;AACnB,MAAM,MAAM,cAAc,GAAG,aAAa,GACxC,YAAY,GACZ,eAAe,GAAG;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU,QAiKrB,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_font-size:var(--select-font-size,var(--text-sm));--_gap:var(--select-gap,var(--size-2));--_field-height:var(--select-height,var(--size-10));--_row-min-height:calc(var(--leading-normal) * var(--_font-size) + 2px);--_padding:var(--select-padding,var(--size-1-5) var(--size-3));--_radius:var(--select-radius,var(--rounded-lg));--_placeholder:var(--select-placeholder-color,var(--color-contrast-500));--_bg:var(--select-bg,var(--color-contrast-100));--_border-color:var(--select-border-color,var(--color-contrast-300));flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}:host([fullwidth]){width:100%}::slotted(option),::slotted(optgroup){display:none}.select-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:max(var(--_field-height), var(--_touch-target,0px));padding:var(--_padding);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-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;display:flex;position:relative}.field: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:left;padding-right:var(--size-8)}.field: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;padding-left:var(--size-8)}.field:focus{outline:none}:host([multiple]) .field{height:auto}.field:has(.label-inset:not([hidden])){height:auto}.label-inset{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.trigger-row{gap:var(--_gap);max-width:calc(100% - var(--size-10));min-height:var(--_row-min-height);flex-wrap:wrap;flex:1;align-items:center;display:flex}.chips-row{gap:var(--size-1);flex-wrap:wrap;flex:1;align-items:center;min-width:0;display:flex}.chips-row[hidden],.trigger-value[hidden]{display:none}.trigger-value{text-overflow:ellipsis;min-width:0;font-size:var(--_font-size);color:var(--color-contrast-900);white-space:nowrap;transition:color var(--transition-fast);flex:1;line-height:1;overflow:hidden}.trigger-placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}.trigger-icon{width:var(--size-6);height:100%;color:var(--color-contrast-500);transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex;position:absolute;top:0}.trigger-icon: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))){right:var(--size-2)}.trigger-icon: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)){left:var(--size-2)}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,bit-select-spin .6s linear infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader: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))){border-right-color:#0000}.loader: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)){border-left-color:#0000}:host([loading]) .loader{display:inline-block}:host([loading]) .trigger-icon svg{display:none}@keyframes bit-select-spin{to{transform:rotate(360deg)}}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;visibility:hidden;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast));flex-direction:column;display:flex;position:fixed;overflow-y:auto;transform:translateY(-4px)}.dropdown: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:left}.dropdown: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}.dropdown[data-open]{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0)}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--_font-size);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in srgb, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--_font-size);color:var(--color-contrast-500);text-align:center}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=flat])) .field:focus-within,:host([open]:not([disabled],[variant=flat])) .field{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([open]:not([disabled])) .label-inset{color:var(--_theme-focus)}:host([has-error]) .field{border-color:var(--color-error)}:host([has-error]) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([has-error]) .label-inset,:host([has-error]) .label-outside{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]) .trigger-value{color:var(--color-contrast-900)}:host([variant=bordered]) .trigger-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)}}@layer buildit.utilities{:host([fullwidth]){width:100%;display:flex}}`;exports.default=e;
+//# sourceMappingURL=select.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.css?inline.cjs","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--select-font-size, var(--text-sm));\n    --_gap: var(--select-gap, var(--size-2));\n    --_field-height: var(--select-height, var(--size-10));\n    --_row-min-height: calc(var(--leading-normal) * var(--_font-size) + 2px);\n    --_padding: var(--select-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--select-radius, var(--rounded-lg));\n    --_placeholder: var(--select-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--select-bg, var(--color-contrast-100));\n    --_border-color: var(--select-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  .select-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Trigger Field\n       ======================================== */\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: max(var(--_field-height), var(--_touch-target, 0px));\n    padding: var(--_padding);\n    padding-inline-end: var(--size-8);\n    text-align: start;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-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  .field:focus {\n    outline: none;\n  }\n\n  /* Expand height for multi-select chips or inset label */\n  :host([multiple]) .field,\n  .field:has(.label-inset:not([hidden])) {\n    height: auto;\n  }\n\n  .label-inset {\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\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: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  .trigger-row {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: calc(100% - var(--size-10));\n    min-height: var(--_row-min-height);\n  }\n\n  .chips-row {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden],\n  .trigger-value[hidden] {\n    display: none;\n  }\n\n  .trigger-value {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_font-size);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    white-space: nowrap;\n    transition: color var(--transition-fast);\n  }\n\n  .trigger-placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  .trigger-icon {\n    position: absolute;\n    inset-inline-end: var(--size-2);\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-6);\n    height: 100%;\n    color: var(--color-contrast-500);\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, bit-select-spin 0.6s linear infinite);\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  :host([loading]) .trigger-icon svg {\n    display: none;\n  }\n\n  @keyframes bit-select-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* ========================================\n       Dropdown Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    z-index: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    visibility: hidden;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\n    padding: var(--size-1);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\n    opacity: 0;\n    transform: translateY(-4px);\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      visibility var(--transition-fast)\n    );\n  }\n\n  .dropdown[data-open] {\n    visibility: visible;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in srgb, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check {\n    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--_font-size);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n\n  /* ========================================\n       Helper / Error 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       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='flat'])) .field:focus-within,\n  :host([open]:not([disabled], [variant='flat'])) .field {\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  :host([open]:not([disabled])) .label-inset {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([has-error]) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([has-error]) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([has-error]) .label-inset,\n  :host([has-error]) .label-outside {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) - Standard select 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']) .trigger-value {\n    color: var(--color-contrast-900);\n  }\n\n  :host([variant='bordered']) .trigger-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\n@layer buildit.utilities {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/select/select.css?inline
+var e = "@layer buildit.base{:host{--_font-size:var(--select-font-size,var(--text-sm));--_gap:var(--select-gap,var(--size-2));--_field-height:var(--select-height,var(--size-10));--_row-min-height:calc(var(--leading-normal) * var(--_font-size) + 2px);--_padding:var(--select-padding,var(--size-1-5) var(--size-3));--_radius:var(--select-radius,var(--rounded-lg));--_placeholder:var(--select-placeholder-color,var(--color-contrast-500));--_bg:var(--select-bg,var(--color-contrast-100));--_border-color:var(--select-border-color,var(--color-contrast-300));flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}:host([fullwidth]){width:100%}::slotted(option),::slotted(optgroup){display:none}.select-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.field{box-sizing:border-box;height:var(--_field-height);min-height:max(var(--_field-height), var(--_touch-target,0px));padding:var(--_padding);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-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;display:flex;position:relative}.field: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:left;padding-right:var(--size-8)}.field: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;padding-left:var(--size-8)}.field:focus{outline:none}:host([multiple]) .field{height:auto}.field:has(.label-inset:not([hidden])){height:auto}.label-inset{font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast);margin-bottom:2px}.label-outside{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.trigger-row{gap:var(--_gap);max-width:calc(100% - var(--size-10));min-height:var(--_row-min-height);flex-wrap:wrap;flex:1;align-items:center;display:flex}.chips-row{gap:var(--size-1);flex-wrap:wrap;flex:1;align-items:center;min-width:0;display:flex}.chips-row[hidden],.trigger-value[hidden]{display:none}.trigger-value{text-overflow:ellipsis;min-width:0;font-size:var(--_font-size);color:var(--color-contrast-900);white-space:nowrap;transition:color var(--transition-fast);flex:1;line-height:1;overflow:hidden}.trigger-placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}.trigger-icon{width:var(--size-6);height:100%;color:var(--color-contrast-500);transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex;position:absolute;top:0}.trigger-icon: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))){right:var(--size-2)}.trigger-icon: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)){left:var(--size-2)}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,bit-select-spin .6s linear infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader: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))){border-right-color:#0000}.loader: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)){border-left-color:#0000}:host([loading]) .loader{display:inline-block}:host([loading]) .trigger-icon svg{display:none}@keyframes bit-select-spin{to{transform:rotate(360deg)}}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;visibility:hidden;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast));flex-direction:column;display:flex;position:fixed;overflow-y:auto;transform:translateY(-4px)}.dropdown: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:left}.dropdown: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}.dropdown[data-open]{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0)}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--_font-size);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in srgb, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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))){margin-left:auto}.option-check: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)){margin-right:auto}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--_font-size);color:var(--color-contrast-500);text-align:center}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=flat])) .field:focus-within,:host([open]:not([disabled],[variant=flat])) .field{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([open]:not([disabled])) .label-inset{color:var(--_theme-focus)}:host([has-error]) .field{border-color:var(--color-error)}:host([has-error]) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([has-error]) .label-inset,:host([has-error]) .label-outside{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]) .trigger-value{color:var(--color-contrast-900)}:host([variant=bordered]) .trigger-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)}}@layer buildit.utilities{:host([fullwidth]){width:100%;display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=select.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.css?inline.js","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--select-font-size, var(--text-sm));\n    --_gap: var(--select-gap, var(--size-2));\n    --_field-height: var(--select-height, var(--size-10));\n    --_row-min-height: calc(var(--leading-normal) * var(--_font-size) + 2px);\n    --_padding: var(--select-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--select-radius, var(--rounded-lg));\n    --_placeholder: var(--select-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--select-bg, var(--color-contrast-100));\n    --_border-color: var(--select-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  /* Hide native <option> elements — we render our own UI */\n  ::slotted(option),\n  ::slotted(optgroup) {\n    display: none;\n  }\n\n  .select-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Trigger Field\n       ======================================== */\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: max(var(--_field-height), var(--_touch-target, 0px));\n    padding: var(--_padding);\n    padding-inline-end: var(--size-8);\n    text-align: start;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-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  .field:focus {\n    outline: none;\n  }\n\n  /* Expand height for multi-select chips or inset label */\n  :host([multiple]) .field,\n  .field:has(.label-inset:not([hidden])) {\n    height: auto;\n  }\n\n  .label-inset {\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\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: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  .trigger-row {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: calc(100% - var(--size-10));\n    min-height: var(--_row-min-height);\n  }\n\n  .chips-row {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n  }\n\n  .chips-row[hidden],\n  .trigger-value[hidden] {\n    display: none;\n  }\n\n  .trigger-value {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_font-size);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    white-space: nowrap;\n    transition: color var(--transition-fast);\n  }\n\n  .trigger-placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  .trigger-icon {\n    position: absolute;\n    inset-inline-end: var(--size-2);\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-6);\n    height: 100%;\n    color: var(--color-contrast-500);\n    transition: transform var(--transition-fast);\n  }\n\n  :host([open]) .trigger-icon {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, bit-select-spin 0.6s linear infinite);\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  :host([loading]) .trigger-icon svg {\n    display: none;\n  }\n\n  @keyframes bit-select-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* ========================================\n       Dropdown Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    z-index: var(--z-dropdown, 8000);\n    box-sizing: border-box;\n    display: flex;\n    visibility: hidden;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    max-height: 260px;\n    padding: var(--size-1);\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    background: var(--color-canvas);\n    border: var(--border) solid var(--color-contrast-200);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n\n    /* Hidden by default */\n    opacity: 0;\n    transform: translateY(-4px);\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      visibility var(--transition-fast)\n    );\n  }\n\n  .dropdown[data-open] {\n    visibility: visible;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .options-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels to keep option rows compact and readable. */\n  .option > span:first-child {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--color-contrast-100);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-base) 12%, var(--color-contrast-100));\n  }\n\n  .option[data-selected] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-base) 10%, var(--color-contrast-50));\n  }\n\n  .option[data-selected][data-focused] {\n    background: color-mix(in srgb, var(--_theme-base) 20%, var(--color-contrast-100));\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check {\n    opacity: 1;\n  }\n\n  /* ========================================\n       Option Groups\n       ======================================== */\n\n  .optgroup-label {\n    padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide, 0.05em);\n  }\n\n  /* ========================================\n       Loading / No-Results\n       ======================================== */\n\n  .dropdown-loading,\n  .dropdown-empty {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--_font-size);\n    color: var(--color-contrast-500);\n    text-align: center;\n  }\n\n  /* ========================================\n       Helper / Error 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       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='flat'])) .field:focus-within,\n  :host([open]:not([disabled], [variant='flat'])) .field {\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  :host([open]:not([disabled])) .label-inset {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([has-error]) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([has-error]) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([has-error]) .label-inset,\n  :host([has-error]) .label-outside {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Visual Variants\n       ======================================== */\n\n  /* Solid (Default) - Standard select 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']) .trigger-value {\n    color: var(--color-contrast-900);\n  }\n\n  :host([variant='bordered']) .trigger-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\n@layer buildit.utilities {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n}\n"],"mappings":""}