# Svelte Lean

> Browser-native UI for Svelte. Semantic HTML first, zero runtime where the browser owns the behavior, small shared behaviors where it does not. Two products: Svelte Lean Primitives (@svelte-lean/primitives) and Svelte Lean Table (@svelte-lean/table).

Repository: https://github.com/say16/svelte-lean

## Site
- [Browser-native UI for Svelte.](https://svelte-lean.vercel.app/): Svelte Lean is a Svelte-first, browser-native UI ecosystem: semantic HTML first, zero runtime where the browser owns the behavior, small shared behaviors where it does not.
- [Proof](https://svelte-lean.vercel.app/proof): Live runtime inspector: primitives mounted on the page, registered behaviors, shared listeners counted two ways, loaded behavior modules, measured bundle sizes and browser capabilities.

## Docs
- [Introduction](https://svelte-lean.vercel.app/docs): What Svelte Lean is and is not, who it is for, the two products, how behavior is shipped, what exists today and where to go next.
- [Philosophy](https://svelte-lean.vercel.app/docs/philosophy): The core thesis, the three public messages, the seven Lean Rules with their engineering meaning, the mantra, and what the project does not claim.
- [Installation](https://svelte-lean.vercel.app/docs/installation): Install commands for every package, the three consumption modes with working snippets, the manual register escape hatch, the stylesheets and the build report.
- [Browser support](https://svelte-lean.vercel.app/docs/browser-support): The versioned support policy, the Baseline features each native path depends on, what happens outside the target, and the opt-in compatibility model.
- [Compatibility](https://svelte-lean.vercel.app/docs/compatibility): The version matrix of Svelte, SvelteKit, Vite, Node and the toolchain the packages are tested with, read from the repository files; the JavaScript output target and the deprecation rule.
- [Native-first](https://svelte-lean.vercel.app/docs/architecture/native-first): Why the platform owns behavior first, which native features are relied on, and what "Svelte Lean owns nothing" means.
- [Runtime tiers](https://svelte-lean.vercel.app/docs/architecture/runtime-tiers): The four runtime tiers with their budgets, how a primitive declares one, the classification of every primitive, and the ADR 0003 targets next to the measured values.
- [DOM protocol](https://svelte-lean.vercel.app/docs/architecture/dom-protocol): The data-slean attributes, one attribute per option, platform pseudo-classes and ARIA state, slean:* events, the static-marker requirement and the deprecation rule.
- [Build-time discovery](https://svelte-lean.vercel.app/docs/architecture/build-time-discovery): How @svelte-lean/vite scans static markers, injects register modules, writes the manifest and build report, and why there is no MutationObserver.
- [Distribution](https://svelte-lean.vercel.app/docs/distribution): Take what you need, ship what you use: the three consumption modes, subpath exports, the five shipping invariants with their tests, the manifest and every escape hatch.
- [Accessibility policy](https://svelte-lean.vercel.app/docs/architecture/accessibility): Accessibility as a runtime contract: APG conformance, what every contract specifies, focus and portal policy, the test layers and the test matrix with its gaps.
- [What we do not do](https://svelte-lean.vercel.app/docs/what-we-dont-do): The architecture explained by its omissions: no JavaScript dialog, no listener per instance, no MutationObserver, no mirrored state, no Provider, no positioning engine, no forced virtualization, no hidden cost.
- [Trade-offs](https://svelte-lean.vercel.app/docs/trade-offs): The costs of the native-first architecture: browser focus, a verbose protocol, author ids, complex widgets, build tooling, browser-defined semantics, and the preview status.
- [Compared with plain HTML](https://svelte-lean.vercel.app/docs/why-not-html): For native primitives plain HTML is sometimes enough; what the package adds at Tier 0 and at Tier 1, with the measured cost of each.
- [Compared with Bits UI](https://svelte-lean.vercel.app/docs/why-not-bits-ui): A component model and a platform-first DOM protocol compared without claims about the other library; when to choose which, and how they coexist.
- [Compared with shadcn-svelte](https://svelte-lean.vercel.app/docs/why-not-shadcn-svelte): Source-owned components and a native-first runtime architecture are different layers; where the ownership line is and how they coexist.
- [Compared with raw Svelte](https://svelte-lean.vercel.app/docs/why-not-raw-svelte): Raw Svelte can implement every primitive; what the package adds is a tested contract, shared runtime, discovery and styles, never a claim that Svelte is slow.

## Primitives
- [Primitives](https://svelte-lean.vercel.app/primitives): Every primitive with its tier, measured behavior JavaScript, platform features and status, and how a primitive page is organised.
- [Button](https://svelte-lean.vercel.app/primitives/button): Native <button> with command and commandfor, styling hooks, and when a button is a link.
- [Button group](https://svelte-lean.vercel.app/primitives/button-group): Buttons joined into one control with shared borders, in a role="group".
- [Toggle](https://svelte-lean.vercel.app/primitives/toggle): A button with aria-pressed: one shared click listener flips the pressed state, which lives in the attribute.
- [Toggle group](https://svelte-lean.vercel.app/primitives/toggle-group): Buttons with aria-pressed in a group: single or multiple selection and roving focus, state in the attributes.
- [Toolbar](https://svelte-lean.vercel.app/primitives/toolbar): role="toolbar" with roving focus across its controls; the controls keep their own behavior.
- [Input](https://svelte-lean.vercel.app/primitives/input): Native text inputs and textarea: types, sizes, field-sizing and the :user-invalid state, styled without a wrapper component.
- [Field](https://svelte-lean.vercel.app/primitives/field): Label, control, description and error message laid out and related with author ids; the application renders the error with aria-invalid.
- [Select](https://svelte-lean.vercel.app/primitives/select): Tier 2 owned select over a native <select>: placeholder, clear button, groups, multiple with tags, sizes and status, the same in every browser; the native select without JavaScript.
- [Checkbox](https://svelte-lean.vercel.app/primitives/checkbox): Native checkbox including indeterminate, :checked and :indeterminate styling, label association and forms.
- [Switch](https://svelte-lean.vercel.app/primitives/switch): A checkbox with role="switch": what changes for assistive technology, styling the track and thumb, reduced motion.
- [Radio group](https://svelte-lean.vercel.app/primitives/radio-group): Native radios sharing a name inside a fieldset: the browser owns selection, arrow keys and form participation; styling the mark and disabled state.
- [Segmented control](https://svelte-lean.vercel.app/primitives/segmented): Radio inputs drawn as a segmented bar: one choice, arrow keys and the form value from the platform.
- [Rating](https://svelte-lean.vercel.app/primitives/rating): Radio inputs drawn as stars: a single choice with native keyboard, form value and labels.
- [Slider](https://svelte-lean.vercel.app/primitives/slider): The native range input: keyboard, pointer, step and form value from the platform, the track and thumb from the stylesheet.
- [Range slider](https://svelte-lean.vercel.app/primitives/range-slider): Two range inputs for a start and an end: one shared input listener keeps them ordered and paints the selected segment.
- [Number field](https://svelte-lean.vercel.app/primitives/number-field): A native number input with optional step buttons that call stepUp() and stepDown() through one shared click listener.
- [One-time code](https://svelte-lean.vercel.app/primitives/otp-field): One native input for a verification code, drawn as cells; paste, autofill and SMS codes keep working.
- [File field](https://svelte-lean.vercel.app/primitives/file-field): The native file input with a styled selector button: picking, multiple, accept and the form value are the platform's.
- [File drop](https://svelte-lean.vercel.app/primitives/file-drop): A drop area around a native file input: the drop and the picker are the input’s; the area marks a drag and lists the chosen files.
- [Color field](https://svelte-lean.vercel.app/primitives/color-field): The native color input: the platform's picker and a hex value.
- [Autocomplete](https://svelte-lean.vercel.app/primitives/autocomplete): A text input with a <datalist>: suggestions rendered by the browser, free text kept.
- [Listbox](https://svelte-lean.vercel.app/primitives/listbox): Tier 1 selection widget: single and multi-select, automatic and manual modes, typeahead, orientation, RTL, keyboard, ARIA relationships and the slean:change event.
- [Combobox](https://svelte-lean.vercel.app/primitives/combobox): Tier 2 lazy scoped controller: a native text input in a field that opens on click, with a clear button, a check mark on the chosen option, an empty state, filters, autoselect, IME-safe keys, an asynchronous list and the slean:select event.
- [Date field](https://svelte-lean.vercel.app/primitives/date-field): Native date and time inputs (date, time, datetime-local, month, week): segmented entry, validation and the platform picker. For an application date field, the Date picker.
- [Calendar](https://svelte-lean.vercel.app/primitives/calendar): A month grid with single, range and multiple selection, year and month buttons, two months for a range with a preview, keyboard across months and locale titles; state in attributes, no memory.
- [Date picker](https://svelte-lean.vercel.app/primitives/date-picker): Tier 2 date field over a native date input: a formatted text input, clear button and calendar popup with Today; a range picker with two months and presets; the native input without JavaScript.
- [Dialog](https://svelte-lean.vercel.app/primitives/dialog): Native <dialog> modal and non-modal paths, command="show-modal" and "close", top layer, Escape and focus return, form method dialog, SSR and no-JS behavior.
- [Alert dialog](https://svelte-lean.vercel.app/primitives/alert-dialog): A modal <dialog role="alertdialog"> that requires an explicit answer: no light dismiss, focus on the least destructive action.
- [Drawer](https://svelte-lean.vercel.app/primitives/drawer): A modal dialog at an edge of the viewport: the platform owns the top layer, inertness, Escape and focus return.
- [Popover](https://svelte-lean.vercel.app/primitives/popover): The popover attribute (auto and manual), popovertarget, CSS anchor positioning with position-area, and the fallback without anchor positioning.
- [Tooltip](https://svelte-lean.vercel.app/primitives/tooltip): A popover="hint" with role="tooltip", shown on hover and focus after a delay and hidden with Escape, through shared listeners.
- [Hover card](https://svelte-lean.vercel.app/primitives/hover-card): A preview shown when a pointer rests on a link or the link gets keyboard focus: a hint popover with interactive content, reachable with Tab.
- [Menu](https://svelte-lean.vercel.app/primitives/menu): Menu button and popover menu with delegated keyboard navigation, typeahead, closing rules and the tier as declared in its contract.
- [Context menu](https://svelte-lean.vercel.app/primitives/context-menu): A menu opened where the user asks for it: secondary click, long press, the context-menu key or Shift+F10.
- [Menubar](https://svelte-lean.vercel.app/primitives/menubar): A row of menus with one tab stop: the side arrows move between items and between open menus, ArrowDown opens one.
- [Toast](https://svelte-lean.vercel.app/primitives/toast): Transient messages in a popover="manual" region: created by the application, dismissed by a timer that pauses on hover and focus.
- [Tabs](https://svelte-lean.vercel.app/primitives/tabs): Tier 1 delegated behavior: markup, activation modes, orientation, RTL, keyboard, ARIA relationships, SSR ids, automatic and manual registration.
- [Breadcrumb](https://svelte-lean.vercel.app/primitives/breadcrumb): A nav with an ordered list of links and aria-current="page" on the last one.
- [Pagination](https://svelte-lean.vercel.app/primitives/pagination): Links to pages in a nav with aria-current="page"; the application owns the page number.
- [Steps](https://svelte-lean.vercel.app/primitives/steps): An ordered list of the steps of a task with aria-current="step".
- [Tree](https://svelte-lean.vercel.app/primitives/tree): role="tree" with nested groups: expansion and roving focus through shared listeners, state in aria-expanded and tabindex.
- [Disclosure](https://svelte-lean.vercel.app/primitives/disclosure): <details> and <summary>, exclusive accordions through the name attribute, styling the marker and animating the open state.
- [Accordion](https://svelte-lean.vercel.app/primitives/accordion): A group of <details> sharing a name: one open at a time, native keyboard and find-in-page.
- [Card](https://svelte-lean.vercel.app/primitives/card): An <article> with a header, body and footer: a container with no behavior.
- [Splitter](https://svelte-lean.vercel.app/primitives/splitter): Two panes with a draggable, keyboard-operable separator (WAI-ARIA window splitter).
- [Scroll area](https://svelte-lean.vercel.app/primitives/scroll-area): A focusable scrolling region with thin native scrollbars, and edge shadows where scroll-driven animations are supported.
- [Separator](https://svelte-lean.vercel.app/primitives/separator): <hr>, or role="separator" between inline items.
- [Avatar](https://svelte-lean.vercel.app/primitives/avatar): An image with initials behind it, in sizes and groups.
- [Badge](https://svelte-lean.vercel.app/primitives/badge): A short status or count next to other content.
- [Tag](https://svelte-lean.vercel.app/primitives/tag): A labelled item with an optional remove button; removal is the application's.
- [Keyboard key](https://svelte-lean.vercel.app/primitives/kbd): The <kbd> element drawn as a key.
- [Carousel](https://svelte-lean.vercel.app/primitives/carousel): A scroll-snapping row with native scroll buttons and markers where the browser draws them.
- [Descriptions](https://svelte-lean.vercel.app/primitives/descriptions): Label and value pairs in a <dl>, laid out as a grid.
- [Timeline](https://svelte-lean.vercel.app/primitives/timeline): Dated events in an ordered list along a line.
- [Alert](https://svelte-lean.vercel.app/primitives/alert): A message block with role="status" or role="alert" and a tone: information, success, warning or danger.
- [Progress](https://svelte-lean.vercel.app/primitives/progress): The native <progress>, determinate and indeterminate.
- [Meter](https://svelte-lean.vercel.app/primitives/meter): The native <meter> with low, high and optimum regions.
- [Spinner](https://svelte-lean.vercel.app/primitives/spinner): A labelled busy indicator drawn in CSS, still under reduced motion.
- [Skeleton](https://svelte-lean.vercel.app/primitives/skeleton): Placeholders for content that is loading, hidden from assistive technology.
- [Empty state](https://svelte-lean.vercel.app/primitives/empty): What a list, table or search shows when it has nothing: a heading, a message and an action.

## Table
- [Table](https://svelte-lean.vercel.app/table): Svelte Lean Table: the capability levels from Table to Data Grid, measured sizes per entry point, and the full specimen index.
- [Getting started](https://svelte-lean.vercel.app/table/getting-started): Install, import, the three required props, the style import, the first render, binding state, and the semantic <table> output.
- [Columns](https://svelte-lean.vercel.app/table/columns): Column definition: accessors, headers, formatting, cell snippets, grouped headers, pinning, visibility, resize and reorder, ellipsis and spans.
- [Layout](https://svelte-lean.vercel.app/table/layout): Table-level presentation: density, stripes, borders, sticky header, fixed height and scrolling surface, caption and label.
- [Rows](https://svelte-lean.vercel.app/table/rows): Row identity, expandable details, tree data with getSubRows, row reordering, row events and application-owned row animation.
- [Sorting](https://svelte-lean.vercel.app/table/sorting): Single and multi-column sort, sort priority, custom comparators, controlled sort state and aria-sort.
- [Filtering](https://svelte-lean.vercel.app/table/filtering): Global search, per-column filters and operators, controlled filter state, and how filtering composes with pagination and selection.
- [Selection](https://svelte-lean.vercel.app/table/selection): Single and multiple selection, disabled rows, select-all scope, controlled selection and keyboard.
- [Pagination](https://svelte-lean.vercel.app/table/pagination): Client pagination, page size, disabling pagination, the pager accessible names and the pointer to server pagination.
- [Editing](https://svelte-lean.vercel.app/table/editing): Cell editing, validation, applyEdit, history and undo as an opt-in module, and the keyboard flow in an editing cell.
- [Grouping & Pivot](https://svelte-lean.vercel.app/table/grouping-pivot): The groupBy row model, aggregates, the summaries row and the pivot helper; separate entry points that cost nothing until imported.
- [Clipboard & Export](https://svelte-lean.vercel.app/table/clipboard-export): Range selection, copy and paste as TSV, CSV export with quoting and formula protection, and downloadText.
- [Server data](https://svelte-lean.vercel.app/table/server-data): Manual mode, rowCount, loading, error and empty states, retry, and stale-request handling left to the application.
- [State persistence](https://svelte-lean.vercel.app/table/state-persistence): serializeState and restoreState, what is persisted, dropping columns that no longer exist, storage as the application choice.
- [Localization & RTL](https://svelte-lean.vercel.app/table/localization-rtl): The messages object, shipped en and tr, replacing every string, locale for formatting, and dir="rtl" mirroring.
- [Data Grid](https://svelte-lean.vercel.app/table/data-grid): Data Grid as a capability level: which features make a table a grid, what is implemented today, what is not, and how to compose them.
- [Accessibility](https://svelte-lean.vercel.app/table/accessibility): Native table semantics, aria-sort, selection announcements, keyboard paths, what the application must supply, and how it is tested.
- [API reference](https://svelte-lean.vercel.app/table/api): Exports, DataTable props, Column options, table state, events, messages and modules on one anchored page.

## Styling
- [Styling](https://svelte-lean.vercel.app/styling): The three styling modes, granular entry points, cascade layers, and the absence of a Tailwind or CSS-in-JS dependency.
- [Tokens](https://svelte-lean.vercel.app/styling/tokens): Every --slean-* token with its default value and purpose, rendered from the tokens file and grouped by kind.
- [Themes](https://svelte-lean.vercel.app/styling/themes): Overriding tokens on :root or a subtree, dark theme through prefers-color-scheme, data-theme or the dark class, presets, and why there is no Provider.
- [Variants](https://svelte-lean.vercel.app/styling/variants): Variant selection through data-slean-* attributes, low-specificity selectors, and adding your own variants.
- [Tailwind CSS](https://svelte-lean.vercel.app/styling/tailwind): Using @svelte-lean/styles with Tailwind CSS v4: the layer order, the import order, @theme inline mappings from the --slean-* tokens and overriding a primitive with utilities.
- [Owned styles](https://svelte-lean.vercel.app/styling/owned-styles): Copying a primitive CSS file into the application and owning it; the future slean add marked as not available; behavior stays in npm.

## Performance
- [Performance](https://svelte-lean.vercel.app/performance): What is measured, what is not claimed, the five shipping invariants, and links to methodology, budgets and results.
- [Methodology](https://svelte-lean.vercel.app/performance/methodology): Build settings, browser and OS versions, hardware, iterations, median and p95, fixtures, and the command that reproduces each number.
- [Budgets](https://svelte-lean.vercel.app/performance/budgets): Per-primitive and per-entry-point budgets, targets marked as targets until measured, and the listener budget for 1 versus 1000 roots.
- [Results](https://svelte-lean.vercel.app/performance/results): Measured numbers only: sizes per entry point, listener counts, table render and sort timings and fixture assertions, each with environment and command.

## Demos
- [Demos](https://svelte-lean.vercel.app/demos): The demo applications: which primitives and table features each one exercises, the one that is built, and the three that are not yet.
- [Settings application](https://svelte-lean.vercel.app/demos/settings): An account-settings screen built from Tabs, Dialog, Popover, Menu, Switch, checkbox, radio group, native select, forms and a DataTable of sessions, with a live runtime panel and a without-JavaScript checklist under it.