@urbicon-ui/blocks 6.3.1 → 6.3.6

package/dist/primitives/Accordion/Accordion.svelte.d.ts

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

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts

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

package/dist/primitives/Accordion/accordion.context.d.ts

@@ -1,3 +1,3 @@
-import type { AccordionContext } from './index';
+import type { AccordionContext } from './index.js';
 declare const getAccordionContext: () => AccordionContext, setAccordionContext: (context: AccordionContext) => AccordionContext;
 export { getAccordionContext, setAccordionContext };

package/dist/primitives/Accordion/accordion.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const accordionVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const accordionVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         default: {};
         separated: {

package/dist/primitives/Accordion/accordion.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const accordionVariants = tv({
     slots: {
         // divide-border-hairline instead of subtle — a quieter divider.

package/dist/primitives/Accordion/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { AccordionSlots, AccordionVariants } from './accordion.variants';
+import type { AccordionSlots, AccordionVariants } from './accordion.variants.js';
 /** Context for Accordion ↔ AccordionItem communication */
 export interface AccordionContext {
     toggle: (value: string) => void;
@@ -119,4 +119,4 @@ export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 export { default as Accordion } from './Accordion.svelte';
 export { default as AccordionItem } from './AccordionItem.svelte';
-export { type AccordionVariants, accordionVariants } from './accordion.variants';
+export { type AccordionVariants, accordionVariants } from './accordion.variants.js';

package/dist/primitives/Accordion/index.js

@@ -1,3 +1,3 @@
 export { default as Accordion } from './Accordion.svelte';
 export { default as AccordionItem } from './AccordionItem.svelte';
-export { accordionVariants } from './accordion.variants';
+export { accordionVariants } from './accordion.variants.js';

package/dist/primitives/Alert/Alert.svelte.d.ts

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

package/dist/primitives/Alert/alert.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const alertVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const alertVariants: (props?: import("../../utils/variants.js").TVProps<{
     intent: {
         primary: {};
         info: {};

package/dist/primitives/Alert/alert.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const alertVariants = tv({
     slots: {
         base: [

package/dist/primitives/Alert/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { AlertSlots, AlertVariants } from './alert.variants';
+import type { AlertSlots, AlertVariants } from './alert.variants.js';
 /**
  * Props interface for Alert component
  *
@@ -61,4 +61,4 @@ export interface AlertProps extends AlertVariants, Omit<HTMLAttributes<HTMLDivEl
     preset?: string;
 }
 export { default as Alert } from './Alert.svelte';
-export { type AlertVariants, alertVariants } from './alert.variants';
+export { type AlertVariants, alertVariants } from './alert.variants.js';

package/dist/primitives/Alert/index.js

@@ -1,2 +1,2 @@
 export { default as Alert } from './Alert.svelte';
-export { alertVariants } from './alert.variants';
+export { alertVariants } from './alert.variants.js';

package/dist/primitives/Avatar/Avatar.svelte.d.ts

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

package/dist/primitives/Avatar/avatar.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const avatarVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const avatarVariants: (props?: import("../../utils/variants.js").TVProps<{
     size: {
         xs: {
             base: string;

package/dist/primitives/Avatar/avatar.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const avatarVariants = tv({
     slots: {
         base: [

package/dist/primitives/Avatar/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { AvatarSlots, AvatarVariants } from './avatar.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { AvatarSlots, AvatarVariants } from './avatar.variants.js';
 /**
  * @description User profile image component with fallback initials, multiple sizes, and interactive states.
  *
@@ -54,4 +54,4 @@ export interface AvatarProps extends AvatarVariants, Omit<HTMLAttributes<HTMLDiv
     preset?: string;
 }
 export { default as Avatar } from './Avatar.svelte';
-export { type AvatarVariants, avatarVariants } from './avatar.variants';
+export { type AvatarVariants, avatarVariants } from './avatar.variants.js';

package/dist/primitives/Avatar/index.js

@@ -1,2 +1,2 @@
 export { default as Avatar } from './Avatar.svelte';
-export { avatarVariants } from './avatar.variants';
+export { avatarVariants } from './avatar.variants.js';

package/dist/primitives/Badge/Badge.svelte.d.ts

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

package/dist/primitives/Badge/badge.variants.d.ts

@@ -1,6 +1,6 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const PLACEMENT_VALUES: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"];
-export declare const badgeVariants: (props?: import("../../utils/variants").TVProps<{
+export declare const badgeVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             base: string;

package/dist/primitives/Badge/badge.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const PLACEMENT_VALUES = [
     'top',
     'top-start',

package/dist/primitives/Badge/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { BadgePlacement, BadgeSlots, BadgeVariants } from './badge.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { BadgePlacement, BadgeSlots, BadgeVariants } from './badge.variants.js';
 /**
  * Shared fields that apply to every Badge variant — `dot` and the
  * label-style variants both accept these.
@@ -96,4 +96,4 @@ interface BadgeStandardProps extends BadgeBaseProps {
  */
 export type BadgeProps = BadgeDotProps | BadgeStandardProps;
 export { default as Badge } from './Badge.svelte';
-export { type BadgePlacement, type BadgeVariants, badgeVariants, PLACEMENT_VALUES } from './badge.variants';
+export { type BadgePlacement, type BadgeVariants, badgeVariants, PLACEMENT_VALUES } from './badge.variants.js';

package/dist/primitives/Badge/index.js

@@ -1,2 +1,2 @@
 export { default as Badge } from './Badge.svelte';
-export { badgeVariants, PLACEMENT_VALUES } from './badge.variants';
+export { badgeVariants, PLACEMENT_VALUES } from './badge.variants.js';

package/dist/primitives/Breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/primitives/Breadcrumb/breadcrumb.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const breadcrumbVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const breadcrumbVariants: (props?: import("../../utils/variants.js").TVProps<{
     size: {
         sm: {
             list: string;

package/dist/primitives/Breadcrumb/breadcrumb.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const breadcrumbVariants = tv({
     slots: {
         nav: 'flex items-center',

package/dist/primitives/Breadcrumb/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { BreadcrumbSlots, BreadcrumbVariants } from './breadcrumb.variants';
+import type { BreadcrumbSlots, BreadcrumbVariants } from './breadcrumb.variants.js';
 /** Single breadcrumb item definition */
 export interface BreadcrumbItem {
     /** Display label */
@@ -66,6 +66,6 @@ export interface BreadcrumbProps extends BreadcrumbVariants, Omit<HTMLAttributes
     preset?: string;
 }
 export { default as Breadcrumb } from './Breadcrumb.svelte';
-export { type BreadcrumbVariants, breadcrumbVariants } from './breadcrumb.variants';
+export { type BreadcrumbVariants, breadcrumbVariants } from './breadcrumb.variants.js';
 /** Re-export as BreadcrumbItemType for barrel-level consumption */
 export type { BreadcrumbItem as BreadcrumbItemType };

package/dist/primitives/Breadcrumb/index.js

@@ -1,2 +1,2 @@
 export { default as Breadcrumb } from './Breadcrumb.svelte';
-export { breadcrumbVariants } from './breadcrumb.variants';
+export { breadcrumbVariants } from './breadcrumb.variants.js';

package/dist/primitives/Button/Button.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps } from './index';
+import type { ButtonProps } from './index.js';
 declare const Button: import("svelte").Component<ButtonProps, {
     getElement: () => HTMLButtonElement | undefined;
 }, "">;

package/dist/primitives/Button/button.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const buttonVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const buttonVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             base: string;

package/dist/primitives/Button/button.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const buttonVariants = tv({
     slots: {
         base: [

package/dist/primitives/Button/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { ButtonSlots, ButtonVariants } from './button.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { ButtonSlots, ButtonVariants } from './button.variants.js';
 /**
  * Props interface for Button component
  *
@@ -112,4 +112,4 @@ export interface ButtonProps extends ButtonVariants, Omit<HTMLButtonAttributes,
     mint?: MintProp;
 }
 export { default as Button } from './Button.svelte';
-export { type ButtonVariants, buttonVariants } from './button.variants';
+export { type ButtonVariants, buttonVariants } from './button.variants.js';

package/dist/primitives/Button/index.js

@@ -1,3 +1,3 @@
 export { default as Button } from './Button.svelte';
 // Export variants and component
-export { buttonVariants } from './button.variants';
+export { buttonVariants } from './button.variants.js';

package/dist/primitives/ButtonGroup/ButtonGroup.svelte.d.ts

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

package/dist/primitives/ButtonGroup/buttonGroup.context.d.ts

@@ -1,3 +1,3 @@
-import type { ButtonGroupContext } from './index';
+import type { ButtonGroupContext } from './index.js';
 declare const getButtonGroupContext: () => ButtonGroupContext | undefined, setButtonGroupContext: (value: ButtonGroupContext | undefined) => ButtonGroupContext | undefined;
 export { getButtonGroupContext, setButtonGroupContext };

package/dist/primitives/ButtonGroup/buttonGroup.context.js

@@ -1,4 +1,4 @@
-import { createOptionalContext } from '../../utils/optional-context';
+import { createOptionalContext } from '../../utils/optional-context.js';
 // Button reads this optionally — it works both inside and outside a ButtonGroup.
 const [getButtonGroupContext, setButtonGroupContext] = createOptionalContext();
 export { getButtonGroupContext, setButtonGroupContext };

package/dist/primitives/ButtonGroup/buttongroup.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const buttonGroupVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const buttonGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
     orientation: {
         horizontal: {
             base: string;

package/dist/primitives/ButtonGroup/buttongroup.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const buttonGroupVariants = tv({
     slots: {
         base: ['inline-flex']

package/dist/primitives/ButtonGroup/index.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { ComponentIntent, ComponentSize, ComponentVariant, InteractiveTier } from '../../utils';
-import type { ButtonVariants } from '../Button/button.variants';
-import type { ButtonGroupSlots } from './buttongroup.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { ComponentIntent, ComponentSize, ComponentVariant, InteractiveTier } from '../../utils/index.js';
+import type { ButtonVariants } from '../Button/button.variants.js';
+import type { ButtonGroupSlots } from './buttongroup.variants.js';
 export type ButtonGroupSelection = 'none' | 'single' | 'multiple';
 export type ButtonGroupOrientation = 'horizontal' | 'vertical';
 export type ButtonGroupValue = string | string[] | undefined;
@@ -106,4 +106,4 @@ export interface ButtonGroupContext {
     };
 }
 export { default as ButtonGroup } from './ButtonGroup.svelte';
-export { type ButtonGroupVariants, buttonGroupVariants } from './buttongroup.variants';
+export { type ButtonGroupVariants, buttonGroupVariants } from './buttongroup.variants.js';

package/dist/primitives/ButtonGroup/index.js

@@ -1,2 +1,2 @@
 export { default as ButtonGroup } from './ButtonGroup.svelte';
-export { buttonGroupVariants } from './buttongroup.variants';
+export { buttonGroupVariants } from './buttongroup.variants.js';

package/dist/primitives/Card/Card.svelte.d.ts

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

package/dist/primitives/Card/card.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const cardVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const cardVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         quiet: {
             base: string[];

package/dist/primitives/Card/card.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const cardVariants = tv({
     slots: {
         base: [

package/dist/primitives/Card/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { CardSlots, CardVariants } from './card.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { CardSlots, CardVariants } from './card.variants.js';
 /**
  * @description Flexible container for grouping related content with optional header, footer,
  * and interactive states. Renders as div, button, or anchor depending on the provided props.
@@ -79,4 +79,4 @@ export interface CardProps extends Omit<CardVariants, 'elementType' | 'interacti
     mint?: MintProp;
 }
 export { default as Card } from './Card.svelte';
-export { type CardVariants, cardVariants } from './card.variants';
+export { type CardVariants, cardVariants } from './card.variants.js';

package/dist/primitives/Card/index.js

@@ -1,2 +1,2 @@
 export { default as Card } from './Card.svelte';
-export { cardVariants } from './card.variants';
+export { cardVariants } from './card.variants.js';

package/dist/primitives/Checkbox/Checkbox.svelte.d.ts

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

package/dist/primitives/Checkbox/checkbox.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const checkboxVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const checkboxVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             box: string;

package/dist/primitives/Checkbox/checkbox.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const checkboxVariants = tv({
     slots: {
         wrapper: ['inline-flex flex-col gap-1.5'],

package/dist/primitives/Checkbox/index.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InteractiveTier } from '../../utils';
-import type { CheckboxSlots, CheckboxVariants } from './checkbox.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { CheckboxSlots, CheckboxVariants } from './checkbox.variants.js';
 /**
  * @description Accessible checkbox with indeterminate support, semantic intents, and form integration.
  * Uses a hidden native input for correct form behavior and ARIA semantics.
@@ -74,4 +74,4 @@ export interface CheckboxProps extends Omit<CheckboxVariants, 'error' | 'checked
     tier?: InteractiveTier;
 }
 export { default as Checkbox } from './Checkbox.svelte';
-export { type CheckboxVariants, checkboxVariants } from './checkbox.variants';
+export { type CheckboxVariants, checkboxVariants } from './checkbox.variants.js';

package/dist/primitives/Checkbox/index.js

@@ -1,2 +1,2 @@
 export { default as Checkbox } from './Checkbox.svelte';
-export { checkboxVariants } from './checkbox.variants';
+export { checkboxVariants } from './checkbox.variants.js';

package/dist/primitives/Collapsible/Collapsible.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CollapsibleProps } from './index';
+import type { CollapsibleProps } from './index.js';
 declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;
 type Collapsible = ReturnType<typeof Collapsible>;
 export default Collapsible;

package/dist/primitives/Collapsible/collapsible.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const collapsibleVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const collapsibleVariants: (props?: import("../../utils/variants.js").TVProps<{
     variant: {
         default: {};
         card: {

package/dist/primitives/Collapsible/collapsible.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const collapsibleVariants = tv({
     slots: {
         base: 'w-full',

package/dist/primitives/Collapsible/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { CollapsibleSlots, CollapsibleVariants } from './collapsible.variants';
+import type { CollapsibleSlots, CollapsibleVariants } from './collapsible.variants.js';
 /**
  * Props interface for the Collapsible component
  *
@@ -71,4 +71,4 @@ export interface CollapsibleProps extends CollapsibleVariants, Omit<HTMLAttribut
     preset?: string;
 }
 export { default as Collapsible } from './Collapsible.svelte';
-export { type CollapsibleVariants, collapsibleVariants } from './collapsible.variants';
+export { type CollapsibleVariants, collapsibleVariants } from './collapsible.variants.js';

package/dist/primitives/Collapsible/index.js

@@ -1,2 +1,2 @@
 export { default as Collapsible } from './Collapsible.svelte';
-export { collapsibleVariants } from './collapsible.variants';
+export { collapsibleVariants } from './collapsible.variants.js';

package/dist/primitives/Combobox/Combobox.svelte

@@ -66,6 +66,7 @@
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
   let inputEl = $state<HTMLInputElement>();
+  let wrapperEl = $state<HTMLElement>();
   let listboxEl = $state<HTMLElement>();
   let activeIndex = $state(-1);
 
@@ -135,6 +136,24 @@
     if (!disabled) open = true;
   }
 
+  // Chevron toggle. The input opens on focus but has no way to close itself
+  // (re-clicking a focused field is a no-op — the "trigger doesn't close it"
+  // report), so the chevron button is the explicit open/close affordance.
+  // Focus stays on the input throughout (the chevron's onmousedown calls
+  // preventDefault), so closing here doesn't blur-then-reopen via handleFocus.
+  function toggleOpen() {
+    if (disabled) return;
+    if (open) {
+      open = false;
+      // Restore the selected label if the query was left dangling (mirrors the
+      // click-outside path), so the field doesn't read as blank after closing.
+      if (!value && selectedOption) query = selectedOption.label;
+    } else {
+      open = true;
+      inputEl?.focus();
+    }
+  }
+
   function scrollToActive() {
     tick().then(() => {
       if (!listboxEl) return;
@@ -214,7 +233,10 @@
 
   function handleClickOutside(event: MouseEvent) {
     const target = event.target as Node;
-    if (!inputEl?.contains(target) && !listboxEl?.contains(target)) {
+    // Exclude the whole input wrapper (input + chevron toggle + clear button),
+    // so clicking the chevron to close doesn't race this handler into a
+    // close-then-reopen. The listbox lives in the top layer (separate subtree).
+    if (!wrapperEl?.contains(target) && !listboxEl?.contains(target)) {
       if (!closeOnClickOutside) return;
       open = false;
       if (!value && selectedOption) {
@@ -273,6 +295,7 @@
   {/if}
 
   <div
+    bind:this={wrapperEl}
     class={unstyled
       ? (slotClasses?.inputWrapper ?? '')
       : styles.inputWrapper({ class: slotClasses?.inputWrapper })}
@@ -309,11 +332,25 @@
         <CloseIcon class="h-3.5 w-3.5" />
       </button>
     {:else}
-      <ChevronDownIcon
+      <button
+        type="button"
+        tabindex={-1}
+        {disabled}
+        aria-label={bt('accessibility.toggleOptions')}
+        aria-controls={listboxId}
+        aria-expanded={open}
+        onmousedown={(e) => e.preventDefault()}
+        onclick={toggleOpen}
         class={unstyled
-          ? (slotClasses?.chevron ?? '')
-          : styles.chevron({ class: slotClasses?.chevron })}
-      />
+          ? (slotClasses?.chevronButton ?? '')
+          : styles.chevronButton({ class: slotClasses?.chevronButton })}
+      >
+        <ChevronDownIcon
+          class={unstyled
+            ? (slotClasses?.chevron ?? '')
+            : styles.chevron({ class: slotClasses?.chevron })}
+        />
+      </button>
     {/if}
 
     {#if name}

package/dist/primitives/Combobox/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ComboboxProps } from './index';
+import type { ComboboxProps } from './index.js';
 declare function $$render<T extends string | number | boolean = string>(): {
     props: ComboboxProps<T>;
     exports: {};

package/dist/primitives/Combobox/combobox.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const comboboxVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const comboboxVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         modify: {
             input: string;
@@ -150,6 +150,15 @@ export declare const comboboxVariants: (props?: import("../../utils/variants").T
         class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
+    chevronButton: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
     chevron: (props?: ({
         tier?: "commit" | "modify" | undefined;
         size?: "sm" | "md" | "lg" | undefined;