@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.23.0

package/src/meter/meter.ts

@@ -105,32 +105,41 @@ const numbersText = (value: number, max: number, unit: string | undefined): stri
   return unit === undefined ? numbers : `${numbers} ${unit}`;
 };
 
+/** How high a reading is: full at `max`, high from `HIGH_SHARE` of it, calm below. The
+ *  percentage and a toned meter's cells both print it. */
+type Level = "Full" | "High" | "Calm";
+
+const levelOf = (value: number, max: number): Level => {
+  if (value >= max) {
+    return "Full";
+  } else if (value >= max * HIGH_SHARE) {
+    return "High";
+  } else {
+    return "Calm";
+  }
+};
+
 const percentView = <Message>(
   config: MeterConfig,
   percent: number,
-  isFull: boolean,
+  level: Level,
   h: HtmlBuilder<Message>,
 ): Html => {
   const percentText = `${percent}%`;
-  const high = config.max * HIGH_SHARE;
 
-  if (isFull) {
+  if (level === "Full") {
     return Chip.view({ label: config.full ?? percentText, tone: "Blocked" }, h);
-  } else if (config.value >= high) {
+  } else if (level === "High") {
     return Mark.readingView({ label: percentText }, h);
   } else {
     return h.span([h.Class("pct")], [percentText]);
   }
 };
 
-const toneClass = (value: number, max: number, isFull: boolean): string => {
-  if (isFull) {
-    return " toned full";
-  } else if (value >= max * HIGH_SHARE) {
-    return " toned high";
-  } else {
-    return " toned";
-  }
+const TONE_CLASS: Readonly<Record<Level, string>> = {
+  Full: " toned full",
+  High: " toned high",
+  Calm: " toned",
 };
 
 const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html => {
@@ -146,9 +155,10 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
     isToned = false,
   } = config;
   const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
-  const isFull = value >= max;
+  const level = levelOf(value, max);
+  const isFull = level === "Full";
   const numbers = config.valueText ?? numbersText(value, max, config.unit);
-  const rowClass = `meter-row${isStale ? " stale" : ""}${isToned ? toneClass(value, max, isFull) : ""}`;
+  const rowClass = `meter-row${isStale ? " stale" : ""}${isToned ? TONE_CLASS[level] : ""}`;
 
   return UiMeter.view(
     {
@@ -179,7 +189,7 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
                   [...groups.meter, h.Class("cells")],
                   cellRowView(METER_CELLS, scaled(share, METER_CELLS, isFull), h),
                 ),
-                percentView(config, scaled(share, PERCENT, isFull), isFull, h),
+                percentView(config, scaled(share, PERCENT, isFull), level, h),
                 ...(hasNumbers ? [h.span([h.Class("meter-num tnum")], [numbers])] : []),
               ],
             ),

package/src/notice/notice.ts

@@ -22,7 +22,8 @@ const toneGlyph = (tone: Tone): GlyphName =>
     Match.exhaustive,
   );
 
-const TONE_CLASS: Readonly<Record<Tone, string>> = {
+/** The class a tone adds to a notice's, a toast's or a glyph box's own. */
+export const TONE_CLASS: Readonly<Record<Tone, string>> = {
   Warn: "",
   Error: " error",
   Ok: " ok",

package/src/passwordField/passwordField.ts

@@ -3,7 +3,7 @@ import { Match, Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { pressedAttribute } from "../button/button.ts";
-import { describedByError, errorView } from "../field/field.ts";
+import { controlAttributes, errorView, helpView } from "../field/field.ts";
 import * as IconButton from "../iconButton/iconButton.ts";
 import * as Meter from "../meter/meter.ts";
 
@@ -95,12 +95,10 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
             h.span(
               [h.Class("password")],
               [
-                // NOTE: @foldkit/ui gap: Input has no required option, so the wrapper says it.
                 h.input([
                   ...groups.input,
                   h.Autocomplete(autocomplete),
-                  ...describedByError(id, error, help !== undefined, h),
-                  ...(isRequired ? [h.AriaRequired(true)] : []),
+                  ...controlAttributes(id, error, help, isRequired, h),
                 ]),
                 IconButton.view(
                   {
@@ -136,9 +134,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
                     ],
                   ),
                 ]),
-            ...(help === undefined
-              ? []
-              : [h.p([...groups.description, h.Class("field-help")], [help])]),
+            ...helpView(help, groups.description, h),
           ],
         ),
     },

package/src/pixel-paper.css

