@lilydesignsystem/svelte-headless 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/)
 and the package follows [Semantic Versioning](https://semver.org/).
 
+## 0.6.0 — 2026-10-23 (three components)
+
+- New: `HeatmapChartWithYearOfDays`, `MiddleTruncation`, `WheelPicker`.
+- `HeatmapChartWithYearOfDays`: a `HeatmapChart` for one year of days (required `year` and `weekStart`, reflected as `data-year` and `data-week-start`; a week-column by weekday-row layout contract).
+- `MiddleTruncation`: a string shortened in the middle to fit its width, keeping the start and the end; the shortened text is `aria-hidden` and the full text stays in the accessibility tree; `ellipsis` is required and has no default.
+- `WheelPicker`: a vertical single-select listbox where the selection follows the cursor (arrows, Home/End, Page keys, type-ahead, optional loop).
+- Contract fix: `Slider`'s documented root is `<input type="range">` (the docs said `<div>`); `aria-valuetext` documented. `Button` documents the pending-action pattern (`aria-busy`, `aria-disabled`, never `disabled`).
+- The 57 reference themes style the new components. See the repository CHANGELOG (2026-10-23).
+
 ## 0.5.1 — 2026-10-18 (Editable accessible name)
 
 - `Editable`: the display-mode button is named "value, label" (the label alone when the value is empty) so its visible text is part of its accessible name (WCAG 2.5.3).

package/README.md

@@ -0,0 +1,453 @@
+# Lily Design System™ - Svelte Headless
+
+A headless Svelte 5 component library with 490 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 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](https://github.com/LilyDesignSystem/lily) — 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/HeatmapChartWithYearOfDays/HeatmapChartWithYearOfDays.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    // HeatmapChartWithYearOfDays component
+    //
+    // A headless chart container. The consumer supplies the inline svg as
+    // `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, required. Accessible name of the chart image.
+    //   year — number, required. The calendar year the chart shows (data-year).
+    //   weekStart — number, required. First weekday row, 0 = Sunday … 6 = Saturday
+    //     (data-week-start). Locale-dependent, so there is no default.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="heatmap-chart-with-year-of-days">
+    //     <div class="heatmap-chart-with-year-of-days-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="heatmap-chart-with-year-of-days-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        year,
+        weekStart,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label: string;
+        /** The calendar year shown. */
+        year: number;
+        /** First weekday row: 0 = Sunday … 6 = Saturday. */
+        weekStart: number;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HeatmapChartWithYearOfDays.svelte -->
+<figure
+    class={`heatmap-chart-with-year-of-days ${className}`}
+    data-year={year}
+    data-week-start={weekStart}
+    {...restProps}
+>
+    <div class="heatmap-chart-with-year-of-days-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="heatmap-chart-with-year-of-days-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label: string;
+    /** The calendar year shown. */
+    year: number;
+    /** First weekday row: 0 = Sunday … 6 = Saturday. */
+    weekStart: number;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const HeatmapChartWithYearOfDays: import("svelte").Component<$$ComponentProps, {}, "">;
+type HeatmapChartWithYearOfDays = ReturnType<typeof HeatmapChartWithYearOfDays>;
+export default HeatmapChartWithYearOfDays;

package/dist/components/MiddleTruncation/MiddleTruncation.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    // MiddleTruncation component
+    //
+    // A string shortened in the middle to fit the width its container gives it ("report-fi…q3.pdf"), keeping the start and the
+    // end. The width is measured in the browser (canvas text metrics in the element's own font) and re-measured when the
+    // container resizes; until then, and on the server, the full text is shown.
+    //
+    // The full text always stays in the accessibility tree: the shortened string is aria-hidden and the whole text sits in a
+    // sibling the consumer visually hides. A screen reader, find-in-page and copy therefore get the real text, which a
+    // title attribute (hover only) or a text-only truncation would lose.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   text — string, required. The full text.
+    //   ellipsis — string, required. The cut marker. No default: the headless layer ships no text.
+    //   strategy — "even" | "fixed-end" | "min-end", default "even".
+    //     even: start and end share the room. fixed-end: exactly `end` characters at the end. min-end: even, but at least `end` at the end.
+    //   end — number, optional. Characters kept at the end for "fixed-end" and "min-end".
+    //   ...restProps — spread onto the root <span>.
+    //
+    // Markup:
+    //   <span class="middle-truncation" data-strategy data-truncated?>
+    //     <span class="middle-truncation-visual" aria-hidden="true">report-fi…q3.pdf</span>
+    //     <span class="middle-truncation-full">report-final-q3.pdf</span>
+    //   </span>
+    //
+    // Consumer CSS (the component ships none): the root must be a block with a bounded width, `overflow: hidden` and
+    // `white-space: nowrap`, and `.middle-truncation-full` must be visually hidden (clipped, not display:none).
+    //
+    // Keyboard: none.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles.
+    //   - No hardcoded user-facing strings: the ellipsis is a required prop.
+
+    import { onMount } from "svelte";
+    import { truncateMiddle, type TruncationStrategy } from "./middle-truncation";
+
+    let {
+        class: className = "",
+        text,
+        ellipsis,
+        strategy = "even",
+        end,
+        ...restProps
+    }: {
+        /** The full text. */
+        text: string;
+        /** The cut marker; no default. */
+        ellipsis: string;
+        /** How the room is shared between start and end. */
+        strategy?: TruncationStrategy;
+        /** Characters kept at the end for "fixed-end" and "min-end". */
+        end?: number;
+        [key: string]: unknown;
+    } = $props();
+
+    let root: HTMLSpanElement | undefined = $state();
+    let shown: string | null = $state(null);
+    const displayed = $derived(shown ?? text);
+
+    let context: CanvasRenderingContext2D | null | undefined;
+
+    function recalculate(): void {
+        if (!root) return;
+        const width = root.clientWidth;
+        if (context === undefined) context = document.createElement("canvas").getContext("2d");
+        if (!context || width <= 0) {
+            shown = null;
+            return;
+        }
+        const style = getComputedStyle(root);
+        context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+        const ctx = context;
+        const result = truncateMiddle(text, { ellipsis, strategy, end, maxWidth: width, measure: (s) => ctx.measureText(s).width });
+        shown = result === text ? null : result;
+    }
+
+    // Re-measure whenever the text or the options change.
+    $effect(() => {
+        text; ellipsis; strategy; end;
+        recalculate();
+    });
+
+    // Re-measure when the container resizes, at most once per animation frame.
+    onMount(() => {
+        if (!root || typeof ResizeObserver === "undefined") return;
+        let frame = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(recalculate);
+        });
+        observer.observe(root);
+        return () => {
+            cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    });
+</script>
+
+<!-- MiddleTruncation.svelte -->
+<span
+    bind:this={root}
+    class={`middle-truncation ${className}`}
+    data-strategy={strategy}
+    data-truncated={shown === null ? undefined : ""}
+    {...restProps}
+><span class="middle-truncation-visual" aria-hidden="true">{displayed}</span><span class="middle-truncation-full">{text}</span></span>

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

