@reactzero/combo 0.1.0

package/dist/icons/defaults.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { IconSlots, ChevronStyle } from '../types';
+export declare const ChevronDownIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ArrowDownIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const AngleDownIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const PlusMinusIcon: ({ isOpen }: {
+    isOpen?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const DotsIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CheckIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ClearIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const SearchIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const defaultIcons: IconSlots;
+export declare const chevronPresets: Record<Exclude<ChevronStyle, 'custom'>, React.ReactNode>;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/icons/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/icons/defaults.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAMxD,eAAO,MAAM,eAAe,+CAI3B,CAAC;AAEF,eAAO,MAAM,aAAa,+CAIzB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAIzB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,YAAY;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,4CAK7D,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAMpB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAKtB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAYvB,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,SAM1B,CAAC;AAMF,eAAO,MAAM,cAAc,EAAE,MAAM,CACjC,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,EAC/B,KAAK,CAAC,SAAS,CAQhB,CAAC"}

package/dist/icons/icons.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import type { IconSlots, ChevronStyle } from '../types';
+/**
+ * Register a provider for built-in default icons.
+ * Called by entry points that want built-in SVGs available.
+ */
+export declare function registerDefaultIcons(provider: () => IconSlots): void;
+/**
+ * Register a provider for chevron preset icons.
+ * Called by entry points that want built-in chevron presets available.
+ */
+export declare function registerChevronPresets(provider: () => Record<string, ReactNode>): void;
+/**
+ * Set global default icons for all Combo instances.
+ */
+export declare function setDefaultIcons(overrides: Partial<IconSlots>): void;
+/**
+ * Reset global overrides (useful for tests).
+ */
+export declare function resetDefaultIcons(): void;
+/**
+ * Resolve icons with precedence: instance > global > registered defaults.
+ * If no provider is registered (hook-bare entry), base is emptyIcons (all null).
+ */
+export declare function resolveIcons(instanceOverrides?: Partial<IconSlots>): IconSlots;
+/**
+ * Resolve the chevron icon based on style preset or custom icon.
+ */
+export declare function resolveChevron(style: ChevronStyle, customIcon?: ReactNode): ReactNode;
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/icons/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAqBxD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,SAAS,GAAG,IAAI,CAEpE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GACxC,IAAI,CAEN;AAQD;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAEnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GACrC,SAAS,CAOX;AAMD;;GAEG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,UAAU,CAAC,EAAE,SAAS,GACrB,SAAS,CAKX"}

package/dist/icons-Ch1Q5AhF.js

@@ -0,0 +1,40 @@
+const o = {
+  chevronDown: null,
+  check: null,
+  clear: null,
+  search: null,
+  loading: null
+};
+let s = null, l = null;
+function u(e) {
+  s = e;
+}
+function c(e) {
+  l = e;
+}
+let n = {};
+function a(e) {
+  n = { ...n, ...e };
+}
+function i() {
+  n = {};
+}
+function f(e) {
+  return {
+    ...s?.() ?? o,
+    ...n,
+    ...e
+  };
+}
+function v(e, r) {
+  return e === "custom" ? r ?? null : e === "none" ? null : (l?.() ?? {})[e] ?? null;
+}
+export {
+  u as a,
+  i as b,
+  f as c,
+  v as d,
+  c as r,
+  a as s
+};
+//# sourceMappingURL=icons-Ch1Q5AhF.js.map

package/dist/icons-Ch1Q5AhF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons-Ch1Q5AhF.js","sources":["../src/icons/icons.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSlots, ChevronStyle } from '../types';\n\n// ---------------------------------------------------------------------------\n// Empty fallback — used when no icon provider is registered (hook-bare entry)\n// ---------------------------------------------------------------------------\n\nconst emptyIcons: IconSlots = {\n  chevronDown: null,\n  check: null,\n  clear: null,\n  search: null,\n  loading: null,\n};\n\n// ---------------------------------------------------------------------------\n// Lazy provider storage\n// ---------------------------------------------------------------------------\n\nlet defaultIconsProvider: (() => IconSlots) | null = null;\nlet chevronPresetsProvider: (() => Record<string, ReactNode>) | null = null;\n\n/**\n * Register a provider for built-in default icons.\n * Called by entry points that want built-in SVGs available.\n */\nexport function registerDefaultIcons(provider: () => IconSlots): void {\n  defaultIconsProvider = provider;\n}\n\n/**\n * Register a provider for chevron preset icons.\n * Called by entry points that want built-in chevron presets available.\n */\nexport function registerChevronPresets(\n  provider: () => Record<string, ReactNode>,\n): void {\n  chevronPresetsProvider = provider;\n}\n\n// ---------------------------------------------------------------------------\n// Global override storage\n// ---------------------------------------------------------------------------\n\nlet globalOverrides: Partial<IconSlots> = {};\n\n/**\n * Set global default icons for all Combo instances.\n */\nexport function setDefaultIcons(overrides: Partial<IconSlots>): void {\n  globalOverrides = { ...globalOverrides, ...overrides };\n}\n\n/**\n * Reset global overrides (useful for tests).\n */\nexport function resetDefaultIcons(): void {\n  globalOverrides = {};\n}\n\n/**\n * Resolve icons with precedence: instance > global > registered defaults.\n * If no provider is registered (hook-bare entry), base is emptyIcons (all null).\n */\nexport function resolveIcons(\n  instanceOverrides?: Partial<IconSlots>,\n): IconSlots {\n  const base = defaultIconsProvider?.() ?? emptyIcons;\n  return {\n    ...base,\n    ...globalOverrides,\n    ...instanceOverrides,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Chevron presets\n// ---------------------------------------------------------------------------\n\n/**\n * Resolve the chevron icon based on style preset or custom icon.\n */\nexport function resolveChevron(\n  style: ChevronStyle,\n  customIcon?: ReactNode,\n): ReactNode {\n  if (style === 'custom') return customIcon ?? null;\n  if (style === 'none') return null;\n  const presets = chevronPresetsProvider?.() ?? {};\n  return presets[style] ?? null;\n}\n"],"names":["emptyIcons","defaultIconsProvider","chevronPresetsProvider","registerDefaultIcons","provider","registerChevronPresets","globalOverrides","setDefaultIcons","overrides","resetDefaultIcons","resolveIcons","instanceOverrides","resolveChevron","style","customIcon"],"mappings":"AAOA,MAAMA,IAAwB;AAAA,EAC5B,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAMA,IAAIC,IAAiD,MACjDC,IAAmE;AAMhE,SAASC,EAAqBC,GAAiC;AACpE,EAAAH,IAAuBG;AACzB;AAMO,SAASC,EACdD,GACM;AACN,EAAAF,IAAyBE;AAC3B;AAMA,IAAIE,IAAsC,CAAA;AAKnC,SAASC,EAAgBC,GAAqC;AACnE,EAAAF,IAAkB,EAAE,GAAGA,GAAiB,GAAGE,EAAA;AAC7C;AAKO,SAASC,IAA0B;AACxC,EAAAH,IAAkB,CAAA;AACpB;AAMO,SAASI,EACdC,GACW;AAEX,SAAO;AAAA,IACL,GAFWV,SAA4BD;AAAA,IAGvC,GAAGM;AAAA,IACH,GAAGK;AAAA,EAAA;AAEP;AASO,SAASC,EACdC,GACAC,GACW;AACX,SAAID,MAAU,WAAiBC,KAAc,OACzCD,MAAU,SAAe,QACbX,IAAA,KAA8B,CAAA,GAC/BW,CAAK,KAAK;AAC3B;"}

package/dist/icons-vzkEacAb.cjs

@@ -0,0 +1,2 @@
+"use strict";const l={chevronDown:null,check:null,clear:null,search:null,loading:null};let s=null,t=null;function o(e){s=e}function u(e){t=e}let n={};function c(e){n={...n,...e}}function i(){n={}}function f(e){return{...s?.()??l,...n,...e}}function a(e,r){return e==="custom"?r??null:e==="none"?null:(t?.()??{})[e]??null}exports.registerChevronPresets=u;exports.registerDefaultIcons=o;exports.resetDefaultIcons=i;exports.resolveChevron=a;exports.resolveIcons=f;exports.setDefaultIcons=c;
+//# sourceMappingURL=icons-vzkEacAb.cjs.map

package/dist/icons-vzkEacAb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons-vzkEacAb.cjs","sources":["../src/icons/icons.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { IconSlots, ChevronStyle } from '../types';\n\n// ---------------------------------------------------------------------------\n// Empty fallback — used when no icon provider is registered (hook-bare entry)\n// ---------------------------------------------------------------------------\n\nconst emptyIcons: IconSlots = {\n  chevronDown: null,\n  check: null,\n  clear: null,\n  search: null,\n  loading: null,\n};\n\n// ---------------------------------------------------------------------------\n// Lazy provider storage\n// ---------------------------------------------------------------------------\n\nlet defaultIconsProvider: (() => IconSlots) | null = null;\nlet chevronPresetsProvider: (() => Record<string, ReactNode>) | null = null;\n\n/**\n * Register a provider for built-in default icons.\n * Called by entry points that want built-in SVGs available.\n */\nexport function registerDefaultIcons(provider: () => IconSlots): void {\n  defaultIconsProvider = provider;\n}\n\n/**\n * Register a provider for chevron preset icons.\n * Called by entry points that want built-in chevron presets available.\n */\nexport function registerChevronPresets(\n  provider: () => Record<string, ReactNode>,\n): void {\n  chevronPresetsProvider = provider;\n}\n\n// ---------------------------------------------------------------------------\n// Global override storage\n// ---------------------------------------------------------------------------\n\nlet globalOverrides: Partial<IconSlots> = {};\n\n/**\n * Set global default icons for all Combo instances.\n */\nexport function setDefaultIcons(overrides: Partial<IconSlots>): void {\n  globalOverrides = { ...globalOverrides, ...overrides };\n}\n\n/**\n * Reset global overrides (useful for tests).\n */\nexport function resetDefaultIcons(): void {\n  globalOverrides = {};\n}\n\n/**\n * Resolve icons with precedence: instance > global > registered defaults.\n * If no provider is registered (hook-bare entry), base is emptyIcons (all null).\n */\nexport function resolveIcons(\n  instanceOverrides?: Partial<IconSlots>,\n): IconSlots {\n  const base = defaultIconsProvider?.() ?? emptyIcons;\n  return {\n    ...base,\n    ...globalOverrides,\n    ...instanceOverrides,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Chevron presets\n// ---------------------------------------------------------------------------\n\n/**\n * Resolve the chevron icon based on style preset or custom icon.\n */\nexport function resolveChevron(\n  style: ChevronStyle,\n  customIcon?: ReactNode,\n): ReactNode {\n  if (style === 'custom') return customIcon ?? null;\n  if (style === 'none') return null;\n  const presets = chevronPresetsProvider?.() ?? {};\n  return presets[style] ?? null;\n}\n"],"names":["emptyIcons","defaultIconsProvider","chevronPresetsProvider","registerDefaultIcons","provider","registerChevronPresets","globalOverrides","setDefaultIcons","overrides","resetDefaultIcons","resolveIcons","instanceOverrides","resolveChevron","style","customIcon"],"mappings":"aAOA,MAAMA,EAAwB,CAC5B,YAAa,KACb,MAAO,KACP,MAAO,KACP,OAAQ,KACR,QAAS,IACX,EAMA,IAAIC,EAAiD,KACjDC,EAAmE,KAMhE,SAASC,EAAqBC,EAAiC,CACpEH,EAAuBG,CACzB,CAMO,SAASC,EACdD,EACM,CACNF,EAAyBE,CAC3B,CAMA,IAAIE,EAAsC,CAAA,EAKnC,SAASC,EAAgBC,EAAqC,CACnEF,EAAkB,CAAE,GAAGA,EAAiB,GAAGE,CAAA,CAC7C,CAKO,SAASC,GAA0B,CACxCH,EAAkB,CAAA,CACpB,CAMO,SAASI,EACdC,EACW,CAEX,MAAO,CACL,GAFWV,OAA4BD,EAGvC,GAAGM,EACH,GAAGK,CAAA,CAEP,CASO,SAASC,EACdC,EACAC,EACW,CACX,OAAID,IAAU,SAAiBC,GAAc,KACzCD,IAAU,OAAe,MACbX,IAAA,GAA8B,CAAA,GAC/BW,CAAK,GAAK,IAC3B"}

package/dist/icons.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./defaults-iFGq2Q-7.cjs"),o=require("./icons-vzkEacAb.cjs");exports.AngleDownIcon=e.AngleDownIcon;exports.ArrowDownIcon=e.ArrowDownIcon;exports.CheckIcon=e.CheckIcon;exports.ChevronDownIcon=e.ChevronDownIcon;exports.ClearIcon=e.ClearIcon;exports.DotsIcon=e.DotsIcon;exports.LoadingIcon=e.LoadingIcon;exports.PlusMinusIcon=e.PlusMinusIcon;exports.SearchIcon=e.SearchIcon;exports.chevronPresets=e.chevronPresets;exports.defaultIcons=e.defaultIcons;exports.registerChevronPresets=o.registerChevronPresets;exports.registerDefaultIcons=o.registerDefaultIcons;exports.resetDefaultIcons=o.resetDefaultIcons;exports.setDefaultIcons=o.setDefaultIcons;
+//# sourceMappingURL=icons.cjs.map

package/dist/icons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/icons.js

@@ -0,0 +1,20 @@
+import { A as e, a, C as n, b as r, c, D as t, L as I, P as D, S as l, d as f, e as u } from "./defaults-rhC5DFTg.js";
+import { r as C, a as g, b as i, s as w } from "./icons-Ch1Q5AhF.js";
+export {
+  e as AngleDownIcon,
+  a as ArrowDownIcon,
+  n as CheckIcon,
+  r as ChevronDownIcon,
+  c as ClearIcon,
+  t as DotsIcon,
+  I as LoadingIcon,
+  D as PlusMinusIcon,
+  l as SearchIcon,
+  f as chevronPresets,
+  u as defaultIcons,
+  C as registerChevronPresets,
+  g as registerDefaultIcons,
+  i as resetDefaultIcons,
+  w as setDefaultIcons
+};
+//# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./hook.cjs");const e=require("./Combo-Cx3kSkop.cjs"),o=require("./icons-vzkEacAb.cjs"),t=require("./useCombo-D_vriwVz.cjs");exports.Combo=e.Combo;exports.LiveRegion=e.LiveRegion;exports.Portal=e.Portal;exports.setDefaultIcons=o.setDefaultIcons;exports.useCombo=t.useCombo;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './entries/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,12 @@
+import "./hook.js";
+import { C as r, L as a, P as t } from "./Combo-qs6_L512.js";
+import { s as f } from "./icons-Ch1Q5AhF.js";
+import { u as i } from "./useCombo-gPeBdkRf.js";
+export {
+  r as Combo,
+  a as LiveRegion,
+  t as Portal,
+  f as setDefaultIcons,
+  i as useCombo
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/position.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./usePosition-6GfutqGX.cjs");exports.usePosition=e.usePosition;
+//# sourceMappingURL=position.cjs.map

package/dist/position.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/position.js

@@ -0,0 +1,5 @@
+import { u as e } from "./usePosition-DVw8IlwA.js";
+export {
+  e as usePosition
+};
+//# sourceMappingURL=position.js.map

package/dist/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/slots.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function n({label:r,description:o,icon:s}){return e.jsxs("div",{className:"rzero-combo-custom-item",children:[s&&e.jsx("span",{className:"rzero-combo-custom-item-icon","aria-hidden":"true",children:s}),e.jsxs("div",{className:"rzero-combo-custom-item-content",children:[e.jsx("div",{className:"rzero-combo-custom-item-title",children:r}),o&&e.jsx("div",{className:"rzero-combo-custom-item-description",children:o})]})]})}function l({title:r,description:o,icon:s,meta:c,badge:i,children:t}){return e.jsxs("div",{className:"rzero-combo-custom-item",children:[s&&e.jsx("span",{className:"rzero-combo-custom-item-icon","aria-hidden":"true",children:s}),e.jsxs("div",{className:"rzero-combo-custom-item-content",children:[e.jsx("div",{className:"rzero-combo-custom-item-title",children:r}),o&&e.jsx("div",{className:"rzero-combo-custom-item-description",children:o}),t]}),i&&e.jsx("span",{className:"rzero-combo-custom-item-badge",children:i}),c&&e.jsx("span",{className:"rzero-combo-custom-item-meta",children:c})]})}function d({actions:r,note:o,selectedCount:s,totalCount:c}){const i=s!==void 0&&c!==void 0;return e.jsxs("div",{className:"rzero-combo-footer-actions",children:[e.jsxs("div",{children:[i&&e.jsxs("span",{className:"rzero-combo-footer-note",children:[s," of ",c," selected"]}),o&&!i&&e.jsx("span",{className:"rzero-combo-footer-note",children:o})]}),e.jsx("div",{className:"rzero-combo-footer-actions-buttons",children:r.map((t,a)=>e.jsx("button",{type:"button",onClick:t.onClick,disabled:t.disabled,"data-variant":t.variant,onMouseDown:m=>m.preventDefault(),children:t.label},`${t.label}-${a}`))})]})}function u({label:r,count:o,icon:s,sticky:c}){return e.jsxs("div",{className:"rzero-combo-group-header","data-sticky":c||void 0,children:[s&&e.jsx("span",{style:{marginRight:6,display:"inline-flex"},"aria-hidden":"true",children:s}),e.jsx("span",{children:r}),o!==void 0&&e.jsx("span",{className:"rzero-combo-group-header-count",children:o})]})}exports.CheckboxItem=n;exports.CustomItem=l;exports.FooterActions=d;exports.GroupSeparator=u;
+//# sourceMappingURL=slots.cjs.map

package/dist/slots.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.cjs","sources":["../src/components/slots/CheckboxItem.tsx","../src/components/slots/CustomItem.tsx","../src/components/slots/FooterActions.tsx","../src/components/slots/GroupSeparator.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface CheckboxItemProps {\n  /** Display label for the item */\n  label: string;\n  /** Optional secondary description text */\n  description?: string;\n  /** Optional leading icon */\n  icon?: ReactNode;\n  /** Whether the item is currently highlighted */\n  isHighlighted?: boolean;\n  /** Whether the item is currently selected */\n  isSelected?: boolean;\n  /** Whether the item is disabled */\n  isDisabled?: boolean;\n}\n\n/**\n * Pre-built item content for checkbox-style multi-select.\n * Pair with `itemVariant=\"checkbox\"` on the Combo for CSS-driven checkbox visuals.\n *\n * @example\n * ```tsx\n * <Combo\n *   items={items}\n *   itemVariant=\"checkbox\"\n *   renderItem={({ item, isHighlighted, isSelected, isDisabled }) => (\n *     <CheckboxItem\n *       label={item.label}\n *       description={item.description}\n *       isHighlighted={isHighlighted}\n *       isSelected={isSelected}\n *       isDisabled={isDisabled}\n *     />\n *   )}\n * />\n * ```\n */\nexport function CheckboxItem({\n  label,\n  description,\n  icon,\n  // isHighlighted, isSelected, isDisabled accepted for renderItem type compat;\n  // visual states are driven by CSS via parent data-attributes.\n}: CheckboxItemProps) {\n  return (\n    <div className=\"rzero-combo-custom-item\">\n      {icon && (\n        <span className=\"rzero-combo-custom-item-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"rzero-combo-custom-item-content\">\n        <div className=\"rzero-combo-custom-item-title\">{label}</div>\n        {description && (\n          <div className=\"rzero-combo-custom-item-description\">\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nexport interface CustomItemProps {\n  /** Primary label / title */\n  title: ReactNode;\n  /** Secondary description text */\n  description?: ReactNode;\n  /** Leading icon or avatar element */\n  icon?: ReactNode;\n  /** Trailing meta text (e.g. date, status) */\n  meta?: ReactNode;\n  /** Trailing badge (e.g. count, tag) */\n  badge?: ReactNode;\n  /** Arbitrary children rendered after title/description */\n  children?: ReactNode;\n}\n\n/**\n * Multi-line item layout with icon, title, description, meta, and badge slots.\n *\n * @example\n * ```tsx\n * <Combo\n *   items={users}\n *   renderItem={({ item }) => (\n *     <CustomItem\n *       icon={<img src={item.avatar} alt=\"\" />}\n *       title={item.name}\n *       description={item.role}\n *       meta={item.department}\n *     />\n *   )}\n * />\n * ```\n */\nexport function CustomItem({\n  title,\n  description,\n  icon,\n  meta,\n  badge,\n  children,\n}: CustomItemProps) {\n  return (\n    <div className=\"rzero-combo-custom-item\">\n      {icon && (\n        <span className=\"rzero-combo-custom-item-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"rzero-combo-custom-item-content\">\n        <div className=\"rzero-combo-custom-item-title\">{title}</div>\n        {description && (\n          <div className=\"rzero-combo-custom-item-description\">\n            {description}\n          </div>\n        )}\n        {children}\n      </div>\n      {badge && (\n        <span className=\"rzero-combo-custom-item-badge\">{badge}</span>\n      )}\n      {meta && (\n        <span className=\"rzero-combo-custom-item-meta\">{meta}</span>\n      )}\n    </div>\n  );\n}\n","export interface FooterAction {\n  /** Button label */\n  label: string;\n  /** Click handler */\n  onClick: () => void;\n  /** Visual variant */\n  variant?: 'primary' | 'secondary' | 'ghost';\n  /** Disable this action */\n  disabled?: boolean;\n}\n\nexport interface FooterActionsProps {\n  /** Action buttons to render */\n  actions: FooterAction[];\n  /** Optional note/help text displayed below or beside actions */\n  note?: string;\n  /** Number of currently selected items (for summary display) */\n  selectedCount?: number;\n  /** Total number of items (for summary display) */\n  totalCount?: number;\n}\n\n/**\n * Pre-built footer with action buttons and optional selection summary.\n *\n * @example\n * ```tsx\n * <Combo\n *   items={items}\n *   renderFooter={({ clearSelection, closeMenu }) => (\n *     <FooterActions\n *       selectedCount={3}\n *       totalCount={10}\n *       actions={[\n *         { label: 'Clear', onClick: clearSelection, variant: 'ghost' },\n *         { label: 'Done', onClick: closeMenu, variant: 'primary' },\n *       ]}\n *     />\n *   )}\n * />\n * ```\n */\nexport function FooterActions({\n  actions,\n  note,\n  selectedCount,\n  totalCount,\n}: FooterActionsProps) {\n  const showStats =\n    selectedCount !== undefined && totalCount !== undefined;\n\n  return (\n    <div className=\"rzero-combo-footer-actions\">\n      <div>\n        {showStats && (\n          <span className=\"rzero-combo-footer-note\">\n            {selectedCount} of {totalCount} selected\n          </span>\n        )}\n        {note && !showStats && (\n          <span className=\"rzero-combo-footer-note\">{note}</span>\n        )}\n      </div>\n      <div className=\"rzero-combo-footer-actions-buttons\">\n        {actions.map((action, i) => (\n          <button\n            key={`${action.label}-${i}`}\n            type=\"button\"\n            onClick={action.onClick}\n            disabled={action.disabled}\n            data-variant={action.variant}\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            {action.label}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nexport interface GroupSeparatorProps {\n  /** Group heading label */\n  label: string;\n  /** Optional item count badge */\n  count?: number;\n  /** Optional leading icon */\n  icon?: ReactNode;\n  /** Enable sticky positioning for scrollable lists */\n  sticky?: boolean;\n}\n\n/**\n * Enhanced group header with optional count badge and sticky positioning.\n *\n * @example\n * ```tsx\n * <Combo\n *   groups={groups}\n *   renderGroupHeader={({ group }) => (\n *     <GroupSeparator\n *       label={group.label}\n *       count={group.items.length}\n *       sticky\n *     />\n *   )}\n * />\n * ```\n */\nexport function GroupSeparator({\n  label,\n  count,\n  icon,\n  sticky,\n}: GroupSeparatorProps) {\n  return (\n    <div\n      className=\"rzero-combo-group-header\"\n      data-sticky={sticky || undefined}\n    >\n      {icon && (\n        <span style={{ marginRight: 6, display: 'inline-flex' }} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span>{label}</span>\n      {count !== undefined && (\n        <span className=\"rzero-combo-group-header-count\">{count}</span>\n      )}\n    </div>\n  );\n}\n"],"names":["CheckboxItem","label","description","icon","jsxs","jsx","CustomItem","title","meta","badge","children","FooterActions","actions","note","selectedCount","totalCount","showStats","action","i","e","GroupSeparator","count","sticky"],"mappings":"qHAsCO,SAASA,EAAa,CAC3B,MAAAC,EACA,YAAAC,EACA,KAAAC,CAGF,EAAsB,CACpB,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAD,SACE,OAAA,CAAK,UAAU,+BAA+B,cAAY,OACxD,SAAAA,EACH,EAEFC,EAAAA,KAAC,MAAA,CAAI,UAAU,kCACb,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,gCAAiC,SAAAJ,EAAM,EACrDC,GACCG,EAAAA,IAAC,MAAA,CAAI,UAAU,sCACZ,SAAAH,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,EACF,CAEJ,CC3BO,SAASI,EAAW,CACzB,MAAAC,EACA,YAAAL,EACA,KAAAC,EACA,KAAAK,EACA,MAAAC,EACA,SAAAC,CACF,EAAoB,CAClB,OACEN,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAD,SACE,OAAA,CAAK,UAAU,+BAA+B,cAAY,OACxD,SAAAA,EACH,EAEFC,EAAAA,KAAC,MAAA,CAAI,UAAU,kCACb,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,gCAAiC,SAAAE,EAAM,EACrDL,GACCG,EAAAA,IAAC,MAAA,CAAI,UAAU,sCACZ,SAAAH,EACH,EAEDQ,CAAA,EACH,EACCD,GACCJ,EAAAA,IAAC,OAAA,CAAK,UAAU,gCAAiC,SAAAI,EAAM,EAExDD,GACCH,EAAAA,IAAC,OAAA,CAAK,UAAU,+BAAgC,SAAAG,CAAA,CAAK,CAAA,EAEzD,CAEJ,CCzBO,SAASG,EAAc,CAC5B,QAAAC,EACA,KAAAC,EACA,cAAAC,EACA,WAAAC,CACF,EAAuB,CACrB,MAAMC,EACJF,IAAkB,QAAaC,IAAe,OAEhD,OACEX,EAAAA,KAAC,MAAA,CAAI,UAAU,6BACb,SAAA,CAAAA,OAAC,MAAA,CACE,SAAA,CAAAY,GACCZ,EAAAA,KAAC,OAAA,CAAK,UAAU,0BACb,SAAA,CAAAU,EAAc,OAAKC,EAAW,WAAA,EACjC,EAEDF,GAAQ,CAACG,SACP,OAAA,CAAK,UAAU,0BAA2B,SAAAH,CAAA,CAAK,CAAA,EAEpD,EACAR,EAAAA,IAAC,OAAI,UAAU,qCACZ,WAAQ,IAAI,CAACY,EAAQC,IACpBb,EAAAA,IAAC,SAAA,CAEC,KAAK,SACL,QAASY,EAAO,QAChB,SAAUA,EAAO,SACjB,eAAcA,EAAO,QACrB,YAAcE,GAAMA,EAAE,eAAA,EAErB,SAAAF,EAAO,KAAA,EAPH,GAAGA,EAAO,KAAK,IAAIC,CAAC,EAAA,CAS5B,CAAA,CACH,CAAA,EACF,CAEJ,CCjDO,SAASE,EAAe,CAC7B,MAAAnB,EACA,MAAAoB,EACA,KAAAlB,EACA,OAAAmB,CACF,EAAwB,CACtB,OACElB,EAAAA,KAAC,MAAA,CACC,UAAU,2BACV,cAAakB,GAAU,OAEtB,SAAA,CAAAnB,GACCE,EAAAA,IAAC,OAAA,CAAK,MAAO,CAAE,YAAa,EAAG,QAAS,aAAA,EAAiB,cAAY,OAClE,SAAAF,CAAA,CACH,EAEFE,EAAAA,IAAC,QAAM,SAAAJ,CAAA,CAAM,EACZoB,IAAU,QACThB,EAAAA,IAAC,OAAA,CAAK,UAAU,iCAAkC,SAAAgB,CAAA,CAAM,CAAA,CAAA,CAAA,CAIhE"}

package/dist/slots.js

@@ -0,0 +1,92 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+function d({
+  label: s,
+  description: o,
+  icon: r
+  // isHighlighted, isSelected, isDisabled accepted for renderItem type compat;
+  // visual states are driven by CSS via parent data-attributes.
+}) {
+  return /* @__PURE__ */ c("div", { className: "rzero-combo-custom-item", children: [
+    r && /* @__PURE__ */ e("span", { className: "rzero-combo-custom-item-icon", "aria-hidden": "true", children: r }),
+    /* @__PURE__ */ c("div", { className: "rzero-combo-custom-item-content", children: [
+      /* @__PURE__ */ e("div", { className: "rzero-combo-custom-item-title", children: s }),
+      o && /* @__PURE__ */ e("div", { className: "rzero-combo-custom-item-description", children: o })
+    ] })
+  ] });
+}
+function h({
+  title: s,
+  description: o,
+  icon: r,
+  meta: i,
+  badge: t,
+  children: a
+}) {
+  return /* @__PURE__ */ c("div", { className: "rzero-combo-custom-item", children: [
+    r && /* @__PURE__ */ e("span", { className: "rzero-combo-custom-item-icon", "aria-hidden": "true", children: r }),
+    /* @__PURE__ */ c("div", { className: "rzero-combo-custom-item-content", children: [
+      /* @__PURE__ */ e("div", { className: "rzero-combo-custom-item-title", children: s }),
+      o && /* @__PURE__ */ e("div", { className: "rzero-combo-custom-item-description", children: o }),
+      a
+    ] }),
+    t && /* @__PURE__ */ e("span", { className: "rzero-combo-custom-item-badge", children: t }),
+    i && /* @__PURE__ */ e("span", { className: "rzero-combo-custom-item-meta", children: i })
+  ] });
+}
+function u({
+  actions: s,
+  note: o,
+  selectedCount: r,
+  totalCount: i
+}) {
+  const t = r !== void 0 && i !== void 0;
+  return /* @__PURE__ */ c("div", { className: "rzero-combo-footer-actions", children: [
+    /* @__PURE__ */ c("div", { children: [
+      t && /* @__PURE__ */ c("span", { className: "rzero-combo-footer-note", children: [
+        r,
+        " of ",
+        i,
+        " selected"
+      ] }),
+      o && !t && /* @__PURE__ */ e("span", { className: "rzero-combo-footer-note", children: o })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "rzero-combo-footer-actions-buttons", children: s.map((a, m) => /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: a.onClick,
+        disabled: a.disabled,
+        "data-variant": a.variant,
+        onMouseDown: (n) => n.preventDefault(),
+        children: a.label
+      },
+      `${a.label}-${m}`
+    )) })
+  ] });
+}
+function b({
+  label: s,
+  count: o,
+  icon: r,
+  sticky: i
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: "rzero-combo-group-header",
+      "data-sticky": i || void 0,
+      children: [
+        r && /* @__PURE__ */ e("span", { style: { marginRight: 6, display: "inline-flex" }, "aria-hidden": "true", children: r }),
+        /* @__PURE__ */ e("span", { children: s }),
+        o !== void 0 && /* @__PURE__ */ e("span", { className: "rzero-combo-group-header-count", children: o })
+      ]
+    }
+  );
+}
+export {
+  d as CheckboxItem,
+  h as CustomItem,
+  u as FooterActions,
+  b as GroupSeparator
+};
+//# sourceMappingURL=slots.js.map

package/dist/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sources":["../src/components/slots/CheckboxItem.tsx","../src/components/slots/CustomItem.tsx","../src/components/slots/FooterActions.tsx","../src/components/slots/GroupSeparator.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface CheckboxItemProps {\n  /** Display label for the item */\n  label: string;\n  /** Optional secondary description text */\n  description?: string;\n  /** Optional leading icon */\n  icon?: ReactNode;\n  /** Whether the item is currently highlighted */\n  isHighlighted?: boolean;\n  /** Whether the item is currently selected */\n  isSelected?: boolean;\n  /** Whether the item is disabled */\n  isDisabled?: boolean;\n}\n\n/**\n * Pre-built item content for checkbox-style multi-select.\n * Pair with `itemVariant=\"checkbox\"` on the Combo for CSS-driven checkbox visuals.\n *\n * @example\n * ```tsx\n * <Combo\n *   items={items}\n *   itemVariant=\"checkbox\"\n *   renderItem={({ item, isHighlighted, isSelected, isDisabled }) => (\n *     <CheckboxItem\n *       label={item.label}\n *       description={item.description}\n *       isHighlighted={isHighlighted}\n *       isSelected={isSelected}\n *       isDisabled={isDisabled}\n *     />\n *   )}\n * />\n * ```\n */\nexport function CheckboxItem({\n  label,\n  description,\n  icon,\n  // isHighlighted, isSelected, isDisabled accepted for renderItem type compat;\n  // visual states are driven by CSS via parent data-attributes.\n}: CheckboxItemProps) {\n  return (\n    <div className=\"rzero-combo-custom-item\">\n      {icon && (\n        <span className=\"rzero-combo-custom-item-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"rzero-combo-custom-item-content\">\n        <div className=\"rzero-combo-custom-item-title\">{label}</div>\n        {description && (\n          <div className=\"rzero-combo-custom-item-description\">\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nexport interface CustomItemProps {\n  /** Primary label / title */\n  title: ReactNode;\n  /** Secondary description text */\n  description?: ReactNode;\n  /** Leading icon or avatar element */\n  icon?: ReactNode;\n  /** Trailing meta text (e.g. date, status) */\n  meta?: ReactNode;\n  /** Trailing badge (e.g. count, tag) */\n  badge?: ReactNode;\n  /** Arbitrary children rendered after title/description */\n  children?: ReactNode;\n}\n\n/**\n * Multi-line item layout with icon, title, description, meta, and badge slots.\n *\n * @example\n * ```tsx\n * <Combo\n *   items={users}\n *   renderItem={({ item }) => (\n *     <CustomItem\n *       icon={<img src={item.avatar} alt=\"\" />}\n *       title={item.name}\n *       description={item.role}\n *       meta={item.department}\n *     />\n *   )}\n * />\n * ```\n */\nexport function CustomItem({\n  title,\n  description,\n  icon,\n  meta,\n  badge,\n  children,\n}: CustomItemProps) {\n  return (\n    <div className=\"rzero-combo-custom-item\">\n      {icon && (\n        <span className=\"rzero-combo-custom-item-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"rzero-combo-custom-item-content\">\n        <div className=\"rzero-combo-custom-item-title\">{title}</div>\n        {description && (\n          <div className=\"rzero-combo-custom-item-description\">\n            {description}\n          </div>\n        )}\n        {children}\n      </div>\n      {badge && (\n        <span className=\"rzero-combo-custom-item-badge\">{badge}</span>\n      )}\n      {meta && (\n        <span className=\"rzero-combo-custom-item-meta\">{meta}</span>\n      )}\n    </div>\n  );\n}\n","export interface FooterAction {\n  /** Button label */\n  label: string;\n  /** Click handler */\n  onClick: () => void;\n  /** Visual variant */\n  variant?: 'primary' | 'secondary' | 'ghost';\n  /** Disable this action */\n  disabled?: boolean;\n}\n\nexport interface FooterActionsProps {\n  /** Action buttons to render */\n  actions: FooterAction[];\n  /** Optional note/help text displayed below or beside actions */\n  note?: string;\n  /** Number of currently selected items (for summary display) */\n  selectedCount?: number;\n  /** Total number of items (for summary display) */\n  totalCount?: number;\n}\n\n/**\n * Pre-built footer with action buttons and optional selection summary.\n *\n * @example\n * ```tsx\n * <Combo\n *   items={items}\n *   renderFooter={({ clearSelection, closeMenu }) => (\n *     <FooterActions\n *       selectedCount={3}\n *       totalCount={10}\n *       actions={[\n *         { label: 'Clear', onClick: clearSelection, variant: 'ghost' },\n *         { label: 'Done', onClick: closeMenu, variant: 'primary' },\n *       ]}\n *     />\n *   )}\n * />\n * ```\n */\nexport function FooterActions({\n  actions,\n  note,\n  selectedCount,\n  totalCount,\n}: FooterActionsProps) {\n  const showStats =\n    selectedCount !== undefined && totalCount !== undefined;\n\n  return (\n    <div className=\"rzero-combo-footer-actions\">\n      <div>\n        {showStats && (\n          <span className=\"rzero-combo-footer-note\">\n            {selectedCount} of {totalCount} selected\n          </span>\n        )}\n        {note && !showStats && (\n          <span className=\"rzero-combo-footer-note\">{note}</span>\n        )}\n      </div>\n      <div className=\"rzero-combo-footer-actions-buttons\">\n        {actions.map((action, i) => (\n          <button\n            key={`${action.label}-${i}`}\n            type=\"button\"\n            onClick={action.onClick}\n            disabled={action.disabled}\n            data-variant={action.variant}\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            {action.label}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nexport interface GroupSeparatorProps {\n  /** Group heading label */\n  label: string;\n  /** Optional item count badge */\n  count?: number;\n  /** Optional leading icon */\n  icon?: ReactNode;\n  /** Enable sticky positioning for scrollable lists */\n  sticky?: boolean;\n}\n\n/**\n * Enhanced group header with optional count badge and sticky positioning.\n *\n * @example\n * ```tsx\n * <Combo\n *   groups={groups}\n *   renderGroupHeader={({ group }) => (\n *     <GroupSeparator\n *       label={group.label}\n *       count={group.items.length}\n *       sticky\n *     />\n *   )}\n * />\n * ```\n */\nexport function GroupSeparator({\n  label,\n  count,\n  icon,\n  sticky,\n}: GroupSeparatorProps) {\n  return (\n    <div\n      className=\"rzero-combo-group-header\"\n      data-sticky={sticky || undefined}\n    >\n      {icon && (\n        <span style={{ marginRight: 6, display: 'inline-flex' }} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span>{label}</span>\n      {count !== undefined && (\n        <span className=\"rzero-combo-group-header-count\">{count}</span>\n      )}\n    </div>\n  );\n}\n"],"names":["CheckboxItem","label","description","icon","jsxs","jsx","CustomItem","title","meta","badge","children","FooterActions","actions","note","selectedCount","totalCount","showStats","action","i","e","GroupSeparator","count","sticky"],"mappings":";AAsCO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA;AAAA;AAGF,GAAsB;AACpB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAAD,uBACE,QAAA,EAAK,WAAU,gCAA+B,eAAY,QACxD,UAAAA,GACH;AAAA,IAEF,gBAAAC,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iCAAiC,UAAAJ,GAAM;AAAA,MACrDC,KACC,gBAAAG,EAAC,OAAA,EAAI,WAAU,uCACZ,UAAAH,EAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AC3BO,SAASI,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,aAAAL;AAAA,EACA,MAAAC;AAAA,EACA,MAAAK;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,GAAoB;AAClB,SACE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAAD,uBACE,QAAA,EAAK,WAAU,gCAA+B,eAAY,QACxD,UAAAA,GACH;AAAA,IAEF,gBAAAC,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,iCAAiC,UAAAE,GAAM;AAAA,MACrDL,KACC,gBAAAG,EAAC,OAAA,EAAI,WAAU,uCACZ,UAAAH,GACH;AAAA,MAEDQ;AAAA,IAAA,GACH;AAAA,IACCD,KACC,gBAAAJ,EAAC,QAAA,EAAK,WAAU,iCAAiC,UAAAI,GAAM;AAAA,IAExDD,KACC,gBAAAH,EAAC,QAAA,EAAK,WAAU,gCAAgC,UAAAG,EAAA,CAAK;AAAA,EAAA,GAEzD;AAEJ;ACzBO,SAASG,EAAc;AAAA,EAC5B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AACF,GAAuB;AACrB,QAAMC,IACJF,MAAkB,UAAaC,MAAe;AAEhD,SACE,gBAAAX,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EACE,UAAA;AAAA,MAAAY,KACC,gBAAAZ,EAAC,QAAA,EAAK,WAAU,2BACb,UAAA;AAAA,QAAAU;AAAA,QAAc;AAAA,QAAKC;AAAA,QAAW;AAAA,MAAA,GACjC;AAAA,MAEDF,KAAQ,CAACG,uBACP,QAAA,EAAK,WAAU,2BAA2B,UAAAH,EAAA,CAAK;AAAA,IAAA,GAEpD;AAAA,IACA,gBAAAR,EAAC,SAAI,WAAU,sCACZ,YAAQ,IAAI,CAACY,GAAQC,MACpB,gBAAAb;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAASY,EAAO;AAAA,QAChB,UAAUA,EAAO;AAAA,QACjB,gBAAcA,EAAO;AAAA,QACrB,aAAa,CAACE,MAAMA,EAAE,eAAA;AAAA,QAErB,UAAAF,EAAO;AAAA,MAAA;AAAA,MAPH,GAAGA,EAAO,KAAK,IAAIC,CAAC;AAAA,IAAA,CAS5B,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;ACjDO,SAASE,EAAe;AAAA,EAC7B,OAAAnB;AAAA,EACA,OAAAoB;AAAA,EACA,MAAAlB;AAAA,EACA,QAAAmB;AACF,GAAwB;AACtB,SACE,gBAAAlB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAakB,KAAU;AAAA,MAEtB,UAAA;AAAA,QAAAnB,KACC,gBAAAE,EAAC,QAAA,EAAK,OAAO,EAAE,aAAa,GAAG,SAAS,cAAA,GAAiB,eAAY,QAClE,UAAAF,EAAA,CACH;AAAA,QAEF,gBAAAE,EAAC,UAAM,UAAAJ,EAAA,CAAM;AAAA,QACZoB,MAAU,UACT,gBAAAhB,EAAC,QAAA,EAAK,WAAU,kCAAkC,UAAAgB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhE;"}

package/dist/style.css

@@ -0,0 +1 @@
+.rzero-combo{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:inherit;color:var(--rzero-combo-item-color, #374151)}.rzero-combo-trigger{display:flex;align-items:center;gap:4px;border:var(--rzero-combo-input-border, 1px solid #d1d5db);border-radius:var(--rzero-combo-input-border-radius, 6px);background:var(--rzero-combo-input-bg, #ffffff);padding:var(--rzero-combo-input-padding, 8px 12px);min-height:var(--rzero-combo-input-height, 40px);font-size:var(--rzero-combo-input-font-size, 14px);color:var(--rzero-combo-input-color, #111827);cursor:text;transition:box-shadow .15s ease,border-color .15s ease}.rzero-combo-trigger:hover:not([data-disabled]){border-color:var(--rzero-combo-input-hover-border, #9ca3af)}.rzero-combo-trigger:focus-within{box-shadow:var(--rzero-combo-input-focus-ring, 0 0 0 2px #3b82f6)}.rzero-combo-trigger[data-error]{border-color:var(--rzero-combo-error-border, #dc2626)}.rzero-combo-trigger[data-error]:focus-within{box-shadow:var(--rzero-combo-error-focus-ring, 0 0 0 2px #dc2626)}.rzero-combo-select-trigger[data-error]{border-color:var(--rzero-combo-error-border, #dc2626)}.rzero-combo-select-trigger[data-error]:focus{box-shadow:var(--rzero-combo-error-focus-ring, 0 0 0 2px #dc2626)}.rzero-combo-trigger[data-has-hidden-selection]{border-left:var(--rzero-combo-hidden-selection-border, 3px solid #3b82f6)}.rzero-combo-trigger input{flex:1;border:none;outline:none;background:transparent;font:inherit;color:inherit;min-width:0;padding:0}.rzero-combo-trigger input::placeholder{color:var(--rzero-combo-icon-muted-color, #9ca3af)}[data-rzero-trigger][data-disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}[data-rzero-trigger][data-readonly]{cursor:default}[data-rzero-trigger][data-loading]{cursor:wait}.rzero-combo-list{list-style:none;margin:0;padding:4px 0;background:var(--rzero-combo-popover-bg, #ffffff);color:var(--rzero-combo-item-color, #374151);border:var(--rzero-combo-popover-border, 1px solid #e5e7eb);border-radius:var(--rzero-combo-popover-border-radius, 8px);box-shadow:var(--rzero-combo-popover-shadow, 0 8px 24px rgba(0,0,0,.12));z-index:var(--rzero-combo-z-index, 9999)}.rzero-combo-list[data-state=closed]{display:none}.rzero-combo-item{display:flex;align-items:center;justify-content:space-between;min-height:var(--rzero-combo-item-height, 36px);padding:var(--rzero-combo-item-padding, 0 12px);color:var(--rzero-combo-item-color, #374151);cursor:pointer;user-select:none}.rzero-combo-item[data-highlighted]{background:var(--rzero-combo-item-highlighted-bg, #dbeafe)}.rzero-combo-item[data-selected]{background:var(--rzero-combo-item-selected-bg, #eff6ff);color:var(--rzero-combo-item-selected-color, #1d4ed8)}.rzero-combo-item[data-disabled]{opacity:var(--rzero-combo-item-disabled-opacity, .4);cursor:not-allowed}.rzero-combo-check{display:flex;align-items:center;margin-left:8px}.rzero-combo-trigger button{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--rzero-combo-icon-muted-color, #9ca3af);padding:4px;min-width:24px;min-height:24px;flex-shrink:0}.rzero-combo-trigger button:hover{color:var(--rzero-combo-icon-color, currentColor)}[data-rzero-chevron]{display:inline-flex;transition:transform var(--rzero-combo-transition-duration, .15s) var(--rzero-combo-transition-easing, ease)}[aria-expanded=true] [data-rzero-chevron]{transform:rotate(180deg)}@keyframes rzero-spin{to{transform:rotate(360deg)}}.rzero-combo-group-header{color:var(--rzero-combo-group-header-color, #6b7280);font-size:var(--rzero-combo-group-header-font-size, 11px);font-weight:var(--rzero-combo-group-header-font-weight, 600);text-transform:var(--rzero-combo-group-header-text-transform, uppercase);letter-spacing:var(--rzero-combo-group-header-letter-spacing, .05em);padding:8px 12px 4px}[data-rzero-chevron] svg,.rzero-combo-check svg{width:var(--rzero-combo-icon-size-md, 16px);height:var(--rzero-combo-icon-size-md, 16px)}.rzero-combo-label{display:block;font-size:var(--rzero-combo-label-font-size, 14px);font-weight:var(--rzero-combo-label-font-weight, 500);color:var(--rzero-combo-label-color, #374151);margin-bottom:var(--rzero-combo-label-margin-bottom, 6px)}@media (prefers-reduced-motion: reduce){.rzero-combo,.rzero-combo *,.rzero-combo *:before,.rzero-combo *:after{transition-duration:0s!important;animation-duration:0s!important}}.rzero-combo-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:var(--rzero-combo-input-border, 1px solid #d1d5db);border-radius:var(--rzero-combo-input-border-radius, 6px);background:var(--rzero-combo-input-bg, #ffffff);padding:var(--rzero-combo-input-padding, 8px 12px);min-height:var(--rzero-combo-input-height, 40px);font-size:var(--rzero-combo-input-font-size, 14px);color:var(--rzero-combo-input-color, #111827);cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease}.rzero-combo-select-trigger:focus-visible{box-shadow:var(--rzero-combo-input-focus-ring, 0 0 0 2px #3b82f6);outline:none}.rzero-combo-select-trigger:disabled{opacity:.5;cursor:not-allowed}.rzero-combo-select-value{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rzero-combo-empty,.rzero-combo-loading{display:flex;align-items:center;justify-content:center;min-height:var(--rzero-combo-item-height, 36px);padding:var(--rzero-combo-item-padding, 0 12px);color:var(--rzero-combo-icon-muted-color, #9ca3af);font-size:var(--rzero-combo-input-font-size, 14px)}.rzero-combo-error{display:flex;align-items:center;justify-content:center;min-height:var(--rzero-combo-item-height, 36px);padding:var(--rzero-combo-item-padding, 0 12px);color:var(--rzero-combo-error-color, #dc2626);font-size:var(--rzero-combo-input-font-size, 14px)}.rzero-combo-footer{border-top:var(--rzero-combo-footer-border-top, 1px solid #e5e7eb);padding:var(--rzero-combo-footer-padding, 8px 12px);font-size:var(--rzero-combo-input-font-size, 14px);color:var(--rzero-combo-footer-color, #6b7280)}.rzero-combo-footer-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.rzero-combo-footer-actions-buttons{display:flex;gap:6px}.rzero-combo-footer-actions button{padding:4px 12px;border:var(--rzero-combo-footer-action-border, 1px solid #d1d5db);border-radius:var(--rzero-combo-footer-action-border-radius, 4px);background:var(--rzero-combo-footer-action-bg, transparent);color:var(--rzero-combo-footer-action-color, #374151);font-size:var(--rzero-combo-footer-action-font-size, 13px);cursor:pointer;transition:background .15s ease}.rzero-combo-footer-actions button:hover{background:var(--rzero-combo-footer-action-hover-bg, #f3f4f6)}.rzero-combo-footer-actions button[data-variant=primary]{background:var(--rzero-combo-footer-action-primary-bg, #3b82f6);color:var(--rzero-combo-footer-action-primary-color, #ffffff);border-color:var(--rzero-combo-footer-action-primary-bg, #3b82f6)}.rzero-combo-footer-actions button[data-variant=primary]:hover{background:var(--rzero-combo-footer-action-primary-hover-bg, #2563eb)}.rzero-combo-footer-actions button[data-variant=ghost]{border-color:transparent;background:transparent}.rzero-combo-footer-actions button[data-variant=ghost]:hover{background:var(--rzero-combo-footer-action-hover-bg, #f3f4f6)}.rzero-combo-footer-actions button:disabled{opacity:.5;cursor:not-allowed}.rzero-combo-footer-note{font-size:var(--rzero-combo-footer-note-font-size, 12px);color:var(--rzero-combo-footer-note-color, #9ca3af)}.rzero-combo-separator{height:1px;background:var(--rzero-combo-separator-color, #e5e7eb);margin:4px 0;border:none}.rzero-combo-group-header[data-sticky]{position:sticky;top:0;background:var(--rzero-combo-popover-bg, #ffffff);z-index:1}.rzero-combo-group-header-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rzero-combo-group-header-count-bg, #e5e7eb);color:var(--rzero-combo-group-header-count-color, #6b7280);font-size:10px;font-weight:600;margin-left:6px}.rzero-combo-item[data-variant=checkbox]{gap:8px;justify-content:flex-start}.rzero-combo-item[data-variant=checkbox]:before{content:"";flex-shrink:0;width:var(--rzero-combo-checkbox-size, 16px);height:var(--rzero-combo-checkbox-size, 16px);border:2px solid var(--rzero-combo-checkbox-border, #d1d5db);border-radius:var(--rzero-combo-checkbox-radius, 3px);background:var(--rzero-combo-checkbox-bg, #ffffff);transition:background .15s ease,border-color .15s ease}.rzero-combo-item[data-variant=checkbox][data-selected]:before{background:var(--rzero-combo-checkbox-checked-bg, #3b82f6);border-color:var(--rzero-combo-checkbox-checked-border, #3b82f6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");background-size:12px 12px;background-position:center;background-repeat:no-repeat}.rzero-combo-item[data-variant=checkbox][data-highlighted]:before{border-color:var(--rzero-combo-checkbox-hover-border, #9ca3af)}.rzero-combo-item[data-variant=checkbox][data-selected][data-highlighted]:before{border-color:var(--rzero-combo-checkbox-checked-border, #3b82f6)}.rzero-combo-item[data-variant=radio]{gap:8px;justify-content:flex-start}.rzero-combo-item[data-variant=radio]:before{content:"";flex-shrink:0;width:var(--rzero-combo-radio-size, 16px);height:var(--rzero-combo-radio-size, 16px);border:2px solid var(--rzero-combo-radio-border, #d1d5db);border-radius:50%;background:var(--rzero-combo-radio-bg, #ffffff);transition:background .15s ease,border-color .15s ease}.rzero-combo-item[data-variant=radio][data-selected]:before{border-color:var(--rzero-combo-radio-checked-border, #3b82f6);background:radial-gradient(circle,var(--rzero-combo-radio-checked-dot, #3b82f6) 35%,transparent 36%)}.rzero-combo-item[data-variant=radio][data-highlighted]:before{border-color:var(--rzero-combo-radio-hover-border, #9ca3af)}.rzero-combo-item[data-variant=radio][data-selected][data-highlighted]:before{border-color:var(--rzero-combo-radio-checked-border, #3b82f6)}.rzero-combo-custom-item{display:flex;align-items:flex-start;gap:10px;padding:4px 0;width:100%}.rzero-combo-custom-item-icon{flex-shrink:0;width:var(--rzero-combo-custom-item-icon-size, 32px);height:var(--rzero-combo-custom-item-icon-size, 32px);display:flex;align-items:center;justify-content:center;border-radius:var(--rzero-combo-custom-item-icon-radius, 6px);overflow:hidden}.rzero-combo-custom-item-content{flex:1;min-width:0}.rzero-combo-custom-item-title{font-weight:500;color:inherit;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rzero-combo-custom-item-description{font-size:var(--rzero-combo-item-description-font-size, 12px);color:var(--rzero-combo-item-description-color, #6b7280);line-height:1.3;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rzero-combo-custom-item-meta{flex-shrink:0;font-size:var(--rzero-combo-item-meta-font-size, 12px);color:var(--rzero-combo-item-meta-color, #9ca3af);align-self:center}.rzero-combo-custom-item-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:var(--rzero-combo-badge-radius, 10px);background:var(--rzero-combo-badge-bg, #e5e7eb);color:var(--rzero-combo-badge-color, #374151);font-size:var(--rzero-combo-badge-font-size, 11px);font-weight:500}.rzero-combo-trigger--multi{flex-wrap:nowrap;gap:4px;padding:var(--rzero-combo-input-padding-multi, 4px 8px);align-items:flex-start}.rzero-combo-trigger-content{display:flex;flex-wrap:wrap;gap:4px;align-items:center;flex:1 1 0%;min-width:0}.rzero-combo-trigger-content input{flex:1 1 60px;min-width:60px;padding:2px 4px}.rzero-combo-trigger-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;padding-top:2px}.rzero-combo-chip{display:inline-flex;align-items:center;gap:2px;padding:var(--rzero-combo-chip-padding, 2px 6px);background:var(--rzero-combo-chip-bg, #e5e7eb);color:var(--rzero-combo-chip-color, #374151);border-radius:var(--rzero-combo-chip-radius, 4px);font-size:var(--rzero-combo-chip-font-size, 13px);line-height:1.4;max-width:150px}.rzero-combo-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rzero-combo-chip-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin-left:2px;color:var(--rzero-combo-chip-remove-color, #6b7280);border-radius:2px;flex-shrink:0}.rzero-combo-chip-remove:hover{color:var(--rzero-combo-chip-remove-hover-color, #111827);background:var(--rzero-combo-chip-remove-hover-bg, rgba(0,0,0,.08))}.rzero-combo-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:var(--rzero-combo-meta-margin-top, 4px);font-size:var(--rzero-combo-meta-font-size, 12px);line-height:1.4}.rzero-combo-hint{color:var(--rzero-combo-hint-color, #6b7280)}.rzero-combo-error-text{color:var(--rzero-combo-error-text-color, #dc2626)}.rzero-combo-selection-count{color:var(--rzero-combo-selection-count-color, #9ca3af);white-space:nowrap;margin-left:auto}.rzero-combo-selection-count[data-warning]{color:var(--rzero-combo-selection-count-warning-color, #f59e0b)}.rzero-combo-tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--rzero-combo-tab-border-color, #e5e7eb);padding:0 4px;gap:0;overflow-x:auto;scrollbar-width:none}.rzero-combo-tabs::-webkit-scrollbar{display:none}.rzero-combo-tab{display:inline-flex;align-items:center;gap:6px;padding:var(--rzero-combo-tab-padding, 8px 12px);border:none;background:var(--rzero-combo-tab-bg, transparent);color:var(--rzero-combo-tab-color, #6b7280);font-size:var(--rzero-combo-tab-font-size, 13px);font-weight:var(--rzero-combo-tab-font-weight, 500);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease,background .15s ease}.rzero-combo-tab:hover{background:var(--rzero-combo-tab-hover-bg, #f3f4f6);color:var(--rzero-combo-tab-hover-color, #374151)}.rzero-combo-tab:focus-visible{outline:2px solid var(--rzero-combo-tab-focus-ring, #3b82f6);outline-offset:-2px;border-radius:2px}.rzero-combo-tab[data-active]{color:var(--rzero-combo-tab-active-color, #111827);border-bottom-color:var(--rzero-combo-tab-active-border-color, #3b82f6);background:var(--rzero-combo-tab-active-bg, transparent)}.rzero-combo-tab[data-disabled]{opacity:.5;cursor:not-allowed}.rzero-combo-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rzero-combo-tab-badge-bg, #e5e7eb);color:var(--rzero-combo-tab-badge-color, #6b7280);font-size:11px;font-weight:600;line-height:1}.rzero-combo-tab[data-active] .rzero-combo-tab-badge{background:var(--rzero-combo-tab-badge-active-bg, #dbeafe);color:var(--rzero-combo-tab-badge-active-color, #1d4ed8)}.rzero-combo-tab-panel{outline:none}.rzero-combo-tab-icon{display:inline-flex;align-items:center}.rzero-combo-tab-icon svg{width:var(--rzero-combo-icon-size-sm, 14px);height:var(--rzero-combo-icon-size-sm, 14px)}

package/dist/styles/base.css

@@ -0,0 +1,205 @@
+/* Base structural styles — no colors, no theme opinions.
+   All visual values use CSS custom properties. */
+
+.rzero-combo {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: inherit;
+  color: var(--rzero-combo-item-color, #374151);
+}
+
+/* Trigger */
+.rzero-combo-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: var(--rzero-combo-input-border, 1px solid #d1d5db);
+  border-radius: var(--rzero-combo-input-border-radius, 6px);
+  background: var(--rzero-combo-input-bg, #ffffff);
+  padding: var(--rzero-combo-input-padding, 8px 12px);
+  min-height: var(--rzero-combo-input-height, 40px);
+  font-size: var(--rzero-combo-input-font-size, 14px);
+  color: var(--rzero-combo-input-color, #111827);
+  cursor: text;
+  transition: box-shadow 150ms ease, border-color 150ms ease;
+}
+
+.rzero-combo-trigger:hover:not([data-disabled]) {
+  border-color: var(--rzero-combo-input-hover-border, #9ca3af);
+}
+
+.rzero-combo-trigger:focus-within {
+  box-shadow: var(--rzero-combo-input-focus-ring, 0 0 0 2px #3b82f6);
+}
+
+.rzero-combo-trigger[data-error] {
+  border-color: var(--rzero-combo-error-border, #dc2626);
+}
+.rzero-combo-trigger[data-error]:focus-within {
+  box-shadow: var(--rzero-combo-error-focus-ring, 0 0 0 2px #dc2626);
+}
+
+/* Select variant trigger error */
+.rzero-combo-select-trigger[data-error] {
+  border-color: var(--rzero-combo-error-border, #dc2626);
+}
+.rzero-combo-select-trigger[data-error]:focus {
+  box-shadow: var(--rzero-combo-error-focus-ring, 0 0 0 2px #dc2626);
+}
+
+/* Subtle indicator when a selection exists but search text replaced the display */
+.rzero-combo-trigger[data-has-hidden-selection] {
+  border-left: var(--rzero-combo-hidden-selection-border, 3px solid #3b82f6);
+}
+
+.rzero-combo-trigger input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  min-width: 0;
+  padding: 0;
+}
+
+.rzero-combo-trigger input::placeholder {
+  color: var(--rzero-combo-icon-muted-color, #9ca3af);
+}
+
+/* Disabled / readonly trigger states */
+[data-rzero-trigger][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+[data-rzero-trigger][data-readonly] {
+  cursor: default;
+}
+[data-rzero-trigger][data-loading] {
+  cursor: wait;
+}
+
+/* Popover / listbox */
+.rzero-combo-list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  background: var(--rzero-combo-popover-bg, #ffffff);
+  color: var(--rzero-combo-item-color, #374151);
+  border: var(--rzero-combo-popover-border, 1px solid #e5e7eb);
+  border-radius: var(--rzero-combo-popover-border-radius, 8px);
+  box-shadow: var(--rzero-combo-popover-shadow, 0 8px 24px rgba(0,0,0,0.12));
+  z-index: var(--rzero-combo-z-index, 9999);
+}
+
+.rzero-combo-list[data-state="closed"] {
+  display: none;
+}
+
+/* Items */
+.rzero-combo-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--rzero-combo-item-height, 36px);
+  padding: var(--rzero-combo-item-padding, 0 12px);
+  color: var(--rzero-combo-item-color, #374151);
+  cursor: pointer;
+  user-select: none;
+}
+
+.rzero-combo-item[data-highlighted] {
+  background: var(--rzero-combo-item-highlighted-bg, #dbeafe);
+}
+
+.rzero-combo-item[data-selected] {
+  background: var(--rzero-combo-item-selected-bg, #eff6ff);
+  color: var(--rzero-combo-item-selected-color, #1d4ed8);
+}
+
+.rzero-combo-item[data-disabled] {
+  opacity: var(--rzero-combo-item-disabled-opacity, 0.4);
+  cursor: not-allowed;
+}
+
+/* Check icon in items */
+.rzero-combo-check {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+}
+
+/* Toggle / clear buttons */
+.rzero-combo-trigger button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--rzero-combo-icon-muted-color, #9ca3af);
+  padding: 4px;
+  min-width: 24px;
+  min-height: 24px;
+  flex-shrink: 0;
+}
+
+.rzero-combo-trigger button:hover {
+  color: var(--rzero-combo-icon-color, currentColor);
+}
+
+/* Chevron animation */
+[data-rzero-chevron] {
+  display: inline-flex;
+  transition: transform var(--rzero-combo-transition-duration, 150ms)
+              var(--rzero-combo-transition-easing, ease);
+}
+
+[aria-expanded="true"] [data-rzero-chevron] {
+  transform: rotate(180deg);
+}
+
+/* Loading spinner keyframe */
+@keyframes rzero-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Group headers */
+.rzero-combo-group-header {
+  color: var(--rzero-combo-group-header-color, #6b7280);
+  font-size: var(--rzero-combo-group-header-font-size, 11px);
+  font-weight: var(--rzero-combo-group-header-font-weight, 600);
+  text-transform: var(--rzero-combo-group-header-text-transform, uppercase);
+  letter-spacing: var(--rzero-combo-group-header-letter-spacing, 0.05em);
+  padding: 8px 12px 4px;
+}
+
+/* Icon sizing */
+[data-rzero-chevron] svg,
+.rzero-combo-check svg {
+  width: var(--rzero-combo-icon-size-md, 16px);
+  height: var(--rzero-combo-icon-size-md, 16px);
+}
+
+/* Label */
+.rzero-combo-label {
+  display: block;
+  font-size: var(--rzero-combo-label-font-size, 14px);
+  font-weight: var(--rzero-combo-label-font-weight, 500);
+  color: var(--rzero-combo-label-color, #374151);
+  margin-bottom: var(--rzero-combo-label-margin-bottom, 6px);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .rzero-combo,
+  .rzero-combo *,
+  .rzero-combo *::before,
+  .rzero-combo *::after {
+    transition-duration: 0s !important;
+    animation-duration: 0s !important;
+  }
+}

package/dist/styles/checkbox.css

@@ -0,0 +1,36 @@
+/* ------------------------------------------------------------------ */
+/* Checkbox variant — pure CSS via ::before pseudo-element            */
+/* ------------------------------------------------------------------ */
+
+.rzero-combo-item[data-variant="checkbox"] {
+  gap: 8px;
+  justify-content: flex-start;
+}
+
+.rzero-combo-item[data-variant="checkbox"]::before {
+  content: '';
+  flex-shrink: 0;
+  width: var(--rzero-combo-checkbox-size, 16px);
+  height: var(--rzero-combo-checkbox-size, 16px);
+  border: 2px solid var(--rzero-combo-checkbox-border, #d1d5db);
+  border-radius: var(--rzero-combo-checkbox-radius, 3px);
+  background: var(--rzero-combo-checkbox-bg, #ffffff);
+  transition: background 150ms ease, border-color 150ms ease;
+}
+
+.rzero-combo-item[data-variant="checkbox"][data-selected]::before {
+  background: var(--rzero-combo-checkbox-checked-bg, #3b82f6);
+  border-color: var(--rzero-combo-checkbox-checked-border, #3b82f6);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+  background-size: 12px 12px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.rzero-combo-item[data-variant="checkbox"][data-highlighted]::before {
+  border-color: var(--rzero-combo-checkbox-hover-border, #9ca3af);
+}
+
+.rzero-combo-item[data-variant="checkbox"][data-selected][data-highlighted]::before {
+  border-color: var(--rzero-combo-checkbox-checked-border, #3b82f6);
+}