The blocks every app ends up building

Accessibility. A labelled form in a section named by its heading (level is a prop). Fields have real labels, autocomplete tokens (username, current-password) and aria-invalid + aria-describedby errors. A failed submit moves focus to an error summary whose links jump to each field; a server failure is announced as an alert. While loading the button sets aria-busy and ignores clicks without being disabled, so focus is not lost.

import { SignInForm } from '$lib/modules';

<SignInForm
  providers={[{ id: 'github', label: 'Continue with GitHub' }]}
  loading={busy}
  error={failure}
  forgotHref="/reset"
  signUpHref="/sign-up"
  on:submit={(e) => signIn(e.detail)}
  on:provider={(e) => startOAuth(e.detail.id)}
/>

Accessibility. Each field shows its own error, tied with aria-invalid and aria-describedby; the password field also points at the strength meter and checklist. Strength is a word, and every requirement says met or not met in text, so nothing rests on colour. Failed submits focus an error summary; the terms label is a slot so it can hold links.

import { SignUpForm } from '$lib/modules';

<SignUpForm
  errors={serverErrors}
  loading={busy}
  signInHref="/sign-in"
  on:submit={(e) => register(e.detail)}
>
  <span slot="terms">I accept the <a href="/terms">terms</a></span>
</SignUpForm>

Accessibility. The bar is decorative; the strength word is a status region announced when it changes, and each requirement carries "(met)" or "(not met)" for screen readers. Link a password input to it with aria-describedby. Honours forced-colors.

import { PasswordStrength } from '$lib/modules';

<input type="password" bind:value={password} aria-describedby="pw-strength" />
<PasswordStrength id="pw-strength" {password} />

Accessibility. A labelled section with a heading (level is a prop) that takes focus when you call focus() after a failed submit, so a screen reader reads it. Each link moves focus into its field. It renders nothing when there are no errors.

import { FormErrorSummary } from '$lib/modules';

<FormErrorSummary
  bind:this={summary}
  {errors}
  fields={[{ name: 'email', label: 'Email', id: 'email' }]}
/>

Accessibility. A Stepper marks the current step with aria-current. Each step change moves focus to that step's heading. The code is one labelled group of cells with one-time-code autocomplete. Resend is disabled with the time left in its text, and a polite status says when it is ready again. Errors are summarised and tied to their fields.

import { PasswordResetFlow } from '$lib/modules';

<PasswordResetFlow
  bind:step
  autoAdvance={false}
  loading={busy}
  error={failure}
  on:request={(e) => sendCode(e.detail.email)}
  on:verify={(e) => checkCode(e.detail)}
  on:reset={(e) => changePassword(e.detail)}
  on:done={() => goto('/sign-in')}
/>

Accessibility. The photo picker is a real button that opens the file dialog; picking a bad file shows its reason in text. Save and Discard are disabled until something changes, and a polite status says "You have unsaved changes" in words. The bio counter is announced politely. Errors are summarised and tied to their fields.

import { ProfileForm } from '$lib/modules';

<ProfileForm
  {initial}
  saving={busy}
  saved={ok}
  on:save={(e) => save(e.detail)}
  on:discard={() => (ok = false)}
/>

Accessibility. A list of sessions; the current one carries a text badge, not only a colour. Each Revoke button is named for its device ("Revoke session on Firefox on Linux"). Times are real <time> elements. "Sign out of all other sessions" opens an alert dialog with Cancel focused. After a revoke, a status says which device was signed out and focus returns to the heading.

import { SessionsList } from '$lib/modules';

<SessionsList
  {sessions}
  now={Date.now()}
  revoking={pendingIds}
  on:revoke={(e) => revoke(e.detail.id)}
  on:revokeAll={(e) => revokeMany(e.detail.ids)}
/>

Accessibility. The dialog is an alertdialog on the native <dialog>: focus is trapped, Cancel is focused first and Escape cancels. Pressing delete before the phrase matches keeps the dialog open, explains what to type in text and moves focus to the field. The button describes itself with the warning text.

