# Staticview

> Framework-agnostic web components, authored as standard HTML/CSS/TS and compiled to zero-dependency custom elements.

Every link below points to a Markdown file.
[llms-full.txt](https://staticview.a-labs.space/llms-full.txt) inlines the Guides and Components sections into one file.

## Guides

- [Web Components Handbook](https://staticview.a-labs.space/llms/docs/pages/contents/handbook.md): A practical guide to using web components. This covers the core concepts you need to work with any web component library effectively.
- [Installation](https://staticview.a-labs.space/llms/docs/pages/contents/installation.md): Install the core package containing all components and types.
- [Angular](https://staticview.a-labs.space/llms/docs/pages/contents/setup/angular.md)
- [Astro](https://staticview.a-labs.space/llms/docs/pages/contents/setup/astro.md)
- [Editor Support](https://staticview.a-labs.space/llms/docs/pages/contents/setup/editor-support.md): The package ships editor metadata for all components: autocomplete for tags and attributes, hover documentation, and richer tooling integration. No generation step is required; the files are included in the npm package.
- [Preact](https://staticview.a-labs.space/llms/docs/pages/contents/setup/preact.md)
- [Qwik](https://staticview.a-labs.space/llms/docs/pages/contents/setup/qwik.md)
- [React 18 and earlier](https://staticview.a-labs.space/llms/docs/pages/contents/setup/react18.md)
- [React 19+](https://staticview.a-labs.space/llms/docs/pages/contents/setup/react19.md)
- [SolidJS](https://staticview.a-labs.space/llms/docs/pages/contents/setup/solidjs.md)
- [Svelte](https://staticview.a-labs.space/llms/docs/pages/contents/setup/svelte.md)
- [Theming](https://staticview.a-labs.space/llms/docs/pages/contents/setup/theming.md): Staticview components are styled through CSS custom properties (`--sv-*` tokens). Custom properties inherit, so you can define the tokens once on `:root`, or override the color and size tokens on a specific container to theme just a part of the page.
- [Vanilla HTML](https://staticview.a-labs.space/llms/docs/pages/contents/setup/vanilla-html.md)
- [Vue](https://staticview.a-labs.space/llms/docs/pages/contents/setup/vue.md)

## Authoring

- [Documenting Web Components](https://staticview.a-labs.space/llms/docs/pages/contents/authoring/documenting.md): This guide explains how to document Web Components using JSDoc comments. The analyzer reads your source files and extracts as much information as it can automatically. JSDoc tags let you fill in the gaps, override inferred values, and provide richer documentation where needed.
- [Writing Web Components for staticview](https://staticview.a-labs.space/llms/docs/pages/contents/authoring/guidelines.md): This guide is for writing staticview components, or your own components built with its build tool.
- [Limitations and Workarounds](https://staticview.a-labs.space/llms/docs/pages/contents/authoring/limitations.md): Web components have platform-level limitations that affect accessibility, typing, developer experience, and lifecycle behavior. Each section below describes a known limitation, the available workaround, and its tradeoffs.
- [Macros](https://staticview.a-labs.space/llms/docs/pages/contents/authoring/macros.md): Macros are build-time functions that are replaced with generated code during compilation. They eliminate boilerplate common to every web component. Each macro is available globally and requires no import.

## Agents

- [Writing Components](https://staticview.a-labs.space/llms/docs/sources/agents/writing-components.md): Instructions for AI agents writing staticview components in a user's project.

## Packages

- [@staticview/cli](https://staticview.a-labs.space/llms/packages/cli/README.md): A set of commands for working with `@staticview/ui` web components.
- [@staticview/eslint-plugin](https://staticview.a-labs.space/llms/packages/eslint-plugin/README.md): `@staticview/eslint-plugin` is an ESLint plugin for authoring web components with the `@staticview/core` build system. It enforces patterns and constraints specific to staticview components, covering custom element conventions, build-time compatibility, DOM API usage, and framework type generation.
- [@staticview/staticbolt-plugin](https://staticview.a-labs.space/llms/packages/staticbolt-plugin/README.md): A staticbolt plugin for compiling web components with `@staticview/core`.
- [@staticview/ui](https://staticview.a-labs.space/llms/packages/ui/README.md)
- [@staticview/vite-plugin](https://staticview.a-labs.space/llms/packages/vite-plugin/README.md): A Vite plugin for compiling web components with `@staticview/core`.

## Components

- [Accordion](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-accordion.md): `sv-accordion` expands and collapses a section of content beneath a summary header.
- [Alert Stack](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-alert-stack.md): `sv-alert-stack` displays stackable alerts on the page's top layer.
- [Anchor](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-anchor.md): `sv-anchor` positions an element beside an anchor rectangle and tries fallback placements until one fits inside the visible viewport. It has no attributes or slots; configure it from JavaScript through its properties.
- [Code Editor](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-code-editor.md): `sv-code-editor` is a simple code editor with pluggable syntax highlighting.
- [Collapsible](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-collapsible.md): `sv-collapsible` expands and collapses content, and optionally manages the disclosure trigger for it.
- [Combobox](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-combobox.md): `sv-combobox` combines an editable text field with a listbox. Use `sv-select` when users should choose without typing: a combobox keeps focus in its text field, while a select moves focus through its options.
- [Dialog](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-dialog.md): `sv-dialog` presents important information, requests decisions, or handles tasks in a modal or non-modal dialog above the page.
- [Expression Parser](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-expression-parser.md): `sv-expression-parser` parses and evaluates user-defined expressions without `eval()` or `new Function()`. It builds an AST from the source string and walks it, so an expression can be inspected before it runs.
- [Flyout](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-flyout.md): `sv-flyout` presents supplementary content in an animated popover beside a trigger element.
- [Menu](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-menu.md): `sv-menu` adds command-menu and submenu keyboard behavior to a nested `sv-flyout`. The flyout still owns the trigger, placement, animation, and dismissal.
- [Progress Bar](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-progress-bar.md): `sv-progress-bar` is a straight bar that visually represents progress.
- [Progress Ring](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-progress-ring.md): `sv-progress-ring` is an SVG-based ring that visually represents progress.
- [Radio](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-radio.md): `sv-radio` is a radio button that groups like a native one. Radios with the same `name` in the same form are one group, and checking one unchecks the rest.
- [Rating](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-rating.md): `sv-rating` lets users pick a value by clicking or dragging across a row of shapes.
- [Reveal Animation](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-reveal-animation.md): `sv-reveal-animation` reveals elements as they scroll into view by toggling classes on them.
- [Segmented Control](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-segmented-control.md): `sv-segmented-control` is a single-selection control, comparable to a radio button group, that submits its selected value with forms.
- [Select](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-select.md): `sv-select` adds listbox selection, keyboard navigation, and form participation to a nested `sv-flyout`. Use `sv-combobox` when users should be able to type to filter.
- [Slider](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-slider.md): `sv-slider` is a range control for selecting one or more ordered numeric values by dragging or using the keyboard.
- [sv-store](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-store.md): `sv-store` defines a reactive state store that can be consumed by other Web Components through `<sv-ui-state>`.
- [Template](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-template.md): `sv-template` stamps out HTML templates at runtime with real data.
- [Text Flow](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-text-flow.md): `sv-text-flow` animates rapidly changing text and works best for small text or numbers. It is decorative and provides no functional value.
- [Toggle Checkbox](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-toggle-checkbox.md): `sv-toggle-checkbox` selects or deselects a single independent option, with an indeterminate state for partial selections.
- [Toggle Group](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-toggle-group.md): `sv-toggle-group` coordinates a set of `sv-toggle` buttons: exclusive selection, whole-group disabling, and a combined value.
- [Toggle Switch](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-toggle-switch.md): `sv-toggle-switch` toggles a single setting on or off.
- [Toggle](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-toggle.md): `sv-toggle` is a button that switches a single option on or off and keeps the pressed state visible.
- [Tooltip](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-tooltip.md): `sv-tooltip` shows a short label beside an element on hover or keyboard focus.
- [UI State](https://staticview.a-labs.space/llms/packages/ui/docs/components/sv-ui-state.md): `sv-ui-state` brings reactive state to plain HTML: declare named stores, bind them to DOM elements, and the page updates automatically. No framework required.

## Examples

- [Accordion Checkout Steps](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/checkout-steps.example.md): Each step is an accordion in the same `group`. Later steps start `disabled` until the previous one is completed, and `open()` moves the flow forward while earlier steps stay reachable for edits.
- [Accordion: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/basic.example.md): Text in the `summary` slot forms the always-visible header, and everything else becomes the collapsible content.
- [Accordion: Opened and Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/states.example.md): `opened` expands the accordion from markup, and `disabled` locks it in its current state, open or closed.
- [Accordion: Marker](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/marker.example.md): `marker` moves the icon to the start or removes it entirely. The end is the default. An icon slotted as `marker` replaces the chevron and picks up the same size, color, and rotation. Set `rotate: none` on it to opt out of the rotation.
- [Accordion: Group](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/group.example.md): Accordions sharing a `group` name open one at a time. Opening one closes the rest, anywhere on the page.
- [Accordion: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/styling.example.md): The color, border, and radius tokens the accordion reads can be overridden per element, and the shadow parts cover the rest.
- [Accordion: Animation](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/animation.example.md): `--sv-accordion-dur` and `--sv-accordion-ease` reshape the expand transition and the marker rotation together, and a zero duration turns them off. The reduced motion fallback wins over both. The `--opened` state flips as soon as the accordion toggles, so slotted content can animate alongside the expand.
- [Accordion: Programmatic](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/programmatic.example.md): `open`, `close`, and `toggle` drive the accordion from JavaScript, and each takes an optional flag that skips the animation.
- [Accordion FAQ Card](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/faq-card.example.md): A shared `group` keeps one answer open at a time. `::part(container)` joins the accordions into a single card by collapsing the doubled borders and rounding only the outer corners. The card is a labeled `section`, and `heading-level` slots the questions into the page outline as level 2 headings.
- [Accordion Sidebar Navigation](https://staticview.a-labs.space/llms/docs/sources/examples/accordion/sidebar-navigation.example.md): Nested accordions form a collapsible nav tree. `heading-level="none"` leaves the outline to the list structure, `marker="start"` reads as a tree toggle, and the parts strip the boxed look.
- [Alert Stack: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/basic.example.md): `create()` adds an alert to the stack and `severity` picks its icon and color. Hover over the stack to expand it, or focus it with the keyboard.
- [Alert Stack: Auto Dismiss](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/auto-dismiss.example.md): `duration` removes the alert after the given milliseconds. Expanding the stack postpones the timer, so an alert never disappears mid-read.
- [Alert Stack: Action Button](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/action-button.example.md): `actionButton` replaces the default Dismiss button with a custom label and click handler. `create()` returns a function that removes the alert, and `actionButton: null` drops the button entirely.
- [Alert Stack: Custom Icon](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/custom-icon.example.md): `iconOverride` receives the alert's severity and returns an element that replaces the default icon. A `part` attribute on the returned element makes it targetable from your stylesheet.
- [Alert Stack: Position](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/position.example.md): The stack sits at the bottom end of the screen by default. `top`, `start`, and `center` move it, and they can be combined.
- [Alert Stack: Swipe Dismiss](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/swipe-dismiss.example.md): `swipe-dismiss` on the stack lets cards be dragged away horizontally. `swipeToDismiss: false` opts a single alert out.
- [Alert Stack: Limits](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/limits.example.md): `max-items` caps the stack and removes the oldest alert when exceeded. `max-expanded-items` sets how many cards the expanded stack shows.
- [Alert Stack: Keyboard Shortcut](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/shortcut.example.md): `shortcut` sets the key combination that focuses and expands the stack, `Alt+A` here. `Tab` moves between the cards and `Escape` collapses the stack and returns focus.
- [Alert Stack: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/styling.example.md): The cards read their own tokens, so overriding `--sv-info` or `--sv-alert-stack-bdr-rad` on the element restyles them. `--sv-alert-stack-dur` adjusts the animation speed, and the exposed parts cover the rest.
- [Alert Stack Undo Delete](https://staticview.a-labs.space/llms/docs/sources/examples/alert-stack/undo-delete.example.md): Deleting a message hides its row and queues an alert instead of removing it right away. The Undo action restores the row and calls the dismiss function returned by `create()`. The `itemschange` event reports each alert as it starts leaving, and a row that is still hidden at that point is deleted for good.
- [Anchor Example](https://staticview.a-labs.space/llms/docs/sources/examples/anchor/basic.example.md): Use `autoupdate` to reposition anchored content as its anchor moves.
- [Code Editor: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/basic.example.md): The initial code comes from the slotted content, and the editor is a plain text area until a highlighter is assigned. `expand` grows it to fit the number of lines instead of scrolling inside a fixed height.
- [Code Editor: Syntax Highlighting](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/highlighting.example.md): `highlighter` takes the whole code and returns the highlighted HTML for it, so any highlighting library works. The theme itself lives outside the shadow DOM, so `code-stylesheet` points at the `<link>` or `<style>` that holds it.
- [Code Editor: Line Numbers](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/line-numbers.example.md): `linenumbers` adds the gutter, and the line under the cursor is marked as active.
- [Code Editor: Sizing](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/sizing.example.md): Without `expand` the editor fills the height you give it and scrolls, sideways as well when a line is too long. `wrap` breaks those long lines instead.
- [Code Editor: Buttons](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/buttons.example.md): `copy-button` copies the whole code to the clipboard, and `wrap-button` toggles wrapping from inside the editor.
- [Code Editor: Readonly](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/readonly.example.md): `readonly` blocks editing while keeping the code selectable, which is what a snippet display needs.
- [Code Editor: One Line](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/one-line.example.md): `one-line` makes the editor behave like a single line input: `Enter` does nothing and pasted newlines are stripped.
- [Code Editor: Tab Size](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/tabsize.example.md): `tabsize` is the number of spaces `Tab` inserts. Put the cursor at the start of a line and press `Tab` in both editors to compare.
- [Code Editor: Header and Footer](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/header-footer.example.md): The `header` and `footer` slots sit above and below the code, inside the editor's border.
- [Code Editor: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/styling.example.md): The font, line height, padding, and gutter width are custom properties on the host. Everything else is reached through parts, and `:state(--focused)` covers the focused editor.
- [Code Editor: Formula Field](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/formula-field.example.md): A spreadsheet-style formula field in a "new column" form, highlighted, yet indistinguishable from the native inputs around it. `one-line` makes the editor behave like an input, and `block-size: 1lh` on the textarea holds it to one line.
- [Code Editor JSON Settings](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/json-settings.example.md): A settings file edited in place: the footer reports the parse error as you type, and saving stays blocked until the JSON is valid again.
- [Code Editor Live Preview](https://staticview.a-labs.space/llms/docs/sources/examples/code-editor/live-preview.example.md): The `valuechange` event drives a sandboxed iframe, so the markup renders as it is typed. Writes are debounced, since every keystroke would otherwise reload the frame.
- [Collapsible: Advanced Settings](https://staticview.a-labs.space/llms/docs/sources/examples/collapsible/advanced-settings.example.md): A form card whose rarely used fields sit behind an "Advanced settings" disclosure. The trigger's chevron rotates on the `--opened` state. The collapsed fields are hidden rather than removed, so they leave the tab order but keep their values, and inside a real `form` they still submit.
- [Collapsible: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/collapsible/basic.example.md): A `button` in the `trigger` slot toggles the content, and the component keeps the button's disclosure ARIA attributes in sync. The component brings no styling of its own: the trigger and the content look however your page styles them, and only the expansion is animated.
- [Collapsible: Initial Open State](https://staticview.a-labs.space/llms/docs/sources/examples/collapsible/initial-open.example.md): `opened` in the markup makes the content start expanded, with no opening animation on load. Toggling it later, from markup or script, plays the normal animated transition.
- [Collapsible: Animation](https://staticview.a-labs.space/llms/docs/sources/examples/collapsible/animation.example.md): `--sv-collapsible-open-dur`, `--sv-collapsible-close-dur`, `--sv-collapsible-open-ease`, and `--sv-collapsible-close-ease` retime the built-in transition for each direction separately. Variables set from the page win over the component's reduced motion fallback, so zero them yourself under `prefers-reduced-motion: reduce`.
- [Collapsible: Reply Composer](https://staticview.a-labs.space/llms/docs/sources/examples/collapsible/reply-composer.example.md): An inline reply composer that folds out of a comment, in the style of threaded discussion UIs. When `transitionfinish` fires, the textarea grabs focus if the composer is open and is cleared if it is closed, once the text is out of sight. That way Cancel and a sent reply both leave a clean composer behind. The event does not bubble, so the listener sits on the collapsible itself. Swap the send button's `close()` call for your actual submit logic.
- [Collapsible: Show More](https://staticview.a-labs.space/llms/docs/sources/examples/collapsible/show-more.example.md): An article clipped to its opening paragraph, with a button below that reveals the rest. The `trigger` slot renders above the expander, so a trigger that belongs below the content is placed after the collapsible and named with `trigger-element` instead. The collapsible carries the `--opened` state, so the fading mask on the teaser and the button's label swap are plain CSS on `:has(:state(--opened))`, with no script involved. Both labels share one grid cell, so the button keeps its size when the label swaps.
- [Combobox: Country Picker](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/countries.example.md): A country field built from data, with a flag beside every name. A custom `filter` matches the name anywhere, or the exact country code, so `de` finds Germany.
- [Combobox: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/basic.example.md): The combobox brings its own text field; you supply an `sv-flyout` with one `button` per option, each carrying a unique `value`.
- [Combobox: Multiple](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/multiple.example.md): `multiple` turns option clicks into toggles: selections become chips, and the list stays open while you keep picking.
- [Combobox: Filtering](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/filtering.example.md): `filter` picks how the query is matched against the option text; type "blue" in each field below to compare `contains` with `startswith`. `filter="none"` switches the built-in matching off for lists driven by script, as the Package Search showcase does.
- [Combobox: Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/disabled.example.md): An option with `disabled` cannot be picked, and the flyout's starter styling gives it no distinct look, so dim it yourself. Disabling the combobox shuts down the whole field, and an ancestor disabled `fieldset` does the same.
- [Combobox: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/styling.example.md): Component tokens cover the common knobs: `--sv-combobox-focus-bdr-clr` set on the combobox recolors the focus border and the selected option together. The built-in field is styled through parts, so shape changes like a pill outline go on `::part(trigger)`.
- [Combobox: Package Search](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/package-search.example.md): A dependency picker that loads its results from a search instead of static markup. `filter="none"` turns off the built-in matching, and a `querychange` listener sends the request. A pick resets the query to empty, so the listener searches by the picked value instead, and the list still holds it when it opens again.
- [Combobox: Recipient Field](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/recipients.example.md): A To field where every chosen person becomes a tag. `data-combobox-label` keeps the email out of the tags, a custom `filter` matches it, and `::part(chip)` styles the tags.
- [Combobox: Timezone Picker](https://staticview.a-labs.space/llms/docs/sources/examples/combobox/timezones.example.md): A timezone field that searches by city, with the options grouped by region. A region hides itself once none of its cities match.
- [Dialog Confirm Delete](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/confirm-delete.example.md): One dialog serves every row in the list. Clicking Delete stores the row's id on the dialog, fills in the project name, and calls `open()`. `ignore-escape` with no close button forces an explicit Cancel or Delete, and confirming removes the stored row.
- [Dialog Custom Animation](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/custom-animation.example.md): Custom enter and exit animations replace the built-in slide, in CSS alone. The `--opened` state mirrors the `opened` property, so it applies the enter animations the moment the dialog opens, and its absence applies the exit pair the moment it starts closing. The backdrop is animated through the `dialog` part and the card through the `wrapper` part.
- [Dialog: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/basic.example.md): A `button` with `data-dialog-toggle` pointing at the dialog's id opens and closes it. `close-button` shows the built-in close button, and `aria-labelledby` names the dialog.
- [Dialog: Non-Modal](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/non-modal.example.md): `non-modal` leaves the page usable while the dialog is open, and `backdrop-dismiss` closes it on an outside click. A non-modal dialog still dims the page, so `--sv-dialog-backdrop-bg: transparent` drops the dimming.
- [Dialog: Ignore Escape](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/ignore-escape.example.md): `ignore-escape` blocks the Escape key, so a dialog without a close button only closes through its own buttons. Use it when leaving the dialog must be a deliberate choice.
- [Dialog: Close Button](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/close-button.example.md): An element with `slot="close-icon"` replaces the built-in cross inside the close button, and your stylesheet targets it directly since it stays in your document. Leaving the `close-button` attribute off removes the button entirely, and the Escape key still closes the dialog.
- [Dialog: Scrolling](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/scrolling.example.md): Content taller than the dialog scrolls inside it, and the close button stays pinned to the corner. The scrollbar picks up `--sv-dialog-scrollbar-clr`, which defaults to `--sv-accent`.
- [Dialog: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/dialog/styling.example.md): `--sv-dialog-backdrop-bg` tints the backdrop, `--sv-dialog-bdr-rad` rounds the corners, and `--sv-dialog-dur` slows the animation. The exposed parts handle the rest, like the content padding here.
- [Animated Flyout](https://staticview.a-labs.space/llms/docs/sources/examples/flyout/custom-animation.example.md): A notifications panel that grows out of the bell instead of the default height reveal. Animate the `expander` part from `:state(--opening)` and `:state(--closing)`, and keep it laid out while closing. Gate the replacement for reduced motion yourself.
- [Flyout: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/flyout/basic.example.md): The first element assigned to the `trigger` slot toggles the flyout on click, and the default slot provides the popover content. Escape or a click outside closes it again, so nothing beyond the markup is needed.
- [Flyout: Positions](https://staticview.a-labs.space/llms/docs/sources/examples/flyout/positions.example.md): `position-order` lists the position areas to try, where each entry names the side, the alignment against the trigger, and the alignment of the flyout itself. An area that cannot fit is passed over for the next one, so the first flyout below opens above its trigger and drops back under it when the room above runs out.
- [Flyout: Custom States](https://staticview.a-labs.space/llms/docs/sources/examples/flyout/custom-states.example.md): Target the `--opened`, `--opening`, and `--closing` states with `:state()` to style the trigger's open look, or anything beside the flyout, like the label above this trigger. `--opened` lands as the opening begins rather than when it ends, so an open look starts together with the animation.
- [Action Menu](https://staticview.a-labs.space/llms/docs/sources/examples/menu/action-menu.example.md): A kebab button opening an actions menu with icons and two hover-opening submenus. The submenus sit beside their trigger through the nested flyout's `position-order="horizontal"`, with `--sv-flyout-offset: 0` removing the gap so the pointer never crosses a dead zone on its way in. Every leaf action closes the whole tree through the root menu's `close()`.
- [Menu: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/menu/basic.example.md): `sv-menu` wraps an `sv-flyout` and turns the flyout's content into a command menu: keyboard navigation, typeahead, and the `menu` popup role come with it, while the `menuitem` roles stay yours to declare. Acting on a chosen item is also yours: handle its click and call `close()`, as every example here does.
- [Menu: Items](https://staticview.a-labs.space/llms/docs/sources/examples/menu/items.example.md): Menu items are simply the focusable elements in the flyout's content. The disabled Paste here keeps its place in the list while the arrow keys skip over it.
- [Submenus](https://staticview.a-labs.space/llms/docs/sources/examples/menu/submenus.example.md): A nested `sv-menu` with `mode="submenu"` turns its flyout into a submenu branch. Hover-opening and the side placement come from the nested flyout's `open-on-hover` and `position-order` attributes.
- [Context Menu](https://staticview.a-labs.space/llms/docs/sources/examples/menu/context-menu.example.md): `mode="context"` opens the menu from a `contextmenu` event inside the trigger, right at the pointer. The trigger stays the keyboard path: focus it and press Shift+F10 or the menu key.
- [File Context Menu](https://staticview.a-labs.space/llms/docs/sources/examples/menu/file-context-menu.example.md): A file row that opens its context menu on right-click, touch and hold, or Shift+F10 while focused. The row itself is the flyout's trigger, so the open menu stays anchored to it while the page scrolls. `--sv-flyout-offset: 0` lets the menu open flush at the pointer instead of a step away from it. Each option reports the chosen action to an `aria-live` line before closing the menu.
- [Global Context Menu](https://staticview.a-labs.space/llms/docs/sources/examples/menu/global-context-menu.example.md): A context menu for a whole surface, with no trigger in the flyout at all. A `contextmenu` listener on the area assigns `openAtPosition`, and the menu opens at that fixed viewport coordinate. Scrolling is locked while the menu is open, because a fixed coordinate does not follow the page. Closing clears `openAtPosition` again: with no position and no trigger, the menu cannot open, so a right-click outside the area does nothing.
- [Progress Bar: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/value.example.md): Set `value` within the `min`/`max` range, and the fill animates to every assigned value. The bar takes the full width of its container.
- [Progress Bar: Indeterminate](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/indeterminate.example.md): Without a `value`, the bar is indeterminate and a short fill slides along the track until one is assigned.
- [Progress Bar: Label](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/label.example.md): Slotted content sits in a row before the track, with the first and last element pushed to opposite ends. A child with `data-percentage` or `data-value` renders the current number, and the attribute's number sets the decimal places. A `data-value-text` element supplies `aria-valuetext`, since slotted content is hidden from assistive technology. Set `flex-direction: column-reverse` on the bar to move the content below the track.
- [Progress Bar: Fill Content](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/fill-content.example.md): Content in the `fill` slot is centered inside the filled portion. Make the track and the fill thick enough for the text.
- [Progress Bar: Buffer](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/buffer.example.md): `buffer-value` shows a second, fainter fill behind the first one, for content that loads ahead of the current position. It uses the same range as `value`, and `buffer-percentage` sets it as a percentage of that range.
- [Progress Bar: Vertical](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/vertical.example.md): `vertical` turns the bar upright and fills it from the bottom. A vertical bar has no height of its own. Give it one. With `flex-direction: row` and `align-items: stretch`, the content sits beside the track instead of above it.
- [Progress Bar: Download](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/download.example.md): Assign `value` from JavaScript whenever progress arrives, and the fill animates to it on its own.
- [Progress Bar: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/styling.example.md): Custom properties control the thickness, corner radius, and colors of the track and the fill.
- [Progress Bar Upload Queue](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/upload-queue.example.md): Files upload one after another, and a `data-state` attribute on each row drives its look from CSS. Setting `value` to `null` makes a bar indeterminate while the server prepares the file, then the percentage takes over. Each bar is named by its file name through `aria-labelledby`, and the status text carries `data-value-text`.
- [Progress Bar Video Player](https://staticview.a-labs.space/llms/docs/sources/examples/progress-bar/video-player.example.md): `max` is the video length in seconds, so `value` is the playback position and `buffer-value` is how far the video has loaded. The buffer stays 30 seconds ahead of the fill. The time label carries `data-value-text`, so assistive technology hears "1:05 of 3:20" instead of a raw number.
- [Progress Ring Activity Rings](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/activity-rings.example.md): The rings share one grid cell and nest by size alone. Each ring tints its own track by setting `--sv-progress-ring-track-clr` to a transparent `color-mix()` of its fill color, and `light-dark()` adapts the palette to the color scheme. Assigning `value` animates each fill, with `--sv-progress-ring-dur` and `--sv-progress-ring-ease` shaping the motion.
- [Progress Ring Countdown](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/countdown.example.md): `--sv-progress-ring-clockwise: -1` reverses the fill direction, and a linear `--sv-progress-ring-ease` with a one second `--sv-progress-ring-dur` makes each tick blend into the next. The `data-value-text` child keeps `aria-valuetext` in sync with the formatted time.
- [Progress Ring: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/value.example.md): Set `value` within the `min`/`max` range, and the fill animates to every assigned value. The ring fills the element, so give it a size.
- [Progress Ring: Indeterminate](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/spinner.example.md): Without a `value`, the ring is indeterminate and spins until one is assigned.
- [Progress Ring: Content](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/content.example.md): Slotted content is centered inside the ring. A child with `data-percentage` or `data-value` renders the current number, and the attribute's number sets the decimal places. A `data-value-text` element supplies `aria-valuetext`, since slotted content is hidden from assistive technology.
- [Progress Ring: Download](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/download.example.md): Assign `value` from JavaScript whenever progress arrives, and the fill animates to it on its own.
- [Progress Ring: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/styling.example.md): Custom properties control the thickness, line cap, fill direction, and colors of the ring.
- [Progress Ring: Dashed](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/dashed.example.md): Split the fill into dashes with `--sv-progress-ring-dash-num`, and set the space between them with `--sv-progress-ring-dash-gap`.
- [Progress Ring File Download](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/file-download.example.md): A `data-state` attribute on the card drives every visual state from CSS. Setting `value` to `null` spins the ring while connecting, and the `data-percentage` child fills in once the transfer begins. The file icon and the ring share a fixed grid cell, so swapping them causes no layout shift.
- [Progress Ring Spinners](https://staticview.a-labs.space/llms/docs/sources/examples/progress-ring/spinners.example.md): `:state(--indeterminate)` scopes the overrides to the spinning state. The built-in motion lives on `::part(fill)`, so an `animation` there replaces it, while `::part(svg)` adds rotation of the whole ring. `stroke-dasharray` reshapes the arc against the ring's path length, held in a `--path-length` variable that custom properties carry into the shadow tree, keyframes included.
- [Radio Color Swatches](https://staticview.a-labs.space/llms/docs/sources/examples/radio/color-swatches.example.md): A product color picker where each radio is the color itself. A check slotted into `dot` draws itself in from `:state(--checked)`, and `aria-label` names each swatch.
- [Radio: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/radio/basic.example.md): Radios with the same `name` form one group, and the checked one submits its `value` with the form. Tab stops once on the group, and the arrow keys move the choice.
- [Radio: Checked and Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/radio/states.example.md): `checked` picks the starting radio, and `disabled` takes a radio out of the group's keyboard order. A container with `role="radiogroup"` and a label names a group that has no `<fieldset>`.
- [Radio: Custom Dot](https://staticview.a-labs.space/llms/docs/sources/examples/radio/dot.example.md): The `dot` slot puts any markup in the center of the ring. It is always shown, so this example scales it in from `:state(--checked)`, with a thinner checked border to leave room for it.
- [Radio: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/radio/styling.example.md): `--sv-radio-sz` scales the ring, the color tokens tint it, and `--sv-radio-active-bdr-sz` sets how thick it gets when checked.
- [Radio: Animation](https://staticview.a-labs.space/llms/docs/sources/examples/radio/animation.example.md): `--sv-radio-dur` and `--sv-radio-ease` shape how the ring thickens and changes color. The default easing is springy, and a zero duration makes the radio instant.
- [Radio Shipping Options](https://staticview.a-labs.space/llms/docs/sources/examples/radio/shipping-options.example.md): A checkout step where each radio is a full row with its delivery time and price. The radios submit with the form, so the total reads the choice straight from `FormData`.
- [Radio Traveling Dot](https://staticview.a-labs.space/llms/docs/sources/examples/radio/traveling-dot.example.md): One shared dot glides to the checked radio with `anchor()`, with no script. Browsers without anchor positioning keep the radios' own ring.
- [Rating: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/rating/value.example.md): The rating is a slider: click or drag to set a value, and arrow keys adjust it by `step`, half a star by default. Hovering previews the value a click would commit. Give it an accessible name with `aria-label`.
- [Rating: Step and Max](https://staticview.a-labs.space/llms/docs/sources/examples/rating/step-max.example.md): `step` sets the increment, and `max` sets the number of shapes along with the highest value.
- [Rating: Readonly and Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/rating/states.example.md): `readonly` displays a value, like an average score, without allowing interaction. `disabled` blocks interaction too, and dims the shapes.
- [Rating: No Preview](https://staticview.a-labs.space/llms/docs/sources/examples/rating/no-preview.example.md): `no-preview` stops the hover fill, so the shapes only reflect the committed value. Compare by hovering both.
- [Rating: Labels](https://staticview.a-labs.space/llms/docs/sources/examples/rating/labels.example.md): `labels` maps values to text for `aria-valuetext`, so assistive technology announces "Good" instead of "3 of 5". `valuechange` fires whenever the value changes, mirrored here under the rating.
- [Rating: Single Fill](https://staticview.a-labs.space/llms/docs/sources/examples/rating/single-fill.example.md): `single-fill` fills only the shape at the current value, for discrete choices like mood or pain scales.
- [Rating: Custom Shapes](https://staticview.a-labs.space/llms/docs/sources/examples/rating/custom-shapes.example.md): A slotted SVG replaces the default star and is cloned for each shape, with the fill and stroke colors applied by the component. With several SVGs, they are assigned in order and the last one repeats for the remaining shapes.
- [Rating: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/rating/styling.example.md): The size and color tokens can be overridden per element, and the container part controls the layout between shapes.
- [Rating Mood Picker](https://staticview.a-labs.space/llms/docs/sources/examples/rating/mood-picker.example.md): Five slotted SVGs are assigned to the shapes in order. `single-fill` highlights only the chosen face, `labels` names each value for assistive technology, and `valuechange` mirrors the answer below the picker.
- [Rating Review Form](https://staticview.a-labs.space/llms/docs/sources/examples/rating/review-form.example.md): The rating is form-associated: `name` puts its value in the form data like any built-in input. Reset restores the value from the markup.
- [Reveal Animation Example](https://staticview.a-labs.space/llms/docs/sources/examples/reveal-animation/basic.example.md): Use `class-to-add` to apply a reveal class to children.
- [Segmented Control Billing Period](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/billing-period.example.md): A pricing card where the period switch updates the price and submits with the form. The control is form-associated, so `name` puts the selected value straight into the `FormData`.
- [Segmented Control: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/basic.example.md): Each option is a plain `button` with a `value`, and `value` on the control picks the selected one. Arrow keys move between the options.
- [Segmented Control: Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/states.example.md): `disabled` on a button skips that option, and on the control blocks the whole group.
- [Segmented Control: Orientation](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/orientation.example.md): `vertical` stacks the buttons in a column. `--sv-segmented-control-flex-dir` takes any `flex-direction` value and overrides the attribute wherever it is set.
- [Segmented Control: Icons](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/icons.example.md): The buttons are yours, so any markup goes inside them. Styling them is done in your own stylesheet, not through parts.
- [Segmented Control: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/styling.example.md): The color tokens tint the indicator, `--sv-segmented-control-bdr-rad` rounds the container and the indicator together, and `--sv-segmented-control-pad` is the gap between the container edge and the buttons.
- [Segmented Control: Animation](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/animation.example.md): `--sv-segmented-control-dur` and `--sv-segmented-control-ease` drive the indicator slide. `setValue()` can override both per call, and the reduced motion fallback wins over both.
- [Segmented Control Glass](https://staticview.a-labs.space/llms/docs/sources/examples/segmented-control/liquid-glass.example.md): Rebuild the iOS glass segmented control out of the exposed parts and states.
- [Select: Assignee Picker](https://staticview.a-labs.space/llms/docs/sources/examples/select/assignees.example.md): An assignee field with avatars, team sections, and dividers between them. `data-select-clone` copies the chosen person into the trigger, where the role line is hidden.
- [Animated Select](https://staticview.a-labs.space/llms/docs/sources/examples/select/custom-animation.example.md): A priority field that swaps the default height reveal for a circular reveal that spreads from the trigger. Animate the `expander` part under the flyout's `--opening` and `--closing` states.
- [Select: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/select/basic.example.md): Put a trigger in the flyout's `trigger` slot and one `button` per option. The flyout ships starter styles for both, and your own rules override them.
- [Select: Trigger](https://staticview.a-labs.space/llms/docs/sources/examples/select/trigger.example.md): Style the trigger like any button. Use `sv-flyout:state(--opened)` to style it while the list is open.
- [Select: Content](https://staticview.a-labs.space/llms/docs/sources/examples/select/content.example.md): Options can hold any markup, like an icon next to the text. `data-select-clone` shows a copy of the selected option in the trigger.
- [Select: Multiple](https://staticview.a-labs.space/llms/docs/sources/examples/select/multiple.example.md): `multiple` lets the user pick several options. Mark the initial picks with `aria-selected="true"` on the options.
- [Select: Positions](https://staticview.a-labs.space/llms/docs/sources/examples/select/positions.example.md): Set `position-order` on the flyout. It takes a preset or a list of position areas, tried in order until one fits.
- [Select: Skills Picker](https://staticview.a-labs.space/llms/docs/sources/examples/select/skills.example.md): A multiple select that shows the selection as removable tags, while the trigger shows a count. The tags are rebuilt on every `valuechange`, and removing one assigns a filtered `value`.
- [Slider Brightness](https://staticview.a-labs.space/llms/docs/sources/examples/slider/brightness.example.md): Use the indexed `thumb-1` slot and shared `tooltip` slot with part styling.
- [Slider Color Picker](https://staticview.a-labs.space/llms/docs/sources/examples/slider/color-picker.example.md): Use three sliders to edit RGB channels and `use-diff` to animate the value.
- [Slider Basic](https://staticview.a-labs.space/llms/docs/sources/examples/slider/basic.example.md): Set the value in markup, show a tooltip through the `tooltip` slot, and add markers with a slotted `datalist`. `reversed` flips the value direction, while `disabled` and `readonly` prevent changes.
- [Slider Vertical](https://staticview.a-labs.space/llms/docs/sources/examples/slider/vertical.example.md): `vertical` turns the slider upright. Give it an explicit block size, it has none of its own.
- [Slider Range](https://staticview.a-labs.space/llms/docs/sources/examples/slider/range.example.md): Provide an ordered value list in markup, or assign an array to the `value` property, with any number of thumbs. Give each thumb a stable label through its `thumb-label-{n}` slot. Tab moves between the thumbs, while the arrow keys adjust the focused one.
- [Slider Fill Origin](https://staticview.a-labs.space/llms/docs/sources/examples/slider/fill-origin.example.md): `fill-origin` fills the track between a chosen baseline and the current value instead of always starting at the minimum.
- [Slider iOS](https://staticview.a-labs.space/llms/docs/sources/examples/slider/ios.example.md): Recreate the iOS liquid glass slider with `backdrop-filter` part styling and a `:state(--active)` glass thumb.
- [Slider Multiple Thresholds](https://staticview.a-labs.space/llms/docs/sources/examples/slider/multiple-thresholds.example.md): Assign any number of ordered values to `value` and customize each thumb with its one-based indexed slot and CSS part. The shared tooltip follows the thumb being dragged, while labels remain tied to their thumb when values move.
- [Slider Playground](https://staticview.a-labs.space/llms/docs/sources/examples/slider/playground.example.md): Combine every slider variant from one control panel. Boolean options toggle attributes, while markers, the tooltip, and extra thumbs are added and removed through the `markers` property, a slotted `data-value` element, and a `value` array. The transparent thumb and fill edge stops set `--sv-slider-thumb-bg` and `--sv-slider-fill-edge-stops`. A transparent thumb shows the fill underneath it. The stops only take effect with `thumb-contained`.
- [Slider Volume](https://staticview.a-labs.space/llms/docs/sources/examples/slider/volume.example.md): Use a vertical slider with custom thumb and tooltip slots and a mute control.
- [Template Cart Items](https://staticview.a-labs.space/llms/docs/sources/examples/template/cart-items.example.md): Each line owns its quantity through an `sv-ui-state` nested in the template, so the stepper works without any per-line JavaScript. The instance script only does what the bindings cannot: it keeps the shared subtotal in sync, and drops the line from the subtotal again when it is removed.
- [Template: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/template/basic.example.md): A `<sv-template>` with an `id` holds the markup inside a `<template>` element. Anywhere else on the page, `<sv-template use="id">` renders a copy of it with the data passed through `prop-*` attributes.
- [Template: Placeholders](https://staticview.a-labs.space/llms/docs/sources/examples/template/placeholders.example.md): `[[ ... ]]` holds an expression, evaluated against the data. It works in text and in attribute values, so the plan name and the `disabled` state below come from the same `pro` property. An expression that resolves to `null` removes the attribute.
- [Template: Passing Data](https://staticview.a-labs.space/llms/docs/sources/examples/template/props.example.md): `prop-name` passes a string, `prop-name:json` parses the value as JSON, and `prop-name:js` evaluates it as an expression against the properties read so far. A dot in the name sets a nested key, and `json-data` passes the whole object at once.
- [Template: Scoped Styles](https://staticview.a-labs.space/llms/docs/sources/examples/template/styles.example.md): A `<style>` next to the `<template>` is written once and scoped to instances of that template, so every copy gets it without duplicating the rules.
- [Template: Repeating](https://staticview.a-labs.space/llms/docs/sources/examples/template/repeat.example.md): `template-for` clones its element once per entry of the collection. The same template handles every list below: arrays, numbers, strings, and objects are all iterable sources.
- [Template: Removing Elements](https://staticview.a-labs.space/llms/docs/sources/examples/template/remove.example.md): `template-remove` drops its element when the expression is `true`. Use it for badges, notes, and anything else that only some instances have.
- [Template: Refs and Scripts](https://staticview.a-labs.space/llms/docs/sources/examples/template/refs.example.md): A `<script>` inside the `<template>` runs once per instance, with `TemplateHost` pointing at the `<sv-template>` that rendered it. `template-ref` names the elements it needs, and `onDisconnect` cleans up when the instance leaves the DOM. Each counter below keeps its own state.
- [Template: Rendering in JavaScript](https://staticview.a-labs.space/llms/docs/sources/examples/template/create.example.md): `create(data)` returns an instance element that renders once it is in the DOM, which is the way to go for data you already have in JavaScript. `render(props)` re-renders an instance, merging the given properties into the current ones.
- [Template: Updating Props](https://staticview.a-labs.space/llms/docs/sources/examples/template/update.example.md): Changing `use`, `json-data`, or any `prop-*` attribute on a rendered instance replaces its content with a fresh render.
- [Template Search Results](https://staticview.a-labs.space/llms/docs/sources/examples/template/search-results.example.md): The result rows are created in JavaScript with `create()`, so filtering is a matter of rendering a new set of instances and replacing the old ones. The markup, the styles, and the data stay in separate places.
- [Text Flow: Digital Clock](https://staticview.a-labs.space/llms/docs/sources/examples/text-flow/clock.example.md): A card clock that ticks once a second through `sv-text-flow`. Time strings keep a fixed length, so the default index mode lines the digits up. Swap the `Intl.DateTimeFormat` options to change the locale or switch to 12-hour time.
- [Text Flow: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/text-flow/basic.example.md): Slot the starting text, then assign new strings to `value` from script. Every assignment animates from the current text to the next one, character by character.
- [Text Flow: Smart Diff](https://staticview.a-labs.space/llms/docs/sources/examples/text-flow/smart-diff.example.md): `use-diff` switches the character diff from index comparison to edit distance, so unchanged characters stay put. The swap only changes the red channel between 255 and 0: with `use-diff` nothing after it moves, while the default index mode drags the change through every following character.
- [Text Flow: Timing](https://staticview.a-labs.space/llms/docs/sources/examples/text-flow/timing.example.md): `--sv-text-flow-dur` and `--sv-text-flow-ease` control the duration and easing of the roll. The `duration` and `timing-function` attributes override the variables, but also skip the reduced-motion fallback baked into `--sv-text-flow-dur`, so prefer the variables.
- [Text Flow: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/text-flow/styling.example.md): The host renders as `display: contents`, so box styles like padding and background belong on `::part(text)`. Inherited text properties, like font and color, can sit on the host itself. Digits are tabular out of the box, so numbers keep a steady width while they roll.
- [Text Flow Playground](https://staticview.a-labs.space/llms/docs/sources/examples/text-flow/playground.example.md): Type in the text box to watch every edit roll in. Drag the number slider to see how fast changes behave, and slow the duration down to interrupt a roll midway.
- [Toggle: Call Controls](https://staticview.a-labs.space/llms/docs/sources/examples/toggle/call-controls.example.md): A meeting bar with microphone, camera, and captions controls. Each one is an independent toggle rather than part of a group, since no combined value ties them together.
- [Toggle: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/toggle/basic.example.md): The host element itself is the button, with the slotted content as its label. It toggles on click, Enter, or Space.
- [Toggle: Pressed and Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/toggle/states.example.md): `pressed` presses the toggle button from markup, and `disabled` blocks interaction in either state.
- [Toggle: Custom Content](https://staticview.a-labs.space/llms/docs/sources/examples/toggle/custom-content.example.md): The default slot takes any markup: stack icons or labels, then animate or swap them with the `:state(--pressed)` selector.
- [Toggle: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/toggle/styling.example.md): There are no parts to reach for: style the host element directly and pick the pressed look with `:state(--pressed)`. The component tokens cover the common knobs, like `--sv-toggle-active-bg` for the pressed color.
- [Toggle: Like Button](https://staticview.a-labs.space/llms/docs/sources/examples/toggle/like-button.example.md): A like button with a springy heart and a count that follows the pressed state. The count is an `sv-text-flow`, so the changed digit flows into place instead of snapping. It is derived on every `pressedchange`, the base number plus one while pressed, so it can never drift out of sync with the state.
- [Toggle: Password Reveal](https://staticview.a-labs.space/llms/docs/sources/examples/toggle/password-reveal.example.md): A password field with an eye toggle that shows the value while it is pressed. `pressedchange` flips the input's `type` between `password` and `text`, and the icon pair swaps through `:state(--pressed)`.
- [Toggle Checkbox Data Table](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/data-table.example.md): A header checkbox with `controls` selects every row, and goes indeterminate when only some rows are picked. A `checkedchange` listener on every checkbox updates the row highlight and the bulk action bar, whether a row or the header changed it.
- [Toggle Checkbox: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/basic.example.md): The checkbox toggles on click or Space. It is form-associated, so a `label` with `for` targets it like any input.
- [Toggle Checkbox: Checked and Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/states.example.md): `checked` turns the checkbox on from markup, and `disabled` blocks interaction in either state.
- [Toggle Checkbox: Select All](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/select-all.example.md): `controls` takes the IDs of the checkboxes this one governs. Toggling it checks or unchecks them all, and it turns indeterminate on its own when only some of them are checked.
- [Toggle Checkbox: Icons](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/icons.example.md): The `checked-icon`, `unchecked-icon`, and `mixed-icon` slots replace the built-in check and dash with any markup. The unchecked box is empty by default, so slotting `unchecked-icon` is the only way to show something in it.
- [Toggle Checkbox: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/styling.example.md): `--sv-toggle-checkbox-sz` scales the whole checkbox, the color tokens tint it, and the border radius takes it from a square to a circle.
- [Toggle Checkbox: Animation](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/animation.example.md): `--sv-toggle-checkbox-dur` and `--sv-toggle-checkbox-ease` reshape the fill, the icon swap, and the press scale together. The default easing is springy; a zero duration makes the checkbox instant. The reduced motion fallback wins over both.
- [Toggle Checkbox Filter Panel](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/filter-panel.example.md): A faceted filter sidebar where each group header uses `controls` to select its own options. Clearing the filters sets `checked` on every checkbox, which the group headers follow automatically.
- [Toggle Checkbox Task List](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-checkbox/task-list.example.md): A checklist that strikes through completed items and counts them. The strikethrough is pure CSS through `:has(sv-toggle-checkbox:state(--checked))`, so only the counter needs a script.
- [Toggle Group: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-group/basic.example.md): Nest `sv-toggle` buttons as direct children, each with its own `value`. The group's space-separated `value` attribute decides which ones start pressed.
- [Toggle Group: Exclusive](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-group/exclusive.example.md): `exclusive` allows at most one pressed toggle button, and clicking the pressed one releases it.
- [Toggle Group: Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-group/disabled.example.md): `disabled` on the group blocks interaction with every toggle button in it.
- [Toggle Group: Toolbar](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-group/toolbar.example.md): A group that acts as a bar of controls takes `role="toolbar"`, plus `aria-orientation="vertical"` when its toggle buttons are stacked.
- [Toggle Group: Focus](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-group/focus.example.md): Two knobs adjust the keyboard behavior: `no-loop-focus` stops the arrows at the ends, and `no-roving-focus` hands every toggle button its own tab stop. Tab and arrow through each group to feel the difference.
- [Toggle Group: Formatting Toolbar](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-group/formatting-toolbar.example.md): An editor toolbar built from two groups in one visual bar: text style as a multi-press group and alignment as an exclusive one. Each group keeps its own accessible name and its own `valuechange` listener, which applies the value to the preview paragraph below.
- [Toggle Group: Repeat Days](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-group/repeat-days.example.md): A weekday picker for a repeating schedule, the kind found in alarm and habit apps. Each day is a round toggle button whose single letter stays decorative: the `aria-label` carries the full day name.
- [Toggle Switch Async Setting](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/async-setting.example.md): `clicked` is cancelable, so the switch holds its state while the change saves to the server. The switch is disabled during the request, and `toggle()` commits the result once it lands.
- [Toggle Switch: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/basic.example.md): The switch toggles on click, Enter, or Space. It is form-associated, so a `label` with `for` targets it like any input.
- [Toggle Switch: Checked and Disabled](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/states.example.md): `checked` turns the switch on from markup, and `disabled` blocks interaction in either state.
- [Toggle Switch: Icons](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/icons.example.md): The `checked-icon` and `unchecked-icon` slots replace the built-in check and circle with any markup. A blank `background` slot removes the icons entirely, and the `thumb` slot fills the thumb itself, here with a pair of crossfading icons.
- [Toggle Switch: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/styling.example.md): `--sv-toggle-switch-sz` scales the whole switch, the color tokens tint it, and the thumb and track widths can be set apart for other proportions.
- [Toggle Switch: Animation](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/animation.example.md): `--sv-toggle-switch-dur` and `--sv-toggle-switch-ease` reshape the thumb travel, the icon swap, and the color fade together. The default easing is springy; a zero duration makes the switch instant. The reduced motion fallback wins over both.
- [Toggle Switch iOS](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/ios.example.md): Recreate the iOS liquid glass switch with `::part(switch)` colors and an `:active` glass thumb slotted into `thumb`.
- [Toggle Switch Settings List](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/settings-list.example.md): A settings card built from rows of label, description, and switch. The master switch drives the `disabled` state of the rows below it through the `clicked` event, which fires before the state flips and carries the upcoming state in `detail.checked`.
- [Toggle Switch Theme Toggle](https://staticview.a-labs.space/llms/docs/sources/examples/toggle-switch/theme.example.md): A sun in the `thumb` slot turns into a moon as the switch flips, and the thumb stretches while pressed. The card follows the switch through `:has(:state(--checked))`, no JavaScript involved.
- [Tooltip: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/basic.example.md): Attach a tooltip with `data-sv-tooltip` naming the tooltip's `id`. Hover or focus the button to reveal it.
- [Tooltip: Placement](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/placement.example.md): `side` picks which side of the anchor element to try first. The tooltip is always centered on the anchor element along that side.
- [Tooltip: Trigger](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/trigger.example.md): `trigger` picks how the element reveals its tooltip. `click` suits an element whose only job is revealing the tooltip, and since taps count as clicks, it also works on touch devices.
- [Tooltip: Long Press](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/long-press.example.md): `trigger="long-press"` reveals the tooltip after the element is held down, and keeps it open until a press outside it or `Escape`. The tap itself stays free, so it suits a control that already does something. Press and hold also works with a mouse or a pen.
- [Tooltip: Scrolling](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/scrolling.example.md): The tooltip keeps up with its anchor element while the page or a scroll container moves, with no JavaScript in the loop.
- [Tooltip: Styling](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/styling.example.md): The tooltip is the popover itself, so custom properties and CSS on `sv-tooltip` apply directly, and the slot takes any non-interactive markup.
- [Tooltip: Animation](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/animation.example.md): `--sv-tooltip-dur` and `--sv-tooltip-ease` reshape the built-in opacity transition. The spring tooltip adds a scale on top. The slide tooltip replaces the animated properties instead: closed values on `sv-tooltip`, open values and `@starting-style` under `:popover-open`, and a `transition-property` that keeps `display` and `overlay` so the hide transition still plays.
- [Tooltip: Programmatic](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/programmatic.example.md): Assign `targets` to attach a tooltip from JavaScript, with no `data-sv-tooltip` or `id`. `open()` reveals the tooltip immediately, used here as click feedback. `beforetoggle` restores the label the next time the tooltip opens, since restoring on close would swap the text mid fade-out.
- [Tooltip Form Help](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/form-help.example.md): `trigger="click"` turns each info icon into a toggletip, the pattern that reaches touch users. The icon is a real button with an `aria-label`, so the help is reachable by keyboard too.
- [Tooltip Glossary](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/glossary.example.md): The anchors are inline buttons, so the terms stay focusable. The tooltips are linked by `id`, so they sit after the paragraph and keep the sentence readable as plain prose. The terms' only job is revealing their definition, so `click` joins the triggers, which is what reaches touch users. `max-inline-size` wraps each definition instead of stretching it into one long line.
- [Tooltip Icon Rail](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/icon-rail.example.md): `side="inline-end"` places every tooltip beside the rail, and each tooltip sits right after its button. Each button carries an `aria-label` for its icon and `aria-describedby` for its tooltip. Adding `long-press` to the triggers reaches touch users while the tap keeps navigating, with `user-select` off so the hold does not start a selection.
- [Tooltip Playground](https://staticview.a-labs.space/llms/docs/sources/examples/tooltip/playground.example.md): Drag the anchor toward an edge of the preview to see the tooltip shift and flip.
- [UI State: Basic](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/basic.example.md): A `<sv-store>` inside `<sv-ui-state>` declares a named value. `bind-text` reads it and `bind-event` writes it, and calling a store with an argument is how it is set.
- [UI State: Store Types](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/store-types.example.md): `type` decides how the `value` attribute is parsed at startup. The first two stores below both start from the string `41`, and only the one typed as a number adds to it.
- [UI State: Text and Attributes](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/text-attributes.example.md): `bind-text` takes an expression, not only a store name. `bind-attr` writes the result into an attribute, and `bind-attr-toggle` adds or removes a boolean attribute from a condition.
- [UI State: Form Inputs](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/inputs.example.md): `bind-prop` sets a DOM property, which is what `value` and `checked` need. Paired with `bind-event` the input writes to the store and the store writes back to the input. The reset button changes only the stores, and both fields follow.
- [UI State: Classes](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/classes.example.md): `bind-class` sets a class name from the value itself and removes the one it set before. `bind-class-toggle` adds or removes a fixed class from a condition, one class per pair.
- [UI State: Styles](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/styles.example.md): `bind-style` sets a CSS property on the element. Custom properties work too, so state can reach styles that a class cannot express.
- [UI State: Show and Hide](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/show.example.md): `bind-show` sets `display: none` while the expression is falsy and restores the previous display when it turns truthy. The element stays in the DOM either way.
- [UI State: Events](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/events.example.md): `bind-event` runs an expression when the event fires, and `EVENT` is the native event object. Separate several events with `;`, like `input` and `keydown` on the textarea, where `EVENT.key` picks out Escape.
- [UI State: Derived Stores](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/derived.example.md): A store with `derive` holds the result of its expression and recomputes whenever one of the stores it reads changes. `$unit` follows the seat count, `$total` follows both, and neither is ever set by hand.
- [UI State: Persistent Stores](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/persistent.example.md): `persistent` saves the store on every change and reads it back on the next page load. It defaults to `localStorage`, and `persistent="sessionStorage"` keeps the value to the tab instead. The `id` of the `sv-ui-state` is part of the storage key, so give it one and keep it stable. Change the controls below, then reload the page.
- [UI State: Scopes](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/scopes.example.md): Stores in a `global` component are visible page-wide. Every other component keeps its stores to its own descendants, and a nested component can declare the same name to shadow the outer store. Both panels below have their own `$open`, and the inner one reads the global theme all the same.
- [UI State Metrics Panel](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/metrics.example.md): Three datasets, one derived store. `$data` picks the channel, and every binding in the panel reads from it, so the total, the seven bars, and the footnote all switch together.
- [UI State Reading Preferences](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/preferences.example.md): Three persistent stores in a `global` scope are the whole preferences layer. The toolbar writes them and the article reads them, and neither one knows the other exists. `persistent` keeps the choice across reloads, and setting `color-scheme` on the article is enough for its `light-dark()` colors to repaint.
- [UI State Tic Tac Toe](https://staticview.a-labs.space/llms/docs/sources/examples/ui-state/tic-tac-toe.example.md): A full game in three stores, with no JavaScript on the page. `$cells` holds nine numbers: 1 for X, -1 for O, and 0 for free. The square is an `sv-template` stamped nine times.

## Optional

- [Web Components Browser Support](https://staticview.a-labs.space/llms/packages/ui/docs/BROWSER-SUPPORT.md): Generated from web-features 3.40.0 and browser-compat-data 8.1.3. Each version is the oldest that browser can be for the component to behave as designed. Anything listed as optional is missing from older browsers without breaking the component.
- [Web Components Size Report](https://staticview.a-labs.space/llms/packages/ui/docs/SIZES.md): `bundle.js` holds every component in one file, so bundlers cannot tree-shake it. Import components one by one to ship only the ones you use.