tera-system-ui 0.1.76 → 0.2.2

package/dist/components/card/Card.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CardProps } from './Card.js';
+import { type CardProps } from './Card.recipe';
 declare const Card: import("svelte").Component<CardProps, {}, "ref">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/card/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Card } from './Card.svelte';
-export type { CardProps } from './Card.js';
+export { cardRecipe } from './Card.recipe';
+export type { CardProps, CardRecipeProps } from './Card.recipe';

package/dist/components/card/index.js

@@ -1 +1,2 @@
 export { default as Card } from './Card.svelte';
+export { cardRecipe } from './Card.recipe';

package/dist/components/checkbox/Checkbox.recipe.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Checkbox recipe — the canonical styled layer for the base design language.
+ *
+ * Built on the bits-ui Checkbox primitive: a box (root) plus a centered
+ * indicator that renders the check / indeterminate glyph.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: checkboxRecipe, ... })` in typed code — the box sizing,
+ * focus and state styles are inherited; only the design language changes. See
+ * docs/ARCHITECTURE.md for the worked example.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-checkbox-radius) lets a theme/app retune the box corner radius with
+ * no code change; it defaults to a global axis token in tera-ui-base.css.
+ */
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+export declare const checkboxRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            indicator?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            indicator?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+            indicator?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    indicator: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string[];
+    indicator: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxRecipeProps = VariantProps<typeof checkboxRecipe>;
+export interface CheckboxProps extends CheckboxRecipeProps {
+    /** Additional CSS classes for the root element. */
+    class?: string;
+    /** Whether the checkbox is checked. Bindable. */
+    checked?: boolean;
+    /** Whether the checkbox shows an indeterminate (−) state. Bindable. */
+    indeterminate?: boolean;
+    /** Prevents user interaction and dims the control. */
+    disabled?: boolean;
+    /** Whether the checkbox must be checked before form submission. */
+    required?: boolean;
+    /** Name attribute used when submitting within a form. */
+    name?: string;
+    /** Value sent with the form when checked. */
+    value?: string;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Additional content rendered next to the checkbox indicator. */
+    children?: Snippet;
+    /**
+     * Replace the default indicator glyph (structural seam). Receives the
+     * current `checked` / `indeterminate` state so a custom mark can react.
+     */
+    checkIcon?: Snippet<[{
+        checked: boolean;
+        indeterminate: boolean;
+    }]>;
+    /** Bindable reference to the root button element. */
+    ref?: HTMLButtonElement | null;
+    [key: string]: unknown;
+}

package/dist/components/checkbox/Checkbox.recipe.js

@@ -0,0 +1,39 @@
+/**
+ * Checkbox recipe — the canonical styled layer for the base design language.
+ *
+ * Built on the bits-ui Checkbox primitive: a box (root) plus a centered
+ * indicator that renders the check / indeterminate glyph.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: checkboxRecipe, ... })` in typed code — the box sizing,
+ * focus and state styles are inherited; only the design language changes. See
+ * docs/ARCHITECTURE.md for the worked example.
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-checkbox-radius) lets a theme/app retune the box corner radius with
+ * no code change; it defaults to a global axis token in tera-ui-base.css.
+ */
+import { tv } from "tailwind-variants";
+export const checkboxRecipe = tv({
+    slots: {
+        root: [
+            "group peer box-content size-4 shrink-0 rounded-[var(--tera-checkbox-radius,var(--tera-radius-sm))] border border-border-strong bg-surface-control",
+            "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5),0_1px_2px_rgba(15,23,42,0.08)]",
+            "transition-[border-color,box-shadow,background-color,transform] ease-ui duration-[var(--tera-duration-fast)]",
+            "hover:border-border-strong hover:bg-surface-hover",
+            "active:scale-95 active:duration-[var(--tera-duration-micro)]",
+            "focus-visible:outline-none focus-visible:shadow-focus",
+            "data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600 data-[state=checked]:shadow-key data-[state=checked]:hover:bg-interactive-active",
+            "data-[state=indeterminate]:bg-primary-600 data-[state=indeterminate]:border-primary-600 data-[state=indeterminate]:shadow-key data-[state=indeterminate]:hover:bg-interactive-active",
+            "disabled:cursor-not-allowed disabled:bg-neutral-token-3 disabled:border-neutral-token-5 disabled:opacity-50 disabled:shadow-none",
+            "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-token-3 data-[disabled=true]:border-neutral-token-5 data-[disabled=true]:opacity-50 data-[disabled=true]:shadow-none",
+        ],
+        indicator: [
+            "flex size-4 items-center justify-center",
+            "scale-50 opacity-0 transition-[transform,opacity] ease-spring duration-[var(--tera-duration-fast)]",
+            "group-data-[state=checked]:scale-100 group-data-[state=checked]:opacity-100",
+            "group-data-[state=indeterminate]:scale-100 group-data-[state=indeterminate]:opacity-100",
+            "motion-reduce:transition-none",
+        ],
+    },
+});

