lion-make 0.1.0 → 0.3.0

package/guidelines/composition/zones.md

@@ -4,24 +4,62 @@ This is the authoritative placement table for the lion-make design system. Every
 
 ## Zone Placement Table
 
-| Zone | Template | Subsections | Allowed Content Types |
+| Zone | Template | Allowed Content Types | Components |
 |---|---|---|---|
-| **Header** | Both | Corporate Universal Header, Global Header Bar, Navigation (Underwriter, Product, Top Nav) | Header content types only |
-| **Hero** | Both | — | Hero content types only |
-| **Primary Column** | Both | — | General content types |
-| **Sideburn** | Sideburn only | — | General content types (subset) |
-| **Outro** | Sideburn only | — | General content types (subset) |
-| **Anklet** | Both | — | Quick links only (fixed structure) |
-| **Footer** | Both | Disclaimer, Disclosure, Compliance | Footer content types only |
+| **Header** | Both | Call to Action, Logo, Product, Section Navigation, Section Title, Top Level Navigation, Underwriter | `HeaderCTA`, `HeaderLogo`, `HeaderProduct`, `HeaderSectionNavigation`, `HeaderSectionTitle`, `TopLevelNavigation`, `HeaderUnderwriter` |
+| **Hero** | Both | CTA Hero Block, Hero Block, Multi Hero, Not Available Hero Block | `CTAHeroBlock`, `HeroBlock`, `MultiHero`, `NotAvailableHeroBlock` |
+| **Primary Column** | Both | All 37 general content types | see [general/overview.md](../content-types/general/overview.md) |
+| **Sideburn** | Sideburn only | Subset of general content types | see [general/overview.md](../content-types/general/overview.md) |
+| **Outro** | Sideburn only | Subset of general content types | see [general/overview.md](../content-types/general/overview.md) |
+| **Anklet** | Both | Quick links only | `Anklet` |
+| **Footer** | Both | Links & Social, Disclaimers, Disclosures, Disclosure Toggle Open, Compliance, Legal Links | `LinksAndSocial`, `Disclaimer`, `Disclosure`, `DisclosureToggleOpen`, `ComplianceBlock`, `LegalLinks` |
+
+## Header Zone Detail
+
+The Header zone uses two structural bars as containers. Content types are placed inside them:
+
+| Structural bar | Accepts |
+|---|---|
+| `CorporateUniversalHeader` | `HeaderLogo`, `HeaderUnderwriter` |
+| `GlobalHeaderBar` | `TopLevelNavigation`, `HeaderCTA`, `HeaderProduct`, `HeaderSectionTitle` |
+| Below `GlobalHeaderBar` | `HeaderSectionNavigation` |
+
+Structural bars (`CorporateUniversalHeader`, `GlobalHeaderBar`) are not content types — they are layout containers for the Header zone.
+
+## Hero Zone Detail
+
+| Content type | Component | When to use |
+|---|---|---|
+| CTA Hero Block | `CTAHeroBlock` | Primary conversion goal (product DLPs, campaigns) |
+| Hero Block | `HeroBlock` | Informational (section hubs, About, resource pages) |
+| Multi Hero | `MultiHero` | Multiple products/messages (home page, category hubs) |
+| Not Available Hero Block | `NotAvailableHeroBlock` | Product unavailable in user's state (facet-triggered) |
+
+Only one hero content type per page. Do not stack multiple hero types.
+
+## Footer Zone Detail
+
+Footer content types have a mandatory render order:
+
+| Order | Content type | Component | Notes |
+|---|---|---|---|
+| 1 | Links & Social | `LinksAndSocial` | Nav columns + social icons; first in footer |
+| 2 | Disclaimers | `Disclaimer` | Static legal copy; always visible |
+| 3 | Disclosures | `Disclosure` | Toggle starts collapsed |
+| 3 | Disclosure Toggle Open | `DisclosureToggleOpen` | Toggle starts expanded (required-visible) |
+| 4 | Compliance | `ComplianceBlock` | Item Number / Material ID |
+| 5 | Legal Links | `LegalLinks` | Privacy, Terms, Copyright; last in footer |
+
+**Anklet** sits in its own zone between General Content and Footer — it is not inside `<Section zone="footer">`.
 
 ## Zone Rules
 
 - A **header content type** can only be placed in the Header zone.
