7onic 0.1.19 → 0.1.21

package/dist/index.js

@@ -10192,6 +10192,9 @@ import { cn } from '@/lib/utils'
 type BreadcrumbContextValue = {
   size?: 'sm' | 'default' | 'lg'
   separator?: React.ReactNode
+  maxItems?: number
+  itemsBeforeCollapse?: number
+  itemsAfterCollapse?: number
 }
 
 const BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})
@@ -10242,17 +10245,17 @@ export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
   separator?: React.ReactNode
   /** Size of the breadcrumb */
   size?: 'sm' | 'default' | 'lg'
-  /** Max items before collapsing (undefined = no collapse) */
+  /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */
   maxItems?: number
-  /** Items visible before the ellipsis when collapsed */
+  /** Items kept before the ellipsis when collapsed */
   itemsBeforeCollapse?: number
-  /** Items visible after the ellipsis when collapsed */
+  /** Items kept after the ellipsis when collapsed */
   itemsAfterCollapse?: number
 }
 
 const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ className, separator, size = 'default', ...props }, ref) => (
-    <BreadcrumbContext.Provider value={{ size, separator }}>
+  ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (
+    <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>
       <nav
         ref={ref}
         aria-label="breadcrumb"
@@ -10267,8 +10270,8 @@ Breadcrumb.displayName = 'Breadcrumb'
 // \u2500\u2500\u2500 BreadcrumbList \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
-  ({ className, ...props }, ref) => {
-    const { size = 'default' } = useBreadcrumbContext()
+  ({ className, children, ...props }, ref) => {
+    const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()
     const sizeClass = breadcrumbSizeMap[size]
     return (
       <ol
@@ -10281,7 +10284,9 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
           className
         )}
         {...props}
-      />
+      >
+        {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}
+      </ol>
     )
   }
 )
@@ -10385,6 +10390,61 @@ const BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisP
 )
 BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
 
