@lmfaole/basics

Unstyled custom elements for common UI patterns, with an optional starter CSS layer.

Install

pnpm add @lmfaole/basics

Quick Start

1. Import the register module for the component you want to use.
2. Render the expected HTML markup.
3. Optionally import the starter styles.

<basic-dialog data-label="Confirm action">
  <button type="button" data-dialog-open>Open dialog</button>

  <dialog data-dialog-panel>
    <h2 data-dialog-title>Confirm action</h2>
    <p>Dialog body.</p>
    <button type="button" data-dialog-close>Cancel</button>
    <button type="button" data-dialog-close data-dialog-close-value="confirmed">
      Confirm
    </button>
  </dialog>
</basic-dialog>

<script type="module">
  import "@lmfaole/basics/basic-components/basic-dialog/register";
</script>

Import register modules once in your app entry point. They define the custom element and leave styling to your application unless you also opt into basic-styling.

Component Guides

Each component now has its own colocated README with markup, attributes, behavior, and usage notes:

• basic-alert: inline live-region alerts
• basic-accordion: single-open or multi-open disclosure sections
• basic-carousel: scroll-snap carousels with native CSS controls where supported
• basic-dialog: modal dialogs built on native <dialog>
• basic-popover: non-modal overlays using the Popover API
• basic-summary-table: tables with generated totals in <tfoot>
• basic-table: accessible table naming and header relationships
• basic-tabs: accessible tablists and panels
• basic-toast: transient toast notifications
• basic-toc: generated table-of-contents navigation

Optional Styling

The components are unstyled by default. To opt into the starter CSS:

@import "@lmfaole/basics/basic-styling";

Or import the global layer and component layer separately:

@import "@lmfaole/basics/basic-styling/global.css";
@import "@lmfaole/basics/basic-styling/components.css";

You can also import individual files from:

• @lmfaole/basics/basic-styling/forms.css
• @lmfaole/basics/basic-styling/tokens/*
• @lmfaole/basics/basic-styling/components/basic-*.css

The starter styling is intentionally minimal. It provides tokens, spacing, and baseline component styles without taking over your design system.

Selection Panels

The form layer can render a native checkbox or radio like a selectable panel by adding data-panel to the input.

<label>
  <input type="checkbox" name="days" value="day-1" data-panel checked />
  <span>
    <strong>Day 1: Product systems</strong>
    <span>Keynotes, leadership sessions, and case studies.</span>
  </span>
</label>

Use the pattern like this:

• Import @lmfaole/basics/basic-styling/forms.css, global.css, or the full basic-styling entry point.
• Put data-panel on the native checkbox or radio, not on the label.
• Keep the control as a direct child of the label.
• Place the visible body copy after the input in a sibling span or div.
• Use native fieldset and legend when the choices belong to one group.
• Keep shared name values on radio groups so the browser preserves single-select behavior.

This is still a native checkbox or radio. Keyboard behavior, form submission, validation, checked state, and radio-group semantics all stay browser-driven. See Storybook Native Elements/Forms for live examples of the same markup.

Package Entry Points

• Register a custom element: @lmfaole/basics/basic-components/<component>/register
• Import a component module directly: @lmfaole/basics/basic-components/<component>
• Root module exports the component classes and helpers from @lmfaole/basics
• Legacy compatibility aliases remain available under @lmfaole/basics/components/<component>

Browser Support

The package targets modern evergreen browsers. The live widgets below render in Storybook's Readme page via the official <baseline-status> custom element, and each line also links to the underlying feature page for plain Markdown viewers.

As of March 29, 2026, the biggest compatibility gaps are the shared style-query layer in Firefox and the native carousel marker/button controls outside Chromium-based browsers.

• Core custom elements (basic-alert, basic-accordion, basic-carousel, basic-summary-table, basic-table, basic-tabs, basic-toc, basic-toast): (Autonomous custom elements)
• basic-dialog modal behavior: (<dialog>)
• basic-popover overlays and basic-toast top-layer placement: (Popover)
• basic-carousel scroll-snap foundation: (Scroll snap)
• basic-carousel native marker and arrow controls: (Scroll markers, ::scroll-button)
• Starter CSS color and selector baseline: (Nesting, :has(), light-dark(), Oklab and OkLCh)
• Shared interaction state layer and other style-query-driven refinements: (Container style queries)

Storybook

pnpm storybook

pnpm build-storybook

Storybook now focuses on package documentation pages such as the readme, changelog, contributing guide, security policy, and palette tokens.

More Docs

• CHANGELOG.md
• CONTRIBUTING.md
• SECURITY.md