import { DangerZone } from '$lib/modules';

<DangerZone
  confirmPhrase={account.name}
  deleting={busy}
  on:delete={() => deleteAccount()}
/>

Accessibility. An ordered list of three parts, each with a heading. The secret is selectable text with a Copy button, for people who cannot scan. The code is a labelled one-time-code group with a text error. Copy and download results are announced in a status region. Finish stays disabled until "I have saved my recovery codes" is ticked.

import { TwoFactorSetup } from '$lib/modules';

<TwoFactorSetup
  secret={secret}
  recoveryCodes={codes}
  verified={ok}
  error={failure}
  on:verify={(e) => check(e.detail.code)}
  on:complete={() => close()}
>
  <img slot="qr" src={qrDataUrl} alt="QR code for your authenticator app" />
</TwoFactorSetup>

Accessibility. The ARIA menu-button pattern with radio items. Enter, Space or arrows open it on the current account; arrows, Home and End move and skip disabled accounts; a letter jumps to the next match; Escape closes and returns focus to the button. The current account has aria-checked, a check mark and the word "current" for screen readers.

import { AccountSwitcher } from '$lib/modules';

<AccountSwitcher
  {accounts}
  bind:current
  addLabel="Add account"
  on:select={(e) => switchTo(e.detail.id)}
  on:add={() => goto('/accounts/new')}
/>

Accessibility. The theme choice is a real radio group in a fieldset, so arrow keys move between cards and the selected card carries a check mark as well as a border. The slider and switch are native controls with labels and hints; the preview is a labelled group and its animation stops with reduce motion or the OS setting.

import { AppearanceSettings } from '$lib/modules';

let appearance = { theme: 'system', density: 'comfortable', textSize: 100, reduceMotion: false };

<AppearanceSettings bind:value={appearance} on:change={(e) => save(e.detail)} />

Accessibility. A real table with row and column headers inside a keyboard-scrollable region. Every checkbox has a name that includes its event and channel; select-all boxes use the native indeterminate state for "some". Quiet hours validate with messages tied to the fields, and the on-count is a polite status.

import { NotificationPreferences } from '$lib/modules';

<NotificationPreferences
  events={[{ id: 'comment', label: 'New comment' }]}
  channels={[{ id: 'email', label: 'Email', quietHours: true }, { id: 'push', label: 'Push' }]}
  bind:value
  bind:quietHours
  on:change={(e) => save(e.detail)}
/>

Accessibility. The create dialog is a native modal with a validation summary (role alert) and per-field errors. Focus moves to the one-time secret when it appears, back to the create button when it is dismissed, and to the heading after a revoke. Copy results are announced; revoking uses an alert dialog where Cancel has focus first.

import { ApiKeysManager } from '$lib/modules';

<ApiKeysManager
  {keys}
  scopes={[{ value: 'users:read', label: 'Read users' }, { value: 'users:write', label: 'Write users' }]}
  {createdSecret}
  on:create={(e) => createKey(e.detail)}
  on:revoke={(e) => revokeKey(e.detail.id)}
  on:secretdismiss={() => (createdSecret = '')}
/>

Accessibility. Switches, edit and delete buttons name their endpoint. The dialog shows a summary of errors as an alert and ties each message to its field. Delivery results are words ("Delivered 200", "Failed 500"), never colour alone, and the log is a disclosure list.

import { WebhooksManager } from '$lib/modules';

<WebhooksManager
  {endpoints}
  events={[{ value: 'invoice.paid', label: 'Invoice paid' }]}
  on:save={(e) => save(e.detail)}
  on:toggle={(e) => setEnabled(e.detail)}
  on:remove={(e) => remove(e.detail.id)}
/>

Accessibility. The banner is a labelled region, not a modal: it never traps focus or hides the page. Reject is as easy as accept. The locked switch is disabled and says "Always on". After a decision made by keyboard, focus returns to where it was; the decision is announced.