+// \u2500\u2500\u2500 Collapse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,
+// so fragments are unwrapped before counting.
+function flattenFragments(children: React.ReactNode): React.ReactNode[] {
+  return React.Children.toArray(children).flatMap((node) =>
+    React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment
+      ? flattenFragments(node.props.children).map((child) =>
+          // Prefix keys so children of different fragments stay unique
+          React.isValidElement(child) ? React.cloneElement(child, { key: \`\${node.key}\${child.key}\` }) : child
+        )
+      : [node]
+  )
+}
+
+// Groups children into segments (the separator before an item + the item),
+// then keeps the first \`before\` and last \`after\` segments around one ellipsis
+// item. The user's own separators are reused, so custom separators survive.
+function collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {
+  if (maxItems === undefined) return children
+
+  const nodes = flattenFragments(children)
+  const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []
+  let pendingSeparator: React.ReactNode = null
+  for (const node of nodes) {
+    const type = React.isValidElement(node) ? node.type : null
+    if (type === BreadcrumbSeparator) {
+      pendingSeparator = node
+    } else if (type === BreadcrumbItem) {
+      segments.push({ separator: pendingSeparator, nodes: [node] })
+      pendingSeparator = null
+    } else if (segments.length > 0) {
+      segments[segments.length - 1].nodes.push(node)
+    } else {
+      segments.push({ separator: null, nodes: [node] })
+    }
+  }
+
+  if (segments.length <= maxItems || before + after >= segments.length) return children
+
+  const head = segments.slice(0, before)
+  const tail = segments.slice(segments.length - after)
+  const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))
+  const ellipsisSeparator = segments[before].separator
+
+  return [
+    ...render(head),
+    ...(ellipsisSeparator ? [ellipsisSeparator] : []),
+    <BreadcrumbItem key="breadcrumb-collapsed">
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>,
+    ...render(tail),
+  ]
+}
+
 // \u2500\u2500\u2500 Exports \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export {
@@ -12302,6 +12362,13 @@ const ChatInput = React.forwardRef<HTMLDivElement, ChatInputRootProps>(
 )
 ChatInput.displayName = 'ChatInput'
 
+// Writes a node into a callback or object ref. Kept outside the component: React
+// Compiler rules flag assigning \`.current\` on refs that come from props or context.
+function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {
+  if (typeof ref === 'function') ref(value)
+  else if (ref) (ref as React.MutableRefObject<T | null>).current = value
+}
+
 // ============================================================================
 // ChatInputField \u2014 Auto-resizing textarea
 // ============================================================================
@@ -12336,12 +12403,8 @@ const ChatInputField = React.forwardRef<HTMLTextAreaElement, ChatInputFieldProps
     const setRef = React.useCallback(
       (el: HTMLTextAreaElement | null) => {
         internalRef.current = el
-        ctx._fieldRef.current = el
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(el)
-        } else if (forwardedRef) {
-          (forwardedRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = el
-        }
+        assignRef(ctx._fieldRef, el)
+        assignRef(forwardedRef, el)
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [forwardedRef]
@@ -12749,7 +12812,6 @@ export interface ChatMessageAvatarProps {
   className?: string
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ChatMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 export interface ChatMessageFooterProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -12986,7 +13048,7 @@ import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { useFieldContext } from './field'
+import { useFieldContext, useFieldControl } from './field'
 
 // Color maps for checked/indeterminate state
 const checkboxColorMap = {
@@ -13068,7 +13130,11 @@ const Checkbox = React.forwardRef<
   const resolvedSize = size || 'default'
   const resolvedDisabled = disabled ?? fieldContext?.disabled
   const generatedId = React.useId()
-  const checkboxId = id ?? fieldContext?.id ?? generatedId
+  // With its own label the checkbox is one item of a group: keep a unique id. Only a
+  // bare checkbox labelled by FieldLabel takes the Field id.
+  const hasOwnLabel = Boolean(label)
+  const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId)
+  useFieldControl(hasOwnLabel ? 'group' : 'single', Boolean(fieldContext) && (hasOwnLabel || !id))
 
   const checkbox = (
     <CheckboxPrimitive.Root
@@ -13580,9 +13646,9 @@ import { cn } from '@/lib/utils'
 type DropdownMenuRadius = 'md' | 'lg' | 'xl'
 
 const contentRadiusMap: Record<DropdownMenuRadius, string> = {
-  md: 'rounded-md',     // 6px
+  md: 'rounded-md',     // 6px (default)
   lg: 'rounded-lg',     // 8px
-  xl: 'rounded-xl',     // 12px (default)
+  xl: 'rounded-xl',     // 12px
 }
 
 const itemRadiusMap: Record<DropdownMenuRadius, string> = {
@@ -13641,7 +13707,7 @@ const DropdownMenuStyleContext = React.createContext<{
   radius: DropdownMenuRadius
   flush: boolean
   size: DropdownMenuSize
-}>({ radius: 'lg', flush: false, size: 'md' })
+}>({ radius: 'md', flush: false, size: 'md' })
 
 // Root \u2014 state management (controlled / uncontrolled)
 const DropdownMenu = DropdownMenuPrimitive.Root
@@ -13934,16 +14000,42 @@ import { cn } from '@/lib/utils'
 // Field Context for sharing state between components
 interface FieldContextValue {
   id: string
+  /** id of the FieldLabel, for aria-labelledby on grouped controls */
+  labelId: string
   error?: boolean
   disabled?: boolean
+  /** A FieldLabel is rendered inside this Field */
+  hasLabel: boolean
+  /** The Field holds labelled checkboxes / switches / a radio group and no single input */
+  isGroup: boolean
+  registerLabel: () => () => void
+  registerControl: (kind: FieldControlKind) => () => void
 }
 
+type FieldControlKind = 'single' | 'group' | 'labelled'
+
 const FieldContext = React.createContext<FieldContextValue | null>(null)
 
 function useFieldContext() {
   return React.useContext(FieldContext)
 }
 
+// Controls tell their Field what they are, so FieldLabel can point at the right thing.
+// 'single': one input that takes the Field id (Input, Textarea, a bare Checkbox / Switch);
+//   FieldLabel targets it with htmlFor.
+// 'group': a Checkbox / Switch with its own label keeps a unique id; the Field becomes
+//   role="group" named by FieldLabel instead of every item sharing one id.
+// 'labelled': a RadioGroup names itself from FieldLabel (aria-labelledby).
+// A single input wins: with one present, FieldLabel keeps pointing at it.
+function useFieldControl(kind: FieldControlKind, enabled: boolean) {
+  const context = useFieldContext()
+  const register = context?.registerControl
+  React.useEffect(() => {
+    if (!enabled || !register) return
+    return register(kind)
+  }, [enabled, register, kind])
+}
+
 // Field wrapper
 const fieldVariants = cva('flex flex-col', {
   variants: {
@@ -13970,11 +14062,33 @@ export interface FieldProps
 const Field = React.forwardRef<HTMLDivElement, FieldProps>(
   ({ className, gap, error, disabled, children, ...props }, ref) => {
     const id = React.useId()
+    const labelId = \`\${id}-label\`
+    const [labelCount, setLabelCount] = React.useState(0)
+    const [counts, setCounts] = React.useState({ single: 0, group: 0, labelled: 0 })
+
+    const registerLabel = React.useCallback(() => {
+      setLabelCount((n) => n + 1)
+      return () => setLabelCount((n) => n - 1)
+    }, [])
+    const registerControl = React.useCallback((kind: FieldControlKind) => {
+      setCounts((c) => ({ ...c, [kind]: c[kind] + 1 }))
+      return () => setCounts((c) => ({ ...c, [kind]: c[kind] - 1 }))
+    }, [])
+
+    const hasLabel = labelCount > 0
+    const isGroup = counts.single === 0 && (counts.group > 0 || counts.labelled > 0)
+    const asGroup = counts.single === 0 && counts.group > 0
+    const contextValue = React.useMemo(
+      () => ({ id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl }),
+      [id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl]
+    )
 
     return (
-      <FieldContext.Provider value={{ id, error, disabled }}>
+      <FieldContext.Provider value={contextValue}>
         <div
           ref={ref}
+          role={asGroup ? 'group' : undefined}
+          aria-labelledby={asGroup && hasLabel ? labelId : undefined}
           className={cn(fieldVariants({ gap }), className)}
           data-error={error || undefined}
           data-disabled={disabled || undefined}
@@ -13996,11 +14110,15 @@ export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElem
 const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
   ({ className, required, children, ...props }, ref) => {
     const context = useFieldContext()
+    const registerLabel = context?.registerLabel
+    React.useEffect(() => registerLabel?.(), [registerLabel])
 
     return (
       <label
         ref={ref}
-        htmlFor={context?.id}
+        id={context?.labelId}
+        // Grouped controls have their own labels; the group title targets no input
+        htmlFor={context && !context.isGroup ? context.id : undefined}
         className={cn(
           'text-md font-semibold text-foreground', // 14px - primary field identifier
           context?.disabled && 'opacity-50 cursor-not-allowed',
@@ -14061,7 +14179,7 @@ const FieldCharCount = React.forwardRef<
 })
 FieldCharCount.displayName = 'FieldCharCount'
 
-export { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext }
+export { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext, useFieldControl }
 `,
       type: "ui"
     }]
@@ -14211,7 +14329,7 @@ export { IconButton, iconButtonVariants }
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { useFieldContext } from './field'
+import { useFieldContext, useFieldControl } from './field'
 
 const inputVariants = cva(
   [
@@ -14320,6 +14438,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const resolvedError = error ?? fieldContext?.error
     const resolvedState = resolvedError ? 'error' : state
     const inputId = id ?? fieldContext?.id
+    useFieldControl('single', Boolean(fieldContext) && !id)
     const isDisabled = props.disabled ?? fieldContext?.disabled
 
     // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)
@@ -15444,10 +15563,13 @@ const NavigationMenuItem = React.forwardRef<HTMLLIElement, NavigationMenuItemPro
     const { orientation, collapsed } = useNavigationMenuContext()
     const [open, setOpen] = React.useState(defaultOpen)
 
-    // Auto-close sub-menus when collapsed
-    React.useEffect(() => {
+    // Auto-close sub-menus when collapsed. Adjusted during render (React's pattern for
+    // state that follows a prop) instead of in an effect, which re-rendered once more.
+    const [prevCollapsed, setPrevCollapsed] = React.useState(collapsed)
+    if (collapsed !== prevCollapsed) {
+      setPrevCollapsed(collapsed)
       if (collapsed) setOpen(false)
-    }, [collapsed])
+    }
 
     if (orientation === 'horizontal') {
       return (
@@ -15765,20 +15887,37 @@ const NavigationMenuGroup = React.forwardRef<HTMLDivElement, NavigationMenuGroup
     const { size, collapsed } = useNavigationMenuContext()
     const s = navigationMenuSizeMap[size]
 
+    const labelId = React.useId()
+    const showLabel = Boolean(label) && !collapsed
+
+    // Groups sit inside NavigationMenuList's <ul>, so the group is wrapped in an <li> to
+    // keep the list structure valid. The spacing class stays on that <li>: it relies on
+    // :first-child among the list's children.
     return (
-      <div ref={ref} role="group" className={cn(label && !collapsed && s.groupMargin, className)} {...props}>
-        {label && !collapsed && (
-          <div className={cn(
-            'font-semibold text-text-subtle uppercase tracking-wider select-none',
-            s.groupLabel,
-          )}>
-            {label}
-          </div>
-        )}
-        <ul className="flex flex-col gap-0.5">
-          {children}
-        </ul>
-      </div>
+      <li className={cn(showLabel && s.groupMargin)}>
+        <div
+          ref={ref}
+          role="group"
+          aria-labelledby={showLabel && !props['aria-label'] ? labelId : undefined}
+          className={className}
+          {...props}
+        >
+          {showLabel && (
+            <div
+              id={labelId}
+              className={cn(
+                'font-semibold text-text-subtle uppercase tracking-wider select-none',
+                s.groupLabel,
+              )}
+            >
+              {label}
+            </div>
+          )}
+          <ul className="flex flex-col gap-0.5">
+            {children}
+          </ul>
+        </div>
+      </li>
     )
   }
 )
@@ -16474,11 +16613,15 @@ PaginationEllipsis.displayName = 'PaginationEllipsis'
 
 // \u2500\u2500\u2500 PaginationItems (Convenience) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
+// Renders the <li> items straight into PaginationContent's <ul>: a wrapper element
+// between them breaks the list structure for assistive technology (a \`display:
+// contents\` div used to sit here). The div props and ref stay in the signature for
+// compatibility but have no element to attach to.
 const PaginationItems = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
-  ({ className, ...props }, ref) => {
+  (_props, _ref) => {
     const ctx = usePaginationContext()
     return (
-      <div ref={ref} className={cn('contents', className)} {...props}>
+      <>
         {ctx.paginationRange.map((item, index) => (
           <PaginationItem key={\`\${item}-\${index}\`}>
             {item === 'dots' ? (
@@ -16488,7 +16631,7 @@ const PaginationItems = React.forwardRef<HTMLDivElement, React.ComponentPropsWit
             )}
           </PaginationItem>
         ))}
-      </div>
+      </>
     )
   }
 )
@@ -17205,7 +17348,7 @@ import * as React from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { useFieldContext } from './field'
+import { useFieldContext, useFieldControl } from './field'
 
 // Color maps for checked state
 const radioColorMap = {
@@ -17257,6 +17400,9 @@ const RadioGroup = React.forwardRef<
 >(({ className, orientation, size = 'default', weight = 'bold', color = 'default', disabled, ...props }, ref) => {
   const fieldContext = useFieldContext()
   const resolvedDisabled = disabled ?? fieldContext?.disabled
+  // Inside a Field the FieldLabel names the radio group (items keep their own labels)
+  useFieldControl('labelled', Boolean(fieldContext))
+  const labelledBy = fieldContext?.hasLabel && !props['aria-label'] ? fieldContext.labelId : undefined
 
   return (
     <RadioGroupContext.Provider value={{ size, weight, color, disabled: resolvedDisabled }}>
@@ -17265,6 +17411,7 @@ const RadioGroup = React.forwardRef<
         className={cn(radioGroupVariants({ orientation }), className)}
         orientation={orientation || undefined}
         disabled={resolvedDisabled}
+        aria-labelledby={labelledBy}
         {...props}
       />
     </RadioGroupContext.Provider>
@@ -17605,7 +17752,7 @@ export { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }
   "select": {
     name: "select",
     dependencies: ["@radix-ui/react-select"],
-    registryDependencies: [],
+    registryDependencies: ["field"],
     reverseDependencies: [],
     namespace: false,
     description: "",
@@ -17616,6 +17763,7 @@ export { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }
 import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn } from '@/lib/utils'
+import { useFieldContext, useFieldControl } from './field'
 
 // Radius (matches Input \u2014 set at Root, propagates to Trigger and Content)
 type SelectRadius = 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
@@ -17744,19 +17892,24 @@ const SelectStyleContext = React.createContext<{
   flush: boolean
 }>({ contentRadius: 'xl', itemSize: 'md', flush: false })
 
-// Root \u2014 state management + size/radius context
+// Root \u2014 state management + size/radius context. Inside a Field it inherits the
+// Field's disabled state, like Input and Textarea.
 const Select = ({
   size = 'default',
   radius = 'default',
+  disabled,
   ...props
 }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
   size?: SelectSize
   radius?: SelectRadius
-}) => (
-  <SelectRootContext.Provider value={{ size, radius }}>
-    <SelectPrimitive.Root {...props} />
-  </SelectRootContext.Provider>
-)
+}) => {
+  const fieldContext = useFieldContext()
+  return (
+    <SelectRootContext.Provider value={{ size, radius }}>
+      <SelectPrimitive.Root disabled={disabled ?? fieldContext?.disabled} {...props} />
+    </SelectRootContext.Provider>
+  )
+}
 
 // Value \u2014 displays selected value or placeholder
 const SelectValue = SelectPrimitive.Value
@@ -17768,11 +17921,15 @@ const SelectGroup = SelectPrimitive.Group
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => {
+>(({ className, children, id, ...props }, ref) => {
   const { size, radius } = React.useContext(SelectRootContext)
+  // Inside a Field the trigger takes the Field id, so FieldLabel names it
+  const fieldContext = useFieldContext()
+  useFieldControl('single', Boolean(fieldContext) && !id)
   return (
     <SelectPrimitive.Trigger
       ref={ref}
+      id={id ?? fieldContext?.id}
       className={cn(
         'flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted',
         'border border-border',
@@ -18154,7 +18311,7 @@ export { Skeleton, skeletonVariants }
   "slider": {
     name: "slider",
     dependencies: ["@radix-ui/react-slider"],
-    registryDependencies: [],
+    registryDependencies: ["field"],
     reverseDependencies: [],
     namespace: false,
     description: "",
@@ -18166,6 +18323,7 @@ import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { useFieldContext, useFieldControl } from './field'
 
 // Slider root variants
 const sliderVariants = cva(
@@ -18241,8 +18399,13 @@ export interface SliderProps
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   SliderProps
->(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, ...props }, ref) => {
+>(({ className, size, color = 'default', value, defaultValue, onValueChange, showTooltip = 'never', formatLabel, startContent, endContent, orientation, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) => {
   const resolvedSize = size || 'default'
+  // The thumbs carry role="slider", so the accessible name goes on them, not on the
+  // Root. Inside a Field the FieldLabel names the slider unless a name is given.
+  const fieldContext = useFieldContext()
+  useFieldControl('labelled', Boolean(fieldContext))
+  const thumbLabelledBy = ariaLabelledBy ?? (!ariaLabel && fieldContext?.hasLabel ? fieldContext.labelId : undefined)
   const thumbCount = value?.length ?? defaultValue?.length ?? 1
   const hasTooltip = showTooltip !== 'never'
   const hasWrapper = !!(startContent || endContent)
@@ -18295,6 +18458,8 @@ const Slider = React.forwardRef<
       {Array.from({ length: thumbCount }).map((_, i) => (
         <SliderPrimitive.Thumb
           key={i}
+          aria-label={ariaLabel}
+          aria-labelledby={thumbLabelledBy}
           className={cn(
             'group/thumb block rounded-full border-2 shadow-sm', sliderColorMap[color].thumb,
             isVertical
@@ -18988,7 +19153,7 @@ import * as React from 'react'
 import * as SwitchPrimitive from '@radix-ui/react-switch'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { useFieldContext } from './field'
+import { useFieldContext, useFieldControl } from './field'
 
 // Switch track variants
 const switchVariants = cva(
@@ -19089,7 +19254,11 @@ const Switch = React.forwardRef<
   const resolvedSize = size || 'default'
   const resolvedDisabled = disabled ?? fieldContext?.disabled
   const generatedId = React.useId()
-  const switchId = id ?? fieldContext?.id ?? generatedId
+  // With its own label the switch is one item of a group: keep a unique id. Only a
+  // bare switch labelled by FieldLabel takes the Field id.
+  const hasOwnLabel = Boolean(label || startLabel || endLabel)
+  const switchId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId)
+  useFieldControl(hasOwnLabel ? 'group' : 'single', Boolean(fieldContext) && (hasOwnLabel || !id))
 
   const switchEl = (
     <SwitchPrimitive.Root
@@ -19801,7 +19970,7 @@ export {
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { useFieldContext } from './field'
+import { useFieldContext, useFieldControl } from './field'
 
 const textareaVariants = cva(
   [
@@ -19882,6 +20051,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     const resolvedError = error ?? fieldContext?.error
     const resolvedState = resolvedError ? 'error' : state
     const textareaId = id ?? fieldContext?.id
+    useFieldControl('single', Boolean(fieldContext) && !id)
     const isDisabled = props.disabled ?? fieldContext?.disabled
 
     // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)
@@ -21727,7 +21897,7 @@ function showCompanionHints(names) {
 
 // cli/src/index.ts
 var import_picocolors4 = __toESM(require_picocolors());
-var VERSION = "0.1.19";
+var VERSION = "0.1.21";
 var HELP = `
 ${import_picocolors4.default.bold("7onic")} \u2014 Add 7onic design system components to your project
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "7onic",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "CLI for adding 7onic design system components to your project",
   "bin": {
     "7onic": "./dist/index.js"