@adea-ai/ui 0.118.2 → 0.119.0

package/dist/components/ui/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":["Combobox","KobalteCombobox","Check","ChevronDown","X","ComponentProps","Show","splitProps","menuContentPadding","menuItem","popoverArrow","topLayerProps","useFormFieldControl","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","field","id","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","ComboboxTrigger","Trigger","children","_$memo","Icon","ComboboxContent","Content","Portal","Listbox","Arrow","ComboboxItem","Item","ItemLabel","ItemIndicator","ComboboxSection","Section","ComboboxClear","onClear","when","_el$","_tmpl$","$$click","_$insert","_$effect","_$className","_$delegateEvents","Combobox","_$createComponent","KobalteCombobox","_$mergeProps","_$memo","_$className","_$delegateEvents"],"sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'\nimport { Check, ChevronDown, X } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '#lib/overlay'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * Combobox.\n *\n * A Select whose list is filterable by typing. The difference from Select is\n * not cosmetic: a Combobox has a text input, so the user can narrow forty\n * options to one without reading the list. Above roughly ten options the\n * search is the feature; below it, a Select is quieter and a RadioGroup is\n * better still.\n *\n * Kobalte supplies the filtering, the `aria-activedescendant` wiring, the\n * keyboard selection and the multiple-selection mode, which is the part a\n * hand-rolled version reliably gets wrong.\n */\nexport function Combobox<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteCombobox<Option, OptGroup>>\n) {\n  return <KobalteCombobox {...props} />\n}\n\nexport function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Control>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteCombobox.Control\n      class={cn(\n        'border-input bg-transparent flex h-control-md w-full items-center gap-1.5 rounded-md border px-control-sm',\n        'transition-[color,box-shadow,border-color] ease-out',\n        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n        'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <KobalteCombobox.Input\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      class={cn(\n        'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxTrigger(props: ComponentProps<typeof KobalteCombobox.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Trigger\n      class={cn(\n        'text-muted-foreground flex shrink-0 items-center justify-center rounded-sm outline-none',\n        'transition-colors ease-out hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <KobalteCombobox.Icon>\n        <ChevronDown class=\"size-4\" />\n      </KobalteCombobox.Icon>\n    </KobalteCombobox.Trigger>\n  )\n}\n\nexport function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Portal>\n      <KobalteCombobox.Content\n        {...topLayerProps}\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />\n        {local.children}\n        <KobalteCombobox.Arrow aria-hidden=\"true\" class={popoverArrow} />\n      </KobalteCombobox.Content>\n    </KobalteCombobox.Portal>\n  )\n}\n\nexport function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteCombobox.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Check class=\"size-4\" />\n      </KobalteCombobox.ItemIndicator>\n    </KobalteCombobox.Item>\n  )\n}\n\nexport function ComboboxSection(props: ComponentProps<typeof KobalteCombobox.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteCombobox.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\n/** The clear affordance for a single-select Combobox with a value. */\nexport function ComboboxClear(props: { class?: string; onClear: () => void }) {\n  return (\n    <Show when={props.onClear}>\n      <button\n        type=\"button\"\n        aria-label=\"Clear selection\"\n        onClick={() => props.onClear()}\n        class={cn(\n          'text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded-sm',\n          'transition-colors ease-out outline-none hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          props.class\n        )}\n      >\n        <X class=\"size-3.5\" />\n      </button>\n    </Show>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":["Combobox","KobalteCombobox","Check","ChevronDown","X","ComponentProps","Show","splitProps","menuContentPadding","menuItem","popoverArrow","topLayerProps","useFormFieldControl","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","field","id","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","ComboboxTrigger","Trigger","children","_$memo","Icon","ComboboxContent","Content","Portal","Listbox","Arrow","ComboboxItem","Item","ItemLabel","ItemIndicator","ComboboxSection","Section","ComboboxClear","onClear","when","_el$","_tmpl$","$$click","_$insert","_$effect","_$className","_$delegateEvents","Combobox","_$createComponent","KobalteCombobox","_$mergeProps","_$memo","_$className","_$delegateEvents"],"sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as KobalteCombobox } from '@kobalte/core/combobox'\nimport { Check, ChevronDown, X } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '#lib/overlay'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * Combobox.\n *\n * A Select whose list is filterable by typing. The difference from Select is\n * not cosmetic: a Combobox has a text input, so the user can narrow forty\n * options to one without reading the list. Above roughly ten options the\n * search is the feature; below it, a Select is quieter and a RadioGroup is\n * better still.\n *\n * Kobalte supplies the filtering, the `aria-activedescendant` wiring, the\n * keyboard selection and the multiple-selection mode, which is the part a\n * hand-rolled version reliably gets wrong.\n */\nexport function Combobox<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteCombobox<Option, OptGroup>>\n) {\n  return <KobalteCombobox {...props} />\n}\n\nexport function ComboboxControl(props: ComponentProps<typeof KobalteCombobox.Control>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteCombobox.Control\n      class={cn(\n        'border-input bg-transparent flex h-control-md w-full items-center gap-1.5 rounded-md border px-control-sm',\n        'transition-[color,box-shadow,border-color] ease-out',\n        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',\n        'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxInput(props: ComponentProps<typeof KobalteCombobox.Input>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n\n  return (\n    <KobalteCombobox.Input\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      class={cn(\n        'h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n        'disabled:cursor-not-allowed',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function ComboboxTrigger(props: ComponentProps<typeof KobalteCombobox.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Trigger\n      class={cn(\n        'text-muted-foreground flex shrink-0 items-center justify-center rounded-sm outline-none',\n        'transition-colors ease-out hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'disabled:pointer-events-none disabled:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <KobalteCombobox.Icon>\n        <ChevronDown class=\"size-4\" />\n      </KobalteCombobox.Icon>\n    </KobalteCombobox.Trigger>\n  )\n}\n\nexport function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Portal>\n      <KobalteCombobox.Content\n        {...topLayerProps}\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden',\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />\n        {local.children}\n        <KobalteCombobox.Arrow aria-hidden=\"true\" class={popoverArrow} />\n      </KobalteCombobox.Content>\n    </KobalteCombobox.Portal>\n  )\n}\n\nexport function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteCombobox.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteCombobox.ItemIndicator\n        data-slot=\"combobox-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\n        <Check class=\"size-4\" />\n      </KobalteCombobox.ItemIndicator>\n    </KobalteCombobox.Item>\n  )\n}\n\nexport function ComboboxSection(props: ComponentProps<typeof KobalteCombobox.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteCombobox.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\n/** The clear affordance for a single-select Combobox with a value. */\nexport function ComboboxClear(props: { class?: string; onClear: () => void }) {\n  return (\n    <Show when={props.onClear}>\n      <button\n        type=\"button\"\n        aria-label=\"Clear selection\"\n        onClick={() => props.onClear()}\n        class={cn(\n          'text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded-sm',\n          'transition-colors ease-out outline-none hover:text-foreground',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          props.class\n        )}\n      >\n        <X class=\"size-3.5\" />\n      </button>\n    </Show>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/context-menu/context-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,kCAE3E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAE1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAkB1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,YAAY,CAAC,kCAc9D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAEhG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAa9F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAG3F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,kCAEtF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAG9F;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,CAAC,kCAElF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAShG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAkBhG"}
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,kCAE3E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAE1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAkB1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,YAAY,CAAC,kCAiB9D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAEhG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAgB9F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAG3F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,kCAEtF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAG9F;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,CAAC,kCAElF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAShG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAkBhG"}

package/dist/components/ui/context-menu/context-menu.js

