npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

lily-design-system-svelte-headless

v0.2.0

Published

Lily Design System - Svelte 5 headless component library

Downloads

132

Readme

Lily Design System - Svelte Headless

A headless Svelte 5 component library with 332 components. All components are headless (no built-in styles), fully accessible (WCAG 2.2 AAA), and use Svelte 5 runes.

Components

  • accordion:
    • accordion-nav: a navigation container for collapsible accordion information
    • accordion-list: an ordered list of accordion list item components
    • accordion-list-item: one accordion list item component
    • accordion-link: one accordion link in the trail
  • action-link: a hyperlink styled as an action trigger
  • ai-label: an indicator of AI instances that is a pathway to AI explainability
  • alert-dialog: a modal dialog for urgent messages requiring user acknowledgment
  • alert: a status message for important information or feedback
  • angle-slider-range-input: a range input for selecting an angle in degrees
  • aspect-ratio-container: a container that maintains a fixed aspect ratio
  • avatar:
    • avatar: an avatar indicator that shows an avatar image or avatar text
    • avatar-image: an avatar indicator inside image such as a user photo
    • avatar-text: an avatar indicator inner text such as a user name
  • back-link: a navigation link to return to a previous page
  • badge: a small label for counts, statuses, or categories
  • banner: a prominent message bar across the top of a page
  • banner-box: a banner box that is inside a banner component, using flexbox horizontal
  • beach-ball: a decorative animated beach ball element
  • breadcrumb:
    • breadcrumb-nav: a navigation container for breadcrumb trail links
    • breadcrumb-list: an ordered list of breadcrumb navigation items
    • breadcrumb-list-item: one breadcrumb navigation link in the trail
    • breadcrumb-link: one breadcrumb link in the trail
  • button: a generic clickable button element
  • button-input: an input element of type button for form actions
  • calendar-table:
    • calendar-table: a calendar table interactive grid for managing dates, days, etc.
    • calendar-table-head: a calendar table interactive grid thead for managing dates, days, etc.
    • calendar-table-body: a calendar table interactive grid tbody for managing dates, days, etc.
    • calendar-table-foot: a calendar table interactive grid tfoot for managing dates, days, etc.
    • calendar-table-col: a calendar table interactive grid column for managing dates, days, etc.
    • calendar-table-row: a calendar table interactive grid row for managing dates, days, etc.
    • calendar-table-data: a calendar table interactive grid data cell for managing dates, days, etc.
  • calendar-range-picker: a picker for selecting a date range on a calendar
  • call-to-action: a prominent prompt encouraging user action
  • caption: a caption for a table or figure element
  • card: a grouped content container with header, body, and footer areas
  • care-card: a medical care instruction card with urgency levels
  • carousel: a slideshow for cycling through content items
  • character-counter: a counter showing remaining or used characters in a text field
  • character: a single character display element
  • chat:
    • chat-nav: a navigation container for chat information
    • chat-list: an ordered list of chat list item components
    • chat-list-item: one chat list item component, typically containing one chat message component
    • chat-message: a chat message shows one chat conversation message entry and all its data, including the author avatar, author name, time, etc.
  • citation: a citation acknowledges the relevance of a work of another to the topic of discussion
  • checkbox-group: a group component that manages a collection of checkboxes with shared state
  • checkbox-input: a checkbox input for toggling a boolean value
  • check-list: an ordered list of check list item components
  • check-list-item: one check list item component with a checkbox
  • clipboard-copy-button: a button that copies text to the clipboard
  • collapsible: a container that can be expanded or collapsed
  • code: an inline code span for displaying short code snippets within surrounding text
  • code-block: a block of formatted code with optional line numbers and line highlighting
  • color-input: an input for selecting a color value
  • color-picker: a two-dimensional board for picking colors by hue and saturation
  • color-picker-button: a button showing a color swatch in a color picker
  • comment: a comment displays user discussions and user feedback
  • combobox: a text input combined with a dropdown list for filtering options
  • command: a command palette for searching and executing actions
  • contents-nav: a navigation landmark for a table of contents
  • contents-list: an ordered list of contents list item components
  • contents-list-item: one contents list item component linking to a page section
  • contents-link: one contents link in the trail
  • context-menu: a menu that appears on right-click or long-press
  • context-menu-item: one item in a context menu
  • currency-input: a locale-aware currency input with automatic formatting, symbols, separators
  • data-filter-form: a form for filtering data by criteria
  • data-table:
    • data-table: a data table interactive grid for displaying and sorting tabular data
    • data-table-head: a data table interactive grid thead for displaying and sorting tabular data
    • data-table-body: a data table interactive grid tbody for displaying and sorting tabular data
    • data-table-foot: a data table interactive grid tfoot for displaying and sorting tabular data
    • data-table-col: a data table interactive grid column for displaying and sorting tabular data
    • data-table-row: a data table interactive grid row for displaying and sorting tabular data
    • data-table-data: a data table interactive grid data cell for displaying and sorting tabular data
  • date-field: a structured field for entering date components
  • date-input: an input for entering a date value
  • date-range: a display of a start and end date range
  • date-time-now-input: an input for entering a date and time and "now" button
  • datetime-local-input: an input for entering a date and time without time zone
  • details: a disclosure widget that shows and hides content
  • dial: a rotary dial control for selecting a value
  • dial-group: a group of dial components
  • diff: a side-by-side comparison of two items
  • digital-object-identifier-link: a permanent hyperlink for a Digital Object Identifier (DOI) to an electronic source
  • dialog: a modal or non-modal dialog window
  • do-list: a guideline list of encouraged do-list-item components
  • do-list-item: an encouraged-practice item in a do-list guideline list
  • dont-list: a guideline list of discouraged dont-list-item components
  • dont-list-item: a discouraged-practice item in a dont-list guideline list
  • drawer: a panel that slides in from the edge of the screen
  • dropdown-menu: a menu that opens below a trigger button
  • editable-form: a form wrapper for inline editing of content
  • editable: an inline-editable text element that toggles between view and edit modes
  • email-link: a mailto hyperlink for an email address
  • email-input: an input for entering an email address
  • emoji-character-picker: a picker for browsing and selecting emoji characters
  • emoji: a single emoji character with accessible name
  • error-message: an error message associated with a form field
  • event: an event component that contains other event-related information
  • error-summary: a summary of all validation errors on a form
  • expander: a control that expands to reveal more content
  • field: a form field wrapper with label, input, and error message
  • fieldset: a group of related form fields with a legend
  • figure: a self-contained figure with optional caption
  • file-dialog: a dialog for browsing and selecting files
  • file-input: an input for selecting files from the file system
  • file-manager: a file browser for navigating and managing files
  • file-upload: a drag-and-drop area for uploading files
  • five-face-rating:
    • five-face-rating-view: a read-only display of a five-face satisfaction rating
    • five-face-rating-picker: a picker for selecting a 1-5 satisfaction rating using face labels
    • five-face-rating-picker-button: a picker button for selecting a 1-5 satisfaction rating using face labels
  • five-star-rating:
    • five-star-rating-view: a read-only display of a five-star rating
    • five-star-rating-picker: a picker for selecting a 1-5 star rating using radio buttons
    • five-star-rating-picker-button: a picker button for selecting a 1-5 star rating using radio buttons
  • flair: a decorative highlight or emphasis element
  • floating-panel: a panel that floats above page content
  • footer: a page or section footer area
  • footnote: a footnote reference and content element
  • form: a form element for collecting and submitting user data
  • gantt-table:
    • gantt-table: a Gantt chart table interactive grid for planning schedule visualization
    • gantt-table-head: a Gantt chart table interactive grid thead for planning schedule visualization
    • gantt-table-body: a Gantt chart table interactive grid tbody for planning schedule visualization
    • gantt-table-foot: a Gantt chart table interactive grid tfoot for planning schedule visualization
    • gantt-table-col: a Gantt chart table interactive grid column for planning schedule visualization
    • gantt-table-row: a Gantt chart table interactive grid row for planning schedule visualization
    • gantt-table-data: a Gantt chart table interactive grid data cell for planning schedule visualization
  • hamburger-menu: a toggle button that opens a mobile navigation menu
  • header: a page or section header area
  • hero: a large box or image with a title and description
  • hidden-input: a hidden input for including data in form submission
  • hint: hint text providing guidance for a form field
  • grail-layout:
    • grail-layout: a responsive web design structure with header, left aside, center main, right aside, footer
    • grail-layout-top-header: grail layout top header full width with header tag
    • grail-layout-left-aside: grail layout left aside sidebar with aside tag
    • grail-layout-center-main: grail layout center main content with main tag
    • grail-layout-right-aside: grail layout right aside sidebar with aside tag
    • grail-layout-bottom-footer: grail layout bottom footer full width with footer tag
  • hover-card: a card that appears on hover over a trigger element
  • icon: a container for displaying an icon
  • image-file-input: an input for selecting image files with preview
  • image: an image element with alt text
  • image-input: a graphical submit button that displays an image
  • information-callout: a callout box highlighting informational content
  • input: a generic HTML input element
  • inset-text: indented text to distinguish it from surrounding content
  • kanban-table:
    • kanban-table: a kanban board table interactive grid for organizing items by status
    • kanban-table-head: a kanban board table interactive grid thead for organizing items by status
    • kanban-table-body: a kanban board table interactive grid tbody for organizing items by status
    • kanban-table-foot: a kanban board table interactive grid tfoot for organizing items by status
    • kanban-table-col: a kanban board table interactive grid column for organizing items by status
    • kanban-table-row: a kanban board table interactive grid row for organizing items by status
    • kanban-table-data: kanban board table interactive grid data cell for organizing items by status
  • kbd: show keyboard shortcuts and key combinations in a styled inline element
  • label: a label associated with a form input
  • listbox: a list of selectable options with keyboard navigation
  • loading: a loading indicator, such as text, or image, or animation
  • measurement:
    • measurement-instance-input: an input for entering a measurement value and unit
    • measurement-instance-view: a read-only display of a measurement value and unit
    • measurement-system-input: an input for selecting a measurement system
    • measurement-system-view: a read-only display of a measurement system
    • measurement-unit-input: an input for selecting a measurement unit
    • measurement-unit-view: a read-only display of a measurement unit
  • medical-banner: a prominent message bar across the top of a page, with medical information
  • medical-banner-box: a medical banner box inside a medical-banner, using flexbox horizontal
  • medical-banner-box-for-danger: a medical record banner box for danger information
  • medical-banner-box-for-advice: a medical record banner box for advice information
  • menu: a list of actions or options triggered by a button
  • menu-item: one item in a menu
  • menu-bar: a horizontal bar of menu triggers
  • menu-bar-button: one item in a menu bar
  • meter: a gauge displaying a scalar value within a known range
  • mockup-browser: a box area that looks like a web browser
  • mockup-laptop: a box area that looks like a laptop computer
  • mockup-phone: a box area that looks like a mobile phone
  • mockup-tablet-landscape: a box area that looks like a tablet computer in landscape mode
  • mockup-tablet-portrait: a box area that looks like a tablet computer in portrait mode
  • mockup-shell: a box area that looks like a terminal shell
  • mockup-watch: a box area that looks like a smart watch
  • mockup-window: a box area that looks like a desktop window
  • month-input: an input for selecting a month and year
  • navigation-menu: a site-wide navigation menu with links
  • net-promoter-score:
    • net-promoter-score-view: a read-only display of a Net Promoter Score
    • net-promoter-score-picker: a picker for selecting a 0-10 Net Promoter Score
    • net-promoter-score-picker-button: a picker button for selecting a 0-10 Net Promoter Score
  • notification: a brief message about an event or update
  • number-input: an input for entering a numeric value with validation
  • option: an option element within a select dropdown
  • organization: an organization component that contains other organization-related information
  • pagination:
    • pagination-nav: an ordered list of page navigation links
    • pagination-list: an ordered list of page navigation links
    • pagination-list-item: one page link in a pagination list
    • pagination-link: one pagination link in the trail
  • panel: a generic content panel with optional heading
  • person: a person component that contains other person-related information
  • password-input: an input for entering a password with obscured text
  • password-input-or-text-input-div: an input for entering a password or text with show/hide toggle
  • place: a place component that contains other place-related information
  • pin-input-div: a series of single-digit inputs for entering a PIN or OTP code
  • popover: a floating content box anchored to a trigger element
  • popup: a temporary overlay that appears above page content
  • postal-code:
    • postal-code-input: an input for entering a postal or ZIP code
    • postal-code-view: a read-only display of a postal or ZIP code
  • progress-circle: a circular progress indicator
  • progress-spinner: an indeterminate spinning progress indicator
  • progress: a horizontal progress bar showing completion
  • qr-code: a QR code image generated from text or URL data
  • radio-group: a group of radio buttons for selecting one option
  • radio-input: a single radio button input
  • range-input: a slider input for selecting a value within a range
  • red-amber-green:
    • red-amber-green-view: a read-only display of a red/amber/green status
    • red-amber-green-picker: a picker for selecting a red/amber/green status
    • red-amber-green-picker-button: a picker button for selecting a red/amber/green status
  • red-orange-yellow-green-blue:
    • red-orange-yellow-green-blue-view: a read-only display of a five-level color status
    • red-orange-yellow-green-blue-picker: a picker for selecting a five-level color status
    • red-orange-yellow-green-blue-picker-button: a picker button for selecting a five-level color status
  • reset-input: a button input that resets a form to default values
  • resizable: a container that the user can resize by dragging
  • review-date: a display of a content review date
  • screen-reader-span: a visually hidden span of text intended for screen readers to provide more descriptive labels
  • scroll-area: a scrollable container with custom scrollbar support
  • scroll-bar: a custom scrollbar element
  • search-input: an input for entering a search query
  • segment-group: a group of mutually exclusive segment options
  • segment-group-item: one selectable segment in a segment group
  • select-with-extras: a select dropdown with additional features like search or groups
  • select: a dropdown select element for choosing one option
  • separator: a horizontal or vertical divider between content sections
  • sheet: a panel that slides in from a screen edge as an overlay
  • sidebar: a side panel for navigation or supplementary content
  • signature-pad: a drawing area for capturing a handwritten signature
  • skeleton: a placeholder loading animation for content
  • skip-link: a hidden link for keyboard users to skip to main content
  • slide-out-drawer: a drawer that slides out from the side of the page
  • slider: a draggable control for selecting a value along a track
  • slider-button: a button with a slider that the user needs to slide to confirm
  • sonner: a toast notification manager
  • sparkline: a small inline chart showing a data trend
  • splitter: a draggable divider for resizing adjacent panels
  • submit-input: a button input that submits a form
  • super-banner: a super-banner communicates a high-priority state that affects an entire app, experience, process, or system
  • summary-list: an ordered list of key-value summary pairs
  • summary-list-item: one key-value pair in a summary list
  • switch-button: a toggle switch for turning a setting on or off
  • tab-bar: a group of tabs for switching between content panels
  • tab-bar-button: one tab button in a tab group
  • table:
    • table: a data table with rows and columns
    • table-head: a table header section
    • table-body: a table body section
    • table-foot: a table footer section
    • table-col: a table column
    • table-row: a table row
    • table-data: a table data cell
  • tag-group: a group of tag elements
  • tag: a keyword label for categorizing content
  • tag-input: an input for adding and removing tags
  • task-bar: a horizontal bar of task shortcuts or actions
  • task-bar-button: one item in a task bar
  • task-list: an ordered list of task list items
  • task-list-item: one task item with a checkbox and label
  • tel-input: an input for entering a telephone number
  • tel-link: a tel: hyperlink for a telephone number
  • text-input: a single-line text input field
  • text-input-with-search: a single-line text input field with search capability
  • textarea: a multi-line text input area
  • text-area-with-character-counter: a multi-line text area with character counter
  • theme-picker: a picker for selecting a visual theme
  • theme-picker-button: a picker button for selecting a visual theme
  • theme-select: a select dropdown for choosing a theme
  • theme-select-option: one option in a theme select dropdown
  • theme-view: a read-only display of the current theme
  • time-input: an input for entering a time value
  • time-picker-input: an input with a dropdown for picking a time
  • timeline-list: an ordered list of chronological events or milestones
  • timeline-list-item: one event in a timeline list
  • tile: a grouping container that presents related content in a structured format, often as a single clickable area
  • timer: a countdown or elapsed time display
  • timer-button: a button with a timer that will automatically click after a given amount of time
  • toast: a brief auto-dismissing notification message
  • toggle-group: a group of toggle buttons for selecting options
  • toggle-button: a button that toggles between pressed and unpressed states
  • tool-bar: a horizontal bar of tool actions
  • tool-bar-button: one action button in a tool bar
  • tooltip: a small popup showing descriptive text on hover or focus
  • tour: a tour guide, such as for sightseeing, or pathways, or demonstrations, etc.
  • tour-list: an ordered list of tour guide steps
  • tour-list-item: one step in a tour guide list
  • tree-menu: a hierarchical tree menu with expandable branches
  • tree-nav: a hierarchical navigation with expandable branches
  • tree-list: a hierarchical list with nested expandable items
  • tree-list-item: one item in a tree navigation list
  • tree-link: one tree link in the trail
  • united-kingdom:
    • united-kingdom-national-health-service-number-input: an input for entering a UK NHS number
    • united-kingdom-national-health-service-number-view: a read-only display of a UK NHS number
  • united-states:
    • united-states-social-security-number-input: an input for entering a US Social Security number
    • united-states-social-security-number-view: a read-only display of a US Social Security number
  • url-input: an input for entering a URL
  • vital-sign:
    • vital-sign-blood-pressure-diastolic-as-mmhg-view: number display of one vital sign blood pressure diastolic with integers
    • vital-sign-blood-pressure-diastolic-as-mmhg-input: number input of one vital sign blood pressure diastolic with integers
    • vital-sign-blood-pressure-systolic-as-mmhg-view: number display of one vital sign blood pressure systolic with integers
    • vital-sign-blood-pressure-systolic-as-mmhg-input: number input of one vital sign blood pressure systolic with integers
    • vital-sign-body-fat-as-percentage-view: number display of one vital sign body fat percentage with one decimal point
    • vital-sign-body-fat-as-percentage-input: number input of one vital sign body fat percentage with one decimal point
    • vital-sign-body-temperature-as-celcius-view: number display of one vital sign body temperature in Celsius degrees with one decimal point
    • vital-sign-body-temperature-as-celcius-input: number input of one vital sign body temperature in Celsius degrees with one decimal point
    • vital-sign-cholesterol-as-hdl-mmol-per-litre-view: number display of one vital sign cholesterol HDL (good cholesterol) millimole per litre with one decimal point
    • vital-sign-cholesterol-as-hdl-mmol-per-litre-input: number input of one vital sign cholesterol HDL (good cholesterol) millimole per litre with one decimal point
    • vital-sign-cholesterol-as-ldl-mmol-per-litre-view: number display of one vital sign cholesterol LDL (bad cholesterol) millimole per litre with one decimal point
    • vital-sign-cholesterol-as-ldl-mmol-per-litre-input: number input of one vital sign cholesterol LDL (bad cholesterol) millimole per litre with one decimal point
    • vital-sign-heart-rate-as-beats-per-minute-view: number display of one vital sign heart rate in beats per minute (BPM) with integers
    • vital-sign-heart-rate-as-beats-per-minute-input: number input of one vital sign heart rate in beats per minute (BPM) with integers
    • vital-sign-heart-rate-variability-view: number display of one vital sign heart rate variability (HRV) with integers
    • vital-sign-heart-rate-variability-input: number input of one vital sign heart rate variability (HRV) with integers
    • vital-sign-height-as-cm-view: number display of one vital sign height in centimetres with integers
    • vital-sign-height-as-cm-input: number input of one vital sign height in centimetres with integers
    • vital-sign-respiratory-rate-as-breaths-per-minute-view: number display of one vital sign respiratory rate in breaths per minute with integers
    • vital-sign-respiratory-rate-as-breaths-per-minute-input: number input of one vital sign respiratory rate in breaths per minute with integers
    • vital-sign-sleep-score-as-0-to-100-view: number display of one vital sign sleep score from 0 to 100 with integers
    • vital-sign-sleep-score-as-0-to-100-input: number input of one vital sign sleep score from 0 to 100 with integers
    • vital-sign-total-sleep-time-as-min-per-day-view: number display of one vital sign total sleep time in minutes per day with integers
    • vital-sign-total-sleep-time-as-min-per-day-input: number input of one vital sign total sleep time in minutes per day with integers
    • vital-sign-vo2-max-as-ml-per-kg-per-minute-view: number display of one vital sign VO2 max in millilitres per kilogram per minute with integers
    • vital-sign-vo2-max-as-ml-per-kg-per-minute-input: number input of one vital sign VO2 max in millilitres per kilogram per minute with integers
    • vital-sign-waist-circumference-as-cm-view: number display of one vital sign waist circumference in centimetres with integers
    • vital-sign-waist-circumference-as-cm-input: number input of one vital sign waist circumference in centimetres with integers
    • vital-sign-belly-circumference-as-cm-view: number display of one vital sign belly circumference in centimetres with integers
    • vital-sign-belly-circumference-as-cm-input: number input of one vital sign belly circumference in centimetres with integers
    • vital-sign-weight-as-kg-view: number display of one vital sign weight in kilograms with integers
    • vital-sign-weight-as-kg-input: number input of one vital sign weight in kilograms with integers
  • warning-callout: a callout box highlighting a warning message
  • week-input: an input for selecting a week and year