@@ -0,0 +1,15 @@
+import { type TruncationStrategy } from "./middle-truncation";
+type $$ComponentProps = {
+    /** The full text. */
+    text: string;
+    /** The cut marker; no default. */
+    ellipsis: string;
+    /** How the room is shared between start and end. */
+    strategy?: TruncationStrategy;
+    /** Characters kept at the end for "fixed-end" and "min-end". */
+    end?: number;
+    [key: string]: unknown;
+};
+declare const MiddleTruncation: import("svelte").Component<$$ComponentProps, {}, "">;
+type MiddleTruncation = ReturnType<typeof MiddleTruncation>;
+export default MiddleTruncation;

package/dist/components/MiddleTruncation/middle-truncation.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Middle truncation: shorten a string to fit a width by cutting out the middle, keeping the start and the end ("report-fi…q3.pdf").
+ * Pure and framework-neutral: the caller supplies `measure`, so the module reads no DOM and is tested without a browser.
+ *
+ * Works on grapheme clusters (Intl.Segmenter, falling back to code points), so it never splits a surrogate pair, a combining
+ * sequence or an emoji. The width search is binary, so it measures O(log n) candidate strings.
+ *
+ * Strategies:
+ *   "even"      the start and the end share what fits, the end taking the extra cluster when the count is odd.
+ *   "fixed-end" exactly `end` clusters are kept at the end; the start takes all the remaining room.
+ *   "min-end"   an even split, but at least `end` clusters are kept at the end (a file extension, a domain suffix).
+ */
+export type TruncationStrategy = "even" | "fixed-end" | "min-end";
+export interface TruncateMiddleOptions {
+    /** The ellipsis string. Required: the module has no default text (internationalisation). */
+    ellipsis: string;
+    /** The width available to the whole result, in the unit `measure` returns. */
+    maxWidth: number;
+    /** Width of a string in the same unit as `maxWidth`. */
+    measure: (text: string) => number;
+    strategy?: TruncationStrategy;
+    /** Clusters kept at the end for "fixed-end" and "min-end". Ignored by "even". */
+    end?: number;
+}
+/** Split into user-perceived characters. */
+export declare function splitGraphemes(text: string): string[];
+/** The text shortened to fit `maxWidth`, or unchanged when it already fits. */
+export declare function truncateMiddle(text: string, options: TruncateMiddleOptions): string;

