@putdotio/design 3.0.0 → 3.2.0

package/DESIGN.md

@@ -128,7 +128,7 @@ web-based TV app applies this system restrained to the product's generic
 list-first 10-foot interface, which every TV surface — including the native
 ones, within their platform conventions — treats as the shared family look.
 
-Buttons have three tiers on one axis: emphasis. **Primary** is the brand fill — `--button-primary-bg` at rest, `--button-primary-bg-hover` on hover so the CTA never feels inert, label `--button-primary-fg`. Yellow is reserved for primary commands, and an action group carries at most one. **Secondary** is a quiet fill: `--button-default-bg` (aliased as `--button-secondary-bg`) plus a border at `--border`, with hover stepping both (`--button-default-bg-hover`, `--border-hover`). Because it fills, it reads to a hard edge exactly like the primary, so the two compare safely side by side. **Ghost** is text only — no fill, no border. `--button-ghost-fg` at rest; hover paints `--button-ghost-bg-hover` behind the label and lifts it to `--button-ghost-fg-hover`. The label lift is mandatory: the faint fill is never the only hover cue. Disabled drops the colour to `--solid` at full opacity rather than fading the box. Use ghost for anything quieter than a filled secondary — a header `Log in`, toolbar text actions, `Cancel` beside a filled confirm. An icon-only ghost is the quiet icon button, on the same tokens.
+Buttons have three tiers on one axis: emphasis. **Primary** is the brand fill — `--button-primary-bg` at rest, `--button-primary-bg-hover` on hover so the CTA never feels inert, label `--button-primary-fg`. Yellow is reserved for primary commands, and an action group carries at most one. **Secondary** is a quiet fill: `--button-default-bg` (aliased as `--button-secondary-bg`) plus a border at `--border`, with hover stepping both (`--button-default-bg-hover`, `--border-hover`). Because it fills, it reads to a hard edge exactly like the primary, so the two compare safely side by side. **Ghost** is text only — no fill, no border. `--button-ghost-fg` at rest; hover paints `--button-ghost-bg-hover` behind the label and lifts it to `--button-ghost-fg-hover`. The label lift is mandatory: the faint fill is never the only hover cue. Disabled drops the colour to `--solid` at full opacity rather than fading the box. Use ghost for anything quieter than a filled secondary — a header `Sign in`, toolbar text actions, `Cancel` beside a filled confirm. An icon-only ghost is the quiet icon button, on the same tokens.
 
 Outline is not a tier. The system ships no transparent-background bordered button, and consumers must not hand-roll one. The pairing rule behind that: never place a border-only button in the same action group as a solid fill. At identical box heights the outlined shape reads smaller, because a solid resolves to a hard edge while a low-contrast hairline resolves to a soft one, and the eye compares the two extents differently. It is worst on dark surfaces, where a 15%-white hairline is barely visible at all. If a bordered treatment must sit near a fill, it must itself fill — the secondary tier — and carry its border at `--border`-step contrast, never a sub-20% hairline on transparent.
 
@@ -140,6 +140,45 @@ File rows are the core component: preserve raw names, keep metadata compact, and
 
 Form fields use the shared `--field-*` aliases: `--field-bg` for the fill, `--field-border` for the resting border, and `--field-ring` for focus. Invalid fields opt in with `aria-invalid="true"` and use red border/text only; do not add red fill. Raised panels use the shared `--panel-*` aliases instead of auth- or screen-specific panel variables.
 