import { CookieConsent } from '$lib/modules';

<CookieConsent
  bind:visible
  policyHref="/privacy"
  on:save={(e) => storeChoices(e.detail)}
  on:accept={(e) => storeChoices(e.detail)}
  on:reject={(e) => storeChoices(e.detail)}
/>

Accessibility. Status is text in a status region, not just a colour. Deletion needs a typed phrase in a dialog and the confirm button stays off until it matches. When the app answers a request the person made, focus moves to that status; updates that arrive on their own never steal focus.

import { PrivacyControls } from '$lib/modules';

<PrivacyControls
  {exportRequest}
  {deleteRequest}
  on:exportrequest={startExport}
  on:deleterequest={startDelete}
  on:cancelrequest={(e) => cancel(e.detail.kind)}
/>

Accessibility. Every field is labelled; the time zone is an ARIA combobox with type-ahead on city names and a result count. The preview is a labelled group that updates politely, and dates are formatted for an explicit time zone so the output never depends on the viewer.

import { LanguageRegionSettings } from '$lib/modules';

<LanguageRegionSettings bind:value={region} now={new Date().toISOString()} on:change={(e) => save(e.detail)} />

Accessibility. Each card is a list item with a heading at the next level. Status is a word in a badge. Buttons carry the service name for screen readers, the permissions disclosure is a native details element, and disconnect uses an alert dialog with Cancel focused first.

import { IntegrationsList } from '$lib/modules';

<IntegrationsList
  {integrations}
  busyId={pending}
  on:connect={(e) => connect(e.detail.id)}
  on:disconnect={(e) => disconnect(e.detail.id)}
/>

Accessibility. The nav is a labelled landmark whose current link has aria-current="page"; arrow keys, Home and End move between links. Choosing a section moves focus to its panel, which is a named region. The hash deep-links to a section, and the mobile select is a native control.

import { SettingsLayout } from '$lib/modules';