Component name patterns

  • *Bar *BarButton
    • MenuBar MenuBarButton
    • TabBar TabBarButton
    • TaskBar TaskBarButton
    • ToolBar ToolBarButton
  • *Group *GroupItem
    • SegmentGroup SegmentGroupItem
  • *Guide *GuideList *GuideListItem
    • Tour TourList TourListItem
  • *List *ListItem
    • CheckList CheckListItem
    • ContentsList ContentsListItem
    • DoList DoListItem
    • DontList DontListItem
    • PaginationList PaginationListItem
    • SummaryList SummaryListItem
  • *Nav *List *ListItem
    • AccordionNav AccordionList AccordionListItem
    • BreadcrumbNav BreadcrumbList BreadcrumbListItem
    • ContentsNav ContentsList ContentsListItem
    • PaginationNav PaginationList PaginationListItem
    • TreeNav TreeList TreeListItem
  • *Select *SelectOption
    • ThemeSelect ThemeSelectOption
  • *Menu *MenuItem
    • ContextMenu ContextMenuItem
    • Menu MenuItem
  • *Input *Link
    • TelInput TelLink
    • EmailInput EmailLink
  • *Picker *PickerButton
    • ColorPicker ColorPickerButton
    • FiveFaceRatingPicker FiveFaceRatingPickerButton
    • FiveStarRatingPicker FiveStarRatingPickerButton
    • NetPromoterScorePicker NetPromoterScorePickerButton
    • RedAmberGreenPicker RedAmberGreenPickerButton
    • RedOrangeYellowGreenBluePicker RedOrangeYellowGreenBluePickerButton
  • *Table *TableHead *TableBody *TableFoot *TableCol *TableRow *TableData
    • Table TableHead TableBody TableFoot TableCol TableRow TableData
    • CalendarTable CalendarTableHead CalendarTableBody CalendarTableFoot CalendarTableCol CalendarTableRow CalendarTableData
    • DataTable DataTableHead DataTableBody DataTableFoot DataTableCol DataTableRow DataTableData
    • GanttTable GanttTableHead GanttTableBody GanttTableFoot GanttTableCol GanttTableRow GanttTableData
    • KanbanTable KanbanTableHead KanbanTableBody KanbanTableFoot KanbanTableCol KanbanTableRow KanbanTableData

