@godxjp/ui 18.5.0 → 18.7.0

package/dist/styles/navigation-layout.css

@@ -49,6 +49,45 @@
     scrollbar-width: thin;
   }
 
+  /* Tabs `line` — the ACTIVE decoration is a token-owned bar and nothing else (gh#248). It is
+   * deliberately painted here (not as an `after:*` utility) so it stays independent of the
+   * `:focus-visible` ring utilities: "selected" and "keyboard-focused" are two different states and
+   * must remain visually distinct (WCAG 2.4.7). Logical insets keep the vertical rail on the
+   * inline-END edge under dir="rtl" too. */
+  [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
+    content: "";
+    position: absolute;
+    background: var(--tabs-indicator-background, hsl(var(--primary)));
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+    pointer-events: none;
+  }
+
+  [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
+    [data-slot="tabs-trigger"]::after {
+    inset-inline: 0;
+    inset-block-end: calc(-1 * var(--tabs-indicator-offset));
+    block-size: var(--tabs-indicator-size);
+  }
+
+  [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
+    [data-slot="tabs-trigger"]::after {
+    inset-block: 0;
+    inset-inline-end: calc(-1 * var(--tabs-indicator-offset));
+    inline-size: var(--tabs-indicator-size);
+  }
+
+  [data-slot="tabs-list"][data-variant="line"]
+    [data-slot="tabs-trigger"][data-state="active"]::after {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
+      transition: none;
+    }
+  }
+
   .ui-context-menu-content {
     z-index: 50;
     min-width: 10rem;
@@ -320,3 +359,73 @@
     transform-origin: center;
   }
 }