-- A **hero content type** can only be placed in the Hero zone.
+- A **hero content type** can only be placed in the Hero zone. Only one hero per page.
 - A **general content type** can only be placed in the Primary Column, Sideburn, or Outro zones.
-- The **Anklet** zone accepts only the Anklet quick-links structure — no other content types.
+- The **Anklet** zone accepts only the `Anklet` component — no other content types.
 - A **footer content type** can only be placed in the Footer zone.
-- The **Sideburn** and **Outro** zones only exist in the Sideburn template. They are not available in the Forehead template.
+- The **Sideburn** and **Outro** zones only exist in the Sideburn template.
 
 ## Template-to-Zone Availability
 

package/guidelines/content-types/footer/anklet.md

@@ -0,0 +1,62 @@
+# Anklet
+
+**Zone:** Anklet — its own dedicated zone directly above the Footer zone. Not part of the Footer zone itself.
+
+> **Note on placement:** Mondrian documents the Anklet under the "Footer" section of the guide, but architecturally it occupies its own zone (`data-zone="anklet"`) between General Content and the Footer. It is not nested inside a `Section zone="footer"`.
+
+## Description
+
+A full-width quick-links bar anchored between the General Content zone and the Footer. Provides fast access to high-priority destinations — typically product lines, service links, or audience entry points — without requiring the user to navigate through the footer columns.
+
+The Anklet structure is fixed: a horizontal list of text links. No headings, no columns, no icons.
+
+## Component
+
+`Anklet` — located in `src/components/layout/` (not footer), exported from `lion-make`.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `links` | `AnkletLink[]` | Yes | Quick link items |
+| `className` | `string` | No | Additional CSS class |
+
+### AnkletLink
+
+| Prop | Type | Description |
+|---|---|---|
+| `label` | `string` | Link text |
+| `href` | `string` | Destination URL |
+
+## Usage
+
+```tsx
+import { Anklet } from 'lion-make'
+
+<Anklet
+  links={[
+    { label: 'Life Insurance', href: '/life' },
+    { label: 'Medicare', href: '/medicare' },
+    { label: 'Supplemental Health', href: '/supplemental' },
+    { label: 'Dental & Vision', href: '/dental-vision' },
+    { label: 'Find an Agent', href: '/agent-finder' },
+  ]}
+/>
+```
+
+## Page Structure Position
+
+```
+<Section zone="header"> … </Section>
+<Section zone="hero"> … </Section>
+[General Content zone]
+<Anklet links={…} />          ← here, outside any Section
+<Section zone="footer"> … </Section>
+```
+
+## Design Tokens
+
+- Background: `var(--color-gray-lightest)` or `var(--color-brand)`
+- Link: `var(--h5-font-size)`, `var(--font-weight-400)`, `var(--color-text)` or `var(--color-white)`
+- Border top: `var(--border-width-thin)` solid `var(--color-line)`
+- Padding: `var(--padding-base-vertical)` vertical, `var(--edge-padding)` horizontal

package/guidelines/content-types/footer/compliance.md

