Toggle Group

        export function Root(props: ToggleGroupRootProps) {
  const type = () => props.type ?? "single"
  const orientation = () => props.orientation ?? "horizontal"

  const { value, requestChange } = createControllableValue<string[], "toggle">({
    value: props.value,
    defaultValue: props.defaultValue ?? [],
    onChange: (next: string[]) => props.onValueChange?.(next),
    equals: (a: string[], b: string[]) => a.length === b.length && a.every((v, i) => v === b[i]),
  })

  const toggle = (itemValue: string) => {
    if (props.disabled) return
    const current = value()

    let next: string[]
    if (type() === "single") {
      next = current.includes(itemValue) ? [] : [itemValue]
    } else {
      next = current.includes(itemValue)
        ? current.filter((v: string) => v !== itemValue)
        : [...current, itemValue]
    }

    requestChange(next, createChangeDetails("toggle"))
  }

  return (
    <ToggleGroupContext
      value={{
        value,
        toggle,
        type: type(),
        disabled: props.disabled,
        orientation: orientation(),
      }}
    >
      <div
        role="group"
        aria-disabled={props.disabled ? "true" : undefined}
        class={props.class}
        style={props.style}
        {...applySemanticAttrs({
          scope: "toggle-group",
          part: "root",
          orientation: orientation(),
          disabled: props.disabled,
        })}
      >
        {props.children}
      </div>
    </ToggleGroupContext>
  )
}