Availability

Preview Available in release assets

Explain server-confirmed inventory changes and offer explicit cart corrections without client-owned stock state.

Server contract

The application owns the route for this supporting commerce state renders the complete server-owned availability view for native navigation; a Datastar request to the same action returns the stable fragment only. Never embed payment controls or treat browser state as commerce truth.

Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.

Availability primary example

<section class="thin-availability" aria-labelledby="availability-title">
  <h2 id="availability-title">Availability changed</h2>
  <div role="alert">
    <p>
      <a href="/products/tote">Everyday canvas tote, blue</a> now has only 1 available. Your quantity was 2.</p>
    </div>
    <form action="/cart/items/tote" method="post">
      <label for="available-quantity">Available quantity</label>
      <input class="thin-input" id="available-quantity" name="quantity" type="number" min="1" max="1" value="1" required />
      <button class="thin-button">Update cart</button>
    </form>
    <form action="/cart/items/tote/remove" method="post">
      <button class="thin-button" data-variant="quiet">Remove item</button>
    </form>
    <p><a href="/collections/bags">Find an alternative</a></p>
  </section>

Show code

<section class="thin-availability" aria-labelledby="availability-title">
  <h2 id="availability-title">Availability changed</h2>
  <div role="alert">
    <p>
      <a href="/products/tote">Everyday canvas tote, blue</a> now has only 1 available. Your quantity was 2.</p>
    </div>
    <form action="/cart/items/tote" method="post">
      <label for="available-quantity">Available quantity</label>
      <input class="thin-input" id="available-quantity" name="quantity" type="number" min="1" max="1" value="1" required />
      <button class="thin-button">Update cart</button>
    </form>
    <form action="/cart/items/tote/remove" method="post">
      <button class="thin-button" data-variant="quiet">Remove item</button>
    </form>
    <p><a href="/collections/bags">Find an alternative</a></p>
  </section>

Anatomy

Change heading
Visible alert
Authoritative limit
Correction forms
Alternative link

Variants and sizes

Neutral theme
Thin-Sky theme
Intrinsic narrow and wide containers

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Available
Low stock
Quantity reduced
Sold out
Backordered
Pending update
Server error

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Normal links and forms navigate and submit to server routes. Returned HTML owns prices, inventory, discounts, validation, totals, and order state.

Accessibility

Use landmarks, headings, labelled native controls, linked error summaries, visible status text, logical reading order, and non-color state cues. Move focus on server navigation, not speculative client updates.

Contract

COMPOSE

Basis

Native forms, tables/lists, headings, links, and status content; no APG widget

Evidence

tests/unit/library/cart-checkout.test.ts

API

Behavior tier: dependency-free

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Cart lines, checkout forms, discounts, availability notices, totals, errors, and order progress remain server-rendered and usable without JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/ecommerce.css

Dependencies: field, quantity-input, alert, status, steps

Source: packages/ui/src/style/ecommerce.ts

Composition

Derived from the examples and style specs, not authored.