package/dist/components/MiddleTruncation/middle-truncation.js

@@ -0,0 +1,67 @@
+/**
+ * Middle truncation: shorten a string to fit a width by cutting out the middle, keeping the start and the end ("report-fi…q3.pdf").
+ * Pure and framework-neutral: the caller supplies `measure`, so the module reads no DOM and is tested without a browser.
+ *
+ * Works on grapheme clusters (Intl.Segmenter, falling back to code points), so it never splits a surrogate pair, a combining
+ * sequence or an emoji. The width search is binary, so it measures O(log n) candidate strings.
+ *
+ * Strategies:
+ *   "even"      the start and the end share what fits, the end taking the extra cluster when the count is odd.
+ *   "fixed-end" exactly `end` clusters are kept at the end; the start takes all the remaining room.
+ *   "min-end"   an even split, but at least `end` clusters are kept at the end (a file extension, a domain suffix).
+ */
+/** Split into user-perceived characters. */
+export function splitGraphemes(text) {
+    const Segmenter = Intl.Segmenter;
+    if (Segmenter)
+        return Array.from(new Segmenter(undefined, { granularity: "grapheme" }).segment(text), (s) => s.segment);
+    return Array.from(text);
+}
+function clampEnd(end, length) {
+    if (end === undefined || !Number.isFinite(end))
+        return 0;
+    return Math.min(Math.max(Math.floor(end), 0), length);
+}
+/** The text shortened to fit `maxWidth`, or unchanged when it already fits. */
+export function truncateMiddle(text, options) {
+    const { ellipsis, maxWidth, measure, strategy = "even" } = options;
+    if (measure(text) <= maxWidth)
+        return text;
+    const g = splitGraphemes(text);
+    const n = g.length;
+    const tail = (count) => (count > 0 ? g.slice(n - count).join("") : "");
+    const head = (count) => g.slice(0, count).join("");
+    if (strategy === "fixed-end") {
+        const end = clampEnd(options.end, n);
+        const endText = tail(end);
+        const room = maxWidth - measure(ellipsis + endText);
+        let low = 0;
+        let high = n - end;
+        while (low < high) {
+            const middle = Math.ceil((low + high) / 2);
+            if (measure(head(middle)) <= room)
+                low = middle;
+            else
+                high = middle - 1;
+        }
+        return head(low) + ellipsis + endText;
+    }
+    const minEnd = strategy === "min-end" ? clampEnd(options.end, n) : 0;
+    const split = (kept) => {
+        const endCount = Math.min(n, Math.max(Math.ceil(kept / 2), minEnd));
+        return [Math.max(0, kept - endCount), endCount];
+    };
+    const room = maxWidth - measure(ellipsis);
+    let low = 0;
+    let high = n;
+    while (low < high) {
+        const middle = Math.ceil((low + high) / 2);
+        const [startCount, endCount] = split(middle);
+        if (measure(head(startCount) + tail(endCount)) <= room)
+            low = middle;
+        else
+            high = middle - 1;
+    }
+    const [startCount, endCount] = split(low);
+    return head(startCount) + ellipsis + tail(endCount);
+}

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -62,7 +62,7 @@
         /** Current value. Bindable. */
         value?: string;
         /** Autocomplete hint. */
-        autocomplete?: string;
+        autocomplete?: "current-password" | "new-password" | "off";
         /** Whether required. */
         required?: boolean;
         /** Whether disabled. */

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