<SettingsLayout sections={[{ id: 'profile', label: 'Profile' }, { id: 'alerts', label: 'Notifications' }]} bind:active let:active>
  {#if active === 'profile'}<ProfileForm />{:else}<NotificationPreferences ... />{/if}
</SettingsLayout>

Accessibility. The headline is a heading at a configurable level and labels its section. CTAs with an href are links, otherwise buttons. Split layout stacks below 48rem so nothing scrolls sideways at 320px. Buttons are at least 44px tall.

import { Hero } from '$lib/modules';

<Hero title="Ship faster" lede="A starter kit." layout="split" primary={{ label: 'Get started', href: '/signup' }}>
	<img slot="media" src="/shot.png" alt="The dashboard" />
</Hero>

Accessibility. A list of cards under a configurable heading level. Icons are decorative (aria-hidden). Link text is extended with the feature title so "Learn more" is never ambiguous out of context.

import { FeatureGrid } from '$lib/modules';

<FeatureGrid title="Why us" columns={3} features={[{ title: 'Fast', text: 'Edge rendered.', href: '/fast' }]}>
	<span slot="icon">*</span>
</FeatureGrid>

Accessibility. The billing switch is a labelled radio group, so arrow keys work natively. Every feature says Included or Not included in text for screen readers. The highlight is a border plus a badge, not colour alone. Plans stack on a phone. Fires select and intervalchange.

import { PricingTable } from '$lib/modules';

<PricingTable plans={plans} bind:interval currency="EUR" locale="de-DE" on:select={(e) => choose(e.detail.planId)} />

Accessibility. A true table with a caption, column and row headers. The scroll region is labelled and focusable so the keyboard can scroll it; the first column is sticky. Ticks and dashes carry Included / Not included text.

import { ComparisonTable } from '$lib/modules';

<ComparisonTable caption="Plan comparison" plans={plans} rows={rows} highlight="pro" />

Accessibility. Follows the carousel pattern: aria-roledescription, a labelled group per slide. The live region is off while rotating and polite otherwise. Autoplay is opt-in, never runs under reduced motion, and stops on hover, focus or the Pause button.

import { TestimonialCarousel } from '$lib/modules';

<TestimonialCarousel items={quotes} autoplay={6000} on:change={(e) => track(e.detail.index)} />

Accessibility. Every logo image has the company name as alt text; logos without an image fall back to text. Linked logos are real links. The heading can be visually hidden but stays in the outline.

import { LogoCloud } from '$lib/modules';

<LogoCloud logos={[{ name: 'Acme', src: '/acme.svg', href: 'https://acme.test' }]} />

Accessibility. A description list. Counting is skipped under reduced motion. The moving number is aria-hidden and the final value is always available as text, so nothing is read half-counted.

import { StatsStrip } from '$lib/modules';

<StatsStrip stats={[{ label: 'Customers', value: 12000, suffix: '+' }]} />

Accessibility. Each question is a heading holding a button with aria-expanded and aria-controls. A polite live region reports the match count or that nothing matches, and a visible empty message appears as well. Search matches ignore case and accents.

import { FaqSection } from '$lib/modules';

<FaqSection items={faqs} single bind:query on:toggle={(e) => log(e.detail)} />

Accessibility. Invalid input shows errors tied to the field with aria-invalid and aria-describedby, and focus moves to the first. Outcomes are announced by a status live region and focus moves to it on success. The honeypot is hidden from people and assistive technology.

import { NewsletterSignup } from '$lib/modules';

<NewsletterSignup status={status} message={note} on:subscribe={(e) => save(e.detail.email)} />

Accessibility. A failed submit shows an alert summary with links to each field and moves focus to it; each field is tied to its error. The message has a polite character counter. Success replaces the form with a confirmation that takes focus.

import { ContactForm } from '$lib/modules';

<ContactForm status={status} on:send={(e) => post(e.detail)} on:reset={() => (status = 'idle')} />

Accessibility. A labelled section with a configurable heading level. Actions are links when given an href, buttons otherwise, and are at least 44px tall.

import { CtaBanner } from '$lib/modules';

<CtaBanner title="Ready?" text="Start free." primary={{ label: 'Sign up', href: '/signup' }} />

Accessibility. Each link column, the social group and the legal row is its own labelled nav landmark. Social links are named by network and announce that they open a new tab. Links are at least 44px tall.

import { SiteFooter } from '$lib/modules';

<SiteFooter brand="Acme" columns={cols} social={[{ name: 'GitHub', href: 'https://github.com/acme' }]} legal={legal} copyright="2026 Acme" />

Accessibility. A labelled aside, not an alert, so it never interrupts. The dismiss button has a name and a 44px target. Dismissing fires dismiss; the app decides whether to remember it and passes open={false} later.

import { AnnouncementBar } from '$lib/modules';

<AnnouncementBar message="v2 is out." link={{ label: 'Read more', href: '/v2' }} on:dismiss={() => remember()} />

Accessibility. A list of cards with a heading per person at a configurable level. Avatars fall back to initials and are named. Link names include the person ("Ada on GitHub").

import { TeamGrid } from '$lib/modules';

<TeamGrid title="The team" members={[{ name: 'Ada Lovelace', role: 'Engineer', links: [{ label: 'GitHub', href: '#' }] }]} />

Accessibility. A labelled region around a real table: sortable headers are buttons with aria-sort (Shift adds a column), the select-all checkbox goes indeterminate, every row checkbox and action button names its row, result counts and sort changes are announced, loading is aria-busy, errors offer a retry. Below about 40rem of its own width the rows become cards whose cells carry their column label.

import { DataGrid } from '$lib/modules';

<DataGrid
  label="People"
  {rows}
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'team', label: 'Team', sortable: true, filter: 'select', options }
  ]}
  selectable
  bind:selected
  rowActions={[{ id: 'edit', label: 'Edit' }]}
  bulkActions={[{ id: 'delete', label: 'Delete', danger: true }]}
  on:bulkaction={onBulk}
  on:export={(e) => download(e.detail.csv, e.detail.name)}
