@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/CHANGELOG.md

@@ -3,6 +3,11 @@
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/)
 and the package follows [Semantic Versioning](https://semver.org/).
 
+
+## 0.6.2 — 2026-11-03
+
+- Fixed: the published barrel now exports every component in the catalog (recent components were missing). Dependencies updated within range (Svelte 5.57.3).
+
 ## 0.6.0 — 2026-10-23 (three components)
 
 - New: `HeatmapChartWithYearOfDays`, `MiddleTruncation`, `WheelPicker`.
@@ -114,7 +119,7 @@ Metadata-only patch; no code change. Ships the corrected package
 metadata to the registry:
 
 - `license` is the project SPDX menu (`MIT OR Apache-2.0 OR
-  GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause`), replacing the
+GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause`), replacing the
   single-license field that contradicted the repository's LICENSE.md.
 - `repository`, `homepage`, and `bugs` point at the LilyDesignSystem
   organisation and the documentation site.

package/LICENSE.md

@@ -8,15 +8,15 @@ Lily Design System™ is free open source software.
 
 License is any of these, at your option, or contact us for custom license options.
 
-* [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
+- [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
 
-* [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
+- [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
 
-* [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
+- [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
 
-* [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
+- [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
 
-* [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
+- [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
 
 ## SPDX
 
@@ -31,9 +31,9 @@ single identifier from the list where the packaging format does not accept a
 disjunction. You do not need permission to pick one: choose whichever member of
 the list suits your project and comply with that one.
 
-This applies to the whole repository — the component catalog, the seven headless
-libraries, the seven example applications, the seven helper catalogs, the
-`themes/` stylesheets, the `bin/` tooling, and the documentation.
+This applies to the whole repository — the component catalog, the headless
+libraries, the example applications, the helper packages, the `themes/`
+stylesheets, the `bin/` tooling, and the documentation.
 
 ## Scope note
 

package/README.md

@@ -0,0 +1,453 @@
+# Lily Design System™ - Svelte Headless
+
+A headless Svelte 5 component library with 607 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-th**: 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-td**: 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-th**: 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-td**: 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**: paired start and end date inputs
+- **date-time-now-input**: an input for entering a date and time and "now" button
+- **date-time-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-thead**: a Gantt chart table interactive grid thead for planning schedule visualization
+  - **gantt-table-tbody**: a Gantt chart table interactive grid tbody for planning schedule visualization
+  - **gantt-table-tfoot**: a Gantt chart table interactive grid tfoot for planning schedule visualization
+  - **gantt-table-th**: a Gantt chart table interactive grid column for planning schedule visualization
+  - **gantt-table-tr**: a Gantt chart table interactive grid row for planning schedule visualization
+  - **gantt-table-td**: 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-th**: 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-td**: 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-portrait**: 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-th**: a table column
+  - **table-row**: a table row
+  - **table-td**: 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
+- **text-area-input**: a multi-line text input area
+- **text-area-input-with-character-counter**: a multi-line text area with character counter
+- **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
+- **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 \*TableTD \*TableRow \*TableTD
+  - Table TableHead TableBody TableFoot TableTD TableRow TableTD
+  - CalendarTable CalendarTableHead CalendarTableBody CalendarTableFoot CalendarTableTD CalendarTableRow CalendarTableTD
+  - DataTable DataTableHead DataTableBody DataTableFoot DataTableTD DataTableRow DataTableTD
+  - GanttTable GanttTableHead GanttTableBody GanttTableTfoot GanttTableTH GanttTableTr GanttTableTD
+  - KanbanTable KanbanTableHead KanbanTableBody KanbanTableFoot KanbanTableTD KanbanTableRow KanbanTableTD
+
+## 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-td   | `<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.
+
+```sh
+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**: native elements are keyboard-operable by default; about 34 components add APG key handling (arrows, Home/End, Escape, type-ahead) — see each component's `AGENTS.md`
+- **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](https://github.com/LilyDesignSystem/lily-design-system) — Parent project
+- [Svelte SvelteKit Examples](../lily-design-system-svelte-sveltekit-examples/) — Example app with simple styling
+- [React Headless](../lily-design-system-react-headless/) — React equivalent
+- [Vue Headless](../lily-design-system-vue-headless/) — Vue equivalent
+- [Blazor Headless](../lily-design-system-blazor-headless/) — Blazor equivalent
+- [Angular Headless](../lily-design-system-angular-headless/) — Angular 20 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 (joel@joelparkerhenderson.com)
+
+---
+
+Lily™ and Lily Design System™ are trademarks.

package/dist/components/AccordionLink/AccordionLink.svelte

@@ -2,17 +2,27 @@
     import type { Snippet } from "svelte";
     let {
         class: className = "",
+        href,
         label = undefined,
         children,
         ...restProps
     }: {
+        /** The URL to navigate to. */
+        href: string;
+        /** Accessible label override for screen readers. */
         label?: string;
+        /** The link content. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();
 </script>
 
 <!-- AccordionLink.svelte -->
-<div class={`accordion-link ${className}`} aria-label={label} {...restProps}>
+<a
+    class={`accordion-link ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</a>

package/dist/components/AccordionLink/AccordionLink.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
+    /** The URL to navigate to. */
+    href: string;
+    /** Accessible label override for screen readers. */
     label?: string;
+    /** The link content. */
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/ActionBar/ActionBar.svelte

@@ -90,7 +90,7 @@
             class="action-bar-clear"
             type="button"
             aria-label={clearSelectionLabel}
-            onclick={onClearSelection}
-        >×</button>
+            onclick={onClearSelection}>×</button
+        >
     {/if}
 </div>

package/dist/components/ActionGroup/ActionGroup.svelte

@@ -33,11 +33,12 @@
     //   - Adobe Spectrum ActionGroup: https://spectrum.adobe.com/page/action-group/
 
     import type { Snippet } from "svelte";
+    import { popoverState, popoverSupported, toggleOpened } from "../Popover/popover.js";
 
     let {
         class: className = "",
         label,
-        overflowOpen = false,
+        overflowOpen = $bindable(false),
         overflowLabel = undefined,
         onOverflowToggle = undefined,
         children = undefined,
@@ -47,18 +48,30 @@
         class?: string;
         /** Accessible label for the group (REQUIRED) */
         label: string;
-        /** Whether the overflow menu is open */
+        /** Whether the overflow menu is open. Bindable: the browser opens and light-dismisses it. */
         overflowOpen?: boolean;
         /** Accessible label for the overflow trigger button */
         overflowLabel?: string;
-        /** Click handler for the overflow trigger */
-        onOverflowToggle?: () => void;
+        /** Click handler for the overflow trigger; call preventDefault() on the event to keep the menu as it is */
+        onOverflowToggle?: (event: MouseEvent) => void;
         /** Visible action buttons */
         children?: Snippet;
         /** Overflow menu content */
         overflow?: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    const uid = $props.id();
+    const menuId = `action-group-overflow-menu-${uid}`;
+    let menu: HTMLDivElement | undefined = $state();
+
+    // With the Popover API the trigger's command="toggle-popover" opens and closes the menu and the toggle event
+    // writes `overflowOpen` back; without it, the click toggles `overflowOpen` and popoverState sets `hidden`.
+    function toggle(event: MouseEvent) {
+        onOverflowToggle?.(event);
+        if (event.defaultPrevented) return;
+        if (menu && !popoverSupported(menu)) overflowOpen = !overflowOpen;
+    }
 </script>
 
 <!-- ActionGroup.svelte -->
@@ -78,9 +91,20 @@
             aria-haspopup="menu"
             aria-expanded={overflowOpen}
             aria-label={overflowLabel}
-            onclick={onOverflowToggle}
-        >…</button>
-        <div class="action-group-overflow-menu" hidden={!overflowOpen}>
+            aria-controls={menuId}
+            command="toggle-popover"
+            commandfor={menuId}
+            popovertarget={menuId}
+            onclick={toggle}>…</button
+        >
+        <div
+            bind:this={menu}
+            class="action-group-overflow-menu"
+            id={menuId}
+            popover="auto"
+            use:popoverState={overflowOpen}
+            ontoggle={(event) => (overflowOpen = toggleOpened(event))}
+        >
             {@render overflow()}
         </div>
     {/if}

package/dist/components/ActionGroup/ActionGroup.svelte.d.ts

@@ -3,18 +3,18 @@ type $$ComponentProps = {
     class?: string;
     /** Accessible label for the group (REQUIRED) */
     label: string;
-    /** Whether the overflow menu is open */
+    /** Whether the overflow menu is open. Bindable: the browser opens and light-dismisses it. */
     overflowOpen?: boolean;
     /** Accessible label for the overflow trigger button */
     overflowLabel?: string;
-    /** Click handler for the overflow trigger */
-    onOverflowToggle?: () => void;
+    /** Click handler for the overflow trigger; call preventDefault() on the event to keep the menu as it is */
+    onOverflowToggle?: (event: MouseEvent) => void;
     /** Visible action buttons */
     children?: Snippet;
     /** Overflow menu content */
     overflow?: Snippet;
     [key: string]: unknown;
 };
-declare const ActionGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ActionGroup: import("svelte").Component<$$ComponentProps, {}, "overflowOpen">;
 type ActionGroup = ReturnType<typeof ActionGroup>;
 export default ActionGroup;