@putdotio/design 3.11.0 → 3.11.1

package/DESIGN.md

@@ -70,7 +70,7 @@ A web mock is never a native spec. Every surface binds at one tier, and every ca
 
 - **Tier 0: Foundations.** The token graph. Values only; binds every tier.
 - **Tier 1: www · app · auth.** The full system: tokens plus the `system/components.css` recipes, which are the contract here only.
-- **Tier 2: iOS · iPadOS · tvOS · watchOS · Android · Android TV.** Tokens only. Components and pages come from the platform's guidelines; cards show how a stock control takes put.io tokens. The shipped tvOS and Android TV app draws its own components with Lucide icons: documented drift.
+- **Tier 2: iOS · iPadOS · tvOS · watchOS · Android · Android TV.** Tokens only. Components and pages come from the platform's guidelines; cards show how a stock control takes put.io tokens. The shipped tvOS and Android TV app draws its own components with Phosphor icons; the components are documented drift.
 - **Tier 3: Roku.** Tier 2, plus put.io conventions in custom SceneGraph components.
 - **Tier 4: tv.put.io · Tizen · webOS.** The web system, restrained to a calm, list-first 10-foot interface.
 
@@ -135,10 +135,10 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 
 - Sign in, sign up, password reset, and two-factor pages have no card or panel: the form sits on `--bg`. Recipe: `.auth-page`, `.auth-header`, `.auth-main`, `.auth-column`, `.auth-title`, `.auth-links`, `.auth-footer`.
 - The logo sits top-left in the header, in a `30.33px` box (26px ink × 7/6). The top right stays empty by default.
-- One left-aligned column, up to `340px`, is centred horizontally and vertically.
+- One left-aligned column, up to `340px`, is centred horizontally and optically centred vertically: the form's middle sits near 45% of the viewport height, never below the true middle.
 - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-sm`.
 - One title per screen: `--fs-title` (`22px`), medium, `--tracking-snug` (`-0.01em`). No subtitles, taglines, or marketing lines; copy stays short.
-- Fields are the standard filled field. Fields and buttons in the column are `44px`.
+- Fields and buttons keep the standard 36px box: the filled field and a full-width default-size primary.
 - Labels are small, muted, and above the field.
 - The primary button is full-width yellow. Secondary actions sit under the form as muted text links: “Forgot password?”, “New to put.io? Sign up”, “Wrong account? Sign out”.
 - Tab order runs fields, submit, then secondary links; DOM order follows visual order, with no positive `tabindex`. Two-factor runs the code, Verify, then its links. The reveal-password toggle takes `tabindex="-1"` and keeps its accessible name: keyboard-only users can't toggle visibility, screen-reader users still can in browse mode. No link leaves the tab order.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "3.11.0",
+  "version": "3.11.1",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",

package/system/components.css

@@ -568,7 +568,8 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 
    Card-less: the form sits on the page background. Logo top-left
    in .auth-header, one left-aligned 340px column centred in
-   .auth-main, a quiet link row in .auth-footer. Controls are 44px;
+   .auth-main, a quiet link row in .auth-footer. Controls keep the
+   standard 36px box;
    the title is the only heading. Under 640px the gutters drop to 24px so the logo lines
    up with the column.
    =========================================================== */
@@ -593,7 +594,9 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px 24px 48px;
+  /* Optical centre: the extra bottom padding lifts the form so its middle
+     sits near 45% of the viewport height, never below the true middle. */
+  padding: 24px 24px max(48px, 10vh);
 }
 .auth-column {
   width: 100%;
@@ -615,9 +618,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   font-weight: var(--fw-regular);
   color: var(--text-secondary);
 }
-.auth-column .field { height: 44px; }
 .auth-column form > .form-reveal .form-callout { padding-top: 12px; font-size: var(--fs-base); }
-.auth-column .btn-block { height: 44px; }
 .auth-column form > .form-reveal + .btn-block { margin-top: 16px; }
 .auth-links {
   margin: 24px 0 0;