@@ -0,0 +1,49 @@
+# Compliance
+
+**Zone:** Footer only — Compliance subsection.
+
+## Description
+
+Displays required compliance identifiers and associated legal copy. This is distinct from the `Disclaimers` content type (which contains free-text legal statements) — `Compliance` is specifically for structured identifiers: Item Numbers and Material IDs as mandated by regulatory and compliance teams.
+
+Required on all regulated product pages (life, Medicare, supplemental health). The exact identifiers and surrounding copy are determined by the compliance team and the product's filing jurisdiction.
+
+## Component
+
+`ComplianceBlock`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `itemNumber` | `string` | No | Compliance Item Number (e.g., `'M37594_XXXXXX'`) |
+| `materialId` | `string` | No | Material ID (primarily used for Medicare Advantage / PDP) |
+| `text` | `string` | No | Required legal copy accompanying the identifiers |
+| `className` | `string` | No | Additional CSS class |
+
+At least one of `itemNumber`, `materialId`, or `text` must be present.
+
+## Usage
+
+```tsx
+import { Section, ComplianceBlock } from 'lion-make'
+
+<Section zone="footer">
+  <ComplianceBlock
+    itemNumber="M37594_0524"
+    text="For more information about Mutual of Omaha's privacy practices, visit mutualofomaha.com/privacy."
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only, always last in the footer — below `Disclaimers` and `Disclosures`.
+- Consult compliance team for required identifiers per product and per state.
+- Do not place on pages without a regulated product.
+
+## Design Tokens
+
+- Text: `var(--h6-font-size)`, `var(--color-gray-dark)`, `var(--h6-line-height)`
+- Label (`dt`): `var(--font-weight-600)`
+- Value (`dd`): `var(--font-weight-400)`

package/guidelines/content-types/footer/disclaimers.md

@@ -0,0 +1,48 @@
+# Disclaimers
+
+**Zone:** Footer only — Disclaimers subsection.
+
+## Description
+
+Static legal statements displayed in the footer. Unlike `Disclosures` (which are toggled open/closed by the user), Disclaimers are always visible — no toggle, no expand/collapse. Use for brief legal copy that must be persistently visible: asterisk footnotes, rate qualifications, "not available in all states" statements, and similar.
+
+One `Disclaimer` per legal statement. Stack multiple instances for multiple statements — do not concatenate them into a single prop.
+
+## Component
+
+`Disclaimer`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `text` | `string` | Yes | The disclaimer copy |
+| `itemNumber` | `string` | No | Compliance Item Number displayed alongside the text |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Section, Disclaimer } from 'lion-make'
+
+<Section zone="footer">
+  <Disclaimer
+    text="*Rates based on a 35-year-old non-smoker in excellent health. Individual rates may vary."
+    itemNumber="M37594_0524"
+  />
+  <Disclaimer
+    text="Products and availability may vary by state. Not available in all states."
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only, in the Disclaimers subsection.
+- Place above `Disclosures` and `Compliance`.
+- Always visible — do not use when a toggle is desired (use `Disclosures` instead).
+
+## Design Tokens
+
+- Text: `var(--h6-font-size)`, `var(--color-gray-dark)`, `var(--h6-line-height)`
+- Item number: same size, `var(--font-weight-400)`, rendered inline after the text

package/guidelines/content-types/footer/disclosure-toggle-open.md

@@ -0,0 +1,51 @@
+# Disclosure Toggle Open
+
+**Zone:** Footer only — Disclosures subsection.
+
+## Description
+
+A toggleable legal disclosure that **starts in the expanded (open) state**. The user can collapse it. Use when regulatory requirements mandate that the disclosure text is visible on page load without requiring user interaction.
+
+Functionally identical to `Disclosures` except for the initial state. Both use the same `Disclosure` component under the hood — the distinction is the `defaultOpen` prop.
+
+## Component
+
+`DisclosureToggleOpen` (thin wrapper around `Disclosure` with `defaultOpen={true}`)
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `triggerLabel` | `string` | Yes | Toggle button label (e.g., "Product Disclosure Statement") |
+| `content` | `string` | Yes | Full legal disclosure text, shown on load |
+| `materialId` | `string` | No | Material ID displayed inline with the content |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Section, DisclosureToggleOpen } from 'lion-make'
+
+<Section zone="footer">
+  <DisclosureToggleOpen
+    triggerLabel="Medicare Supplement Insurance Disclosure"
+    content="Medicare Supplement insurance plans are not connected with or endorsed by the U.S. Government or the federal Medicare program. This is a solicitation of insurance."
+    materialId="MSO-DISC-001"
+  />
+</Section>
+```
+
+## When to use vs Disclosures
+
+| | Disclosures | Disclosure Toggle Open |
+|---|---|---|
+| Initial state | Collapsed | **Expanded** |
+| User can toggle | Yes | Yes |
+| Regulatory use | Standard product disclosures | Required-visible disclosures |
+
+## Design Tokens
+
+Same as `Disclosures`:
+- Trigger: `var(--color-link)`, `var(--h6-font-size)`, no border
+- Content: `var(--h6-font-size)`, `var(--color-gray-dark)`
+- Material ID: inline, same size

package/guidelines/content-types/footer/disclosures.md

