@adea-ai/ui 0.116.0 → 0.118.0

package/src/components/ui/button/button.tsx

@@ -93,6 +93,7 @@ export function Button<T extends ValidComponent = 'button'>(props: ButtonProps<T
     <Polymorphic
       as="button"
       type="button"
+      data-slot="button"
       class={cn(
         buttonVariants({
           variant: local.variant,

package/src/components/ui/card/card.tsx

@@ -1,5 +1,6 @@
-import type { ComponentProps, JSX } from 'solid-js'
+import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
 import { cn } from '#lib/utils'
 import { headingVariants } from '../typography'
 
@@ -15,18 +16,36 @@ import { headingVariants } from '../typography'
  * The parts are separate components rather than a template because a card's
  * header, content and footer have different padding on purpose: the header and
  * footer are tight, the content breathes.
+ *
+ * `size` is the card's padding rung, so a caller never sets `p-*` or `gap-*` on
+ * a card to make it denser. `sm` tightens the card and its header, content and
+ * footer together (the parts' inline padding follows the card, so they stay
+ * aligned with each other); `flush` removes the block padding and gap for a
+ * card whose body is a list of rows or a scroll area that runs edge to edge.
  */
-export function Card(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export const cardVariants = cva(
+  'bg-card text-card-foreground flex flex-col rounded-xl border border-border shadow-xs',
+  {
+    variants: {
+      size: {
+        /** 16px block padding and gap; the parts carry 16px inline padding. */
+        default: 'gap-4 py-4',
+        /** 12px everywhere: a dense settings or status card. */
+        sm: 'gap-3 py-3 *:data-[slot=card-content]:px-3 *:data-[slot=card-footer]:px-3 *:data-[slot=card-header]:px-3',
+        /** No block padding or gap: the card hosts a row list or a scroller. */
+        flush: 'gap-0 py-0',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  }
+)
+
+export type CardProps = ComponentProps<'div'> & VariantProps<typeof cardVariants>
+
+export function Card(props: CardProps) {
+  const [local, rest] = splitProps(props, ['class', 'size'])
   return (
-    <div
-      data-slot="card"
-      class={cn(
-        'bg-card text-card-foreground flex flex-col gap-4 rounded-xl border border-border py-4 shadow-xs',
-        local.class
-      )}
-      {...rest}
-    />
+    <div data-slot="card" class={cn(cardVariants({ size: local.size }), local.class)} {...rest} />
   )
 }
 
@@ -79,5 +98,3 @@ export function CardFooter(props: ComponentProps<'div'>) {
   const [local, rest] = splitProps(props, ['class'])
   return <div data-slot="card-footer" class={cn('flex items-center px-4', local.class)} {...rest} />
 }
-
-export type CardProps = ComponentProps<'div'> & JSX.HTMLAttributes<HTMLDivElement>

package/src/components/ui/card/index.ts

@@ -1,5 +1,6 @@
 export {
   Card,
+  cardVariants,
   CardAction,
   CardContent,
   CardDescription,

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

@@ -64,6 +64,7 @@ export function Checkbox(props: CheckboxProps) {
 
   return (
     <KobalteCheckbox
+      data-slot="checkbox"
       id={field ? undefined : local.id}
       title={local.title}
       class={cn('group/checkbox flex items-start gap-2.5', local.class)}

package/src/components/ui/dialog/dialog.tsx

@@ -271,10 +271,33 @@ export type DialogContentProps = ComponentProps<typeof KobalteDialogContent> & {
   closeButton?: JSX.Element | false
   /** Use a 1rem inset as the positioner bounds for tall, viewport-filling surfaces. */
   positioner?: 'default' | 'inset'
+  /**
+   * The panel's maximum width. `md` (32rem) is the default and right for a
+   * confirmation or a short form; `sm` (28rem) for a single question; `lg`
+   * (42rem) for a picker or a form with two columns; `xl` (48rem) for a
+   * multi-step flow that needs a table or a preview beside its fields.
+   */
+  size?: DialogContentSize
 }
 
+/** The dialog width ladder, so a caller picks a rung instead of a `max-w-*`. */
+export const dialogContentSizes = {
+  sm: 'max-w-md',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+  xl: 'max-w-3xl',
+} as const
+
+export type DialogContentSize = keyof typeof dialogContentSizes
+
 export function DialogContent(props: DialogContentProps) {
-  const [local, rest] = splitProps(props, ['class', 'children', 'closeButton', 'positioner'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'closeButton',
+    'positioner',
+    'size',
+  ])
 
   return (
     <KobalteDialog.Portal>
@@ -284,7 +307,8 @@ export function DialogContent(props: DialogContentProps) {
           class={cn(
             dialogSurface,
             overlayMotion,
-            'relative grid w-full max-w-lg gap-4 p-5',
+            'relative grid w-full gap-4 p-5',
+            dialogContentSizes[local.size ?? 'md'],
             local.class
           )}
           {...rest}

package/src/components/ui/dialog/index.ts

@@ -11,4 +11,5 @@ export {
   DialogTitle,
   DialogTrigger,
   type DialogContentProps,
+  type DialogContentSize,
 } from './dialog'

package/src/components/ui/entity-icon/entity-icon.tsx

@@ -35,6 +35,14 @@ import { cn } from '#lib/utils'
  * `shape="rounded"` is the default because a rounded square reads as an object
  * and a circle reads as a person; use `circle` only when the tile really does
  * hold a face.
+ *
+ * `monochrome` is for a third-party brand mark — a vendor logo drawn with its
+ * own `fill`. A brand's hex is chosen for a white page: GitHub's near-black and
+ * Slack's aubergine all but vanish on a dark tile, and no tone can be picked
+ * that suits every brand in both themes. `monochrome` repaints any explicitly
+ * filled shape in the tile's glyph colour (the tone's), so the mark stays
+ * recognisable by its shape and legible in every theme. Stroke-drawn icons
+ * (Lucide, `fill="none"`) are left alone.
  */
 export const entityIconVariants = cva(
   'relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
@@ -90,6 +98,8 @@ export type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &
     badge?: JSX.Element
     /** A second edge, drawn outside the tile — an active or selected ring. */
     ring?: boolean
+    /** Repaint a brand mark's own fills in the tile's glyph colour. */
+    monochrome?: boolean
   }
 
 /**
@@ -143,6 +153,7 @@ export function EntityIcon(props: EntityIconProps) {
     'fallback',
     'badge',
     'ring',
+    'monochrome',
     'shape',
     'size',
     'tone',
@@ -159,9 +170,13 @@ export function EntityIcon(props: EntityIconProps) {
 
   return (
     <span
+      data-slot="entity-icon"
       class={cn(
         entityIconVariants({ shape: local.shape, size: local.size, tone: local.tone }),
         local.ring && 'ring-2 ring-ring ring-offset-2 ring-offset-background',
+        // A presentation attribute (`fill="#4A154B"`) loses to any CSS rule, so
+        // this overrides the brand's hex without touching the caller's SVG.
+        local.monochrome && "[&_[fill]:not([fill='none'])]:fill-current",
         local.class
       )}
       role="img"

package/src/components/ui/field/field.tsx

@@ -188,10 +188,30 @@ export function FieldSet(props: ComponentProps<'fieldset'>) {
   return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />
 }
 
+export type FieldGroupProps = ComponentProps<'div'> & {
+  /**
+   * `2` lays the fields out in two columns from the `sm` breakpoint up — a
+   * short form of paired values (host and port, a name and a model). A field
+   * that needs the full width says `class="col-span-full"`. Below `sm` it is
+   * one column again, because two inputs side by side on a phone are each too
+   * narrow to read.
+   */
+  columns?: 1 | 2
+}
+
 /** A visual stack for related controls that does not imply fieldset semantics. */
-export function FieldGroup(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <div data-slot="field-group" class={cn('flex flex-col gap-4', local.class)} {...rest} />
+export function FieldGroup(props: FieldGroupProps) {
+  const [local, rest] = splitProps(props, ['class', 'columns'])
+  return (
+    <div
+      data-slot="field-group"
+      class={cn(
+        local.columns === 2 ? 'grid gap-4 sm:grid-cols-2' : 'flex flex-col gap-4',
+        local.class
+      )}
+      {...rest}
+    />
+  )
 }
 
 export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {

package/src/components/ui/field/index.ts

@@ -10,6 +10,7 @@ export {
   FieldSeparator,
   FieldSet,
   FieldTextArea,
+  type FieldGroupProps,
   type FormFieldProps,
 } from './field'
 export { NumberField } from './number-field'

package/src/components/ui/input-group/index.ts

@@ -5,5 +5,6 @@ export {
   InputGroupInput,
   InputGroupText,
   type InputGroupAddonProps,
+  type InputGroupProps,
 } from './input-group'
 export { SecretInputGroup, type SecretInputGroupProps } from './secret-input-group'

package/src/components/ui/input-group/input-group.tsx

@@ -15,15 +15,29 @@ import { cn } from '#lib/utils'
  * The focus ring therefore lives on the group and follows `focus-within`. A
  * group containing several focusable things still reads as focused once, which
  * is the correct affordance: the user is somewhere inside it.
+ *
+ * `size` is the control rung, matching `Input`: `sm` for a toolbar search beside
+ * `icon-sm` actions, `md` (the default) everywhere else. The group's input and
+ * text follow it.
  */
-export function InputGroup(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export type InputGroupProps = ComponentProps<'div'> & {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function InputGroup(props: InputGroupProps) {
+  const [local, rest] = splitProps(props, ['class', 'size'])
 
   return (
     <div
       data-slot="input-group"
+      data-size={local.size}
       class={cn(
-        'border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm',
+        'group/input-group border-input flex w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent',
+        {
+          'h-control-sm px-control-xs': local.size === 'sm',
+          'h-control-md px-control-sm': local.size === 'md' || local.size === undefined,
+          'h-control-lg px-control-md': local.size === 'lg',
+        },
         'transition-[color,box-shadow,border-color] ease-out',
         'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',
         'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',
@@ -64,7 +78,7 @@ export function InputGroupInput(props: ComponentProps<'input'>) {
       aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
       aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
       class={cn(
-        'h-full min-w-0 flex-1 bg-transparent text-sm outline-none',
+        'h-full min-w-0 flex-1 bg-transparent text-sm outline-none group-data-[size=sm]/input-group:text-xs',
         'placeholder:text-muted-foreground',
         'disabled:cursor-not-allowed',
         local.class
@@ -94,6 +108,7 @@ export function InputGroupAddon(props: InputGroupAddonProps) {
       class={cn(
         'text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none',
         '[&_svg]:pointer-events-none [&_svg]:size-4',
+        'group-data-[size=sm]/input-group:text-xs group-data-[size=sm]/input-group:[&_svg]:size-3.5',
         { 'order-first': local.align !== 'end', 'order-last': local.align === 'end' },
         local.class
       )}
@@ -130,5 +145,13 @@ export function InputGroupButton(props: ComponentProps<'button'>) {
 /** Text that reads as a value but is not an input, e.g. a unit or a suffix. */
 export function InputGroupText(props: ComponentProps<'span'> & { children?: JSX.Element }) {
   const [local, rest] = splitProps(props, ['class'])
-  return <span class={cn('text-muted-foreground text-sm', local.class)} {...rest} />
+  return (
+    <span
+      class={cn(
+        'text-muted-foreground text-sm group-data-[size=sm]/input-group:text-xs',
+        local.class
+      )}
+      {...rest}
+    />
+  )
 }

package/src/components/ui/native-select/native-select.tsx

@@ -4,7 +4,14 @@ import { createEffect, For, onMount, Show, splitProps } from 'solid-js'
 import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
-export type NativeSelectProps = ComponentProps<'select'> & {
+export type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {
+  /**
+   * The control rung, matching `Input` and `SelectTrigger`: `sm` for a dense
+   * toolbar or pane filter, `md` (the default) everywhere else. This replaces the
+   * native `size` attribute, which turns a select into a list box — a different
+   * control that this styled single-line select is not.
+   */
+  size?: 'sm' | 'md' | 'lg'
   /** Render the choices from data instead of raw option children. */
   options?: readonly NativeSelectOption[]
   /** Initialize an uncontrolled selection after its native options mount. */
@@ -62,6 +69,7 @@ export type NativeSelectOption = Readonly<{
 export function NativeSelect(props: NativeSelectProps) {
   const [local, rest] = splitProps(props, [
     'class',
+    'size',
     'children',
     'defaultValue',
     'options',
@@ -108,7 +116,13 @@ export function NativeSelect(props: NativeSelectProps) {
         aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
         aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         class={cn(
-          'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',
+          'min-w-0 appearance-none rounded-md border border-input bg-transparent',
+          {
+            'h-control-sm px-control-sm pr-8 text-xs': local.size === 'sm',
+            'h-control-md px-control-md pr-9 text-sm':
+              local.size === 'md' || local.size === undefined,
+            'h-control-lg px-control-lg pr-9 text-sm': local.size === 'lg',
+          },
           'transition-[color,box-shadow,border-color] ease-out outline-none',
           'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
           'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
@@ -132,7 +146,10 @@ export function NativeSelect(props: NativeSelectProps) {
       <ChevronDownIcon
         data-slot="native-select-icon"
         aria-hidden="true"
-        class="pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+        class={cn(
+          'pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground',
+          local.size === 'sm' ? 'size-3.5' : 'size-4'
+        )}
       />
     </span>
   )

package/src/components/ui/progress/progress.tsx

@@ -39,7 +39,11 @@ export function Progress(props: ProgressProps) {
   ])
 
   return (
-    <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>
+    <KobalteProgress
+      data-slot="progress"
+      class={cn('flex w-full flex-col gap-1.5', local.class)}
+      {...rest}
+    >
       <Show when={local.label || !local.hideValue}>
         <div class="flex items-center justify-between gap-3">
           <Show when={local.label}>

package/src/components/ui/radio-group/radio-group.tsx

@@ -1,6 +1,6 @@
 import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'
 import { Circle } from 'lucide-solid'
-import type { ComponentProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
@@ -37,6 +37,7 @@ export function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {
   })
   return (
     <KobalteRadioGroup
+      data-slot="radio-group"
       id={field?.id ?? local.id}
       aria-label={local['aria-label']}
       aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
@@ -58,14 +59,31 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
    */
   label?: string
   description?: string
+  /**
+   * `card` draws the option as a bordered, selectable card — for a choice
+   * whose options need a sentence each (a source type, a sync budget), where a
+   * bare radio row reads as a form field rather than a decision. The whole card
+   * is the hit target, and the selected card takes the primary edge.
+   */
+  variant?: 'default' | 'card'
+  /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
+  media?: JSX.Element
 }
 
+/**
+ * A card option's label stretches an invisible layer over the whole card, so a
+ * click anywhere on it — padding, media, description — selects the option
+ * through the label's native association with the radio input. Wrapping the
+ * card in a `<label>` would nest the item's own label inside another.
+ */
 export function RadioGroupItem(props: RadioGroupItemProps) {
   const [local, rest] = splitProps(props, [
     'class',
     'controlClass',
     'label',
     'description',
+    'variant',
+    'media',
     'children',
     'aria-label',
     'aria-labelledby',
@@ -74,11 +92,23 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
     'aria-busy',
     'title',
   ])
+  const card = () => local.variant === 'card'
 
   return (
     <KobalteRadioGroup.Item
+      data-slot="radio-group-item"
+      data-variant={card() ? 'card' : undefined}
       title={local.title}
-      class={cn('group/radio flex items-start gap-2.5', local.class)}
+      class={cn(
+        'group/radio flex items-start gap-2.5',
+        {
+          'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':
+            card(),
+          'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':
+            card(),
+        },
+        local.class
+      )}
       {...rest}
     >
       <KobalteRadioGroup.ItemInput
@@ -104,10 +134,17 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
           <Circle class="size-2 fill-current" />
         </KobalteRadioGroup.ItemIndicator>
       </KobalteRadioGroup.ItemControl>
+      {local.media ? (
+        <span data-slot="radio-group-item-media" class="flex shrink-0 items-center">
+          {local.media}
+        </span>
+      ) : null}
       {local.children ?? (
         <div class="grid gap-0.5 leading-none">
           {local.label ? (
-            <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
+            <KobalteRadioGroup.ItemLabel
+              class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}
+            >
               {local.label}
             </KobalteRadioGroup.ItemLabel>
           ) : null}

package/src/components/ui/resizable/resizable.tsx

@@ -70,8 +70,13 @@ export function ResizablePanel(props: ComponentProps<typeof Resizable.Panel> & {
 
 export type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {
   class?: string
-  /** Draw a visible grip in the middle of the divider. */
-  withHandle?: boolean
+  /**
+   * Draw a visible grip in the middle of the divider: `true` is the bordered
+   * chip with its grip icon; `'rung'` is a quieter translucent bar with no
+   * icon, for edges that should read as barely there. Either way the divider
+   * keeps its full 24px hit target.
+   */
+  withHandle?: boolean | 'rung'
   /**
    * The divider's accessible name. It is a focusable control — arrow keys move
    * the split — so it needs one; without it a screen reader announces an
@@ -97,7 +102,8 @@ export function ResizableHandle(props: ResizableHandleProps) {
            a hairline, but a hairline is far too small to grab. 24px on the
            drag axis meets WCAG 2.5.8's minimum target. */
         'after:absolute after:inset-y-0 after:-inset-x-3 after:w-6',
-        'transition-colors ease-out hover:bg-primary',
+        'transition-colors ease-out',
+        local.withHandle === 'rung' ? 'hover:bg-primary/45' : 'hover:bg-primary',
         'focus-visible:bg-primary focus-visible:outline-none',
         'data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full',
         'data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-3 data-[orientation=vertical]:after:h-6 data-[orientation=vertical]:after:w-full',
@@ -105,7 +111,12 @@ export function ResizableHandle(props: ResizableHandleProps) {
       )}
       {...rest}
     >
-      {local.withHandle ? (
+      {local.withHandle === 'rung' ? (
+        <div
+          data-slot="resizable-grip"
+          class="z-(--z-docked) h-11 w-1.5 flex-none rounded-full bg-border/55 group-data-[orientation=vertical]/resize:h-1.5 group-data-[orientation=vertical]/resize:w-11"
+        />
+      ) : local.withHandle ? (
         <div class="bg-border z-(--z-docked) flex h-4 w-2.5 items-center justify-center rounded-sm border border-border">
           <GripVertical class="size-2.5 text-muted-foreground" />
         </div>

package/src/components/ui/select/select.tsx

@@ -46,6 +46,7 @@ export function SelectTrigger(props: SelectTriggerProps) {
 
   return (
     <KobalteSelect.Trigger
+      data-slot="select-trigger"
       class={cn(
         'border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md',
         'whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none',

package/src/components/ui/sheet/sheet.tsx

@@ -60,6 +60,16 @@ const sheetVariants = cva(
         edge: '',
         inset: 'panel-dialog-inset w-lg rounded-xl border',
       },
+      /**
+       * `panel` gives a start or end sheet the shell's panel width
+       * (`--panel-width`, 390px) — the width a pane that collapses into a sheet
+       * on a narrow window already had beside the work, so its content does not
+       * reflow when it moves. Top and bottom sheets span the window either way.
+       */
+      size: {
+        default: '',
+        panel: '',
+      },
     },
     compoundVariants: [
       {
@@ -82,8 +92,15 @@ const sheetVariants = cva(
         variant: 'edge',
         class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',
       },
+      {
+        side: ['start', 'end'],
+        variant: 'edge',
+        size: 'panel',
+        class: 'w-panel max-w-[92vw]',
+      },
+      { side: ['start', 'end'], variant: 'inset', size: 'panel', class: 'w-panel' },
     ],
-    defaultVariants: { side: 'end', variant: 'edge' },
+    defaultVariants: { side: 'end', variant: 'edge', size: 'default' },
   }
 )
 
@@ -107,6 +124,7 @@ export function SheetContent(props: SheetContentProps) {
     'class',
     'side',
     'variant',
+    'size',
     'children',
     'closeButton',
     'closeLabel',
@@ -134,7 +152,7 @@ export function SheetContent(props: SheetContentProps) {
       <KobalteDialogContent
         data-variant={variant()}
         class={cn(
-          sheetVariants({ side: local.side, variant: variant() }),
+          sheetVariants({ side: local.side, variant: variant(), size: local.size }),
           'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',
           'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',
           local.class

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

@@ -42,6 +42,7 @@ export function Slider(props: SliderProps) {
 
   return (
     <KobalteSlider
+      data-slot="slider"
       class={cn(
         'relative flex touch-none flex-col justify-center select-none',
         'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',

package/src/components/ui/status-chip/status-chip.tsx

@@ -90,6 +90,7 @@ export function StatusChip(props: StatusChipProps) {
 
   const chip = (
     <span
+      data-slot="status-chip"
       class={cn(
         'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',
         labelTone[local.tone ?? 'neutral'],

package/src/components/ui/switch/switch.tsx

@@ -64,6 +64,7 @@ export function Switch(props: SwitchProps) {
 
   return (
     <KobalteSwitch
+      data-slot="switch"
       id={field ? undefined : local.id}
       title={local.title}
       class={cn('group/switch flex items-center gap-2.5', local.class)}