@zevra/ui 0.20.0 → 0.21.0

package/dist/css-inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,si9PAAsi9P,CAAA;AAEzk9P;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}
+{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,osiQAAosiQ,CAAA;AAEvuiQ;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,

package/react/content.tsx

@@ -247,21 +247,61 @@ export function Faq({ className, ...reste }: Div & { className?: string }) {
   return <div className={cx('zv-faq', className)} {...reste} />
 }
 
-export interface FaqItemProps extends Div {
+export interface FaqItemProps
+  extends Omit<HTMLAttributes<HTMLDetailsElement>, 'className' | 'title'> {
   question: ReactNode
+  /** Dépliée au chargement. Une par page au plus : si toutes le sont, le
+   *  repli ne sert plus à rien et la page redevient un mur. */
+  ouvert?: boolean
   className?: string
   children?: ReactNode
 }
 
-/** Rendu ouvert, sans repli : la réponse est le contenu, la cacher derrière
- *  un clic n'ajoute rien à cinq questions. Pour un vrai accordéon, c'est un
- *  `<details>` — et il n'existe pas de style pour lui dans le paquet. */
-export function FaqItem({ question, className, children, ...reste }: FaqItemProps) {
+/** Une question qui se replie. `<details>`, donc AUCUN JavaScript : elle
+ *  s'ouvre au clic, à Entrée et à Espace, elle est annoncée comme repliable,
+ *  et la recherche du navigateur (⌘F) l'ouvre toute seule pour montrer ce
+ *  qu'elle a trouvé.
+ *
+ *  ⚠️ La réponse reste DANS LE DOM quand la question est fermée — `details`
+ *  la masque, il ne la retire pas. C'est ce qui permet à une page de porter
+ *  un balisage `FAQPage` honnête : ce que le moteur lit est bien ce que le
+ *  visiteur peut ouvrir. Un accordéon qui démonte son contenu annoncerait
+ *  des réponses absentes.
+ *
+ *  Le chevron fait partie du composant, comme celui de `Fold` et la flèche
+ *  de `LinkArrow` : recopié à la main, il finit par diverger.
+ *
+ *  `question` accepte un TITRE (`<h3>Ma question</h3>`) : une FAQ de vitrine
+ *  veut ses questions dans le plan du document — c'est ce que lisent les
+ *  moteurs, et ce que parcourt un lecteur d'écran qui saute de titre en
+ *  titre. Le CSS lui retire ce que le navigateur lui met : le niveau reste
+ *  au balisage, l'apparence au système. */
+export function FaqItem({
+  question,
+  ouvert,
+  className,
+  children,
+  ...reste
+}: FaqItemProps) {
   return (
-    <div className={className} {...reste}>
-      <p className="zv-faq__q">{question}</p>
+    <details className={cx('zv-faq__item', className)} open={ouvert} {...reste}>
+      <summary className="zv-faq__q">
+        {question}
+        <svg
+          className="zv-faq__chevron"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+          aria-hidden="true"
+        >
+          <path d="M6.67 9.33 L12 14.67 L17.33 9.33" />
+        </svg>
+      </summary>
       <p className="zv-faq__a">{children}</p>
-    </div>
+    </details>
   )
 }