package/dist/components/checkbox/Checkbox.svelte

@@ -2,38 +2,32 @@
 import { cn } from "../../utils/index.js";
 import IconCheck from "@tabler/icons-svelte/icons/check";
 import IconMinus from "@tabler/icons-svelte/icons/minus";
-let { ref = $bindable(null), checked = $bindable(false), indeterminate = $bindable(false), class: className, disabled, required, name, value, onCheckedChange, ...restProps } = $props();
-</script>
-
-<CheckboxPrimitive.Root
-    bind:ref
-    {disabled}
-    {required}
-    {name}
-    {value}
-    {onCheckedChange}
-    class={cn(
-        "peer box-content size-4 shrink-0 rounded border border-border-default bg-surface-control",
-        "transition-[border-color,box-shadow,background-color] ease-ui duration-150",
-        "hover:border-primary-500",
-        "focus-visible:outline-none focus-visible:shadow-focus",
-        "data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600",
-        "data-[state=indeterminate]:bg-primary-600 data-[state=indeterminate]:border-primary-600",
-        "disabled:cursor-not-allowed disabled:bg-neutral-token-3 disabled:border-neutral-token-5 disabled:opacity-50",
-        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-token-3 data-[disabled=true]:border-neutral-token-5 data-[disabled=true]:opacity-50",
-        className
-    )}
-    bind:checked
-    bind:indeterminate
-    {...restProps}
->
-    {#snippet children({ checked, indeterminate })}
-        <div class="flex size-4 items-center justify-center">
-            {#if indeterminate}
-                <IconMinus class="size-3.5 text-neutral-1" stroke={3}/>
-            {:else}
-                <IconCheck class={cn("size-3.5 text-neutral-1", !checked && "text-transparent")} stroke={3}/>
-            {/if}
-        </div>
-    {/snippet}
-</CheckboxPrimitive.Root>
+import { checkboxRecipe } from './Checkbox.recipe';
+let { ref = $bindable(null), checked = $bindable(false), indeterminate = $bindable(false), class: className, disabled, required, name, value, onCheckedChange, checkIcon, ...restProps } = $props();
+const r = checkboxRecipe();
+</script>
+
+<CheckboxPrimitive.Root
+    bind:ref
+    {disabled}
+    {required}
+    {name}
+    {value}
+    {onCheckedChange}
+    class={r.root({ class: className })}
+    bind:checked
+    bind:indeterminate
+    {...restProps}
+>
+    {#snippet children({ checked, indeterminate })}
+        <div class={r.indicator()}>
+            {#if checkIcon}
+                {@render checkIcon({ checked, indeterminate })}
+            {:else if indeterminate}
+                <IconMinus class="size-3.5 text-neutral-1" stroke={3}/>
+            {:else}
+                <IconCheck class={cn("size-3.5 text-neutral-1")} stroke={3.25}/>
+            {/if}
+        </div>
+    {/snippet}
+</CheckboxPrimitive.Root>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CheckboxProps } from './Checkbox.js';
+import { type CheckboxProps } from './Checkbox.recipe';
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/checkbox/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Checkbox } from './Checkbox.svelte';
-export type { CheckboxProps } from './Checkbox';
+export { checkboxRecipe } from './Checkbox.recipe';
+export type { CheckboxProps, CheckboxRecipeProps } from './Checkbox.recipe';

package/dist/components/checkbox/index.js

@@ -1 +1,2 @@
 export { default as Checkbox } from './Checkbox.svelte';
+export { checkboxRecipe } from './Checkbox.recipe';

package/dist/components/combobox/Combobox.recipe.d.ts

@@ -0,0 +1,138 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Combobox recipe — the canonical styled layer for the searchable dropdown.
+ *
+ * Multi-part component (built on bits-ui Combobox): the recipe is slotted by
+ * role — root / input / clear / trigger / chevron / content / viewport / item /
+ * empty / chip / chipRemove — so an app can restyle any part independently. The
+ * root wrapper carries the open/disabled visual states; the dropdown parts are
+ * static base strings.
+ *
+ * Primary customization surface: extend with `tv({ extend: comboboxRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS vars (--tera-combobox-*) let
+ * a theme retune corner radius with no code change; each reads through an inline
+ * fallback to the prior global token, so the recipe is self-sufficient. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export declare const comboboxRecipe: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    clear: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    viewport: string;
+    item: string;
+    empty: string;
+    chip: string;
+    chipRemove: string;
+}, undefined, {
+    open: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    clear: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    viewport: string;
+    item: string;
+    empty: string;
+    chip: string;
+    chipRemove: string;
+}, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    clear: string;
+    trigger: string;
+    chevron: string;
+    content: string;
+    viewport: string;
+    item: string;
+    empty: string;
+    chip: string;
+    chipRemove: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ComboboxRecipeProps = VariantProps<typeof comboboxRecipe>;
+export interface ComboboxItem {
+    /** Unique value submitted or passed to onchange. */
+    value: string;
+    /** Human-readable label shown in the list and trigger. */
+    label: string;
+    /** Prevents selecting this item. */
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    /** Whether one or many items can be selected at once. */
+    type: 'single' | 'multiple';
+    /** List of selectable options. */
+    items: ComboboxItem[];
+    /** Currently selected value(s). Bindable. */
+    value?: string | string[];
+    /** Placeholder shown in the search input when nothing is selected. */
+    placeholder?: string;
+    /** Prevents all interaction. */
+    disabled?: boolean;
+    /** Whether keyboard navigation wraps at the list boundaries. */
+    loop?: boolean;
+    /** Allow deselecting the current value by clicking it again (single mode only). */
+    allowDeselect?: boolean;
+    /** Called when the selection changes. */
+    onchange?: (value: string | string[]) => void;
+    /** Additional CSS classes for the root container. */
+    class?: string;
+    /** Bindable reference to the trigger element. */
+    ref?: HTMLElement | null;
+    /** Name for the hidden form input, enabling native form submission. */
+    name?: string;
+    /** Marks the field as required for form validation. */
+    required?: boolean;
+    /** Scroll alignment for the highlighted item. */
+    scrollAlignment?: 'nearest' | 'center';
+    /**
+     * When true (single mode only), whatever the user types becomes the
+     * combobox value directly — like a text input with suggestions.
+     * Selecting an item from the list still sets its item.value as normal.
+     */
+    freeInput?: boolean;
+    /** Replace the default selected-item check mark with custom markup. */
+    checkIcon?: Snippet;
+    /** Replace the default trigger chevron with custom markup. */
+    chevronIcon?: Snippet;
+    /** Replace the default clear (×) icon with custom markup. */
+    clearIcon?: Snippet;
+    [key: string]: unknown;
+}

package/dist/components/combobox/Combobox.recipe.js

@@ -0,0 +1,50 @@
+import { tv } from "tailwind-variants";
+/**
+ * Combobox recipe — the canonical styled layer for the searchable dropdown.
+ *
+ * Multi-part component (built on bits-ui Combobox): the recipe is slotted by
+ * role — root / input / clear / trigger / chevron / content / viewport / item /
+ * empty / chip / chipRemove — so an app can restyle any part independently. The
+ * root wrapper carries the open/disabled visual states; the dropdown parts are
+ * static base strings.
+ *
+ * Primary customization surface: extend with `tv({ extend: comboboxRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS vars (--tera-combobox-*) let
+ * a theme retune corner radius with no code change; each reads through an inline
+ * fallback to the prior global token, so the recipe is self-sufficient. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export const comboboxRecipe = tv({
+    slots: {
+        root: `w-full inline-flex items-center gap-1 rounded-[var(--tera-combobox-radius,var(--tera-radius-base))] outline-none font-normal text-left
+        border border-border-default bg-surface-control shadow-xs
+        transition-[border-color,box-shadow] ease-ui duration-[var(--tera-duration-fast)]
+        hover:border-border-strong`,
+        input: 'flex-1 min-w-0 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary outline-none cursor-default',
+        clear: 'shrink-0 flex items-center justify-center size-4 rounded text-text-tertiary hover:text-text-primary',
+        trigger: 'flex items-center justify-center text-text-tertiary hover:text-text-primary',
+        chevron: 'size-4 transition-transform ease-ui duration-[var(--tera-duration-fast)]',
+        content: `z-50 overflow-hidden
+        bg-surface rounded-[var(--tera-combobox-content-radius,var(--border-radius-container))] border border-border-default shadow-lg
+        animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)]
+        data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,
+        viewport: 'p-1 max-h-60 overflow-auto',
+        item: `relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none
+        transition-colors ease-ui duration-[var(--tera-duration-micro)]
+        data-[highlighted]:bg-surface-hover
+        data-[selected]:font-medium data-[selected]:text-interactive
+        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,
+        empty: 'px-3 py-4 text-sm text-center text-text-tertiary',
+        chip: 'inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-full text-xs bg-interactive-subtle text-interactive-text border border-interactive-border shrink-0',
+        chipRemove: 'flex items-center rounded-full hover:bg-interactive/20',
+    },
+    variants: {
+        open: {
+            true: { root: 'border-interactive-hover shadow-focus' },
+        },
+        disabled: {
+            true: { root: 'cursor-not-allowed opacity-50 pointer-events-none' },
+        },
+    },
+});

package/dist/components/combobox/Combobox.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { Combobox as ComboboxPrimitive } from 'bits-ui';
+import { comboboxRecipe } from './Combobox.recipe';
 import { cn } from '../../utils/utils.js';
-import { IconCheck, IconChevronDown } from '../icons/index.js';
+import { IconCheck, IconChevronDown } from '../../internal/icons';
 import IconX from '@tabler/icons-svelte/icons/x';
-let { type, items = [], value = $bindable(undefined), placeholder = 'Search…', disabled, loop, allowDeselect, onchange, class: className, ref = $bindable(null), name, required, scrollAlignment, freeInput = false, } = $props();
+let { type, items = [], value = $bindable(undefined), placeholder = 'Search…', disabled, loop, allowDeselect, onchange, class: className, ref = $bindable(null), name, required, scrollAlignment, freeInput = false, checkIcon, chevronIcon, clearIcon, } = $props();
 let searchText = $state('');
 let open = $state(false);
 const filteredItems = $derived(searchText.trim()
@@ -61,16 +62,7 @@ function clearAll() {
     onchange?.(type === 'multiple' ? [] : '');
     searchText = '';
 }
-const wrapperClass = $derived(cn('w-full inline-flex items-center gap-1 rounded-md outline-none font-normal text-left', 'border border-border-default bg-surface-control', 'transition-[border-color,box-shadow] ease-ui duration-150', 'hover:border-interactive', open && 'border-interactive-hover shadow-focus', disabled && 'cursor-not-allowed opacity-50 pointer-events-none', className));
-const dropdownClass = `z-50 overflow-hidden
-        bg-surface rounded-container border border-border-default shadow-lg
-        animate-in fade-in zoom-in-95 duration-150
-        data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`;
-const itemClass = `relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none
-        transition-colors ease-ui duration-100
-        data-[highlighted]:bg-surface-hover
-        data-[selected]:font-medium data-[selected]:text-interactive
-        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`;
+const r = $derived(comboboxRecipe({ open, disabled }));
 </script>
 
 {#if type === 'single'}
@@ -89,26 +81,34 @@ const itemClass = `relative flex w-full cursor-pointer select-none items-center
         inputValue={controlledInputValue}
         onOpenChange={(o) => { if (!o) searchText = ''; }}
     >
-        <div bind:this={ref} class={cn(wrapperClass, 'h-9 px-3')}>
+        <div bind:this={ref} class={r.root({class: cn('h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)]', className)})}>
             <ComboboxPrimitive.Input
                 oninput={handleSingleInput}
                 placeholder={(!freeInput && selectedLabel) ? selectedLabel : placeholder}
                 clearOnDeselect
-                class="flex-1 min-w-0 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary outline-none cursor-default"
+                class={r.input()}
             />
             {#if showClearBtn}
                 <button
                     type="button"
                     onpointerdown={(e) => e.stopPropagation()}
                     onclick={(e) => { e.stopPropagation(); clearAll(); }}
-                    class="shrink-0 flex items-center justify-center size-4 rounded text-text-tertiary hover:text-text-primary"
+                    class={r.clear()}
                     aria-label="Clear selection"
                 >
-                    <IconX class="size-3.5" />
+                    {#if clearIcon}
+                        {@render clearIcon()}
+                    {:else}
+                        <IconX class="size-3.5" />
+                    {/if}
                 </button>
             {/if}
-            <ComboboxPrimitive.Trigger class="shrink-0 flex items-center justify-center text-text-tertiary hover:text-text-primary">
-                <IconChevronDown class={cn('size-4 transition-transform ease-ui duration-150', open && 'rotate-180')} />
+            <ComboboxPrimitive.Trigger class={r.trigger({class: 'shrink-0'})}>
+                {#if chevronIcon}
+                    {@render chevronIcon()}
+                {:else}
+                    <IconChevronDown class={cn(r.chevron(), open && 'rotate-180')} />
+                {/if}
             </ComboboxPrimitive.Trigger>
         </div>
 
@@ -117,25 +117,29 @@ const itemClass = `relative flex w-full cursor-pointer select-none items-center
                 <ComboboxPrimitive.Content
                     sideOffset={4}
                     customAnchor={ref}
-                    class={cn(dropdownClass, 'min-w-[var(--bits-combobox-anchor-width)]')}
+                    class={r.content({class: 'min-w-[var(--bits-combobox-anchor-width)]'})}
                 >
-                    <ComboboxPrimitive.Viewport class="p-1 max-h-60 overflow-auto">
+                    <ComboboxPrimitive.Viewport class={r.viewport()}>
                         {#each filteredItems as item (item.value)}
                             <ComboboxPrimitive.Item
                                 value={item.value}
                                 label={item.label}
                                 disabled={item.disabled}
-                                class={itemClass}
+                                class={r.item()}
                             >
                                 {#snippet children({selected})}
                                     <span class="flex-1">{item.label}</span>
                                     {#if selected}
-                                        <IconCheck class="size-4 text-interactive shrink-0" />
+                                        {#if checkIcon}
+                                            {@render checkIcon()}
+                                        {:else}
+                                            <IconCheck class="size-4 text-interactive shrink-0" />
+                                        {/if}
                                     {/if}
                                 {/snippet}
                             </ComboboxPrimitive.Item>
                         {:else}
-                            <div class="px-3 py-4 text-sm text-center text-text-tertiary">No results found.</div>
+                            <div class={r.empty()}>No results found.</div>
                         {/each}
                     </ComboboxPrimitive.Viewport>
                 </ComboboxPrimitive.Content>
@@ -156,18 +160,22 @@ const itemClass = `relative flex w-full cursor-pointer select-none items-center
         {scrollAlignment}
         onOpenChange={(o) => { if (!o) searchText = ''; }}
     >
-        <div bind:this={ref} class={cn(wrapperClass, 'min-h-9 h-auto flex-wrap gap-1 px-3 py-1.5')}>
+        <div bind:this={ref} class={r.root({class: cn('min-h-[var(--tera-control-height-md)] h-auto flex-wrap gap-1 px-[var(--tera-control-px-md)] py-1.5', className)})}>
             {#each selectedChips as chip (chip.value)}
-                <span class="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-full text-xs bg-interactive-subtle text-interactive-text border border-interactive-border shrink-0">
+                <span class={r.chip()}>
                     {chip.label}
                     <button
                         type="button"
                         onpointerdown={(e) => e.stopPropagation()}
                         onclick={(e) => { e.stopPropagation(); clearOne(chip.value); }}
-                        class="flex items-center rounded-full hover:bg-interactive/20"
+                        class={r.chipRemove()}
                         aria-label="Remove {chip.label}"
                     >
-                        <IconX class="size-3" />
+                        {#if clearIcon}
+                            {@render clearIcon()}
+                        {:else}
+                            <IconX class="size-3" />
+                        {/if}
                     </button>
                 </span>
             {/each}
@@ -175,7 +183,7 @@ const itemClass = `relative flex w-full cursor-pointer select-none items-center
                 oninput={(e) => (searchText = e.currentTarget.value)}
                 placeholder={selectedChips.length === 0 ? placeholder : ''}
                 clearOnDeselect
-                class="flex-1 min-w-[80px] bg-transparent text-sm text-text-primary placeholder:text-text-tertiary outline-none cursor-default"
+                class={r.input({class: 'min-w-[80px]'})}
             />
             <span class="ml-auto flex items-center gap-1 shrink-0 self-center">
                 {#if selectedChips.length > 0}
@@ -183,14 +191,22 @@ const itemClass = `relative flex w-full cursor-pointer select-none items-center
                         type="button"
                         onpointerdown={(e) => e.stopPropagation()}
                         onclick={(e) => { e.stopPropagation(); clearAll(); }}
-                        class="flex items-center justify-center size-4 rounded text-text-tertiary hover:text-text-primary"
+                        class={r.clear()}
                         aria-label="Clear all"
                     >
-                        <IconX class="size-3.5" />
+                        {#if clearIcon}
+                            {@render clearIcon()}
+                        {:else}
+                            <IconX class="size-3.5" />
+                        {/if}
                     </button>
                 {/if}
-                <ComboboxPrimitive.Trigger class="flex items-center justify-center text-text-tertiary hover:text-text-primary">
-                    <IconChevronDown class={cn('size-4 transition-transform ease-ui duration-150', open && 'rotate-180')} />
+                <ComboboxPrimitive.Trigger class={r.trigger()}>
+                    {#if chevronIcon}
+                        {@render chevronIcon()}
+                    {:else}
+                        <IconChevronDown class={cn(r.chevron(), open && 'rotate-180')} />
+                    {/if}
                 </ComboboxPrimitive.Trigger>
             </span>
         </div>
@@ -199,25 +215,29 @@ const itemClass = `relative flex w-full cursor-pointer select-none items-center
             <ComboboxPrimitive.Content
                 sideOffset={4}
                 customAnchor={ref}
-                class={cn(dropdownClass, 'min-w-[var(--bits-combobox-anchor-width)]')}
+                class={r.content({class: 'min-w-[var(--bits-combobox-anchor-width)]'})}
             >
-                <ComboboxPrimitive.Viewport class="p-1 max-h-60 overflow-auto">
+                <ComboboxPrimitive.Viewport class={r.viewport()}>
                     {#each filteredItems as item (item.value)}
                         <ComboboxPrimitive.Item
                             value={item.value}
                             label={item.label}
                             disabled={item.disabled}
-                            class={itemClass}
+                            class={r.item()}
                         >
                             {#snippet children({selected})}
                                 <span class="flex-1">{item.label}</span>
                                 {#if selected}
-                                    <IconCheck class="size-4 text-interactive shrink-0" />
+                                    {#if checkIcon}
+                                        {@render checkIcon()}
+                                    {:else}
+                                        <IconCheck class="size-4 text-interactive shrink-0" />
+                                    {/if}
                                 {/if}
                             {/snippet}
                         </ComboboxPrimitive.Item>
                     {:else}
-                        <div class="px-3 py-4 text-sm text-center text-text-tertiary">No results found.</div>
+                        <div class={r.empty()}>No results found.</div>
                     {/each}
                 </ComboboxPrimitive.Viewport>
             </ComboboxPrimitive.Content>

package/dist/components/combobox/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ComboboxProps } from './Combobox.js';
+import { type ComboboxProps } from './Combobox.recipe';
 declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "ref">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/components/combobox/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Combobox } from './Combobox.svelte';
-export type { ComboboxProps, ComboboxItem } from './Combobox.js';
+export { comboboxRecipe } from './Combobox.recipe';
+export type { ComboboxProps, ComboboxItem, ComboboxRecipeProps } from './Combobox.recipe';

package/dist/components/combobox/index.js

@@ -1 +1,2 @@
 export { default as Combobox } from './Combobox.svelte';
+export { comboboxRecipe } from './Combobox.recipe';