pattern-faq — the man page

The man-page FAQ: a command(section) head with the print-style dotted NAME leader over the accordion family (native details/summary — exclusive by default, questions compose as AccordionItem children or bare details), closing on a SEE ALSO line. The pattern owns only the framing; disclosure semantics, keyboard and SSR state belong to the accordion.

details/summary accordion exclusive by default NAME · SEE ALSO leaders

pattern-faq

The man-page framing over the accordion family: native details/summary pairs inside a bordered group — keyboard, semantics and SSR state are the platform's; the exclusive guard (the accordion's own) keeps one question open at a time.

jixoai-ui-faq (7)

NAME frequently asked questions, answered in the open

what is a pattern?

A composed section: atoms arranged into a landing-ready whole. Install it, own the source — npx jixoai-ui add pattern-faq and the folder is yours.

do patterns add new primitives?

Never. A pattern declares the atoms it composes and the registry closure installs them — a pattern that needs a new atom prop records a followup instead of patching the atom.

can I fork the paint?

Yes. Utilities you pass win by the layer law; the pattern css sits in @layer components under :where(), so your overrides always win.

why does the exclusive default matter?

FAQs read better one-open: the answer you opened stays the only thing moving. Pass exclusive={false} when your answers reference each other.

pattern-faq-usage.svelte svelte

<script lang="ts">
  import PatternFaq from '@ui/pattern-faq.svelte';
  import AccordionItem from '@ui/accordion/accordion-item.svelte';
</script>

<PatternFaq command="my-app-faq" section="7">
  <AccordionItem>
    {#snippet summary()}what is a pattern?{/snippet}
    <p>A composed section — atoms arranged into a landing-ready whole.</p>
  </AccordionItem>
  <!-- more items… -->
</PatternFaq>

composition

Authoring questions

The questions are your content: compose AccordionItem children (or bare details) inside the frame.

each question is an AccordionItem: the summary snippet is the question line, children are the answer — the same parts the accordion docs teach
command + section frame the page as a man entry (jixoai-ui-faq(7) — section 7 is miscellany, the honest FAQ home)
seeAlso is a snippet — compose your links; the default line cites jixoai-ui(1), patterns(7)
constraint (the accordion's own): no interactive elements inside a summary — per-row actions belong in the body

usage

Usage

One frame, authored questions — the accordion family carries the disclosure.

pattern-faq usage

<script lang="ts">
  import PatternFaq from '@ui/pattern-faq.svelte';
  import AccordionItem from '@ui/accordion/accordion-item.svelte';
</script>

<PatternFaq command="my-app-faq" section="7">
  <AccordionItem>
    {#snippet summary()}what is a pattern?{/snippet}
    <p>A composed section — atoms arranged into a landing-ready whole.</p>
  </AccordionItem>
  <!-- more items… -->
</PatternFaq>

axes

Universal props

The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. FIRST-TIME contract, all no-own: the man framing is a composition product — the size axis scales the article root, the Accordion rides the ambient chain (吃也供).

PatternFaq · universal props

jixoai-ui-faq (7)

NAME frequently asked questions, answered in the open

does the man page scale?

yes — the framing sizes in em, the accordion rides the ambient chain.

jixoai-ui-faq (7)

NAME frequently asked questions, answered in the open

and named steps?

medium/large resolve through the alias-ladder vars.

pattern-faq-universal.svelte svelte

<PatternFaq size={18} density="small">…</PatternFaq>

api

API

PatternFaq props.

Properties

Property	Type	Default	Description
children *	Snippet	—	The questions: AccordionItem children (or bare <details>).
command	string	'jixoai-ui-faq'	The man page's command name (head line).
section	string	'7'	The man section number (7 = miscellany).
summary	string	'frequently asked questions, answered in the open'	The NAME row's one-line description.
exclusive	boolean	true	One open at a time (the accordion guard, passed through).
seeAlso	Snippet	—	The SEE ALSO footer content — compose links here.
class	string	''	Class passthrough to the article root.

Universal props

Property	Type	Default	Description
size	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	the base scale — root font-size; parts size in em
shape	'round' \| 'scoop' \| 'bevel' \| 'notch' \| 'square' \| 'squircle' \| 'auto'	'auto' · ambient scope	corner geometry (CSS corner-shape; §14 degrade table)
radius	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	corner size; auto = the concentric broadcast (§3)
density	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	spacing/leading scale over the kernel channels (§4)
color	'primary' \| 'secondary' \| 'error' \| 'warn' \| 'success' \| 'info' \| 'auto' \| number \| string	'auto' · ambient scope	the hue axis of the fixed oklch primary system (§5)
theme	'light' \| 'dark' \| 'system' \| 'auto'	'auto' · ambient scope	light/dark profile; system = the JS-mutable global (§6)
elevation	'level-1' \| 'level0' \| 'level1' \| 'level2' \| 'level3' \| 'level4' \| 'level5' \| 'auto' \| number	'auto' · ambient scope	official M3 levels over the surface ladder (§7)
motion	'reduced' \| 'subtle' \| 'normal' \| 'expressive' \| 'auto' \| number	'auto' · ambient scope	intensity across the motion kernels (§8)