{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"select","type":"registry:ui","title":"Select","description":"Pick one option in the Text Field's look – icons and a second line per option, a gliding highlight, type-ahead and a list that never gets cut off","dependencies":[],"files":[{"path":"registry/select/select.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode, type Ref } from \"react\";\n\n/*\n * Select – a single self-contained file.\n * Pick one option from a list: a field in the Text Field's look that opens a list under it (or above, when there is\n * no room), options with an icon and a quiet second line, a check on the chosen one and a soft highlight that glides\n * to where the pointer or the arrow keys are. Typing a letter jumps to the option. The list sits in the top layer,\n * so a card's overflow never cuts it. The styles are injected below, so no extra files are needed.\n */\n\nexport type SelectOption = {\n  value: string;\n  label: string;\n  /** A quiet second line under the label */\n  description?: string;\n  /** A 16px icon before the label, e.g. an inline SVG */\n  icon?: ReactNode;\n  disabled?: boolean;\n};\n\nexport type SelectProps = {\n  options: SelectOption[];\n  /** The chosen value – makes it controlled */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string, option: SelectOption) => void;\n  /** Shown while nothing is chosen */\n  placeholder?: string;\n  /** Shown above the field and tied to it */\n  label?: ReactNode;\n  /** A quiet line under the field – the error takes its place while there is one */\n  hint?: ReactNode;\n  /** Marks the field invalid and shows this under it, in place of the hint */\n  error?: ReactNode;\n  /** \"Optional\" next to the label */\n  optional?: boolean;\n  /** sm 28 · md 32 · lg 36 high */\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  /** Sends the value with a form, through a hidden input */\n  name?: string;\n  required?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLButtonElement>;\n};\n\nexport function Select({\n  options,\n  value: valueProp,\n  defaultValue = null,\n  onChange,\n  placeholder = \"Choose…\",\n  label,\n  hint,\n  error,\n  optional = false,\n  size = \"md\",\n  disabled = false,\n  name,\n  required,\n  id,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n}: SelectProps) {\n  const autoId = useId();\n  const triggerId = id ?? `${autoId}-trigger`;\n  const listId = `${autoId}-list`;\n  const labelId = `${autoId}-label`;\n  const messageId = `${autoId}-message`;\n  const optionId = (i: number) => `${autoId}-option-${i}`;\n\n  const [own, setOwn] = useState<string | null>(defaultValue);\n  const value = valueProp !== undefined ? valueProp : own;\n  const chosen = options.find((o) => o.value === value) ?? null;\n\n  const [open, setOpen] = useState(false);\n  const [active, setActive] = useState(-1);\n  const [place, setPlace] = useState<{ top: number; left: number; width: number; maxHeight: number; up: boolean } | null>(null);\n  const [glow, setGlow] = useState<{ top: number; height: number } | null>(null);\n\n  const trigger = useRef<HTMLButtonElement | null>(null);\n  const list = useRef<HTMLDivElement | null>(null);\n  const typed = useRef({ text: \"\", at: 0 });\n\n  const invalid = Boolean(error);\n  const message = shows(error) ? error : shows(hint) ? hint : null;\n  const scale = SIZES.includes(size) ? size : \"md\";\n  const enabled = (i: number) => i >= 0 && i < options.length && !options[i].disabled;\n\n  const first = () => options.findIndex((o) => !o.disabled);\n  const last = () => {\n    for (let i = options.length - 1; i >= 0; i--) if (!options[i].disabled) return i;\n    return -1;\n  };\n  const step = (from: number, dir: 1 | -1) => {\n    for (let i = from + dir; i >= 0 && i < options.length; i += dir) if (!options[i].disabled) return i;\n    return from;\n  };\n\n  const show = (at?: number) => {\n    if (disabled || !options.length) return;\n    const chosenAt = options.findIndex((o) => o.value === value);\n    setActive(at ?? (enabled(chosenAt) ? chosenAt : first()));\n    setOpen(true);\n  };\n  const hide = (focusBack = true) => {\n    setOpen(false);\n    setGlow(null);\n    setPlace(null);\n    if (focusBack) trigger.current?.focus({ preventScroll: true });\n  };\n  const pick = (i: number) => {\n    if (!enabled(i)) return;\n    const o = options[i];\n    if (valueProp === undefined) setOwn(o.value);\n    if (o.value !== value) onChange?.(o.value, o);\n    hide();\n  };\n\n  // Where the list goes: under the field, or above it when there is more room there; as wide as the field\n  const measure = () => {\n    const t = trigger.current;\n    if (!t) return;\n    const r = t.getBoundingClientRect();\n    const gap = 4;\n    const edge = 8;\n    const below = window.innerHeight - r.bottom - gap - edge;\n    const above = r.top - gap - edge;\n    const want = Math.min(list.current?.scrollHeight ?? 280, 288);\n    const up = below < Math.min(want, 160) && above > below;\n    const width = Math.max(r.width, 180);\n    const left = Math.min(Math.max(edge, r.left), window.innerWidth - width - edge);\n    setPlace({ top: up ? r.top - gap : r.bottom + gap, left, width, maxHeight: Math.max(120, Math.min(288, up ? above : below)), up });\n  };\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const el = list.current;\n    // The top layer, so no overflow cuts it and no z-index fights it\n    if (el && \"showPopover\" in el && !el.matches(\":popover-open\")) el.showPopover();\n    measure();\n    const update = () => measure();\n    window.addEventListener(\"resize\", update);\n    window.addEventListener(\"scroll\", update, true);\n    return () => {\n      window.removeEventListener(\"resize\", update);\n      window.removeEventListener(\"scroll\", update, true);\n      if (el && \"hidePopover\" in el && el.matches(\":popover-open\")) el.hidePopover();\n    };\n  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // A press anywhere else closes it, without taking the focus back\n  useEffect(() => {\n    if (!open) return;\n    const down = (e: PointerEvent) => {\n      const target = e.target as Node;\n      if (trigger.current?.contains(target) || list.current?.contains(target)) return;\n      hide(false);\n    };\n    document.addEventListener(\"pointerdown\", down, true);\n    return () => document.removeEventListener(\"pointerdown\", down, true);\n  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // The highlight glides to the active option, and the list scrolls it into view\n  useLayoutEffect(() => {\n    if (!open || active < 0) return;\n    const row = list.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`);\n    if (!row) return;\n    setGlow({ top: row.offsetTop, height: row.offsetHeight });\n    row.scrollIntoView({ block: \"nearest\" });\n  }, [active, open, place]);\n\n  // Typing letters jumps to the next option that starts with them, like a native select\n  const typeahead = (key: string) => {\n    const now = Date.now();\n    typed.current.text = now - typed.current.at > 700 ? key : typed.current.text + key;\n    typed.current.at = now;\n    const q = typed.current.text.toLowerCase();\n    const start = open ? active : options.findIndex((o) => o.value === value);\n    const order = [...options.keys()].map((k) => (k + start + (q.length === 1 ? 1 : 0) + options.length) % options.length);\n    const hit = order.find((i) => enabled(i) && options[i].label.toLowerCase().startsWith(q));\n    if (hit === undefined) return;\n    if (open) setActive(hit);\n    else pick(hit);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    if (!open) {\n      if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Enter\" || e.key === \" \") {\n        e.preventDefault();\n        show();\n      } else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) typeahead(e.key);\n      return;\n    }\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setActive((a) => step(a, 1));\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setActive((a) => step(a, -1));\n        break;\n      case \"Home\":\n      case \"PageUp\":\n        e.preventDefault();\n        setActive(first());\n        break;\n      case \"End\":\n      case \"PageDown\":\n        e.preventDefault();\n        setActive(last());\n        break;\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        if (e.key === \" \" && Date.now() - typed.current.at < 700) typeahead(\" \");\n        else pick(active);\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        hide();\n        break;\n      case \"Tab\":\n        hide(false);\n        break;\n      default:\n        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) typeahead(e.key);\n    }\n  };\n\n  return (\n    <div\n      className={[\"ui-sel\", className].filter(Boolean).join(\" \")}\n      data-size={scale}\n      data-open={open || undefined}\n      data-invalid={invalid || undefined}\n      data-disabled={disabled || undefined}\n    >\n      {/* React 19 hoists this into <head> once, no matter how many selects render */}\n      <style href=\"ui-select\" precedence=\"default\">\n        {css}\n      </style>\n      {label != null && (\n        <div className=\"ui-sel__head\">\n          <label className=\"ui-sel__label\" id={labelId} htmlFor={triggerId}>\n            {label}\n          </label>\n          {optional && <span className=\"ui-sel__optional\">Optional</span>}\n        </div>\n      )}\n      <button\n        ref={(el) => {\n          trigger.current = el;\n          if (typeof ref === \"function\") ref(el);\n          else if (ref) ref.current = el;\n        }}\n        id={triggerId}\n        type=\"button\"\n        className=\"ui-sel__trigger\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listId}\n        aria-activedescendant={open && active >= 0 ? optionId(active) : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabel ? undefined : label != null ? `${labelId} ${triggerId}` : undefined}\n        aria-describedby={message ? messageId : undefined}\n        aria-invalid={invalid || undefined}\n        aria-required={required || undefined}\n        disabled={disabled}\n        onClick={() => (open ? hide() : show())}\n        onKeyDown={onKeyDown}\n      >\n        {chosen?.icon && (\n          <span className=\"ui-sel__icon\" aria-hidden=\"true\">\n            {chosen.icon}\n          </span>\n        )}\n        <span className=\"ui-sel__value\" data-empty={chosen ? undefined : \"\"} title={chosen?.label}>\n          {chosen ? chosen.label : placeholder}\n        </span>\n        <span className=\"ui-sel__chevron\" aria-hidden=\"true\">\n          <ChevronIcon />\n        </span>\n      </button>\n      {name && <input type=\"hidden\" name={name} value={value ?? \"\"} />}\n      {open && (\n        <div\n          ref={list}\n          id={listId}\n          className=\"ui-sel__list\"\n          role=\"listbox\"\n          aria-labelledby={label != null ? labelId : undefined}\n          aria-label={label == null ? ariaLabel ?? placeholder : undefined}\n          popover=\"manual\"\n          data-up={place?.up || undefined}\n          style={place ? { top: place.up ? undefined : place.top, bottom: place.up ? window.innerHeight - place.top : undefined, left: place.left, width: place.width, maxHeight: place.maxHeight } : undefined}\n          onPointerLeave={() => setActive(-1)}\n        >\n          {glow && <span className=\"ui-sel__glow\" aria-hidden=\"true\" style={{ transform: `translateY(${glow.top}px)`, height: glow.height }} />}\n          {options.map((o, i) => (\n            <div\n              key={o.value}\n              id={optionId(i)}\n              className=\"ui-sel__option\"\n              role=\"option\"\n              data-index={i}\n              aria-selected={o.value === value}\n              aria-disabled={o.disabled || undefined}\n              data-active={i === active || undefined}\n              onPointerMove={() => o.disabled || i === active || setActive(i)}\n              onPointerDown={(e) => e.preventDefault()}\n              onClick={() => pick(i)}\n            >\n              {o.icon && (\n                <span className=\"ui-sel__icon\" aria-hidden=\"true\">\n                  {o.icon}\n                </span>\n              )}\n              <span className=\"ui-sel__text\">\n                <span className=\"ui-sel__option-label\">{o.label}</span>\n                {o.description && <span className=\"ui-sel__option-hint\">{o.description}</span>}\n              </span>\n              <span className=\"ui-sel__check\" aria-hidden=\"true\">\n                {o.value === value && <CheckIcon />}\n              </span>\n            </div>\n          ))}\n        </div>\n      )}\n      {message && (\n        <p className=\"ui-sel__message\" id={messageId} key={shows(error) ? \"error\" : \"hint\"} aria-live={shows(error) ? \"polite\" : undefined}>\n          {message}\n        </p>\n      )}\n    </div>\n  );\n}\n\nconst SIZES = [\"sm\", \"md\", \"lg\"];\n/** Text or an element – not true, false, null or an empty string */\nconst shows = (v: ReactNode) => v != null && typeof v !== \"boolean\" && v !== \"\";\n\n/* Icons: Hugeicons Free (MIT) */\nfunction ChevronIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"m7 10 5 5 5-5\" />\n    </svg>\n  );\n}\nfunction CheckIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path className=\"ui-sel__tick\" d=\"M5 12.5 9.5 17 19 7\" pathLength={1} />\n    </svg>\n  );\n}\n\nconst css = /* css */ `\n/* Colors and motion as variables – override them on .ui-sel (see Theming in the docs) */\n.ui-sel {\n  --ui-sel-title: var(--aui-ink, #171717);\n  --ui-sel-ink: var(--aui-ink, #171717);\n  --ui-sel-subtle: var(--aui-muted, #8f8f8f);\n  --ui-sel-faint: var(--aui-placeholder, #b5b5b5);\n  --ui-sel-icon: var(--aui-muted, #8f8f8f);\n  --ui-sel-surface: var(--aui-surface, #ffffff);\n  --ui-sel-menu: var(--aui-surface, #ffffff);\n  --ui-sel-line: var(--aui-border, #e6e6e8);\n  --ui-sel-edge: var(--aui-border-strong, #d4d4d8);\n  --ui-sel-edge-open: var(--aui-border-strong, #b4b4bb);\n  --ui-sel-glow: #f4f4f5;\n  --ui-sel-readonly: #fafafa;\n  --ui-sel-shadow-menu: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 40px -12px rgba(0, 0, 0, 0.18), 0 4px 12px -4px rgba(0, 0, 0, 0.06);\n  --ui-sel-danger: var(--aui-danger, #c4320a);\n  --ui-sel-danger-edge: #ff8a7a;\n  --ui-sel-danger-wash: color-mix(in srgb, var(--aui-red, #f04438) 4%, transparent);\n  --ui-sel-focus: var(--aui-focus, rgba(0, 96, 226, 0.7));\n  --ui-sel-ease: cubic-bezier(0.22, 1, 0.36, 1);\n\n  --h: 36px;\n  --px: 12px;\n  --fs: 13.5px;\n  --radius: var(--aui-radius, 10px);\n\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  min-width: 0;\n  font-family: var(--aui-font, \"Inter\", \"InterVariable\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  font-size: 13.5px;\n  line-height: 20px;\n  color: var(--ui-sel-ink);\n  -webkit-font-smoothing: antialiased;\n}\n.ui-sel[data-size=\"sm\"] { --h: 32px; --px: 10px; --fs: 13px; --radius: calc(var(--aui-radius, 10px) - 1px); }\n.ui-sel[data-size=\"lg\"] { --h: 40px; --px: 14px; --fs: 14px; --radius: calc(var(--aui-radius, 10px) + 2px); }\n/* Touch screens: a comfortable tap height and 16px text */\n@media (pointer: coarse) {\n  .ui-sel { --fs: 16px; }\n  .ui-sel[data-size=\"sm\"] { --h: 36px; }\n  .ui-sel[data-size=\"md\"] { --h: 40px; }\n  .ui-sel[data-size=\"lg\"] { --h: 44px; }\n}\n\n.ui-sel__head { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 0 2px; }\n.ui-sel__label { min-width: 0; font-size: 13px; font-weight: 500; color: var(--ui-sel-title); overflow-wrap: anywhere; cursor: default; }\n.ui-sel__optional { flex: none; font-size: 12px; line-height: 16px; color: var(--ui-sel-subtle); }\n\n/* The field: the Text Field's look – white with a 1px gray edge that darkens on hover and while open */\n.ui-sel__trigger {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--h);\n  min-width: 0;\n  margin: 0;\n  padding: 0 calc(var(--px) - 2px) 0 var(--px);\n  border: 0;\n  border-radius: var(--radius);\n  background: var(--ui-sel-surface);\n  box-shadow: 0 0 0 1px var(--ui-sel-line), 0 1px 2px rgba(0, 0, 0, 0.04);\n  font: inherit;\n  font-size: var(--fs);\n  color: var(--ui-sel-ink);\n  text-align: start;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition: box-shadow 140ms ease, background-color 140ms ease;\n}\n.ui-sel__trigger:hover { box-shadow: 0 0 0 1px var(--ui-sel-edge), 0 1px 2px rgba(0, 0, 0, 0.04); }\n.ui-sel[data-open] .ui-sel__trigger { box-shadow: 0 0 0 1px var(--ui-sel-edge-open), 0 1px 2px rgba(0, 0, 0, 0.04); }\n.ui-sel__trigger:focus-visible { outline: 2px solid var(--ui-sel-focus); outline-offset: 2px; }\n.ui-sel[data-invalid] .ui-sel__trigger { background: var(--ui-sel-danger-wash); box-shadow: 0 0 0 1px var(--ui-sel-danger-edge), 0 1px 2px rgba(0, 0, 0, 0.04); }\n.ui-sel__trigger:disabled { background: var(--ui-sel-readonly); box-shadow: 0 0 0 1px var(--ui-sel-line); cursor: not-allowed; }\n.ui-sel[data-disabled] { opacity: 0.55; }\n\n.ui-sel__value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.ui-sel__value[data-empty] { color: var(--ui-sel-faint); }\n.ui-sel__icon { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--ui-sel-icon); }\n.ui-sel__icon > svg, .ui-sel__icon > img { display: block; width: 16px; height: 16px; }\n.ui-sel__chevron { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--ui-sel-icon); transition: transform 240ms var(--ui-sel-ease); }\n.ui-sel[data-open] .ui-sel__chevron { transform: rotate(180deg); }\n\n/* The list: a white card in the top layer, at the field's edge */\n.ui-sel__list {\n  position: fixed;\n  inset: auto;\n  z-index: 1000;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 5px;\n  border: 0;\n  border-radius: 14px;\n  background: var(--ui-sel-menu);\n  box-shadow: var(--ui-sel-shadow-menu);\n  color: var(--ui-sel-ink);\n  font: inherit;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  transform-origin: top center;\n  animation: ui-sel-in 200ms var(--ui-sel-ease) both;\n}\n.ui-sel__list[data-up] { transform-origin: bottom center; }\n.ui-sel__list::backdrop { display: none; }\n\n/* One soft highlight that glides between the rows */\n.ui-sel__glow {\n  position: absolute;\n  top: 0;\n  left: 5px;\n  right: 5px;\n  border-radius: 9px;\n  background: var(--ui-sel-glow);\n  pointer-events: none;\n  transition: transform 180ms var(--ui-sel-ease), height 180ms var(--ui-sel-ease);\n}\n\n.ui-sel__option {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 34px;\n  padding: 7px 10px;\n  box-sizing: border-box;\n  border-radius: 9px;\n  font-size: 13.5px;\n  line-height: 20px;\n  cursor: pointer;\n  user-select: none;\n}\n.ui-sel__option[aria-disabled] { color: var(--ui-sel-faint); cursor: default; }\n.ui-sel__option[aria-disabled] .ui-sel__icon { opacity: 0.5; }\n.ui-sel__text { display: grid; flex: 1; min-width: 0; }\n.ui-sel__option-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.ui-sel__option[aria-selected=\"true\"] .ui-sel__option-label { font-weight: 500; }\n.ui-sel__option-hint { overflow: hidden; font-size: 12px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-sel-subtle); }\n.ui-sel__check { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--ui-sel-ink); }\n.ui-sel__tick { stroke-dasharray: 1; animation: ui-sel-draw 280ms 40ms var(--ui-sel-ease) both; }\n@media (pointer: coarse) {\n  .ui-sel__option { min-height: 40px; font-size: 15px; }\n}\n\n.ui-sel__message { margin: 0; padding: 0 2px; font-size: 12.5px; line-height: 17px; color: var(--ui-sel-subtle); overflow-wrap: anywhere; animation: ui-sel-message 260ms var(--ui-sel-ease); }\n.ui-sel[data-invalid] .ui-sel__message { color: var(--ui-sel-danger); }\n\n@keyframes ui-sel-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n}\n.ui-sel__list[data-up] { animation-name: ui-sel-in-up; }\n@keyframes ui-sel-in-up {\n  from { opacity: 0; transform: translateY(4px) scale(0.98); }\n}\n@keyframes ui-sel-draw {\n  from { stroke-dashoffset: 1; }\n  to { stroke-dashoffset: 0; }\n}\n@keyframes ui-sel-message {\n  from { opacity: 0; transform: translateY(-3px); filter: blur(2px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ui-sel *, .ui-sel__list { animation-duration: 1ms !important; }\n  .ui-sel__glow, .ui-sel__chevron, .ui-sel__trigger { transition-duration: 1ms; }\n}\n\n/* Dark mode: follows a .dark class or data-theme=\"dark\" on any ancestor, e.g. <html> */\n:where(.dark, [data-theme=\"dark\"]) .ui-sel {\n  --ui-sel-title: var(--aui-ink, #ededed);\n  --ui-sel-ink: var(--aui-ink, #ededed);\n  --ui-sel-subtle: var(--aui-muted, #8b8b92);\n  --ui-sel-faint: var(--aui-placeholder, #5c5c63);\n  --ui-sel-icon: var(--aui-muted, #8b8b92);\n  --ui-sel-surface: var(--aui-surface, #19191b);\n  --ui-sel-menu: var(--aui-surface, #19191b);\n  --ui-sel-line: var(--aui-border, #2a2a2e);\n  --ui-sel-edge: var(--aui-border-strong, #3a3a40);\n  --ui-sel-edge-open: var(--aui-border-strong, #4e4e55);\n  --ui-sel-glow: #26262a;\n  --ui-sel-readonly: #151517;\n  --ui-sel-shadow-menu: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px -12px rgba(0, 0, 0, 0.6);\n  --ui-sel-danger: var(--aui-danger, #ff8a7a);\n  --ui-sel-danger-edge: color-mix(in srgb, var(--aui-red, #ff6b5f) 45%, transparent);\n  --ui-sel-danger-wash: color-mix(in srgb, var(--aui-red, #ff6b5f) 6%, transparent);\n  --ui-sel-focus: var(--aui-focus, rgba(77, 141, 255, 0.8));\n}\n`;\n"}]}