lily-design-system-svelte-headless
v0.2.0
Published
Lily Design System - Svelte 5 headless component library
Downloads
132
Maintainers
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 modeAccessibility
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
- Lily Design System — Parent project
- Svelte SvelteKit Examples — Example app with simple styling
- React Headless — React equivalent
- Vue Headless — Vue equivalent
- Blazor Headless — Blazor equivalent
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])