+Browser Auth composition is fluid up to a `340px` column. It uses the standard
+`36px` field recipe, a `30.33px` wordmark box (the `26px` ink height multiplied
+by its `7/6` view-box ratio), and left-aligned headings at `19px` / weight
+`500`. The prompt and its action form a centered two-line footer. User-facing
+actions say “Sign in” and “Sign up”, and an invalid credential response uses
+“That username or password doesn't look right” with no terminal punctuation.
+The shipped
+`web-s06-auth` screen plus `web-p00c-auth-signin`, `web-p00d-auth-signup`, and
+`web-p00e-auth-2fa` are the Tier-1 composition references for this contract.
+
+Form feedback uses the exported `.form-callout` recipe. Its block form reads
+the `--alert-*` families and selects `info`, `success`, or `error` with
+`data-state`; `.inline` removes the surface and border while keeping the same
+semantic text colour. Callouts remain messages, not containers for unrelated
+form layout. Their parent uses `.form-group`, whose `6px` gap owns the spacing
+between a control and its inline feedback.
+
+One-time passwords use one semantic `.otp-input`, never six independent
+inputs. Place it with two three-slot `.otp-group` elements, one
+`.otp-separator`, and six visual `.otp-slot` elements. The input carries
+`inputmode="numeric"`, `autocomplete="one-time-code"`, `maxlength="6"`, and
+`aria-invalid`; script synchronizes slot text plus `filled` / `active` state.
+Pointer interaction maps the clicked visual slot to the backing input's
+selection; do not rely on the transparent input's native glyph hit testing.
+Editing an invalid code clears its stale error and disables retry until all six
+digits are present. Retrying enters the same locked verifying state as the
+default form.
+The root uses `data-state="verifying"` while submission is in flight and keeps
+the entered digits visible; the backing input is disabled for the same period,
+and the action label announces the transition through a polite live region.
+Successful verification uses `data-state="success"`, retains the six digits in
+a read-only input, announces automatic continuation with a `role="status"`
+callout, and does not leave another action on screen. The consumer owns the
+backend transition and navigation timing.
+The reference omits recovery-code entry until its consumer owns a working
+route. Do not expose a specimen-only recovery action.
+Groups, not slots, own the responsive width, so the complete control contracts
+to narrow Auth cards without horizontal scrolling.
+
 TV components are list-first and focus-first. A TV app is still a file browser, not a poster wall. Roku, native Apple, Android, and web TV repos should consume the generic tokens and generate their own platform bindings.
 
 TV surfaces are solid token colors — no translucent materials and no blur. Focus is expressed as a fill, never a lift: rows go transparent to `--component-bg-active`, and buttons step both their fill and their border. Navigation is a Home hub that pushes full screens onto a stack; there is no tab bar. Menus are centred modals, not popovers anchored to a trigger. These focus and material rules bind the web TV and Roku surfaces; a native TV binding follows its platform's own control conventions where the platform owns focus — Apple tvOS buttons use the system focus treatment (adopted 2026-08) while non-control TV surfaces stay solid everywhere.

package/README.md

@@ -33,10 +33,12 @@ npm install @putdotio/design
 
 ## Use
 
-Import the generated CSS when a web surface needs put.io custom properties:
+Import the generated tokens first. Tier-1 web surfaces also import the
+component recipes:
 
 ```css
 @import "@putdotio/design/css";
+@import "@putdotio/design/components";
 ```
 
 Component recipes should consume semantic aliases such as `--field-*`,
@@ -46,6 +48,7 @@ into palette tokens directly.
 Package entrypoints:
 
 - CSS custom properties: [`dist/css/tokens.css`](dist/css/tokens.css)
+- Tier-1 component recipes: [`system/components.css`](system/components.css)
 - DTCG token tree: [`dist/tokens.dtcg.json`](dist/tokens.dtcg.json)
 - Flat token metadata: [`dist/tokens.flat.json`](dist/tokens.flat.json)
 - Figma-safe subset: [`dist/figma/putio.tokens.json`](dist/figma/putio.tokens.json)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",
@@ -67,16 +67,16 @@
   "scripts": {
     "dev": "node scripts/serve-system.ts",
     "tokens:build": "node scripts/build-tokens.ts",
-    "tokens:check": "node scripts/check-generated-tokens.ts && node scripts/check-component-css.ts && node scripts/check-doc-tokens.ts && node scripts/verify-design-system.ts",
+    "tokens:check": "node scripts/build-tokens.ts && node scripts/check-component-css.ts && node scripts/verify-design-system.ts",
     "design:mirror": "node scripts/export-design-mirror.ts",
+    "test:config": "node --test tests/playwright-config.test.mjs",
     "test:mirror": "node --test tests/export-design-mirror.test.mjs",
     "typecheck:scripts": "tsc --noEmit --ignoreConfig --skipLibCheck --module ESNext --moduleResolution Bundler --target ES2022 --strict --types node scripts/*.ts playwright.config.ts tests/e2e/*.ts sst.config.ts infra/*.ts",
-    "smoke": "node scripts/smoke-static.ts",
     "html:check": "html-validate \"system/**/*.html\"",
     "skills:lint": "skillcheck lint",
     "e2e": "playwright test",
-    "verify": "pnpm skills:lint && pnpm typecheck:scripts && pnpm tokens:check && pnpm test:mirror && pnpm html:check && pnpm smoke && sst version",
-    "verify:full": "pnpm verify && pnpm e2e && npm pack --dry-run",
+    "verify": "pnpm skills:lint && pnpm typecheck:scripts && pnpm tokens:check && pnpm html:check",
+    "verify:full": "pnpm verify && pnpm test:mirror && pnpm test:config && pnpm e2e && npm pack --dry-run",
     "check": "pnpm verify",
     "deploy:production": "sst deploy --stage production"
   },