@@ -0,0 +1,50 @@
+# Disclosures
+
+**Zone:** Footer only — Disclosures subsection.
+
+## Description
+
+A toggleable legal disclosure that **starts collapsed**. The user clicks a trigger link to expand and read the full content. Use for standard product disclosures, fine print, and supplementary legal text that doesn't need to be immediately visible.
+
+When the disclosure must be visible on page load, use `Disclosure Toggle Open` instead.
+
+## Component
+
+`Disclosure`
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `triggerLabel` | `string` | Yes | — | Toggle button label |
+| `content` | `string` | Yes | — | Full disclosure text, revealed on expand |
+| `materialId` | `string` | No | — | Material ID shown inline within the content |
+| `defaultOpen` | `boolean` | No | `false` | Set `true` to start expanded (equivalent to `DisclosureToggleOpen`) |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Section, Disclosure } from 'lion-make'
+
+<Section zone="footer">
+  <Disclosure
+    triggerLabel="Term Life Insurance — Product Disclosure"
+    content="Term life insurance coverage is issued by Mutual of Omaha Insurance Company, Omaha, NE. Policy Form ICC22L-TERM. Not available in all states."
+    materialId="L-TERM-DISC-0524"
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only.
+- Place below `Disclaimers` and above `Compliance`.
+- Stack multiple `Disclosure` instances for multiple product disclosures — do not merge into one.
+- If the disclosure must be pre-expanded, use `DisclosureToggleOpen` instead.
+
+## Design Tokens
+
+- Trigger: `var(--color-link)`, `var(--h6-font-size)`, no border, cursor pointer
+- Content: `var(--h6-font-size)`, `var(--color-gray-dark)`
+- Material ID: inline, appended after the content text

package/guidelines/content-types/footer/legal-links.md

@@ -0,0 +1,59 @@
+# Legal Links
+
+**Zone:** Footer only — Legal Links subsection.
+
+## Description
+
+A horizontal bar of links to legal and policy pages — Privacy Policy, Terms of Use, Accessibility Statement, Cookie Preferences, Site Map, and similar. Optionally includes a copyright notice. Typically the bottommost element in the footer, below all disclosures and compliance blocks.
+
+Separate from `Links & Social` (which handles the main footer nav columns) — Legal Links is a dedicated subsection for purely legal/regulatory destinations.
+
+## Component
+
+`LegalLinks`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `links` | `LegalLink[]` | Yes | Legal page links |
+| `copyrightText` | `string` | No | Copyright line (e.g., `'© 2025 Mutual of Omaha Insurance Company'`) |
+| `className` | `string` | No | Additional CSS class |
+
+### LegalLink
+
+| Prop | Type | Description |
+|---|---|---|
+| `label` | `string` | Link text |
+| `href` | `string` | Destination URL |
+
+## Usage
+
+```tsx
+import { Section, LegalLinks } from 'lion-make'
+
+<Section zone="footer">
+  <LegalLinks
+    copyrightText="© 2025 Mutual of Omaha Insurance Company. All rights reserved."
+    links={[
+      { label: 'Privacy Policy', href: '/privacy' },
+      { label: 'Terms of Use', href: '/terms' },
+      { label: 'Accessibility', href: '/accessibility' },
+      { label: 'Cookie Preferences', href: '/cookies' },
+      { label: 'Site Map', href: '/sitemap' },
+    ]}
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only. Always the last element in the footer.
+- Must be below `Compliance` block.
+- Render on every page — legal links are sitewide requirements.
+
+## Design Tokens
+
+- Copyright: `var(--h6-font-size)`, `var(--color-gray-dark)`
+- Links: `var(--h6-font-size)`, `var(--color-link)`, pipe separator between items
+- Background inherits from footer: `var(--color-gray-darkest)`

package/guidelines/content-types/footer/links-and-social.md

@@ -0,0 +1,94 @@
+# Links & Social
+
+**Zone:** Footer only — Links & Social subsection.
+
+## Description
+
+The primary footer navigation block. Renders multiple columns of site links (product lines, services, company info, etc.) alongside social media icon links. Always the first content type in the footer, immediately below the Anklet zone.
+
+Footer nav columns help users discover content they didn't find in the main navigation. Social links build brand presence. Both are optional individually but the component requires at least one column.
+
+## Component
+
+`LinksAndSocial`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `columns` | `FooterNavColumn[]` | Yes | Navigation columns (min 1, typically 3–5) |
+| `socialLinks` | `SocialLink[]` | No | Social media links (rendered as icon links) |
+| `className` | `string` | No | Additional CSS class |
+
+### FooterNavColumn
+
+| Prop | Type | Description |
+|---|---|---|
+| `heading` | `string` | Column heading |
+| `links` | `Array<{ label: string; href: string }>` | Column links |
+
+### SocialLink
+
+| Prop | Type | Description |
+|---|---|---|
+| `platform` | `'facebook' \| 'twitter' \| 'linkedin' \| 'youtube' \| 'instagram' \| 'x'` | Platform identifier (controls icon class) |
+| `href` | `string` | Profile URL |
+| `label` | `string` (optional) | Accessible label (defaults to platform name) |
+
+## Usage
+
+```tsx
+import { Section, LinksAndSocial } from 'lion-make'
+
+<Section zone="footer">
+  <LinksAndSocial
+    columns={[
+      {
+        heading: 'Insurance',
+        links: [
+          { label: 'Life Insurance', href: '/life' },
+          { label: 'Medicare', href: '/medicare' },
+          { label: 'Supplemental Health', href: '/supplemental' },
+          { label: 'Dental & Vision', href: '/dental-vision' },
+        ],
+      },
+      {
+        heading: 'Company',
+        links: [
+          { label: 'About Us', href: '/about' },
+          { label: 'Careers', href: '/careers' },
+          { label: 'Newsroom', href: '/news' },
+          { label: 'Community', href: '/community' },
+        ],
+      },
+      {
+        heading: 'Support',
+        links: [
+          { label: 'Contact Us', href: '/contact' },
+          { label: 'Find an Agent', href: '/agent-finder' },
+          { label: 'File a Claim', href: '/claims' },
+          { label: 'Customer Login', href: '/login' },
+        ],
+      },
+    ]}
+    socialLinks={[
+      { platform: 'facebook', href: 'https://facebook.com/mutualofomaha' },
+      { platform: 'linkedin', href: 'https://linkedin.com/company/mutual-of-omaha' },
+      { platform: 'youtube', href: 'https://youtube.com/mutualofomaha' },
+    ]}
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only. Always the first content type in the footer.
+- Social link targets must use `rel="noopener noreferrer"` and `target="_blank"`.
+- Column headings use `<h3>` — do not skip heading levels.
+
+## Design Tokens
+
+- Background: `var(--color-gray-darkest)` (dark footer)
+- Column heading: `var(--h5-font-size)`, `var(--font-weight-600)`, `var(--color-white)`
+- Column links: `var(--h6-font-size)`, `var(--color-white-opaque)`, no underline
+- Social icons: 24×24px, `var(--color-white-opaque)`, hover `var(--color-white)`

