{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "track-highlight",
  "type": "registry:ui",
  "title": "Track highlight",
  "description": "Shared fluid hover, keyboard-focus, and selection highlight for custom lists and groups, with CSS anchors and a measured fallback.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/track-highlight-knobs.ts",
      "target": "@components/control-ui/knob-contracts/track-highlight-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/track-highlight.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const trackHighlightKnobs = [\n  \"--cui-track-highlight-radius\",\n  \"--cui-track-highlight-background\",\n  \"--cui-track-highlight-hover-background\",\n  \"--cui-track-highlight-ring-color\",\n  \"--cui-track-highlight-shadow\",\n  \"--cui-track-highlight-transition-duration\",\n] as const;\nexport type TrackHighlightKnobStyle = Partial<Record<(typeof trackHighlightKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/extensions/create-track-highlight.ts",
      "target": "@components/control-ui/extensions/create-track-highlight.ts",
      "type": "registry:component",
      "content": "export type TrackHighlightOptions = {\n  itemSelector: string;\n  activeSelector: string;\n  range?: boolean;\n  followHover?: boolean;\n};\n\ntype Box = { x: number; y: number; w: number; h: number };\ntype LayerState = { ready: boolean; last: Box };\n\nconst STABLE_EPSILON = 0.5;\n\nconst MAX_FOLLOW_FRAMES = 90;\n\nfunction isHighlightable(node: Element | null): node is HTMLElement {\n  return (\n    node instanceof HTMLElement &&\n    !node.matches(\n      ':disabled, [aria-disabled=\"true\"], [data-disabled]:not([data-disabled=\"false\"]), :has([role=\"checkbox\"][data-disabled])',\n    ) &&\n    node.checkVisibility()\n  );\n}\n\nexport function createTrackHighlight(\n  track: HTMLElement,\n  highlight: HTMLElement,\n  options: TrackHighlightOptions,\n  hoverHighlight?: HTMLElement,\n): () => void {\n  const { itemSelector, activeSelector, range = false, followHover = true } = options;\n  highlight.setAttribute(\"data-measured\", \"\");\n\n  let hovered: HTMLElement | null = null;\n  let focused: HTMLElement | null = null;\n  let rafId = 0;\n  let followFrames = 0;\n  const activeLayer: LayerState = { ready: false, last: { x: 0, y: 0, w: 0, h: 0 } };\n  const hoverLayer: LayerState = { ready: false, last: { x: 0, y: 0, w: 0, h: 0 } };\n\n  function belongsToTrack(item: HTMLElement): boolean {\n    return track.hasAttribute(\"data-track\") ? item.closest(\"[data-track]\") === track : track.contains(item);\n  }\n\n  function measureBox(target: HTMLElement, trackRect: DOMRect): Box {\n    const rect = target.getBoundingClientRect();\n    return {\n      x: rect.left - trackRect.left + track.scrollLeft - track.clientLeft,\n      y: rect.top - trackRect.top + track.scrollTop - track.clientTop,\n      w: rect.width,\n      h: rect.height,\n    };\n  }\n\n  function resolveActiveBox(trackRect: DOMRect): Box | null {\n    if (track.dataset.track === \"hover\") return null;\n    const actives = Array.from(track.querySelectorAll<HTMLElement>(activeSelector)).filter(\n      (item) => isHighlightable(item) && belongsToTrack(item),\n    );\n    const firstActive = actives[0];\n    if (!firstActive) return null;\n    if (!range) return measureBox(firstActive, trackRect);\n    let box = measureBox(firstActive, trackRect);\n    for (const active of actives.slice(1)) {\n      const b = measureBox(active, trackRect);\n      const left = Math.min(box.x, b.x);\n      const top = Math.min(box.y, b.y);\n      const right = Math.max(box.x + box.w, b.x + b.w);\n      const bottom = Math.max(box.y + box.h, b.y + b.h);\n      box = { x: left, y: top, w: right - left, h: bottom - top };\n    }\n    return box;\n  }\n\n  function resolveHoveredBox(trackRect: DOMRect): Box | null {\n    const target = focused ?? hovered;\n    if (!followHover || !target || !belongsToTrack(target) || !isHighlightable(target)) return null;\n    return measureBox(target, trackRect);\n  }\n\n  function place(element: HTMLElement, state: LayerState, next: Box | null, visible: boolean): boolean {\n    if (!next) {\n      element.removeAttribute(\"data-visible\");\n      return false;\n    }\n\n    const moved =\n      Math.abs(next.x - state.last.x) > STABLE_EPSILON ||\n      Math.abs(next.y - state.last.y) > STABLE_EPSILON ||\n      Math.abs(next.w - state.last.w) > STABLE_EPSILON ||\n      Math.abs(next.h - state.last.h) > STABLE_EPSILON;\n    state.last = next;\n\n    if (!state.ready) element.style.transition = \"none\";\n    element.style.left = `${next.x}px`;\n    element.style.top = `${next.y}px`;\n    element.style.right = `${track.clientWidth - (next.x + next.w)}px`;\n    element.style.bottom = `${track.clientHeight - (next.y + next.h)}px`;\n    element.toggleAttribute(\"data-visible\", visible);\n\n    if (!state.ready) {\n      void element.offsetWidth;\n      element.style.transition = \"\";\n      state.ready = true;\n    }\n    return moved;\n  }\n\n  function placeHighlightLayers(): boolean {\n    const trackRect = track.getBoundingClientRect();\n    const activeBox = resolveActiveBox(trackRect);\n    const hoveredBox = resolveHoveredBox(trackRect);\n    const target = focused ?? hovered;\n    const isAway = hoveredBox !== null && target !== null && !target.matches(activeSelector);\n    track.toggleAttribute(\"data-track-hover\", isAway);\n\n    const activeMoved = place(\n      highlight,\n      activeLayer,\n      hoverHighlight ? activeBox : (hoveredBox ?? activeBox),\n      Boolean(activeBox || hoveredBox),\n    );\n    if (!hoverHighlight) highlight.toggleAttribute(\"data-hover\", isAway);\n    const hoverMoved = hoverHighlight ? place(hoverHighlight, hoverLayer, hoveredBox ?? activeBox, Boolean(hoveredBox)) : false;\n\n    return activeMoved || hoverMoved;\n  }\n\n  function scheduleFollow(): void {\n    followFrames = 0;\n    if (rafId) return;\n    const step = () => {\n      rafId = 0;\n      const moved = placeHighlightLayers();\n      if (!moved || followFrames >= MAX_FOLLOW_FRAMES) return;\n      followFrames += 1;\n      rafId = requestAnimationFrame(step);\n    };\n    rafId = requestAnimationFrame(step);\n  }\n\n  const onPointerOver = (event: PointerEvent) => {\n    if (event.pointerType === \"touch\" || !(event.target instanceof Element)) return;\n    const item = event.target.closest<HTMLElement>(itemSelector);\n    const nextHovered = isHighlightable(item) && belongsToTrack(item) ? item : null;\n    if (nextHovered === hovered) return;\n    hovered = nextHovered;\n    scheduleFollow();\n  };\n\n  const onPointerLeave = () => {\n    if (!hovered) return;\n    hovered = null;\n    scheduleFollow();\n  };\n\n  const onFocusChange = () => {\n    const activeElement = document.activeElement;\n    const item = activeElement?.closest<HTMLElement>(itemSelector);\n    focused = item && belongsToTrack(item) && activeElement?.matches(\":focus-visible\") && isHighlightable(item) ? item : null;\n    scheduleFollow();\n  };\n\n  const onFocusOut = () => {\n    focused = null;\n    scheduleFollow();\n  };\n\n  if (followHover) {\n    if (matchMedia(\"(hover: hover)\").matches) {\n      hovered =\n        Array.from(track.querySelectorAll<HTMLElement>(itemSelector)).find(\n          (item) => item.matches(\":hover\") && isHighlightable(item) && belongsToTrack(item),\n        ) ?? null;\n    }\n    onFocusChange();\n    track.addEventListener(\"pointerover\", onPointerOver);\n    track.addEventListener(\"pointerleave\", onPointerLeave);\n    track.addEventListener(\"focusin\", onFocusChange);\n    track.addEventListener(\"focusout\", onFocusOut);\n  }\n\n  const resizeObserver = new ResizeObserver(() => scheduleFollow());\n  resizeObserver.observe(track);\n\n  const mutationObserver = new MutationObserver(() => scheduleFollow());\n  mutationObserver.observe(track, {\n    subtree: true,\n    childList: true,\n    attributes: true,\n    attributeFilter: [\n      \"data-selected\",\n      \"aria-selected\",\n      \"data-active\",\n      \"data-state\",\n      \"data-disabled\",\n      \"aria-disabled\",\n      \"disabled\",\n      \"data-track\",\n    ],\n  });\n\n  scheduleFollow();\n\n  return () => {\n    highlight.removeAttribute(\"data-measured\");\n    if (rafId) cancelAnimationFrame(rafId);\n    track.removeEventListener(\"pointerover\", onPointerOver);\n    track.removeEventListener(\"pointerleave\", onPointerLeave);\n    track.removeEventListener(\"focusin\", onFocusChange);\n    track.removeEventListener(\"focusout\", onFocusOut);\n    track.removeAttribute(\"data-track-hover\");\n    resizeObserver.disconnect();\n    mutationObserver.disconnect();\n    for (const element of [highlight, hoverHighlight]) {\n      if (!element) continue;\n      for (const property of [\"top\", \"left\", \"right\", \"bottom\"]) element.style.removeProperty(property);\n      element.removeAttribute(\"data-visible\");\n      element.removeAttribute(\"data-hover\");\n    }\n  };\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/extensions/supports-anchor-transitions.ts",
      "target": "@components/control-ui/extensions/supports-anchor-transitions.ts",
      "type": "registry:component",
      "content": "let anchorTransitionsSupported: boolean | undefined;\n\nexport function supportsAnchorTransitions(): boolean {\n  if (anchorTransitionsSupported !== undefined) return anchorTransitionsSupported;\n  if (!CSS.supports(\"(anchor-name: --_track-transition-probe) and (anchor-scope: --_track-transition-probe)\")) {\n    anchorTransitionsSupported = false;\n    return false;\n  }\n\n  const probeTrack = document.createElement(\"div\");\n  probeTrack.style.cssText = \"position:fixed;left:-10000px;top:0;visibility:hidden;anchor-scope:--_track-transition-probe\";\n  const initialAnchor = document.createElement(\"div\");\n  initialAnchor.style.cssText = \"position:absolute;top:0;width:1px;height:1px;anchor-name:--_track-transition-probe\";\n  const nextAnchor = document.createElement(\"div\");\n  nextAnchor.style.cssText = \"position:absolute;top:10px;width:1px;height:1px\";\n  const probeHighlight = document.createElement(\"div\");\n  probeHighlight.style.cssText = \"position:absolute;top:anchor(--_track-transition-probe top);width:1px;height:1px\";\n  probeHighlight.style.setProperty(\"transition\", \"top 1s linear\", \"important\");\n  probeTrack.append(initialAnchor, nextAnchor, probeHighlight);\n  document.body.append(probeTrack);\n  try {\n    void probeHighlight.offsetTop;\n    initialAnchor.style.anchorName = \"none\";\n    nextAnchor.style.anchorName = \"--_track-transition-probe\";\n    anchorTransitionsSupported = probeHighlight.getAnimations().length > 0;\n    return anchorTransitionsSupported;\n  } finally {\n    probeTrack.remove();\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/extensions/track-highlight.tsx",
      "target": "@components/control-ui/extensions/track-highlight.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport type { ComponentProps, CSSProperties, ReactNode, RefObject } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { supportsAnchorTransitions } from \"@/components/control-ui/extensions/supports-anchor-transitions\";\nimport type { TrackHighlightKnobStyle } from \"@/components/control-ui/knob-contracts/track-highlight-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nconst trackHighlightStructureClasses = \"pointer-events-none absolute -z-10\";\nconst defaultItemSelector = \"[data-track-item]\";\nconst defaultActiveSelector = '[data-track-item][data-active=\"true\"]';\nconst loadTrackHighlight = () => import(\"@/components/control-ui/extensions/create-track-highlight\");\n\nexport type TrackHighlightProps = Omit<ComponentProps<\"div\">, \"children\" | \"ref\" | \"style\"> & {\n  trackRef?: RefObject<HTMLElement | null>;\n  itemSelector?: string;\n  activeSelector?: string;\n  range?: boolean;\n  followHover?: boolean;\n  hoverClassName?: string;\n  children?: ReactNode;\n  style?: CSSProperties & TrackHighlightKnobStyle;\n};\n\nexport function TrackHighlight({\n  trackRef,\n  itemSelector = defaultItemSelector,\n  activeSelector = defaultActiveSelector,\n  range,\n  followHover,\n  hoverClassName,\n  className,\n  style,\n  children,\n  ...props\n}: TrackHighlightProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const hoverRef = useRef<HTMLDivElement>(null);\n  const layered = Boolean(hoverClassName);\n  const usesAnchorAnatomy =\n    !trackRef &&\n    !range &&\n    !layered &&\n    followHover !== false &&\n    itemSelector === defaultItemSelector &&\n    activeSelector === defaultActiveSelector;\n\n  useEffect(() => {\n    const highlight = ref.current;\n    const track = trackRef?.current ?? highlight?.parentElement;\n    if (!track || !highlight) return;\n    const usesAnchors = usesAnchorAnatomy && track.hasAttribute(\"data-track\") && supportsAnchorTransitions();\n    if (usesAnchors) return;\n    const hoverHighlight = layered ? (hoverRef.current ?? undefined) : undefined;\n    let cancelled = false;\n    let dispose: (() => void) | undefined;\n    loadTrackHighlight().then(({ createTrackHighlight }) => {\n      if (cancelled) return;\n      dispose = createTrackHighlight(track, highlight, { itemSelector, activeSelector, range, followHover }, hoverHighlight);\n    });\n    return () => {\n      cancelled = true;\n      dispose?.();\n    };\n  }, [trackRef, itemSelector, activeSelector, range, followHover, layered, usesAnchorAnatomy]);\n\n  return (\n    <>\n      <div\n        {...props}\n        ref={ref}\n        data-control-ui=\"track-highlight\"\n        data-control-family=\"track-highlight\"\n        data-slot=\"root\"\n        data-positioning={usesAnchorAnatomy ? \"anchor\" : undefined}\n        aria-hidden\n        style={style}\n        className={cn(trackHighlightStructureClasses, className)}\n      >\n        {children}\n      </div>\n      {layered ? (\n        <div\n          ref={hoverRef}\n          data-control-ui=\"track-highlight\"\n          data-control-family=\"track-highlight\"\n          data-slot=\"hover\"\n          aria-hidden\n          style={style}\n          className={cn(trackHighlightStructureClasses, hoverClassName)}\n        />\n      ) : null}\n    </>\n  );\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/track-highlight.css",
      "target": "@components/control-ui/styles/recipes/track-highlight.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"track-highlight\"][data-slot=\"root\"]),\n  :where([data-control-family=\"track-highlight\"][data-slot=\"hover\"]) {\n    --_track-highlight-opacity: 0;\n    border-radius: var(--cui-track-highlight-radius);\n    opacity: var(--_track-highlight-opacity);\n    transition-property: top, left, right, bottom, width, height, opacity;\n    transition-duration: var(--cui-track-highlight-transition-duration);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where([data-control-family=\"track-highlight\"][data-slot=\"root\"]) {\n    --cui-track-highlight-background: var(--card);\n    --cui-track-highlight-hover-background: color-mix(in oklab, var(--card) 92%, var(--foreground) 8%);\n    --cui-track-highlight-radius: var(--radius-popup-item);\n    --cui-track-highlight-ring-color: oklch(from var(--foreground) l c h / 0.05);\n    --cui-track-highlight-shadow: var(--shadow-sm);\n    --cui-track-highlight-transition-duration: var(--duration-fast);\n    --_track-highlight-fill: var(--cui-track-highlight-background);\n    background: var(--_track-highlight-fill);\n    box-shadow:\n      0 0 0 1px var(--cui-track-highlight-ring-color),\n      var(--cui-track-highlight-shadow);\n  }\n\n  :where([data-control-family=\"track-highlight\"][data-slot=\"root\"][data-hover]),\n  :where([data-track=\"hover\"] > [data-control-family=\"track-highlight\"][data-slot=\"root\"]) {\n    --_track-highlight-fill: var(--cui-track-highlight-hover-background);\n    --cui-track-highlight-ring-color: transparent;\n    --cui-track-highlight-shadow: none;\n  }\n\n  :where([data-control-family=\"track-highlight\"][data-slot=\"hover\"]) {\n    background: var(--cui-track-highlight-hover-background);\n  }\n\n  :where([data-track=\"hover\"] > [data-control-family=\"track-highlight\"]),\n  :where([data-control-family=\"track-highlight\"][data-slot=\"hover\"]) {\n    transition: none;\n  }\n\n  :where([data-control-family=\"track-highlight\"][data-slot=\"root\"][data-visible]),\n  :where([data-control-family=\"track-highlight\"][data-slot=\"hover\"][data-visible]) {\n    --_track-highlight-opacity: 1;\n  }\n\n  :where(\n    [data-track=\"hover\"]:is([data-control-family=\"button-group\"], [data-control-family=\"button\"][data-slot=\"group\"])\n      > [data-control-family=\"track-highlight\"]\n  ) {\n    --cui-track-highlight-hover-background: oklch(from var(--foreground) l c h / 0.06);\n  }\n\n  :where([data-track]:has(> [data-control-family=\"button\"][data-track-item]) > [data-control-family=\"track-highlight\"]),\n  :where(\n    [data-track]:is(\n        [data-control-family=\"button-group\"],\n        [data-control-family=\"button\"][data-slot=\"group\"],\n        [data-control-family=\"checkbox-group\"]\n      )\n      > [data-control-family=\"track-highlight\"]\n  ) {\n    --cui-track-highlight-radius: var(--radius-control);\n  }\n\n  :where([data-control-family=\"button-group\"][data-track=\"hover\"]) {\n    --_button-group-leading-cap: 0;\n    --_button-group-trailing-cap: 0;\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"button-group\"][data-track=\"hover\"]:has(> :first-child:hover)) {\n      --_button-group-leading-cap: 1;\n    }\n\n    :where(\n        [data-control-family=\"button-group\"][data-track=\"hover\"]:has(\n          > :nth-last-child(1 of :not([data-control-family=\"track-highlight\"])):hover\n        )\n      ) {\n      --_button-group-trailing-cap: 1;\n    }\n  }\n\n  :where([data-control-family=\"button-group\"][data-track=\"hover\"]:has(:focus-visible)) {\n    --_button-group-leading-cap: 0;\n    --_button-group-trailing-cap: 0;\n  }\n\n  :where([data-control-family=\"button-group\"][data-track=\"hover\"]:has(> :first-child:is(:focus-visible, :has(:focus-visible)))) {\n    --_button-group-leading-cap: 1;\n  }\n\n  :where(\n    [data-control-family=\"button-group\"][data-track=\"hover\"]:has(\n      > :nth-last-child(1 of :not([data-control-family=\"track-highlight\"])):is(:focus-visible, :has(:focus-visible))\n    )\n  ) {\n    --_button-group-trailing-cap: 1;\n  }\n\n  :where(\n    [data-control-family=\"button-group\"][data-track=\"hover\"][data-orientation=\"horizontal\"] > [data-control-family=\"track-highlight\"]\n  ) {\n    border-start-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));\n    border-end-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));\n    border-start-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));\n    border-end-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));\n  }\n\n  :where([data-control-family=\"button-group\"][data-track=\"hover\"][data-orientation=\"vertical\"] > [data-control-family=\"track-highlight\"]) {\n    border-start-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));\n    border-start-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-leading-cap));\n    border-end-start-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));\n    border-end-end-radius: calc(var(--cui-track-highlight-radius) * var(--_button-group-trailing-cap));\n  }\n\n  @supports ((anchor-name: --cui-track) and (anchor-scope: --cui-track)) {\n    :where([data-track]:has(> [data-control-family=\"track-highlight\"])) {\n      anchor-scope: --cui-track-active, --cui-track-hover, --cui-track-focus;\n      --_track-anchor: --cui-track-active;\n      --_track-display: none;\n    }\n\n    :where(\n        [data-track=\"slide\"]:has(> [data-control-family=\"track-highlight\"]):has(\n          [data-track-item][data-active=\"true\"]:not(:disabled, [aria-disabled=\"true\"], [data-disabled])\n        )\n      ) {\n      --_track-display: block;\n    }\n\n    :where([data-track=\"hover\"]:has(> [data-control-family=\"track-highlight\"])) {\n      --_track-anchor: --cui-track-idle;\n    }\n\n    :where(\n        [data-track]:has(> [data-control-family=\"track-highlight\"])\n          [data-track-item][data-active=\"true\"]:not(:disabled, [aria-disabled=\"true\"], [data-disabled])\n      ) {\n      anchor-name: --cui-track-active;\n    }\n\n    :where([data-track] > [data-control-family=\"track-highlight\"][data-positioning=\"anchor\"]:not([data-measured])) {\n      display: var(--_track-display);\n      position-anchor: var(--_track-anchor);\n      top: anchor(top, 0px);\n      width: anchor-size(width, 0px);\n      height: anchor-size(height, 0px);\n      left: anchor(left, 0px);\n      --_track-highlight-opacity: 1;\n\n      @starting-style {\n        opacity: 0;\n      }\n    }\n\n    @media (hover: hover) {\n      :where(\n          [data-track]:has(> [data-control-family=\"track-highlight\"])\n            [data-track-item]:hover:not(:disabled, [aria-disabled=\"true\"], [data-disabled], :has([role=\"checkbox\"][data-disabled]))\n        ) {\n        anchor-name: --cui-track-hover;\n      }\n\n      :where(\n          [data-track]:has(> [data-control-family=\"track-highlight\"]):has(\n            [data-track-item]:hover:not(:disabled, [aria-disabled=\"true\"], [data-disabled])\n          ):not(:has([data-track-item]:hover [role=\"checkbox\"][data-disabled])):not(:has([data-track] [data-track-item]:hover))\n        ) {\n        --_track-anchor: --cui-track-hover;\n        --_track-display: block;\n      }\n\n      :where(\n          [data-track=\"slide\"]:has(\n              [data-track-item]:hover:not([data-active=\"true\"], :disabled, [aria-disabled=\"true\"], [data-disabled])\n            ):not(:has(:focus-visible, [data-track] [data-track-item]:hover))\n            > [data-control-family=\"track-highlight\"][data-positioning=\"anchor\"]:not([data-measured])\n        ) {\n        --_track-highlight-fill: var(--cui-track-highlight-hover-background);\n        --cui-track-highlight-ring-color: transparent;\n        --cui-track-highlight-shadow: none;\n      }\n    }\n\n    :where(\n        [data-track]:has(> [data-control-family=\"track-highlight\"])\n          [data-track-item]:is(:focus-visible, :has(:focus-visible)):not(\n            :disabled,\n            [aria-disabled=\"true\"],\n            [data-disabled],\n            :has([role=\"checkbox\"][data-disabled])\n          )\n      ) {\n      anchor-name: --cui-track-focus;\n    }\n\n    :where(\n        [data-track]:has(> [data-control-family=\"track-highlight\"]):has(\n          [data-track-item]:focus-visible,\n          [data-track-item] :focus-visible\n        ):not(:has([data-track] :focus-visible))\n      ) {\n      --_track-anchor: --cui-track-focus;\n      --_track-display: block;\n    }\n\n    :where(\n        [data-track=\"slide\"]:has(\n            [data-track-item]:not([data-active=\"true\"]):focus-visible,\n            [data-track-item]:not([data-active=\"true\"]) :focus-visible\n          ):not(:has([data-track] :focus-visible))\n          > [data-control-family=\"track-highlight\"][data-positioning=\"anchor\"]:not([data-measured])\n      ) {\n      --_track-highlight-fill: var(--cui-track-highlight-hover-background);\n      --cui-track-highlight-ring-color: transparent;\n      --cui-track-highlight-shadow: none;\n    }\n  }\n}\n\n@property --cui-track-highlight-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-track-highlight-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n@property --cui-track-highlight-hover-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-track-highlight-ring-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-track-highlight-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-track-highlight-transition-duration {\n  syntax: \"<time>\";\n  inherits: true;\n  initial-value: 0s;\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/track-highlight.css\"": {}
  }
}