{
  "name": "SHAUGHV frosted dropdown",
  "required_for_cdn_sites": true,
  "style": "Frosted glass",
  "script": "https://cdn.shaughv.com/js/shaughv-dropdown.js?v=2026-10-21.2",
  "example": "https://cdn.shaughv.com/dropdowns",
  "companion_cursor": "https://cdn.shaughv.com/js/shaughv-cursor.js?v=2026-10-21.4",
  "site_defaults": "https://cdn.shaughv.com/brand/shaughv/site-defaults.json",
  "integration": {
    "html": "<label for=\"workspace\">Workspace</label>\n<select id=\"workspace\" name=\"workspace\"><option value=\"studio\">Design studio</option><option value=\"personal\">Personal projects</option></select>\n<script defer data-auto src=\"https://cdn.shaughv.com/js/shaughv-dropdown.js?v=2026-10-21.2\"></script>",
    "javascript": "const dropdowns = window.ShaughvDropdown.mount({ root: formElement });\n// Refresh after direct values or stylesheet-only theme changes:\ndropdowns.refresh();\n// On unmount:\ndropdowns.destroy();",
    "single_control": "ShaughvDropdown.enhance(selectElement) returns refresh()/destroy(), or null for native exceptions. Repeated enhancement returns the current instance.",
    "ownership": "Choose data-auto or a framework-owned mount. mount() owns only the instances it creates; avoid overlapping owners.",
    "theme_updates": "Ancestor class, style, data-theme, data-color-scheme and system color-scheme changes synchronize automatically. Refresh after stylesheet-only changes.",
    "forms": "Original select remains the form source of truth. Preserve name, values, FormData, required validation, disabled states, labels, reset, optgroups, and bubbling input/change events. Refresh after assigning select.value without an event.",
    "cleanup": "Destroy removes enhanced controls, menus and listeners, and restores select accessibility attributes. mount() observes additions/removals."
  },
  "css_properties": {
    "--dropdown-accent": "#5b8a5b",
    "--dropdown-foreground": "CanvasText",
    "--dropdown-surface": "Canvas",
    "--dropdown-space": "13px",
    "--dropdown-radius": "12px",
    "--dropdown-width": "auto",
    "--dropdown-max-height": "320px (pixel unit)",
    "--dropdown-font": "inherit from select",
    "--dropdown-font-size": "inherit from select"
  },
  "material": {
    "menu_blur_px": 24,
    "trigger_blur_px": 18,
    "menu_saturation": 1.6,
    "grain": "Fine decorative SVG turbulence",
    "trigger_radius": "Base radius + 4px",
    "menu_radius": "Base radius + 8px",
    "options": "Pill hover with a small selected check"
  },
  "keyboard": "Combobox keeps focus; aria-activedescendant names active option. Arrows, Home/End, typeahead, Enter/Space, Escape cancellation, and Tab commit are supported.",
  "touch": "Page-rendered controls with at least 44px targets; no custom cursor on touch.",
  "reduced_motion": "No reveal or chevron animation.",
  "forced_colors": "System colors and visible focus.",
  "positioning": "Manual popover top layer where available; viewport clamp/flip/scroll and modal support. Fixed-position fallback; avoid transformed modal ancestors without popover support.",
  "native_exceptions": [
    "multiple",
    "size > 1",
    "data-dropdown=\"native\" for OS-specific requirements",
    "JavaScript unavailable"
  ],
  "fallbacks": "Native select if script fails; opaque surface if backdrop-filter is unavailable. Use system pointer inside native option popups.",
  "validation_scope": "Browser DOM, keyboard, pointer, and native form tests. Assistive-technology acceptance must be checked in the consuming site."
}