@@ -4,7 +4,7 @@ type $$ComponentProps = {
     /** Current value. Bindable. */
     value?: string;
     /** Autocomplete hint. */
-    autocomplete?: string;
+    autocomplete?: "current-password" | "new-password" | "off";
     /** Whether required. */
     required?: boolean;
     /** Whether disabled. */

package/dist/components/TreeList/TreeList.svelte

@@ -40,7 +40,7 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles -- consumer provides all styling
-    //   - Queries [role='treeitem'] descendants for keyboard navigation
+    //   - Queries [role='treeitem'] descendants for keyboard navigation, skipping items inside a collapsed (aria-expanded=false) item
     //   - Uses $state() for internal DOM reference
     //
     // References:
@@ -68,7 +68,7 @@
         if (!treeRef) return;
         const items = Array.from(
             treeRef.querySelectorAll<HTMLElement>("[role='treeitem']"),
-        );
+        ).filter((el) => !el.parentElement?.closest("[role='treeitem'][aria-expanded='false']"));
         const current = document.activeElement as HTMLElement;
         const index = items.indexOf(current);
         switch (event.key) {

package/dist/components/TreeListItem/TreeListItem.svelte

@@ -3,16 +3,52 @@
     let {
         class: className = "",
         label = undefined,
+        expanded = $bindable(undefined),
         children,
         ...restProps
     }: {
         label?: string;
+        /** Expanded state, bindable. Leave undefined for a leaf (no aria-expanded). */
+        expanded?: boolean;
         children: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    // ArrowRight/ArrowLeft (WAI-ARIA tree pattern). Only for the focused item itself, not a
+    // nested one the event bubbled up from. Swapped in right-to-left layouts.
+    function onkeydown(event: KeyboardEvent) {
+        const item = event.currentTarget as HTMLElement;
+        if (event.target !== item) return;
+        const rtl = getComputedStyle(item).direction === "rtl";
+        const open = rtl ? "ArrowLeft" : "ArrowRight";
+        const close = rtl ? "ArrowRight" : "ArrowLeft";
+        if (event.key === open) {
+            if (expanded === false) {
+                event.preventDefault();
+                expanded = true;
+            } else if (expanded === true) {
+                const child = item.querySelector<HTMLElement>("[role='treeitem']");
+                if (child) {
+                    event.preventDefault();
+                    child.focus();
+                }
+            }
+        } else if (event.key === close) {
+            if (expanded === true) {
+                event.preventDefault();
+                expanded = false;
+            } else {
+                const parent = item.parentElement?.closest<HTMLElement>("[role='treeitem']");
+                if (parent) {
+                    event.preventDefault();
+                    parent.focus();
+                }
+            }
+        }
+    }
 </script>
 
 <!-- TreeListItem.svelte -->
-<div class={`tree-list-item ${className}`} aria-label={label} {...restProps}>
+<li class={`tree-list-item ${className}`} role="treeitem" tabindex="-1" aria-label={label} aria-expanded={expanded} {onkeydown} {...restProps}>
     {@render children?.()}
-</div>
+</li>

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

@@ -1,9 +1,11 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     label?: string;
+    /** Expanded state, bindable. Leave undefined for a leaf (no aria-expanded). */
+    expanded?: boolean;
     children: Snippet;
     [key: string]: unknown;
 };
-declare const TreeListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const TreeListItem: import("svelte").Component<$$ComponentProps, {}, "expanded">;
 type TreeListItem = ReturnType<typeof TreeListItem>;
 export default TreeListItem;

package/dist/components/WheelPicker/WheelPicker.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+    // WheelPicker component
+    //
+    // A vertical single-select listbox where the selection follows the cursor: moving with the arrow keys, typing, or
+    // clicking an option chooses it. Use it to pick one of a short list (hours, minutes, months, years) in the manner of a
+    // scroll wheel. The component owns the roles, the keys and the selected value; the wheel LOOK (scroll snapping, fading,
+    // 3-D) is the consumer's CSS. Pointer dragging and touch inertia are plain scrolling of `.wheel-picker-list`.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, required. Accessible name of the listbox.
+    //   options — { value: string; label: string; disabled?: boolean }[], required.
+    //   value — string, bindable, default "". The selected option's value; "" or an unknown value selects nothing.
+    //   loop — boolean, default false. Arrow keys wrap from the last enabled option to the first and back.
+    //   pageSize — number, default 5. Enabled options PageUp / PageDown move by.
+    //   disabled — boolean, default false. Ignores keys and clicks; not focusable.
+    //   name — string, optional. When set, a hidden input carries the value for a form.
+    //   onChange — (value: string) => void, optional. Called once when the selection changes.
+    //   ...restProps — spread onto the root <div>.
+    //
+    // Markup:
+    //   <div class="wheel-picker">
+    //     <div class="wheel-picker-list" role="listbox" aria-orientation="vertical" tabindex="0" aria-activedescendant>
+    //       <div class="wheel-picker-option" role="option" aria-selected aria-disabled? data-value>…</div>
+    //     </div>
+    //     <input type="hidden" name value>   (only with `name`)
+    //   </div>
+    //
+    // Keyboard (APG listbox, selection follows focus): ArrowDown / ArrowUp, Home / End, PageDown / PageUp, type-ahead over
+    // the labels. Disabled options are skipped.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no animation (the selected option is centred instantly).
+    //   - No hardcoded user-facing strings.
+
+    import {
+        isWheelTypeaheadKey,
+        nextWheelIndex,
+        nextWheelPrefix,
+        WHEEL_MOVE_KEYS,
+        wheelTypeaheadIndex,
+        type WheelMoveKey,
+        type WheelOption,
+        type WheelTypeahead,
+    } from "./wheel-picker";
+
+    let {
+        class: className = "",
+        label,
+        options,
+        value = $bindable(""),
+        loop = false,
+        pageSize = 5,
+        disabled = false,
+        name,
+        onChange,
+        ...restProps
+    }: {
+        /** Accessible name. */
+        label: string;
+        /** The choices. */
+        options: WheelOption[];
+        /** The selected option's value. Bindable. */
+        value?: string;
+        /** Arrow keys wrap at the ends. */
+        loop?: boolean;
+        /** Enabled options PageUp / PageDown move by. */
+        pageSize?: number;
+        /** Ignores keys and clicks. */
+        disabled?: boolean;
+        /** Form field name for a hidden input. */
+        name?: string;
+        /** Called once when the selection changes. */
+        onChange?: (value: string) => void;
+        [key: string]: unknown;
+    } = $props();
+
+    const uid = $props.id();
+    let list: HTMLElement | undefined = $state();
+    let typeahead: WheelTypeahead = { prefix: "", at: 0 };
+
+    const selectedIndex = $derived(options.findIndex((o) => o.value === value));
+
+    function select(index: number): void {
+        if (index < 0) return;
+        const next = options[index].value;
+        if (next === value) return; // applying the selection already held is a no-op
+        value = next;
+        onChange?.(next);
+    }
+
+    function onkeydown(event: KeyboardEvent): void {
+        if (disabled) return;
+        if (WHEEL_MOVE_KEYS.includes(event.key)) {
+            event.preventDefault();
+            select(nextWheelIndex(options, selectedIndex, event.key as WheelMoveKey, { loop, pageSize }));
+        } else if (isWheelTypeaheadKey(event)) {
+            typeahead = nextWheelPrefix(typeahead, event.key, Date.now());
+            select(wheelTypeaheadIndex(options, selectedIndex, typeahead.prefix));
+        }
+    }
+
+    function onclick(event: MouseEvent): void {
+        if (disabled) return;
+        const target = (event.target as Element).closest<HTMLElement>('[role="option"]');
+        if (!target || target.getAttribute("aria-disabled") === "true") return;
+        select(Number(target.getAttribute("data-index")));
+        list?.focus();
+    }
+
+    // Keep the selected option centred in the list. Only the list scrolls (never the page), and instantly: no animation.
+    $effect(() => {
+        const index = selectedIndex;
+        if (!list || index < 0) return;
+        const option = list.querySelector<HTMLElement>(`[data-index="${index}"]`);
+        if (!option) return;
+        list.scrollTop = option.offsetTop - (list.clientHeight - option.offsetHeight) / 2;
+    });
+</script>
+
+<!-- WheelPicker.svelte -->
+<div class={`wheel-picker ${className}`} {...restProps}>
+    <div
+        bind:this={list}
+        class="wheel-picker-list"
+        role="listbox"
+        aria-label={label}
+        aria-orientation="vertical"
+        aria-disabled={disabled ? "true" : undefined}
+        aria-activedescendant={selectedIndex >= 0 ? `${uid}-option-${selectedIndex}` : undefined}
+        tabindex={disabled ? -1 : 0}
+        {onkeydown}
+        {onclick}
+    >
+        {#each options as option, index (option.value)}
+            <div
+                class="wheel-picker-option"
+                role="option"
+                id={`${uid}-option-${index}`}
+                aria-selected={index === selectedIndex}
+                aria-disabled={option.disabled ? "true" : undefined}
+                data-value={option.value}
+                data-index={index}
+            >{option.label}</div>
+        {/each}
+    </div>
+    {#if name}
+        <input type="hidden" {name} {value} />
+    {/if}
+</div>

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

@@ -0,0 +1,23 @@
+import { type WheelOption } from "./wheel-picker";
+type $$ComponentProps = {
+    /** Accessible name. */
+    label: string;
+    /** The choices. */
+    options: WheelOption[];
+    /** The selected option's value. Bindable. */
+    value?: string;
+    /** Arrow keys wrap at the ends. */
+    loop?: boolean;
+    /** Enabled options PageUp / PageDown move by. */
+    pageSize?: number;
+    /** Ignores keys and clicks. */
+    disabled?: boolean;
+    /** Form field name for a hidden input. */
+    name?: string;
+    /** Called once when the selection changes. */
+    onChange?: (value: string) => void;
+    [key: string]: unknown;
+};
+declare const WheelPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type WheelPicker = ReturnType<typeof WheelPicker>;
+export default WheelPicker;

package/dist/components/WheelPicker/wheel-picker.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Keyboard model for a wheel picker: a single-select listbox where the selection follows the cursor (APG listbox, "selection
+ * follows focus"), so moving the cursor IS choosing. Pure and framework-neutral, tested without a browser.
+ *
+ * Disabled options are skipped by every move. Arrows wrap only when `loop` is set; Home, End, PageUp and PageDown never wrap.
+ */
+export interface WheelOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export type WheelMoveKey = "ArrowUp" | "ArrowDown" | "Home" | "End" | "PageUp" | "PageDown";
+export declare const WHEEL_MOVE_KEYS: readonly string[];
+export interface WheelMoveOptions {
+    /** Arrow keys wrap from the last enabled option to the first and back. Default false. */
+    loop?: boolean;
+    /** Enabled options PageUp / PageDown move by. Default 5. */
+    pageSize?: number;
+}
+/**
+ * The index to select after `key`, or -1 when no option can be selected. `current` is the selected index, or -1 for none.
+ * With nothing selected, ArrowDown / PageDown / Home choose the first enabled option and ArrowUp / PageUp / End the last.
+ */
+export declare function nextWheelIndex(options: readonly WheelOption[], current: number, key: WheelMoveKey, move?: WheelMoveOptions): number;
+export declare const WHEEL_TYPEAHEAD_RESET_MS = 700;
+export interface WheelTypeahead {
+    prefix: string;
+    at: number;
+}
+/** The prefix after `key` at time `now`: it grows while presses are within the reset time, else starts over. */
+export declare function nextWheelPrefix(previous: WheelTypeahead, key: string, now: number, resetMs?: number): WheelTypeahead;
+/** Whether a key press is a type-ahead character: one printable character other than space, no Ctrl, Alt or Meta. */
+export declare function isWheelTypeaheadKey(event: {
+    key: string;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+}): boolean;
+/**
+ * The enabled option to move to for the typed `prefix`, or -1. Searches from the option after `current` and wraps; a prefix of one
+ * repeated letter ("ss") counts as that single letter, so pressing it again steps through the options that start with it.
+ */
+export declare function wheelTypeaheadIndex(options: readonly WheelOption[], current: number, prefix: string): number;

package/dist/components/WheelPicker/wheel-picker.js

@@ -0,0 +1,79 @@
+/**
+ * Keyboard model for a wheel picker: a single-select listbox where the selection follows the cursor (APG listbox, "selection
+ * follows focus"), so moving the cursor IS choosing. Pure and framework-neutral, tested without a browser.
+ *
+ * Disabled options are skipped by every move. Arrows wrap only when `loop` is set; Home, End, PageUp and PageDown never wrap.
+ */
+export const WHEEL_MOVE_KEYS = ["ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"];
+/** Indexes of the options that can be selected. */
+function enabledIndexes(options) {
+    const out = [];
+    options.forEach((o, i) => {
+        if (!o.disabled)
+            out.push(i);
+    });
+    return out;
+}
+/**
+ * The index to select after `key`, or -1 when no option can be selected. `current` is the selected index, or -1 for none.
+ * With nothing selected, ArrowDown / PageDown / Home choose the first enabled option and ArrowUp / PageUp / End the last.
+ */
+export function nextWheelIndex(options, current, key, move = {}) {
+    const enabled = enabledIndexes(options);
+    if (enabled.length === 0)
+        return -1;
+    const first = enabled[0];
+    const last = enabled[enabled.length - 1];
+    const position = enabled.indexOf(current);
+    const pageSize = Math.max(1, Math.floor(move.pageSize ?? 5));
+    if (key === "Home")
+        return first;
+    if (key === "End")
+        return last;
+    if (position === -1)
+        return key === "ArrowDown" || key === "PageDown" ? first : last;
+    switch (key) {
+        case "ArrowDown":
+            return position + 1 < enabled.length ? enabled[position + 1] : move.loop ? first : current;
+        case "ArrowUp":
+            return position > 0 ? enabled[position - 1] : move.loop ? last : current;
+        case "PageDown":
+            return enabled[Math.min(enabled.length - 1, position + pageSize)];
+        case "PageUp":
+            return enabled[Math.max(0, position - pageSize)];
+    }
+}
+/** Lower-case and strip diacritics so "é" is typed with "e". */
+function fold(text) {
+    return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase();
+}
+export const WHEEL_TYPEAHEAD_RESET_MS = 700;
+/** The prefix after `key` at time `now`: it grows while presses are within the reset time, else starts over. */
+export function nextWheelPrefix(previous, key, now, resetMs = WHEEL_TYPEAHEAD_RESET_MS) {
+    const continuing = previous.prefix !== "" && now - previous.at <= resetMs;
+    return { prefix: (continuing ? previous.prefix : "") + key, at: now };
+}
+/** Whether a key press is a type-ahead character: one printable character other than space, no Ctrl, Alt or Meta. */
+export function isWheelTypeaheadKey(event) {
+    return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.altKey && !event.metaKey;
+}
+/**
+ * The enabled option to move to for the typed `prefix`, or -1. Searches from the option after `current` and wraps; a prefix of one
+ * repeated letter ("ss") counts as that single letter, so pressing it again steps through the options that start with it.
+ */
+export function wheelTypeaheadIndex(options, current, prefix) {
+    const folded = fold(prefix);
+    if (folded === "" || options.length === 0)
+        return -1;
+    const repeated = folded.length > 1 && [...folded].every((c) => c === folded[0]);
+    const needle = repeated ? folded[0] : folded;
+    const startOffset = needle.length > 1 ? 0 : 1;
+    const from = current < 0 ? -startOffset : current;
+    for (let step = 0; step < options.length; step++) {
+        const index = (from + startOffset + step + options.length) % options.length;
+        const option = options[index];
+        if (!option.disabled && fold(option.label).startsWith(needle))
+            return index;
+    }
+    return -1;
+}

package/dist/index.d.ts

@@ -241,6 +241,7 @@ export { default as HangukJuminDeungnokBeonhoView } from "./components/HangukJum
 export { default as Header } from "./components/Header/Header.svelte";
 export { default as Headline } from "./components/Headline/Headline.svelte";
 export { default as HeatmapChart } from "./components/HeatmapChart/HeatmapChart.svelte";
+export { default as HeatmapChartWithYearOfDays } from "./components/HeatmapChartWithYearOfDays/HeatmapChartWithYearOfDays.svelte";
 export { default as Hero } from "./components/Hero/Hero.svelte";
 export { default as HeroHeadline } from "./components/HeroHeadline/HeroHeadline.svelte";
 export { default as HiddenInput } from "./components/HiddenInput/HiddenInput.svelte";
@@ -323,6 +324,7 @@ export { default as MenuItem } from "./components/MenuItem/MenuItem.svelte";
 export { default as Meter } from "./components/Meter/Meter.svelte";
 export { default as MexicoClaveUnicaDeRegistroDePoblacionInput } from "./components/MexicoClaveUnicaDeRegistroDePoblacionInput/MexicoClaveUnicaDeRegistroDePoblacionInput.svelte";
 export { default as MexicoClaveUnicaDeRegistroDePoblacionView } from "./components/MexicoClaveUnicaDeRegistroDePoblacionView/MexicoClaveUnicaDeRegistroDePoblacionView.svelte";
+export { default as MiddleTruncation } from "./components/MiddleTruncation/MiddleTruncation.svelte";
 export { default as MisrAlRaqmAlQawmiInput } from "./components/MisrAlRaqmAlQawmiInput/MisrAlRaqmAlQawmiInput.svelte";
 export { default as MisrAlRaqmAlQawmiView } from "./components/MisrAlRaqmAlQawmiView/MisrAlRaqmAlQawmiView.svelte";
 export { default as MockupBrowser } from "./components/MockupBrowser/MockupBrowser.svelte";
@@ -565,6 +567,7 @@ export { default as Visible } from "./components/Visible/Visible.svelte";
 export { default as WarningCallout } from "./components/WarningCallout/WarningCallout.svelte";
 export { default as Watermark } from "./components/Watermark/Watermark.svelte";
 export { default as WeekInput } from "./components/WeekInput/WeekInput.svelte";
+export { default as WheelPicker } from "./components/WheelPicker/WheelPicker.svelte";
 export { default as YisraelTeudatZehutInput } from "./components/YisraelTeudatZehutInput/YisraelTeudatZehutInput.svelte";
 export { default as YisraelTeudatZehutView } from "./components/YisraelTeudatZehutView/YisraelTeudatZehutView.svelte";
 export { default as ZhongguoJuminShenfenzhengHaomaInput } from "./components/ZhongguoJuminShenfenzhengHaomaInput/ZhongguoJuminShenfenzhengHaomaInput.svelte";

package/dist/index.js

@@ -243,6 +243,7 @@ export { default as HangukJuminDeungnokBeonhoView } from "./components/HangukJum
 export { default as Header } from "./components/Header/Header.svelte";
 export { default as Headline } from "./components/Headline/Headline.svelte";
 export { default as HeatmapChart } from "./components/HeatmapChart/HeatmapChart.svelte";
+export { default as HeatmapChartWithYearOfDays } from "./components/HeatmapChartWithYearOfDays/HeatmapChartWithYearOfDays.svelte";
 export { default as Hero } from "./components/Hero/Hero.svelte";
 export { default as HeroHeadline } from "./components/HeroHeadline/HeroHeadline.svelte";
 export { default as HiddenInput } from "./components/HiddenInput/HiddenInput.svelte";
@@ -325,6 +326,7 @@ export { default as MenuItem } from "./components/MenuItem/MenuItem.svelte";
 export { default as Meter } from "./components/Meter/Meter.svelte";
 export { default as MexicoClaveUnicaDeRegistroDePoblacionInput } from "./components/MexicoClaveUnicaDeRegistroDePoblacionInput/MexicoClaveUnicaDeRegistroDePoblacionInput.svelte";
 export { default as MexicoClaveUnicaDeRegistroDePoblacionView } from "./components/MexicoClaveUnicaDeRegistroDePoblacionView/MexicoClaveUnicaDeRegistroDePoblacionView.svelte";
+export { default as MiddleTruncation } from "./components/MiddleTruncation/MiddleTruncation.svelte";
 export { default as MisrAlRaqmAlQawmiInput } from "./components/MisrAlRaqmAlQawmiInput/MisrAlRaqmAlQawmiInput.svelte";
 export { default as MisrAlRaqmAlQawmiView } from "./components/MisrAlRaqmAlQawmiView/MisrAlRaqmAlQawmiView.svelte";
 export { default as MockupBrowser } from "./components/MockupBrowser/MockupBrowser.svelte";
@@ -567,6 +569,7 @@ export { default as Visible } from "./components/Visible/Visible.svelte";
 export { default as WarningCallout } from "./components/WarningCallout/WarningCallout.svelte";
 export { default as Watermark } from "./components/Watermark/Watermark.svelte";
 export { default as WeekInput } from "./components/WeekInput/WeekInput.svelte";
+export { default as WheelPicker } from "./components/WheelPicker/WheelPicker.svelte";
 export { default as YisraelTeudatZehutInput } from "./components/YisraelTeudatZehutInput/YisraelTeudatZehutInput.svelte";
 export { default as YisraelTeudatZehutView } from "./components/YisraelTeudatZehutView/YisraelTeudatZehutView.svelte";
 export { default as ZhongguoJuminShenfenzhengHaomaInput } from "./components/ZhongguoJuminShenfenzhengHaomaInput/ZhongguoJuminShenfenzhengHaomaInput.svelte";

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lilydesignsystem/svelte-headless",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "engines": {
-    "node": "=26"
+    "node": ">=26"
   },
   "description": "A comprehensive headless Svelte 5 component library with 491 accessible, unstyled components for building design systems. Targets WCAG 2.2 AAA.",
   "scripts": {
@@ -10,7 +10,8 @@
     "prepublishOnly": "node build.mjs",
     "test": "vitest run",
     "test:ui": "vitest --ui",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "check": "svelte-check --tsconfig ./tsconfig.check.json"
   },
   "repository": {
     "type": "git",
@@ -42,6 +43,7 @@
     "@vitest/ui": "^5.0.5",
     "jsdom": "^30.1.3",
     "svelte": "^5.57.2",
+    "svelte-check": "^4.7.7",
     "vite": "^8.3.4",
     "vitest": "^5.0.5"
   },