create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/components/base/Link.css

@@ -0,0 +1,15 @@
+.nv-link { color: inherit; text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--border-width); }
+.nv-link[data-variant='inline'] { text-decoration: underline; }
+.nv-link[data-variant='inline']:hover { text-decoration-thickness: 2px; }
+.nv-link[data-variant='standalone'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-weight: var(--weight-medium);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: var(--underline-offset-lg);
+}
+.nv-link[data-variant='standalone']:hover { text-decoration-color: currentColor; }
+.nv-link[data-variant='muted'] { color: var(--color-fg-muted); text-decoration: none; }
+.nv-link[data-variant='muted']:hover { color: var(--color-fg); text-decoration: underline; }

package/templates/nova/src/components/base/Link.tsx

@@ -0,0 +1,23 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react'
+import { Icon } from '../../styles/Icon'
+import './Link.css'
+
+/**
+ * Nova 02 · Link. inline — always underlined (never colour alone); hover
+ * thickens to 2px. standalone — 500 weight, optional forward arrow that
+ * mirrors in RTL. muted — supporting links (footer, legal).
+ */
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  variant?: 'inline' | 'standalone' | 'muted'
+  arrow?: boolean
+  children: ReactNode
+}
+
+export function Link({ variant = 'inline', arrow, className, children, ...rest }: LinkProps): JSX.Element {
+  return (
+    <a className={['nv-link', className].filter(Boolean).join(' ')} data-variant={variant} {...rest}>
+      {children}
+      {arrow && <Icon name="arrow-right" size="sm" />}
+    </a>
+  )
+}

package/templates/nova/src/components/base/Radio.tsx

@@ -0,0 +1,13 @@
+import type { ChoiceProps } from './choice-props'
+import './choice.css'
+
+/** Nova 02 · Radio — off · on · disabled. Group radios with a shared `name` inside a fieldset. */
+export function Radio({ label, invalid, className, indeterminate: _i, ...rest }: ChoiceProps): JSX.Element {
+  return (
+    <label className={['nv-choice', className].filter(Boolean).join(' ')} data-kind="radio" data-invalid={invalid ? '' : undefined}>
+      <input type="radio" className="nv-choice__input" {...rest} />
+      <span className="nv-choice__box" aria-hidden />
+      <span className="nv-choice__label">{label}</span>
+    </label>
+  )
+}

package/templates/nova/src/components/base/Select.css

@@ -0,0 +1,18 @@
+.nv-select { position: relative; display: block; min-width: 0; }
+.nv-select__control {
+  appearance: none;
+  width: 100%;
+  min-height: var(--input-height-md);
+  padding: var(--space-2) calc(var(--input-pad-x) + 24px) var(--space-2) var(--input-pad-x);
+  border: var(--input-border);
+  border-radius: var(--input-radius);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-size: var(--type-body);
+  cursor: pointer;
+}
+.nv-select[data-size='lg'] .nv-select__control { min-height: var(--input-height-lg); font-size: 1rem; }
+.nv-select__control:hover { border-color: var(--color-border-emphasis); }
+.nv-select__control:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
+.nv-select__control:disabled { background: var(--color-bg-muted); border-color: transparent; color: var(--color-fg-subtle); cursor: not-allowed; }
+.nv-select > .nv-icon { position: absolute; inset-inline-end: var(--input-pad-x); top: 50%; translate: 0 -50%; pointer-events: none; }

package/templates/nova/src/components/base/Select.tsx