@@ -62,6 +62,7 @@ function ContextMenuCheckboxItem(props) {
 		return cn(menuItem, "pe-8", local.class);
 	} }, rest, { get children() {
 		return [memo(() => local.children), createComponent(ContextMenu.ItemIndicator, {
+			"data-slot": "context-menu-indicator",
 			"class": "absolute end-2 flex size-4 items-center justify-center text-primary",
 			get children() {
 				return createComponent(Check, { "class": "size-4" });
@@ -78,6 +79,7 @@ function ContextMenuRadioItem(props) {
 		return cn(menuItem, "pe-8", local.class);
 	} }, rest, { get children() {
 		return [memo(() => local.children), createComponent(ContextMenu.ItemIndicator, {
+			"data-slot": "context-menu-indicator",
 			"class": "absolute end-2 flex size-4 items-center justify-center text-primary",
 			get children() {
 				return createComponent(Circle, { "class": "size-2 fill-current" });

package/dist/components/ui/context-menu/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":["ContextMenu","KobalteContextMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","topLayerProps","cn","props","_$createComponent","ContextMenuTrigger","Trigger","ContextMenuContent","Content","local","rest","Portal","children","_$mergeProps","class","ContextMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_$memo","_el$","_tmpl$","_$insert","ContextMenuCheckboxItem","CheckboxItem","ItemIndicator","ContextMenuRadioGroup","RadioGroup","ContextMenuRadioItem","RadioItem","ContextMenuLabel","GroupLabel","ContextMenuGroup","Group","ContextMenuSeparator","Separator","ContextMenuSub","Sub","ContextMenuSubTrigger","SubTrigger","ContextMenuSubContent","SubContent","ContextMenu","_$createComponent","KobalteContextMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["import { ContextMenu as KobalteContextMenu } from '@kobalte/core/context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * ContextMenu.\n *\n * The same actions as DropdownMenu, opened by right-click. The trigger is the\n * region the menu belongs to — a file row, a canvas, a code block — and the\n * menu opens at the pointer.\n *\n * The accessibility rule for this component is not about its own markup: a\n * context menu must never hold the *only* route to an action, because a\n * right-click is unavailable on touch and undiscoverable on a trackpad. Every\n * item here should also appear somewhere reachable, usually a DropdownMenu on\n * the same row.\n */\nexport function ContextMenu(props: ComponentProps<typeof KobalteContextMenu>) {\n  return <KobalteContextMenu {...props} />\n}\n\nexport function ContextMenuTrigger(props: ComponentProps<typeof KobalteContextMenu.Trigger>) {\n  return <KobalteContextMenu.Trigger {...props} />\n}\n\nexport function ContextMenuContent(props: ComponentProps<typeof KobalteContextMenu.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.Content\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteContextMenu.Portal>\n  )\n}\n\nexport function ContextMenuItem(\n  props: ComponentProps<typeof KobalteContextMenu.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+C`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  return (\n    <KobalteContextMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-code text-code tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteContextMenu.Item>\n  )\n}\n\nexport function ContextMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Check class=\"size-4\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.CheckboxItem>\n  )\n}\n\nexport function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>) {\n  return <KobalteContextMenu.RadioGroup {...props} />\n}\n\nexport function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.RadioItem>\n  )\n}\n\n/**\n * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>) {\n  return <KobalteContextMenu.Group {...props} />\n}\n\nexport function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function ContextMenuSub(props: ComponentProps<typeof KobalteContextMenu.Sub>) {\n  return <KobalteContextMenu.Sub {...props} />\n}\n\nexport function ContextMenuSubTrigger(props: ComponentProps<typeof KobalteContextMenu.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteContextMenu.SubTrigger>\n  )\n}\n\nexport function ContextMenuSubContent(props: ComponentProps<typeof KobalteContextMenu.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.SubContent\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteContextMenu.Portal>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":["ContextMenu","KobalteContextMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","topLayerProps","cn","props","_$createComponent","ContextMenuTrigger","Trigger","ContextMenuContent","Content","local","rest","Portal","children","_$mergeProps","class","ContextMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_$memo","_el$","_tmpl$","_$insert","ContextMenuCheckboxItem","CheckboxItem","ItemIndicator","ContextMenuRadioGroup","RadioGroup","ContextMenuRadioItem","RadioItem","ContextMenuLabel","GroupLabel","ContextMenuGroup","Group","ContextMenuSeparator","Separator","ContextMenuSub","Sub","ContextMenuSubTrigger","SubTrigger","ContextMenuSubContent","SubContent","ContextMenu","_$createComponent","KobalteContextMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["import { ContextMenu as KobalteContextMenu } from '@kobalte/core/context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * ContextMenu.\n *\n * The same actions as DropdownMenu, opened by right-click. The trigger is the\n * region the menu belongs to — a file row, a canvas, a code block — and the\n * menu opens at the pointer.\n *\n * The accessibility rule for this component is not about its own markup: a\n * context menu must never hold the *only* route to an action, because a\n * right-click is unavailable on touch and undiscoverable on a trackpad. Every\n * item here should also appear somewhere reachable, usually a DropdownMenu on\n * the same row.\n */\nexport function ContextMenu(props: ComponentProps<typeof KobalteContextMenu>) {\n  return <KobalteContextMenu {...props} />\n}\n\nexport function ContextMenuTrigger(props: ComponentProps<typeof KobalteContextMenu.Trigger>) {\n  return <KobalteContextMenu.Trigger {...props} />\n}\n\nexport function ContextMenuContent(props: ComponentProps<typeof KobalteContextMenu.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.Content\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteContextMenu.Portal>\n  )\n}\n\nexport function ContextMenuItem(\n  props: ComponentProps<typeof KobalteContextMenu.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+C`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  return (\n    <KobalteContextMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-code text-code tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteContextMenu.Item>\n  )\n}\n\nexport function ContextMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteContextMenu.ItemIndicator\n        data-slot=\"context-menu-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\n        <Check class=\"size-4\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.CheckboxItem>\n  )\n}\n\nexport function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>) {\n  return <KobalteContextMenu.RadioGroup {...props} />\n}\n\nexport function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteContextMenu.ItemIndicator\n        data-slot=\"context-menu-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.RadioItem>\n  )\n}\n\n/**\n * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>) {\n  return <KobalteContextMenu.Group {...props} />\n}\n\nexport function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function ContextMenuSub(props: ComponentProps<typeof KobalteContextMenu.Sub>) {\n  return <KobalteContextMenu.Sub {...props} />\n}\n\nexport function ContextMenuSubTrigger(props: ComponentProps<typeof KobalteContextMenu.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteContextMenu.SubTrigger>\n  )\n}\n\nexport function ContextMenuSubContent(props: ComponentProps<typeof KobalteContextMenu.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.SubContent\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteContextMenu.Portal>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/item/index.d.ts

@@ -1,2 +1,2 @@
-export { Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, itemVariants, type ItemProps, } from './item';
+export { Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, itemVariants, type ItemDescriptionProps, type ItemProps, } from './item';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,eAAe,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAY,EACZ,KAAK,SAAS,GACf,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,eAAe,EACf,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAY,EACZ,KAAK,oBAAoB,EACzB,KAAK,SAAS,GACf,MAAM,QAAQ,CAAA"}

package/dist/components/ui/item/item.d.ts

@@ -28,10 +28,26 @@ export type ItemProps = ComponentProps<'div'> & ItemVariantProps & {
     media?: JSX.Element;
     /** A trailing slot: a badge, a timestamp, a menu trigger. */
     trailing?: JSX.Element;
+    /**
+     * Move the trailing slot onto its own line, end-aligned under the body, once
+     * the item is narrower than 28rem — the width `ListRow` stacks its trailing
+     * controls at. Off by default: a row of badges and an icon button fits beside
+     * the body, but a pair of labelled buttons squeezes a phone-width body to a
+     * few characters.
+     */
+    stackTrailing?: boolean;
 };
 export declare function Item(props: ItemProps): JSX.Element;
 export declare function ItemTitle(props: ComponentProps<'div'>): JSX.Element;
-export declare function ItemDescription(props: ComponentProps<'div'>): JSX.Element;
+export type ItemDescriptionProps = ComponentProps<'div'> & {
+    /**
+     * Clamp to two lines. On by default, so a grid of items keeps one height; pass
+     * `false` where the description is the content — a setting's explanation, an
+     * error the reader has to read in full.
+     */
+    clamp?: boolean;
+};
+export declare function ItemDescription(props: ItemDescriptionProps): JSX.Element;
 /**
  * A group of items with an optional heading. It is a real `role="list"` with
  * `role="listitem"` children, so a screen reader reports the count — which is how a

package/dist/components/ui/item/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/item/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAEnD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY;;;8EAgBvB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEzD,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAC3C,gBAAgB,GAAG;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAEH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAkCpC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAGrD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAS3D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CACtD,eAgBF;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,eAE9C;AAED,wDAAwD;AACxD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASrD"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/item/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAEnD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY;;;8EAgBvB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEzD,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAC3C,gBAAgB,GAAG;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAEH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAiDpC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eAGrD;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAa1D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CACtD,eAgBF;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,eAE9C;AAED,wDAAwD;AACxD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASrD"}

package/dist/components/ui/item/item.js

@@ -1,10 +1,10 @@
 import { cn } from "../../../lib/utils.js";
 import { cva } from "../../../lib/variants.js";
-import { createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { className, createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/ui/item/item.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=item-media class="flex size-8 shrink-0 items-center justify-center [&amp;_svg]:size-4">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=item-trailing class="flex shrink-0 items-center gap-2">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=item-trailing>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=item><div data-slot=item-body class="flex min-w-0 flex-1 flex-col gap-0.5">`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=item-title>`);
 var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=item-description>`);
@@ -56,16 +56,22 @@ function Item(props) {
 		"size",
 		"media",
 		"trailing",
+		"stackTrailing",
 		"children"
 	]);
 	return (() => {
 		var _el$ = _tmpl$3(), _el$3 = _el$.firstChild;
-		spread(_el$, mergeProps({ get ["class"]() {
-			return cn(itemVariants({
-				variant: local.variant,
-				size: local.size
-			}), local.class);
-		} }, rest), false, true);
+		spread(_el$, mergeProps({
+			get ["data-stack-trailing"]() {
+				return local.stackTrailing ? "" : void 0;
+			},
+			get ["class"]() {
+				return cn(itemVariants({
+					variant: local.variant,
+					size: local.size
+				}), { "@container/item flex-wrap": local.stackTrailing }, local.class);
+			}
+		}, rest), false, true);
 		insert(_el$, createComponent(Show, {
 			get when() {
 				return local.media;
@@ -84,6 +90,7 @@ function Item(props) {
 			get children() {
 				var _el$4 = _tmpl$2();
 				insert(_el$4, () => local.trailing);
+				effect(() => className(_el$4, cn("flex shrink-0 items-center gap-2", { "@max-md/item:w-full @max-md/item:flex-wrap @max-md/item:justify-end": local.stackTrailing })));
 				return _el$4;
 			}
 		}), null);
@@ -101,11 +108,11 @@ function ItemTitle(props) {
 	})();
 }
 function ItemDescription(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, ["class", "clamp"]);
 	return (() => {
 		var _el$6 = _tmpl$5();
 		spread(_el$6, mergeProps({ get ["class"]() {
-			return cn("text-muted-foreground line-clamp-2 text-xs text-pretty", local.class);
+			return cn("text-muted-foreground text-xs text-pretty", { "line-clamp-2": local.clamp !== false }, local.class);
 		} }, rest), false, false);
 		return _el$6;
 	})();

package/dist/components/ui/item/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":["ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","itemVariants","variants","variant","default","outline","muted","size","sm","md","lg","defaultVariants","ItemVariantProps","ItemProps","media","Element","trailing","Item","props","local","rest","_el$","_tmpl$3","_el$3","firstChild","_$spread","_$mergeProps","class","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_el$4","_tmpl$2","ItemTitle","_el$5","_tmpl$4","ItemDescription","_el$6","_tmpl$5","ItemGroup","label","listLabel","_el$7","_tmpl$7","_el$9","_el$8","_tmpl$6","_$effect","_$setAttribute","ItemGroupEntry","role","ItemEmpty","_el$0","_tmpl$8","_$mergeProps","_$createComponent","_$setAttribute"],"sources":["../../../../src/components/ui/item/item.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Item.\n *\n * The general row: a leading slot, a body, and a trailing slot. It is the shape\n * almost every list in an application takes — a file, a member, a setting, a\n * search result — and it exists as a component because a row is where inconsistency\n * is most visible: twenty of them make any drift in height, padding or alignment\n * obvious at a glance.\n *\n * The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list\n * of like things, sized by the row ladder and meant to be scanned down a column.\n * `Item` is a self-contained block — it has a border, its own surface, an optional\n * title and description — and is meant to stand alone or sit in a grid. A list uses\n * `ListRow`; a search result or a settings card uses `Item`.\n *\n * `variant=\"outline\"` and `\"muted\"` exist because the two questions a caller\n * actually has are \"does this need an edge\" and \"is it on the canvas or inset\".\n */\nexport const itemVariants = cva('flex w-full items-center gap-3 rounded-lg text-sm', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      /** On the canvas, with an edge — the search-result shape. */\n      outline: 'border border-border bg-card',\n      /** Inset: a code well, a disabled row, a quoted message. */\n      muted: 'bg-muted',\n    },\n    size: {\n      sm: 'min-h-row-sm px-3 py-1.5',\n      md: 'min-h-row-md px-3 py-2',\n      lg: 'min-h-row-lg px-4 py-2.5',\n    },\n  },\n  defaultVariants: { variant: 'default', size: 'md' },\n})\n\ntype ItemVariantProps = VariantProps<typeof itemVariants>\n\nexport type ItemProps = ComponentProps<'div'> &\n  ItemVariantProps & {\n    /** A media slot: an icon, an avatar, a thumbnail. */\n    media?: JSX.Element\n    /** A trailing slot: a badge, a timestamp, a menu trigger. */\n    trailing?: JSX.Element\n  }\n\nexport function Item(props: ItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'size',\n    'media',\n    'trailing',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"item\"\n      class={cn(itemVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      <Show when={local.media}>\n        <span\n          data-slot=\"item-media\"\n          class=\"flex size-8 shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.media}\n        </span>\n      </Show>\n      <div data-slot=\"item-body\" class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        {local.children}\n      </div>\n      <Show when={local.trailing}>\n        <span data-slot=\"item-trailing\" class=\"flex shrink-0 items-center gap-2\">\n          {local.trailing}\n        </span>\n      </Show>\n    </div>\n  )\n}\n\nexport function ItemTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"item-title\" class={cn('truncate font-medium', local.class)} {...rest} />\n}\n\nexport function ItemDescription(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-description\"\n      class={cn('text-muted-foreground line-clamp-2 text-xs text-pretty', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A group of items with an optional heading. It is a real `role=\"list\"` with\n * `role=\"listitem\"` children, so a screen reader reports the count — which is how a\n * user knows how many results there are without counting them.\n */\nexport function ItemGroup(\n  props: ComponentProps<'div'> & {\n    label?: string\n    /** The list's accessible name. */ listLabel?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'listLabel', 'children'])\n\n  return (\n    <div data-slot=\"item-group\" class={cn('flex flex-col gap-2', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"text-muted-foreground text-2xs font-medium tracking-wide uppercase\">\n          {local.label}\n        </div>\n      </Show>\n      <div role=\"list\" aria-label={local.listLabel ?? local.label} class=\"flex flex-col gap-2\">\n        {local.children}\n      </div>\n    </div>\n  )\n}\n\n/** An item inside an `ItemGroup`, which is what makes it a list item. */\nexport function ItemGroupEntry(props: ItemProps) {\n  return <Item role=\"listitem\" {...props} />\n}\n\n/** A centred message for a group with nothing in it. */\nexport function ItemEmpty(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-empty\"\n      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"item.js","names":["ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","itemVariants","variants","variant","default","outline","muted","size","sm","md","lg","defaultVariants","ItemVariantProps","ItemProps","media","Element","trailing","stackTrailing","Item","props","local","rest","_el$","_tmpl$3","_el$3","firstChild","_$spread","_$mergeProps","data-stack-trailing","undefined","class","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_el$4","_tmpl$2","_$effect","_$className","ItemTitle","_el$5","_tmpl$4","ItemDescriptionProps","clamp","ItemDescription","_el$6","_tmpl$5","ItemGroup","label","listLabel","_el$7","_tmpl$7","_el$9","_el$8","_tmpl$6","_$setAttribute","ItemGroupEntry","role","ItemEmpty","_el$0","_tmpl$8","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/ui/item/item.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Item.\n *\n * The general row: a leading slot, a body, and a trailing slot. It is the shape\n * almost every list in an application takes — a file, a member, a setting, a\n * search result — and it exists as a component because a row is where inconsistency\n * is most visible: twenty of them make any drift in height, padding or alignment\n * obvious at a glance.\n *\n * The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list\n * of like things, sized by the row ladder and meant to be scanned down a column.\n * `Item` is a self-contained block — it has a border, its own surface, an optional\n * title and description — and is meant to stand alone or sit in a grid. A list uses\n * `ListRow`; a search result or a settings card uses `Item`.\n *\n * `variant=\"outline\"` and `\"muted\"` exist because the two questions a caller\n * actually has are \"does this need an edge\" and \"is it on the canvas or inset\".\n */\nexport const itemVariants = cva('flex w-full items-center gap-3 rounded-lg text-sm', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      /** On the canvas, with an edge — the search-result shape. */\n      outline: 'border border-border bg-card',\n      /** Inset: a code well, a disabled row, a quoted message. */\n      muted: 'bg-muted',\n    },\n    size: {\n      sm: 'min-h-row-sm px-3 py-1.5',\n      md: 'min-h-row-md px-3 py-2',\n      lg: 'min-h-row-lg px-4 py-2.5',\n    },\n  },\n  defaultVariants: { variant: 'default', size: 'md' },\n})\n\ntype ItemVariantProps = VariantProps<typeof itemVariants>\n\nexport type ItemProps = ComponentProps<'div'> &\n  ItemVariantProps & {\n    /** A media slot: an icon, an avatar, a thumbnail. */\n    media?: JSX.Element\n    /** A trailing slot: a badge, a timestamp, a menu trigger. */\n    trailing?: JSX.Element\n    /**\n     * Move the trailing slot onto its own line, end-aligned under the body, once\n     * the item is narrower than 28rem — the width `ListRow` stacks its trailing\n     * controls at. Off by default: a row of badges and an icon button fits beside\n     * the body, but a pair of labelled buttons squeezes a phone-width body to a\n     * few characters.\n     */\n    stackTrailing?: boolean\n  }\n\nexport function Item(props: ItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'size',\n    'media',\n    'trailing',\n    'stackTrailing',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"item\"\n      data-stack-trailing={local.stackTrailing ? '' : undefined}\n      class={cn(\n        itemVariants({ variant: local.variant, size: local.size }),\n        // The item is its own query container: the trailing slot answers to the\n        // width the item was given, not the viewport, so an item in a narrow\n        // column of a wide window stacks too.\n        { '@container/item flex-wrap': local.stackTrailing },\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={local.media}>\n        <span\n          data-slot=\"item-media\"\n          class=\"flex size-8 shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.media}\n        </span>\n      </Show>\n      <div data-slot=\"item-body\" class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        {local.children}\n      </div>\n      <Show when={local.trailing}>\n        <span\n          data-slot=\"item-trailing\"\n          class={cn('flex shrink-0 items-center gap-2', {\n            '@max-md/item:w-full @max-md/item:flex-wrap @max-md/item:justify-end':\n              local.stackTrailing,\n          })}\n        >\n          {local.trailing}\n        </span>\n      </Show>\n    </div>\n  )\n}\n\nexport function ItemTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"item-title\" class={cn('truncate font-medium', local.class)} {...rest} />\n}\n\nexport type ItemDescriptionProps = ComponentProps<'div'> & {\n  /**\n   * Clamp to two lines. On by default, so a grid of items keeps one height; pass\n   * `false` where the description is the content — a setting's explanation, an\n   * error the reader has to read in full.\n   */\n  clamp?: boolean\n}\n\nexport function ItemDescription(props: ItemDescriptionProps) {\n  const [local, rest] = splitProps(props, ['class', 'clamp'])\n  return (\n    <div\n      data-slot=\"item-description\"\n      class={cn(\n        'text-muted-foreground text-xs text-pretty',\n        { 'line-clamp-2': local.clamp !== false },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A group of items with an optional heading. It is a real `role=\"list\"` with\n * `role=\"listitem\"` children, so a screen reader reports the count — which is how a\n * user knows how many results there are without counting them.\n */\nexport function ItemGroup(\n  props: ComponentProps<'div'> & {\n    label?: string\n    /** The list's accessible name. */ listLabel?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'listLabel', 'children'])\n\n  return (\n    <div data-slot=\"item-group\" class={cn('flex flex-col gap-2', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"text-muted-foreground text-2xs font-medium tracking-wide uppercase\">\n          {local.label}\n        </div>\n      </Show>\n      <div role=\"list\" aria-label={local.listLabel ?? local.label} class=\"flex flex-col gap-2\">\n        {local.children}\n      </div>\n    </div>\n  )\n}\n\n/** An item inside an `ItemGroup`, which is what makes it a list item. */\nexport function ItemGroupEntry(props: ItemProps) {\n  return <Item role=\"listitem\" {...props} />\n}\n\n/** A centred message for a group with nothing in it. */\nexport function ItemEmpty(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-empty\"\n      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAaO,eAAeH,IAAI,qDAAqD;CACnFI,UAAU;EACRC,SAAS;GACPC,SAAS;;GAETC,SAAS;;GAETC,OAAO;EACT;EACAC,MAAM;GACJC,IAAI;GACJC,IAAI;GACJC,IAAI;EACN;CACF;CACAC,iBAAiB;EAAER,SAAS;EAAWI,MAAM;CAAK;AACpD,CAAC;AAoBD,SAAgBW,KAAKC,OAAkB;CACrC,MAAM,CAACC,OAAOC,QAAQxB,WAAWsB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,cAAA;EAAA,IAAAG,OAAAC,QAAA,GAAAC,QAAAF,KAAAG;EAAAC,OAAAJ,MAAAK,WAAA;GAAA,KAAA,yBAAA;IAAA,OAGyBP,MAAMH,gBAAgB,KAAKY,KAAAA;GAAS;GAAA,KAAA,WAAA;IAAA,OAClD7B,GACLC,aAAa;KAAEE,SAASiB,MAAMjB;KAASI,MAAMa,MAAMb;IAAK,CAAC,GAIzD,EAAE,6BAA6Ba,MAAMH,cAAc,GACnDG,MAAMU,KACR;GAAC;EAAA,GACGT,IAAI,GAAA,OAAA,IAAA;EAAAU,OAAAT,MAAAU,gBAEPpC,MAAI;GAAA,IAACqC,OAAI;IAAA,OAAEb,MAAMN;GAAK;GAAA,IAAAoB,WAAA;IAAA,IAAAC,QAAAC,OAAA;IAAAL,OAAAI,aAKlBf,MAAMN,KAAK;IAAA,OAAAqB;GAAA;EAAA,CAAA,GAAAX,KAAA;EAAAO,OAAAP,aAIbJ,MAAMc,QAAQ;EAAAH,OAAAT,MAAAU,gBAEhBpC,MAAI;GAAA,IAACqC,OAAI;IAAA,OAAEb,MAAMJ;GAAQ;GAAA,IAAAkB,WAAA;IAAA,IAAAG,QAAAC,QAAA;IAAAP,OAAAM,aAQrBjB,MAAMJ,QAAQ;IAAAuB,aAAAC,UAAAH,OALRrC,GAAG,oCAAoC,EAC5C,uEACEoB,MAAMH,cACV,CAAC,CAAC,CAAA;IAAA,OAAAoB;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAf;CAAA,EAAA,CAAA;AAOZ;AAEA,SAAgBmB,UAAUtB,OAA8B;CACtD,MAAM,CAACC,OAAOC,QAAQxB,WAAWsB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAuB,QAAAC,QAAA;EAAAjB,OAAAgB,OAAAf,WAAA,EAAA,KAAA,WAAA;GAAA,OAA0C3B,GAAG,wBAAwBoB,MAAMU,KAAK;EAAC,EAAA,GAAMT,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAqB;CAAA,EAAA,CAAA;AAC7F;AAWA,SAAgBI,gBAAgB3B,OAA6B;CAC3D,MAAM,CAACC,OAAOC,QAAQxB,WAAWsB,OAAO,CAAC,SAAS,OAAO,CAAC;CAC1D,cAAA;EAAA,IAAA4B,QAAAC,QAAA;EAAAtB,OAAAqB,OAAApB,WAAA,EAAA,KAAA,WAAA;GAAA,OAGW3B,GACL,6CACA,EAAE,gBAAgBoB,MAAMyB,UAAU,MAAM,GACxCzB,MAAMU,KACR;EAAC,EAAA,GACGT,IAAI,GAAA,OAAA,KAAA;EAAA,OAAA0B;CAAA,EAAA,CAAA;AAGd;;;;;;AAOA,SAAgBE,UACd9B,OAIA;CACA,MAAM,CAACC,OAAOC,QAAQxB,WAAWsB,OAAO;EAAC;EAAS;EAAS;EAAa;CAAU,CAAC;CAEnF,cAAA;EAAA,IAAAiC,QAAAC,QAAA,GAAAC,QAAAF,MAAA3B;EAAAC,OAAA0B,OAAAzB,WAAA,EAAA,KAAA,WAAA;GAAA,OACqC3B,GAAG,uBAAuBoB,MAAMU,KAAK;EAAC,EAAA,GAAMT,IAAI,GAAA,OAAA,IAAA;EAAAU,OAAAqB,OAAApB,gBAChFpC,MAAI;GAAA,IAACqC,OAAI;IAAA,OAAEb,MAAM8B;GAAK;GAAA,IAAAhB,WAAA;IAAA,IAAAqB,QAAAC,QAAA;IAAAzB,OAAAwB,aAElBnC,MAAM8B,KAAK;IAAA,OAAAK;GAAA;EAAA,CAAA,GAAAD,KAAA;EAAAvB,OAAAuB,aAIblC,MAAMc,QAAQ;EAAAK,aAAAkB,aAAAH,OAAA,cADYlC,MAAM+B,aAAa/B,MAAM8B,KAAK,CAAA;EAAA,OAAAE;CAAA,EAAA,CAAA;AAKjE;;AAGA,SAAgBM,eAAevC,OAAkB;CAC/C,OAAAa,gBAAQd,MAAIS,WAAA,EAACgC,MAAI,WAAA,GAAgBxC,KAAK,CAAA;AACxC;;AAGA,SAAgByC,UAAUzC,OAA8B;CACtD,MAAM,CAACC,OAAOC,QAAQxB,WAAWsB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA0C,QAAAC,QAAA;EAAApC,OAAAmC,OAAAlC,WAAA,EAAA,KAAA,WAAA;GAAA,OAGW3B,GAAG,kDAAkDoB,MAAMU,KAAK;EAAC,EAAA,GACpET,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAwC;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/ui/menubar/menubar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAe9C;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,kCAWnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,kCAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAelF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAoBlF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAgCF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,YAAY,CAAC,kCAY5F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAExF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAYtF;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAGnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,kCAE9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAGtF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,kCAE1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAQxF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAiBxF"}
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAe9C;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,kCAWnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,kCAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAelF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAoBlF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAgCF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,YAAY,CAAC,kCAe5F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAExF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAetF;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAGnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,kCAE9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAGtF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,kCAE1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAQxF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAiBxF"}

package/dist/components/ui/menubar/menubar.js

@@ -81,6 +81,7 @@ function MenubarCheckboxItem(props) {
 		return cn(menuItem, "pe-8", local.class);
 	} }, rest, { get children() {
 		return [memo(() => local.children), createComponent(Menubar.ItemIndicator, {
+			"data-slot": "menubar-indicator",
 			"class": "absolute end-2 flex size-4 items-center justify-center text-primary",
 			get children() {
 				return createComponent(Check, { "class": "size-4" });
@@ -97,6 +98,7 @@ function MenubarRadioItem(props) {
 		return cn(menuItem, "pe-8", local.class);
 	} }, rest, { get children() {
 		return [memo(() => local.children), createComponent(Menubar.ItemIndicator, {
+			"data-slot": "menubar-indicator",
 			"class": "absolute end-2 flex size-4 items-center justify-center text-primary",
 			get children() {
 				return createComponent(Circle, { "class": "size-2 fill-current" });

package/dist/components/ui/menubar/menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.js","names":["Menubar","KobalteMenubar","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","topLayerProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","MenubarMenu","Menu","MenubarTrigger","Trigger","MenubarContent","Content","Portal","children","Arrow","_$memo","MenubarItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","MenubarCheckboxItem","CheckboxItem","ItemIndicator","MenubarRadioGroup","RadioGroup","MenubarRadioItem","RadioItem","MenubarLabel","GroupLabel","MenubarGroup","Group","MenubarSeparator","Separator","MenubarSub","Sub","MenubarSubTrigger","SubTrigger","MenubarSubContent","SubContent","Menubar","_$createComponent","KobalteMenubar","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/menubar/menubar.tsx"],"sourcesContent":["import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  popoverArrow,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Menubar.\n *\n * A persistent row of menus at the top of a surface — the desktop application\n * pattern. Each trigger opens its own menu, and the arrow keys move *between*\n * menus once one is open, which is what makes a menubar a single control rather\n * than five menus that happen to be adjacent.\n *\n * This is for a window-level command surface. For actions on one thing, use\n * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.\n */\nexport function Menubar(props: ComponentProps<typeof KobalteMenubar>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar\n      class={cn(\n        'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One top-level menu: a trigger and the panel it opens.\n *\n * Required, and the reason the component is not just a row of triggers — the\n * menubar's arrow keys move *between* menus, which only works when each trigger\n * belongs to a menu the bar knows about. `value` names it.\n */\nexport function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {\n  return <KobalteMenubar.Menu {...props} />\n}\n\nexport function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Trigger\n      class={cn(\n        'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',\n        'transition-colors ease-out outline-none',\n        'data-[expanded]:bg-surface-active',\n        'data-[highlighted]:bg-surface-hover',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.Content\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      >\n        <KobalteMenubar.Arrow aria-hidden=\"true\" class={popoverArrow} />\n        {local.children}\n      </KobalteMenubar.Content>\n    </KobalteMenubar.Portal>\n  )\n}\n\nexport function MenubarItem(\n  props: ComponentProps<typeof KobalteMenubar.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+N`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n  return (\n    <KobalteMenubar.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-code text-code tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteMenubar.Item>\n  )\n}\n\nexport function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Check class=\"size-4\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.CheckboxItem>\n  )\n}\n\nexport function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {\n  return <KobalteMenubar.RadioGroup {...props} />\n}\n\nexport function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.RadioItem>\n  )\n}\n\n/**\n * The caption of a `MenubarGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {\n  return <KobalteMenubar.Group {...props} />\n}\n\nexport function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {\n  return <KobalteMenubar.Sub {...props} />\n}\n\nexport function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteMenubar.SubTrigger>\n  )\n}\n\nexport function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.SubContent\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteMenubar.Portal>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"menubar.js","names":["Menubar","KobalteMenubar","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","topLayerProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","MenubarMenu","Menu","MenubarTrigger","Trigger","MenubarContent","Content","Portal","children","Arrow","_$memo","MenubarItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","MenubarCheckboxItem","CheckboxItem","ItemIndicator","MenubarRadioGroup","RadioGroup","MenubarRadioItem","RadioItem","MenubarLabel","GroupLabel","MenubarGroup","Group","MenubarSeparator","Separator","MenubarSub","Sub","MenubarSubTrigger","SubTrigger","MenubarSubContent","SubContent","Menubar","_$createComponent","KobalteMenubar","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/menubar/menubar.tsx"],"sourcesContent":["import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  popoverArrow,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Menubar.\n *\n * A persistent row of menus at the top of a surface — the desktop application\n * pattern. Each trigger opens its own menu, and the arrow keys move *between*\n * menus once one is open, which is what makes a menubar a single control rather\n * than five menus that happen to be adjacent.\n *\n * This is for a window-level command surface. For actions on one thing, use\n * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.\n */\nexport function Menubar(props: ComponentProps<typeof KobalteMenubar>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar\n      class={cn(\n        'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One top-level menu: a trigger and the panel it opens.\n *\n * Required, and the reason the component is not just a row of triggers — the\n * menubar's arrow keys move *between* menus, which only works when each trigger\n * belongs to a menu the bar knows about. `value` names it.\n */\nexport function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {\n  return <KobalteMenubar.Menu {...props} />\n}\n\nexport function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Trigger\n      class={cn(\n        'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',\n        'transition-colors ease-out outline-none',\n        'data-[expanded]:bg-surface-active',\n        'data-[highlighted]:bg-surface-hover',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.Content\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      >\n        <KobalteMenubar.Arrow aria-hidden=\"true\" class={popoverArrow} />\n        {local.children}\n      </KobalteMenubar.Content>\n    </KobalteMenubar.Portal>\n  )\n}\n\nexport function MenubarItem(\n  props: ComponentProps<typeof KobalteMenubar.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+N`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n  return (\n    <KobalteMenubar.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-code text-code tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteMenubar.Item>\n  )\n}\n\nexport function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteMenubar.ItemIndicator\n        data-slot=\"menubar-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\n        <Check class=\"size-4\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.CheckboxItem>\n  )\n}\n\nexport function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {\n  return <KobalteMenubar.RadioGroup {...props} />\n}\n\nexport function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      {/* The indicator reads in the accent, like every other selected state in\n      the system. */}\n      <KobalteMenubar.ItemIndicator\n        data-slot=\"menubar-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.RadioItem>\n  )\n}\n\n/**\n * The caption of a `MenubarGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {\n  return <KobalteMenubar.Group {...props} />\n}\n\nexport function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {\n  return <KobalteMenubar.Sub {...props} />\n}\n\nexport function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteMenubar.SubTrigger>\n  )\n}\n\nexport function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.SubContent\n        {...topLayerProps}\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteMenubar.Portal>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAIL,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAA;AAGrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC7C,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAQ9D;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCAiCtD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA;AAEjF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAC1E;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAA;IACzC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,mBAAmB,CAAA;CAC/B,CAAA;AAkBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAalD;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,0EAA0E;IAC1E,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCA0BtD;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG;IACjD;;8BAE0B;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,kCAiBF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,kCAGhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,kCAQ5E;AAED,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAEhE"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAIL,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAA;AAGrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC7C,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAQ9D;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCAiCtD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA;AAEjF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,GAAG;IAC1E;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAA;IACzC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,mBAAmB,CAAA;CAC/B,CAAA;AAkBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,kCAalD;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,GAAG;IAC9E,0EAA0E;IAC1E,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCA0BtD;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG;IACjD;;8BAE0B;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,kCAoBF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,kCAGhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,kCAQ5E;AAED,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAEhE"}

package/dist/components/ui/select/select.js

@@ -133,6 +133,7 @@ function SelectItem(props) {
 				return local.children;
 			} }),
 			createComponent(Select.ItemIndicator, {
+				"data-slot": "select-indicator",
 				"class": "absolute end-2 flex size-4 items-center justify-center text-primary",
 				get children() {
 					return createComponent(Check, { "class": "size-4" });

package/dist/components/ui/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["Select","KobalteSelect","Check","ChevronDown","ChevronsUpDown","ComponentProps","Show","splitProps","menuContentPadding","menuItem","menuSwatchTone","MenuSwatchTone","topLayerProps","cn","props","Option","OptGroup","local","rest","_$createComponent","_$mergeProps","gutter","SelectTriggerProps","Trigger","size","hideIcon","SelectTrigger","class","undefined","children","_$memo","when","Icon","SelectValueChildren","Value","SelectValueProps","optionLabel","option","LABEL_FIELDS","const","labelFromOption","field","value","Record","SelectValue","readLabel","state","selectedOption","SelectContentProps","Content","portalMount","HTMLElement","SelectContent","Portal","mount","Listbox","SelectItem","Item","swatch","_el$","_tmpl$","_$effect","_$className","tone","ItemLabel","ItemIndicator","SelectSection","Section","SelectLabel","Label","SelectChevronsUpDown","Select","_$createComponent","KobalteSelect","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as KobalteSelect } from '@kobalte/core/select'\nimport { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  menuItem,\n  menuSwatchTone,\n  type MenuSwatchTone,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Select.\n *\n * A single choice from a list that is too long to show, or whose options are\n * only known at runtime. The distinction from RadioGroup is disclosure: a\n * Select hides the choices behind a click, which is right above roughly seven\n * options and wrong below it.\n *\n * `Select.Value` renders the human-readable label of the selection, not its\n * value — the reason a Select takes both `options` and `optionValue`/`optionText`\n * rather than a bare list of strings, and the reason the trigger never shows a\n * raw id.\n */\nexport function Select<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteSelect<Option, OptGroup>>\n) {\n  // Kobalte's own default gutter is 8px; without the arrow (removed below) the\n  // popper no longer folds half an arrow box into that offset, and 8px read as\n  // a detached list. Four pixels is shadcn's `sideOffset` — attached, with\n  // room for the trigger's own border.\n  const [local, rest] = splitProps(props, ['gutter'])\n  return <KobalteSelect gutter={local.gutter ?? 4} {...rest} />\n}\n\nexport type SelectTriggerProps = ComponentProps<typeof KobalteSelect.Trigger> & {\n  size?: 'sm' | 'md' | 'lg'\n  /** Hide the chevron, e.g. when a caller draws its own affordance. */\n  hideIcon?: boolean\n}\n\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'size', 'hideIcon', 'children'])\n\n  return (\n    <KobalteSelect.Trigger\n      data-slot=\"select-trigger\"\n      class={cn(\n        'border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md',\n        'whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none',\n        'data-[placeholder-shown]:text-muted-foreground',\n        'hover:border-input',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        {\n          'h-control-sm text-xs': local.size === 'sm',\n          'h-control-md text-sm': local.size === 'md' || local.size === undefined,\n          'h-control-lg text-sm': local.size === 'lg',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={!local.hideIcon}>\n        <KobalteSelect.Icon class=\"text-muted-foreground\">\n          <ChevronDown />\n        </KobalteSelect.Icon>\n      </Show>\n    </KobalteSelect.Trigger>\n  )\n}\n\n/**\n * What the trigger shows for the current selection.\n *\n * The default renderer is the reason a single-select needs no render prop at all.\n * Kobalte's own `Value` draws *only* its children, so a bare `<SelectValue />`\n * shows the placeholder and then goes blank the moment something is chosen: the\n * value is there, nothing paints it.\n *\n * Kobalte cannot supply a default itself, because an option is the caller's type\n * — it has no way to know which field is the label. So this reads a field by\n * convention: `label`, then `name`, then `textValue`. An option shaped\n * `{ value, label }` therefore needs nothing, and anything else passes\n * `optionLabel`.\n *\n * A multiple-select still supplies its own renderer, because \"3 selected\" is a\n * summary a caller has to phrase, not something a component can guess.\n */\ntype SelectValueChildren = ComponentProps<typeof KobalteSelect.Value>['children']\n\nexport type SelectValueProps = ComponentProps<typeof KobalteSelect.Value> & {\n  /**\n   * Read the display text from the selected option. Supply this when the option's\n   * label does not live in a field called `label`, `name` or `textValue`.\n   */\n  optionLabel?: (option: unknown) => string\n  /** Replace the default readout entirely, for a multiple-select summary. */\n  children?: SelectValueChildren\n}\n\n/** Fields a label is read from, in order. See `SelectValueProps.optionLabel`. */\nconst LABEL_FIELDS = ['label', 'name', 'textValue'] as const\n\nfunction labelFromOption(option: unknown): string {\n  if (option === null || typeof option !== 'object') {\n    return typeof option === 'string' ? option : ''\n  }\n\n  for (const field of LABEL_FIELDS) {\n    const value = (option as Record<string, unknown>)[field]\n    if (typeof value === 'string') return value\n  }\n\n  return ''\n}\n\nexport function SelectValue(props: SelectValueProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'optionLabel'])\n\n  const readLabel = (state: { selectedOption: () => unknown }): string => {\n    const option = state.selectedOption()\n    return local.optionLabel ? local.optionLabel(option) : labelFromOption(option)\n  }\n\n  return (\n    <KobalteSelect.Value data-slot=\"select-value\" class={cn('truncate', local.class)} {...rest}>\n      {local.children ?? (readLabel as unknown as SelectValueChildren)}\n    </KobalteSelect.Value>\n  )\n}\n\n/**\n * The option list. The items themselves come from the root's `itemComponent`,\n * which is what makes a Select able to render a typed option rather than a\n * string; `children` here is for content above the list, such as a filter hint.\n */\nexport type SelectContentProps = ComponentProps<typeof KobalteSelect.Content> & {\n  /** Keep a nested menu inside its enclosing modal's accessible subtree. */\n  portalMount?: HTMLElement\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'portalMount'])\n\n  return (\n    <KobalteSelect.Portal mount={local.portalMount}>\n      <KobalteSelect.Content\n        {...topLayerProps}\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-select-content-transform-origin) overflow-y-auto overflow-x-hidden',\n          menuContentPadding,\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        {/* No arrow: the list is the trigger's own value opened up, and Kobalte\n            reserves half the arrow's 30px box as popper gutter, which is where\n            the reported gap between a form trigger and its options came from. */}\n        <KobalteSelect.Listbox class=\"flex flex-col\" />\n      </KobalteSelect.Content>\n    </KobalteSelect.Portal>\n  )\n}\n\nexport function SelectItem(\n  props: ComponentProps<typeof KobalteSelect.Item> & {\n    /** Draw a leading colour dot from the shared tone ladder — the accent or\n     * status role the option's card badge carries. `aria-hidden`; the label\n     * carries the meaning. */\n    swatch?: MenuSwatchTone\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'swatch'])\n\n  return (\n    <KobalteSelect.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <Show when={local.swatch}>\n        <span aria-hidden=\"true\" class={menuSwatchTone({ tone: local.swatch })} />\n      </Show>\n      <KobalteSelect.ItemLabel>{local.children}</KobalteSelect.ItemLabel>\n      {/* The indicator reads in the accent, like every other selected state in\n          the system — the row's own foreground reads as decoration. */}\n      <KobalteSelect.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center text-primary\">\n        <Check class=\"size-4\" />\n      </KobalteSelect.ItemIndicator>\n    </KobalteSelect.Item>\n  )\n}\n\nexport function SelectSection(props: ComponentProps<typeof KobalteSelect.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteSelect.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\nexport function SelectLabel(props: ComponentProps<typeof KobalteSelect.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSelect.Label\n      class={cn('text-muted-foreground px-2 py-1.5 text-2xs font-medium uppercase', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** The chevron pair used when a Select is composed by hand in a field. */\nexport function SelectChevronsUpDown(props: ComponentProps<'svg'>) {\n  return <ChevronsUpDown aria-hidden=\"true\" {...props} />\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["Select","KobalteSelect","Check","ChevronDown","ChevronsUpDown","ComponentProps","Show","splitProps","menuContentPadding","menuItem","menuSwatchTone","MenuSwatchTone","topLayerProps","cn","props","Option","OptGroup","local","rest","_$createComponent","_$mergeProps","gutter","SelectTriggerProps","Trigger","size","hideIcon","SelectTrigger","class","undefined","children","_$memo","when","Icon","SelectValueChildren","Value","SelectValueProps","optionLabel","option","LABEL_FIELDS","const","labelFromOption","field","value","Record","SelectValue","readLabel","state","selectedOption","SelectContentProps","Content","portalMount","HTMLElement","SelectContent","Portal","mount","Listbox","SelectItem","Item","swatch","_el$","_tmpl$","_$effect","_$className","tone","ItemLabel","ItemIndicator","SelectSection","Section","SelectLabel","Label","SelectChevronsUpDown","Select","_$createComponent","KobalteSelect","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as KobalteSelect } from '@kobalte/core/select'\nimport { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  menuItem,\n  menuSwatchTone,\n  type MenuSwatchTone,\n  topLayerProps,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Select.\n *\n * A single choice from a list that is too long to show, or whose options are\n * only known at runtime. The distinction from RadioGroup is disclosure: a\n * Select hides the choices behind a click, which is right above roughly seven\n * options and wrong below it.\n *\n * `Select.Value` renders the human-readable label of the selection, not its\n * value — the reason a Select takes both `options` and `optionValue`/`optionText`\n * rather than a bare list of strings, and the reason the trigger never shows a\n * raw id.\n */\nexport function Select<Option, OptGroup = never>(\n  props: ComponentProps<typeof KobalteSelect<Option, OptGroup>>\n) {\n  // Kobalte's own default gutter is 8px; without the arrow (removed below) the\n  // popper no longer folds half an arrow box into that offset, and 8px read as\n  // a detached list. Four pixels is shadcn's `sideOffset` — attached, with\n  // room for the trigger's own border.\n  const [local, rest] = splitProps(props, ['gutter'])\n  return <KobalteSelect gutter={local.gutter ?? 4} {...rest} />\n}\n\nexport type SelectTriggerProps = ComponentProps<typeof KobalteSelect.Trigger> & {\n  size?: 'sm' | 'md' | 'lg'\n  /** Hide the chevron, e.g. when a caller draws its own affordance. */\n  hideIcon?: boolean\n}\n\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const [local, rest] = splitProps(props, ['class', 'size', 'hideIcon', 'children'])\n\n  return (\n    <KobalteSelect.Trigger\n      data-slot=\"select-trigger\"\n      class={cn(\n        'border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md',\n        'whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none',\n        'data-[placeholder-shown]:text-muted-foreground',\n        'hover:border-input',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n        {\n          'h-control-sm text-xs': local.size === 'sm',\n          'h-control-md text-sm': local.size === 'md' || local.size === undefined,\n          'h-control-lg text-sm': local.size === 'lg',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <Show when={!local.hideIcon}>\n        <KobalteSelect.Icon class=\"text-muted-foreground\">\n          <ChevronDown />\n        </KobalteSelect.Icon>\n      </Show>\n    </KobalteSelect.Trigger>\n  )\n}\n\n/**\n * What the trigger shows for the current selection.\n *\n * The default renderer is the reason a single-select needs no render prop at all.\n * Kobalte's own `Value` draws *only* its children, so a bare `<SelectValue />`\n * shows the placeholder and then goes blank the moment something is chosen: the\n * value is there, nothing paints it.\n *\n * Kobalte cannot supply a default itself, because an option is the caller's type\n * — it has no way to know which field is the label. So this reads a field by\n * convention: `label`, then `name`, then `textValue`. An option shaped\n * `{ value, label }` therefore needs nothing, and anything else passes\n * `optionLabel`.\n *\n * A multiple-select still supplies its own renderer, because \"3 selected\" is a\n * summary a caller has to phrase, not something a component can guess.\n */\ntype SelectValueChildren = ComponentProps<typeof KobalteSelect.Value>['children']\n\nexport type SelectValueProps = ComponentProps<typeof KobalteSelect.Value> & {\n  /**\n   * Read the display text from the selected option. Supply this when the option's\n   * label does not live in a field called `label`, `name` or `textValue`.\n   */\n  optionLabel?: (option: unknown) => string\n  /** Replace the default readout entirely, for a multiple-select summary. */\n  children?: SelectValueChildren\n}\n\n/** Fields a label is read from, in order. See `SelectValueProps.optionLabel`. */\nconst LABEL_FIELDS = ['label', 'name', 'textValue'] as const\n\nfunction labelFromOption(option: unknown): string {\n  if (option === null || typeof option !== 'object') {\n    return typeof option === 'string' ? option : ''\n  }\n\n  for (const field of LABEL_FIELDS) {\n    const value = (option as Record<string, unknown>)[field]\n    if (typeof value === 'string') return value\n  }\n\n  return ''\n}\n\nexport function SelectValue(props: SelectValueProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'optionLabel'])\n\n  const readLabel = (state: { selectedOption: () => unknown }): string => {\n    const option = state.selectedOption()\n    return local.optionLabel ? local.optionLabel(option) : labelFromOption(option)\n  }\n\n  return (\n    <KobalteSelect.Value data-slot=\"select-value\" class={cn('truncate', local.class)} {...rest}>\n      {local.children ?? (readLabel as unknown as SelectValueChildren)}\n    </KobalteSelect.Value>\n  )\n}\n\n/**\n * The option list. The items themselves come from the root's `itemComponent`,\n * which is what makes a Select able to render a typed option rather than a\n * string; `children` here is for content above the list, such as a filter hint.\n */\nexport type SelectContentProps = ComponentProps<typeof KobalteSelect.Content> & {\n  /** Keep a nested menu inside its enclosing modal's accessible subtree. */\n  portalMount?: HTMLElement\n}\n\nexport function SelectContent(props: SelectContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'portalMount'])\n\n  return (\n    <KobalteSelect.Portal mount={local.portalMount}>\n      <KobalteSelect.Content\n        {...topLayerProps}\n        class={cn(\n          'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg',\n          'z-(--z-menu) max-h-(--kb-popper-content-available-height) min-w-[8rem] origin-(--kb-select-content-transform-origin) overflow-y-auto overflow-x-hidden',\n          menuContentPadding,\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n          'data-expanded:duration-150 data-closed:duration-100',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n        {/* No arrow: the list is the trigger's own value opened up, and Kobalte\n            reserves half the arrow's 30px box as popper gutter, which is where\n            the reported gap between a form trigger and its options came from. */}\n        <KobalteSelect.Listbox class=\"flex flex-col\" />\n      </KobalteSelect.Content>\n    </KobalteSelect.Portal>\n  )\n}\n\nexport function SelectItem(\n  props: ComponentProps<typeof KobalteSelect.Item> & {\n    /** Draw a leading colour dot from the shared tone ladder — the accent or\n     * status role the option's card badge carries. `aria-hidden`; the label\n     * carries the meaning. */\n    swatch?: MenuSwatchTone\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'swatch'])\n\n  return (\n    <KobalteSelect.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      <Show when={local.swatch}>\n        <span aria-hidden=\"true\" class={menuSwatchTone({ tone: local.swatch })} />\n      </Show>\n      <KobalteSelect.ItemLabel>{local.children}</KobalteSelect.ItemLabel>\n      {/* The indicator reads in the accent, like every other selected state in\n          the system — the row's own foreground reads as decoration. */}\n      <KobalteSelect.ItemIndicator\n        data-slot=\"select-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\n        <Check class=\"size-4\" />\n      </KobalteSelect.ItemIndicator>\n    </KobalteSelect.Item>\n  )\n}\n\nexport function SelectSection(props: ComponentProps<typeof KobalteSelect.Section>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteSelect.Section class={cn('flex flex-col', local.class)} {...rest} />\n}\n\nexport function SelectLabel(props: ComponentProps<typeof KobalteSelect.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSelect.Label\n      class={cn('text-muted-foreground px-2 py-1.5 text-2xs font-medium uppercase', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** The chevron pair used when a Select is composed by hand in a field. */\nexport function SelectChevronsUpDown(props: ComponentProps<'svg'>) {\n  return <ChevronsUpDown aria-hidden=\"true\" {...props} />\n}\n"],"mappings":"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"}

package/dist/lib/overlay.d.ts

@@ -61,6 +61,12 @@ export declare const popoverArrow = "fill-popover stroke-border";
 /**
  * A menu row: the shared height, radius, hover fill and focus treatment for
  * every item inside a menu, listbox or command list.
+ *
+ * The row sizes and dims the icons a caller puts in it, but not the glyph of
+ * its selection indicator (any `[data-slot$=-indicator]`): a descendant `svg`
+ * rule outranks a single utility on the glyph, so without the exclusion a
+ * radio item's `size-2` dot drew as a 16px muted disc and every check lost the
+ * indicator's accent.
  */
 export declare const menuItem: string;
 /** A destructive action keeps readable text and marks its row with a status edge. */

package/dist/lib/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAEtD;+EAC+E;AAC/E,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,4EACiD,CAAA;AAE3E;;;GAGG;AACH,eAAO,MAAM,YAAY,wDAAwD,CAAA;AAEjF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;8EAYzB,CAAA;AAEF,8CAA8C;AAC9C,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAErF,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAEtD;+EAC+E;AAC/E,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,4EACiD,CAAA;AAE3E;;;GAGG;AACH,eAAO,MAAM,YAAY,wDAAwD,CAAA;AAEjF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,QAQV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;8EAYzB,CAAA;AAEF,8CAA8C;AAC9C,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAErF,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}

package/dist/lib/overlay.js

@@ -66,14 +66,21 @@ var popoverArrow = "fill-popover stroke-border";
 /**
 * A menu row: the shared height, radius, hover fill and focus treatment for
 * every item inside a menu, listbox or command list.
+*
+* The row sizes and dims the icons a caller puts in it, but not the glyph of
+* its selection indicator (any `[data-slot$=-indicator]`): a descendant `svg`
+* rule outranks a single utility on the glyph, so without the exclusion a
+* radio item's `size-2` dot drew as a 16px muted disc and every check lost the
+* indicator's accent.
 */
 var menuItem = [
 	"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
 	"transition-colors ease-out",
 	"data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground",
 	"data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground",
-	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
-	"[&_svg:not([class*=text-])]:text-muted-foreground"
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"[&_svg:not([data-slot$=-indicator]_*)]:size-4",
+	"[&_svg:not([class*=text-]):not([data-slot$=-indicator]_*)]:text-muted-foreground"
 ].join(" ");
 /** A destructive action keeps readable text and marks its row with a status edge. */
 var destructiveMenuItem = "border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle";