@hgdc/docs 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/docs",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Modèle de site de HGDC Docs : documentation MDX (docs.json) construite avec Astro Starlight, recherche, versions, llms.txt et assistant.",
   "license": "UNLICENSED",
   "type": "module",

package/src/overrides/Search.astro

@@ -24,7 +24,7 @@ const assistant = assistantEnabled(data.config)
       <div class="hd-palette__field">
         <Icon name="search" />
         <input
-          type="search"
+          type="text"
           data-input
           placeholder="Rechercher dans la documentation"
           autocomplete="off"

package/src/overrides/ThemeToggle.astro

@@ -26,7 +26,7 @@ const choices = [
   ) : (
     <div class="hd-theme-choice" role="radiogroup" aria-label="Thème">
       {choices.map((choice) => (
-        <button type="button" role="radio" aria-checked="false" data-hd-theme={choice.value} aria-label={choice.label} title={choice.label}>
+        <button type="button" role="radio" aria-checked="false" data-hd-theme-choice={choice.value} aria-label={choice.label} title={choice.label}>
           <Icon name={choice.icon} size={16} />
         </button>
       ))}
@@ -60,8 +60,8 @@ const choices = [
     const dark = document.documentElement.dataset.theme === "dark"
     for (const button of document.querySelectorAll<HTMLButtonElement>("[data-hd-theme-toggle]"))
       button.setAttribute("aria-label", dark ? "Passer au thème clair" : "Passer au thème sombre")
-    for (const radio of document.querySelectorAll<HTMLButtonElement>("[data-hd-theme]")) {
-      const checked = radio.dataset.hdTheme === choice
+    for (const radio of document.querySelectorAll<HTMLButtonElement>("[data-hd-theme-choice]")) {
+      const checked = radio.dataset.hdThemeChoice === choice
       radio.setAttribute("aria-checked", String(checked))
       radio.tabIndex = checked ? 0 : -1
     }
@@ -70,8 +70,8 @@ const choices = [
   for (const button of document.querySelectorAll<HTMLButtonElement>("[data-hd-theme-toggle]"))
     button.addEventListener("click", () => apply(document.documentElement.dataset.theme === "dark" ? "light" : "dark"))
   for (const group of document.querySelectorAll<HTMLElement>(".hd-theme-choice")) {
-    const radios = [...group.querySelectorAll<HTMLButtonElement>("[data-hd-theme]")]
-    for (const radio of radios) radio.addEventListener("click", () => apply(radio.dataset.hdTheme!))
+    const radios = [...group.querySelectorAll<HTMLButtonElement>("[data-hd-theme-choice]")]
+    for (const radio of radios) radio.addEventListener("click", () => apply(radio.dataset.hdThemeChoice!))
     // Groupe de boutons radio : les flèches déplacent le choix, Tab sort du groupe.
     group.addEventListener("keydown", (event) => {
       const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0
@@ -79,7 +79,7 @@ const choices = [
       event.preventDefault()
       const index = radios.findIndex((radio) => radio.getAttribute("aria-checked") === "true")
       const next = radios[(index + step + radios.length) % radios.length]!
-      apply(next.dataset.hdTheme!)
+      apply(next.dataset.hdThemeChoice!)
       next.focus()
     })
   }

package/src/widget/search.ts

@@ -199,7 +199,11 @@ class Search extends HTMLElement {
   }
 
   private keydown(event: KeyboardEvent): void {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    // Échap ferme d'un coup, même avec du texte dans le champ.
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.dialog.close()
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
       event.preventDefault()
       this.highlight(this.active + (event.key === "ArrowDown" ? 1 : -1))
     } else if (event.key === "Enter") {