altitude-design 0.2.0 → 0.2.1

package/README.md

@@ -2,7 +2,8 @@
 
 A React component library where **height is the interface**. Its one idea: the ground is the record. Settled content sits on the ground; anything live rises above it; anything waiting to receive sinks below it.
 
-- **Storybook:** every component, with its guidelines and a live preview in all four schemes: https://richlaconte.github.io/altitude/
+- **Site:** https://richlaconte.github.io/altitude/
+- **Storybook:** every component, with its guidelines and a live preview in all four schemes: https://richlaconte.github.io/altitude/storybook/
 - **The design guide:** [`project/README.md`](https://github.com/richlaconte/altitude/blob/main/project/README.md), then [Elevation](https://github.com/richlaconte/altitude/blob/main/project/Elevation.md), [Motion](https://github.com/richlaconte/altitude/blob/main/project/Motion.md), [Theming](https://github.com/richlaconte/altitude/blob/main/project/Theming.md) and [Research](https://github.com/richlaconte/altitude/blob/main/project/Research.md)
 
 ## Install
@@ -44,7 +45,8 @@ Render `AltitudeProvider` once around your app. Schemes are `daylight`, `nightfa
 project/   the design system itself: guides, tokens.json, components/src/*.tsx, bundle.css,
            and the built bundle.js and previews (the same files as the design system on claude.ai)
 build/     the kit that builds and checks project/ (see build/SETUP.md)
-scripts/   the npm package build and the Storybook story generator
+scripts/   the npm package build, the Storybook story generator and the landing page build
+site/      the landing page (React, built from the components' own sources into site-dist/)
 .storybook/
 ```
 
@@ -55,6 +57,7 @@ There is one source for each thing. Components live in `project/components/src`,
 ```sh
 npm install && npm install --prefix build
 npm run storybook          # http://localhost:6006
+npm run build-site         # the landing page, into site-dist/index.html
 ```
 
 After changing a component, rebuild the design system's bundle and previews, and commit what they produce:
@@ -71,7 +74,7 @@ Every push and pull request runs the checks: the bundle and previews are rebuilt
 
 A push to `main` then also:
 
-- deploys Storybook to GitHub Pages;
+- deploys the landing page to GitHub Pages, with Storybook under `/storybook/`;
 - publishes to npm **if the version in `package.json` isn't published yet**, and tags the commit `v<version>`. To release, bump the version (`npm version patch`, `minor` or `major`) and push.
 
 ## Found a bug, or need something it doesn't do?

package/dist/altitude.css

@@ -300,16 +300,19 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   transition: box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise),
     color var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
 }
-/* Focus ring: wraps the whole slab, face and wall, so it follows the button's real shape at every height. */
+/* Focus ring: wraps the whole slab, face and wall, so it follows the button's real shape at every height. It's an
+   outline 2px off a box that covers the face and the wall, because an outline never adds to the page's scrollable
+   area: a button at the edge of a narrow screen must not give the page a sideways scroll. At rest the box is the face
+   alone, so only a keyboard-focused button's wall (the box's bottom edge, at most 5px) reaches past its own box. */
 .alt-btn:focus-visible, .alt-crumbs button:focus-visible { outline: none; }
 .alt-btn::after, .alt-crumbs button::after {
   content: ""; position: absolute; pointer-events: none; opacity: 0;
-  inset: -4px -4px calc(-4px - var(--wall, 0px) - 1px) -4px; border: 2px solid var(--accent-ink); border-radius: calc(var(--radius-md) + 4px);
-  transition: opacity var(--dur-travel-1) var(--ease-rise), inset var(--dur-press) ease-out;
+  inset: 0; outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-md);
+  transition: opacity var(--dur-travel-1) var(--ease-rise), bottom var(--dur-press) ease-out;
 }
