@vielzeug/buildit 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.css?inline.js","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--rounded-lg);\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer buildit.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(bit-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(bit-button:hover),\n  :host([attached]) ::slotted(bit-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(bit-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(bit-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(bit-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(bit-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,52 @@
+import { type ReadonlySignal } from '@vielzeug/craftit';
+import type { ComponentSize, ThemeColor, VisualVariant } from '../../types';
+/** Context provided by bit-button-group to its bit-button children. */
+export type ButtonGroupContext = {
+    color: ReadonlySignal<ThemeColor | undefined>;
+    size: ReadonlySignal<ComponentSize | undefined>;
+    variant: ReadonlySignal<Exclude<VisualVariant, 'glass'> | undefined>;
+};
+/** Injection key for the button-group context. */
+export declare const BUTTON_GROUP_CTX: import("@vielzeug/craftit").InjectionKey<ButtonGroupContext>;
+/** Button group component properties */
+export type BitButtonGroupProps = {
+    /** Attach buttons together (no gap, rounded only on edges) */
+    attached?: boolean;
+    /** Button color for all children (propagated) */
+    color?: ThemeColor;
+    /** Make all buttons full width */
+    fullwidth?: boolean;
+    /** Accessible group label */
+    label?: string;
+    /** Group orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Button size for all children (propagated) */
+    size?: ComponentSize;
+    /** Button variant for all children (propagated) */
+    variant?: Exclude<VisualVariant, 'glass'>;
+};
+/**
+ * A container for grouping buttons with coordinated styling and layout.
+ *
+ * @element bit-button-group
+ *
+ * @attr {string} size - Button size: 'sm' | 'md' | 'lg'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} orientation - Group orientation: 'horizontal' | 'vertical'
+ * @attr {boolean} attached - Attach buttons together (no gap, rounded only on edges)
+ * @attr {boolean} fullwidth - Make all buttons full width
+ * @attr {string} label - Accessible group label
+ *
+ * @slot - Button elements (bit-button)
+ *
+ * @cssprop --group-gap - Gap between buttons
+ * @cssprop --group-radius - Border radius for edge buttons
+ *
+ * @example
+ * ```html
+ * <bit-button-group><bit-button>First</bit-button><bit-button>Second</bit-button></bit-button-group>
+ * ```
+ */
+export declare const BUTTON_GROUP_TAG: string;
+//# sourceMappingURL=button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/button-group/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiD,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEvG,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5E,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC;CACtE,CAAC;AACF,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,8DAA0D,CAAC;AAIxF,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG;IAChC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gDAAgD;IAChD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,gBAAgB,QAyB3B,CAAC"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-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}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-slower), border-color var(--transition-slower), box-shadow var(--transition-normal);position:relative}input:focus-visible+.box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{width:80%;height:80%;color:var(--_icon-color);opacity:0;fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--transition-spring), transform var(--transition-spring);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(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
+//# sourceMappingURL=checkbox.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.css?inline.cjs","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-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  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\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: var(--_radius);\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  input:focus-visible + .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 80%;\n    height: 80%;\n    color: var(--_icon-color);\n    opacity: 0;\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\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 checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/checkbox/checkbox.css?inline
+var e = "@layer buildit.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-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}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-slower), border-color var(--transition-slower), box-shadow var(--transition-normal);position:relative}input:focus-visible+.box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{width:80%;height:80%;color:var(--_icon-color);opacity:0;fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--transition-spring), transform var(--transition-spring);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(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=checkbox.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.css?inline.js","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-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  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\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: var(--_radius);\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  input:focus-visible + .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 80%;\n    height: 80%;\n    color: var(--_icon-color);\n    opacity: 0;\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\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 checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/checkbox/checkbox.d.ts

@@ -0,0 +1,43 @@
+import type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';
+export type BitCheckboxEvents = {
+    change: {
+        checked: boolean;
+        fieldValue: string;
+        originalEvent?: Event;
+        value: boolean;
+    };
+};
+export type BitCheckboxProps = CheckableProps & ThemableProps & SizableProps & DisablableProps & {
+    /** Error message (marks field as invalid) */
+    error?: string;
+    /** Helper text displayed below the checkbox */
+    helper?: string;
+    /** Indeterminate state (partially checked) */
+    indeterminate?: boolean;
+};
+/**
+ * A customizable checkbox component with theme colors, sizes, and indeterminate state support.
+ *
+ * @element bit-checkbox
+ *
+ * @attr {boolean} checked - Checked state
+ * @attr {boolean} disabled - Disable checkbox interaction
+ * @attr {boolean} indeterminate - Indeterminate (partially checked) state
+ * @attr {string} value - Field value submitted with forms
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Checkbox size: 'sm' | 'md' | 'lg'
+ * @attr {string} error - Error message (marks field as invalid)
+ * @attr {string} helper - Helper text displayed below the checkbox
+ *
+ * @fires change - Emitted when checkbox is toggled. detail: { value: boolean, checked: boolean, fieldValue: string, originalEvent?: Event }
+ *
+ * @slot - Checkbox label text
+ *
+ * @part checkbox - The checkbox wrapper element
+ * @part box - The visual checkbox box
+ * @part label - The label element
+ * @part helper-text - The helper/error text element
+ */
+export declare const CHECKBOX_TAG: string;
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox/checkbox.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAShG,MAAM,MAAM,iBAAiB,GAAG;IAC9B,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,gBAAgB,GAAG,cAAc,GAC3C,aAAa,GACb,YAAY,GACZ,eAAe,GAAG;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,YAAY,QAsHvB,CAAC"}

package/dist/inputs/checkbox-group/checkbox-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}.checkbox-group-items{flex-direction:var(--checkbox-group-direction,column);gap:var(--checkbox-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]) .checkbox-group-items{--checkbox-group-direction:row;flex-wrap:wrap}}`;exports.default=e;
+//# sourceMappingURL=checkbox-group.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.css?inline.cjs","names":[],"sources":["../../../src/inputs/checkbox-group/checkbox-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  .checkbox-group-items {\n    display: flex;\n    flex-direction: var(--checkbox-group-direction, column);\n    gap: var(--checkbox-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']) .checkbox-group-items {\n    --checkbox-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/checkbox-group/checkbox-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}.checkbox-group-items{flex-direction:var(--checkbox-group-direction,column);gap:var(--checkbox-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]) .checkbox-group-items{--checkbox-group-direction:row;flex-wrap:wrap}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=checkbox-group.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.css?inline.js","names":[],"sources":["../../../src/inputs/checkbox-group/checkbox-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  .checkbox-group-items {\n    display: flex;\n    flex-direction: var(--checkbox-group-direction, column);\n    gap: var(--checkbox-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']) .checkbox-group-items {\n    --checkbox-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,56 @@
+import { type ReadonlySignal } from '@vielzeug/craftit';
+import type { ComponentSize, ThemeColor } from '../../types';
+import { type ChoiceChangeDetail } from '../shared/utils';
+export type CheckboxGroupContext = {
+    color: ReadonlySignal<ThemeColor | undefined>;
+    disabled: ReadonlySignal<boolean>;
+    size: ReadonlySignal<ComponentSize | undefined>;
+    toggle: (value: string, originalEvent?: Event) => void;
+    values: ReadonlySignal<string[]>;
+};
+export declare const CHECKBOX_GROUP_CTX: import("@vielzeug/craftit").InjectionKey<CheckboxGroupContext>;
+export type BitCheckboxGroupProps = {
+    /** Theme color — propagated to all child bit-checkbox elements */
+    color?: ThemeColor;
+    /** Disable all checkboxes 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;
+    /** Layout direction of the checkbox options */
+    orientation?: 'vertical' | 'horizontal';
+    /** Mark the group as required */
+    required?: boolean;
+    /** Size — propagated to all child bit-checkbox elements */
+    size?: ComponentSize;
+    /** Comma-separated list of currently checked values */
+    values?: string;
+};
+export type BitCheckboxGroupEvents = {
+    change: ChoiceChangeDetail;
+};
+/**
+ * A fieldset wrapper that groups `bit-checkbox` elements, provides shared
+ * `color` and `size` via context, and manages multi-value selection state.
+ *
+ * @element bit-checkbox-group
+ *
+ * @attr {string} label - Legend text (required for a11y)
+ * @attr {string} values - Comma-separated list of checked values
+ * @attr {boolean} disabled - Disable all checkboxes 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 selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }
+ *
+ * @slot - Place `bit-checkbox` elements here
+ */
+export declare const CHECKBOX_GROUP_TAG: string;
+//# sourceMappingURL=checkbox-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,KAAK,cAAc,EAEpB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,EAA4C,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKpG,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,cAAc,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC9C,QAAQ,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,EAAE,cAAc,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAChD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,kBAAkB,gEAA8D,CAAC;AAI9F,MAAM,MAAM,qBAAqB,GAAG;IAClC,kEAAkE;IAClE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,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,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,kBAAkB,QA4H7B,CAAC"}

package/dist/inputs/combobox/combobox-options.cjs

@@ -0,0 +1,2 @@
+function e(e){return e.filter(e=>e.localName===`bit-combobox-option`).map(e=>({disabled:e.hasAttribute(`disabled`),iconEl:e.querySelector(`[slot="icon"]`),label:e.getAttribute(`label`)||[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent?.trim()).filter(Boolean).join(` `)||``,value:e.getAttribute(`value`)??``}))}function t(e,t){return e.map(e=>{if(e.label)return e;let n=t.find(t=>t.value===e.value);return n?{label:n.label,value:e.value}:e})}function n(e,t,n){if(n||!t)return e;let r=t.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(r))}function r(e,t,n){if(!t||!e)return``;let r=e.trim();return r?n.find(e=>e.label.toLowerCase()===r.toLowerCase())?``:r:``}function i(e){return e.toLowerCase().replace(/\s+/g,`-`)}exports.backfillSelectionLabels=t,exports.filterOptions=n,exports.getCreatableLabel=r,exports.makeCreatableValue=i,exports.parseSlottedOptions=e;
+//# sourceMappingURL=combobox-options.cjs.map

package/dist/inputs/combobox/combobox-options.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-options.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox-options.ts"],"sourcesContent":["import type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\nexport function parseSlottedOptions(elements: Element[]): ComboboxOptionItem[] {\n  return elements\n    .filter((el) => el.localName === 'bit-combobox-option')\n    .map((el) => ({\n      disabled: el.hasAttribute('disabled'),\n      iconEl: el.querySelector('[slot=\"icon\"]'),\n      label:\n        el.getAttribute('label') ||\n        [...el.childNodes]\n          .filter((node) => node.nodeType === Node.TEXT_NODE)\n          .map((node) => node.textContent?.trim())\n          .filter(Boolean)\n          .join(' ') ||\n        '',\n      value: el.getAttribute('value') ?? '',\n    }));\n}\n\nexport function backfillSelectionLabels(\n  selectedValues: ComboboxSelectionItem[],\n  allOptions: ComboboxOptionItem[],\n): ComboboxSelectionItem[] {\n  return selectedValues.map((selection) => {\n    if (selection.label) return selection;\n\n    const match = allOptions.find((option) => option.value === selection.value);\n\n    return match ? { label: match.label, value: selection.value } : selection;\n  });\n}\n\nexport function filterOptions(options: ComboboxOptionItem[], query: string, noFilter: boolean): ComboboxOptionItem[] {\n  if (noFilter || !query) return options;\n\n  const normalizedQuery = query.toLowerCase();\n\n  return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery));\n}\n\nexport function getCreatableLabel(query: string, creatable: boolean, filteredOptions: ComboboxOptionItem[]): string {\n  if (!creatable || !query) return '';\n\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) return '';\n\n  const exactMatch = filteredOptions.find((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase());\n\n  return exactMatch ? '' : trimmedQuery;\n}\n\nexport function makeCreatableValue(label: string): string {\n  return label.toLowerCase().replace(/\\s+/g, '-');\n}\n"],"mappings":"AAEA,SAAgB,EAAoB,EAA2C,CAC7E,OAAO,EACJ,OAAQ,GAAO,EAAG,YAAc,sBAAsB,CACtD,IAAK,IAAQ,CACZ,SAAU,EAAG,aAAa,WAAW,CACrC,OAAQ,EAAG,cAAc,gBAAgB,CACzC,MACE,EAAG,aAAa,QAAQ,EACxB,CAAC,GAAG,EAAG,WAAW,CACf,OAAQ,GAAS,EAAK,WAAa,KAAK,UAAU,CAClD,IAAK,GAAS,EAAK,aAAa,MAAM,CAAC,CACvC,OAAO,QAAQ,CACf,KAAK,IAAI,EACZ,GACF,MAAO,EAAG,aAAa,QAAQ,EAAI,GACpC,EAAE,CAGP,SAAgB,EACd,EACA,EACyB,CACzB,OAAO,EAAe,IAAK,GAAc,CACvC,GAAI,EAAU,MAAO,OAAO,EAE5B,IAAM,EAAQ,EAAW,KAAM,GAAW,EAAO,QAAU,EAAU,MAAM,CAE3E,OAAO,EAAQ,CAAE,MAAO,EAAM,MAAO,MAAO,EAAU,MAAO,CAAG,GAChE,CAGJ,SAAgB,EAAc,EAA+B,EAAe,EAAyC,CACnH,GAAI,GAAY,CAAC,EAAO,OAAO,EAE/B,IAAM,EAAkB,EAAM,aAAa,CAE3C,OAAO,EAAQ,OAAQ,GAAW,EAAO,MAAM,aAAa,CAAC,SAAS,EAAgB,CAAC,CAGzF,SAAgB,EAAkB,EAAe,EAAoB,EAA+C,CAClH,GAAI,CAAC,GAAa,CAAC,EAAO,MAAO,GAEjC,IAAM,EAAe,EAAM,MAAM,CAMjC,OAJK,EAEc,EAAgB,KAAM,GAAW,EAAO,MAAM,aAAa,GAAK,EAAa,aAAa,CAAC,CAE1F,GAAK,EAJC,GAO5B,SAAgB,EAAmB,EAAuB,CACxD,OAAO,EAAM,aAAa,CAAC,QAAQ,OAAQ,IAAI"}

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

@@ -0,0 +1,7 @@
+import type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';
+export declare function parseSlottedOptions(elements: Element[]): ComboboxOptionItem[];
+export declare function backfillSelectionLabels(selectedValues: ComboboxSelectionItem[], allOptions: ComboboxOptionItem[]): ComboboxSelectionItem[];
+export declare function filterOptions(options: ComboboxOptionItem[], query: string, noFilter: boolean): ComboboxOptionItem[];
+export declare function getCreatableLabel(query: string, creatable: boolean, filteredOptions: ComboboxOptionItem[]): string;
+export declare function makeCreatableValue(label: string): string;
+//# sourceMappingURL=combobox-options.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-options.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAElF,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAgB7E;AAED,wBAAgB,uBAAuB,CACrC,cAAc,EAAE,qBAAqB,EAAE,EACvC,UAAU,EAAE,kBAAkB,EAAE,GAC/B,qBAAqB,EAAE,CAQzB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,kBAAkB,EAAE,CAMnH;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAUlH;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAExD"}

package/dist/inputs/combobox/combobox-options.js

@@ -0,0 +1,36 @@
+//#region src/inputs/combobox/combobox-options.ts
+function e(e) {
+	return e.filter((e) => e.localName === "bit-combobox-option").map((e) => ({
+		disabled: e.hasAttribute("disabled"),
+		iconEl: e.querySelector("[slot=\"icon\"]"),
+		label: e.getAttribute("label") || [...e.childNodes].filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent?.trim()).filter(Boolean).join(" ") || "",
+		value: e.getAttribute("value") ?? ""
+	}));
+}
+function t(e, t) {
+	return e.map((e) => {
+		if (e.label) return e;
+		let n = t.find((t) => t.value === e.value);
+		return n ? {
+			label: n.label,
+			value: e.value
+		} : e;
+	});
+}
+function n(e, t, n) {
+	if (n || !t) return e;
+	let r = t.toLowerCase();
+	return e.filter((e) => e.label.toLowerCase().includes(r));
+}
+function r(e, t, n) {
+	if (!t || !e) return "";
+	let r = e.trim();
+	return r ? n.find((e) => e.label.toLowerCase() === r.toLowerCase()) ? "" : r : "";
+}
+function i(e) {
+	return e.toLowerCase().replace(/\s+/g, "-");
+}
+//#endregion
+export { t as backfillSelectionLabels, n as filterOptions, r as getCreatableLabel, i as makeCreatableValue, e as parseSlottedOptions };
+
+//# sourceMappingURL=combobox-options.js.map

package/dist/inputs/combobox/combobox-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-options.js","names":[],"sources":["../../../src/inputs/combobox/combobox-options.ts"],"sourcesContent":["import type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\nexport function parseSlottedOptions(elements: Element[]): ComboboxOptionItem[] {\n  return elements\n    .filter((el) => el.localName === 'bit-combobox-option')\n    .map((el) => ({\n      disabled: el.hasAttribute('disabled'),\n      iconEl: el.querySelector('[slot=\"icon\"]'),\n      label:\n        el.getAttribute('label') ||\n        [...el.childNodes]\n          .filter((node) => node.nodeType === Node.TEXT_NODE)\n          .map((node) => node.textContent?.trim())\n          .filter(Boolean)\n          .join(' ') ||\n        '',\n      value: el.getAttribute('value') ?? '',\n    }));\n}\n\nexport function backfillSelectionLabels(\n  selectedValues: ComboboxSelectionItem[],\n  allOptions: ComboboxOptionItem[],\n): ComboboxSelectionItem[] {\n  return selectedValues.map((selection) => {\n    if (selection.label) return selection;\n\n    const match = allOptions.find((option) => option.value === selection.value);\n\n    return match ? { label: match.label, value: selection.value } : selection;\n  });\n}\n\nexport function filterOptions(options: ComboboxOptionItem[], query: string, noFilter: boolean): ComboboxOptionItem[] {\n  if (noFilter || !query) return options;\n\n  const normalizedQuery = query.toLowerCase();\n\n  return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery));\n}\n\nexport function getCreatableLabel(query: string, creatable: boolean, filteredOptions: ComboboxOptionItem[]): string {\n  if (!creatable || !query) return '';\n\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) return '';\n\n  const exactMatch = filteredOptions.find((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase());\n\n  return exactMatch ? '' : trimmedQuery;\n}\n\nexport function makeCreatableValue(label: string): string {\n  return label.toLowerCase().replace(/\\s+/g, '-');\n}\n"],"mappings":";AAEA,SAAgB,EAAoB,GAA2C;AAC7E,QAAO,EACJ,QAAQ,MAAO,EAAG,cAAc,sBAAsB,CACtD,KAAK,OAAQ;EACZ,UAAU,EAAG,aAAa,WAAW;EACrC,QAAQ,EAAG,cAAc,kBAAgB;EACzC,OACE,EAAG,aAAa,QAAQ,IACxB,CAAC,GAAG,EAAG,WAAW,CACf,QAAQ,MAAS,EAAK,aAAa,KAAK,UAAU,CAClD,KAAK,MAAS,EAAK,aAAa,MAAM,CAAC,CACvC,OAAO,QAAQ,CACf,KAAK,IAAI,IACZ;EACF,OAAO,EAAG,aAAa,QAAQ,IAAI;EACpC,EAAE;;AAGP,SAAgB,EACd,GACA,GACyB;AACzB,QAAO,EAAe,KAAK,MAAc;AACvC,MAAI,EAAU,MAAO,QAAO;EAE5B,IAAM,IAAQ,EAAW,MAAM,MAAW,EAAO,UAAU,EAAU,MAAM;AAE3E,SAAO,IAAQ;GAAE,OAAO,EAAM;GAAO,OAAO,EAAU;GAAO,GAAG;GAChE;;AAGJ,SAAgB,EAAc,GAA+B,GAAe,GAAyC;AACnH,KAAI,KAAY,CAAC,EAAO,QAAO;CAE/B,IAAM,IAAkB,EAAM,aAAa;AAE3C,QAAO,EAAQ,QAAQ,MAAW,EAAO,MAAM,aAAa,CAAC,SAAS,EAAgB,CAAC;;AAGzF,SAAgB,EAAkB,GAAe,GAAoB,GAA+C;AAClH,KAAI,CAAC,KAAa,CAAC,EAAO,QAAO;CAEjC,IAAM,IAAe,EAAM,MAAM;AAMjC,QAJK,IAEc,EAAgB,MAAM,MAAW,EAAO,MAAM,aAAa,KAAK,EAAa,aAAa,CAAC,GAE1F,KAAK,IAJC;;AAO5B,SAAgB,EAAmB,GAAuB;AACxD,QAAO,EAAM,aAAa,CAAC,QAAQ,QAAQ,IAAI"}

package/dist/inputs/combobox/combobox-virtualizer.cjs

@@ -0,0 +1,2 @@
+const e=require(`../../virtualit/dist/dom/dom.cjs`);require(`../../virtualit/dist/dom.cjs`);function t(t){let n=[],r=null;function i(e){return t.getIsMultiple()?t.getSelectedValues().some(t=>t.value===e.value):e.value===t.getSelectedValue()}function a(e){if(!r)return;for(let e of Array.from(r.querySelectorAll(`.option`)))e.remove();let a=t.getFocusedIndex();for(let o of e){let e=n[o.index];if(!e)continue;let s=i(e),c=document.createElement(`div`);if(c.className=`option`,c.setAttribute(`role`,`option`),c.id=`${t.comboId}-opt-${o.index}`,c.setAttribute(`aria-selected`,String(s)),c.setAttribute(`aria-disabled`,String(!!e.disabled)),c.style.cssText=`position:absolute;top:0;left:0;right:0;transform:translateY(${o.top}px);`,a===o.index&&c.setAttribute(`data-focused`,``),s&&c.setAttribute(`data-selected`,``),e.disabled&&c.setAttribute(`data-disabled`,``),e.iconEl){let t=document.createElement(`span`);t.className=`option-icon`,t.setAttribute(`aria-hidden`,`true`);let n=e.iconEl.cloneNode(!0);n.removeAttribute(`slot`),t.appendChild(n),c.appendChild(t)}let l=document.createElement(`span`);l.textContent=e.label,c.appendChild(l);let u=document.createElement(`span`);u.className=`option-check`,u.setAttribute(`aria-hidden`,`true`),u.innerHTML=t.checkIconHTML,c.appendChild(u),c.addEventListener(`pointerdown`,e=>{e.preventDefault()}),c.addEventListener(`click`,n=>{n.stopPropagation(),t.onSelectOption(e,n)}),c.addEventListener(`pointerenter`,()=>{t.setFocusedIndex(o.index);for(let e of r.querySelectorAll(`[data-focused]`))e.removeAttribute(`data-focused`);c.setAttribute(`data-focused`,``)}),r.appendChild(c)}}function o(){if(!r)return;let e=t.getFocusedIndex();for(let a of r.querySelectorAll(`.option`)){let r=Number(a.id.replace(`${t.comboId}-opt-`,``)),o=n[r];if(!o)continue;let s=i(o);a.toggleAttribute(`data-focused`,r===e),a.toggleAttribute(`data-selected`,s),a.setAttribute(`aria-selected`,String(s))}}let s=e.t({clear:e=>{for(let t of Array.from(e.querySelectorAll(`.option`)))t.remove()},estimateSize:36,getListElement:t.getListboxElement,getScrollElement:t.getDropdownElement,overscan:4,render:({items:e,listEl:t,virtualItems:i})=>{n=e,r=t,a(i)}});function c(e,t){n=e,s.update(n,t)}return{domVirtualList:s,setupVirtualizer:c,updateRenderedItemState:o}}exports.createComboboxVirtualizer=t;
+//# sourceMappingURL=combobox-virtualizer.cjs.map

package/dist/inputs/combobox/combobox-virtualizer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-virtualizer.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"sourcesContent":["import { createDomVirtualList, type VirtualItem } from '@vielzeug/virtualit/dom';\n\nimport type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\ntype ComboboxVirtualizerDeps = {\n  checkIconHTML: string;\n  comboId: string;\n  getDropdownElement: () => HTMLElement | null;\n  getFocusedIndex: () => number;\n  getIsMultiple: () => boolean;\n  getListboxElement: () => HTMLElement | null;\n  getSelectedValue: () => string;\n  getSelectedValues: () => ComboboxSelectionItem[];\n  onSelectOption: (opt: ComboboxOptionItem, event?: Event) => void;\n  setFocusedIndex: (index: number) => void;\n};\n\nexport function createComboboxVirtualizer(deps: ComboboxVirtualizerDeps) {\n  let currentOptions: ComboboxOptionItem[] = [];\n  let cachedListbox: HTMLElement | null = null;\n\n  function isSelectedOption(option: ComboboxOptionItem): boolean {\n    if (deps.getIsMultiple()) return deps.getSelectedValues().some((selected) => selected.value === option.value);\n\n    return option.value === deps.getSelectedValue();\n  }\n\n  function renderVirtualItems(virtualItems: VirtualItem[]) {\n    if (!cachedListbox) return;\n\n    for (const element of Array.from(cachedListbox.querySelectorAll('.option'))) element.remove();\n\n    const focused = deps.getFocusedIndex();\n\n    for (const item of virtualItems) {\n      const option = currentOptions[item.index];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n      const optionElement = document.createElement('div');\n\n      optionElement.className = 'option';\n      optionElement.setAttribute('role', 'option');\n      optionElement.id = `${deps.comboId}-opt-${item.index}`;\n      optionElement.setAttribute('aria-selected', String(isSelected));\n      optionElement.setAttribute('aria-disabled', String(!!option.disabled));\n      optionElement.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${item.top}px);`;\n\n      if (focused === item.index) optionElement.setAttribute('data-focused', '');\n\n      if (isSelected) optionElement.setAttribute('data-selected', '');\n\n      if (option.disabled) optionElement.setAttribute('data-disabled', '');\n\n      if (option.iconEl) {\n        const iconWrapper = document.createElement('span');\n\n        iconWrapper.className = 'option-icon';\n        iconWrapper.setAttribute('aria-hidden', 'true');\n\n        const iconClone = option.iconEl.cloneNode(true) as Element;\n\n        iconClone.removeAttribute('slot');\n        iconWrapper.appendChild(iconClone);\n        optionElement.appendChild(iconWrapper);\n      }\n\n      const labelElement = document.createElement('span');\n\n      labelElement.textContent = option.label;\n      optionElement.appendChild(labelElement);\n\n      const checkElement = document.createElement('span');\n\n      checkElement.className = 'option-check';\n      checkElement.setAttribute('aria-hidden', 'true');\n      checkElement.innerHTML = deps.checkIconHTML;\n      optionElement.appendChild(checkElement);\n      optionElement.addEventListener('pointerdown', (event: PointerEvent) => {\n        event.preventDefault();\n      });\n      optionElement.addEventListener('click', (event: MouseEvent) => {\n        event.stopPropagation();\n        deps.onSelectOption(option, event);\n      });\n      optionElement.addEventListener('pointerenter', () => {\n        deps.setFocusedIndex(item.index);\n\n        for (const focusedElement of cachedListbox!.querySelectorAll<HTMLElement>('[data-focused]')) {\n          focusedElement.removeAttribute('data-focused');\n        }\n        optionElement.setAttribute('data-focused', '');\n      });\n      cachedListbox.appendChild(optionElement);\n    }\n  }\n\n  function updateRenderedItemState() {\n    if (!cachedListbox) return;\n\n    const focused = deps.getFocusedIndex();\n\n    for (const element of cachedListbox.querySelectorAll<HTMLElement>('.option')) {\n      const idx = Number(element.id.replace(`${deps.comboId}-opt-`, ''));\n      const option = currentOptions[idx];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n\n      element.toggleAttribute('data-focused', idx === focused);\n      element.toggleAttribute('data-selected', isSelected);\n      element.setAttribute('aria-selected', String(isSelected));\n    }\n  }\n\n  const domVirtualList = createDomVirtualList<ComboboxOptionItem>({\n    clear: (listEl) => {\n      for (const element of Array.from(listEl.querySelectorAll('.option'))) element.remove();\n    },\n    estimateSize: 36,\n    getListElement: deps.getListboxElement,\n    getScrollElement: deps.getDropdownElement,\n    overscan: 4,\n    render: ({ items, listEl, virtualItems }) => {\n      currentOptions = items;\n      cachedListbox = listEl;\n      renderVirtualItems(virtualItems);\n    },\n  });\n\n  function setupVirtualizer(options: ComboboxOptionItem[], isOpen: boolean) {\n    currentOptions = options;\n    domVirtualList.update(currentOptions, isOpen);\n  }\n\n  return { domVirtualList, setupVirtualizer, updateRenderedItemState };\n}\n"],"mappings":"4FAiBA,SAAgB,EAA0B,EAA+B,CACvE,IAAI,EAAuC,EAAE,CACzC,EAAoC,KAExC,SAAS,EAAiB,EAAqC,CAG7D,OAFI,EAAK,eAAe,CAAS,EAAK,mBAAmB,CAAC,KAAM,GAAa,EAAS,QAAU,EAAO,MAAM,CAEtG,EAAO,QAAU,EAAK,kBAAkB,CAGjD,SAAS,EAAmB,EAA6B,CACvD,GAAI,CAAC,EAAe,OAEpB,IAAK,IAAM,KAAW,MAAM,KAAK,EAAc,iBAAiB,UAAU,CAAC,CAAE,EAAQ,QAAQ,CAE7F,IAAM,EAAU,EAAK,iBAAiB,CAEtC,IAAK,IAAM,KAAQ,EAAc,CAC/B,IAAM,EAAS,EAAe,EAAK,OAEnC,GAAI,CAAC,EAAQ,SAEb,IAAM,EAAa,EAAiB,EAAO,CACrC,EAAgB,SAAS,cAAc,MAAM,CAenD,GAbA,EAAc,UAAY,SAC1B,EAAc,aAAa,OAAQ,SAAS,CAC5C,EAAc,GAAK,GAAG,EAAK,QAAQ,OAAO,EAAK,QAC/C,EAAc,aAAa,gBAAiB,OAAO,EAAW,CAAC,CAC/D,EAAc,aAAa,gBAAiB,OAAO,CAAC,CAAC,EAAO,SAAS,CAAC,CACtE,EAAc,MAAM,QAAU,+DAA+D,EAAK,IAAI,MAElG,IAAY,EAAK,OAAO,EAAc,aAAa,eAAgB,GAAG,CAEtE,GAAY,EAAc,aAAa,gBAAiB,GAAG,CAE3D,EAAO,UAAU,EAAc,aAAa,gBAAiB,GAAG,CAEhE,EAAO,OAAQ,CACjB,IAAM,EAAc,SAAS,cAAc,OAAO,CAElD,EAAY,UAAY,cACxB,EAAY,aAAa,cAAe,OAAO,CAE/C,IAAM,EAAY,EAAO,OAAO,UAAU,GAAK,CAE/C,EAAU,gBAAgB,OAAO,CACjC,EAAY,YAAY,EAAU,CAClC,EAAc,YAAY,EAAY,CAGxC,IAAM,EAAe,SAAS,cAAc,OAAO,CAEnD,EAAa,YAAc,EAAO,MAClC,EAAc,YAAY,EAAa,CAEvC,IAAM,EAAe,SAAS,cAAc,OAAO,CAEnD,EAAa,UAAY,eACzB,EAAa,aAAa,cAAe,OAAO,CAChD,EAAa,UAAY,EAAK,cAC9B,EAAc,YAAY,EAAa,CACvC,EAAc,iBAAiB,cAAgB,GAAwB,CACrE,EAAM,gBAAgB,EACtB,CACF,EAAc,iBAAiB,QAAU,GAAsB,CAC7D,EAAM,iBAAiB,CACvB,EAAK,eAAe,EAAQ,EAAM,EAClC,CACF,EAAc,iBAAiB,mBAAsB,CACnD,EAAK,gBAAgB,EAAK,MAAM,CAEhC,IAAK,IAAM,KAAkB,EAAe,iBAA8B,iBAAiB,CACzF,EAAe,gBAAgB,eAAe,CAEhD,EAAc,aAAa,eAAgB,GAAG,EAC9C,CACF,EAAc,YAAY,EAAc,EAI5C,SAAS,GAA0B,CACjC,GAAI,CAAC,EAAe,OAEpB,IAAM,EAAU,EAAK,iBAAiB,CAEtC,IAAK,IAAM,KAAW,EAAc,iBAA8B,UAAU,CAAE,CAC5E,IAAM,EAAM,OAAO,EAAQ,GAAG,QAAQ,GAAG,EAAK,QAAQ,OAAQ,GAAG,CAAC,CAC5D,EAAS,EAAe,GAE9B,GAAI,CAAC,EAAQ,SAEb,IAAM,EAAa,EAAiB,EAAO,CAE3C,EAAQ,gBAAgB,eAAgB,IAAQ,EAAQ,CACxD,EAAQ,gBAAgB,gBAAiB,EAAW,CACpD,EAAQ,aAAa,gBAAiB,OAAO,EAAW,CAAC,EAI7D,IAAM,EAAiB,EAAA,EAAyC,CAC9D,MAAQ,GAAW,CACjB,IAAK,IAAM,KAAW,MAAM,KAAK,EAAO,iBAAiB,UAAU,CAAC,CAAE,EAAQ,QAAQ,EAExF,aAAc,GACd,eAAgB,EAAK,kBACrB,iBAAkB,EAAK,mBACvB,SAAU,EACV,QAAS,CAAE,QAAO,SAAQ,kBAAmB,CAC3C,EAAiB,EACjB,EAAgB,EAChB,EAAmB,EAAa,EAEnC,CAAC,CAEF,SAAS,EAAiB,EAA+B,EAAiB,CACxE,EAAiB,EACjB,EAAe,OAAO,EAAgB,EAAO,CAG/C,MAAO,CAAE,iBAAgB,mBAAkB,0BAAyB"}

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

@@ -0,0 +1,20 @@
+import type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';
+type ComboboxVirtualizerDeps = {
+    checkIconHTML: string;
+    comboId: string;
+    getDropdownElement: () => HTMLElement | null;
+    getFocusedIndex: () => number;
+    getIsMultiple: () => boolean;
+    getListboxElement: () => HTMLElement | null;
+    getSelectedValue: () => string;
+    getSelectedValues: () => ComboboxSelectionItem[];
+    onSelectOption: (opt: ComboboxOptionItem, event?: Event) => void;
+    setFocusedIndex: (index: number) => void;
+};
+export declare function createComboboxVirtualizer(deps: ComboboxVirtualizerDeps): {
+    domVirtualList: import("@vielzeug/virtualit/dom").DomVirtualListController<ComboboxOptionItem>;
+    setupVirtualizer: (options: ComboboxOptionItem[], isOpen: boolean) => void;
+    updateRenderedItemState: () => void;
+};
+export {};
+//# sourceMappingURL=combobox-virtualizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-virtualizer.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAElF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,iBAAiB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC5C,gBAAgB,EAAE,MAAM,MAAM,CAAC;IAC/B,iBAAiB,EAAE,MAAM,qBAAqB,EAAE,CAAC;IACjD,cAAc,EAAE,CAAC,GAAG,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjE,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,uBAAuB;;gCAmHlC,kBAAkB,EAAE,UAAU,OAAO;;EAMzE"}

package/dist/inputs/combobox/combobox-virtualizer.js

@@ -0,0 +1,71 @@
+import { t as e } from "../../virtualit/dist/dom/dom.js";
+import "../../virtualit/dist/dom.js";
+//#region src/inputs/combobox/combobox-virtualizer.ts
+function t(t) {
+	let n = [], r = null;
+	function i(e) {
+		return t.getIsMultiple() ? t.getSelectedValues().some((t) => t.value === e.value) : e.value === t.getSelectedValue();
+	}
+	function a(e) {
+		if (!r) return;
+		for (let e of Array.from(r.querySelectorAll(".option"))) e.remove();
+		let a = t.getFocusedIndex();
+		for (let o of e) {
+			let e = n[o.index];
+			if (!e) continue;
+			let s = i(e), c = document.createElement("div");
+			if (c.className = "option", c.setAttribute("role", "option"), c.id = `${t.comboId}-opt-${o.index}`, c.setAttribute("aria-selected", String(s)), c.setAttribute("aria-disabled", String(!!e.disabled)), c.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${o.top}px);`, a === o.index && c.setAttribute("data-focused", ""), s && c.setAttribute("data-selected", ""), e.disabled && c.setAttribute("data-disabled", ""), e.iconEl) {
+				let t = document.createElement("span");
+				t.className = "option-icon", t.setAttribute("aria-hidden", "true");
+				let n = e.iconEl.cloneNode(!0);
+				n.removeAttribute("slot"), t.appendChild(n), c.appendChild(t);
+			}
+			let l = document.createElement("span");
+			l.textContent = e.label, c.appendChild(l);
+			let u = document.createElement("span");
+			u.className = "option-check", u.setAttribute("aria-hidden", "true"), u.innerHTML = t.checkIconHTML, c.appendChild(u), c.addEventListener("pointerdown", (e) => {
+				e.preventDefault();
+			}), c.addEventListener("click", (n) => {
+				n.stopPropagation(), t.onSelectOption(e, n);
+			}), c.addEventListener("pointerenter", () => {
+				t.setFocusedIndex(o.index);
+				for (let e of r.querySelectorAll("[data-focused]")) e.removeAttribute("data-focused");
+				c.setAttribute("data-focused", "");
+			}), r.appendChild(c);
+		}
+	}
+	function o() {
+		if (!r) return;
+		let e = t.getFocusedIndex();
+		for (let a of r.querySelectorAll(".option")) {
+			let r = Number(a.id.replace(`${t.comboId}-opt-`, "")), o = n[r];
+			if (!o) continue;
+			let s = i(o);
+			a.toggleAttribute("data-focused", r === e), a.toggleAttribute("data-selected", s), a.setAttribute("aria-selected", String(s));
+		}
+	}
+	let s = e({
+		clear: (e) => {
+			for (let t of Array.from(e.querySelectorAll(".option"))) t.remove();
+		},
+		estimateSize: 36,
+		getListElement: t.getListboxElement,
+		getScrollElement: t.getDropdownElement,
+		overscan: 4,
+		render: ({ items: e, listEl: t, virtualItems: i }) => {
+			n = e, r = t, a(i);
+		}
+	});
+	function c(e, t) {
+		n = e, s.update(n, t);
+	}
+	return {
+		domVirtualList: s,
+		setupVirtualizer: c,
+		updateRenderedItemState: o
+	};
+}
+//#endregion
+export { t as createComboboxVirtualizer };
+
+//# sourceMappingURL=combobox-virtualizer.js.map

package/dist/inputs/combobox/combobox-virtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-virtualizer.js","names":[],"sources":["../../../src/inputs/combobox/combobox-virtualizer.ts"],"sourcesContent":["import { createDomVirtualList, type VirtualItem } from '@vielzeug/virtualit/dom';\n\nimport type { ComboboxOptionItem, ComboboxSelectionItem } from './combobox.types';\n\ntype ComboboxVirtualizerDeps = {\n  checkIconHTML: string;\n  comboId: string;\n  getDropdownElement: () => HTMLElement | null;\n  getFocusedIndex: () => number;\n  getIsMultiple: () => boolean;\n  getListboxElement: () => HTMLElement | null;\n  getSelectedValue: () => string;\n  getSelectedValues: () => ComboboxSelectionItem[];\n  onSelectOption: (opt: ComboboxOptionItem, event?: Event) => void;\n  setFocusedIndex: (index: number) => void;\n};\n\nexport function createComboboxVirtualizer(deps: ComboboxVirtualizerDeps) {\n  let currentOptions: ComboboxOptionItem[] = [];\n  let cachedListbox: HTMLElement | null = null;\n\n  function isSelectedOption(option: ComboboxOptionItem): boolean {\n    if (deps.getIsMultiple()) return deps.getSelectedValues().some((selected) => selected.value === option.value);\n\n    return option.value === deps.getSelectedValue();\n  }\n\n  function renderVirtualItems(virtualItems: VirtualItem[]) {\n    if (!cachedListbox) return;\n\n    for (const element of Array.from(cachedListbox.querySelectorAll('.option'))) element.remove();\n\n    const focused = deps.getFocusedIndex();\n\n    for (const item of virtualItems) {\n      const option = currentOptions[item.index];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n      const optionElement = document.createElement('div');\n\n      optionElement.className = 'option';\n      optionElement.setAttribute('role', 'option');\n      optionElement.id = `${deps.comboId}-opt-${item.index}`;\n      optionElement.setAttribute('aria-selected', String(isSelected));\n      optionElement.setAttribute('aria-disabled', String(!!option.disabled));\n      optionElement.style.cssText = `position:absolute;top:0;left:0;right:0;transform:translateY(${item.top}px);`;\n\n      if (focused === item.index) optionElement.setAttribute('data-focused', '');\n\n      if (isSelected) optionElement.setAttribute('data-selected', '');\n\n      if (option.disabled) optionElement.setAttribute('data-disabled', '');\n\n      if (option.iconEl) {\n        const iconWrapper = document.createElement('span');\n\n        iconWrapper.className = 'option-icon';\n        iconWrapper.setAttribute('aria-hidden', 'true');\n\n        const iconClone = option.iconEl.cloneNode(true) as Element;\n\n        iconClone.removeAttribute('slot');\n        iconWrapper.appendChild(iconClone);\n        optionElement.appendChild(iconWrapper);\n      }\n\n      const labelElement = document.createElement('span');\n\n      labelElement.textContent = option.label;\n      optionElement.appendChild(labelElement);\n\n      const checkElement = document.createElement('span');\n\n      checkElement.className = 'option-check';\n      checkElement.setAttribute('aria-hidden', 'true');\n      checkElement.innerHTML = deps.checkIconHTML;\n      optionElement.appendChild(checkElement);\n      optionElement.addEventListener('pointerdown', (event: PointerEvent) => {\n        event.preventDefault();\n      });\n      optionElement.addEventListener('click', (event: MouseEvent) => {\n        event.stopPropagation();\n        deps.onSelectOption(option, event);\n      });\n      optionElement.addEventListener('pointerenter', () => {\n        deps.setFocusedIndex(item.index);\n\n        for (const focusedElement of cachedListbox!.querySelectorAll<HTMLElement>('[data-focused]')) {\n          focusedElement.removeAttribute('data-focused');\n        }\n        optionElement.setAttribute('data-focused', '');\n      });\n      cachedListbox.appendChild(optionElement);\n    }\n  }\n\n  function updateRenderedItemState() {\n    if (!cachedListbox) return;\n\n    const focused = deps.getFocusedIndex();\n\n    for (const element of cachedListbox.querySelectorAll<HTMLElement>('.option')) {\n      const idx = Number(element.id.replace(`${deps.comboId}-opt-`, ''));\n      const option = currentOptions[idx];\n\n      if (!option) continue;\n\n      const isSelected = isSelectedOption(option);\n\n      element.toggleAttribute('data-focused', idx === focused);\n      element.toggleAttribute('data-selected', isSelected);\n      element.setAttribute('aria-selected', String(isSelected));\n    }\n  }\n\n  const domVirtualList = createDomVirtualList<ComboboxOptionItem>({\n    clear: (listEl) => {\n      for (const element of Array.from(listEl.querySelectorAll('.option'))) element.remove();\n    },\n    estimateSize: 36,\n    getListElement: deps.getListboxElement,\n    getScrollElement: deps.getDropdownElement,\n    overscan: 4,\n    render: ({ items, listEl, virtualItems }) => {\n      currentOptions = items;\n      cachedListbox = listEl;\n      renderVirtualItems(virtualItems);\n    },\n  });\n\n  function setupVirtualizer(options: ComboboxOptionItem[], isOpen: boolean) {\n    currentOptions = options;\n    domVirtualList.update(currentOptions, isOpen);\n  }\n\n  return { domVirtualList, setupVirtualizer, updateRenderedItemState };\n}\n"],"mappings":";;;AAiBA,SAAgB,EAA0B,GAA+B;CACvE,IAAI,IAAuC,EAAE,EACzC,IAAoC;CAExC,SAAS,EAAiB,GAAqC;AAG7D,SAFI,EAAK,eAAe,GAAS,EAAK,mBAAmB,CAAC,MAAM,MAAa,EAAS,UAAU,EAAO,MAAM,GAEtG,EAAO,UAAU,EAAK,kBAAkB;;CAGjD,SAAS,EAAmB,GAA6B;AACvD,MAAI,CAAC,EAAe;AAEpB,OAAK,IAAM,KAAW,MAAM,KAAK,EAAc,iBAAiB,UAAU,CAAC,CAAE,GAAQ,QAAQ;EAE7F,IAAM,IAAU,EAAK,iBAAiB;AAEtC,OAAK,IAAM,KAAQ,GAAc;GAC/B,IAAM,IAAS,EAAe,EAAK;AAEnC,OAAI,CAAC,EAAQ;GAEb,IAAM,IAAa,EAAiB,EAAO,EACrC,IAAgB,SAAS,cAAc,MAAM;AAenD,OAbA,EAAc,YAAY,UAC1B,EAAc,aAAa,QAAQ,SAAS,EAC5C,EAAc,KAAK,GAAG,EAAK,QAAQ,OAAO,EAAK,SAC/C,EAAc,aAAa,iBAAiB,OAAO,EAAW,CAAC,EAC/D,EAAc,aAAa,iBAAiB,OAAO,CAAC,CAAC,EAAO,SAAS,CAAC,EACtE,EAAc,MAAM,UAAU,+DAA+D,EAAK,IAAI,OAElG,MAAY,EAAK,SAAO,EAAc,aAAa,gBAAgB,GAAG,EAEtE,KAAY,EAAc,aAAa,iBAAiB,GAAG,EAE3D,EAAO,YAAU,EAAc,aAAa,iBAAiB,GAAG,EAEhE,EAAO,QAAQ;IACjB,IAAM,IAAc,SAAS,cAAc,OAAO;AAGlD,IADA,EAAY,YAAY,eACxB,EAAY,aAAa,eAAe,OAAO;IAE/C,IAAM,IAAY,EAAO,OAAO,UAAU,GAAK;AAI/C,IAFA,EAAU,gBAAgB,OAAO,EACjC,EAAY,YAAY,EAAU,EAClC,EAAc,YAAY,EAAY;;GAGxC,IAAM,IAAe,SAAS,cAAc,OAAO;AAGnD,GADA,EAAa,cAAc,EAAO,OAClC,EAAc,YAAY,EAAa;GAEvC,IAAM,IAAe,SAAS,cAAc,OAAO;AAqBnD,GAnBA,EAAa,YAAY,gBACzB,EAAa,aAAa,eAAe,OAAO,EAChD,EAAa,YAAY,EAAK,eAC9B,EAAc,YAAY,EAAa,EACvC,EAAc,iBAAiB,gBAAgB,MAAwB;AACrE,MAAM,gBAAgB;KACtB,EACF,EAAc,iBAAiB,UAAU,MAAsB;AAE7D,IADA,EAAM,iBAAiB,EACvB,EAAK,eAAe,GAAQ,EAAM;KAClC,EACF,EAAc,iBAAiB,sBAAsB;AACnD,MAAK,gBAAgB,EAAK,MAAM;AAEhC,SAAK,IAAM,KAAkB,EAAe,iBAA8B,iBAAiB,CACzF,GAAe,gBAAgB,eAAe;AAEhD,MAAc,aAAa,gBAAgB,GAAG;KAC9C,EACF,EAAc,YAAY,EAAc;;;CAI5C,SAAS,IAA0B;AACjC,MAAI,CAAC,EAAe;EAEpB,IAAM,IAAU,EAAK,iBAAiB;AAEtC,OAAK,IAAM,KAAW,EAAc,iBAA8B,UAAU,EAAE;GAC5E,IAAM,IAAM,OAAO,EAAQ,GAAG,QAAQ,GAAG,EAAK,QAAQ,QAAQ,GAAG,CAAC,EAC5D,IAAS,EAAe;AAE9B,OAAI,CAAC,EAAQ;GAEb,IAAM,IAAa,EAAiB,EAAO;AAI3C,GAFA,EAAQ,gBAAgB,gBAAgB,MAAQ,EAAQ,EACxD,EAAQ,gBAAgB,iBAAiB,EAAW,EACpD,EAAQ,aAAa,iBAAiB,OAAO,EAAW,CAAC;;;CAI7D,IAAM,IAAiB,EAAyC;EAC9D,QAAQ,MAAW;AACjB,QAAK,IAAM,KAAW,MAAM,KAAK,EAAO,iBAAiB,UAAU,CAAC,CAAE,GAAQ,QAAQ;;EAExF,cAAc;EACd,gBAAgB,EAAK;EACrB,kBAAkB,EAAK;EACvB,UAAU;EACV,SAAS,EAAE,UAAO,WAAQ,sBAAmB;AAG3C,GAFA,IAAiB,GACjB,IAAgB,GAChB,EAAmB,EAAa;;EAEnC,CAAC;CAEF,SAAS,EAAiB,GAA+B,GAAiB;AAExE,EADA,IAAiB,GACjB,EAAe,OAAO,GAAgB,EAAO;;AAG/C,QAAO;EAAE;EAAgB;EAAkB;EAAyB"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_font-size:var(--combobox-font-size,var(--text-sm));--_gap:var(--combobox-gap,var(--size-2));--_field-height:var(--combobox-height,var(--size-10));--_row-min-height:calc(var(--leading-normal) * var(--_font-size) + 2px);--_padding:var(--combobox-padding,var(--size-1-5) var(--size-3));--_radius:var(--combobox-radius,var(--rounded-lg));--_placeholder:var(--combobox-placeholder-color,var(--color-contrast-500));--_bg:var(--combobox-bg,var(--color-contrast-100));--_border-color:var(--combobox-border-color,var(--color-contrast-300));flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}:host([fullwidth]){width:100%}.combobox-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.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)}.field{box-sizing:border-box;height:var(--_field-height);min-height:max(var(--_field-height), var(--_touch-target,0px));padding:var(--_padding);cursor:text;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), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex;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)}:host([multiple]) .field{height:auto}.field:has(.label-inset:not([hidden])){height:auto}:host([clearable]) .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))){padding-right:var(--size-14)}:host([clearable]) .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)){padding-left:var(--size-14)}.field-row{gap:var(--_gap);row-gap:var(--size-1);min-height:var(--_row-min-height);flex-wrap:wrap;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-list{display:contents}.input{min-width:4rem;height:var(--_row-min-height);font-family:inherit;font-size:var(--_font-size);color:var(--color-contrast-900);background:0 0;border:0;outline:none;flex:4rem;padding:0;line-height:1}:host([multiple]) .input{flex-basis:6rem;min-width:6rem}:host([multiple]) .chips-row:has(bit-chip) .input{flex:0 2.25rem;min-width:2.25rem}.input::placeholder{color:var(--_placeholder)}.chevron{color:var(--color-contrast-500);pointer-events:none;transition:var(--_motion-transition,transform var(--transition-fast), color var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.chevron: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-5)}.chevron: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-5)}:host([open]) .chevron{color:var(--_theme-focus,var(--color-primary));transform:translateY(-50%)rotate(180deg)}.chevron .loader{width:1em;height:1em;animation:var(--_motion-animation,bit-combobox-spin .6s linear infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.chevron .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}.chevron .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]) .chevron .loader{display:inline-block}:host([loading]) .chevron svg{display:none}@keyframes bit-combobox-spin{to{transform:rotate(360deg)}}.clear-btn{visibility:hidden;color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.clear-btn: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-9)}.clear-btn: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-9)}.clear-btn:hover{color:var(--color-contrast-600)}:host([clearable]) .clear-btn:not([hidden]){visibility:visible}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;visibility:hidden;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;scrollbar-width:thin;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));margin:0;position:fixed;top:0;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;left:0}.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;right:0}.dropdown[data-open]{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0)}.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:not(:is(.option-check,.option-icon)){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}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--_font-size);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--_font-size);color:var(--_theme-content,var(--color-primary-content));cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create: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}.no-results-create: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}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in srgb, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(bit-combobox-option){display:none}.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([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=""])) .label-inset,:host([error]:not([error=""])) .label-outside{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .field,:host([variant=solid]) .field{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]) .field{border-color:var(--_theme-border);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .field:focus-within{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .field{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) .input{color:var(--color-contrast-900)}:host([variant=bordered]) .input::placeholder{color:var(--_placeholder)}:host([variant=bordered]) .field:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .field{box-shadow:none;background:0 0}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]) .field{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .field:hover{background:var(--color-contrast-100)}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer buildit.utilities{:host([fullwidth]){width:100%;display:flex}}`;exports.default=e;
+//# sourceMappingURL=combobox.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.css?inline.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--combobox-font-size, var(--text-sm));\n    --_gap: var(--combobox-gap, var(--size-2));\n    --_field-height: var(--combobox-height, var(--size-10));\n    --_row-min-height: calc(var(--leading-normal) * var(--_font-size) + 2px);\n    --_padding: var(--combobox-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--combobox-radius, var(--rounded-lg));\n    --_placeholder: var(--combobox-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--combobox-bg, var(--color-contrast-100));\n    --_border-color: var(--combobox-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  .combobox-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-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  /* ========================================\n       Field / Input\n       ======================================== */\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: 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: text;\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      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast)\n    );\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  :host([clearable]) .field {\n    padding-inline-end: var(--size-14);\n  }\n\n  .field-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--_gap);\n    row-gap: var(--size-1);\n    align-items: center;\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-list {\n    /* Wrapper exists for list diffing isolation; keep chip layout unchanged. */\n    display: contents;\n  }\n\n  .input {\n    flex: 1 1 4rem;\n    min-width: 4rem;\n    height: var(--_row-min-height);\n    padding: 0;\n    font-family: inherit;\n    font-size: var(--_font-size);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: 0;\n  }\n\n  :host([multiple]) .input {\n    flex-basis: 6rem;\n    min-width: 6rem;\n  }\n\n  :host([multiple]) .chips-row:has(bit-chip) .input {\n    flex: 0 1 2.25rem;\n    min-width: 2.25rem;\n  }\n\n  .input::placeholder {\n    color: var(--_placeholder);\n  }\n\n  .chevron {\n    position: absolute;\n    inset-inline-end: var(--size-2-5);\n    top: 50%;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--color-contrast-500);\n    pointer-events: none;\n    transform: translateY(-50%);\n    transition: var(--_motion-transition, transform var(--transition-fast), color var(--transition-fast));\n  }\n\n  :host([open]) .chevron {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-50%) rotate(180deg);\n  }\n\n  .chevron .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-combobox-spin 0.6s linear infinite);\n  }\n\n  :host([loading]) .chevron .loader {\n    display: inline-block;\n  }\n\n  :host([loading]) .chevron svg {\n    display: none;\n  }\n\n  @keyframes bit-combobox-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .clear-btn {\n    position: absolute;\n    inset-inline-end: var(--size-9);\n    top: 50%;\n    display: inline-flex;\n    visibility: hidden;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 0;\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: none;\n    border: 0;\n    transform: translateY(-50%);\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-600);\n  }\n\n  :host([clearable]) .clear-btn:not([hidden]) {\n    visibility: visible;\n  }\n\n  /* ========================================\n       Dropdown / Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset-inline-start: 0;\n    top: 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    visibility: hidden;\n    max-height: min(16rem, 50dvh);\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    scrollbar-width: thin;\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    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  /* ========================================\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 so options always stay single-line (fixed virtualizer row height). */\n  .option > span:not(.option-check, .option-icon) {\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  .no-results,\n  .no-results-create,\n  .dropdown-loading {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--_font-size);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .no-results-create {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: 100%;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--_font-size);\n    color: var(--_theme-content, var(--color-primary-content));\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--rounded-sm);\n  }\n\n  .no-results-create:hover,\n  .no-results-create[data-focused] {\n    background: color-mix(in srgb, var(--_theme-base, var(--color-primary)) 10%, transparent);\n  }\n\n  /* ========================================\n       Option Icon\n       ======================================== */\n\n  .option-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  /* ========================================\n       Slotted option elements (hidden data nodes)\n       ======================================== */\n\n  ::slotted(bit-combobox-option) {\n    display: none;\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       Focus / Hover 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  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) */\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 */\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 */\n  :host([variant='bordered']) .field {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) .input {\n    color: var(--color-contrast-900);\n  }\n\n  :host([variant='bordered']) .input::placeholder {\n    color: var(--_placeholder);\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline */\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 */\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/combobox/combobox.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/combobox/combobox.css?inline
+var e = "@layer buildit.base{:host{--_font-size:var(--combobox-font-size,var(--text-sm));--_gap:var(--combobox-gap,var(--size-2));--_field-height:var(--combobox-height,var(--size-10));--_row-min-height:calc(var(--leading-normal) * var(--_font-size) + 2px);--_padding:var(--combobox-padding,var(--size-1-5) var(--size-3));--_radius:var(--combobox-radius,var(--rounded-lg));--_placeholder:var(--combobox-placeholder-color,var(--color-contrast-500));--_bg:var(--combobox-bg,var(--color-contrast-100));--_border-color:var(--combobox-border-color,var(--color-contrast-300));flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}:host([fullwidth]){width:100%}.combobox-wrapper{gap:var(--size-1-5);flex-direction:column;width:100%;display:flex}.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)}.field{box-sizing:border-box;height:var(--_field-height);min-height:max(var(--_field-height), var(--_touch-target,0px));padding:var(--_padding);cursor:text;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), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast));flex-direction:column;justify-content:center;align-items:stretch;gap:0;display:flex;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)}:host([multiple]) .field{height:auto}.field:has(.label-inset:not([hidden])){height:auto}:host([clearable]) .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))){padding-right:var(--size-14)}:host([clearable]) .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)){padding-left:var(--size-14)}.field-row{gap:var(--_gap);row-gap:var(--size-1);min-height:var(--_row-min-height);flex-wrap:wrap;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-list{display:contents}.input{min-width:4rem;height:var(--_row-min-height);font-family:inherit;font-size:var(--_font-size);color:var(--color-contrast-900);background:0 0;border:0;outline:none;flex:4rem;padding:0;line-height:1}:host([multiple]) .input{flex-basis:6rem;min-width:6rem}:host([multiple]) .chips-row:has(bit-chip) .input{flex:0 2.25rem;min-width:2.25rem}.input::placeholder{color:var(--_placeholder)}.chevron{color:var(--color-contrast-500);pointer-events:none;transition:var(--_motion-transition,transform var(--transition-fast), color var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.chevron: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-5)}.chevron: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-5)}:host([open]) .chevron{color:var(--_theme-focus,var(--color-primary));transform:translateY(-50%)rotate(180deg)}.chevron .loader{width:1em;height:1em;animation:var(--_motion-animation,bit-combobox-spin .6s linear infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.chevron .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}.chevron .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]) .chevron .loader{display:inline-block}:host([loading]) .chevron svg{display:none}@keyframes bit-combobox-spin{to{transform:rotate(360deg)}}.clear-btn{visibility:hidden;color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.clear-btn: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-9)}.clear-btn: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-9)}.clear-btn:hover{color:var(--color-contrast-600)}:host([clearable]) .clear-btn:not([hidden]){visibility:visible}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;visibility:hidden;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;scrollbar-width:thin;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));margin:0;position:fixed;top:0;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;left:0}.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;right:0}.dropdown[data-open]{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0)}.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:not(:is(.option-check,.option-icon)){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}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--_font-size);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--_font-size);color:var(--_theme-content,var(--color-primary-content));cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create: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}.no-results-create: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}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in srgb, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(bit-combobox-option){display:none}.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([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=\"\"])) .label-inset,:host([error]:not([error=\"\"])) .label-outside{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .field,:host([variant=solid]) .field{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]) .field{border-color:var(--_theme-border);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .field:focus-within{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .field{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) .input{color:var(--color-contrast-900)}:host([variant=bordered]) .input::placeholder{color:var(--_placeholder)}:host([variant=bordered]) .field:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .field{box-shadow:none;background:0 0}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]) .field{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .field:hover{background:var(--color-contrast-100)}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer buildit.utilities{:host([fullwidth]){width:100%;display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=combobox.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.css?inline.js","names":[],"sources":["../../../src/inputs/combobox/combobox.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--combobox-font-size, var(--text-sm));\n    --_gap: var(--combobox-gap, var(--size-2));\n    --_field-height: var(--combobox-height, var(--size-10));\n    --_row-min-height: calc(var(--leading-normal) * var(--_font-size) + 2px);\n    --_padding: var(--combobox-padding, var(--size-1-5) var(--size-3));\n    --_radius: var(--combobox-radius, var(--rounded-lg));\n    --_placeholder: var(--combobox-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--combobox-bg, var(--color-contrast-100));\n    --_border-color: var(--combobox-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  .combobox-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    width: 100%;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label-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  /* ========================================\n       Field / Input\n       ======================================== */\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: 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: text;\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      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast)\n    );\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  :host([clearable]) .field {\n    padding-inline-end: var(--size-14);\n  }\n\n  .field-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--_gap);\n    row-gap: var(--size-1);\n    align-items: center;\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-list {\n    /* Wrapper exists for list diffing isolation; keep chip layout unchanged. */\n    display: contents;\n  }\n\n  .input {\n    flex: 1 1 4rem;\n    min-width: 4rem;\n    height: var(--_row-min-height);\n    padding: 0;\n    font-family: inherit;\n    font-size: var(--_font-size);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: 0;\n  }\n\n  :host([multiple]) .input {\n    flex-basis: 6rem;\n    min-width: 6rem;\n  }\n\n  :host([multiple]) .chips-row:has(bit-chip) .input {\n    flex: 0 1 2.25rem;\n    min-width: 2.25rem;\n  }\n\n  .input::placeholder {\n    color: var(--_placeholder);\n  }\n\n  .chevron {\n    position: absolute;\n    inset-inline-end: var(--size-2-5);\n    top: 50%;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    color: var(--color-contrast-500);\n    pointer-events: none;\n    transform: translateY(-50%);\n    transition: var(--_motion-transition, transform var(--transition-fast), color var(--transition-fast));\n  }\n\n  :host([open]) .chevron {\n    color: var(--_theme-focus, var(--color-primary));\n    transform: translateY(-50%) rotate(180deg);\n  }\n\n  .chevron .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-combobox-spin 0.6s linear infinite);\n  }\n\n  :host([loading]) .chevron .loader {\n    display: inline-block;\n  }\n\n  :host([loading]) .chevron svg {\n    display: none;\n  }\n\n  @keyframes bit-combobox-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .clear-btn {\n    position: absolute;\n    inset-inline-end: var(--size-9);\n    top: 50%;\n    display: inline-flex;\n    visibility: hidden;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 0;\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: none;\n    border: 0;\n    transform: translateY(-50%);\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-600);\n  }\n\n  :host([clearable]) .clear-btn:not([hidden]) {\n    visibility: visible;\n  }\n\n  /* ========================================\n       Dropdown / Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset-inline-start: 0;\n    top: 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    visibility: hidden;\n    max-height: min(16rem, 50dvh);\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    scrollbar-width: thin;\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    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  /* ========================================\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 so options always stay single-line (fixed virtualizer row height). */\n  .option > span:not(.option-check, .option-icon) {\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  .no-results,\n  .no-results-create,\n  .dropdown-loading {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--_font-size);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .no-results-create {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: 100%;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--_font-size);\n    color: var(--_theme-content, var(--color-primary-content));\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--rounded-sm);\n  }\n\n  .no-results-create:hover,\n  .no-results-create[data-focused] {\n    background: color-mix(in srgb, var(--_theme-base, var(--color-primary)) 10%, transparent);\n  }\n\n  /* ========================================\n       Option Icon\n       ======================================== */\n\n  .option-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  /* ========================================\n       Slotted option elements (hidden data nodes)\n       ======================================== */\n\n  ::slotted(bit-combobox-option) {\n    display: none;\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       Focus / Hover 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  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) */\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 */\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 */\n  :host([variant='bordered']) .field {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) .input {\n    color: var(--color-contrast-900);\n  }\n\n  :host([variant='bordered']) .input::placeholder {\n    color: var(--_placeholder);\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline */\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 */\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":""}