altitude-design 0.1.2 → 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
@@ -33,6 +34,8 @@ Render `AltitudeProvider` once around your app. Schemes are `daylight`, `nightfa
 |---|---|
 | `altitude-design` | the components (ESM and CommonJS, with types) |
 | `altitude-design/altitude.css` | tokens and component styles in one file (it also loads Instrument Sans and JetBrains Mono from Google Fonts) |
+| `altitude-design/altitude.no-fonts.css` | the same styles without the Google Fonts import, so the page makes no third-party request; self-host the fonts or set `--font-sans` and `--font-mono` to your own (both fall back to system fonts) |
+| `altitude-design/fonts.css` | just the Google Fonts import, to pair with `tokens.css` or `altitude.no-fonts.css` |
 | `altitude-design/tokens.css`, `altitude-design/tokens.json` | the tokens on their own |
 | `altitude-design/altitude.iife.js` | a `<script>` build that sets `window.Altitude`, for pages without a bundler; it expects React 18's UMD builds as `window.React` and `window.ReactDOM` |
 
@@ -42,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/
 ```
 
@@ -53,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:
@@ -69,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); }
@@ -1134,6 +1175,31 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-drop[data-drop="armed"] { background: var(--surface-well); box-shadow: var(--well); border-color: var(--ink-muted); }
 .alt-drop[data-drop="over"] { background: var(--accent-soft); box-shadow: var(--trench); border-style: solid; border-color: var(--accent-ink); color: var(--ink); transform: scale(calc(1 - 0.01 * var(--alt-travel))); }
 
+/* ── EmptyState: an opening the first record will fill. Nothing here yet isn't a problem (Alert) or a settled
+   container (Card): it's a space waiting to receive, so it's sunk, a well cut into the page with a dashed rim, the
+   same below-ground signal as an empty field. Its actions are ordinary raised buttons standing in it. Pointing at
+   the primary action deepens the well to a trench and darkens the rim: feedforward for where the record will land.
+   It sinks in when it appears (flush to well, dur-travel-1, ease-sink), the inverse of content arriving lifted,
+   and it never pulses. ── */
+.alt-empty {
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center;
+  border: 1.5px dashed var(--line-control); border-radius: var(--radius-lg); background: var(--surface-well); box-shadow: var(--well);
+  color: var(--ink-muted); font: 400 15px/23px var(--font-sans);
+  animation: alt-empty-sink var(--dur-travel-1) var(--ease-sink);
+  transition: box-shadow var(--dur-travel-1) var(--ease-sink), border-color var(--dur-travel-1);
+}
+@keyframes alt-empty-sink { from { background-color: var(--surface-ground); box-shadow: var(--elev-0); } }
+.alt-empty-icon { display: inline-flex; margin-bottom: var(--space-1); color: var(--ink-muted); }
+.alt-empty-icon > svg { width: 24px; height: 24px; }
+.alt-empty-title { margin: 0; font: 600 19px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
+.alt-empty-desc { margin: 0; max-width: 46ch; color: var(--ink-muted); text-wrap: pretty; }
+.alt-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
+.alt-empty:has(.alt-empty-actions > :first-child:is(:hover, :focus-visible):not(:disabled)) { box-shadow: var(--trench); border-color: var(--ink-muted); }
+.alt-empty[data-size="sm"] { gap: var(--space-1); padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); font: 400 14px/20px var(--font-sans); }
+.alt-empty[data-size="sm"] .alt-empty-icon > svg { width: 18px; height: 18px; }
+.alt-empty[data-size="sm"] .alt-empty-title { font: 500 14px/20px var(--font-sans); letter-spacing: 0; }
+.alt-empty[data-size="sm"] .alt-empty-actions { margin-top: var(--space-2); }
+
 /* ── SortableList: pick up → level 3 in your hand; the landing slot opens as a well; release → it lands. ── */
 .alt-sort { position: relative; display: flex; flex-direction: column; }
 .alt-sort-item {
@@ -1586,6 +1652,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
     --alt-ring: var(--ink); --alt-cast: transparent; --alt-cast-deep: transparent; --alt-wall-in: var(--ink-muted); --alt-lip: transparent; --alt-rim-held: var(--ink);
   }
   .alt-btn, .alt-kbd, .alt-crumbs button { --wall-c: var(--ink); }
+  .alt-empty { border-style: solid; }
 }
 [data-contrast="more"], [data-contrast="more"] [data-theme] {
   --elev-0: inset 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
@@ -1600,17 +1667,19 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   --alt-ring: var(--ink); --alt-cast: transparent; --alt-cast-deep: transparent; --alt-wall-in: var(--ink-muted); --alt-lip: transparent; --alt-rim-held: var(--ink);
 }
 [data-contrast="more"] .alt-btn, [data-contrast="more"] .alt-kbd, [data-contrast="more"] .alt-crumbs button { --wall-c: var(--ink); }
+[data-contrast="more"] .alt-empty { border-style: solid; }
 
 /* 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; }
   .alt-surface[data-level="5"], .alt-dialog { border: 4px double CanvasText; }
   .alt-input:has(input:not(:placeholder-shown)), .alt-input:has(textarea:not(:placeholder-shown)) { border-style: solid !important; }
   .alt-input[data-invalid] { border: 2px dashed CanvasText !important; }
-  .alt-surface[data-level="-1"], .alt-input, .alt-tabs-list, .alt-sort-slot, .alt-drop[data-drop="armed"] { border: 1px dashed CanvasText; }
+  .alt-surface[data-level="-1"], .alt-input, .alt-tabs-list, .alt-sort-slot, .alt-drop[data-drop="armed"], .alt-empty { border: 1px dashed CanvasText; }
   .alt-surface[data-level="-2"], .alt-switch, .alt-slider-track, .alt-progress, [data-status="failed"], .alt-drop[data-drop="over"] { border: 2px dashed CanvasText; }
   [data-status="pending"] { border: 2px dotted CanvasText; }
   .alt-progress-fill, .alt-slider-fill, .alt-switch-fill, .alt-check-fill { background: Highlight; }