/>

Accessibility. A labelled group: each chip has a remove button that names its filter, adding a filter opens a labelled form (Escape cancels) and returns focus to the menu, and every add, remove or clear plus the new result count is announced in a status region.

import { FilterBar, toColumnFilters } from '$lib/modules';

<FilterBar
  {defs}
  bind:active
  count={visibleRows.length}
/>
<DataGrid {rows} {columns} filters={toColumnFilters(defs, active)} label="Orders" />

Accessibility. Every column is a labelled section with a configurable heading level. Cards move by drag, by Space then arrows on the grip, by Alt+arrows, or from a menu that names each destination. Every move or refusal is announced in a live region; a full column says "At limit" in text, not just colour.

import { KanbanBoard } from '$lib/modules';

<KanbanBoard
  label="Sprint board"
  columns={[{ id: 'todo', title: 'To do' }, { id: 'doing', title: 'Doing', limit: 3 }]}
  bind:cards
  on:move={(e) => save(e.detail)}
/>

Accessibility. Each day is a heading over an ordered list. Times are <time> elements whose datetime and title are exact. Today and Yesterday come from the now and timeZone you pass, so server and browser agree. After Load more, focus moves to the first new item.

import { ActivityFeed } from '$lib/modules';

<ActivityFeed
  label="Recent activity"
  {items}
  now={new Date('2026-10-13T15:00:00Z')}
  hasMore
  on:loadmore={loadOlder}
/>

Accessibility. The thread is a nested list of articles. The compose field is labelled and tied to its character count and error (aria-describedby, aria-invalid, role="alert"); the remaining count is only spoken near the limit. Reactions are toggle buttons with aria-pressed, branches use aria-expanded, delete asks first, and focus lands on the new or edited comment.

import { CommentThread } from '$lib/modules';

<CommentThread
  bind:comments
  currentUser={{ id: 'u1', name: 'Ada Lovelace' }}
  {now}
  maxLength={500}
  on:post={(e) => save(e.detail.comment)}
/>

Accessibility. Role selects and buttons carry the member name. The last owner is locked with the reason available to assistive technology. The invite dialog uses a tag input that refuses invalid, duplicate and existing addresses with a message. Removing and revoking ask first, and results are announced.

import { TeamMembers } from '$lib/modules';

<TeamMembers
  bind:members
  bind:invites
  currentUserId="u1"
  {now}
  on:invite={(e) => api.invite(e.detail.emails, e.detail.role)}
/>

Accessibility. Breadcrumbs are a labelled nav with aria-current. Items have a checkbox, a menu and a name button, and each file type shows an icon plus a word. Rename is an inline labelled field (Enter saves, Escape cancels) with errors tied to it. Uploads are a list of real progress bars with a named Cancel button; drops, navigation and deletes are announced.

import { FileManager, setUploadProgress } from '$lib/modules';

<FileManager
  label="Project files"
  bind:entries
  bind:folderId
  bind:uploads
  maxBytes={5_000_000}
  on:upload={(e) => start(e.detail.jobs, e.detail.files)}
/>

Accessibility. The month is an ARIA grid with one tab stop: arrows move by day or week, Home and End to the ends of the week, PageUp and PageDown by month. Each day is named with its date and event count, today is marked with aria-current, the month title is a polite live region, and the agenda list carries the same events in plain text for narrow screens.

import { CalendarSchedule } from '$lib/modules';

<CalendarSchedule
  label="Team calendar"
  bind:events
  {now}
  weekStart={1}
  on:add={(e) => api.create(e.detail.event)}
/>

Accessibility. role="tree" with treeitems exposing aria-level, aria-posinset, aria-setsize, aria-expanded and aria-selected. One item is in the tab order; Up and Down move, Right opens then enters, Left closes then goes to the parent, Home and End jump, * opens siblings, Enter or Space selects, and typing letters jumps to the next matching label.