@@ -91,5 +91,5 @@
     "typescript": "^7.0.2",
     "yaml": "^2.9.0"
   },
-  "packageManager": "pnpm@11.2.2"
+  "packageManager": "pnpm@12.0.0"
 }

package/system/README.md

@@ -68,10 +68,12 @@ font-size is responsive; the canonical values live in
 rule: CSS media queries can't read custom properties, so write the literal px
 in `@media` and keep it in sync with the `--bp-*` token.
 
-Web package consumers import the package CSS export:
+Web package consumers import the generated tokens first. Tier-1 consumers also
+import the component recipes:
 
 ```css
 @import "@putdotio/design/css";
+@import "@putdotio/design/components";
 ```
 
 For **TV preview cards**, also load `tv.css` — it adds the `.tv`, `.scr`,
@@ -197,7 +199,7 @@ they describe the role exactly. shadcn-imported code prefers the short names.
 Base UI / headless primitives set
 `data-state="open|closed|checked|unchecked|active|completed|pending|loading"`
 on the DOM. Our components target those same attribute values in CSS — see the
-wizard step bar in `web-p00-form-layouts.html`
+wizard step bar in `web-p00b-form-flows.html`
 (`.step[data-state="completed"]`) and the menu/table cards. Prefer `data-state`
 over inventing class flags (`.is-active`, `.on`, `.current`) so the same DOM
 contract works whether the controlling code is React, Vue, vanilla JS, or
@@ -208,8 +210,8 @@ hand-written HTML, and so devtools can read the component's state at a glance.
 shadcn marks parts of compound components with `data-slot="card-header"`,
 `data-slot="card-title"`, etc. We do the same on the folder picker
 (`data-slot="modal" / "modal-header" / "modal-body" / "modal-footer"`) and the
-auth card in `web-p00-form-layouts.html` (`data-slot="auth" / "auth-header"
-/ "auth-body"`). This lets external CSS tweak one part without inventing
+auth cards in `web-p00c-auth-signin.html` and `web-p00d-auth-signup.html`
+(`data-slot="auth" / "auth-header" / "auth-body"`). This lets external CSS tweak one part without inventing
 nested class chains.
 
 ## Design variants

package/system/components.css

@@ -137,7 +137,7 @@ button i { font-size: var(--button-icon-size); line-height: 1; display: inline-f
    hover paints the shared quiet fill and lifts the label a step
    (--button-ghost-fg → --button-ghost-fg-hover — the fill is never the
    only cue). For actions quieter than a filled secondary: a header
-   "Log in", toolbar text actions, "Cancel" beside a filled confirm.
+   "Sign in", toolbar text actions, "Cancel" beside a filled confirm.
    NEVER substitute an outline: a border-only box beside a solid fill
    reads as a different size — see the pairing rule in DESIGN.md.
    Disabled matches the quiet treatment: the colour drops to --solid,
@@ -357,6 +357,161 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 }
 .form-group .label-row a:hover { color: var(--text); }
 
