@ponchia/ui 0.13.0 → 0.14.0

package/classes/index.js

@@ -141,6 +141,10 @@ export const cls = Object.freeze({
   alertWarning: 'ui-alert--warning',
   alertDanger: 'ui-alert--danger',
   alertInfo: 'ui-alert--info',
+  alertBand: 'ui-alert--band',
+  bodyState: 'ui-body-state',
+  bodyStateError: 'ui-body-state--error',
+  bodyStateStale: 'ui-body-state--stale',
   toastStack: 'ui-toast-stack',
   toastStackAssertive: 'ui-toast-stack--assertive',
   toast: 'ui-toast',
@@ -875,6 +879,11 @@ const dotTone = (tone) =>
     tone,
   );
 
+// A body state's tone. Empty and loading are the plain state (no option); a
+// loading region says so with aria-busy, not a class.
+const bodyStateTone = (state) =>
+  valueClass({ error: cls.bodyStateError, stale: cls.bodyStateStale }, state);
+
 const alertTone = (tone) =>
   toneClass(
     'alert',
@@ -1026,7 +1035,7 @@ export const ui = {
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
   cluster: ({ between } = {}) => j(cls.cluster, between && cls.clusterBetween),
   stagger: ({ auto } = {}) => j(cls.stagger, auto && cls.staggerAuto),
-  alert: ({ tone } = {}) => j(cls.alert, alertTone(tone)),
+  alert: ({ tone, band } = {}) => j(cls.alert, alertTone(tone), band && cls.alertBand),
   toast: ({ tone } = {}) => j(cls.toast, toastTone(tone)),
   progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
   meter: ({ tone } = {}) => j(cls.meter, meterTone(tone)),
@@ -1152,6 +1161,7 @@ export const ui = {
   job: ({ state, compact } = {}) => j(cls.job, jobTone(state), compact && cls.jobCompact),
   originLabel: ({ ai } = {}) => j(cls.originLabel, ai && cls.originLabelAi),
   emptyState: ({ invite } = {}) => j(cls.emptyState, invite && cls.emptyStateInvite),
+  bodyState: ({ state } = {}) => j(cls.bodyState, bodyStateTone(state)),
   toolstrip: ({ variant, anchor } = {}) =>
     j(
       cls.toolstrip,

package/css/content.css

@@ -5,9 +5,42 @@
    and the document is styled in the Nothing aesthetic while the markup
    stays semantic and machine-readable (no class-soup). Everything here
    is an element selector scoped under `.ui-prose`, so it never leaks
-   into app UI.
+   into app UI. The one exception is `.ui-meta`, the date · author line
+   that sits beside long-form text, a tool's remarks included (it lived in
+   site.css until 0.14, so css/tool.css can keep it without the site shell).
    ========================================================================== */
 
+/* --- Meta row — date · author · read-time, dot-separated --- */
+
+.ui-meta {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.55rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-meta__item {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.55rem;
+}
+
+.ui-meta__item:not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.22rem;
+  content: '';
+  inline-size: 0.22rem;
+}
+
 .ui-prose {
   /* A prose block must shrink as a grid/flex item; its pre blocks scroll locally. */
   min-inline-size: 0;

package/css/feedback.css

@@ -79,6 +79,8 @@
 }
 
 .ui-alert--accent {
+  --alert-tone: var(--accent);
+
   border-inline-start-color: var(--accent);
 }
 
@@ -87,6 +89,8 @@
 }
 
 .ui-alert--success {
+  --alert-tone: var(--success);
+
   border-inline-start-color: var(--success);
 }
 
@@ -95,6 +99,8 @@
 }
 
 .ui-alert--warning {
+  --alert-tone: var(--warning);
+
   border-inline-start-color: var(--warning);
 }
 
@@ -103,6 +109,8 @@
 }
 
 .ui-alert--danger {
+  --alert-tone: var(--danger);
+
   border-inline-start-color: var(--danger);
 }
 
@@ -111,6 +119,8 @@
 }
 
 .ui-alert--info {
+  --alert-tone: var(--info);
+
   border-inline-start-color: var(--info);
 }
 
