@ponchia/ui 0.7.0 → 0.8.1

package/css/state.css

@@ -223,6 +223,153 @@
   }
 }
 
+/* ==========================================================================
+   Severity — the second axis of system state.
+
+   `.ui-state` answers "what is this thing doing". This answers "how bad is
+   it". Bronto already shipped the TONES (`--danger`, `--warning`, `--info`,
+   `--success`) as per-component modifiers, but never the SCALE: the tier names,
+   their order, and the attribute that carries them. So every consumer invents
+   the ladder, and inside a single app it drifts — one surface saying
+   `critical|error|warning|note`, the next `bad|warn`, a third
+   `critical|warning|info|ok`, under two different attribute names. Findings
+   then do not sort against alerts, and a filter written for one list silently
+   misses the other.
+
+   THE LADDER, worst to best:
+
+     critical  broken now, and still losing something
+     error     something failed; it is not currently getting worse
+     warning   a threshold was crossed; nothing has failed yet
+     notice    worth reading, no action implied
+     ok        checked and healthy — an ASSERTION, not the absence of news
+     unknown   not measured, stale, or the check itself failed
+
+   `unknown` sits OUTSIDE the ordering deliberately. It is not "slightly worse
+   than ok", it is "we do not know", and collapsing it into `ok` is how a dead
+   collector reads as a healthy system.
+
+   The level is carried by `data-level` — one attribute name, so the same
+   selector works on a chip, a row, a dot, or the host's own element:
+
+     <span class="ui-severity" data-level="critical">Critical</span>
+     <li class="ui-severity-row" data-level="warning">…</li>
+
+   BOUNDARY: the host owns thresholds, ranking, filtering, and the wording of
+   every label. Colour is never the only channel (WCAG 1.4.1) — `.ui-severity`
+   carries an author-written label, and `.ui-severity-dot` is only for rows that
+   ALSO name their level in text.
+   ========================================================================== */
+
+/* Declared once so a host putting the level on its own element gets the same
+   mapping from `data-level` + `var(--severity-tone)`, without copying a table. */
+.ui-severity,
+.ui-severity-row,
+.ui-severity-dot {
+  --severity-tone: var(--text-dim);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot):is(
+  [data-level='critical'],
+  [data-level='error']
+) {
+  --severity-tone: var(--danger);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='warning'] {
+  --severity-tone: var(--warning);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='notice'] {
+  --severity-tone: var(--info);
+}
+
+:is(.ui-severity, .ui-severity-row, .ui-severity-dot)[data-level='ok'] {
+  --severity-tone: var(--success);
+}
+
+/* `unknown` keeps the neutral default tone — it must not read as a verdict. */
+
+/* The chip — a short uppercase tier label, tinted rather than filled, because
+   a list of findings is mostly chips and filled ones turn it into stripes.
+   `critical` is the exception and fills: in a scrolling list the worst tier has
+   to survive peripheral vision. */
+.ui-severity {
+  background: color-mix(in oklch, var(--severity-tone) 16%, transparent);
+  border-radius: var(--radius-pill);
+  color: var(--severity-tone);
+  display: inline-block;
+  flex: none;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  line-height: 1.2;
+  padding: 0.1rem 0.4rem;
+  text-transform: uppercase;
+}
+
+.ui-severity[data-level='critical'] {
+  background: var(--danger);
+  color: var(--button-text);
+}
+
+/* A tint over an unknown host surface cannot be contrast-gated, so the neutral
+   tier keeps a border instead and stays legible anywhere. */
+.ui-severity[data-level='unknown'] {
+  background: none;
+  border: 1px solid var(--line-strong);
+  padding-block: calc(0.1rem - 1px);
+}
+
+/* The dot — for dense rows where a chip costs more width than the level is
+   worth. An accelerator for scanning, not the label. */
+.ui-severity-dot {
+  background: var(--severity-tone);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  display: inline-block;
+  flex: none;
+  inline-size: 0.5rem;
+  print-color-adjust: exact;
+}
+
+.ui-severity-dot[data-level='unknown'] {
+  background: none;
+  box-shadow: inset 0 0 0 1px var(--line-strong);
+}
+
+/* The row — a list item that carries a level. The inline-start gutter is what
+   makes a long list readable without reading it. */
+.ui-severity-row {
+  align-items: baseline;
+  border-block-end: 1px solid var(--line);
+  border-inline-start: 2px solid var(--severity-tone);
+  display: flex;
+  gap: var(--space-xs);
+  padding: var(--space-2xs) var(--space-xs);
+}
+
+.ui-severity-row:last-child {
+  border-block-end: 0;
+}
+
+/* Gives up space first, so the level and any trailing metadata stay put. */
+.ui-severity-row__title {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-severity-row__meta {
+  color: var(--text-dim);
+  flex: none;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
 /* Forced colours: the tone dot collapses to a system colour, so the
    author-written label remains the state channel (it already must be). */
 @media (forced-colors: active) {
@@ -237,4 +384,18 @@
   .ui-job__bar {
     background: CanvasText;
   }
+
+  /* Same contract for severity: the tint and the gutter both vanish under a
+     replaced palette, so keep the structure and let the label carry meaning. */
+  .ui-severity {
+    border: 1px solid currentColor;
+  }
+
+  .ui-severity-row {
+    border-inline-start-color: CanvasText;
+  }
+
+  .ui-severity-dot {
+    background: CanvasText;
+  }
 }

package/css/table.css

@@ -136,7 +136,7 @@
   .ui-table__sort {
     box-sizing: border-box;
     margin-block: -0.7rem;
-    min-block-size: 24px;
+    min-block-size: var(--tap-target-min);
     padding-block: 0.7rem;
   }
 

package/css/tokens.css

@@ -25,6 +25,12 @@
   --space-lg: 1.35rem;
   --space-xl: 1.75rem;
   --space-2xl: 2.5rem;
+  --tap-target: max(44px, 2.9rem);
+  --tap-target-min: max(24px, 1.6rem);
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
 
   /* Type — Doto is the dot-matrix display face; body stays mono-grotesque. */
   --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace;

package/css/workbench.css

@@ -56,6 +56,36 @@
   padding: 0.25rem;
 }
 
+/* Pane-scale — a control bar belonging to ONE pane rather than to the app. The
+   difference from `--compact` is not density but framing: this bar is a row
+   inside a surface that already has a border, so it drops its own frame and
+   corners and rules off from the content below instead. It also refuses to
+   wrap: a pane bar sits directly above content that may be a live terminal or
+   an editor, and a second row would resize that content on every state change.
+   The row scrolls instead — see `__fill` for what gives up the space. */
+.ui-toolstrip--pane {
+  background: none;
+  border: 0;
+  border-block-end: 1px solid var(--line);
+  border-radius: 0;
+  flex-wrap: nowrap;
+  gap: var(--space-2xs);
+  overflow-x: auto;
+  padding: 0.3rem var(--space-xs);
+  scrollbar-width: thin;
+}
+
+/* The element that absorbs slack and gives it back first — a title, a path, a
+   filter input. Everything else in the bar keeps its size, so the control that
+   would otherwise be pushed past the clipped edge stays reachable. */
+.ui-toolstrip__fill {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ui-toolstrip__brand {
   align-items: baseline;
   display: inline-flex;
@@ -168,6 +198,96 @@
   min-inline-size: 0;
 }
 
+/* --- Pane — a movable, renameable surface with a grab header.
+
+   `.ui-panel` is a padded card and `.ui-inspector` is head-plus-body; neither
+   is a window. A pane is what a canvas node, a floating tool window, or a
+   dockable panel needs: a header you can drag, a title that renames in place,
+   an actions slot that survives a narrow pane, and a body that owns the rest.
+
+   Bronto paints the frame only. The host owns dragging, z-order, focus policy,
+   persistence, and what the actions do — this leaf has no behavior. --- */
+.ui-pane {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+/* `cursor: grab` states the affordance; the host wires the gesture. */
+.ui-pane__head {
+  align-items: center;
+  background: var(--bg-elevated);
+  border-block-end: 1px solid var(--line);
+  cursor: grab;
+  display: flex;
+  flex: none;
+  gap: var(--space-2xs);
+  min-block-size: var(--pane-head, 2.5rem);
+  padding: var(--space-2xs) var(--space-xs);
+}
+
+.ui-pane__head:active {
+  cursor: grabbing;
+}
+
+/* The title gives up space FIRST — it is the one thing in the header that can
+   be truncated without losing a function. */
+.ui-pane__title {
+  flex: 1 1 auto;
+  font-size: var(--text-xs);
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Rename in place. It inherits the type it replaces so the swap from label to
+   input does not move a single pixel of layout; only the accent border says
+   "you are typing a name now". Pair with `.ui-pane__title` on the input too. */
+.ui-pane__title-input {
+  background: var(--bg-elevated);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  margin-block: -1px;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  padding: 0 0.25rem;
+}
+
+/* Shrinks only AFTER the title is gone, and then scrolls rather than pushing
+   its last control past the pane's clipped edge — the failure that hides a
+   control the user needs (close, focus, disconnect) with no way to reach it. */
+.ui-pane__actions {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
+  gap: var(--space-2xs);
+  min-inline-size: 0;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.ui-pane__actions:empty {
+  display: none;
+}
+
+.ui-pane__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+}
+
 /* --- Selection bar — actions on the current selection ("3 selected"). --- */
 .ui-selectionbar {
   align-items: center;
@@ -194,6 +314,37 @@
   gap: var(--space-xs);
 }
 
+/* Anchor a floating bar to a viewport edge, clear of any display cutout or
+   gesture area. Both `--floating` bars above are shadowed but position-less,
+   so every consumer re-derives this — including the `max(offset, inset)` shape,
+   which is the part people get wrong by writing a bare offset that a phone then
+   swallows. `--anchor-block-end` is the default because a bar the thumb must
+   reach belongs at the bottom; `--anchor-block-start` is for the bar that must
+   not be under the thumb (a destructive-action or recovery bar).
+
+   The host still owns z-index — it knows what else is on the canvas. */
+.ui-selectionbar--anchored,
+.ui-toolstrip--anchored {
+  --anchor-offset: var(--space-sm);
+
+  inset-inline-start: 50%;
+  max-inline-size: calc(100% - 2 * var(--space-md));
+  position: absolute;
+  transform: translateX(-50%);
+}
+
+.ui-selectionbar--anchored,
+.ui-toolstrip--anchored,
+.ui-selectionbar--anchor-block-end,
+.ui-toolstrip--anchor-block-end {
+  inset-block: auto max(var(--anchor-offset), var(--safe-area-bottom));
+}
+
+.ui-selectionbar--anchor-block-start,
+.ui-toolstrip--anchor-block-start {
+  inset-block: max(var(--anchor-offset), var(--safe-area-top)) auto;
+}
+
 @media (hover: hover) {
   .ui-segmented-buttons__button:hover:not(:disabled, [aria-disabled='true'], [aria-pressed='true'], .is-active) {
     background: var(--panel);