@@ -13,11 +13,17 @@
 
 /* anchors land 16px clear of the sticky top bar, at the height TopBar measures it to be
    however it wraps; without Foldkit, at one line's height. A status bar along the bottom is
-   kept clear the same way: the page ends above it, and so does a scrolled-to anchor */
+   kept clear the same way: the page ends above it, and so does a scrolled-to anchor. The
+   measured heights are written inline on <html>, over these */
+:root {
+  --topbar-h: 48px;
+  --statusbar-h: 0px;
+}
+
 html {
   height: 100%;
-  scroll-padding-top: calc(var(--topbar-h, 48px) + 16px);
-  scroll-padding-bottom: var(--statusbar-h, 0px);
+  scroll-padding-top: calc(var(--topbar-h) + 16px);
+  scroll-padding-bottom: var(--statusbar-h);
 }
 
 :root:has(footer.statusbar) {
@@ -26,7 +32,7 @@ html {
 
 body {
   min-height: 100%;
-  padding-bottom: var(--statusbar-h, 0px);
+  padding-bottom: var(--statusbar-h);
   font-family: var(--font-body);
   font-size: var(--type-body);
   line-height: 1.45;
@@ -40,10 +46,6 @@ fieldset {
   min-width: 0;
 }
 
-legend {
-  padding: 0;
-}
-
 ::selection {
   background: var(--ink);
   color: var(--paper);
@@ -93,7 +95,6 @@ kbd {
   position: absolute;
   width: 1px;
   height: 1px;
-  padding: 0;
   margin: -1px;
   overflow: hidden;
   clip-path: inset(50%);
@@ -129,8 +130,8 @@ kbd {
    keeps its look and takes the pointer over an invisible 24px square centred on it */
 :is(
   .nav.tabs button,
-  .switch > :is(a, button),
-  :is(button, a, label).fchip,
+  .switch > button,
+  :is(button, label).fchip,
   button.glyph,
   button.mark,
   button.tag:has(> span),
@@ -143,8 +144,8 @@ kbd {
 
 :is(
   .nav.tabs button,
-  .switch > :is(a, button),
-  :is(button, a, label).fchip,
+  .switch > button,
+  :is(button, label).fchip,
   button.glyph,
   button.mark,
   button.tag:has(> span),
@@ -340,7 +341,6 @@ button.tag > span {
   font-size: var(--type-wordmark);
   font-weight: 400;
   letter-spacing: -0.02em;
-  margin: 0;
   color: inherit;
   text-decoration: none;
   white-space: nowrap;
@@ -378,8 +378,8 @@ button.tag > span {
   flex: 1;
 }
 
-/* the right-hand tools wrap as one group, never one control per line */
-/* a bar of tools wider than the window wraps onto lines of its own, at the right */
+/* the right-hand tools wrap as one group, never one control per line; a group wider than the
+   window wraps onto lines of its own, at the right */
 .topbar-tools {
   display: flex;
   flex-wrap: wrap;
@@ -456,7 +456,6 @@ a.textbtn {
 }
 
 /* tabs at the top of a flush panel sit inside its padding */
-.panel > .nav.tabs,
 .panel > .tabbed > .nav.tabs {
   margin: var(--pad) var(--pad) 0;
 }
@@ -498,7 +497,6 @@ a.textbtn {
   color: var(--on-head);
 }
 
-.nav.tabs a,
 .nav.tabs button {
   padding: 4px 12px;
   font-size: var(--type-state);
@@ -607,7 +605,7 @@ a.textbtn {
 
 .places li:has(> [aria-current]) :is(.place-count, .iconbtn.quiet) {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .places li:has(> [aria-current]) :focus-visible {
@@ -798,8 +796,6 @@ a.textbtn {
 .menu {
   position: absolute;
   z-index: 200;
-  margin: 0;
-  padding: 0;
   min-width: 148px;
   max-width: calc(100vw - 24px);
   color: var(--ink);
@@ -875,7 +871,7 @@ a.textbtn {
 
 .menu :is([aria-current="page"], [role="menuitemradio"][aria-checked="true"]) .key-hint {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .menu .menu-check {
@@ -952,7 +948,7 @@ a.textbtn {
   margin-left: auto;
   font-size: var(--type-state);
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .panel-body {
@@ -1046,14 +1042,12 @@ a.textbtn {
   color: var(--paper);
   background: var(--ink);
   border-color: var(--paper);
-  opacity: 0.6;
+  opacity: var(--fade-held);
 }
 
 /* a quiet icon button prints in paper, and a hover cannot darken it to the ink of the bar */
 .panel-lead .iconbtn.quiet,
-.panel-acts .iconbtn.quiet,
-.panel-lead .iconbtn.quiet:hover,
-.panel-acts .iconbtn.quiet:hover {
+.panel-acts .iconbtn.quiet {
   color: inherit;
 }
 
@@ -1087,7 +1081,6 @@ a.textbtn {
   flex: none;
 }
 
-.switch a,
 .switch button {
   width: 26px;
   height: 22px;
@@ -1100,12 +1093,11 @@ a.textbtn {
   cursor: pointer;
 }
 
-.switch > :is(a, button) + :is(a, button) {
+.switch > button + button {
   border-left: var(--line) solid var(--ink);
 }
 
-.switch [aria-pressed="true"],
-.switch [aria-current="page"] {
+.switch [aria-pressed="true"] {
   background: var(--ink);
   color: var(--paper);
 }
@@ -1159,11 +1151,6 @@ button.fchip:active {
   color: inherit;
 }
 
-a.fchip {
-  cursor: pointer;
-  text-decoration: none;
-}
-
 .fchip.query {
   cursor: text;
   isolation: isolate;
@@ -1407,12 +1394,6 @@ button.glyph {
   margin: -4px;
 }
 
-/* an inline edit in a row shows its focus as its caret and its rule, thickened below, not a
-   ring */
-.row .grow input.inline-input:focus-visible {
-  outline: none;
-}
-
 /* the title opens the record; the pencil renames */
 .row .title {
   font: inherit;
@@ -1510,10 +1491,13 @@ button.glyph {
   outline-offset: -4px;
 }
 
-/* the row you are on (its link is aria-current) prints inverted, as a place and a board's
-   cursor card do: hover adds nothing, a dot's border takes the paper, what prints muted on
-   paper prints in paper at 0.75, and lateness takes a red slip */
-.row.linked:has(.grow a[aria-current]) {
+/* the row you are on (its link is aria-current) and a board's cursor card print inverted, as
+   a place does and as the system marks the one current thing: hover adds nothing, what prints
+   muted on paper prints in paper at --fade-on-ink, as a title bar's meta does, chips, marks
+   and buttons keep their own fills, and a ring inside prints in paper. Each selector is
+   written out, not joined in :is(), so each keeps its own specificity */
+.row.linked:has(.grow a[aria-current]),
+.board-card[aria-current="true"] {
   background-color: var(--ink);
   color: var(--paper);
 }
@@ -1522,16 +1506,20 @@ button.glyph {
   border-color: var(--paper);
 }
 
-.row.linked:has(.grow a[aria-current]) :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
+.row.linked:has(.grow a[aria-current]) :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet),
+.board-card[aria-current="true"] :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
-.row.linked:has(.grow a[aria-current]) .tag {
+.row.linked:has(.grow a[aria-current]) .tag,
+.board-card[aria-current="true"] .tag {
   border-color: currentColor;
 }
 
-.row.linked:has(.grow a[aria-current]) :is(.due.late, .age.stale) {
+/* lateness cannot be red on ink: it takes a red slip, drawn by a spread so nothing moves */
+.row.linked:has(.grow a[aria-current]) :is(.due.late, .age.stale),
+.board-card[aria-current="true"] :is(.due.late, .age.stale) {
   opacity: 1;
   background: var(--red);
   color: var(--on-red);
@@ -1539,7 +1527,8 @@ button.glyph {
 }
 
 .row.linked:has(.grow a[aria-current]) :focus-visible,
-.row.linked:has(.grow a[aria-current]:focus-visible) {
+.row.linked:has(.grow a[aria-current]:focus-visible),
+.board-card[aria-current="true"] :focus-visible {
   outline-color: var(--paper);
 }
 
@@ -1566,35 +1555,6 @@ button.glyph {
   opacity: 1;
 }
 
-/* a board's cursor card is inverted, as the system marks the one current thing. What prints
-   muted on paper prints in paper at 0.75, as a title bar's meta does; chips, marks and buttons
-   keep their own fills; a ring inside it prints in paper. Hover adds nothing to it */
-.board-card[aria-current="true"] {
-  background-color: var(--ink);
-  color: var(--paper);
-}
-
-.board-card[aria-current="true"] :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
-  color: inherit;
-  opacity: 0.75;
-}
-
-.board-card[aria-current="true"] .tag {
-  border-color: currentColor;
-}
-
-/* lateness cannot be red on ink: it takes a red slip, drawn by a spread so nothing moves */
-.board-card[aria-current="true"] :is(.due.late, .age.stale) {
-  opacity: 1;
-  background: var(--red);
-  color: var(--on-red);
-  box-shadow: 0 0 0 3px var(--red);
-}
-
-.board-card[aria-current="true"] :focus-visible {
-  outline-color: var(--paper);
-}
-
 /* a phone has no room for the hover tools; the detail card carries every edit. Titles
    wrap to a second line instead of clipping to a few characters beside the chips */
 @media (max-width: 600px) {
@@ -1747,10 +1707,11 @@ input.inline-input[aria-invalid="true"] {
   border-bottom-color: var(--red);
 }
 
-/* in a row, which takes its ring, focus doubles the rule to 2px, as a field's baseline does;
-   drawn inside the box, so the row keeps its height, and in the rule's own colour, so a
-   refused edit stays red */
+/* in a row, focus shows as the caret and the rule, not a ring: the rule doubles to 2px, as a
+   field's baseline does, drawn inside the box, so the row keeps its height, and in the rule's
+   own colour, so a refused edit stays red */
 .row .grow input.inline-input:focus-visible {
+  outline: none;
   box-shadow: inset 0 -1px 0 var(--ink);
 }
 
@@ -2081,7 +2042,6 @@ textarea::-webkit-resizer {
   font-size: var(--type-control);
 }
 
-.title-edit,
 input.inline-input.title-edit {
   font-size: var(--type-title);
   font-weight: 600;
@@ -2292,12 +2252,6 @@ select[aria-invalid="true"] {
   margin-left: 8px;
 }
 
-.table .chips {
-  display: inline-flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
 /* a stacked table: on a phone each row becomes a block of label and value lines, so a
    pinned action column never slices through what the row says */
 @media (max-width: 600px) {
@@ -2719,15 +2673,10 @@ pre.code-surface {
    element of its own (.veil-backdrop) under the pad; the pad lets a press through to it
    everywhere but on the card it holds, and a press on the veil closes the dialog. */
 dialog.veil {
-  margin: 0;
   color: inherit;
   overflow-y: auto;
 }
 
-dialog.veil[open] {
-  display: block;
-}
-
 dialog.veil:focus {
   outline: none;
 }
@@ -2819,12 +2768,12 @@ dialog.veil:focus {
 .card-tb .meta {
   font-size: var(--type-state);
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 /* a held icon button fades on the bar, as a held button in a panel's title bar does */
 :is(.card-tb, .panel-tb) .iconbtn[aria-disabled="true"] {
-  opacity: 0.6;
+  opacity: var(--fade-held);
   cursor: default;
 }
 
@@ -3066,7 +3015,7 @@ dialog.veil:focus {
 .palette-row[aria-selected="true"] .hint,
 .palette-row[aria-selected="true"] .tag {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .palette-row[aria-selected="true"] .tag {
@@ -3130,7 +3079,6 @@ dialog.veil:focus {
 }
 
 .empty-title {
-  margin: 0;
   font-family: var(--font-px);
   font-size: var(--type-control);
   text-transform: uppercase;
@@ -3151,7 +3099,7 @@ dialog.veil:focus {
 
 .banner {
   position: fixed;
-  bottom: calc(var(--statusbar-h, 0px) + 16px);
+  bottom: calc(var(--statusbar-h) + 16px);
   left: 50%;
   transform: translateX(-50%);
   z-index: 150;
@@ -3408,7 +3356,7 @@ dialog.veil:focus {
 }
 
 .board-card.drag-dim {
-  opacity: 0.4;
+  opacity: var(--fade-dragged);
 }
 
 /* focus on the title rings the whole slip, outside its own border */
@@ -3501,7 +3449,7 @@ dialog.veil:focus {
 }
 
 .sortable-item.drag-dim {
-  opacity: 0.4;
+  opacity: var(--fade-dragged);
 }
 
 /* where a pointer would drop the held item: a 2px dashed ink line beside the item it lands
@@ -5064,7 +5012,6 @@ dialog.veil:focus {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 12px;
-  margin: 0;
 }
 
 .statusbar-keys .key-hint {
@@ -5076,24 +5023,34 @@ dialog.veil:focus {
 
 /* one element in two places: at rest, fixed down the left edge from the top bar's lower
    edge (as the stage hangs) and scrolling itself; on a phone the same element opens as a
-   popover drawer. --rail is the reader's width when they gave one: the view sets it on
-   .railed, so the page's padding and the rail's width follow it together */
+   popover drawer. The reader's width, when they gave one, is --railed-width, which the view
+   sets on .railed, so the page's padding and the rail's width follow it together; without one,
+   --rail. It is not inherited: each box it sizes takes it from .railed by name, so a width that
+   changes under a dragged splitter restyles those four and none of the rows inside them */
+@property --railed-width {
+  syntax: "*";
+  inherits: false;
+}
+
 .railed {
-  padding-left: var(--rail);
+  padding-left: var(--railed-width, var(--rail));
+}
+
+.railed > :is(.rail, .rail-resize, .bench) {
+  --railed-width: inherit;
 }
 
 .rail[popover] {
   position: fixed;
   inset: auto;
   top: anchor(--topbar bottom, 0px);
-  bottom: var(--statusbar-h, 0px);
+  bottom: var(--statusbar-h);
   left: 0;
   display: grid;
   align-content: start;
   gap: var(--gap);
-  width: var(--rail);
+  width: var(--railed-width, var(--rail));
   height: auto;
-  margin: 0;
   padding: var(--gap) 10px var(--gap) 20px;
   border: 0;
   background: none;
@@ -5112,8 +5069,8 @@ dialog.veil:focus {
 .rail-resize {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
-  bottom: var(--statusbar-h, 0px);
-  left: var(--rail);
+  bottom: var(--statusbar-h);
+  left: var(--railed-width, var(--rail));
   z-index: 1;
   width: 12px;
   cursor: col-resize;
@@ -5196,21 +5153,24 @@ dialog.veil:focus {
 /* hung from the top bar's lower edge like the stage, down to the status bar, edge to edge, or
    from the rail's edge beside one (a fixed box takes nothing from .railed's padding). The head
    takes its own height while the work keeps at least --bench-work-min, or all but the head's
-   first 64px (its padding and a small button: the rail's open button) on a window too short
+   first --bench-head-min (its padding and a small button: the rail's open button) on a window too short
    for both; past that the head scrolls itself. The work takes the rest and lays out what
    fills it (a reel's height is 100% of it). The page does not scroll */
 .bench {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
   right: 0;
-  bottom: var(--statusbar-h, 0px);
+  bottom: var(--statusbar-h);
   left: 0;
   display: grid;
-  grid-template-rows: minmax(0, max-content) minmax(min(var(--bench-work-min), 100% - 64px), 1fr);
+  grid-template-rows: minmax(0, max-content) minmax(
+      min(var(--bench-work-min), 100% - var(--bench-head-min)),
+      1fr
+    );
 }
 
 .railed > .bench {
-  left: var(--rail);
+  left: var(--railed-width, var(--rail));
 }
 
 /* the head lines up with a reel's windows, a reel's gutter in from the edge; the reel's own
@@ -5248,7 +5208,7 @@ dialog.veil:focus {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
   right: 0;
-  bottom: var(--statusbar-h, 0px);
+  bottom: var(--statusbar-h);
   left: 0;
   overflow: hidden;
 }
@@ -5347,8 +5307,7 @@ dialog.veil:focus {
   border-color: var(--paper);
 }
 
-.window > .panel-tb .iconbtn,
-.window > .panel-tb .iconbtn.quiet {
+.window > .panel-tb .iconbtn {
   color: inherit;
 }
 
@@ -5558,7 +5517,7 @@ dialog.veil:focus {
 }
 
 .reel-pane.drag-dim {
-  opacity: 0.4;
+  opacity: var(--fade-dragged);
 }
 
 /* only the grips lift: a pane's text selects and its terminal takes the pointer */
@@ -5767,7 +5726,6 @@ dialog.veil:focus {
   inset: 0;
   width: 100%;
   height: 100%;
-  margin: 0;
   opacity: 0;
   appearance: none;
   cursor: pointer;
@@ -5826,7 +5784,7 @@ dialog.veil:focus {
    padding from the corner), so the stylesheet raises it clear of a banner, its anchor when one
    is showing, or of a status bar, and sets the gap. A phone spans it across the bottom */
 .toasts .toast-stack {
-  bottom: calc(anchor(--banner top, calc(var(--statusbar-h, 0px) + 4px)) - 4px) !important;
+  bottom: calc(anchor(--banner top, calc(var(--statusbar-h) + 4px)) - 4px) !important;
   gap: 10px !important;
   width: min(392px, 100vw);
 }
@@ -5874,21 +5832,14 @@ dialog.veil:focus {
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .toasts .toast {
-    animation: none;
-  }
-}
-
 /* ---------- reduced motion ---------- */
 
 @media (prefers-reduced-motion: reduce) {
-  .cursor {
-    animation: none;
-  }
+  .cursor,
   .veil-backdrop,
   .card,
-  .rail[popover]:popover-open {
+  .rail[popover]:popover-open,
+  .toasts .toast {
     animation: none;
   }
 }