@adea-ai/ui 0.72.1 → 0.72.2

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC/C,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAGhE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAgBpF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAahF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAoBpF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAqBpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,kCAW9E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAGpF;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,kCAkB3E"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAC/C,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,kCAGhE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAgBpF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAahF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAoBpF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAsBpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,kCAW9E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAGpF;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,kCAkB3E"}

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

@@ -50,12 +50,16 @@ function ComboboxContent(props) {
 		return createComponent(Combobox.Content, mergeProps({ get ["class"]() {
 			return cn("bg-popover text-popover-foreground rounded-xl border border-border shadow-lg", "z-(--z-menu) max-h-72 min-w-(--kb-popper-anchor-width) origin-(--kb-combobox-content-transform-origin) overflow-hidden", "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-expanded:duration-150 data-closed:duration-100", local.class);
 		} }, rest, { get children() {
-			return [createComponent(Combobox.Listbox, { get ["class"]() {
-				return cn("max-h-72 overflow-y-auto", "p-1");
-			} }), createComponent(Combobox.Arrow, {
-				"aria-hidden": "true",
-				"class": popoverArrow
-			})];
+			return [
+				createComponent(Combobox.Listbox, { get ["class"]() {
+					return cn("max-h-72 overflow-y-auto", "p-1");
+				} }),
+				memo(() => local.children),
+				createComponent(Combobox.Arrow, {
+					"aria-hidden": "true",
+					"class": popoverArrow
+				})
+			];
 		} }));
 	} });
 }

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","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","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 } from '#lib/overlay'\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, ['class'])\n\n  return (\n    <KobalteCombobox.Input\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        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        <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      <KobalteCombobox.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\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","cn","props","Option","OptGroup","_$createComponent","ComboboxControl","Control","local","rest","_$mergeProps","class","ComboboxInput","Input","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 } from '#lib/overlay'\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, ['class'])\n\n  return (\n    <KobalteCombobox.Input\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        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      <KobalteCombobox.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\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/slider/slider.d.ts

@@ -9,9 +9,13 @@ import type { ComponentProps } from 'solid-js';
  * nobody can set exactly.
  *
  * Kobalte handles pointer capture, keyboard stepping and the ARIA value
- * wiring; this paints the track, fill and thumb.
+ * wiring; this paints the track, fill and one thumb per value. Each thumb
+ * contains a form-native input, hidden from accessibility because the visible
+ * thumb already exposes the slider role.
  */
 export type SliderProps = ComponentProps<typeof KobalteSlider> & {
+    /** Accessible names for individual thumbs, in value order (for example minimum and maximum). */
+    thumbLabels?: readonly string[];
     trackClass?: string;
     rangeClass?: string;
     thumbClass?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAwDxC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG;IAC/D,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAgFxC"}

package/dist/components/ui/slider/slider.js

@@ -1,14 +1,16 @@
 import { cn } from "../../../lib/utils.js";
 import { createComponent, memo, mergeProps } from "solid-js/web";
-import { Show, splitProps } from "solid-js";
+import { For, Show, createRenderEffect, createUniqueId, splitProps } from "solid-js";
 import { Slider } from "@kobalte/core/slider";
 //#region src/components/ui/slider/slider.tsx
 function Slider$1(props) {
+	const inputId = createUniqueId();
 	const [local, rest] = splitProps(props, [
 		"class",
 		"trackClass",
 		"rangeClass",
 		"thumbClass",
+		"thumbLabels",
 		"valueLabel",
 		"children",
 		"aria-label",
@@ -29,26 +31,40 @@ function Slider$1(props) {
 				}
 			}),
 			memo(() => local.children),
-			createComponent(Slider.Thumb, {
-				get ["aria-label"]() {
-					return local["aria-label"];
+			createComponent(For, {
+				get each() {
+					return Array.from({ length: (props.value ?? props.defaultValue ?? [0]).length }, (_, index) => index);
 				},
-				get ["aria-labelledby"]() {
-					return local["aria-labelledby"];
-				},
-				get ["class"]() {
-					return cn("border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs", "transition-[color,box-shadow] ease-out outline-none", "hover:ring-4 hover:ring-primary-subtle", "focus-visible:ring-4 focus-visible:ring-primary-subtle", local.thumbClass);
-				},
-				get children() {
-					return createComponent(Show, {
-						get when() {
-							return local.valueLabel;
-						},
-						get children() {
-							return createComponent(Slider.ValueLabel, { "class": "bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" });
-						}
-					});
-				}
+				children: (index) => createComponent(Slider.Thumb, {
+					get ["aria-label"]() {
+						return local.thumbLabels?.[index] ?? local["aria-label"];
+					},
+					get ["aria-labelledby"]() {
+						return memo(() => !!local.thumbLabels?.[index])() ? void 0 : local["aria-labelledby"];
+					},
+					get ["class"]() {
+						return cn("border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs", "transition-[color,box-shadow] ease-out outline-none", "hover:ring-4 hover:ring-primary-subtle", "focus-visible:ring-4 focus-visible:ring-primary-subtle", local.thumbClass);
+					},
+					get children() {
+						return [createComponent(Slider.Input, {
+							id: `slider-${inputId}-${index}`,
+							ref: (input) => {
+								createRenderEffect(() => {
+									input.defaultValue = String(props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0);
+								});
+							},
+							hidden: true,
+							"aria-hidden": "true"
+						}), createComponent(Show, {
+							get when() {
+								return local.valueLabel;
+							},
+							get children() {
+								return createComponent(Slider.ValueLabel, { "class": "bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" });
+							}
+						})];
+					}
+				})
 			})
 		];
 	} }));

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

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["Slider","KobalteSlider","ComponentProps","Show","splitProps","cn","SliderProps","trackClass","rangeClass","thumbClass","valueLabel","props","local","rest","_$createComponent","_$mergeProps","class","children","Track","Fill","_$memo","Thumb","aria-label","aria-labelledby","when","ValueLabel","Slider","_$createComponent","KobalteSlider","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as KobalteSlider } from '@kobalte/core/slider'\nimport type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Slider.\n *\n * For a value on a continuum where position matters more than precision — a\n * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so\n * the value is both adjustable *and* readable; a bare slider is a control\n * nobody can set exactly.\n *\n * Kobalte handles pointer capture, keyboard stepping and the ARIA value\n * wiring; this paints the track, fill and thumb.\n */\nexport type SliderProps = ComponentProps<typeof KobalteSlider> & {\n  trackClass?: string\n  rangeClass?: string\n  thumbClass?: string\n  /** Show the current value beside the thumb while dragging. */\n  valueLabel?: boolean\n}\n\nexport function Slider(props: SliderProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'rangeClass',\n    'thumbClass',\n    'valueLabel',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n  ])\n\n  return (\n    <KobalteSlider\n      class={cn(\n        'relative flex touch-none flex-col justify-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',\n        'data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteSlider.Track\n        class={cn(\n          'bg-input relative grow overflow-hidden rounded-full',\n          'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',\n          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n          local.trackClass\n        )}\n      >\n        <KobalteSlider.Fill\n          class={cn(\n            'bg-primary absolute rounded-full',\n            'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',\n            local.rangeClass\n          )}\n        />\n      </KobalteSlider.Track>\n      {local.children}\n      <KobalteSlider.Thumb\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n        class={cn(\n          'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',\n          'transition-[color,box-shadow] ease-out outline-none',\n          'hover:ring-4 hover:ring-primary-subtle',\n          'focus-visible:ring-4 focus-visible:ring-primary-subtle',\n          local.thumbClass\n        )}\n      >\n        <Show when={local.valueLabel}>\n          <KobalteSlider.ValueLabel class=\"bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums\" />\n        </Show>\n      </KobalteSlider.Thumb>\n    </KobalteSlider>\n  )\n}\n"],"mappings":";;;;;AAwBA,SAAgBA,SAAOW,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAG,gBACGb,QAAac,WAAA,EAAA,KAAA,WAAA;EAAA,OACLV,GACL,gEACA,2GACA,8BACAO,MAAMI,KACR;CAAC,EAAA,GACGH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA;GAAAH,gBAEPb,OAAciB,OAAK;IAAA,KAAA,WAAA;KAAA,OACXb,GACL,uDACA,4EACA,wEACAO,MAAML,UACR;IAAC;IAAA,IAAAU,WAAA;KAAA,OAAAH,gBAEAb,OAAckB,MAAI,EAAA,KAAA,WAAA;MAAA,OACVd,GACL,oCACA,2EACAO,MAAMJ,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAY,WAGJR,MAAMK,QAAQ;GAAAH,gBACdb,OAAcoB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACNT,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,WAAA;KAAA,OAClCP,GACL,sFACA,uDACA,0CACA,0DACAO,MAAMH,UACR;IAAC;IAAA,IAAAQ,WAAA;KAAA,OAAAH,gBAEAX,MAAI;MAAA,IAACqB,OAAI;OAAA,OAAEZ,MAAMF;MAAU;MAAA,IAAAO,WAAA;OAAA,OAAAH,gBACzBb,OAAcwB,YAAU,EAAA,SAAA,0IAAA,CAAA;MAAA;KAAA,CAAA;IAAA;GAAA,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA;AAKnC"}
+{"version":3,"file":"slider.js","names":["Slider","KobalteSlider","ComponentProps","For","Show","createUniqueId","createRenderEffect","splitProps","cn","SliderProps","thumbLabels","trackClass","rangeClass","thumbClass","valueLabel","props","inputId","local","rest","_$createComponent","_$mergeProps","class","children","Track","Fill","_$memo","each","Array","from","length","value","defaultValue","_","index","Thumb","aria-label","aria-labelledby","undefined","Input","id","ref","input","String","minValue","hidden","when","ValueLabel","Slider","_$createComponent","KobalteSlider","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/slider/slider.tsx"],"sourcesContent":["import { Slider as KobalteSlider } from '@kobalte/core/slider'\nimport type { ComponentProps } from 'solid-js'\nimport { For, Show, createUniqueId, createRenderEffect, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Slider.\n *\n * For a value on a continuum where position matters more than precision — a\n * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so\n * the value is both adjustable *and* readable; a bare slider is a control\n * nobody can set exactly.\n *\n * Kobalte handles pointer capture, keyboard stepping and the ARIA value\n * wiring; this paints the track, fill and one thumb per value. Each thumb\n * contains a form-native input, hidden from accessibility because the visible\n * thumb already exposes the slider role.\n */\nexport type SliderProps = ComponentProps<typeof KobalteSlider> & {\n  /** Accessible names for individual thumbs, in value order (for example minimum and maximum). */\n  thumbLabels?: readonly string[]\n  trackClass?: string\n  rangeClass?: string\n  thumbClass?: string\n  /** Show the current value beside the thumb while dragging. */\n  valueLabel?: boolean\n}\n\nexport function Slider(props: SliderProps) {\n  const inputId = createUniqueId()\n  const [local, rest] = splitProps(props, [\n    'class',\n    'trackClass',\n    'rangeClass',\n    'thumbClass',\n    'thumbLabels',\n    'valueLabel',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n  ])\n\n  return (\n    <KobalteSlider\n      class={cn(\n        'relative flex touch-none flex-col justify-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',\n        'data-[disabled]:opacity-50',\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteSlider.Track\n        class={cn(\n          'bg-input relative grow overflow-hidden rounded-full',\n          'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',\n          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',\n          local.trackClass\n        )}\n      >\n        <KobalteSlider.Fill\n          class={cn(\n            'bg-primary absolute rounded-full',\n            'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',\n            local.rangeClass\n          )}\n        />\n      </KobalteSlider.Track>\n      {local.children}\n      <For\n        each={Array.from(\n          { length: (props.value ?? props.defaultValue ?? [0]).length },\n          (_, index) => index\n        )}\n      >\n        {(index) => (\n          <KobalteSlider.Thumb\n            aria-label={local.thumbLabels?.[index] ?? local['aria-label']}\n            aria-labelledby={local.thumbLabels?.[index] ? undefined : local['aria-labelledby']}\n            class={cn(\n              'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',\n              'transition-[color,box-shadow] ease-out outline-none',\n              'hover:ring-4 hover:ring-primary-subtle',\n              'focus-visible:ring-4 focus-visible:ring-primary-subtle',\n              local.thumbClass\n            )}\n          >\n            {/* Native reset uses the value property’s default, not an HTML defaultValue attribute. */}\n            <KobalteSlider.Input\n              id={`slider-${inputId}-${index}`}\n              ref={(input) => {\n                createRenderEffect(() => {\n                  input.defaultValue = String(\n                    props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0\n                  )\n                })\n              }}\n              hidden\n              aria-hidden=\"true\"\n            />\n            <Show when={local.valueLabel}>\n              <KobalteSlider.ValueLabel class=\"bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums\" />\n            </Show>\n          </KobalteSlider.Thumb>\n        )}\n      </For>\n    </KobalteSlider>\n  )\n}\n"],"mappings":";;;;;AA4BA,SAAgBA,SAAOe,OAAoB;CACzC,MAAMC,UAAUX,eAAe;CAC/B,MAAM,CAACY,OAAOC,QAAQX,WAAWQ,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAI,gBACGlB,QAAamB,WAAA,EAAA,KAAA,WAAA;EAAA,OACLZ,GACL,gEACA,2GACA,8BACAS,MAAMI,KACR;CAAC,EAAA,GACGH,MAAI,EAAA,IAAAI,WAAA;EAAA,OAAA;GAAAH,gBAEPlB,OAAcsB,OAAK;IAAA,KAAA,WAAA;KAAA,OACXf,GACL,uDACA,4EACA,wEACAS,MAAMN,UACR;IAAC;IAAA,IAAAW,WAAA;KAAA,OAAAH,gBAEAlB,OAAcuB,MAAI,EAAA,KAAA,WAAA;MAAA,OACVhB,GACL,oCACA,2EACAS,MAAML,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAa,WAGJR,MAAMK,QAAQ;GAAAH,gBACdhB,KAAG;IAAA,IACFuB,OAAI;KAAA,OAAEC,MAAMC,KACV,EAAEC,SAASd,MAAMe,SAASf,MAAMgB,gBAAgB,CAAC,CAAC,EAAA,CAAGF,OAAO,IAC3DG,GAAGC,UAAUA,KAChB;IAAC;IAAAX,WAECW,UAAKd,gBACJlB,OAAciC,OAAK;KAAA,KAAA,gBAAA;MAAA,OACNjB,MAAMP,cAAcuB,UAAUhB,MAAM;KAAa;KAAA,KAAA,qBAAA;MAAA,OAC5CQ,WAAA,CAAA,CAAAR,MAAMP,cAAcuB,MAAM,CAAA,CAAA,IAAGI,KAAAA,IAAYpB,MAAM;KAAkB;KAAA,KAAA,WAAA;MAAA,OAC3ET,GACL,sFACA,uDACA,0CACA,0DACAS,MAAMJ,UACR;KAAC;KAAA,IAAAS,WAAA;MAAA,OAAA,CAAAH,gBAGAlB,OAAcqC,OAAK;OAClBC,IAAI,UAAUvB,QAAO,GAAIiB;OAAOO,MAC1BC,UAAU;QACdnC,yBAAyB;SACvBmC,MAAMV,eAAeW,OACnB3B,MAAMgB,eAAeE,UAAUlB,MAAMe,QAAQG,UAAUlB,MAAM4B,YAAY,CAC3E;QACF,CAAC;OACH;OACAC,QAAM;OAAA,eAAA;MAAA,CAAA,GAAAzB,gBAGPf,MAAI;OAAA,IAACyC,OAAI;QAAA,OAAE5B,MAAMH;OAAU;OAAA,IAAAQ,WAAA;QAAA,OAAAH,gBACzBlB,OAAc6C,YAAU,EAAA,SAAA,0IAAA,CAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAG9B,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA;AAIT"}