import { TreeView } from '$lib/modules';

<TreeView
  label="Project files"
  {nodes}
  bind:expanded
  bind:selected
  on:select={(e) => open(e.detail.id)}
/>

Accessibility. Filters sit in a labelled search form with a real fieldset for severities; the matching count is announced. Severity is always a word beside the badge colour. Each row has a details button with aria-expanded and aria-controls naming its event, and the table scrolls inside a focusable labelled region on narrow screens.

import { AuditLog } from '$lib/modules';

<AuditLog
  label="Security events"
  {events}
  timeZone="UTC"
  on:export={(e) => download(e.detail.csv, e.detail.name)}
/>

Accessibility. A labelled section with a definition list; the status is a badge with words; renewal is a <time>. Past-due and ending-soon notices are alerts. Cancel opens an alertdialog that focuses "Keep plan" first.

import { BillingOverview } from '$lib/modules';

<BillingOverview
  plan={{ name: 'Pro', priceCents: 2900, interval: 'month' }}
  renewsAt="2026-11-01T00:00:00Z"
  meters={[{ id: 'api', label: 'API calls', used: 8400, limit: 10000 }]}
  on:upgrade={openPlans}
  on:cancel={cancelPlan}
/>

Accessibility. Each bar is role="meter" with min, max, now and a text value ("8,400 of 10,000 API calls. Near limit"). State is written as text with an icon, and an overage is also striped, never colour alone.

import { UsageMeters } from '$lib/modules';

<UsageMeters
  meters={[{ id: 'seats', label: 'Seats', used: 12, limit: 10, unit: 'seats' }]}
  warnAt={0.8}
  resetsAt="2026-11-01T00:00:00Z"
  now={new Date()}
/>

Accessibility. Keeps table, row and cell roles in the stacked layout so a screen reader still gets a table. Status badges include the word. Each download has its own label ("Download invoice INV-1004"). Paging is announced.

import { InvoiceList } from '$lib/modules';

<InvoiceList
  {invoices}
  pageSize={5}
  on:download={(e) => save(e.detail.invoice)}
  on:pagechange={(e) => load(e.detail.page)}
/>

Accessibility. An article named "Visa ending in 4242". Expired and expiring-soon are badges with words. Buttons name the card they act on. Remove asks in an alertdialog that focuses the safe choice.

import { PaymentMethodCard } from '$lib/modules';

<PaymentMethodCard
  method={{ id: 'pm_1', brand: 'visa', last4: '4242', expMonth: 12, expYear: 2027, isDefault: true }}
  now={new Date()}
  on:setDefault={makeDefault}
  on:remove={removeCard}
/>

Accessibility. cc-name, cc-number, cc-exp and cc-csc autocomplete; numeric keyboards. Errors show inline after blur or submit, tied with aria-describedby and aria-invalid, and are summarised in a role="alert" box that takes focus with links to each field.

import { PaymentMethodForm } from '$lib/modules';

<!-- Demo fields. In production use your processor's hosted fields. -->
<PaymentMethodForm on:submit={(e) => console.log(e.detail.brand, e.detail.last4)} />

Accessibility. Fieldsets with legends; shipping-* autocomplete; the region field is a select or text and the postal label follows the country. Submit errors are summarised in a focused role="alert" with links. The pay button keeps focus while loading; the total is a polite live region.

import { CheckoutForm } from '$lib/modules';

<CheckoutForm
  {items}
  shippingMethods={methods}
  taxRate={0.08}
  loading={paying}
  on:submit={(e) => pay(e.detail)}
>
  <PaymentFields slot="payment" />
</CheckoutForm>

Accessibility. Steppers are labelled with the item name. Changes are announced in a polite status line, and focus returns to the heading after a removal. Promo errors are tied to the input. Totals are a polite live region.

import { CartSummary } from '$lib/modules';

<CartSummary
  bind:items
  promos={[{ code: 'SAVE10', kind: 'percent', value: 10 }]}
  taxRate={0.08}
  on:checkout={goToCheckout}