Component patterns for name suffix and HTML tag

| Suffix | HTML tag | | ---------- | ------------ | | article | <article> | | aside | <aside> | | button | <button> | | dialog | <dialog> | | div | <div> | | fieldset | <fieldset> | | figure | <figure> | | footer | <footer> | | header | <header> | | input | <input> | | kbd | <kbd> | | list | <ol> | | list-item | <li> | | main | <main> | | meter | <meter> | | nav | <nav> | | option | <option> | | picker | <div> | | progress | <progress> | | table | <table> | | table-head | <thead> | | table-body | <tbody> | | table-foot | <tfoot> | | table-row | <tr> | | table-data | <td> | | select | <select> | | span | <span> |

Architecture

  • Svelte 5 with runes ($props(), $state(), $derived(), $bindable())
  • Headless design: no CSS, no styles -- consumers provide all styling
  • Accessible: WCAG 2.2 AAA, ARIA attributes, keyboard navigation
  • TypeScript: fully typed props and events
  • Internationalization: no hardcoded user-facing strings

Testing

Vitest + @testing-library/svelte for component testing. No @testing-library/jest-dom.

pnpm test          # run all tests
pnpm run test:ui   # open vitest UI
pnpm run test:watch # watch mode

Accessibility

All components follow WCAG 2.2 AAA guidelines:

  • Semantic HTML: Proper element usage (<button>, <nav>, <dialog>, etc.)
  • ARIA attributes: Roles, labels, states, and properties
  • Keyboard navigation: Full keyboard support for all interactive components
  • Screen readers: Proper announcements via aria-live, role="alert", etc.
  • Focus management: Logical focus order and visible focus indicators
  • Error handling: Accessible error messages linked via aria-errormessage

Internationalization

No strings are hardcoded in any component. All user-facing text comes through props. Labels, placeholders, and error messages are all configurable by the consumer.

Related Projects

License

MIT or Apache-2.0 or GPL-2.0 or GPL-3.0, or contact us for more options.

Contact

Joel Parker Henderson ([email protected])