@adea-ai/ui 0.72.0 → 0.72.2

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

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["Switch","KobalteSwitch","ComponentProps","JSX","splitProps","cn","SwitchProps","Omit","controlClass","thumbClass","labelClass","descriptionClass","children","Element","props","local","rest","_$createComponent","_$mergeProps","class","Input","aria-label","aria-labelledby","Control","Thumb","_$memo","_el$","_tmpl$","_$insert","Label","Description","SwitchLabel","SwitchDescription","Switch","_$createComponent","KobalteSwitch","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import { Switch as KobalteSwitch } from '@kobalte/core/switch'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Switch.\n *\n * For a setting that takes effect the moment it is flipped. The distinction\n * from Checkbox is behaviour, not looks: a switch applies immediately and\n * belongs in a settings row, while a checkbox is a value the user is still\n * composing and is applied when a form is submitted. A switch inside an unsaved\n * form is the mistake this split exists to prevent.\n *\n * `Switch.Input` renders a real hidden checkbox, so the control is\n * form-native, keyboard-operable, and its `aria-checked` follows the state the\n * user sees.\n */\nexport type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {\n  controlClass?: string\n  thumbClass?: string\n  labelClass?: string\n  descriptionClass?: string\n  /**\n   * Replaces the control and label. Omit it to get the default control beside\n   * `label` and `description`; supply it to compose the parts yourself.\n   */\n  children?: JSX.Element\n}\n\nexport function Switch(props: SwitchProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'thumbClass',\n    'labelClass',\n    'descriptionClass',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n  ])\n\n  return (\n    <KobalteSwitch class={cn('group/switch flex items-center gap-2.5', local.class)} {...rest}>\n      {/* The name belongs on the input; see Checkbox for why. */}\n      <KobalteSwitch.Input\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n      />\n      <KobalteSwitch.Control\n        class={cn(\n          'bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent',\n          'transition-colors ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:bg-primary',\n          'data-[invalid]:border-destructive',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteSwitch.Thumb\n          class={cn(\n            'bg-background pointer-events-none block size-4 rounded-full shadow-xs',\n            'transition-transform ease-out',\n            'data-[checked]:translate-x-4',\n            local.thumbClass\n          )}\n        />\n      </KobalteSwitch.Control>\n      {local.children ?? (\n        <div class=\"grid gap-0.5\">\n          <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)} />\n          <KobalteSwitch.Description\n            class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n          />\n        </div>\n      )}\n    </KobalteSwitch>\n  )\n}\n\n/**\n * The switch's own label. Valid only inside a `<Switch>`: it is Kobalte's label\n * for that root's control, and outside one there is nothing to associate with.\n * A label drawn *beside* a switch — a settings row with the control trailing —\n * is plain text, and the switch takes an `aria-label` instead.\n */\nexport function SwitchLabel(props: ComponentProps<typeof KobalteSwitch.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n  )\n}\n\nexport function SwitchDescription(props: ComponentProps<typeof KobalteSwitch.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n"],"mappings":";;;;;;AA8BA,SAAgBA,SAAOc,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,OAAAG,gBACGhB,QAAaiB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQb,GAAG,0CAA0CU,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAJ,WAAA;EAAA,OAAA;GAAAK,gBAEtFhB,OAAcmB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACNL,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;GAAA,CAAA;GAAAE,gBAE1ChB,OAAcsB,SAAO;IAAA,KAAA,WAAA;KAAA,OACblB,GACL,6FACA,2CACA,oFACA,6BACA,qCACA,iEACAU,MAAMP,YACR;IAAC;IAAA,IAAAI,WAAA;KAAA,OAAAK,gBAEAhB,OAAcuB,OAAK,EAAA,KAAA,WAAA;MAAA,OACXnB,GACL,yEACA,iCACA,gCACAU,MAAMN,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAgB,WAGJV,MAAMH,mBAAQ;IAAA,IAAAc,OAAAC,OAAA;IAAAC,OAAAF,MAAAT,gBAEVhB,OAAc4B,OAAK,EAAA,KAAA,WAAA;KAAA,OAAQxB,GAAG,oCAAoCU,MAAML,UAAU;IAAC,EAAA,CAAA,GAAA,IAAA;IAAAkB,OAAAF,MAAAT,gBACnFhB,OAAc6B,aAAW,EAAA,KAAA,WAAA;KAAA,OACjBzB,GAAG,iCAAiCU,MAAMJ,gBAAgB;IAAC,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAe;GAAA,EAAA,CAAA,CAGvE;EAAA;CAAA,EAAA,CAAA,CAAA;AAGP;;;;;;;AAQA,SAAgBK,YAAYjB,OAAmD;CAC7E,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGhB,OAAc4B,OAAKX,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQb,GAAG,oCAAoCU,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAE7F;AAEA,SAAgBgB,kBAAkBlB,OAAyD;CACzF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGhB,OAAc6B,aAAWZ,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQb,GAAG,iCAAiCU,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAEhG"}
+{"version":3,"file":"switch.js","names":["Switch","KobalteSwitch","ComponentProps","JSX","splitProps","cn","SwitchProps","Omit","controlClass","thumbClass","labelClass","descriptionClass","label","Element","description","children","props","local","rest","_$createComponent","_$mergeProps","title","class","Input","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-busy","Control","Thumb","_$memo","_el$","_tmpl$","_$insert","_c$","Label","_c$2","Description","SwitchLabel","SwitchDescription","Switch","_$createComponent","KobalteSwitch","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import { Switch as KobalteSwitch } from '@kobalte/core/switch'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Switch.\n *\n * For a setting that takes effect the moment it is flipped. The distinction\n * from Checkbox is behaviour, not looks: a switch applies immediately and\n * belongs in a settings row, while a checkbox is a value the user is still\n * composing and is applied when a form is submitted. A switch inside an unsaved\n * form is the mistake this split exists to prevent.\n *\n * `Switch.Input` renders a real hidden checkbox, so the control is\n * form-native, keyboard-operable, and its `aria-checked` follows the state the\n * user sees.\n */\nexport type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {\n  controlClass?: string\n  thumbClass?: string\n  labelClass?: string\n  descriptionClass?: string\n  label?: JSX.Element\n  description?: JSX.Element\n  /**\n   * Replaces the control and label. Omit it to get the default control beside\n   * `label` and `description`; supply it to compose the parts yourself.\n   */\n  children?: JSX.Element\n}\n\nexport function Switch(props: SwitchProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'thumbClass',\n    'labelClass',\n    'descriptionClass',\n    'children',\n    'label',\n    'description',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n\n  return (\n    <KobalteSwitch\n      title={local.title}\n      class={cn('group/switch flex items-center gap-2.5', local.class)}\n      {...rest}\n    >\n      {/* The name belongs on the input; see Checkbox for why. */}\n      <KobalteSwitch.Input\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-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteSwitch.Control\n        class={cn(\n          'bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent',\n          'transition-colors ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:bg-primary',\n          'data-[invalid]:border-destructive',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteSwitch.Thumb\n          class={cn(\n            'bg-background pointer-events-none block size-4 rounded-full shadow-xs',\n            'transition-transform ease-out',\n            'data-[checked]:translate-x-4',\n            local.thumbClass\n          )}\n        />\n      </KobalteSwitch.Control>\n      {local.children ??\n        (local.label || local.description ? (\n          <div class=\"grid gap-0.5\">\n            {local.label ? (\n              <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>\n                {local.label}\n              </KobalteSwitch.Label>\n            ) : null}\n            {local.description ? (\n              <KobalteSwitch.Description\n                class={cn('text-muted-foreground text-sm', local.descriptionClass)}\n              >\n                {local.description}\n              </KobalteSwitch.Description>\n            ) : null}\n          </div>\n        ) : null)}\n    </KobalteSwitch>\n  )\n}\n\n/**\n * The switch's own label. Valid only inside a `<Switch>`: it is Kobalte's label\n * for that root's control, and outside one there is nothing to associate with.\n * A label drawn *beside* a switch — a settings row with the control trailing —\n * is plain text, and the switch takes an `aria-label` instead.\n */\nexport function SwitchLabel(props: ComponentProps<typeof KobalteSwitch.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />\n  )\n}\n\nexport function SwitchDescription(props: ComponentProps<typeof KobalteSwitch.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteSwitch.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n"],"mappings":";;;;;;AAgCA,SAAgBA,SAAOgB,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAG,gBACGlB,QAAamB,WAAA;EAAA,IACZC,QAAK;GAAA,OAAEJ,MAAMI;EAAK;EAAA,KAAA,WAAA;GAAA,OACXhB,GAAG,0CAA0CY,MAAMK,KAAK;EAAC;CAAA,GAC5DJ,MAAI,EAAA,IAAAH,WAAA;EAAA,OAAA;GAAAI,gBAGPlB,OAAcsB,OAAK;IAAA,KAAA,gBAAA;KAAA,OACNN,MAAM;IAAa;IAAA,KAAA,qBAAA;KAAA,OACdA,MAAM;IAAkB;IAAA,KAAA,sBAAA;KAAA,OACvBA,MAAM;IAAmB;IAAA,KAAA,kBAAA;KAAA,OAC7BA,MAAM;IAAe;IAAA,KAAA,eAAA;KAAA,OACxBA,MAAM;IAAY;IAAA,IAC7BI,QAAK;KAAA,OAAEJ,MAAMI;IAAK;GAAA,CAAA;GAAAF,gBAEnBlB,OAAc4B,SAAO;IAAA,KAAA,WAAA;KAAA,OACbxB,GACL,6FACA,2CACA,oFACA,6BACA,qCACA,iEACAY,MAAMT,YACR;IAAC;IAAA,IAAAO,WAAA;KAAA,OAAAI,gBAEAlB,OAAc6B,OAAK,EAAA,KAAA,WAAA;MAAA,OACXzB,GACL,yEACA,iCACA,gCACAY,MAAMR,UACR;KAAC,EAAA,CAAA;IAAA;GAAA,CAAA;GAAAsB,WAGJd,MAAMF,aACJE,MAAML,SAASK,MAAMH,qBAAW;IAAA,IAAAkB,OAAAC,OAAA;IAAAC,OAAAF,aAAA;KAAA,IAAAG,MAAAJ,WAAA,CAAA,CAE5Bd,MAAML,KAAK;KAAA,aAAXuB,IAAA,IAAAhB,gBACElB,OAAcmC,OAAK;MAAA,KAAA,WAAA;OAAA,OAAQ/B,GAAG,oCAAoCY,MAAMP,UAAU;MAAC;MAAA,IAAAK,WAAA;OAAA,OACjFE,MAAML;MAAK;KAAA,CAAA,IAEZ;IAAI,EAAA,CAAA,GAAA,IAAA;IAAAsB,OAAAF,aAAA;KAAA,IAAAK,OAAAN,WAAA,CAAA,CACPd,MAAMH,WAAW;KAAA,aAAjBuB,KAAA,IAAAlB,gBACElB,OAAcqC,aAAW;MAAA,KAAA,WAAA;OAAA,OACjBjC,GAAG,iCAAiCY,MAAMN,gBAAgB;MAAC;MAAA,IAAAI,WAAA;OAAA,OAEjEE,MAAMH;MAAW;KAAA,CAAA,IAElB;IAAI,EAAA,CAAA,GAAA,IAAA;IAAA,OAAAkB;GAAA,EAAA,CAAA,IAER,KAAK;EAAA;CAAA,EAAA,CAAA,CAAA;AAGjB;;;;;;;AAQA,SAAgBO,YAAYvB,OAAmD;CAC7E,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGlB,OAAcmC,OAAKhB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQf,GAAG,oCAAoCY,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AAE7F;AAEA,SAAgBsB,kBAAkBxB,OAAyD;CACzF,MAAM,CAACC,OAAOC,QAAQd,WAAWY,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGlB,OAAcqC,aAAWlB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQf,GAAG,iCAAiCY,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AAEhG"}

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

