{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown",
  "title": "Dropdown",
  "description": "Menu déroulant via l'API Popover + CSS Anchor Positioning (+ polyfill).",
  "files": [
    {
      "path": "registry/valraiso/dropdown/dropdown.astro",
      "content": "---\nimport styles from \"./dropdown.module.css\";\n\n/**\n * Dropdown — menu déroulant via l'API Popover, positionné par CSS Anchor\n * Positioning. Le menu s'ouvre sous le bouton avec repli à droite si besoin.\n *\n * Slots :\n *  - `button` : le contenu du bouton déclencheur.\n *  - `dropdown` : le contenu du menu (liens, actions…).\n *\n * Personnalisation :\n *  - `id` : identifiant unique (généré automatiquement sinon).\n *  - `class` : classe(s) ajoutée(s) au conteneur racine.\n *  - variables CSS : --ads-dropdown-bg, --ads-dropdown-radius,\n *    --ads-dropdown-shadow, --ads-dropdown-gap, --ads-dropdown-transition-duration,\n *    --ads-dropdown-z-index.\n */\ninterface Props {\n  id?: number | string;\n  class?: string;\n}\n\n// générer un id unique pour chaque dropdown pour éviter les conflits\nconst { id, class: className } = Astro.props;\nconst uniqueId = id || crypto.randomUUID();\n---\n\n<div class:list={[styles.dropdown, className]} data-dropdown>\n  <button\n    class={styles.button}\n    popovertarget={`menu-${uniqueId}`}\n    aria-haspopup=\"true\"\n    style={{ anchorName: `--button-${uniqueId}` }}\n  >\n    <slot name=\"button\" />\n  </button>\n  <nav\n    class={styles.menu}\n    id={`menu-${uniqueId}`}\n    popover=\"auto\"\n    role=\"menu\"\n    style={{ positionAnchor: `--button-${uniqueId}` }}\n  >\n    <slot name=\"dropdown\" />\n  </nav>\n</div>\n\n<script>\n  if (!(\"anchorName\" in document.documentElement.style)) {\n    const polyfill = \"https://unpkg.com/@oddbird/css-anchor-positioning\";\n    import(/* @vite-ignore */ polyfill);\n  }\n</script>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/dropdown/dropdown.astro"
    },
    {
      "path": "registry/valraiso/dropdown/dropdown.module.css",
      "content": ".dropdown {\n  display: inline-flex;\n}\n\n.button {\n  width: 100%;\n  height: 100%;\n}\n\n.menu {\n  overflow: visible;\n  margin: initial;\n  inset: auto;\n  top: anchor(bottom);\n  position-try-fallbacks: --ads-dropdown-left;\n  margin-top: var(--ads-dropdown-gap, 5px);\n  background: var(--ads-dropdown-bg, var(--ads-white, #fff));\n  box-shadow: var(\n    --ads-dropdown-shadow,\n    var(--ads-shadow-100, 0 2px 4px rgba(0, 0, 0, 0.08))\n  );\n  border-radius: var(--ads-dropdown-radius, var(--ads-radius-300, 12px));\n  opacity: 0;\n  justify-self: anchor-center;\n  z-index: var(--ads-dropdown-z-index, var(--ads-floating-z-index, 100));\n\n  transition:\n    display var(--ads-dropdown-transition-duration, 0.24s)\n      var(--ads-transition-easing, ease-in-out),\n    opacity var(--ads-dropdown-transition-duration, 0.24s)\n      var(--ads-transition-easing, ease-in-out),\n    overlay var(--ads-dropdown-transition-duration, 0.24s)\n      var(--ads-transition-easing, ease-in-out);\n  transition-behavior: allow-discrete;\n}\n\n.menu:popover-open {\n  opacity: 1;\n  display: block;\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n@position-try --ads-dropdown-left {\n  inset: unset;\n  top: anchor(bottom);\n  right: anchor(right);\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/dropdown/dropdown.module.css"
    }
  ],
  "type": "registry:component"
}