Repository navigation
v1.2.2
Install an item at this release; its Ouro dependencies install from the same tag. In an app with Tailwind CSS v4 and an "@/*" path alias, run shadcn's init once first, with the Base UI base:
npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.2 ourostack/ouro-ui/dialog#v1.2.2The tests, stories and specs are optional, one item per component: npx shadcn@latest add ourostack/ouro-ui/dialog#v1.2.2 ourostack/ouro-ui/dialog-tests#v1.2.2, or ourostack/ouro-ui/ouro-tests#v1.2.2 for all of them. List every item with npx shadcn@latest search 'ourostack/ouro-ui#v1.2.2'.
Changes in this release
- Fix:
Celebratedelays its message about 1.5 s to leave time for the triggering control's announcement; this fixed delay does not detect when a screen reader finishes speaking (celebrate.tsx). - Fix:
ImageFieldrestores the translucent backing behind its drop label (image-field.tsx).
Upgrading from v0.1.0
v0.1.0 installed each component with its tests, and v0.2.0 moves some shared helpers to new files, so update every Ouro component in one go.12 Run the commands in your app's root, the folder with components.json. They find your folders the way shadcn does, from the aliases in components.json and the paths in your tsconfig (npx shadcn@latest info shows them), so they work in a src/ or an app/ layout as written.
What changed, by version
What an app on v0.1.0 has to know beyond these steps.3 The release notes list every change.4
-
v0.2.0: each component's tests became an optional
<name>-testsitem, some helpers moved to new files (step 4), and v0.1.0's self-referential theme lines can go (step 2).2 -
v0.3.0: sheets and dialogs stack at
--ouro-layer, a z-index of 50 by default, instead of level 0, so an app element at z-index 1 to 49 that used to show above an open sheet or dialog now sits under it.5 Raise the token in a:rootrule of your own if your app has fixed bars above z-50 (see "Theme" in the README), and drop any portal z-index workaround. A controlledDialogopened by a touch or pen tap focuses its popup instead of its first input, andConfirmDialog'sfinalFocusapplies only after a confirmed action; drop workarounds for either. Every coverage hint is/* istanbul ignore … @preserve */, so a build plugin that kept the hints can go.6 A-testsitem sets Vitest to^5. -
v0.3.1: every component starts with
"use client", so Next.js App Router pages can render them, and the@ouronamespace serves the newest release instead ofmain.7 -
After v0.7.0: a required field's
*is drawn with CSS on a new element around the label and is no longer a<span data-ouro-required>inside it, so tests that expected the label text "Email*" now find "Email".8 The clear, show-password and choose-date buttons in TextField and DatePicker are named by hidden text, notaria-label, so replacebutton[aria-label="…"]selectors with[data-ouro-clear],[data-ouro-show-password]or[data-ouro-choose-date]. The same goes for a file's remove button in FileField ([data-ouro-file-remove]), Combobox's clear and chip remove buttons ([data-ouro-combobox-clear],[data-ouro-combobox-chip-remove]) and NumberField's steppers ([data-ouro-increment],[data-ouro-decrement]). A remove button's hidden text holds the file or item name, so a loosegetByText("pasta.png")now finds it too; pass{ exact: true }.FieldLabel'sclassNamenow goes on the new element around the label, which also carries[data-ouro-required], and a group's labelidis on the inner<span>;style,id,data-*and handlers still go on the<label>. A numericsizeon TextField is now a type error and a development warning; set a width withclassName="w-40".FormErrorsvalues are nowErrorMessages | null | undefined, so code that readserrors.emailasstring | string[]no longer type checks until it handlesnulland React nodes.8 For action answers, importformErrorsfrom@/lib/ouro/form-answerand passerrors={formErrors(actionData, actionData?.errors)}from the initial render; this replaces the unreleased separateresultprop. It identifies equal new answers while keeping cleared fields masked on pending/client renders and rendering current uncleared messages. Cached/reused answers need{ key: acceptedAnswerKey }, changed on actual acceptance, not submit start. Raw records remain compatible but content-only. Reconstruct the value beside Form after JSON/spread/cloning or server-component transport: only messages serialize, not private identity; a safely transported acceptance key can identify the locally reconstructed answer. On a phone, a Link that is not in running text is now a box at least 44px tall and wide that takes its room in the layout, so a column of links grows; passinlineto a link in a sentence inside your own<div>or<span>.9 A Form's top message element exists only while there is a message. Component roots no longer setm-0, so a parent'sspace-y-*now spaces them; remove any margin you added to work around that.8 -
v0.8.0: no component installs
ouro-base; add it once (step 1 does), and later adds leave your stylesheet alone.8 A component installs only the helpers it imports, one item per file inlib/ouro, and a-testsitem brings the tests of everything its component installs.8 The-testsitems no longer set a version for Vitest, Storybook or Playwright.10 The specs importtestandexpectfrome2e/ouro-fixtures.ts, a file of yours (step 1).8lib/ouro/use-dev-warnings.tsis nowlib/ouro/use-dev-messages.ts(step 4).8 Earlier releases installed every helper inlib/ourowith any component, and an update deletes nothing: audit references before deleting unused historical helpers and their own tests (step 5).8OuroProvidernow comes only with the components that render links and withtooltip; your copy stays, and a new app addslib-ouro-providerby name. -
After v0.8.2:
ouroTestProjects({ page })also sizes the touch project's Playwright host, preventing Vitest 4 from scaling landscape touch frames.11 The logical touch viewport still starts at 390x844 with mobile/touch input, but an explicitly enlarged host changes outer-window/screen dimensions and screen orientation; do not treat those as hardware-phone measurements.11 Withoutpage, the touch host stays 390x844.11 On Vitest 4, retain a host large enough for every requested test viewport, such as the Testing guide's 1600x1200 example.11 -
v1.0.0: the first stable release keeps the component APIs, theme tokens, defaults and test-tool minimums from v0.8.4.12 An app already on v0.8.4 needs no component API migration: review the update with
--dry-runand--diff, then overwrite only the items it already uses and reapply its local edits.12 Runtime components and their optional-testsitems remain separate; keep your app-owned fixtures and test configuration. Apps on older releases still need the applicable migration steps above and below. -
After v1.0.2: sheets, and a Menu shown as a bottom sheet, read their shadow from
--ouro-shadow-sheet-<side>, and Checkbox's tick draws over--ouro-duration-draw, both of which only a freshouro-baseadds (step 1 adds it again); without it a sheet draws no shadow and the tick appears at once.13 Every other shadow reads shadcn's--shadow-*tokens, and headings and overlay titles--font-heading, so a theme that sets them now restyles Ouro too.1314 -
After v1.0.1:
formErrorsnow declares its already-frozen message arrays readonly.15 Keep mutableFormErrorsandErrorMessagesfor raw builders; annotate returned snapshots asFormErrorValueorReadonlyFormErrors, or let their type infer. Form, EditSheet, fielderrorprops and the normalization helper accept readonly projections. This corrects a false mutation permission, so a snapshot no longer fits a mutable raw-map annotation.15 TypeScript'sArray.isArraynarrows toany[]and can bypass readonly; unchanged runtime freezing still rejects container mutation, without deeply freezing React nodes.
0. Commit first
--overwrite replaces every Ouro file, including files you edited.16 Commit before you start. Afterwards, git diff shows your own edits being overwritten, so reapply the ones you need.
Review the diff of your Tailwind CSS file too, the one components.json names in tailwind.css, because step 1 adds ouro-base, the one item that writes there, and shadcn add rewrites more than Ouro's tokens. It adds @custom-variant dark (&:is(.dark *)); when the file has no @custom-variant (shadcn@4.21.1 does this for any item with theme variables on Tailwind CSS v4), adds the tokens your file lacks to :root, .dark and @theme inline (among them --input, --radius and the radius scale, if your theme has none), and collapses blank lines.17 Keep the new lines and step 2's deletions, and revert the rest. After this upgrade no component add opens the file again.8
1. Update every Ouro component, with its tests
Update every Ouro component in your app, not only the items you typed: v0.1.0 added each component's dependencies too, so an app that added only dialog also has button and sheet. Each component is one .tsx file in your components/ouro/ folder (dialog/ holds dialog and confirm-dialog, and text/ holds text and heading).1 Add each one as <name> and <name>-tests, plus ouro-base, in one command at the same ref, with --overwrite (without it the CLI stops to ask about each file). For the app that added only dialog, that is ouro-base button button-tests dialog dialog-tests sheet sheet-tests. No component installs ouro-base any more, so this is where your stylesheet gets the tokens added since v0.1.0.8
This command finds the components, prints them and adds them. If it finds none, it stops before adding anything18; run it in the folder with components.json. If you use the Ouro theme, add ourostack/ouro-ui/ouro-theme#v1.2.2 to the add in it.
( p() { npx shadcn@latest info --json | node -p "JSON.parse(require('fs').readFileSync(0, 'utf8')).config.resolvedPaths.$1"; }; ouro="$(p components)/ouro"; items=$(find "$ouro" -name '*.tsx' ! -name '*-parts.tsx' ! -name '*.test.tsx' ! -name '*.stories.tsx' 2>/dev/null | sed -E 's|.*/(.*)\.tsx$|\1|' | sort); [ -n "$items" ] || { echo "No Ouro components in $ouro. Run this in the folder with components.json." >&2; exit 1; }; echo "Updating: $(echo "$items" | paste -sd " " -)"; npx shadcn@latest add $(echo "$items" | sed -E 's|.*|ourostack/ouro-ui/&#v1.2.2 ourostack/ouro-ui/&-tests#v1.2.2|') ourostack/ouro-ui/ouro-base#v1.2.2 --overwrite )This keeps the tests v0.1.0 installed, deletes none of your files and adds no component you didn't have. shadcn may print Skipped N files: (files might be identical, use --overwrite to overwrite) even with --overwrite: those files already equal the release's, so nothing was missed.16 The -tests items name Vitest, Storybook and Playwright without a version, so the versions in your package.json stay as they are. v0.7.0's items still carry versions: after an add at v0.7.0, restore every test-tool version you had pinned (git diff package.json): Vitest and its companions, Playwright and Storybook.19 The tests need Vitest 4.1.11 or later, Playwright 1.58.1 or later and Storybook 10.2.10 or later; update those yourself if yours are older (the README's "Details" links the Testing page).20 The specs in e2e/ouro now import test and expect from e2e/ouro-fixtures.ts, a file of yours: add it with the one line export { expect, test } from "@playwright/test";, or export your own fixtures from it.
2. Remove the self-referential theme lines
v0.1.0 wrote a line into @theme inline for each Ouro token that points at itself, such as --ouro-press-scale: var(--ouro-press-scale);, and --color-ouro-backdrop-color: var(--ouro-backdrop-color);.21 Delete them from your Tailwind CSS file, the one components.json names in tailwind.css. The values stay in :root and .dark. This command finds the file and deletes the lines:
perl -i -ne 'print unless /^\s*--(color-)?ouro-[\w-]+:\s*var\(--ouro-[\w-]+\);\s*$/' "$(npx shadcn@latest info --json | node -p "JSON.parse(require('fs').readFileSync(0, 'utf8')).config.resolvedPaths.tailwindCss")"3. Optional: drop Ouro's tests
To keep only the components, delete the files Ouro owns for its tests: the test, type-test and story files in your components/ouro/ and lib/ouro/ folders, the test kit in lib/ouro/testing and the specs in e2e/ouro. The command stops if it can't find those folders.
( p() { npx shadcn@latest info --json | node -p "JSON.parse(require('fs').readFileSync(0, 'utf8')).config.resolvedPaths.$1"; }; c="$(p components)/ouro"; l="$(p lib)/ouro"; [ -d "$c" ] && [ -d "$l" ] || { echo "No Ouro folders at $c and $l. Run this in the folder with components.json." >&2; exit 1; }; find "$c" "$l" \( -name '*.test.ts' -o -name '*.test.tsx' -o -name '*.test-d.ts' -o -name '*.stories.tsx' \) -delete; find "$l/testing" e2e/ouro -delete )Then remove the ouroTestProjects import and call from your Vitest config. Only if Ouro's tests were the only tests using them, also delete vitest.config.ts, playwright.config.ts and .storybook/, and uninstall vitest, @vitest/browser-playwright, playwright, @playwright/test, storybook and @storybook/react-vite with your package manager.
4. Change imports of moved helpers
If your own code imports these helpers, change the import:
useOuro: fromlib/ouro/ouro-providertolib/ouro/use-ouro.sheetSides,sideWarning,sheetHint,iosBackdropandfooterClass: fromcomponents/ouro/sheet/sheet-partstocomponents/ouro/sheet/sheet-styles.dialogSizesanddialogSizeWarning: fromcomponents/ouro/dialog/dialog-partstocomponents/ouro/dialog/dialog-styles.alignClassesandcheckAlign: fromcomponents/ouro/text/texttocomponents/ouro/text/text-styles.useDevWarnings: fromlib/ouro/use-dev-warningstolib/ouro/use-dev-messages. Delete the oldlib/ouro/use-dev-warnings.ts; nothing imports it after step 1.
5. Delete the helpers nothing imports
Releases before v0.8.0 installed every helper in lib/ouro with any component.8 From v0.8.0 a component installs only the helpers it imports, but an update deletes nothing.8 Remove unused historical helpers rather than excluding them from coverage.
Before deleting anything, perform a read-only import/reference audit across the whole app, including scripts, tests, stories and configuration outside src/. Use the app's actual tsconfig and bundler aliases to resolve references to each helper's full path. Check relative imports, explicit extensions, re-exports and dynamic imports too; an importing file with the same basename is still a different file. A text search for lib/ouro/<name> alone cannot prove a helper is unused.
Delete a helper and its own tests only after verifying that no remaining app file or retained Ouro file references it (references from that helper's own tests do not require keeping an otherwise unused helper). Check again after each removal: another historical helper may have been used only by the one you removed. If a reference is unresolved or you cannot verify a file's use, keep it until you can. Keep ouro-provider.tsx if you mean to use it and have not yet, and retain ambient declarations such as env.d.ts that the app's type check needs even without an import.
Then type check and build your app. CI runs steps 1 to 3 on a v0.1.0 app, with these commands read from this file (scripts/install-test.sh upgrade).3
Or through the @ouro namespace, which serves the newest release: this one, once main is prepared for the next release. Add it to components.json once:
"registries": { "@ouro": "https://ourostack.github.io/ouro-ui/r/{name}.json" }npx shadcn@latest add @ouro/ouro-base @ouro/dialogItems:
ouro-base: Add it once per app, before your first component; no component installs it, so later adds never touch your stylesheet. What every Ouro UI component needs in the app's CSS: success and warning colors, a destructive foreground, the field border color (--input) and --radius when your theme has none, the motion tokens, the press utility, the keyframes for spinners, progress bars and skeletons, and --ouro-layer, the z-index of sheets and dialogs (50; raise it in a :root rule of your own if your app has fixed bars above z-50).ouro-theme: Ouro UI's own look, as a shadcn theme for :root and .dark. Skip it to keep your app's theme.ouro-lib: Every helper in lib/ouro in one item. You don't need to add it: each component installs only the helpers it imports (the lib- items).ouro-testing: Installed with every -tests item; you don't need to add it. The test kit Ouro UI's tests use: Vitest browser projects with the drag, flick, tap, touchDrag, touchStep, pointerPress, emulateMedia, pageZoom, resetPageZoom, setPageZoom and restoreTouch commands, the rotate helper (which turns the phone viewport and resets Chromium's zoom; the ouro-touch project fails a test that leaves the page zoomed), the act helper, the holdFrames helper (which holds animation frames and the clock still so a test steps a spring itself), the motion helpers (expectMotion, expectNoMotion, expectGestureSettle, expectTransition and parseDuration, which prove exactly which CSS properties a state change runs on each part), watchAnnouncements (which records what live regions announce, so a test proves a message is heard once per change), axeExclude, and the end-to-end story helper.lib-announce: Installed with the components that import it; you don't need to add it. The helper lib/ouro/announce.ts.lib-appearance-hints: Installed with the components that import it; you don't need to add it. The helper lib/ouro/appearance-hints.ts.lib-claims: claim(), which marks a sentence of your copy with its primary source and a check, and the checker that lints your Markdown and copy and runs those checks (node /ouro/claims-check.mjs check, on Node 22.18 or later). No component imports it; add it by name. The helper lib/ouro/claims.ts and the script lib/ouro/claims-check.mjs.lib-class-name-check: Installed with the components that import it; you don't need to add it. The helper lib/ouro/class-name-check.ts.lib-cn: Installed with the components that import it; you don't need to add it. The helper lib/ouro/cn.ts.lib-color-scheme: Installed with the components that import it; you don't need to add it. The helper lib/ouro/color-scheme.ts.lib-color-scheme-script: Installed with the components that import it; you don't need to add it. The helper lib/ouro/color-scheme-script.ts.lib-control-ref: Installed with the components that import it; you don't need to add it. The helper lib/ouro/control-ref.ts.lib-current-path: Installed with the components that import it; you don't need to add it. The helper lib/ouro/current-path.ts.lib-dev: Installed with the components that import it; you don't need to add it. The helper lib/ouro/dev.ts.lib-env: Installed with the components that import it; you don't need to add it. The helper lib/ouro/env.d.ts.lib-feedback: Installed with the components that import it; you don't need to add it. The helper lib/ouro/feedback.ts.lib-floating: Installed with the components that import it; you don't need to add it. The helper lib/ouro/floating.ts.lib-focus-handoff: Installed with the components that import it; you don't need to add it. The helper lib/ouro/focus-handoff.ts.lib-form-answer: Installed with the components that import it; you don't need to add it. The helper lib/ouro/form-answer.ts.lib-key-shortcuts: Installed with the components that import it; you don't need to add it. The helper lib/ouro/key-shortcuts.ts.lib-last-input: Installed with the components that import it; you don't need to add it. The helper lib/ouro/last-input.ts.lib-open-mode: Installed with the components that import it; you don't need to add it. The helper lib/ouro/open-mode.ts.lib-ouro-provider: OuroProvider, which routes every href through your router's link and groups tooltips. It comes with every component that renders links and with tooltip; add it by name when your app has neither and you want the provider. The helper lib/ouro/ouro-provider.tsx.lib-refs: Installed with the components that import it; you don't need to add it. The helper lib/ouro/refs.ts.lib-router-link: Installed with the components that import it; you don't need to add it. The helper lib/ouro/router-link.ts.lib-server-element: Installed with the components that import it; you don't need to add it. The helper lib/ouro/server-element.ts.lib-share: Installed with the components that import it; you don't need to add it. The helper lib/ouro/share.ts.lib-spring: Installed with the components that import it; you don't need to add it. The helper lib/ouro/spring.ts.lib-stretched-link: Installed with the components that import it; you don't need to add it. The helper lib/ouro/stretched-link.ts.lib-toast: Installed with the components that import it; you don't need to add it. The helper lib/ouro/toast.ts.lib-tones: Installed with the components that import it; you don't need to add it. The helper lib/ouro/tones.ts.lib-touch-target: Installed with the components that import it; you don't need to add it. The helper lib/ouro/touch-target.tsx.lib-use-backdrop-anchor: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-backdrop-anchor.ts.lib-use-command-shortcut: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-command-shortcut.ts.lib-use-dev-messages: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-dev-messages.ts.lib-use-drag: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-drag.ts.lib-use-field: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-field.ts.lib-use-install-prompt: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-install-prompt.ts.lib-use-keyboard-scrollable: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-keyboard-scrollable.ts.lib-use-media-query: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-media-query.ts.lib-use-ouro: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-ouro.ts.lib-use-sheet-presentation: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-sheet-presentation.ts.lib-use-timer: Installed with the components that import it; you don't need to add it. The helper lib/ouro/use-timer.ts.button: A button, or a link styled as one.text: Body text in the theme's type scale and colors.heading: A section title,<h1>to<h6>, in the theme's foreground color.sheet: A panel that slides in from an edge and is dragged back to dismiss: the mobile form of a dialog.dialog: A dialog that presents itself for the screen: a centered dialog on wider screens and a bottom sheet you can drag away on phones (below 640px).confirm-dialog: Asks the user to confirm an action, with Cancel focused first.field: A labeled form control: the label, an optional description, the control and its error, wired together with ids that match between the server and the browser.fieldset: A titled group of related fields, such as an address, rendered as a<fieldset>named by its legend.link: A text link that navigates through your router.text-field: A labeled one-line text input on the Field contract: passlabel, anderrorfrom your server action or client check.text-area: A labeled multi-line text field on the Field contract, a native<textarea>: passlabel, anderrorfrom your server action or client check.checkbox: A labeled checkbox on the Field contract, with the label to its right: passlabel, andcheckedwithonCheckedChange(ordefaultChecked).checkbox-group: A group of checkboxes under one legend, on the Field contract, for picking any number of choices: passlegend, andoptions(orCheckboxchildren).radio-group: A group of radios under one legend, on the Field contract, for picking exactly one choice: passlegend, andoptions(orRadiochildren).switch: A labeled on/off switch on the Field contract, with the label to its right: passlabel, andcheckedwithonCheckedChange(ordefaultChecked).form: A form that validates with the browser's own constraints (required,type="email",pattern) and shows server errors on the matching fields.edit-sheet: Edits something in a form inside a dialog: the whole interaction, done right.select: A labeled list of choices on the Field contract: passlabel,options(orSelectItemchildren) anderrorfrom your server action or client check.native-select: A labeled native<select>on the Field contract: passlabel,options(or<option>children) anderror.number-field: A labeled number input on the Field contract: passlabel, anderrorfrom your server action or client check.slider: A labeled slider on the Field contract: passlabel, and adefaultValue(orvaluewithonValueChange).combobox: A text input that filters a list of items as people type, on the Field contract: passlabel,items, anderrorfrom your server action or client check.toaster: Shows the toasts you send withtoast("Saved")from@/lib/ouro/toast: render it once, at the root of your app, insideOuroProviderif you use one, or alone.spinner: A spinning ring that says something is loading.progress: A bar that shows how far along a task is, or that it is under way when you can't tell.skeleton: A shimmering placeholder in the shape of content that is still loading.avatar: A person's picture, or their initials until it loads or when it fails.badge: A short label for a status, category or count: "Draft", "Vegan", "3".alert: An inline message in the page: something saved, something failed, something to know before going on.separator: A thin line in the theme's border color between groups of content, horizontal or vertical.kbd: A keyboard shortcut, in the reader's platform's notation:keys={["mod", "k"]}shows ⌘K on a Mac, iPhone or iPad and Ctrl+K elsewhere.popover: A small non-modal panel beside its trigger, for a short form or a few choices: a share link, filters, a quick edit.tooltip: A short label that appears beside its trigger on hover and keyboard focus, for an icon button's purpose or a control's shortcut.hover-card: A preview of where a link goes, shown when a mouse rests on the link or the keyboard focuses it: a cook's profile, a recipe's summary.menu: A list of actions that opens from a button, from a right-click or long press, or from a menubar, with one API for all three.command: A command palette: a searchable list of every action in the app, in a dialog.tabs: Tabs that switch between panels in place: an accessible tab list with roving focus, arrow-key navigation, a line that slides to the selected tab, and 44px tabs on touch screens.segmented-control: An iOS-style segmented control: a row of equal segments with a raised thumb that slides to the checked one, for switching how one view shows its content in place, such as list or grid.accordion: A stack of titles that each open their own content, for FAQs and long settings pages.collapsible: One section that opens and closes under its title, such as nutrition facts under a recipe.show-more: "Show more" for a long list or a long text.card: A surface that groups one thing's content: a media slot across the top, a title with a description and an action, a body, and a footer.item: One row of a list: leading media, a title with a description, and trailing actions.item-group: A list ofItemrows, with an optional label that names it, lines between the rows, and what to show when it is empty.empty: What a list, search or page shows when it has nothing in it: an icon, a title that says what is empty, a sentence on what to do, and the action that does it.scroll-area: A scrolling region with a slim scrollbar that matches the theme, inside a height you set.aspect-ratio: A frame that keeps an image, video or map at a fixed shape while its width follows the layout, so the page does not jump when the media loads.stack: Lays its children out top to bottom with an even gap.row: Lays its children out side by side with an even gap, centered up and down.navbar: The bar across the top of an app: your brand, the main links and a few controls, with the current page markedaria-current="page"and a bar at the start edge, distinct from hover and press highlights.sidebar: The column of links down the side of an app, in sections, with the current page markedaria-current="page"and a bar at the start edge, distinct from hover and press highlights.sidebar-layout: The shell of an app with aSidebar: the sidebar beside the page from 640px up, in view while the page scrolls, and a sticky top bar with the sidebar's menu button below 640px.stacked-layout: The shell of an app with aNavbar: the bar across the top, in view while the page scrolls, and the page below it in a centered column.auth-layout: The page for signing in, signing up or resetting a password: oneCardin the middle of the screen, with your brand, the title as the page's<h1>, the form, and a line under the card.breadcrumb: The trail from the top of the site to the current page: a labelled<nav>with an ordered list of links, the last item markedaria-current="page".pagination: Page navigation for a long list: Previous, the page numbers with gaps, and Next, with the current page markedaria-current="page".navigation-menu: A row of links where some open a panel of further links, each with a line of description: the navigation of a site with more pages than fit in a bar.table: A data table: a caption, column headers, and rows, fromcolumnsandrowsor from parts.description-list: One thing's details as pairs of a term and its value: a recipe's prep time and servings, an order's date and total, an account's email.toggle: A button that stays pressed until it is pressed again, such as Bold in a text toolbar.toggle-group: A row of related toggles that share one value, such as text alignment or bold, italic and underline in a toolbar.button-group: Related buttons joined into one control, such as Previous, a page number and Next, or a split button.otp-field: A one-time code entry on the Field contract: one slot per character, with focus that moves as the person types, a whole code pasted at once, andautoComplete="one-time-code"so phones offer the code from a text message.file-field: A labeled file input with a drop zone, on the Field contract.color-field: A color on the Field contract: a swatch that opens the system color picker, next to the same color as hex text, kept in step both ways.swipe-actions: A list row with actions beside it that a horizontal swipe reveals: swipe toward the start for thetrailingactions (Delete, Archive), toward the end for theleadingones (Pin).reorderable: A list the user puts in order: recipe steps, a queue, favorites.calendar: A month grid to pick a day or a range of days, with the arrow keys or a press.date-picker: A labeled date field.carousel: A row of slides the user swipes or steps through with Previous and Next buttons: recipe photos, a few featured cards.resizable: Panels side by side (or stacked) with a draggable handle between each pair: a file list beside an editor, a preview above a console.chart: A chart drawn in the theme's colors, which people can use without seeing it: a figure named by itstitle, a summary for screen readers, and a table of every value (visible withshowTable).message: One message in a chat: who wrote it, their avatar and what they wrote, with any attachments under it.message-list: A conversation:Messages in a scrolling, labeled region that opens at the newest one.attachment: A file attached to a chat message, or waiting to be sent with one: its icon, name and size.checklist: A list of things to tick off, such as a recipe's ingredients or a shopping list: each row a checkbox the whole row toggles, with an optional value and action.inspector: X-ray for a page built with Ouro HX: outlines every Ouro component on the page with its name, linked to its docs, and lists them all for keyboard and screen reader users.skip-link: The "Skip to main content" link a keyboard or screen-reader user meets first on every page, so one Tab and Enter jump past the header and navigation.tab-bar: The bar of tabs at the bottom of a phone screen: two to five of the app's top-level pages, each an icon over a short label, with the current page markedaria-current="page"and an accent wash.route-progress: The thin bar across the top of the screen while the app loads the next page or submits a form, so a click that waits on the server never feels frozen: one global affordance instead of a pending state on every action.color-scheme-toggle: The control that switches the app between light, dark and the system's scheme, and keeps the choice.page-header: The top of a page: its title with an optional line above it (eyebrow), a description under it, the page's actions beside it, and a trail and an image above.copy-button: A button that puts a piece of text on the clipboard: an API key, a link, a command.code-block: Code or a command on a muted surface in the theme's monospace font, with a caption and a button that copies it.timer: A countdown timer with its own controls: the time left in large numbers, Start, then Pause and Cancel, Resume when paused, and at zero "Time's up" with Dismiss and Restart.timer-tray: The timers that are running, paused or finished, in one strip, so a person who leaves a timer's screen can still see it count down, hear it at zero, and stop it.celebrate: A small moment of celebration for something the person finished: confetti bursts from a badge with the message ("List cleared") and screen readers hear the message once.choice-card: A set of choices shown as cards, each with a picture, a label and a line of description, for picking exactly one: a cover photo, a plan, a layout.image-cropper: A dialog for cropping a photo to a shape before it is used: drag the photo (or move it the way the arrow keys point) to choose what shows in the frame, zoom with the slider (or Plus and Minus), and Save hands the cropped image toonCropas aFile, ready for a form or an upload.image-field: A field for one photo, shown large: the photo already saved (src) or the one just chosen, with Choose photo (Change photo once one shows) and Remove.share-button: A button that shares a link: through the system's share sheet where there is one (phones, Safari), and by copying it where there is not, when it says "Link copied" for two seconds and screen readers hear it once.sync-status: One line that says where the person's changes are: Saved, Saving…, Offline (kept on this device) or Couldn't save, each with its icon, and Retry while there is a problem.local-date: A date (and time) in the reader's own time zone and language, in a<time>that carries the exact instant.relative-time: How long ago (or how soon) something happens, in the reader's language: "3 days ago", "yesterday", "in 5 minutes", "now", kept current while it shows.install-prompt: A quiet offer to install the web app, shown only where the browser can install it (Chromium on Android and desktops), never while it already runs installed, and not again for two weeks after Not now.conversation-list: A list of conversations to choose from: each row shows the avatar, the title, when the latest message arrived and a line of it, and marks unread conversations with a bold title and a dot.attention-card: Something that waits on the person: a mention, a question asked of them or a request still unanswered.reaction-bar: A message's reactions: each one's emoji and how many chose it, with the person's own pressed and tinted, and quick reactions to add with a single press.lib-announce-tests: Optional: the Vitest browser tests for lib-announce, and the tests of everything it installs. Add it beside lib-announce: add lib-announce lib-announce-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-appearance-hints-tests: Optional: the Vitest browser tests for lib-appearance-hints, and the tests of everything it installs. Add it beside lib-appearance-hints: add lib-appearance-hints lib-appearance-hints-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-claims-tests: Optional: the Vitest browser tests for lib-claims, and the tests of everything it installs. Add it beside lib-claims: add lib-claims lib-claims-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-class-name-check-tests: Optional: the Vitest browser tests for lib-class-name-check, and the tests of everything it installs. Add it beside lib-class-name-check: add lib-class-name-check lib-class-name-check-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-cn-tests: Optional: the Vitest browser tests for lib-cn, and the tests of everything it installs. Add it beside lib-cn: add lib-cn lib-cn-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-color-scheme-script-tests: Optional: the Vitest browser tests for lib-color-scheme-script, and the tests of everything it installs. Add it beside lib-color-scheme-script: add lib-color-scheme-script lib-color-scheme-script-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-color-scheme-tests: Optional: the Vitest browser tests for lib-color-scheme, and the tests of everything it installs. Add it beside lib-color-scheme: add lib-color-scheme lib-color-scheme-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-control-ref-tests: Optional: the Vitest browser tests for lib-control-ref, and the tests of everything it installs. Add it beside lib-control-ref: add lib-control-ref lib-control-ref-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-current-path-tests: Optional: the Vitest browser tests for lib-current-path, and the tests of everything it installs. Add it beside lib-current-path: add lib-current-path lib-current-path-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-dev-tests: Optional: the Vitest browser tests for lib-dev, and the tests of everything it installs. Add it beside lib-dev: add lib-dev lib-dev-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-feedback-tests: Optional: the Vitest browser tests for lib-feedback, and the tests of everything it installs. Add it beside lib-feedback: add lib-feedback lib-feedback-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-floating-tests: Optional: the Vitest browser tests for lib-floating, and the tests of everything it installs. Add it beside lib-floating: add lib-floating lib-floating-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-focus-handoff-tests: Optional: the Vitest browser tests for lib-focus-handoff, and the tests of everything it installs. Add it beside lib-focus-handoff: add lib-focus-handoff lib-focus-handoff-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-form-answer-tests: Optional: the Vitest browser tests for lib-form-answer, and the tests of everything it installs. Add it beside lib-form-answer: add lib-form-answer lib-form-answer-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-key-shortcuts-tests: Optional: the Vitest browser tests for lib-key-shortcuts, and the tests of everything it installs. Add it beside lib-key-shortcuts: add lib-key-shortcuts lib-key-shortcuts-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-last-input-tests: Optional: the Vitest browser tests for lib-last-input, and the tests of everything it installs. Add it beside lib-last-input: add lib-last-input lib-last-input-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-ouro-provider-tests: Optional: the Vitest browser tests for lib-ouro-provider, and the tests of everything it installs. Add it beside lib-ouro-provider: add lib-ouro-provider lib-ouro-provider-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-server-element-tests: Optional: the Vitest browser tests for lib-server-element, and the tests of everything it installs. Add it beside lib-server-element: add lib-server-element lib-server-element-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-share-tests: Optional: the Vitest browser tests for lib-share, and the tests of everything it installs. Add it beside lib-share: add lib-share lib-share-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-spring-tests: Optional: the Vitest browser tests for lib-spring, and the tests of everything it installs. Add it beside lib-spring: add lib-spring lib-spring-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-command-shortcut-tests: Optional: the Vitest browser tests for lib-use-command-shortcut, and the tests of everything it installs. Add it beside lib-use-command-shortcut: add lib-use-command-shortcut lib-use-command-shortcut-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-dev-messages-tests: Optional: the Vitest browser tests for lib-use-dev-messages, and the tests of everything it installs. Add it beside lib-use-dev-messages: add lib-use-dev-messages lib-use-dev-messages-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-drag-tests: Optional: the Vitest browser tests for lib-use-drag, and the tests of everything it installs. Add it beside lib-use-drag: add lib-use-drag lib-use-drag-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-install-prompt-tests: Optional: the Vitest browser tests for lib-use-install-prompt, and the tests of everything it installs. Add it beside lib-use-install-prompt: add lib-use-install-prompt lib-use-install-prompt-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-keyboard-scrollable-tests: Optional: the Vitest browser tests for lib-use-keyboard-scrollable, and the tests of everything it installs. Add it beside lib-use-keyboard-scrollable: add lib-use-keyboard-scrollable lib-use-keyboard-scrollable-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-media-query-tests: Optional: the Vitest browser tests for lib-use-media-query, and the tests of everything it installs. Add it beside lib-use-media-query: add lib-use-media-query lib-use-media-query-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-sheet-presentation-tests: Optional: the Vitest browser tests for lib-use-sheet-presentation, and the tests of everything it installs. Add it beside lib-use-sheet-presentation: add lib-use-sheet-presentation lib-use-sheet-presentation-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.lib-use-timer-tests: Optional: the Vitest browser tests for lib-use-timer, and the tests of everything it installs. Add it beside lib-use-timer: add lib-use-timer lib-use-timer-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.button-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for button, and the tests of everything it installs. Add it beside button: add button button-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.text-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for text, and the tests of everything it installs. Add it beside text: add text text-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.heading-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for heading, and the tests of everything it installs. Add it beside heading: add heading heading-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.sheet-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for sheet, and the tests of everything it installs. Add it beside sheet: add sheet sheet-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.dialog-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for dialog, and the tests of everything it installs. Add it beside dialog: add dialog dialog-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.confirm-dialog-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for confirm-dialog, and the tests of everything it installs. Add it beside confirm-dialog: add confirm-dialog confirm-dialog-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.field-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for field, and the tests of everything it installs. Add it beside field: add field field-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.fieldset-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for fieldset, and the tests of everything it installs. Add it beside fieldset: add fieldset fieldset-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.link-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for link, and the tests of everything it installs. Add it beside link: add link link-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.text-field-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for text-field, and the tests of everything it installs. Add it beside text-field: add text-field text-field-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.text-area-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for text-area, and the tests of everything it installs. Add it beside text-area: add text-area text-area-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.checkbox-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for checkbox, and the tests of everything it installs. Add it beside checkbox: add checkbox checkbox-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.checkbox-group-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for checkbox-group, and the tests of everything it installs. Add it beside checkbox-group: add checkbox-group checkbox-group-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.radio-group-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for radio-group, and the tests of everything it installs. Add it beside radio-group: add radio-group radio-group-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.switch-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for switch, and the tests of everything it installs. Add it beside switch: add switch switch-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.form-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for form, and the tests of everything it installs. Add it beside form: add form form-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.edit-sheet-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for edit-sheet, and the tests of everything it installs. Add it beside edit-sheet: add edit-sheet edit-sheet-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.select-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for select, and the tests of everything it installs. Add it beside select: add select select-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.native-select-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for native-select, and the tests of everything it installs. Add it beside native-select: add native-select native-select-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.number-field-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for number-field, and the tests of everything it installs. Add it beside number-field: add number-field number-field-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.slider-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for slider, and the tests of everything it installs. Add it beside slider: add slider slider-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.combobox-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for combobox, and the tests of everything it installs. Add it beside combobox: add combobox combobox-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.toaster-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for toaster, and the tests of everything it installs. Add it beside toaster: add toaster toaster-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.spinner-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for spinner, and the tests of everything it installs. Add it beside spinner: add spinner spinner-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.progress-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for progress, and the tests of everything it installs. Add it beside progress: add progress progress-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.skeleton-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for skeleton, and the tests of everything it installs. Add it beside skeleton: add skeleton skeleton-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.avatar-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for avatar, and the tests of everything it installs. Add it beside avatar: add avatar avatar-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.badge-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for badge, and the tests of everything it installs. Add it beside badge: add badge badge-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.alert-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for alert, and the tests of everything it installs. Add it beside alert: add alert alert-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.separator-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for separator, and the tests of everything it installs. Add it beside separator: add separator separator-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.kbd-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for kbd, and the tests of everything it installs. Add it beside kbd: add kbd kbd-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.popover-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for popover, and the tests of everything it installs. Add it beside popover: add popover popover-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.tooltip-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for tooltip, and the tests of everything it installs. Add it beside tooltip: add tooltip tooltip-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.hover-card-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for hover-card, and the tests of everything it installs. Add it beside hover-card: add hover-card hover-card-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.menu-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for menu, and the tests of everything it installs. Add it beside menu: add menu menu-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.command-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for command, and the tests of everything it installs. Add it beside command: add command command-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.tabs-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for tabs, and the tests of everything it installs. Add it beside tabs: add tabs tabs-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.segmented-control-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for segmented-control, and the tests of everything it installs. Add it beside segmented-control: add segmented-control segmented-control-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.accordion-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for accordion, and the tests of everything it installs. Add it beside accordion: add accordion accordion-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.collapsible-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for collapsible, and the tests of everything it installs. Add it beside collapsible: add collapsible collapsible-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.show-more-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for show-more, and the tests of everything it installs. Add it beside show-more: add show-more show-more-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.card-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for card, and the tests of everything it installs. Add it beside card: add card card-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.item-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for item, and the tests of everything it installs. Add it beside item: add item item-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.item-group-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for item-group, and the tests of everything it installs. Add it beside item-group: add item-group item-group-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.empty-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for empty, and the tests of everything it installs. Add it beside empty: add empty empty-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.scroll-area-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for scroll-area, and the tests of everything it installs. Add it beside scroll-area: add scroll-area scroll-area-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.aspect-ratio-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for aspect-ratio, and the tests of everything it installs. Add it beside aspect-ratio: add aspect-ratio aspect-ratio-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.stack-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for stack, and the tests of everything it installs. Add it beside stack: add stack stack-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.row-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for row, and the tests of everything it installs. Add it beside row: add row row-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.navbar-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for navbar, and the tests of everything it installs. Add it beside navbar: add navbar navbar-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.sidebar-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for sidebar, and the tests of everything it installs. Add it beside sidebar: add sidebar sidebar-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.sidebar-layout-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for sidebar-layout, and the tests of everything it installs. Add it beside sidebar-layout: add sidebar-layout sidebar-layout-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.stacked-layout-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for stacked-layout, and the tests of everything it installs. Add it beside stacked-layout: add stacked-layout stacked-layout-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.auth-layout-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for auth-layout, and the tests of everything it installs. Add it beside auth-layout: add auth-layout auth-layout-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.breadcrumb-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for breadcrumb, and the tests of everything it installs. Add it beside breadcrumb: add breadcrumb breadcrumb-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.pagination-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for pagination, and the tests of everything it installs. Add it beside pagination: add pagination pagination-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.navigation-menu-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for navigation-menu, and the tests of everything it installs. Add it beside navigation-menu: add navigation-menu navigation-menu-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.table-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for table, and the tests of everything it installs. Add it beside table: add table table-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.description-list-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for description-list, and the tests of everything it installs. Add it beside description-list: add description-list description-list-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.toggle-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for toggle, and the tests of everything it installs. Add it beside toggle: add toggle toggle-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.toggle-group-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for toggle-group, and the tests of everything it installs. Add it beside toggle-group: add toggle-group toggle-group-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.button-group-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for button-group, and the tests of everything it installs. Add it beside button-group: add button-group button-group-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.otp-field-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for otp-field, and the tests of everything it installs. Add it beside otp-field: add otp-field otp-field-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.file-field-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for file-field, and the tests of everything it installs. Add it beside file-field: add file-field file-field-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.color-field-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for color-field, and the tests of everything it installs. Add it beside color-field: add color-field color-field-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.swipe-actions-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for swipe-actions, and the tests of everything it installs. Add it beside swipe-actions: add swipe-actions swipe-actions-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.reorderable-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for reorderable, and the tests of everything it installs. Add it beside reorderable: add reorderable reorderable-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.calendar-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for calendar, and the tests of everything it installs. Add it beside calendar: add calendar calendar-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.date-picker-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for date-picker, and the tests of everything it installs. Add it beside date-picker: add date-picker date-picker-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.carousel-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for carousel, and the tests of everything it installs. Add it beside carousel: add carousel carousel-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.resizable-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for resizable, and the tests of everything it installs. Add it beside resizable: add resizable resizable-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.chart-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for chart, and the tests of everything it installs. Add it beside chart: add chart chart-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.message-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for message, and the tests of everything it installs. Add it beside message: add message message-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.message-list-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for message-list, and the tests of everything it installs. Add it beside message-list: add message-list message-list-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.attachment-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for attachment, and the tests of everything it installs. Add it beside attachment: add attachment attachment-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.checklist-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for checklist, and the tests of everything it installs. Add it beside checklist: add checklist checklist-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.inspector-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for inspector, and the tests of everything it installs. Add it beside inspector: add inspector inspector-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.skip-link-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for skip-link, and the tests of everything it installs. Add it beside skip-link: add skip-link skip-link-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.tab-bar-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for tab-bar, and the tests of everything it installs. Add it beside tab-bar: add tab-bar tab-bar-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.route-progress-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for route-progress, and the tests of everything it installs. Add it beside route-progress: add route-progress route-progress-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.color-scheme-toggle-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for color-scheme-toggle, and the tests of everything it installs. Add it beside color-scheme-toggle: add color-scheme-toggle color-scheme-toggle-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.page-header-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for page-header, and the tests of everything it installs. Add it beside page-header: add page-header page-header-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.copy-button-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for copy-button, and the tests of everything it installs. Add it beside copy-button: add copy-button copy-button-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.code-block-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for code-block, and the tests of everything it installs. Add it beside code-block: add code-block code-block-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.timer-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for timer, and the tests of everything it installs. Add it beside timer: add timer timer-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.timer-tray-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for timer-tray, and the tests of everything it installs. Add it beside timer-tray: add timer-tray timer-tray-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.celebrate-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for celebrate, and the tests of everything it installs. Add it beside celebrate: add celebrate celebrate-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.choice-card-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for choice-card, and the tests of everything it installs. Add it beside choice-card: add choice-card choice-card-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.image-cropper-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for image-cropper, and the tests of everything it installs. Add it beside image-cropper: add image-cropper image-cropper-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.image-field-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for image-field, and the tests of everything it installs. Add it beside image-field: add image-field image-field-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.share-button-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for share-button, and the tests of everything it installs. Add it beside share-button: add share-button share-button-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.sync-status-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for sync-status, and the tests of everything it installs. Add it beside sync-status: add sync-status sync-status-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.local-date-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for local-date, and the tests of everything it installs. Add it beside local-date: add local-date local-date-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.relative-time-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for relative-time, and the tests of everything it installs. Add it beside relative-time: add relative-time relative-time-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.install-prompt-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for install-prompt, and the tests of everything it installs. Add it beside install-prompt: add install-prompt install-prompt-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.conversation-list-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for conversation-list, and the tests of everything it installs. Add it beside conversation-list: add conversation-list conversation-list-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.attention-card-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for attention-card, and the tests of everything it installs. Add it beside attention-card: add attention-card attention-card-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.reaction-bar-tests: Optional: the Vitest browser tests, type tests, stories and Playwright spec for reaction-bar, and the tests of everything it installs. Add it beside reaction-bar: add reaction-bar reaction-bar-tests. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.ouro-lib-tests: Optional: the tests of every helper in lib/ouro, with ouro-lib. You don't need to add it: each -tests item installs the tests of the helpers its component imports. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.ouro-tests: Optional: every Ouro UI component with its tests, type tests, stories and Playwright spec, and the test kit. The whole suite in one command. It names Vitest, Playwright and Storybook without a version, so the CLI installs one only when your app lacks it and never changes a version you have.ouro-census: Optional: the census journey kit. A Playwright spec of yours lists the pages your app renders and the states a person can open on them; the census records the exact multiset of visible controls in each (role, name, Ouro marker, context) and fails on any change from the committed baseline, and on any unmarked control in a journey you enrol. Unmarked controls may only fall, state by state. It installs e2e/ouro-census/ (the spec helper, the merge, the baseline update and a comparison of two runs).ouro-source-rules: Optional: the hand-rolled-control source rule. It reads your app's source with the TypeScript compiler and its stylesheets with PostCSS, and finds the controls still built by hand (a raw , , , a click handler on a, another UI library's control, control-state styling) and every component that wraps one, as fingerprints held to a committed baseline that may only shrink. It installs scripts/ouro-source-rules.mjs.
-
https://github.com/ourostack/ouro-ui/releases/tag/v0.1.0 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.1.0) ↩ ↩2
-
https://github.com/ourostack/ouro-ui/releases/tag/v0.2.0 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.2.0) ↩ ↩2
-
scripts/install-test.sh; scripts/upgrade-note.mjs verify:testExists(scripts/upgrade-note.test.mjs::the upgrade install test runs the note's commands and copies none) verify:ciJob(install-upgrade) ↩ ↩2
-
https://github.com/ourostack/ouro-ui/releases; .github/workflows/release.yml; scripts/release-commit.sh verify:urlOk(https://github.com/ourostack/ouro-ui/releases) verify:fileLine(.github/workflows/release.yml, /scripts/release-commit.sh "$VERSION"/) verify:fileLine(scripts/release-commit.sh, /changes.mjs assemble/) ↩
-
https://github.com/ourostack/ouro-ui/releases/tag/v0.3.0 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.3.0) verify:fileLine(registry/ouro/theme/ouro-base.css, /--ouro-layer: 50;/) ↩
-
scripts/source-rules.mjs verify:testExists(scripts/source-rules.test.mjs::every istanbul hint in registry/ carries @preserve, so it survives esbuild in an app) ↩
-
https://github.com/ourostack/ouro-ui/releases/tag/v0.3.1 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.3.1) ↩
-
https://github.com/ourostack/ouro-ui/releases/tag/v0.8.0 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.8.0) verify:testExists(scripts/registry.test.mjs::only ouro-base and ouro-theme touch the app's stylesheet, and no other item installs them) verify:testExists(scripts/registry.test.mjs::each lib helper is its own item, so an item installs only the helpers it imports) ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9 ↩10 ↩11 ↩12
-
registry/ouro/components/ouro/link/link.touch.test.tsx verify:testExists(registry/ouro/components/ouro/link/link.touch.test.tsx::gives a link on its own line a 44px box, centred on its text) ↩
-
test:scripts/registry.test.mjs::devDependencies are named without a version, so the CLI installs it only when the app lacks it and never changes a version the app has verify:testExists(scripts/registry.test.mjs::devDependencies are named without a version, so the CLI installs it only when the app lacks it and never changes a version the app has) ↩
-
registry/ouro/lib/ouro/testing/vitest.ts; https://github.com/ourostack/ouro-ui/releases/tag/v0.8.3 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.8.3) verify:testExists(scripts/testing-kit.test.mjs::page sizes every Playwright host while the touch frame keeps its phone viewport and input) verify:testExists(scripts/testing-kit.test.mjs::ouroTestProjects leaves the page size to Vitest unless the app sets one) verify:fileLine(registry/ouro/lib/ouro/testing/vitest.ts, /390x844/) verify:fileLine(docs/guides/testing.md, /1600/) ↩ ↩2 ↩3 ↩4
-
https://github.com/ourostack/ouro-ui/releases/tag/v1.0.0 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v1.0.0) ↩ ↩2
-
https://github.com/ourostack/ouro-ui/releases/tag/v1.1.0 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v1.1.0) verify:fileLine(registry/ouro/theme/ouro-base.css, /--ouro-shadow-sheet-/) verify:fileLine(registry/ouro/theme/ouro-base.css, /--ouro-duration-draw:/) ↩ ↩2
-
test/theme-tokens.test.tsx verify:testExists(test/theme-tokens.test.tsx::standard shadow and font tokens > falls back to the inherited font for headings when the theme names none, and Kbd always keeps it) ↩
-
https://github.com/ourostack/ouro-ui/releases/tag/v1.0.2 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v1.0.2) verify:fileLine(registry/ouro/lib/ouro/form-answer.ts, /Snapshot arrays are readonly/) ↩ ↩2
-
https://ui.shadcn.com/docs/cli verify:urlOk(https://ui.shadcn.com/docs/cli) ↩ ↩2
-
https://github.com/shadcn-ui/ui/blob/3502dbcde11d1eaf967a47ac375744dc336641f3/packages/registry/src/utils/updaters/update-css-vars.ts#L91-L124 verify:urlOk(https://github.com/shadcn-ui/ui/blob/3502dbcde11d1eaf967a47ac375744dc336641f3/packages/registry/src/utils/updaters/update-css-vars.ts#L91-L124) verify:testExists(scripts/install-check.test.mjs::a complete install passes, for each variant and stage) ↩
-
UPGRADING.md verify:fileLine(UPGRADING.md, /[ -n "$items" ] || { echo "No Ouro components/) ↩
-
https://github.com/ourostack/ouro-ui/releases/tag/v0.7.0 verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.7.0) ↩
-
scripts/registry.mts verify:fileLine(scripts/registry.mts, /vitest: "4.1.11"/) verify:fileLine(scripts/registry.mts, /playwright: "1.58.1"/) verify:fileLine(scripts/registry.mts, /storybook: "10.2.10"/) ↩
-
https://github.com/ourostack/ouro-ui/releases/tag/v0.2.0; scripts/install-check.mjs verify:urlOk(https://github.com/ourostack/ouro-ui/releases/tag/v0.2.0) verify:testExists(scripts/install-check.test.mjs::a token that refers to itself fails) ↩