{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "title": "Collapsible",
  "description": "Conteneur repliable avec dégradé de fondu et bouton afficher/masquer i18n.",
  "registryDependencies": [
    "@valraiso/icon"
  ],
  "files": [
    {
      "path": "registry/valraiso/collapsible/collapsible.astro",
      "content": "---\nimport Icon from \"../icon/icon.astro\";\nimport styles from \"./collapsible.module.css\";\n\n/**\n * Collapsible — zone de contenu tronquée en hauteur, dépliable via un bouton.\n *\n * Affiche le slot dans une hauteur limitée ; si le contenu déborde, un bouton\n * « Afficher / Masquer » avec dégradé permet de déplier. En mode CMS (événement\n * `ublo-mode-changed`), le contenu est toujours affiché en entier.\n *\n * Personnalisation :\n *  - `height` : hauteur tronquée en px (défaut 320).\n *  - `gradientColor` : couleur du dégradé de fondu (défaut \"#fff\").\n *  - `lang` : langue du libellé du bouton (défaut Astro.locals.lang ?? \"en\").\n *  - `class` : classe(s) ajoutée(s) au conteneur racine.\n *  - variables CSS : --ads-collapsible-* (voir collapsible.module.css).\n */\ninterface Props {\n  height?: number;\n  gradientColor?: string;\n  lang?: string;\n  class?: string;\n}\n\nconst i18n = {\n  fr: {\n    open: \"Afficher\",\n    close: \"Masquer\",\n  },\n  en: {\n    open: \"Open\",\n    close: \"Close\",\n  },\n  es: {\n    open: \"Abrir\",\n    close: \"Cerrar\",\n  },\n  ca: {\n    open: \"Veure\",\n    close: \"Amagar\",\n  },\n};\n\nconst localeLang = (Astro.locals as { lang?: string } | undefined)?.lang;\nconst {\n  height = 320,\n  gradientColor = \"#fff\",\n  lang = localeLang ?? \"en\",\n  class: className,\n} = Astro.props;\n\nconst messages = i18n[lang as keyof typeof i18n] ?? i18n.en;\nconst message = messages.open;\n---\n\n<div\n  class:list={[styles.collapsible, className]}\n  style={{\n    \"--gradient-color\": gradientColor,\n    height: `${height}px`,\n  }}\n  data-collapsible\n  data-height={`${height}px`}\n  data-lang={lang}\n>\n  <div class={styles.inner} data-collapsible-inner><slot /></div>\n  <button class={styles.button} type=\"button\" data-collapsible-button>\n    <span>{message}</span>\n    <Icon code=\"chevron-down\" />\n  </button>\n</div>\n\n<script>\n  const i18n = {\n    fr: {\n      open: \"Afficher\",\n      close: \"Masquer\",\n    },\n    en: {\n      open: \"Open\",\n      close: \"Close\",\n    },\n    es: {\n      open: \"Abrir\",\n      close: \"Cerrar\",\n    },\n    ca: {\n      open: \"Veure\",\n      close: \"Amagar\",\n    },\n  };\n\n  const collapsible =\n    document.querySelector<HTMLDivElement>(\"[data-collapsible]\");\n  const children = document.querySelector<HTMLDivElement>(\n    \"[data-collapsible-inner]\",\n  );\n  const button = document.querySelector<HTMLButtonElement>(\n    \"[data-collapsible-button]\",\n  );\n\n  if (collapsible && children && button) {\n    const initHeight = collapsible.dataset.height || \"auto\";\n    const lang = (collapsible.dataset.lang || \"en\") as keyof typeof i18n;\n    const messages = i18n[lang] ?? i18n.en;\n    const parentHeight = collapsible.offsetHeight;\n    const childrenHeight = children.offsetHeight;\n    const hasOverflow = childrenHeight > parentHeight;\n    const targetHeight = childrenHeight ? `${childrenHeight + 80}px` : \"0px\";\n    init(false);\n\n    window.addEventListener(\"ublo-mode-changed\", (e) => {\n      const { mode } = (e as CustomEvent).detail;\n      init(Boolean(mode));\n    });\n\n    function init(cmsMode: Boolean) {\n      if (!collapsible || !button) return;\n      if (cmsMode || !hasOverflow) {\n        delete collapsible.dataset.overflow;\n        button.style.display = \"none\";\n        collapsible.style.height = \"auto\";\n      } else {\n        button.setAttribute(\"aria-expanded\", \"false\");\n        collapsible.dataset.overflow = \"\";\n        collapsible.style.height = initHeight;\n      }\n    }\n\n    let opened = false;\n\n    button.addEventListener(\"click\", () => {\n      opened = !opened;\n      if (opened) {\n        collapsible.dataset.open = \"\";\n        button.setAttribute(\"aria-expanded\", \"true\");\n        const span = button.querySelector(\"span\");\n        if (span) span.innerText = messages.close;\n        collapsible.style.height = targetHeight;\n      } else {\n        delete collapsible.dataset.open;\n        button.setAttribute(\"aria-expanded\", \"false\");\n        const span = button.querySelector(\"span\");\n        if (span) span.innerText = messages.open;\n        collapsible.style.height = initHeight;\n      }\n    });\n  }\n</script>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/collapsible/collapsible.astro"
    },
    {
      "path": "registry/valraiso/collapsible/collapsible.module.css",
      "content": ".collapsible {\n  --gradient-color: #fff;\n\n  position: relative;\n  overflow: hidden;\n  transition: height var(--ads-collapsible-transition-duration, 320ms)\n    var(--ads-transition-easing, ease);\n}\n\n.inner {\n  /* Le contenu fourni via le slot. */\n}\n\n/* Dégradé de fondu en bas, visible uniquement quand le contenu déborde\n   et n'est pas encore déplié. */\n.collapsible[data-overflow]::after {\n  content: \"\";\n  position: absolute;\n  inset-inline: 0;\n  bottom: 0;\n  height: var(--ads-collapsible-fade-height, 80px);\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--gradient-color, #fff)\n  );\n  pointer-events: none;\n  opacity: 1;\n  transition: opacity var(--ads-collapsible-transition-duration, 320ms)\n    var(--ads-transition-easing, ease);\n}\n\n.collapsible[data-overflow][data-open]::after {\n  opacity: 0;\n}\n\n.button {\n  position: absolute;\n  left: 50%;\n  bottom: var(--ads-collapsible-button-offset, 8px);\n  transform: translateX(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ads-collapsible-button-gap, 6px);\n  padding: var(--ads-collapsible-button-padding, 6px 14px);\n  font-family: var(--ads-sans-serif-font, inherit);\n  font-size: var(--ads-collapsible-button-font-size, 14px);\n  color: var(--ads-collapsible-button-color, var(--ads-black, #262626));\n  background: var(--ads-collapsible-button-bg, var(--ads-white, #fff));\n  border: var(--ads-collapsible-button-border-width, 1px) solid\n    var(--ads-collapsible-button-border-color, var(--ads-grey-300, #d8d8d8));\n  border-radius: var(\n    --ads-collapsible-button-radius,\n    var(--ads-radius-400, 20px)\n  );\n  box-shadow: var(\n    --ads-collapsible-button-shadow,\n    var(--ads-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12))\n  );\n  cursor: pointer;\n  z-index: 1;\n}\n\n.button :global(svg) {\n  transition: transform var(--ads-collapsible-transition-duration, 320ms)\n    var(--ads-transition-easing, ease);\n}\n\n.collapsible[data-open] .button :global(svg) {\n  transform: rotate(180deg);\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/collapsible/collapsible.module.css"
    }
  ],
  "type": "registry:component"
}