package/dist/r/src/components/ui/combobox/combobox.tsx

@@ -96,6 +96,7 @@ export function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Con
         {...rest}
       >
         <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />
+        {local.children}
         <KobalteCombobox.Arrow aria-hidden="true" class={popoverArrow} />
       </KobalteCombobox.Content>
     </KobalteCombobox.Portal>

package/dist/r/src/components/ui/slider/slider.tsx

@@ -1,6 +1,6 @@
 import { Slider as KobalteSlider } from '@kobalte/core/slider'
 import type { ComponentProps } from 'solid-js'
-import { Show, splitProps } from 'solid-js'
+import { For, Show, createUniqueId, createRenderEffect, splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -12,9 +12,13 @@ import { cn } from '../../../lib/utils'
  * nobody can set exactly.
  *
  * Kobalte handles pointer capture, keyboard stepping and the ARIA value
- * wiring; this paints the track, fill and thumb.
+ * wiring; this paints the track, fill and one thumb per value. Each thumb
+ * contains a form-native input, hidden from accessibility because the visible
+ * thumb already exposes the slider role.
  */
 export type SliderProps = ComponentProps<typeof KobalteSlider> & {
+  /** Accessible names for individual thumbs, in value order (for example minimum and maximum). */
+  thumbLabels?: readonly string[]
   trackClass?: string
   rangeClass?: string
   thumbClass?: string
@@ -23,11 +27,13 @@ export type SliderProps = ComponentProps<typeof KobalteSlider> & {
 }
 
 export function Slider(props: SliderProps) {
+  const inputId = createUniqueId()
   const [local, rest] = splitProps(props, [
     'class',
     'trackClass',
     'rangeClass',
     'thumbClass',
+    'thumbLabels',
     'valueLabel',
     'children',
     'aria-label',
@@ -61,21 +67,43 @@ export function Slider(props: SliderProps) {
         />
       </KobalteSlider.Track>
       {local.children}
-      <KobalteSlider.Thumb
-        aria-label={local['aria-label']}
-        aria-labelledby={local['aria-labelledby']}
-        class={cn(
-          'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',
-          'transition-[color,box-shadow] ease-out outline-none',
-          'hover:ring-4 hover:ring-primary-subtle',
-          'focus-visible:ring-4 focus-visible:ring-primary-subtle',
-          local.thumbClass
+      <For
+        each={Array.from(
+          { length: (props.value ?? props.defaultValue ?? [0]).length },
+          (_, index) => index
         )}
       >
-        <Show when={local.valueLabel}>
-          <KobalteSlider.ValueLabel class="bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" />
-        </Show>
-      </KobalteSlider.Thumb>
+        {(index) => (
+          <KobalteSlider.Thumb
+            aria-label={local.thumbLabels?.[index] ?? local['aria-label']}
+            aria-labelledby={local.thumbLabels?.[index] ? undefined : local['aria-labelledby']}
+            class={cn(
+              'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',
+              'transition-[color,box-shadow] ease-out outline-none',
+              'hover:ring-4 hover:ring-primary-subtle',
+              'focus-visible:ring-4 focus-visible:ring-primary-subtle',
+              local.thumbClass
+            )}
+          >
+            {/* Native reset uses the value property’s default, not an HTML defaultValue attribute. */}
+            <KobalteSlider.Input
+              id={`slider-${inputId}-${index}`}
+              ref={(input) => {
+                createRenderEffect(() => {
+                  input.defaultValue = String(
+                    props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0
+                  )
+                })
+              }}
+              hidden
+              aria-hidden="true"
+            />
+            <Show when={local.valueLabel}>
+              <KobalteSlider.ValueLabel class="bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" />
+            </Show>
+          </KobalteSlider.Thumb>
+        )}
+      </For>
     </KobalteSlider>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.72.1",
+  "version": "0.72.2",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/src/components/ui/combobox/combobox.tsx

@@ -96,6 +96,7 @@ export function ComboboxContent(props: ComponentProps<typeof KobalteCombobox.Con
         {...rest}
       >
         <KobalteCombobox.Listbox class={cn('max-h-72 overflow-y-auto', menuContentPadding)} />
+        {local.children}
         <KobalteCombobox.Arrow aria-hidden="true" class={popoverArrow} />
       </KobalteCombobox.Content>
     </KobalteCombobox.Portal>

package/src/components/ui/slider/slider.tsx

@@ -1,6 +1,6 @@
 import { Slider as KobalteSlider } from '@kobalte/core/slider'
 import type { ComponentProps } from 'solid-js'
-import { Show, splitProps } from 'solid-js'
+import { For, Show, createUniqueId, createRenderEffect, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 
 /**
@@ -12,9 +12,13 @@ import { cn } from '#lib/utils'
  * nobody can set exactly.
  *
  * Kobalte handles pointer capture, keyboard stepping and the ARIA value
- * wiring; this paints the track, fill and thumb.
+ * wiring; this paints the track, fill and one thumb per value. Each thumb
+ * contains a form-native input, hidden from accessibility because the visible
+ * thumb already exposes the slider role.
  */
 export type SliderProps = ComponentProps<typeof KobalteSlider> & {
+  /** Accessible names for individual thumbs, in value order (for example minimum and maximum). */
+  thumbLabels?: readonly string[]
   trackClass?: string
   rangeClass?: string
   thumbClass?: string
@@ -23,11 +27,13 @@ export type SliderProps = ComponentProps<typeof KobalteSlider> & {
 }
 
 export function Slider(props: SliderProps) {
+  const inputId = createUniqueId()
   const [local, rest] = splitProps(props, [
     'class',
     'trackClass',
     'rangeClass',
     'thumbClass',
+    'thumbLabels',
     'valueLabel',
     'children',
     'aria-label',
@@ -61,21 +67,43 @@ export function Slider(props: SliderProps) {
         />
       </KobalteSlider.Track>
       {local.children}
-      <KobalteSlider.Thumb
-        aria-label={local['aria-label']}
-        aria-labelledby={local['aria-labelledby']}
-        class={cn(
-          'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',
-          'transition-[color,box-shadow] ease-out outline-none',
-          'hover:ring-4 hover:ring-primary-subtle',
-          'focus-visible:ring-4 focus-visible:ring-primary-subtle',
-          local.thumbClass
+      <For
+        each={Array.from(
+          { length: (props.value ?? props.defaultValue ?? [0]).length },
+          (_, index) => index
         )}
       >
-        <Show when={local.valueLabel}>
-          <KobalteSlider.ValueLabel class="bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" />
-        </Show>
-      </KobalteSlider.Thumb>
+        {(index) => (
+          <KobalteSlider.Thumb
+            aria-label={local.thumbLabels?.[index] ?? local['aria-label']}
+            aria-labelledby={local.thumbLabels?.[index] ? undefined : local['aria-labelledby']}
+            class={cn(
+              'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',
+              'transition-[color,box-shadow] ease-out outline-none',
+              'hover:ring-4 hover:ring-primary-subtle',
+              'focus-visible:ring-4 focus-visible:ring-primary-subtle',
+              local.thumbClass
+            )}
+          >
+            {/* Native reset uses the value property’s default, not an HTML defaultValue attribute. */}
+            <KobalteSlider.Input
+              id={`slider-${inputId}-${index}`}
+              ref={(input) => {
+                createRenderEffect(() => {
+                  input.defaultValue = String(
+                    props.defaultValue?.[index] ?? props.value?.[index] ?? props.minValue ?? 0
+                  )
+                })
+              }}
+              hidden
+              aria-hidden="true"
+            />
+            <Show when={local.valueLabel}>
+              <KobalteSlider.ValueLabel class="bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" />
+            </Show>
+          </KobalteSlider.Thumb>
+        )}
+      </For>
     </KobalteSlider>
   )
 }