@@ -21,6 +21,8 @@ export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'childr
   controlClass?: string
   labelClass?: string
   descriptionClass?: string
+  label?: JSX.Element
+  description?: JSX.Element
   /**
    * Replaces the control and label. Omit it to get the default control beside
    * `label` and `description`; supply it to compose the parts yourself.
@@ -35,13 +37,23 @@ export function Checkbox(props: CheckboxProps) {
     'labelClass',
     'descriptionClass',
     'children',
+    'label',
+    'description',
     'indeterminate',
     'aria-label',
     'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
-    <KobalteCheckbox class={cn('group/checkbox flex items-start gap-2.5', local.class)} {...rest}>
+    <KobalteCheckbox
+      title={local.title}
+      class={cn('group/checkbox flex items-start gap-2.5', local.class)}
+      {...rest}
+    >
       {/*
        * The name goes on the input, which is what carries the value and takes
        * focus. On the Root it would land on a plain div and name nothing — the
@@ -50,6 +62,10 @@ export function Checkbox(props: CheckboxProps) {
       <KobalteCheckbox.Input
         aria-label={local['aria-label']}
         aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
       />
       <KobalteCheckbox.Control
         class={cn(
@@ -67,14 +83,23 @@ export function Checkbox(props: CheckboxProps) {
           {local.indeterminate ? <Minus class="size-3" /> : <Check class="size-3" />}
         </KobalteCheckbox.Indicator>
       </KobalteCheckbox.Control>
-      {local.children ?? (
-        <div class="grid gap-0.5 leading-none">
-          <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)} />
-          <KobalteCheckbox.Description
-            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
-          />
-        </div>
-      )}
+      {local.children ??
+        (local.label || local.description ? (
+          <div class="grid gap-0.5">
+            {local.label ? (
+              <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>
+                {local.label}
+              </KobalteCheckbox.Label>
+            ) : null}
+            {local.description ? (
+              <KobalteCheckbox.Description
+                class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+              >
+                {local.description}
+              </KobalteCheckbox.Description>
+            ) : null}
+          </div>
+        ) : null)}
     </KobalteCheckbox>
   )
 }

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/radio-group/radio-group.tsx

@@ -25,7 +25,8 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
   controlClass?: string
   /**
    * The option's visible label. A radio with no accessible name is unreachable
-   * by a screen reader and by voice control, so supply this or a child.
+   * by a screen reader and by voice control, so supply this, a labelled child,
+   * `aria-label`, or `aria-labelledby`.
    */
   label?: string
   description?: string