-.alt-btn[data-size="sm"]::after, .alt-crumbs button::after { border-radius: calc(var(--radius-sm) + 4px); }
-.alt-btn:focus-visible::after, .alt-crumbs button:focus-visible::after { opacity: 1; }
-.alt-btn:active::after, .alt-btn[data-loading]::after { inset: -4px; }
+.alt-btn[data-size="sm"]::after, .alt-crumbs button::after { border-radius: var(--radius-sm); }
+.alt-btn:focus-visible::after, .alt-crumbs button:focus-visible::after { opacity: 1; bottom: calc(-1 * var(--wall, 0px) - 1px); }
+.alt-btn:active::after, .alt-btn[data-loading]::after { bottom: 0; }
 .alt-btn-label { display: inline-flex; align-items: center; gap: var(--space-2); transition: opacity var(--dur-travel-1) var(--ease-rise); }
 .alt-btn-label > svg { flex: none; margin-inline: -2px; }
 .alt-btn[data-variant="primary"] {
@@ -705,7 +708,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-avatar[data-presence] .alt-avatar-face { outline: 2px solid var(--alt-presence); outline-offset: 1px; }
 .alt-avatar-lamp {
   --b-lamp: var(--positive);
-  position: absolute; z-index: 2; right: -1px; bottom: -1px; width: max(8px, calc(var(--size) * 0.24)); height: max(8px, calc(var(--size) * 0.24)); border-radius: var(--radius-full);
+  position: absolute; z-index: 2; right: 0; bottom: 0; width: max(8px, calc(var(--size) * 0.24)); height: max(8px, calc(var(--size) * 0.24)); border-radius: var(--radius-full);
   background: var(--b-lamp); box-shadow: 0 0 0 2px var(--surface-ground); transform: translateY(calc(-1 * var(--lift)));
 }
 .alt-avatar[data-status="idle"] .alt-avatar-lamp { --b-lamp: var(--caution); }
@@ -713,15 +716,18 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-avatar[data-interactive] { cursor: pointer; outline: none; }
 .alt-avatar[data-interactive]:focus-visible .alt-avatar-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-avatar-group { isolation: isolate; display: inline-flex; align-items: flex-end; padding: calc(var(--size, 36px) * 0.32) 0 calc(var(--size, 36px) * 0.1); }
-.alt-avatar-group > .alt-avatar { isolation: auto; margin-left: calc(var(--size) * -0.22); }
-.alt-avatar-group > .alt-avatar:first-child { margin-left: 0; }
+.alt-avatar-group .alt-avatar { isolation: auto; }
+/* Faces overlap by a fifth. An avatar that waited for its data sits inside its loading wrapper (display: contents at
+   rest), so the overlap is counted from the group's own children either way, imprints included. */
+.alt-avatar-group > .alt-avatar:not(:first-child),
+.alt-avatar-group > :is(.alt-await, .alt-await-wait):not(:first-child) :is(.alt-avatar, .alt-avatar-imprint) { margin-left: calc(var(--size, 36px) * -0.22); }
 /* Overlapping faces are cut out of each other with a ring of ground; higher faces sit in front. */
-.alt-avatar-group > .alt-avatar .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), inset 0 0 0 1px var(--alt-ring); }
-.alt-avatar-group > .alt-avatar[data-status="offline"] .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), inset 0 0 0 1px var(--alt-ring), inset 0 1px 2px var(--alt-cast); }
-.alt-avatar-group > .alt-avatar[data-status="active"] .alt-avatar-face { z-index: 3; }
-.alt-avatar-group > .alt-avatar[data-status="idle"] .alt-avatar-face { z-index: 2; }
-.alt-avatar-group > .alt-avatar:not([data-tint="more"]):hover { --hr: 0.32; }
-.alt-avatar-group > .alt-avatar:not([data-tint="more"]):hover .alt-avatar-face { z-index: 5; }
+.alt-avatar-group .alt-avatar .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), inset 0 0 0 1px var(--alt-ring); }
+.alt-avatar-group .alt-avatar[data-status="offline"] .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), inset 0 0 0 1px var(--alt-ring), inset 0 1px 2px var(--alt-cast); }
+.alt-avatar-group .alt-avatar[data-status="active"] .alt-avatar-face { z-index: 3; }
+.alt-avatar-group .alt-avatar[data-status="idle"] .alt-avatar-face { z-index: 2; }
+.alt-avatar-group .alt-avatar:not([data-tint="more"]):hover { --hr: 0.32; }
+.alt-avatar-group .alt-avatar:not([data-tint="more"]):hover .alt-avatar-face { z-index: 5; }
 .alt-avatar-group .alt-avatar-lamp { display: none; }
 
 /* ── Skeleton: an imprint of the content to come, pressed into the page. Light passes over it while it waits; when the
@@ -745,6 +751,38 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 }
 @keyframes alt-rise-out { from { transform: translateY(calc(100% * var(--alt-travel))); opacity: 0.25; } }
 
+/* ── Suspense: imprints that come with the component. A component given a promise (Avatar's name or src, a Badge's or
+   a card title's text, a DataTable's rows) holds its own Suspense boundary, and its fallback is its own imprint, drawn
+   from the same props and tokens, so it's the size and shape of what's coming. Card and CardContent hold one for
+   anything of yours that suspends inside them. An imprint waits dur-grace before it shows, so quick loads show nothing;
+   when content lands it rises 8px out of its imprint as the imprint fills in behind it, within the attention budget.
+   Containers just let their content rise. In a RevealGroup, content that lands early stays an imprint until the rest
+   arrive. At rest the wrapper is display: contents: it adds nothing to layout or to your selectors' parent chain. ── */
+.alt-await-wait { display: block; animation: alt-onset var(--dur-travel-1) ease-out var(--dur-grace) backwards; }
+.alt-await-wait[data-inline] { display: inline-block; vertical-align: middle; line-height: 0; }
+.alt-await, .alt-await > .alt-await-face { display: contents; }
+.alt-await[data-phase] { display: block; position: relative; isolation: isolate; }
+.alt-await[data-phase] > .alt-await-face { display: block; }
+.alt-await[data-phase][data-inline], .alt-await[data-phase][data-inline] > .alt-await-face { display: inline-block; vertical-align: middle; line-height: 0; }
+.alt-await-imprint { position: absolute; inset: 0; z-index: -1; }
+.alt-await[data-phase="held"] > .alt-await-face { position: absolute; inset: 0 0 auto; visibility: hidden; }
+.alt-await-held { display: block; }
+.alt-await-held[data-early] { animation: alt-onset var(--dur-travel-1) ease-out var(--alt-grace-left, 0ms) backwards; }
+.alt-await[data-inline] > .alt-await-held { display: inline-block; vertical-align: middle; line-height: 0; }
+.alt-await[data-phase="reveal"] > .alt-await-face { --alt-from-y: 8px; animation: alt-emerge var(--dur-travel-3) var(--ease-rise) var(--alt-rise-delay, 0ms) backwards; }
+.alt-await[data-phase="reveal"] > .alt-await-imprint { animation: alt-await-fill var(--dur-travel-3) linear var(--alt-rise-delay, 0ms) forwards; }
+@keyframes alt-await-fill { to { opacity: 0; } }
+/* Text imprints are as tall as the text they stand for: one line-height of the surrounding type per line. */
+.alt-await-lines { display: flex; flex-direction: column; justify-content: space-around; height: calc(var(--lines, 1) * 1lh); max-width: 100%; }
+.alt-await-lines > .alt-skeleton { flex: none; height: 0.6em; }
+.alt-await-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
+.alt-await-card-body { font: 400 15px/23px var(--font-sans); }
+.alt-avatar-imprint { display: inline-block; vertical-align: middle; }
+.alt-badge-imprint { display: inline-block; vertical-align: middle; width: 64px; height: 22px; }
+.alt-badge-imprint[data-variant="count"] { width: 22px; border-radius: var(--radius-full); }
+.alt-check-imprint { display: block; width: 22px; height: 22px; border-radius: var(--radius-xs); }
+.alt-cell-imprint { display: block; height: 0.6em; margin: calc((1lh - 0.6em) / 2) 0; }
+
 /* ── Alert: a sheet laid on the page. Status that informs is a thin tinted sheet resting on the ground — you can see
    its paper edge and the contact shadow under it — and it never floats. Status that asks you to act is a raised
    card. Dismissing lifts the sheet off the page and the gap closes behind it. Several alerts make an AlertStack:
@@ -942,6 +980,9 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 }
 .alt-dialog-head { display: flex; flex-direction: column; gap: 6px; padding-right: var(--space-8); }
 .alt-dialog-title { margin: 0; font: 600 19px/26px var(--font-sans); letter-spacing: -0.01em; }
+/* A title that takes focus (initialFocus="title") isn't a control: no ring after a click, the usual ring from the keyboard. */
+.alt-dialog-title:focus { outline: none; }
+.alt-dialog-title:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-xs); }
 .alt-dialog-desc { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }
 .alt-dialog-body { margin-top: var(--space-5); font: 400 15px/23px var(--font-sans); }
 .alt-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
@@ -1631,6 +1672,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 /* Forced colours (Windows High Contrast) drop every box-shadow, which erases elevation entirely
    (measured: the ladder renders as blank). Height falls back to border weight and style. */
 @media (forced-colors: active) {
+  .alt-skeleton { outline: 1px dashed CanvasText; outline-offset: -1px; }
   .alt-surface[data-level="1"], .alt-surface[data-level="2"], .alt-card, .alt-btn:not([data-variant="ghost"]), .alt-tabs-indicator,
   .alt-switch-thumb, .alt-slider-thumb, .alt-kbd, .alt-avatar-face, .alt-sort-item, .alt-pile-top, .alt-pile-sheet, .alt-scroll { border: 1px solid CanvasText; }
   .alt-surface[data-level="3"], .alt-surface[data-level="4"], .alt-pop, .alt-tip, .alt-toast, .alt-sort-item[data-held], [data-held] { border: 2px solid CanvasText; }