@@ -118,6 +128,84 @@
   background: var(--info);
 }
 
+/* --- Band: an alert across the edge of a small surface ---
+   A node, panel or card body that must say "this failed" or "this is out of
+   date" above content it still shows. Full-bleed, one line of small type, the
+   tone as a tint: at 200–400px a boxed alert spends a third of the body on its
+   frame. Put it first in the body; the tone modifiers work as on any alert. */
+.ui-alert--band {
+  background: color-mix(in oklch, var(--alert-tone, var(--text-dim)) 10%, var(--panel));
+  border: 0;
+  border-block-end: 1px solid var(--line);
+  border-radius: 0;
+  font-size: var(--text-2xs);
+  gap: var(--space-1-5);
+  padding: var(--space-1-5) var(--space-sm);
+}
+
+.ui-alert--band::before {
+  block-size: 0.4rem;
+  inline-size: 0.4rem;
+  margin-block-start: 0.3em;
+}
+
+/* --- Body state: what a small surface shows instead of its content ---
+   Empty, loading, failed or out of date, for a node, panel or card body of
+   200–400px. It fills the body and centres one short sentence (with an
+   optional `ui-empty-state__hint` or an action), without the dashed frame a
+   page-level `ui-empty-state` draws. Error and stale lead with a tone dot;
+   loading takes `aria-busy="true"` on the region and an optional
+   `ui-dotspinner` or `ui-skeleton` inside. In a `ui-cq` body narrower than
+   15rem the state tightens to the smallest type. */
+.ui-body-state {
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--text-dim);
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  font-size: var(--text-xs);
+  gap: var(--space-2xs);
+  justify-content: center;
+  margin: 0;
+  min-block-size: 100%;
+  padding: var(--space-md);
+  text-align: center;
+  text-wrap: balance;
+}
+
+.ui-body-state > * {
+  margin: 0;
+}
+
+.ui-body-state--error,
+.ui-body-state--stale {
+  --body-state-tone: var(--danger);
+
+  color: var(--text-soft);
+}
+
+.ui-body-state--stale {
+  --body-state-tone: var(--warning);
+}
+
+.ui-body-state--error::before,
+.ui-body-state--stale::before {
+  background: var(--body-state-tone);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  content: '';
+  inline-size: 0.5rem;
+  print-color-adjust: exact;
+}
+
+@container bronto (max-inline-size: 15rem) {
+  .ui-body-state {
+    font-size: var(--text-2xs);
+    padding: var(--space-xs);
+  }
+}
+
 @media (hover: hover) {
   .ui-alert__close:hover {
     color: var(--text);
@@ -277,7 +365,9 @@
    inherited via --tone-glyph so one rule covers both alert and toast. */
 @media (forced-colors: active) {
   .ui-alert::before,
-  .ui-toast::before {
+  .ui-toast::before,
+  .ui-body-state--error::before,
+  .ui-body-state--stale::before {
     background: none;
     border-radius: 0;
     content: var(--tone-glyph, '\2022'); /* • neutral default */
@@ -300,12 +390,14 @@
   }
 
   .ui-alert--warning,
-  .ui-toast--warning {
+  .ui-toast--warning,
+  .ui-body-state--stale {
     --tone-glyph: '\0021'; /* ! */
   }
 
   .ui-alert--danger,
-  .ui-toast--danger {
+  .ui-toast--danger,
+  .ui-body-state--error {
     --tone-glyph: '\2715'; /* ✕ */
   }
 

package/css/fonts-inter.css

@@ -0,0 +1,35 @@
+/* ==========================================================================
+   fonts-inter — Inter, the face `--sans` names first.
+
+   OPT-IN LEAF. Since 0.10 ordinary text is `--sans`, and the stack names
+   Inter first, but nothing shipped it: each OS fell through to its own
+   system face, so the same screen set differently on every device. Import
+   this leaf and Inter is what renders everywhere.
+
+     @import '@ponchia/ui/css/fonts-inter.css';
+
+   One variable face per style covers every weight the tokens use (400 to 700,
+   and the in-between ones a heading or a readout asks for). A browser
+   downloads a face only when text on the page needs it, so the italic costs
+   nothing until something is italic.
+
+   Inter 4.1 (rsms/inter, web/InterVariable*.woff2), unmodified. License: SIL
+   OFL 1.1, fonts/OFL-Inter.txt. URLs are relative to this file; a bundler
+   rewrites them and emits the files.
+   ========================================================================== */
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-variable-italic.woff2') format('woff2');
+}

package/css/fonts-jetbrains-mono.css

@@ -0,0 +1,49 @@
+/* ==========================================================================
+   fonts-jetbrains-mono — JetBrains Mono, the face `--mono` names first.
+
+   OPT-IN LEAF. Code, terminals, numbers in tables and readouts are `--mono`,
+   and a terminal measures its cells in it, so a fallback monospace changes
+   layout as well as looks. Import this leaf and JetBrains Mono is what
+   renders everywhere.
+
+     @import '@ponchia/ui/css/fonts-jetbrains-mono.css';
+
+   Four faces: regular and bold, upright and italic, the ones terminal output
+   uses. A browser downloads a face only when text on the page needs it.
+
+   JetBrains Mono 2.304 (JetBrains/JetBrainsMono, fonts/webfonts), unmodified.
+   License: SIL OFL 1.1, fonts/OFL-JetBrainsMono.txt. URLs are relative to
+   this file; a bundler rewrites them and emits the files.
+   ========================================================================== */
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-400-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono-700-italic.woff2') format('woff2');
+}

package/css/site.css

@@ -340,34 +340,3 @@
   border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
   color: var(--text-soft);
 }
-
-/* --- Meta row — date · author · read-time, dot-separated --- */
-
-.ui-meta {
-  align-items: center;
-  color: var(--text-dim);
-  display: flex;
-  flex-wrap: wrap;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  gap: 0.55rem;
-  letter-spacing: var(--tracking-wide);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-transform: uppercase;
-}
-
-.ui-meta__item {
-  align-items: center;
-  display: inline-flex;
-  gap: 0.55rem;
-}
-
-.ui-meta__item:not(:last-child)::after {
-  background: var(--line-strong);
-  border-radius: 50%;
-  block-size: 0.22rem;
-  content: '';
-  inline-size: 0.22rem;
-}

package/css/tool.css

@@ -0,0 +1,29 @@
+/* ==========================================================================
+   tool — the default bundle for a tool, without site and app chrome.
+
+   Import it INSTEAD of the default bundle, not after it:
+
+     @import '@ponchia/ui/css/tool.css';
+
+   Everything in the default bundle except four leaves a tool on its own
+   canvas never renders: navigation (the theme toggle), site (the
+   marketing/content shell), table (data tables) and app (the admin service
+   shell). Tokens, fonts, base, motion, the dot-matrix and glyph primitives,
+   content, primitives, rows, forms, feedback, overlay and disclosure stay, in
+   the default bundle's cascade order. Need one of the four after all? Import
+   its leaf as well (`@ponchia/ui/css/table.css`).
+   ========================================================================== */
+@layer bronto;
+
+@import url('./tokens.css') layer(bronto);
+@import url('./fonts.css') layer(bronto);
+@import url('./base.css') layer(bronto);
+@import url('./motion.css') layer(bronto);
+@import url('./dots.css') layer(bronto);
+@import url('./content.css') layer(bronto);
+@import url('./primitives.css') layer(bronto);
+@import url('./row.css') layer(bronto);
+@import url('./forms.css') layer(bronto);
+@import url('./feedback.css') layer(bronto);
+@import url('./overlay.css') layer(bronto);
+@import url('./disclosure.css') layer(bronto);