@@ -38,14 +39,28 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
     'label',
     'description',
     'children',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
     <KobalteRadioGroup.Item
+      title={local.title}
       class={cn('group/radio flex items-start gap-2.5', local.class)}
       {...rest}
     >
-      <KobalteRadioGroup.ItemInput />
+      <KobalteRadioGroup.ItemInput
+        aria-label={local['aria-label']}
+        aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
+      />
       <KobalteRadioGroup.ItemControl
         class={cn(
           'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',
@@ -63,9 +78,11 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       </KobalteRadioGroup.ItemControl>
       {local.children ?? (
         <div class="grid gap-0.5 leading-none">
-          <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
-            {local.label}
-          </KobalteRadioGroup.ItemLabel>
+          {local.label ? (
+            <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
+              {local.label}
+            </KobalteRadioGroup.ItemLabel>
+          ) : null}
           {local.description ? (
             <KobalteRadioGroup.ItemDescription class="text-muted-foreground text-sm">
               {local.description}

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/dist/r/src/components/ui/switch/switch.tsx

@@ -21,6 +21,8 @@ export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'>
   thumbClass?: string
   labelClass?: string
   descriptionClass?: string
+  label?: JSX.Element
+  description?: JSX.Element
   /**
    * Replaces the control and label. Omit it to get the default control beside
    * `label` and `description`; supply it to compose the parts yourself.
@@ -36,16 +38,30 @@ export function Switch(props: SwitchProps) {
     'labelClass',
     'descriptionClass',
     'children',
+    'label',
+    'description',
     'aria-label',
     'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
-    <KobalteSwitch class={cn('group/switch flex items-center gap-2.5', local.class)} {...rest}>
+    <KobalteSwitch
+      title={local.title}
+      class={cn('group/switch flex items-center gap-2.5', local.class)}
+      {...rest}
+    >
       {/* The name belongs on the input; see Checkbox for why. */}
       <KobalteSwitch.Input
         aria-label={local['aria-label']}
         aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
       />
       <KobalteSwitch.Control
         class={cn(
@@ -67,14 +83,23 @@ export function Switch(props: SwitchProps) {
           )}
         />
       </KobalteSwitch.Control>
-      {local.children ?? (
-        <div class="grid gap-0.5">
-          <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)} />
-          <KobalteSwitch.Description
-            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
-          />
-        </div>
-      )}
+      {local.children ??
+        (local.label || local.description ? (
+          <div class="grid gap-0.5">
+            {local.label ? (
+              <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)}>
+                {local.label}
+              </KobalteSwitch.Label>
+            ) : null}
+            {local.description ? (
+              <KobalteSwitch.Description
+                class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+              >
+                {local.description}
+              </KobalteSwitch.Description>
+            ) : null}
+          </div>
+        ) : null)}
     </KobalteSwitch>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.72.0",
+  "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/checkbox/checkbox.tsx

@@ -21,6 +21,8 @@ export type CheckboxProps = Omit<ComponentProps<typeof KobalteCheckbox>, 'childr
   controlClass?: string
   labelClass?: string
   descriptionClass?: string
+  label?: JSX.Element
+  description?: JSX.Element
   /**
    * Replaces the control and label. Omit it to get the default control beside
    * `label` and `description`; supply it to compose the parts yourself.
@@ -35,13 +37,23 @@ export function Checkbox(props: CheckboxProps) {
     'labelClass',
     'descriptionClass',
     'children',
+    'label',
+    'description',
     'indeterminate',
     'aria-label',
     'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
-    <KobalteCheckbox class={cn('group/checkbox flex items-start gap-2.5', local.class)} {...rest}>
+    <KobalteCheckbox
+      title={local.title}
+      class={cn('group/checkbox flex items-start gap-2.5', local.class)}
+      {...rest}
+    >
       {/*
        * The name goes on the input, which is what carries the value and takes
        * focus. On the Root it would land on a plain div and name nothing — the
@@ -50,6 +62,10 @@ export function Checkbox(props: CheckboxProps) {
       <KobalteCheckbox.Input
         aria-label={local['aria-label']}
         aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
       />
       <KobalteCheckbox.Control
         class={cn(
@@ -67,14 +83,23 @@ export function Checkbox(props: CheckboxProps) {
           {local.indeterminate ? <Minus class="size-3" /> : <Check class="size-3" />}
         </KobalteCheckbox.Indicator>
       </KobalteCheckbox.Control>
-      {local.children ?? (
-        <div class="grid gap-0.5 leading-none">
-          <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)} />
-          <KobalteCheckbox.Description
-            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
-          />
-        </div>
-      )}
+      {local.children ??
+        (local.label || local.description ? (
+          <div class="grid gap-0.5">
+            {local.label ? (
+              <KobalteCheckbox.Label class={cn('text-sm font-medium', local.labelClass)}>
+                {local.label}
+              </KobalteCheckbox.Label>
+            ) : null}
+            {local.description ? (
+              <KobalteCheckbox.Description
+                class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+              >
+                {local.description}
+              </KobalteCheckbox.Description>
+            ) : null}
+          </div>
+        ) : null)}
     </KobalteCheckbox>
   )
 }

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/radio-group/radio-group.tsx

@@ -25,7 +25,8 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
   controlClass?: string
   /**
    * The option's visible label. A radio with no accessible name is unreachable
-   * by a screen reader and by voice control, so supply this or a child.
+   * by a screen reader and by voice control, so supply this, a labelled child,
+   * `aria-label`, or `aria-labelledby`.
    */
   label?: string
   description?: string
@@ -38,14 +39,28 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
     'label',
     'description',
     'children',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-busy',
+    'title',
   ])
 
   return (
     <KobalteRadioGroup.Item
+      title={local.title}
       class={cn('group/radio flex items-start gap-2.5', local.class)}
       {...rest}
     >
-      <KobalteRadioGroup.ItemInput />
+      <KobalteRadioGroup.ItemInput
+        aria-label={local['aria-label']}
+        aria-labelledby={local['aria-labelledby']}
+        aria-describedby={local['aria-describedby']}
+        aria-invalid={local['aria-invalid']}
+        aria-busy={local['aria-busy']}
+        title={local.title}
+      />
       <KobalteRadioGroup.ItemControl
         class={cn(
           'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',
@@ -63,9 +78,11 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       </KobalteRadioGroup.ItemControl>
       {local.children ?? (
         <div class="grid gap-0.5 leading-none">
-          <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
-            {local.label}
-          </KobalteRadioGroup.ItemLabel>
+          {local.label ? (
+            <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
+              {local.label}
+            </KobalteRadioGroup.ItemLabel>
+          ) : null}
           {local.description ? (
             <KobalteRadioGroup.ItemDescription class="text-muted-foreground text-sm">
               {local.description}

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>
   )
 }