+/* ===========================================================
+   Form feedback — one public recipe for block and inline status.
+
+   `data-state` is the tone: info (the default), success, or error.
+   Block callouts consume the dedicated --alert-* families. `.inline`
+   removes their chrome but deliberately keeps the same semantic text
+   colour, so a field error does not invent another red.
+   =========================================================== */
+.form-callout,
+.form-callout[data-state="info"] {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--alert-info-border);
+  border-radius: var(--alert-radius);
+  background: var(--alert-info-bg);
+  color: var(--alert-info-body);
+  font-size: var(--fs-sm);
+  line-height: var(--lh-normal);
+}
+.form-callout[hidden] { display: none; }
+.form-callout > :is(i, svg) {
+  flex-shrink: 0;
+  color: var(--alert-info-icon);
+  font-size: 14px;
+  line-height: var(--lh-normal);
+}
+.form-callout[data-state="success"] {
+  border-color: var(--alert-success-border);
+  background: var(--alert-success-bg);
+  color: var(--alert-success-body);
+}
+.form-callout[data-state="success"] > :is(i, svg) { color: var(--alert-success-icon); }
+.form-callout[data-state="error"] {
+  border-color: var(--alert-danger-border);
+  background: var(--alert-danger-bg);
+  color: var(--alert-danger-body);
+}
+.form-callout[data-state="error"] > :is(i, svg) { color: var(--alert-danger-icon); }
+.form-callout.inline {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: var(--fs-sm);
+}
+
+/* ===========================================================
+   One-time password — one real input, six visual slots.
+
+   The transparent input spans the whole recipe so pointer, keyboard,
+   paste, password-manager and one-time-code interactions all reach the
+   same semantic control. Script only mirrors digits and the active slot;
+   invalid styling derives from aria-invalid on the input itself.
+
+   Each three-slot group is a fluid grid. Slots never publish a fixed
+   width, which keeps two groups plus their separator inside narrow cards.
+   =========================================================== */
+.otp {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: clamp(4px, 2vw, 8px);
+  width: 100%;
+  min-width: 0;
+}
+.otp-input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: text;
+}
+.otp-group {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: clamp(4px, 2vw, 8px);
+  flex: 1 1 0;
+  min-width: 0;
+}
+.otp-slot {
+  box-sizing: border-box;
+  min-width: 0;
+  height: 52px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--field-border);
+  border-radius: var(--field-radius);
+  background: var(--field-bg);
+  color: var(--field-text);
+  font-family: var(--font-mono);
+  font-size: 22px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  pointer-events: none;
+  transition:
+    border-color var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out),
+    background var(--dur-fast) var(--ease-out),
+    color var(--dur-fast) var(--ease-out);
+}
+.otp-slot[data-state="filled"] { border-color: var(--field-border-hover); }
+.otp:focus-within .otp-slot[data-state="active"] {
+  border-color: var(--field-border-focus);
+  box-shadow: var(--field-ring);
+}
+.otp-separator {
+  flex: 0 0 auto;
+  padding: 0;
+  color: var(--text-secondary);
+  font-size: 18px;
+  line-height: 1;
+  pointer-events: none;
+}
+.otp:has(.otp-input[aria-invalid="true"]) .otp-slot {
+  border-color: var(--red-border);
+  color: var(--red-text-secondary);
+}
+.otp:has(.otp-input[aria-invalid="true"]):focus-within .otp-slot[data-state="active"] {
+  border-color: var(--red-border-hover);
+  box-shadow: 0 0 0 1px var(--red-border-hover);
+}
+.otp[data-state="success"] .otp-slot {
+  border-color: var(--green-border);
+  color: var(--green-text-secondary);
+}
+.otp[data-state="success"]:focus-within .otp-slot[data-state="active"] {
+  border-color: var(--green-border-hover);
+  box-shadow: 0 0 0 1px var(--green-border-hover);
+}
+.otp[data-state="verifying"] .otp-input,
+.otp[aria-disabled="true"] .otp-input,
+.otp-input:disabled { pointer-events: none; }
+.otp[data-state="verifying"] .otp-slot,
+.otp[data-state="verifying"] .otp-slot[data-state="active"],
+.otp[aria-disabled="true"] .otp-slot,
+.otp[aria-disabled="true"] .otp-slot[data-state="active"],
+.otp:has(.otp-input:disabled) .otp-slot,
+.otp:has(.otp-input:disabled) .otp-slot[data-state="active"] {
+  border-color: var(--field-border);
+  background: var(--field-bg-disabled);
+  color: var(--text-secondary);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 /* Floating-menu surface — one recipe for dropdowns, context menus,
    submenus, and on-player popovers. Cards keep their item styles local.
    Consumed by web-c09-menu.html and web-p06-player.html — it looks unused