@@ -0,0 +1,34 @@
+import type { SelectHTMLAttributes } from 'react'
+import { Icon } from '../../styles/Icon'
+import './Select.css'
+
+/**
+ * Nova 02 · Select — closed · open · disabled. Native <select> (the design's
+ * rule on touch devices, and the accessible baseline everywhere). The
+ * pointer-device custom listbox with type-ahead is a Nova 13 popover concern.
+ */
+export interface SelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  options: SelectOption[]
+  size?: 'md' | 'lg'
+}
+
+export function Select({ options, size = 'md', className, ...rest }: SelectProps): JSX.Element {
+  return (
+    <span className={['nv-select', className].filter(Boolean).join(' ')} data-size={size}>
+      <select className="nv-select__control" {...rest}>
+        {options.map((o) => (
+          <option key={o.value} value={o.value} disabled={o.disabled}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+      <Icon name="chevron-down" size="sm" />
+    </span>
+  )
+}

package/templates/nova/src/components/base/Skeleton.css

@@ -0,0 +1,17 @@
+/* Nova 14 · 14.2 — final geometry, #F0F0EE blocks, no shimmer. A 1.2s opacity pulse starts
+   only when loading passes 1s (the container sets data-slow); none under reduced motion. */
+.nv-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background: var(--color-skeleton, var(--color-bg-muted));
+  border-radius: var(--radius-sm);
+}
+.nv-skeleton[data-shape='text'] { height: 0.75em; margin-block: 0.35em; }
+.nv-skeleton[data-shape='media'] { width: 100%; aspect-ratio: var(--ratio-product); border-radius: var(--radius-media); }
+.nv-skeleton[data-shape='circle'] { border-radius: var(--radius-circle); aspect-ratio: 1; }
+.nv-skeleton-lines { display: block; }
+[data-slow] .nv-skeleton { animation: nv-skeleton-pulse 1.2s ease-in-out infinite; }
+@keyframes nv-skeleton-pulse { 50% { opacity: 0.55; } }
+@media (prefers-reduced-motion: reduce) { [data-slow] .nv-skeleton { animation: none; } }
+[data-motion='reduced'] .nv-skeleton { animation: none !important; }

package/templates/nova/src/components/base/Skeleton.tsx

@@ -0,0 +1,23 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import type { CSSProperties } from 'react'
+import './Skeleton.css'
+
+/**
+ * Nova 02 · 14 Skeleton — media · text · circle. Geometry matches the final
+ * content (no layout shift). No shimmer (Nova 14): a quiet pulse only after
+ * the container has waited over a second. The container owns aria-busy and
+ * the one "Loading …" announcement.
+ */
+export function Skeleton({ shape = 'text', width, ratio, lines = 1 }: { shape?: 'text' | 'media' | 'circle'; width?: string; ratio?: string; lines?: number }): JSX.Element {
+  if (shape === 'text' && lines > 1) {
+    return (
+      <span className="nv-skeleton-lines" aria-hidden>
+        {Array.from({ length: lines }, (_, i) => (
+          <span key={i} className={sxJoin("nv-skeleton", sx({ width: i === lines - 1 ? '60%' : width }))} data-shape="text" />
+        ))}
+      </span>
+    )
+  }
+  const style: CSSProperties = { width, aspectRatio: ratio }
+  return <span className={sxJoin("nv-skeleton", sx(style))} data-shape={shape} aria-hidden />
+}

package/templates/nova/src/components/base/Spinner.css

@@ -0,0 +1,13 @@
+.nv-spinner {
+  display: inline-block;
+  flex: none;
+  width: 24px;
+  height: 24px;
+  border: 2px solid currentColor;
+  border-inline-end-color: transparent;
+  border-radius: var(--radius-circle);
+  opacity: 0.8;
+  animation: nv-spin 800ms linear infinite;
+}
+.nv-spinner[data-size='sm'] { width: 16px; height: 16px; border-width: 1.5px; }
+@keyframes nv-spin { to { transform: rotate(360deg); } }

package/templates/nova/src/components/base/Spinner.tsx

@@ -0,0 +1,8 @@
+import './Spinner.css'
+
+/** Nova 02 · Spinner — 16 / 24, inline only (buttons, inline waits); sections use Skeleton. */
+export function Spinner({ size = 'md', label }: { size?: 'sm' | 'md'; label?: string }): JSX.Element {
+  return (
+    <span className="nv-spinner" data-size={size} role={label ? 'status' : undefined} aria-label={label} aria-hidden={label ? undefined : true} />
+  )
+}

package/templates/nova/src/components/base/Switch.tsx

@@ -0,0 +1,16 @@
+import type { ChoiceProps } from './choice-props'
+import './choice.css'
+
+/**
+ * Nova 02 · Toggle (role="switch") — off · on · focus. The off track is the
+ * 3:1 control boundary (Round 2 · D15).
+ */
+export function Switch({ label, className, indeterminate: _i, invalid: _v, ...rest }: ChoiceProps): JSX.Element {
+  return (
+    <label className={['nv-choice', className].filter(Boolean).join(' ')} data-kind="toggle">
+      <input type="checkbox" role="switch" className="nv-choice__input" {...rest} />
+      <span className="nv-choice__box" aria-hidden />
+      <span className="nv-choice__label">{label}</span>
+    </label>
+  )
+}

package/templates/nova/src/components/base/Tabs.css

@@ -0,0 +1,24 @@
+.nv-tabs__list { display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; }
+.nv-tabs__list::-webkit-scrollbar { display: none; }
+.nv-tabs[data-variant='underline'] .nv-tabs__list { border-bottom: var(--border-subtle); }
+.nv-tabs__tab {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  flex: none;
+  min-height: var(--touch-target);
+  padding-block: var(--space-2);
+  color: var(--color-fg-muted);
+  font-weight: var(--weight-medium);
+  white-space: nowrap;
+}
+.nv-tabs__tab:hover { color: var(--color-fg); }
+.nv-tabs__tab[aria-selected='true'] { color: var(--color-fg); }
+.nv-tabs[data-variant='underline'] .nv-tabs__tab { margin-bottom: -1px; border-bottom: 2px solid transparent; }
+.nv-tabs[data-variant='underline'] .nv-tabs__tab[aria-selected='true'] { border-bottom-color: var(--color-fg); }
+.nv-tabs__count { font-size: var(--type-caption); color: var(--color-fg-muted); line-height: var(--leading-caption); }
+.nv-tabs[data-variant='segmented'] .nv-tabs__list { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-bg-muted); }
+.nv-tabs[data-variant='segmented'] .nv-tabs__tab { min-height: 36px; padding-inline: var(--space-4); border-radius: var(--radius-sm); }
+.nv-tabs[data-variant='segmented'] .nv-tabs__tab[aria-selected='true'] { background: var(--color-bg); box-shadow: var(--shadow-floating); }
+.nv-tabs__panel { padding-top: var(--space-5); }
+.nv-tabs__panel:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

package/templates/nova/src/components/base/Tabs.tsx

@@ -0,0 +1,61 @@
+import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import './Tabs.css'
+
+/**
+ * Nova 02 · Tabs — underline (page-level) · segmented (in-component).
+ * ARIA tabs pattern: roving tabindex, ← → Home End move, the tab strip (only)
+ * scrolls horizontally at 390. Arrows mirror in RTL.
+ */
+export interface TabItem {
+  id: string
+  label: ReactNode
+  count?: number
+  content: ReactNode
+}
+
+export function Tabs({ items, variant = 'underline', defaultValue, label }: { items: TabItem[]; variant?: 'underline' | 'segmented'; defaultValue?: string; label: string }): JSX.Element {
+  const [active, setActive] = useState(defaultValue ?? items[0]?.id)
+  const base = useId()
+  const refs = useRef<(HTMLButtonElement | null)[]>([])
+  const onKey = (e: KeyboardEvent, i: number) => {
+    const rtl = (e.currentTarget as HTMLElement).closest('[dir]')?.getAttribute('dir') === 'rtl'
+    let next = -1
+    if (e.key === (rtl ? 'ArrowLeft' : 'ArrowRight')) next = (i + 1) % items.length
+    else if (e.key === (rtl ? 'ArrowRight' : 'ArrowLeft')) next = (i - 1 + items.length) % items.length
+    else if (e.key === 'Home') next = 0
+    else if (e.key === 'End') next = items.length - 1
+    if (next < 0) return
+    e.preventDefault()
+    setActive(items[next].id)
+    refs.current[next]?.focus()
+  }
+  return (
+    <div className="nv-tabs" data-variant={variant}>
+      <div className="nv-tabs__list" role="tablist" aria-label={label}>
+        {items.map((t, i) => (
+          <button
+            key={t.id}
+            ref={(el) => (refs.current[i] = el)}
+            type="button"
+            role="tab"
+            id={`${base}-${t.id}-tab`}
+            aria-selected={active === t.id}
+            aria-controls={`${base}-${t.id}-panel`}
+            tabIndex={active === t.id ? 0 : -1}
+            className="nv-tabs__tab"
+            onClick={() => setActive(t.id)}
+            onKeyDown={(e) => onKey(e, i)}
+          >
+            {t.label}
+            {typeof t.count === 'number' && <span className="nv-tabs__count nv-tabular">{t.count}</span>}
+          </button>
+        ))}
+      </div>
+      {items.map((t) => (
+        <div key={t.id} role="tabpanel" id={`${base}-${t.id}-panel`} aria-labelledby={`${base}-${t.id}-tab`} hidden={active !== t.id} tabIndex={0} className="nv-tabs__panel">
+          {t.content}
+        </div>
+      ))}
+    </div>
+  )
+}

package/templates/nova/src/components/base/Textarea.css

@@ -0,0 +1 @@
+.nv-textarea { min-height: 96px; resize: vertical; border-radius: min(var(--input-radius), var(--radius-lg)); line-height: var(--leading-base); }

package/templates/nova/src/components/base/Textarea.tsx

@@ -0,0 +1,8 @@
+import type { TextareaHTMLAttributes } from 'react'
+import './Input.css'
+import './Textarea.css'
+
+/** Nova 02 · Textarea — the Input anatomy, 96px min, vertical resize; radius caps at lg. */
+export function Textarea({ className, rows = 4, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>): JSX.Element {
+  return <textarea className={['nv-input', 'nv-textarea', className].filter(Boolean).join(' ')} rows={rows} {...rest} />
+}

package/templates/nova/src/components/base/choice-props.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, ReactNode } from 'react'
+
+/** Shared by Checkbox · Radio · Switch (Nova 02): 40px row, the label is the click area (44px target). */
+export interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: ReactNode
+  /** Checkbox only: the "mixed" state. */
+  indeterminate?: boolean
+  invalid?: boolean
+}

