v0.11.0

Appearance

Disclosure <details> ​

Disclosures are used to show and hide content sections on demand. Commonly used for FAQs, collapsible panels, and progressive disclosure of secondary information.

HTML tag<details>
⏣Native HTML
⬡Progressive
◇Custom
⬢Shadow DOM
Native HTML Element

Options ​

Variants ​

Add data-variant="bordered" for a visual container.

What is Luxen UI?
Luxen UI is an HTML & CSS-first UI library built with modern CSS and web components.
Code
html
<details
  class="l-disclosure"
  data-variant="bordered"
  data-marker="arrow"
>
  <summary>What is Luxen UI?</summary>
  <div>Luxen UI is an HTML & CSS-first UI library built with modern CSS and web components.</div>
</details>

Initially open ​

Native open attribute.

Initially open
This disclosure starts expanded via the native open attribute.
Code
html
<details
  class="l-disclosure"
  data-variant="bordered"
  data-marker="arrow"
  open
>
  <summary>Initially open</summary>
  <div>This disclosure starts expanded via the native <code>open</code> attribute.</div>
</details>

Markers ​

Add data-marker="arrow" or data-marker="plus" for an animated icon indicator.

Arrow marker
Chevron icon that rotates 180° when open.
Plus marker
Plus icon that rotates 45° into a cross when open.
Code
html
<div class="flex flex-col gap-3">
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="arrow"
  >
    <summary>Arrow marker</summary>
    <div>Chevron icon that rotates 180° when open.</div>
  </details>
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="plus"
  >
    <summary>Plus marker</summary>
    <div>Plus icon that rotates 45° into a cross when open.</div>
  </details>
</div>

Examples ​

FAQ ​

Use the native name attribute to create an exclusive accordion — only one item open at a time. Style the container with Tailwind utilities.

What is Luxen UI?
An HTML & CSS-first UI library built with modern CSS and web components. No framework required.
Does it require JavaScript?
Most elements are CSS-only. Custom elements use Lit for progressive enhancement when interactivity is needed.
How do I install it?
Install via npm: npm install luxen-ui, then import the CSS and components you need.
Can I use it with React or Vue?
Yes — Luxen UI uses standard custom elements and CSS classes, which work in any framework or with plain HTML.
Code
html
<div
  class="mx-auto max-w-2xl divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900"
>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>What is Luxen UI?</summary>
    <div>
      An HTML & CSS-first UI library built with modern CSS and web components. No framework
      required.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>Does it require JavaScript?</summary>
    <div>
      Most elements are CSS-only. Custom elements use Lit for progressive enhancement when
      interactivity is needed.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>How do I install it?</summary>
    <div>
      Install via npm: <code>npm install luxen-ui</code>, then import the CSS and components you
      need.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>Can I use it with React or Vue?</summary>
    <div>
      Yes — Luxen UI uses standard custom elements and CSS classes, which work in any framework or
      with plain HTML.
    </div>
  </details>
</div>

Accessibility ​

Criteria ​

Role

Uses native <details> — built-in disclosure semantics, no ARIA needed

WCAG4.1.2
RGAA7.1
Accessible name

The <summary> provides the accessible name automatically

WCAG4.1.2
Motion

Animations use CSS transitions that respect prefers-reduced-motion

WCAG2.3.3

Keyboard interactions ​

Enter
Toggles the disclosure open or closed
Space
Toggles the disclosure open or closed

API reference ​

Importing ​

css
@import 'luxen-ui/css/disclosure';

Attributes & Properties ​

openAttribute
Native attribute — starts the disclosure expanded.
nameAttribute
Native attribute — groups disclosures into an exclusive accordion.
data-markerarrow | plusAttribute
Marker icon: arrow rotates 180° when open; plus rotates 45° into a cross.
data-variantAttribute
bordered — Adds border, background, and border-radius.
disabledAttribute
Disables interaction (set on <details> or <summary>).

Events ​

toggleEvent
Fires when the disclosure opens or closes (e.newState is "open" or "closed").

CSS classes ​

.l-disclosureClass
Headless base — layout, animation, and marker behavior only.

CSS custom properties ​

--marker-sizedefault:20pxCustom property
Marker icon size.
--marker-colordefault:var(--l-color-text-tertiary)Custom property
Marker icon color ().