package/guidelines/content-types/footer/overview.md

@@ -1,38 +1,95 @@
 # Footer Zone Content Types
 
-**Zone rule:** These content types can only be placed in the Footer zone. Never use them in Header, Hero, or General zones.
+**Zone rule:** These content types can only be placed in the Footer zone (or the adjacent Anklet zone). Never use them in Header, Hero, or General zones.
 
-The Footer zone is divided into subsections for legal content: Disclaimer, Disclosure, and Compliance. Each subsection accepts specific content types.
+---
 
-## Footer Subsections
+## Content Types
 
-| Subsection | Content type | Component | Description |
+| Content type | Component | Zone | Order in page |
 |---|---|---|---|
-| Disclaimer | Disclaimer | `Disclaimer` | Static legal text, displayed above disclosures |
-| Disclosure | Disclosure | `Disclosure` | Toggleable legal product information |
-| Compliance | Compliance Block | `ComplianceBlock` | Item numbers and material IDs for compliance tracking |
+| Anklet | `Anklet` | Anklet (own zone, above footer) | 1 — above footer |
+| Links & Social | `LinksAndSocial` | Footer | 2 — first in footer |
+| Disclaimers | `Disclaimer` | Footer | 3 |
+| Disclosures | `Disclosure` | Footer | 4 |
+| Disclosure Toggle Open | `DisclosureToggleOpen` | Footer | 4 (alongside Disclosures) |
+| Compliance | `ComplianceBlock` | Footer | 5 |
+| Legal Links | `LegalLinks` | Footer | 6 — last in footer |
+
+---
+
+## Footer Structure
+
+```
+<Anklet />                        ← own zone; quick-links bar above the footer
+
+<Section zone="footer">
+  <LinksAndSocial … />            ← nav columns + social icons
+  <Disclaimer … />                ← static legal copy (always visible)
+  <Disclosure … />                ← legal toggle, starts collapsed
+  <DisclosureToggleOpen … />      ← legal toggle, starts expanded
+  <ComplianceBlock … />           ← Item Number / Material ID
+  <LegalLinks … />                ← Privacy, Terms, Accessibility, Copyright
+</Section>
+```
+
+---
+
+## Key Distinctions
+
+| Comparison | Use |
+|---|---|
+| Disclaimers vs Disclosures | Disclaimers are always visible; Disclosures toggle open/closed |
+| Disclosures vs Disclosure Toggle Open | Both toggle; Toggle Open starts expanded (for required-visible disclosures) |
+| Compliance vs Disclaimers | Compliance is for structured IDs (Item #, Material ID); Disclaimers are free-text legal statements |
+| Anklet vs Legal Links | Anklet links are product/service navigation; Legal Links are policy/legal destinations |
+
+---
 
 ## Placement Example
 
 ```tsx
-import { Section, Disclaimer, Disclosure, ComplianceBlock } from 'lion-make'
+import {
+  Anklet,
+  Section,
+  LinksAndSocial,
+  Disclaimer,
+  Disclosure,
+  ComplianceBlock,
+  LegalLinks,
+} from 'lion-make'
+
+<Anklet links={ankletLinks} />
 
 <Section zone="footer">
-  <Disclaimer
-    text="Products underwritten by Mutual of Omaha Insurance Company, Omaha, Nebraska."
-    itemNumber="ICC20-TERM"
-  />
+  <LinksAndSocial columns={navColumns} socialLinks={socialLinks} />
+  <Disclaimer text="*Rates may vary based on health history and state of residence." />
   <Disclosure
-    triggerLabel="Important Disclosure"
-    content="This policy has exclusions, limitations, and reductions of benefits..."
-    materialId="M28354"
+    triggerLabel="Term Life Insurance Disclosure"
+    content="Policy Form ICC22L-TERM. Issued by Mutual of Omaha Insurance Company."
+    materialId="L-TERM-0524"
+  />
+  <ComplianceBlock itemNumber="M37594_0524" />
+  <LegalLinks
+    copyrightText="© 2025 Mutual of Omaha Insurance Company"
+    links={legalLinks}
   />
-  <ComplianceBlock itemNumber="ICC20-TERM" materialId="M28354" />
 </Section>
 ```
 
+---
+
 ## Files in This Section
 
+- [anklet.md](./anklet.md)
+- [links-and-social.md](./links-and-social.md)
+- [disclaimers.md](./disclaimers.md)
+- [disclosures.md](./disclosures.md)
+- [disclosure-toggle-open.md](./disclosure-toggle-open.md)
+- [compliance.md](./compliance.md)
+- [legal-links.md](./legal-links.md)
+
+Legacy docs (pre-Mondrian naming — kept for reference):
 - [disclaimer.md](./disclaimer.md)
 - [disclosure.md](./disclosure.md)
 - [compliance-block.md](./compliance-block.md)

package/guidelines/content-types/general/accordion-block.md

@@ -0,0 +1,42 @@
+# Accordion Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Collapsible sections for Q&A, FAQs, or nested content. Reduces page length by hiding content until needed. One or multiple sections can be open at a time depending on configuration.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `items` | `AccordionItem[]` | Yes | — | Array of collapsible sections |
+| `allowMultipleOpen` | `boolean` | No | `false` | Allow more than one section open at a time |
+| `className` | `string` | No | — | Additional CSS class |
+
+### AccordionItem
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | The clickable trigger label |
+| `body` | `string` | Yes | Content revealed when expanded |
+
+## Usage
+
+```tsx
+import { AccordionBlock } from 'lion-make'
+
+<AccordionBlock
+  items={[
+    { heading: 'What is the waiting period?', body: 'Coverage begins on the first of the month after approval.' },
+    { heading: 'Can I cancel anytime?', body: 'Yes. Cancel with 30 days notice and receive a prorated refund.' },
+    { heading: 'Is there a medical exam?', body: 'No medical exam required for plans under $50,000.' },
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Trigger: `var(--font-size-base)`, `var(--font-weight-600)`, `var(--color-text)`
+- Divider: `var(--border-width-thin)` solid `var(--color-line)`
+- Body: `var(--font-size-base)`, `var(--line-height-base)`, `var(--color-text)`