package/templates/nova/src/components/base/choice.css

@@ -0,0 +1,69 @@
+.nv-choice {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: 40px;
+  padding-block: 2px;
+  cursor: pointer;
+  font-size: var(--type-body);
+}
+.nv-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
+.nv-choice__box {
+  position: relative;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border: var(--border-width-control) solid var(--color-border-input);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+}
+.nv-choice[data-kind='radio'] .nv-choice__box { border-radius: var(--radius-circle); }
+.nv-choice__input:checked + .nv-choice__box,
+.nv-choice__input:indeterminate + .nv-choice__box { background: var(--color-fg); border-color: var(--color-fg); }
+.nv-choice[data-kind='checkbox'] .nv-choice__input:checked + .nv-choice__box::after {
+  content: '';
+  position: absolute;
+  inset-inline-start: 5.5px;
+  top: 1.5px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--color-bg);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.nv-choice[data-kind='checkbox'] .nv-choice__input:indeterminate + .nv-choice__box::after {
+  content: '';
+  position: absolute;
+  inset: 7.5px 3.5px;
+  background: var(--color-bg);
+  border-radius: 1px;
+}
+.nv-choice[data-kind='radio'] .nv-choice__input:checked + .nv-choice__box { background: var(--color-bg); }
+.nv-choice[data-kind='radio'] .nv-choice__input:checked + .nv-choice__box::after {
+  content: '';
+  position: absolute;
+  inset: 3.5px;
+  border-radius: var(--radius-circle);
+  background: var(--color-fg);
+}
+.nv-choice[data-kind='toggle'] .nv-choice__box { width: 36px; height: 22px; border: 0; border-radius: var(--radius-pill); background: var(--toggle-track-off); }
+.nv-choice[data-kind='toggle'] .nv-choice__box::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  inset-inline-start: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-circle);
+  background: var(--color-bg);
+  transition: inset-inline-start var(--duration-base) var(--ease-standard);
+}
+.nv-choice[data-kind='toggle'] .nv-choice__input:checked + .nv-choice__box { background: var(--color-fg); }
+.nv-choice[data-kind='toggle'] .nv-choice__input:checked + .nv-choice__box::after { inset-inline-start: 17px; }
+.nv-choice__input:focus-visible + .nv-choice__box { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
+.nv-choice[data-invalid] .nv-choice__box { border-color: var(--color-danger); }
+.nv-choice[data-invalid] .nv-choice__label { color: var(--color-danger); }
+.nv-choice:has(.nv-choice__input:disabled) { cursor: not-allowed; color: var(--color-fg-subtle); }
+.nv-choice__input:disabled + .nv-choice__box { background: var(--color-bg-muted); border-color: var(--color-border); }

package/templates/nova/src/components/commerce/AddToCart.css

@@ -0,0 +1,4 @@
+.nv-atc { display: grid; gap: var(--space-2); min-width: 0; }
+.nv-atc__status:empty { display: none; }
+.nv-atc__reason { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-atc__error { display: flex; align-items: center; gap: var(--space-1); font-size: var(--type-body-sm); color: var(--color-danger); }

package/templates/nova/src/components/commerce/AddToCart.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '../base/Button'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import './AddToCart.css'
+
+/**
+ * 12C · the buy button's states (buy box, featured-product, sticky bar):
+ *
+ *   default      one primary action on the page
+ *   adding       spinner, the button keeps its width, aria-busy
+ *   added        "✓ Added" — the host then opens the cart drawer or a toast
+ *                (header.cartAction); back to default after 2 s
+ *   unavailable  disabled, with the reason under it (King is not made in Oat)
+ *   sold out     disabled "Sold out" (Notify me is a DATA REQUIREMENT)
+ *   error        stays enabled; "Couldn't add. Try again." (role="alert")
+ *
+ * `onAdd` resolves when the line is in the cart. It reports a failure by
+ * resolving `false` (the platform's cart.add: the host has already said why,
+ * in a toast), and the button goes straight back to its normal state; it never
+ * says Added for a line the store refused. A rejection shows the error state.
+ * The component never talks to a cart itself.
+ */
+export interface AddToCartProps {
+  label?: string
+  /** Resolves `false` when the add failed (the reason is shown elsewhere); rejects for the error state. */
+  onAdd?: () => Promise<unknown> | void
+  soldOut?: boolean
+  /** The selection has no purchasable variant; the reason is shown. */
+  unavailableReason?: string
+  size?: 'md' | 'lg'
+  block?: boolean
+  /** Stories: start in a state. */
+  initialState?: 'idle' | 'adding' | 'added' | 'error'
+}
+
+export function AddToCart({ label, onAdd, soldOut, unavailableReason, size = 'lg', block = true, initialState = 'idle' }: AddToCartProps): JSX.Element {
+  const { strings } = useNova()
+  const [state, setState] = useState(initialState)
+  const timer = useRef<number>()
+  useEffect(() => () => window.clearTimeout(timer.current), [])
+
+  const disabled = soldOut || Boolean(unavailableReason)
+  const text = soldOut ? strings.soldOut : unavailableReason ? strings.unavailable : state === 'adding' ? strings.adding : state === 'added' ? strings.added : (label?.trim() || strings.addToCart)
+
+  const add = async () => {
+    if (disabled || state === 'adding') return
+    setState('adding')
+    try {
+      if ((await onAdd?.()) === false) {
+        setState('idle')
+        return
+      }
+      setState('added')
+      timer.current = window.setTimeout(() => setState('idle'), 2000)
+    } catch {
+      setState('error')
+    }
+  }
+
+  return (
+    <div className="nv-atc" data-state={disabled ? 'disabled' : state}>
+      <Button size={size} block={block} variant="primary" disabled={disabled} loading={state === 'adding'} onClick={add} iconStart={state === 'added' && !disabled ? <Icon name="check" size="sm" /> : undefined}>
+        <bdi>{text}</bdi>
+      </Button>
+      <div className="nv-atc__status">
+        {unavailableReason && !soldOut && <p className="nv-atc__reason">{unavailableReason}</p>}
+        {state === 'error' && !disabled && (
+          <p className="nv-atc__error" role="alert">
+            <Icon name="alert" size="sm" />
+            {strings.addFailed}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/nova/src/components/commerce/CartLine.css

@@ -0,0 +1,26 @@
+/* 12G · cart line: 92 image · info | stepper + Remove | total (end). 390: image · info, total end, stepper under. */
+.nv-cart-line { display: grid; grid-template-columns: 92px minmax(0, 1fr) 7.5rem 6rem; grid-template-areas: 'media info qty total'; gap: var(--space-4); align-items: start; padding-block: var(--space-5); border-block-end: 1px solid var(--color-border); }
+.nv-cart-line__media { grid-area: media; display: block; aspect-ratio: 1; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
+.nv-cart-line__info { grid-area: info; display: grid; gap: 2px; min-width: 0; font-size: var(--type-body-sm); }
+.nv-cart-line__vendor { color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-cart-line__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-block-end: var(--space-1); color: var(--color-fg); font-size: 0.9375rem; font-weight: var(--weight-medium); text-decoration: none; }
+.nv-cart-line__title:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-cart-line__options { color: var(--color-fg-muted); }
+.nv-cart-line__each[data-sale] .nv-cart-line__price { color: var(--color-sale); }
+.nv-cart-line__each s { color: var(--color-fg-muted); }
+.nv-cart-line__note { font-size: var(--type-caption); color: var(--color-warning-ink); }
+.nv-cart-line__note[data-kind='muted'] { color: var(--color-fg-muted); }
+.nv-cart-line__qty { grid-area: qty; display: grid; gap: var(--space-2); justify-items: center; }
+.nv-cart-line__remove { min-height: 24px; padding: 0; border: 0; background: none; color: var(--color-fg); font: inherit; font-size: var(--type-caption); text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+.nv-cart-line__remove:disabled { color: var(--color-fg-muted); cursor: default; }
+.nv-cart-line__total { grid-area: total; text-align: end; font-size: 0.9375rem; font-weight: var(--weight-medium); }
+/* Updating dims the line to 60% — except its text, which must stay ≥ 4.5:1. */
+.nv-cart-line[data-state='updating'] :is(.nv-cart-line__media, .nv-cart-line__qty, .nv-cart-line__total) { opacity: 0.6; }
+/* Muted, but readable: the image dims; text takes the muted ink (≥ 4.5:1). */
+.nv-cart-line[data-state='unavailable'] .nv-cart-line__media { opacity: 0.5; }
+.nv-cart-line[data-state='unavailable'] :is(.nv-cart-line__title, .nv-cart-line__each, .nv-cart-line__total) { color: var(--color-fg-muted); }
+@media (max-width: 639.98px) {
+  .nv-cart-line { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: 'media info total' 'media qty qty'; gap: var(--space-2) var(--space-3); }
+  .nv-cart-line__qty { display: flex; align-items: center; gap: var(--space-4); justify-items: start; margin-block-start: var(--space-2); }
+}

package/templates/nova/src/components/commerce/CartLine.tsx

@@ -0,0 +1,82 @@
+import type { CartLine as CartLineData, CartLineRefusal } from '@tanqory/theme-kit'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { QuantitySelector } from './QuantitySelector'
+import { cartLimitText } from './cart-limit'
+import { formatMoney } from './money'
+import './CartLine.css'
+
+export interface CartLineProps {
+  line: CartLineData
+  showCompareAt?: boolean
+  showVendor?: boolean
+  /** The host is updating this line: 60%, stepper disabled, totals update in place. */
+  updating?: boolean
+  /** The store refused the last quantity change for its add-to-cart limit: the reason shows as the line's note. */
+  refusal?: CartLineRefusal
+  onQuantity?: (line: CartLineData, quantity: number) => void
+  onRemove?: (line: CartLineData) => void
+}
+
+/** Low stock is only named at or below this (12C inventory threshold). */
+const LOW_STOCK = 5
+
+/**
+ * 12G · one cart line: image, title, options, each price (sale red + struck
+ * compare-at), stock note, stepper + Remove, line total. + is disabled at
+ * the stock limit; an unavailable item is muted with "No longer available"
+ * and Remove only. Long titles wrap to 2 lines; options on their own line.
+ */
+export function CartLine({ line, showCompareAt = true, showVendor, updating, refusal, onQuantity, onRemove }: CartLineProps): JSX.Element {
+  const { strings, locale } = useNova()
+  const v = line.variant
+  const unavailable = !v.available
+  const max = v.quantityAvailable ?? undefined
+  const options = v.selectedOptions.filter((o) => o.value !== 'Default Title').map((o) => o.value).join(' · ')
+  const sale = showCompareAt && v.compareAtPrice && v.compareAtPrice.amount > v.price.amount
+  const note = unavailable
+    ? strings.noLongerAvailable
+    : updating
+      ? strings.updating
+      : refusal
+        ? cartLimitText(strings, refusal)
+        : max != null && line.quantity > max
+        ? fmt(strings.onlyAvailable, { count: max })
+        : max != null && max <= LOW_STOCK
+          ? fmt(strings.onlyLeft, { count: max })
+          : ''
+  const img = v.image
+  return (
+    <div className="nv-cart-line" data-state={unavailable ? 'unavailable' : updating ? 'updating' : undefined} aria-busy={updating || undefined}>
+      <a className="nv-cart-line__media" href={line.product.url} tabIndex={-1} aria-hidden>
+        {img && <img src={img.src} alt="" width={img.width} height={img.height} loading="lazy" decoding="async" />}
+      </a>
+      <div className="nv-cart-line__info">
+        {showVendor && line.product.vendor && <p className="nv-cart-line__vendor"><bdi>{line.product.vendor}</bdi></p>}
+        <a className="nv-cart-line__title" href={line.product.url}>
+          <bdi>{line.product.title}</bdi>
+        </a>
+        {options && <p className="nv-cart-line__options">{options}</p>}
+        <p className="nv-cart-line__each nv-tabular" data-sale={sale ? '' : undefined}>
+          {sale ? (
+            <>
+              <span className="nv-visually-hidden">{strings.salePrice} </span>
+              <span className="nv-cart-line__price">{formatMoney(v.price, locale)}</span> <span className="nv-visually-hidden">{strings.regularPrice} </span>
+              <s>{formatMoney(v.compareAtPrice!, locale)}</s>
+            </>
+          ) : (
+            formatMoney(v.price, locale)
+          )}
+        </p>
+        {note && <p className="nv-cart-line__note" data-kind={unavailable || updating ? 'muted' : 'warning'}>{note}</p>}
+      </div>
+      <div className="nv-cart-line__qty">
+        {!unavailable && <QuantitySelector value={line.quantity} min={1} max={max} disabled={updating} onChange={(q) => onQuantity?.(line, q)} label={fmt(strings.quantityOf, { title: line.product.title })} />}
+        <button type="button" className="nv-cart-line__remove" disabled={updating} onClick={() => onRemove?.(line)} aria-label={fmt(strings.removeNamed, { title: line.product.title })}>
+          {strings.remove}
+        </button>
+      </div>
+      <p className="nv-cart-line__total nv-tabular">{formatMoney(line.cost.total, locale)}</p>
+    </div>
+  )
+}

package/templates/nova/src/components/commerce/CartSummary.css

@@ -0,0 +1,23 @@
+/* 12G · cart summary: muted card, radius 12; the only filled button on the page. */
+.nv-cart-summary { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-muted); }
+.nv-cart-summary__title { font-size: 1.1875rem; font-weight: var(--weight-heading); letter-spacing: 0; }
+.nv-cart-summary__rows { display: grid; gap: var(--space-3); margin: 0; font-size: 0.9375rem; }
+.nv-cart-summary__rows > div { display: flex; justify-content: space-between; gap: var(--space-3); }
+.nv-cart-summary__rows dd { margin: 0; text-align: end; }
+.nv-cart-summary__rows [data-kind='save'] { color: var(--color-success); }
+.nv-cart-summary__rows [data-kind='total'] { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); font-size: 1.125rem; font-weight: var(--weight-medium); }
+.nv-cart-summary__note { font-size: var(--type-caption); color: var(--color-fg-muted); }
+.nv-cart-summary__action { display: grid; gap: var(--space-2); }
+.nv-cart-summary__error { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-caption); color: var(--color-danger); }
+.nv-cart-summary__pay { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
+.nv-cart-summary__badges { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); font-size: var(--type-body-sm); }
+.nv-cart-summary__badges li { display: flex; align-items: center; gap: var(--space-2); }
+.nv-cart-summary__badges a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-emphasis); text-underline-offset: var(--underline-offset); }
+@media (max-width: 639.98px) {
+  .nv-cart-summary { padding: var(--space-5); }
+  /* Pinned checkout at 390 while the summary is below the fold. */
+  .nv-cart-summary__pinned { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--page-gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--color-border); background: var(--color-bg); }
+  .nv-cart-summary__pinned-total { display: grid; font-size: var(--type-caption); color: var(--color-fg-muted); }
+  .nv-cart-summary__pinned-total strong { font-size: 1rem; color: var(--color-fg); }
+  .nv-cart-summary__pinned .nv-btn { flex: 1; max-width: 14rem; }
+}