{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toggle","type":"registry:ui","title":"Toggle and toggle group","description":"A button that stays pressed, alone or in a raised group that holds one choice or many and moves with the arrow keys as a single tab stop.","dependencies":["@radix-ui/react-slot","clsx","lucide-react","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/button.tsx","type":"registry:ui","target":"components/ui/button.tsx","content":"\"use client\";\n\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { LoaderCircle } from \"lucide-react\";\nimport {\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/loading-indicator.css\";\nimport \"./button.css\";\n\n/* Colour, material and press live in button.css keyed on data-variant, so a\n   consumer's utility classes still override them. Raised to press: the\n   button sinks 1px into an inner shade instead of scaling. */\nconst variants = {\n  default: \"\",\n  secondary: \"\",\n  ghost: \"\",\n  destructive: \"\",\n};\n\nconst sizes = {\n  sm: \"h-8 gap-1.5 rounded-full px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11\",\n  md: \"h-[var(--control-height)] gap-2 rounded-full px-3.5 text-sm\",\n  lg: \"h-11 gap-2 rounded-full px-[18px] text-[15px]\",\n  icon: \"size-[var(--control-height)] rounded-full p-0\",\n};\n\nexport type ButtonProps = ComponentProps<\"button\"> & {\n  variant?: keyof typeof variants;\n  size?: keyof typeof sizes;\n  asChild?: boolean;\n  /** Shows a spinner over the label and swallows clicks while keeping focus and width. */\n  loading?: boolean;\n  /** Animate a meaningful label/icon change, such as saving → saved. */\n  feedbackKey?: string;\n};\n\nexport function Button({\n  className,\n  variant = \"default\",\n  size = \"md\",\n  asChild = false,\n  loading = false,\n  feedbackKey,\n  disabled,\n  \"aria-disabled\": ariaDisabled,\n  children,\n  onClick,\n  onClickCapture,\n  tabIndex,\n  type = \"button\",\n  ...props\n}: ButtonProps) {\n  const Component = asChild ? Slot : \"button\";\n  const nativeDisabled = Boolean(disabled);\n  const blocked =\n    nativeDisabled ||\n    loading ||\n    ariaDisabled === true ||\n    ariaDisabled === \"true\";\n\n  return (\n    <Component\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      type={asChild ? undefined : type}\n      className={cn(\n        \"relative inline-flex shrink-0 items-center justify-center whitespace-nowrap border border-transparent font-medium tracking-[-0.006em] outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none aria-disabled:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n        variants[variant],\n        sizes[size],\n        className,\n      )}\n      disabled={asChild ? undefined : nativeDisabled}\n      aria-disabled={nativeDisabled || ariaDisabled ? true : undefined}\n      aria-busy={loading || undefined}\n      tabIndex={asChild && nativeDisabled ? -1 : tabIndex}\n      {...props}\n      onKeyDown={(event) => {\n        if (blocked && (event.key === \"Enter\" || event.key === \" \")) {\n          event.preventDefault();\n        }\n        props.onKeyDown?.(event);\n      }}\n      onClickCapture={(event) => {\n        if (blocked) {\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n        onClickCapture?.(event);\n      }}\n      onClick={onClick}\n    >\n      {loading && asChild && (\n        <LoaderCircle data-slot=\"loading-indicator\" aria-hidden=\"true\" />\n      )}\n      {loading && !asChild && feedbackKey === undefined && (\n        <span data-slot=\"button-busy\" aria-hidden=\"true\">\n          <LoaderCircle data-slot=\"loading-indicator\" />\n        </span>\n      )}\n      <Slottable>\n        {loading && !asChild && feedbackKey === undefined ? (\n          <span data-slot=\"button-label\" data-hidden=\"true\">\n            {children}\n          </span>\n        ) : feedbackKey !== undefined && !asChild ? (\n          <ButtonFeedback stateKey={feedbackKey}>\n            {loading && (\n              <LoaderCircle data-slot=\"loading-indicator\" aria-hidden=\"true\" />\n            )}\n            {children}\n          </ButtonFeedback>\n        ) : (\n          children\n        )}\n      </Slottable>\n    </Component>\n  );\n}\n\nfunction ButtonFeedback({\n  stateKey,\n  children,\n}: {\n  stateKey: string;\n  children: ReactNode;\n}) {\n  const content = useRef<HTMLSpanElement>(null);\n  const [initialKey] = useState(stateKey);\n  const [width, setWidth] = useState<number>();\n  useLayoutEffect(() => {\n    const element = content.current;\n    if (!element) return;\n    const measure = () => setWidth(element.offsetWidth);\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [stateKey]);\n  return (\n    <span data-slot=\"button-feedback\" style={{ width }}>\n      <span\n        key={stateKey}\n        ref={content}\n        data-slot=\"button-feedback-label\"\n        data-enter={stateKey !== initialKey}\n      >\n        {children}\n      </span>\n    </span>\n  );\n}\n"},{"path":"ui/button-group.tsx","type":"registry:ui","target":"components/ui/button-group.tsx","content":"\"use client\";\n\nimport { useImperativeHandle, useRef, useState, type ComponentProps } from \"react\";\nimport { GlideHighlight, glideBox, type GlideBox } from \"./glide-highlight\";\nimport { cn } from \"./lib/cn\";\nimport \"./button-group.css\";\n\nexport function ButtonGroup({\n  ref,\n  className,\n  children,\n  ...props\n}: ComponentProps<\"div\">) {\n  const group = useRef<HTMLDivElement>(null);\n  useImperativeHandle(ref, () => group.current!, []);\n  const [box, setBox] = useState<GlideBox | null>(null);\n\n  function place(target: EventTarget | null) {\n    const button =\n      target instanceof Element\n        ? target.closest<HTMLElement>(\"[data-slot=button]\")\n        : null;\n    if (!button || !group.current?.contains(button)) return;\n    setBox(glideBox(button));\n  }\n\n  function rest(next: EventTarget | null) {\n    const button =\n      next instanceof Element\n        ? next.closest<HTMLElement>(\"[data-slot=button]\")\n        : null;\n    if (button && group.current?.contains(button)) return;\n    setBox((current) => (current ? { ...current, active: false } : null));\n  }\n\n  return (\n    <div\n      {...props}\n      ref={group}\n      role=\"group\"\n      data-slot=\"button-group\"\n      onPointerMove={(event) => place(event.target)}\n      onPointerLeave={() => rest(null)}\n      onFocus={(event) => place(event.target)}\n      onBlur={(event) => rest(event.relatedTarget)}\n      className={cn(\n        \"relative inline-flex max-w-full items-stretch gap-0.5 rounded-touch bg-raised p-[3px] shadow-raised [&>[data-slot=button]]:h-[calc(var(--control-height)-6px)] [&>[data-slot=button]]:rounded-[calc(var(--radius-touch)-3px)] [&>[data-slot=button][data-size=icon]]:w-[calc(var(--control-height)-6px)]\",\n        className,\n      )}\n    >\n      <GlideHighlight box={box} />\n      {children}\n    </div>\n  );\n}\n"},{"path":"ui/glide-highlight.tsx","type":"registry:ui","target":"components/ui/glide-highlight.tsx","content":"\"use client\";\n\nimport { useLayoutEffect, useState } from \"react\";\nimport \"./glide-highlight.css\";\n\nexport type GlideBox = {\n  active: boolean;\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n};\n\nexport function glideBox(target: HTMLElement): GlideBox {\n  return {\n    active: true,\n    left: target.offsetLeft,\n    top: target.offsetTop,\n    width: target.offsetWidth,\n    height: target.offsetHeight,\n  };\n}\n\nexport function useHighlightedGlide(\n  root: HTMLElement | null,\n  selector = \"[data-highlighted]\",\n  /** Attributes whose change can move the target, e.g. data-state for an open trigger. */\n  attributes: readonly string[] = [\"data-highlighted\"],\n) {\n  const [box, setBox] = useState<GlideBox | null>(null);\n\n  useLayoutEffect(() => {\n    const element = root;\n    if (!element) return;\n    const update = () => {\n      const target = element.querySelector<HTMLElement>(selector);\n      setBox((current) =>\n        target ? glideBox(target) : current ? { ...current, active: false } : null,\n      );\n    };\n    update();\n    const observer = new MutationObserver(update);\n    observer.observe(element, {\n      subtree: true,\n      attributes: true,\n      attributeFilter: [...attributes],\n    });\n    return () => observer.disconnect();\n    // The attribute list is fixed per call site.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [root, selector]);\n\n  return box;\n}\n\nexport function GlideHighlight({ box }: { box: GlideBox | null }) {\n  if (!box) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"glide-highlight\"\n      data-active={box.active}\n      style={{\n        width: box.width,\n        height: box.height,\n        transform: `translate(${box.left}px, ${box.top}px)`,\n      }}\n    />\n  );\n}\n"},{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"},{"path":"ui/toggle.tsx","type":"registry:ui","target":"components/ui/toggle.tsx","content":"\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type KeyboardEvent,\n} from \"react\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { ButtonGroup } from \"./button-group\";\nimport \"./toggle.css\";\n\nexport type ToggleProps = Omit<ButtonProps, \"variant\" | \"aria-pressed\"> & {\n  pressed?: boolean;\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n};\n\n/**\n * A button that stays pressed: bold, pin, mute. Pressed is recessed, the way a toggled tool\n * in a button group is, so \"on\" never looks like a selected tab. Give an icon-only toggle an\n * aria-label; the pressed state is announced by `aria-pressed`.\n */\nexport function Toggle({ pressed, defaultPressed = false, onPressedChange, onClick, ...props }: ToggleProps) {\n  const [own, setOwn] = useState(defaultPressed);\n  const on = pressed ?? own;\n  return (\n    <Button\n      variant=\"ghost\"\n      {...props}\n      data-toggle=\"\"\n      aria-pressed={on}\n      onClick={(event) => {\n        onClick?.(event);\n        if (event.defaultPrevented) return;\n        if (pressed === undefined) setOwn(!on);\n        onPressedChange?.(!on);\n      }}\n    />\n  );\n}\n\ntype GroupContext = {\n  type: \"single\" | \"multiple\";\n  values: string[];\n  disabled?: boolean;\n  toggle: (value: string) => void;\n};\nconst Context = createContext<GroupContext | null>(null);\n\nexport type ToggleGroupProps = Omit<ComponentProps<\"div\">, \"defaultValue\" | \"onChange\" | \"aria-label\"> & {\n  /** Single behaves like a radio group: one value, always one selected. Multiple lets any combination stay on. */\n  type?: \"single\" | \"multiple\";\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  /** Names the group for assistive technology, such as \"Text style\". */\n  label: string;\n  disabled?: boolean;\n};\n\n/**\n * A row of toggles in the raised Button Group shell. The group is one tab stop; arrow keys,\n * Home and End move between items (and select, in single mode). Arrow keys follow the\n * reading direction, so the group works right to left.\n */\nexport function ToggleGroup({\n  type = \"multiple\",\n  value,\n  defaultValue = [],\n  onValueChange,\n  label,\n  disabled,\n  onKeyDown,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  const [own, setOwn] = useState(defaultValue);\n  const values = value ?? own;\n  const root = useRef<HTMLDivElement>(null);\n\n  function set(next: string[]) {\n    if (value === undefined) setOwn(next);\n    onValueChange?.(next);\n  }\n  function toggle(item: string) {\n    if (type === \"single\") set([item]);\n    else set(values.includes(item) ? values.filter((entry) => entry !== item) : [...values, item]);\n  }\n\n  const items = () => Array.from(root.current?.querySelectorAll<HTMLElement>('[data-slot=\"button\"]:not(:disabled)') ?? []);\n  // One tab stop: the item last focused, else the selected one, else the first. It lives on the\n  // elements, so arrow keys and clicks can move it without re-rendering the group.\n  const lastStop = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    const all = items();\n    const stop =\n      all.find((item) => item === lastStop.current) ??\n      all.find((item) => item.getAttribute(\"aria-checked\") === \"true\" || item.getAttribute(\"aria-pressed\") === \"true\") ??\n      all[0];\n    for (const item of all) item.tabIndex = item === stop ? 0 : -1;\n  });\n\n  function keys(event: KeyboardEvent<HTMLDivElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !root.current) return;\n    const all = items();\n    const at = all.indexOf(document.activeElement as HTMLElement);\n    if (at < 0) return;\n    const rtl = getComputedStyle(root.current).direction === \"rtl\";\n    const forward = rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const back = rtl ? \"ArrowRight\" : \"ArrowLeft\";\n    let next: HTMLElement | undefined;\n    if (event.key === forward || event.key === \"ArrowDown\") next = all[(at + 1) % all.length];\n    else if (event.key === back || event.key === \"ArrowUp\") next = all[(at - 1 + all.length) % all.length];\n    else if (event.key === \"Home\") next = all[0];\n    else if (event.key === \"End\") next = all[all.length - 1];\n    if (!next) return;\n    event.preventDefault();\n    lastStop.current = next;\n    for (const item of all) item.tabIndex = item === next ? 0 : -1;\n    next.focus();\n    if (type === \"single\") next.click();\n  }\n\n  return (\n    <Context.Provider value={{ type, values, disabled, toggle }}>\n      <ButtonGroup\n        ref={root}\n        aria-label={label}\n        onKeyDown={keys}\n        onFocusCapture={(event) => {\n          // A click or Tab landing on an item makes it the tab stop too.\n          const target = event.target as HTMLElement;\n          if (items().includes(target)) {\n            lastStop.current = target;\n            for (const item of items()) item.tabIndex = item === target ? 0 : -1;\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </ButtonGroup>\n    </Context.Provider>\n  );\n}\n\nexport type ToggleGroupItemProps = Omit<ButtonProps, \"variant\" | \"value\"> & { value: string };\n\nexport function ToggleGroupItem({ value, onClick, disabled, ...props }: ToggleGroupItemProps) {\n  const group = useContext(Context);\n  if (!group) throw new Error(\"ToggleGroupItem must be inside a ToggleGroup.\");\n  const on = group.values.includes(value);\n  return (\n    <Button\n      variant=\"ghost\"\n      {...props}\n      {...(group.type === \"single\" ? { role: \"radio\", \"aria-checked\": on } : { \"aria-pressed\": on })}\n      disabled={group.disabled || disabled}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) group.toggle(value);\n      }}\n    />\n  );\n}\n"},{"path":"ui/shared/loading-indicator.css","type":"registry:file","target":"components/ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"loading-indicator\"] {\n    animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"loading-indicator\"] {\n      animation: none;\n    }\n  }\n}\n"},{"path":"ui/button.css","type":"registry:file","target":"components/ui/button.css","content":"/* button.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"button\"] {\n    transition-property: background-color, color, border-color;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-out);\n  }\n\n  /* Button material. Raised to press: a lit top edge and a small lift; the\n     press travels 1px down and swaps the lift for an inner shade. Only\n     translate animates (release on the settle curve); shadows swap. */\n  [data-slot=\"button\"] {\n    --b-bg: var(--raised);\n    --b-bg-hover: var(--raised-hover);\n    --b-bg-press: var(--raised-press);\n    --b-fg: var(--foreground);\n    --b-shadow: var(--shadow-raised);\n    --b-shadow-press: var(--shadow-raised-press);\n    background-color: var(--b-bg);\n    color: var(--b-fg);\n    box-shadow: var(--b-shadow);\n    transition-property: background-color, color, border-color, translate, scale;\n    transition-duration:\n      var(--duration-fast), var(--duration-fast), var(--duration-fast),\n      var(--duration-normal), var(--duration-normal);\n    transition-timing-function:\n      var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle),\n      var(--ease-settle);\n  }\n  [data-slot=\"button\"][data-variant=\"default\"] {\n    --b-bg: var(--primary);\n    --b-bg-hover: var(--primary-hover);\n    --b-bg-press: var(--primary-press);\n    --b-fg: var(--primary-foreground);\n    --b-shadow: var(--shadow-accent);\n    --b-shadow-press: var(--shadow-accent-press);\n  }\n  [data-slot=\"button\"][data-variant=\"destructive\"] {\n    --b-bg: var(--danger-fill);\n    --b-bg-hover: var(--danger-fill-hover);\n    --b-bg-press: var(--danger-fill-press);\n    --b-fg: var(--danger-fill-foreground);\n    --b-shadow: var(--shadow-danger);\n    --b-shadow-press: var(--shadow-danger-press);\n  }\n  [data-slot=\"button\"][data-variant=\"ghost\"] {\n    --b-bg: transparent;\n    --b-bg-hover: var(--muted);\n    --b-bg-press: var(--muted);\n    --b-fg: var(--muted-foreground);\n    --b-shadow: none;\n    --b-shadow-press: none;\n  }\n  @media (hover: hover) {\n    [data-slot=\"button\"]:hover {\n      background-color: var(--b-bg-hover);\n    }\n    [data-slot=\"button\"][data-variant=\"ghost\"]:hover {\n      color: var(--foreground);\n    }\n  }\n  [data-slot=\"button\"]:active:not(:disabled):not([aria-disabled=\"true\"]):not(\n      [aria-busy=\"true\"]\n    ) {\n    translate: 0 var(--motion-press-travel);\n    scale: var(--motion-press-scale);\n    background-color: var(--b-bg-press);\n    box-shadow: var(--b-shadow-press);\n    transition-duration:\n      var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms,\n      90ms;\n    transition-timing-function: var(--ease-out);\n  }\n  [data-slot=\"button\"]:is(:disabled, [aria-disabled=\"true\"]):not([aria-busy=\"true\"]) {\n    background-color: var(--sunken);\n    color: var(--muted-foreground);\n  }\n  [data-slot=\"button\"][data-variant=\"ghost\"]:is(:disabled, [aria-disabled=\"true\"]):not(\n      [aria-busy=\"true\"]\n    ) {\n    background-color: transparent;\n    box-shadow: none;\n  }\n  /* Loading keeps the exact width: the label stays in flow but invisible. */\n  [data-slot=\"button-label\"] {\n    display: inline-flex;\n    align-items: center;\n    gap: inherit;\n  }\n  /* Opacity, not visibility, so the label still names the button. */\n  [data-slot=\"button-label\"][data-hidden=\"true\"] {\n    opacity: 0;\n  }\n  [data-slot=\"button-busy\"] {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-items: center;\n  }\n  [data-slot=\"button-feedback\"] {\n    display: inline-flex;\n    align-items: center;\n    gap: inherit;\n    overflow: clip;\n    transition: width var(--duration-normal) var(--ease-out);\n  }\n  [data-slot=\"button-feedback-label\"] {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    gap: inherit;\n    width: max-content;\n  }\n  [data-slot=\"button-feedback-label\"][data-enter=\"true\"] {\n    animation: caliper-feedback-enter var(--duration-normal) var(--ease-out);\n  }\n\n  [data-slot=\"button\"][aria-busy=\"true\"] {\n    pointer-events: none;\n  }\n  [data-slot=\"button\"][data-action-phase=\"error\"] {\n    color: var(--danger);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"button\"],\n    [data-slot=\"button-feedback\"] {\n      transition: none;\n    }\n    [data-slot=\"button\"]:active:not(:disabled):not([aria-disabled=\"true\"]):not(\n        [aria-busy=\"true\"]\n      ) {\n      translate: none;\n    }\n    [data-slot=\"button-feedback-label\"],\n    [data-slot=\"button-feedback-label\"][data-enter=\"true\"] {\n      animation: none;\n    }\n  }\n\n  /* Toggle: pressed is recessed, as a toggled tool in a button group is. */\n  /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */\n  [data-slot=\"button\"][data-variant=\"ghost\"][data-toggle][aria-pressed=\"true\"] {\n    --b-bg: var(--raised-press);\n    --b-bg-hover: var(--raised-press);\n    --b-bg-press: var(--raised-press);\n    --b-fg: var(--foreground);\n    --b-shadow: var(--shadow-sunken);\n    --b-shadow-press: var(--shadow-sunken);\n  }\n}\n"},{"path":"ui/button-group.css","type":"registry:file","target":"components/ui/button-group.css","content":"/* button-group.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"button-group\"] > [data-slot=\"glide-highlight\"] {\n    top: 0;\n    border-radius: 8px;\n    transition:\n      transform var(--duration-normal) var(--ease-out),\n      width var(--duration-normal) var(--ease-out),\n      height var(--duration-normal) var(--ease-out),\n      opacity var(--duration-fast) var(--ease-out);\n  }\n}\n"},{"path":"ui/glide-highlight.css","type":"registry:file","target":"components/ui/glide-highlight.css","content":"/* glide-highlight.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  [data-slot=\"glide-highlight\"] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 0;\n    pointer-events: none;\n    border-radius: var(--radius-surface);\n    background: var(--muted);\n    opacity: 0;\n    transition:\n      transform var(--duration-travel) var(--ease-showcase),\n      width var(--duration-travel) var(--ease-showcase),\n      height var(--duration-travel) var(--ease-showcase),\n      opacity var(--duration-deliberate) var(--ease-out);\n  }\n  [data-slot=\"glide-highlight\"][data-active=\"true\"] {\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"glide-highlight\"] {\n      transition: none;\n    }\n    [data-slot=\"glide-highlight\"] {\n      transition:\n        transform 400ms var(--ease-showcase),\n        width 400ms var(--ease-showcase),\n        height 400ms var(--ease-showcase),\n        opacity 280ms var(--ease-out);\n    }\n  }\n}\n"},{"path":"ui/toggle.css","type":"registry:file","target":"components/ui/toggle.css","content":"/* toggle.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  /* Toolbar group: one raised shell, transparent segments, one hover\n     highlight. A toggled tool (aria-pressed) is recessed, the inverse of the\n     segmented control's raised plate, so \"on\" never looks like \"selected\". */\n  [data-slot=\"button-group\"] > [data-slot=\"button\"] {\n    position: relative;\n    z-index: 1;\n    --b-bg: transparent;\n    --b-bg-hover: transparent;\n    --b-bg-press: var(--muted);\n    --b-fg: var(--foreground);\n    --b-shadow: none;\n    --b-shadow-press: none;\n  }\n  [data-slot=\"button-group\"] > [data-slot=\"button\"][aria-pressed=\"true\"],\n  [data-slot=\"button-group\"] > [data-slot=\"button\"][aria-checked=\"true\"] {\n    /* --raised-press, not --sunken: in light mode --sunken is the shell's own #e9e9ec, so \"on\" vanished. */\n    --b-bg: var(--raised-press);\n    --b-bg-hover: var(--raised-press);\n    --b-bg-press: var(--raised-press);\n    --b-shadow: var(--shadow-sunken);\n    --b-shadow-press: var(--shadow-sunken);\n  }\n}\n"}],"categories":["actions"],"meta":{"tier":"free","license":"MIT","family":"actions","docs":"/docs/components/toggle"}}