+
+@layer components {
+  .ui-steps-inline {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--steps-inline-gap);
+    font-size: var(--steps-inline-font-size);
+    line-height: var(--line-height-tight);
+  }
+
+  .ui-steps-inline-item {
+    display: inline-flex;
+    min-width: 0;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: var(--steps-inline-gap);
+    text-align: start;
+  }
+
+  .ui-steps-inline-control {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--steps-inline-item-gap);
+    border-radius: var(--radius-sm);
+    outline: none;
+  }
+
+  button.ui-steps-inline-control:focus-visible {
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  }
+
+  .ui-steps-inline-index {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ui-steps-inline-title {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-steps-inline-item[data-status="finish"] .ui-steps-inline-control {
+    color: hsl(var(--primary));
+  }
+
+  .ui-steps-inline-item[data-status="process"] .ui-steps-inline-control {
+    color: hsl(var(--foreground));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-steps-inline-item[data-status="error"] .ui-steps-inline-control {
+    color: hsl(var(--destructive));
+  }
+
+  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control,
+  .ui-steps-inline-separator {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-steps-inline-separator {
+    width: var(--steps-inline-separator-size);
+    height: var(--steps-inline-separator-size);
+    flex: none;
+  }
+}

package/dist/styles/shell-layout.css

@@ -147,6 +147,51 @@
     gap: var(--auth-shell-card-stack-gap);
   }
 
+  /* Login is an anchored three-part composition: AuthIdentity · Card · AuthFooter. The fixed
+   * identity track absorbs absent, one-line and wrapped two-line requester states while its
+   * content remains visually adjacent to the Card. This keeps real requester data intact without
+   * allowing its line count to move the canonical SCR-001 card anchor (gh#237). */
+  .ui-auth-shell[data-preset="login"] {
+    --auth-shell-card-max-width: var(--auth-shell-login-card-max-width);
+    --auth-shell-main-align: flex-start;
+    --auth-shell-main-padding: var(--auth-shell-login-flow-offset-block)
+      var(--auth-shell-login-main-padding-inline) var(--auth-shell-login-main-padding-block-end);
+    --auth-shell-card-stack-gap: var(--auth-shell-login-card-stack-gap);
+    --auth-shell-card-padding-block-compact: var(--auth-shell-login-card-padding-block-compact);
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card {
+    display: grid;
+    grid-template-rows: var(--auth-shell-login-identity-slot-block-size) auto auto;
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > .ui-auth-identity,
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > :has(> .ui-auth-identity) {
+    min-width: 0;
+    min-height: 0;
+    block-size: var(--auth-shell-login-identity-slot-block-size);
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > .ui-auth-identity,
+  .ui-auth-shell[data-preset="login"]
+    .ui-auth-shell-card
+    > :has(> .ui-auth-identity)
+    > .ui-auth-identity {
+    height: 100%;
+    justify-content: flex-end;
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-requester {
+    max-width: 100%;
+    justify-content: center;
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-requester > :last-child {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
   .ui-auth-shell[data-preset="device-authorization"] {
     --auth-shell-card-max-width: var(--auth-shell-device-card-max-width);
     --auth-shell-main-padding: var(--auth-shell-device-main-padding);
@@ -167,6 +212,30 @@
     --auth-shell-main-padding: var(--auth-shell-recovery-main-padding);
   }
 
+  /* Registration preset (gh#256) — the sign-up measure. `flex-start` is the load-bearing line: a
+   * registration card is the tallest surface in the hosted-identity set, and a vertically CENTRED
+   * tall card overflows ABOVE the scroll origin on a short viewport, putting its first field out of
+   * reach. Start-aligned, the block-start inset is ordinary page padding the user scrolls past, and
+   * the block-end inset is the footer clearance the form keeps at the end of a long scroll. */
+  .ui-auth-shell[data-preset="registration"] {
+    --auth-shell-card-max-width: var(--auth-shell-registration-card-max-width);
+    --auth-shell-main-align: flex-start;
+    --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start)
+      var(--auth-shell-registration-main-padding-inline)
+      var(--auth-shell-registration-main-padding-block-end);
+    --auth-shell-card-stack-gap: var(--auth-shell-registration-card-stack-gap);
+  }
+
+  /* Fixed identity track — the mechanism `login` proved (gh#237), applied to the identity block
+   * wherever it sits in the column rather than through a grid row, so the preset does not constrain
+   * how many sections the page stacks. Content aligns to the slot END, so absent / one-line /
+   * wrapped two-line identity copy changes only the empty space ABOVE it and never moves the card
+   * off its canonical anchor. */
+  .ui-auth-shell[data-preset="registration"] .ui-auth-shell-card > .ui-auth-identity {
+    block-size: var(--auth-shell-registration-identity-slot-block-size);
+    justify-content: flex-end;
+  }
+
   .ui-auth-identity {
     display: flex;
     flex-direction: column;
@@ -197,6 +266,52 @@
     height: var(--auth-requester-glyph-size);
   }
 
+  .ui-auth-account-summary {
+    display: flex;
+    min-height: var(--auth-account-summary-min-height);
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--auth-account-summary-gap);
+    padding: var(--auth-account-summary-padding);
+    border-radius: var(--radius-md);
+    background: hsl(var(--muted));
+  }
+
+  .ui-auth-account-identity {
+    display: flex;
+    min-width: min(100%, var(--auth-account-summary-identity-min-width));
+    flex: 1 1 var(--auth-account-summary-identity-min-width);
+    align-items: center;
+    gap: var(--auth-account-summary-gap);
+  }
+
+  .ui-auth-account-avatar {
+    width: var(--auth-account-summary-avatar-size);
+    height: var(--auth-account-summary-avatar-size);
+    flex: none;
+  }
+
+  .ui-auth-account-fallback-icon {
+    width: var(--auth-account-summary-avatar-glyph-size);
+    height: var(--auth-account-summary-avatar-glyph-size);
+  }
+
+  .ui-auth-account-email {
+    min-width: 0;
+    overflow: hidden;
+    color: hsl(var(--foreground));
+    font-size: var(--auth-account-summary-email-font-size);
+    /* Declares its own line box because it CLIPS — see gh#254. */
+    line-height: var(--auth-account-summary-email-line-height);
+    font-weight: var(--font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-auth-account-summary > [data-slot="button"] {
+    margin-inline-start: auto;
+  }
+
   .ui-auth-legal-footer {
     display: flex;
     flex-wrap: wrap;
@@ -277,6 +392,12 @@
       --auth-shell-main-padding: var(--auth-shell-canonical-main-padding-mobile);
     }
 
+    .ui-auth-shell[data-preset="login"] {
+      --auth-shell-main-padding: var(--auth-shell-login-flow-offset-block-mobile)
+        var(--auth-shell-login-main-padding-inline-mobile)
+        var(--auth-shell-login-main-padding-block-end);
+    }
+
     /* Declared after the canonical mobile inset so a preset's mobile gutter wins at equal
      * specificity: device-authorization = 5px inline (card x=5, width=380 at 390px);
      * context-selection = edge-to-edge (0 inline). */
@@ -294,6 +415,16 @@
     .ui-auth-shell[data-preset="account-recovery"] {
       --auth-shell-main-padding: var(--auth-shell-recovery-main-padding-mobile);
     }
+
+    /* registration = 15px inline at 390 (card x=15, width=360 — the same page rhythm as Login, so
+     * sign-in → sign-up never jumps on a phone). The block insets tighten but the footer clearance
+     * stays deliberately larger than the block-start inset: at 390 the form is at its tallest and
+     * the consent/legal footer must not sit flush against the submit button. */
+    .ui-auth-shell[data-preset="registration"] {
+      --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start-mobile)
+        var(--auth-shell-registration-main-padding-inline-mobile)
+        var(--auth-shell-registration-main-padding-block-end-mobile);
+    }
   }
 
   /*
@@ -479,6 +610,33 @@
     .app-mobile-nav-trigger {
       display: inline-flex;
     }
+
+    /* Some approved application contracts retain their navigation rail at narrow widths. This is
+     * an explicit AppShell mode, never a consumer media-query fork: the same sidebar node, footer,
+     * active items and token-owned rail width remain in the canonical two-track grid. */
+    .app-root[data-responsive-navigation="docked"] {
+      grid-template-areas:
+        "sidebar topbar"
+        "sidebar main"
+        "sidebar footer";
+      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-collapsed="true"] {
+      grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"] > .app-sidebar {
+      display: flex;
+    }
+
+    .app-root[data-responsive-navigation="docked"] > .app-topbar {
+      padding-inline: var(--app-shell-bar-inset);
+    }
+
+    .app-root[data-responsive-navigation="docked"] .app-mobile-nav-trigger {
+      display: none;
+    }
   }
 
   .sb-root {
@@ -781,6 +939,10 @@
     min-width: 0;
     flex: 1;
     overflow: hidden;
+    /* gh#254 — MUST NOT inherit the row's `line-height: 1`. This element clips, so its line box is
+     * its clip box, and a 1em box is shorter than the font's ascent+descent: every descender and
+     * Vietnamese tone mark below the baseline gets sheared off. Knob, not constant (rule #45). */
+    line-height: var(--sidebar-nav-item-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1093,6 +1255,16 @@
   .ui-topbar-start {
     flex: 0 1 auto;
   }
+  .ui-topbar-start > :last-child {
+    max-width: 100%;
+    min-width: 0;
+    flex: 0 1 auto;
+    overflow: hidden;
+    /* Declares its own line box because it CLIPS — see gh#254. */
+    line-height: var(--topbar-start-truncate-line-height);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .ui-topbar-center {
     flex: 1 1 0%;
     justify-content: center;
@@ -1103,6 +1275,17 @@
     margin-inline-start: auto;
   }
 
+  /* COLLISION CONTRACT (gh#244) — with a docked 16rem sidebar, 901–1100px viewports do not have
+   * enough room for a breadcrumb/title, full search trigger and end utilities. The center slot is
+   * optional by definition, so remove it before it can cover either owned edge. This also gives
+   * phones the same deterministic allocation. A consumer with a real compact center presentation
+   * can opt it back in through the public token instead of a page-local media query. */
+  @media (width <= 68.75rem) {
+    .ui-topbar-center {
+      display: var(--topbar-center-compact-display);
+    }
+  }
+
   .tb-chip {
     display: inline-flex;
     max-width: 15rem;
@@ -1156,6 +1339,10 @@
     min-width: 0;
     overflow: hidden;
     font-weight: 500;
+    /* gh#254 — same trap as `.sb-label`: this clips, so it must own a line box tall enough for the
+     * font's descenders. `.tb-chip` uses `font: inherit`, so without this the chip would shear its
+     * glyphs the moment a service set a tight line-height on the bar. */
+    line-height: 1.5;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1286,3 +1473,152 @@
     transition: none;
   }
 }
+
+/*
+ * ERROR SURFACE — the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251).
+ *
+ * Geometry is PACKAGE-OWNED at 1440 / 1024 / 390: a consumer never writes `min-h-dvh`, a
+ * flex-centring class or a media query for an error page. In `system` mode the viewport centring
+ * comes from `CenteredShell align="center"` (which the component renders itself); this block owns
+ * the surface block that is identical in BOTH modes — measure, rhythm, metadata list.
+ *
+ * The narrow step is a CONTAINER query, not a viewport one (the SplitPane precedent, gh#165): the
+ * surface reads its OWN width, so it compacts correctly whether the shrinking came from a 390px
+ * phone or from an application shell whose sidebar is expanded on a laptop.
+ */
+@layer components {
+  .ui-error-surface {
+    container: error-surface / inline-size;
+    display: flex;
+    width: 100%;
+    max-width: var(--error-surface-max-width);
+    flex-direction: column;
+    align-items: center;
+    /* Logical, so the surface stays centred and its text start-aligns correctly under `dir="rtl"`. */
+    margin-inline: auto;
+    gap: var(--error-surface-gap);
+    padding-block: var(--error-surface-padding-block);
+    text-align: center;
+  }
+
+  .ui-error-surface-brand {
+    display: flex;
+    justify-content: center;
+    padding-block-end: var(--error-surface-brand-gap);
+  }
+
+  /* The EmptyState body already owns its own vertical rhythm and description measure
+   * (--empty-state-*); the surface only removes the duplicated block padding so the two spacing
+   * systems do not stack into a hole between the status code and the icon. */
+  .ui-error-surface .ui-error-surface-body {
+    width: 100%;
+    padding-block: 0;
+  }
+
+  .ui-error-surface-status {
+    margin: 0;
+  }
+
+  .ui-error-surface-meta {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--error-surface-meta-gap);
+    /* Chrome is a token, default quiet (rule #44) — `none` unless a service opts in. */
+    border-block-start: var(--error-surface-meta-border);
+    padding-block-start: var(--error-surface-meta-padding-block);
+    margin: 0;
+  }
+
+  .ui-error-surface-meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--error-surface-meta-row-gap);
+  }
+
+  .ui-error-surface-meta-row > dd {
+    margin-inline-start: 0;
+  }
+
+  .ui-error-surface-progress {
+    width: 100%;
+    max-width: var(--error-surface-progress-max-width);
+  }
+
+  /*
+   * NARROW STEP (the 390 case). Reclaim vertical space and stop a long ja / vi metadata row from
+   * wrapping into a ragged two-column shape: each label stacks over its value, centred.
+   */
+  @container error-surface (width < 30rem) {
+    .ui-error-surface {
+      padding-block: var(--error-surface-padding-block-compact);
+    }
+
+    .ui-error-surface-meta-row {
+      flex-direction: column;
+      gap: 0;
+    }
+  }
+}
+
+@layer components {
+  /* ── CenteredShell · `preset="public-landing"` (gh#252) ──────────────────────────────────────
+   * A PUBLIC landing page (marketing header · hero · sections · legal footer) is a COMPOSITION,
+   * not a framework component (docs/COMPOSITION-VS-COMPONENT.md: Hero / Navbar / Footer / Pricing
+   * all FAIL the Framework-Component Test). What the consumer must NOT own is the SHELL geometry —
+   * the content measure, the header/footer measure alignment, the section rhythm and the flat
+   * public-surface chrome. This preset owns all of it through `--centered-shell-landing-*` knobs,
+   * so a landing composes real primitives with ZERO page-local CSS and zero descendant selectors.
+   *
+   * `preset="default"` emits NO `data-preset` attribute at all, so none of this can match and every
+   * existing CenteredShell keeps its exact box (the gh#231 inert-default contract). */
+  .ui-centered-shell[data-preset="public-landing"] {
+    --centered-shell-main-padding: var(--centered-shell-landing-main-padding-block)
+      var(--centered-shell-landing-inset-inline);
+    /* The hero title is a real `Heading level={1}`; the preset re-points the h1 tier the same way
+     * `.ui-auth-shell` re-points it — never a consumer font-size. */
+    --heading-h1: var(--centered-shell-landing-heading-size);
+    /* Flat public surface: every Card in the subtree loses its elevation from ONE knob instead of
+     * a consumer `.landing .card { box-shadow: none }` descendant selector. */
+    --card-shadow: var(--centered-shell-landing-card-shadow);
+    background: hsl(var(--centered-shell-landing-background, var(--background)));
+  }
+
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-column {
+    display: flex;
+    max-width: var(--centered-shell-landing-max-width);
+    flex-direction: column;
+    /* Section rhythm — the consumer stacks plain `<section>` layout elements and never sets a gap. */
+    gap: var(--centered-shell-landing-section-gap);
+  }
+
+  /* Header and footer share the column's measure WITHOUT a consumer max-width wrapper: the inline
+   * padding is the page gutter until the viewport is wider than the measure, then it grows so the
+   * bar content starts on exactly the same inline edge as the centred column. */
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-bar,
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-footer {
+    padding-inline: max(
+      var(--centered-shell-landing-inset-inline),
+      calc((100% - var(--centered-shell-landing-max-width)) / 2)
+    );
+  }
+
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-footer {
+    padding-block: var(--centered-shell-landing-footer-padding-block);
+    text-align: start;
+  }
+
+  /* Compact step (the 390px acceptance width sits here): the gutter, the section rhythm and the
+   * hero tier switch to their compact knobs. One media query, owned by the package. */
+  @media (width < 40rem) {
+    .ui-centered-shell[data-preset="public-landing"] {
+      --centered-shell-landing-inset-inline: var(--centered-shell-landing-inset-inline-compact);
+      --centered-shell-landing-main-padding-block: var(
+        --centered-shell-landing-main-padding-block-compact
+      );
+      --centered-shell-landing-section-gap: var(--centered-shell-landing-section-gap-compact);
+      --centered-shell-landing-heading-size: var(--centered-shell-landing-heading-size-compact);
+    }
+  }
+}