/>

Accessibility. An ordered list; the current step has aria-current="step". Each step says Completed, Current step or Upcoming in text, so state is not only a colour or an icon. Dates are <time> elements.

import { OrderStatusTracker } from '$lib/modules';

<OrderStatusTracker
  steps={[{ id: 'placed', label: 'Order placed' }, { id: 'shipped', label: 'Shipped' }]}
  current={1}
  eta="2026-10-20"
/>

Ceramic mug

4.5 out of 5 stars, 32 reviews

$18.00

Add to cart

Sale

Canvas tote

4 out of 5 stars, 8 reviews

Sale price: $21.00 Original price: $28.00

Add to cart

E Sold out

Enamel pin

5 out of 5 stars, 1 review

$9.00

Sold out

Accessibility. An article with a heading of your level. The image needs real alt text. Sale and original prices are announced ("Sale price", "Original price"). Sold out is a badge and a disabled button saying so. Add is confirmed in a polite status.

import { ProductCard } from '$lib/modules';

<ProductCard
  product={{ id: 'p1', name: 'Mug', image: '/mug.jpg', imageAlt: 'White ceramic mug', priceCents: 1800, salePriceCents: 1400, rating: 4.5, reviewCount: 32 }}
  on:add={(e) => cart.add(e.detail.id)}
/>

‹ ›

• 
• 
• 
• 

Accessibility. A named group (roledescription "gallery"). Arrow keys, Home and End move between images; thumbnails are buttons marked aria-current; the caption "Image 2 of 5" is a polite live region. The strip scrolls inside itself.

import { ProductGallery } from '$lib/modules';

<ProductGallery bind:index images={[{ src: '/a.jpg', alt: 'Front view' }, { src: '/b.jpg', alt: 'Side view' }]} />

Accessibility. Bars carry their numbers as text. The sort is a native select and the result is announced. Helpful is a toggle with aria-pressed. The write form uses a star-rating radio group and tied inline errors.

import { ReviewsRatings } from '$lib/modules';

<ReviewsRatings {reviews} canWrite on:submit={postReview} on:helpful={markHelpful} />

Accessibility. Display: the stars are hidden and one text alternative ("4.5 out of 5 stars, 12 reviews") is read. Input: a fieldset with legend and real radios, so arrow keys and forms work; the filled state has an outline, not only a colour.

import { RatingStars } from '$lib/modules';

<RatingStars value={4.5} count={12} showValue />
<RatingStars variant="input" label="Your rating" bind:value={mine} />

Accessibility. Every day has a text label ("Jan 4, 2026: Outage, 42 minutes"). The strip is one tab stop; arrows pick a day and its text is printed beneath. A "Days with issues" disclosure lists only the bad days. Status is badge text, and bad days are striped.

import { StatusPage } from '$lib/modules';

<StatusPage {components} {incidents} updatedAt="2026-10-13T09:00:00Z" />

Accessibility. Each version heading is an anchor link with an aria-label. The filter is a checkbox group (checked chips show a tick). "Showing 2 of 5 releases" is a polite status. Tags include their word.

import { ChangelogList } from '$lib/modules';

<ChangelogList {releases} bind:types />

Accessibility. The email field has autocomplete and a tied, announced error. After joining, focus moves to the confirmation heading and the position is a status. Copy link reports success in a live region.

import { WaitlistSignup } from '$lib/modules';

<WaitlistSignup bind:state position={1204} referralCode="ada" shareUrl="https://example.com/" on:join={join} />

Accessibility. The timer has aria-live="off"; the digits are hidden from assistive technology and a plain "2 days, 3 hours left" is provided. With reduced motion it updates once a minute and drops seconds. Nothing animates. Copy and dismiss are 44px buttons.

import { CouponBanner } from '$lib/modules';

<CouponBanner message="Spring sale: 20% off" code="SPRING20" endsAt="2026-11-01T00:00:00Z" />