@danieldeusing/design 0.20.0 → 0.22.0

package/src/components.css

@@ -133,6 +133,28 @@
   transform: translateY(-2px);
 }
 
+/* THE BUTTON HAD NO DISABLED STATE — the select next to it did, and they disagreed.
+   `select:disabled` has been `opacity: 0.45; cursor: default` since 0.21.0, so a control row
+   holding a greyed dropdown beside a fully-lit button that does nothing when pressed was saying
+   two different things about the same condition. A pager's `prev` on page one is the case that
+   made it unavoidable: it is disabled far more often than not.
+
+   BELOW the hover rules on purpose. `:disabled` and `--ghost:hover` are both (0,2,0), so equal
+   specificity is settled by source order — declared above them, a disabled button would light up
+   under the pointer and reinstate exactly the lie this removes. Same trap that made every compact
+   button render at CTA size in 0.13.0.
+
+   Opacity and nothing else about the fill: a disabled PRIMARY button must stay filled and just go
+   quiet. Setting `background: transparent` here would strip it to `--primary-foreground` text on
+   the page background — near-invisible on all four themes — so the one property that reads as
+   "off" on both variants is the only one touched. */
+.btn-terminal:disabled {
+  opacity: 0.45;
+  cursor: default;
+  box-shadow: none;
+  transform: none;
+}
+
 /* A ROW-SIZED BUTTON. The system's button is a landing-page CTA at 12px/24px; a table row that
    offers `remove` needs the same button at the size of its text. This is the size ONLY — colour,
    corners and the `> ` prefix still come from .btn-terminal / --ghost, so a compact button cannot
@@ -191,6 +213,49 @@
   .btn-terminal--destructive { min-width: 44px; min-height: 44px; }
 }
 
+/* THE EDIT ROW ACTION — the same icon button as the bin, in the ordinary colour.
+
+   `edit →` was a word and an arrow in a table cell wide enough to hold them, next to a bin that
+   is 22px square. Two controls doing the same job in one column, one of them four times the
+   width of the other, and at 375px the label broke mid-word into "edi / t →" — which is why
+   cockpit carried a `white-space: nowrap` rule to prop it up. An icon says it in the space the
+   bin already proved is enough.
+
+   IT IS NOT DESTRUCTIVE AND MUST NOT BORROW THAT COLOUR. Editing is an ordinary action; red is
+   reserved for the one press that cannot be taken back. So this class carries NO colour at all —
+   compose it with `--ghost` and it is `--primary` on a `--border` outline like every other
+   secondary control, and with nothing and it is the filled primary button. That is also why it is
+   not `--destructive` with the fill swapped: colour is the bin's whole warning, and the delta
+   here is only the glyph and the box that holds it.
+
+   THE GLYPH IS A MASK, for the reason the bin's comment gives: `currentColor` re-takes whatever
+   colour the composition landed on, on all four themes, with nothing declared per-theme. A pasted
+   SVG would be one `fill=` that is wrong on two of them, once per surface that adopts it.
+
+   AN ACCESSIBLE NAME IS MANDATORY — see the bin. Dropping the word "edit" leaves a button whose
+   entire content is a mask, and a mask has no text: a screen reader announces "button", and a
+   column of them announces "button" a dozen times. `aria-label` must name the TARGET
+   ("edit poi/vu3"), not repeat the verb, or the column is a dozen identical announcements
+   instead. `bin/design-conformance` fails an icon button with no accessible name. */
+.btn-terminal--edit {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0.3rem;
+}
+/* Kills the `> ` prefix, which would otherwise be the entire text content of an icon button.
+   --ghost already blanks it; repeated here so the class is correct on a filled button too. */
+.btn-terminal--edit::before { content: ""; }
+.btn-terminal--edit::after {
+  content: ""; display: block; width: 0.875rem; height: 0.875rem;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04l-3.75-3.75-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04l-3.75-3.75-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+/* 44px under a thumb, same as the bin: `min-*` grows the tap target without moving the glyph,
+   which the flexbox keeps centred. Never set a width on it. */
+@media (pointer: coarse) {
+  .btn-terminal--edit { min-width: 44px; min-height: 44px; }
+}
+
 /* Quiet, underlined link that warms to the primary colour on hover. */
 .link-quiet {
   color: var(--muted-foreground);
@@ -362,6 +427,252 @@ html[data-theme="warm"] .dropdown-item[data-theme-value="warm"] {
   text-shadow: 0 0 8px var(--glow);
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+   Select — the estate's own dropdown, because a native one's list CANNOT be
+   styled. Pairs with runtime/select.js.
+
+   THE CONSTRAINT THAT DECIDES EVERYTHING HERE: a `<select>`'s option list is
+   drawn by the OPERATING SYSTEM, outside the page, and no stylesheet reaches
+   it. So every surface in the estate has been rendering a rounded, blue-
+   highlighted, system-font menu out of a terminal UI — the one component that
+   could not be made to look like the rest, no matter what the page declared.
+   `appearance: base-select` would fix it in Chrome 135+ and nowhere else, so
+   Safari would keep the system menu: the estate would then be inconsistent
+   WITH ITSELF, which is worse than being consistently wrong.
+
+   So the list is rebuilt in the page. runtime/select.js keeps the real
+   `<select>` as the value (it is still what a form submits and what page code
+   reads) and paints a button + listbox over it. THE MARKUP CONTRACT IS
+   NOTHING: author a plain `<select>`, exactly as with `<table>`.
+
+   TWO RENDERINGS, ONE DECLARATION. The bare `<select>` (JS off, or before the
+   runtime has run) and the `.select-trigger` that replaces it must be the same
+   control at the same size — a reader who tabs into a page mid-enhancement
+   must not see the box change shape. Splitting their look across two rules is
+   how they would drift, so the closed control is declared ONCE for both, by
+   ELEMENT and by class together. Five copies of `.cfg-sel` in cockpit are what
+   this replaces; none of them agreed about `:disabled`.
+
+   THE BORDER IS 60% OF --foreground, MEASURED, NOT --border. A control's edge
+   is the thing that says "this is a control" and WCAG 1.4.11 wants 3:1 for
+   that; `--border` is a CONTAINER hairline and measures 1.37 / 2.00 / 1.61 /
+   1.42 against `--background` on the four themes — invisible as a control
+   edge, and correct for the cards it was made for. The estate's hand-rolled
+   selects used `currentColor 30%`, which is 1.70 at worst. 60% is the first
+   step that clears 3:1 on all four themes against ALL THREE surfaces a control
+   can land on (worst: warm 3.24 over --background, 3.24 over --muted). Mixed
+   with `transparent` rather than with a surface so it composites correctly
+   wherever it is dropped, and derived from a token so it stays per-theme.
+
+   THE CARET IS TWO GRADIENT HALVES, not an SVG. It has to be `currentColor` —
+   a data-URI with a baked fill would need declaring four times or be wrong on
+   two themes (the luminance gap in tokens.css), and a `::after` is impossible
+   because a `<select>` cannot have generated content. Two abutting squares,
+   each half-filled on the diagonal, draw the same ▾ on both renderings.
+   ───────────────────────────────────────────────────────────────────────── */
+select,
+.select-trigger {
+  appearance: none;
+  -webkit-appearance: none;
+  max-width: 100%;
+  padding: 0.28rem 1.45rem 0.28rem 0.5rem;
+  font: inherit;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-tight);
+  text-align: left;
+  color: var(--foreground);
+  background-color: transparent;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    right 0.78rem center,
+    right 0.5rem center;
+  background-size: 0.28rem 0.28rem;
+  background-repeat: no-repeat;
+  border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+select:hover,
+.select-trigger:hover,
+.select-trigger[aria-expanded="true"] {
+  border-color: var(--primary);
+}
+select:disabled,
+.select-trigger:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+/* Open: the caret turns over, so the control says "the list is out" without
+   relying on the panel being in view — it may have flipped above the trigger. */
+.select-trigger[aria-expanded="true"] {
+  background-image:
+    linear-gradient(135deg, transparent 50%, currentColor 50%),
+    linear-gradient(45deg, currentColor 50%, transparent 50%);
+}
+
+/* The wrapper the runtime puts around the pair. It is `relative` so the real
+   `<select>` can be laid exactly over the trigger: NOT `display: none`, and not
+   `visibility: hidden` either — Chrome refuses to show a validation bubble on a
+   control it cannot focus and then blocks the submit with no message at all, so
+   a `required` select would silently stop working. Transparent and over the
+   trigger, the bubble still points at the right box. */
+.select-field {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.select-field > select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+.select-trigger {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+.select-value {
+  /* min-width: 0 is what lets a flex item shrink below its content — without it
+     `text-overflow: ellipsis` never fires and a long option label blows the
+     control out of its column instead of being clipped. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* An empty flex item has no line box, so a select whose current option has no
+   text (`<option value="">`) would render a control HALF THE HEIGHT of the one
+   beside it. A zero-width space gives it a line and no width, and screen readers
+   ignore it — unlike an `&nbsp;`, which they read out. */
+.select-value::after {
+  content: "\200b";
+}
+
+/* THE PANEL IS position: fixed AND APPENDED OUT OF THE FLOW, for two reasons
+   this estate hits constantly: selects live inside `.tablewrap` (which scrolls,
+   so it clips) and inside modal `<dialog>`s (a top layer, which nothing outside
+   can paint above). An absolutely-positioned panel would be cut off in the
+   first and hidden behind the second. runtime/select.js appends it to the
+   nearest open <dialog> when there is one and to <body> otherwise.
+   z-index 60 clears the scanline overlay (40), .dropdown-panel (50) and
+   footer.status (50). */
+.select-panel {
+  position: fixed;
+  z-index: 60;
+  margin: 0;
+  padding: 0.15rem 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-tight);
+  color: var(--popover-foreground);
+  background: var(--popover);
+  border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent);
+  box-shadow: 0 0 20px var(--glow-soft);
+}
+
+/* SELECTION CANNOT BE A COLOUR HERE, and that is measured, not felt. `--primary`
+   against `--popover-foreground` — the selected option's ink against its
+   neighbours' — is 1.65:1 on warm, 1.31 on green, 1.48 on mono, 1.27 on paper.
+   Two inks a reader cannot tell apart is not a marking. Same finding as the
+   rail's current row (0.19.0), same answer: POSITION AND AREA. The selected
+   option is the only one with a left edge marker, and it is bold; the colour is
+   the third signal, not the only one.
+
+   The keyboard's active option and the mouse's hover are the SAME state on
+   purpose — there is one pointer of attention, and showing two would ask the
+   reader which one Enter is going to take. */
+.select-option {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.28rem 0.9rem 0.28rem 0.55rem;
+  border-inline-start: 2px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.select-option:hover,
+.select-option[data-active="true"] {
+  background: var(--muted);
+}
+.select-option[aria-selected="true"] {
+  color: var(--primary);
+  font-weight: 700;
+  border-inline-start-color: var(--primary);
+}
+/* 65% of the ink, not 45%: below that warm lands at 2.94:1 and the option stops
+   being readable at all, and "unavailable" still has to be legible to be
+   understood as a choice that exists. 65% measures 3.75 at worst (warm). */
+.select-option[aria-disabled="true"] {
+  color: color-mix(in srgb, var(--popover-foreground) 65%, var(--popover));
+  cursor: default;
+}
+.select-option[aria-disabled="true"]:hover {
+  background: none;
+}
+/* <optgroup> label. Nothing in the estate uses one today; it is here because a
+   listbox that silently drops the grouping a consumer wrote is worse than one
+   that never supported it. */
+.select-group {
+  padding: 0.35rem 0.9rem 0.15rem;
+  color: var(--muted-foreground);
+  font-size: var(--fs-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   TABLE PAGER — twenty rows at a time, and the reader can say otherwise.
+
+   Built and placed by runtime/pagination.js; a page writes no part of this. It
+   INVENTS NOTHING: the two buttons are `.btn-terminal--ghost.btn-terminal--compact`
+   (the same pair every refresh and cancel in the estate wears) and the size picker
+   is a bare `<select>` that `initSelects()` enhances. So there is no new colour
+   here, no new control, and nothing to keep in step at the next release — only a
+   row that decides where those three things sit.
+
+   Ghost, not filled: a pager is not the primary action of any view it appears in,
+   and two filled buttons side by side compete. The status text is
+   `--muted-foreground` because it is a measurement of the table, not part of it —
+   4.84:1 at worst (warm on --card), so it clears AA while staying quiet.
+
+   The status is left and the controls are right (`margin-inline-start: auto` on the
+   picker pushes the pair over), which puts "where am I" at the start of the line and
+   "take me elsewhere" at the end. It wraps rather than scrolls: on a phone the three
+   parts stack, and a control that has gone off the side of a table is worse than a
+   control on a second line.
+   ───────────────────────────────────────────────────────────────────────── */
+.table-pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem 0.9rem;
+  margin-block-start: 0.6rem;
+  font-size: var(--fs-sm);
+}
+.table-pager-status {
+  margin: 0;
+  color: var(--muted-foreground);
+}
+.table-pager-size {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-inline-start: auto;
+  color: var(--muted-foreground);
+}
+.table-pager-nav {
+  display: inline-flex;
+  gap: 0.4rem;
+}
+
 /* ─────────────────────────────────────────────────────────────────────────
    ELI5 — an "explain like I'm 5" callout box (first-time-term explainers).
    ───────────────────────────────────────────────────────────────────────── */

package/src/print.css

@@ -122,6 +122,7 @@
   .skip-link,
   .dropdown,
   .dropdown-panel,
+  .select-panel,
   .anim-toggle,
   .cursor-block,
   .term-caret,

package/templates/documentation.html

@@ -98,13 +98,13 @@
          on docs.danieldeusing.de, NOT for a doc opened from disk over file://. -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.20.0/dist/danieldeusing-design.min.css"
-      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.20.0.min.css'"
+      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.22.0/dist/danieldeusing-design.min.css"
+      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.22.0.min.css'"
     />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.20.0/src/fonts.css"
-      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.20.0.fonts.css'"
+      href="https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.22.0/src/fonts.css"
+      onerror="this.onerror=null;this.href='/_design/danieldeusing-design-0.22.0.fonts.css'"
     />
 
     <style>
@@ -340,8 +340,8 @@ flowchart TD
     </footer>
 
     <script type="module">
-      import { applyStoredTheme, initThemeSwitcher, initDropdowns, initTerminal, initAnimToggle, initBurgerNav, initLsNav, initTableScroll, initDiagramZoom, initMinimap, initTooltips } from
-        "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.20.0/runtime/index.js";
+      import { applyStoredTheme, initThemeSwitcher, initDropdowns, initSelects, initTerminal, initAnimToggle, initBurgerNav, initLsNav, initTableScroll, initDiagramZoom, initMinimap, initTooltips } from
+        "https://cdn.jsdelivr.net/npm/@danieldeusing/design@0.22.0/runtime/index.js";
       applyStoredTheme();
       initThemeSwitcher();
       initDropdowns();
@@ -354,6 +354,11 @@ flowchart TD
       // Every table gets a .tablewrap parent, so a table wider than its column scrolls
       // itself instead of pushing the whole page sideways. Already-wrapped ones are skipped.
       initTableScroll();
+      // Every <select> gets the estate's dropdown instead of the OS one. Called
+      // unconditionally, beside initTableScroll() and for the same reason: both have no
+      // markup contract, so both are a no-op on a page that has none of their element —
+      // and neither can be forgotten on the day a page grows one.
+      initSelects();
 
       // Mermaid diagrams — themed from the design tokens, re-rendered on theme switch.
       // Delete this block (and the pre.mermaid CSS) if the page has no diagrams.

package/templates/page-chrome.html

@@ -48,7 +48,7 @@
      jumps. The runtime export exists for surfaces that genuinely cannot inline.
   2. At the end of <body>, import and call the runtime:
        import { initLsNav, initBurgerNav, initThemeSwitcher, initDropdowns,
-                initAnimToggle, initTableScroll }
+                initAnimToggle, initTableScroll, initSelects }
          from "@danieldeusing/design/runtime";
      initBurgerNav() is not optional here: the markup below ships a .nav-burger, and
      below the 48rem breakpoint that button is the ONLY way to reach the navigation.
@@ -59,6 +59,11 @@
   4. `initTableScroll()` wraps every table so a wide one scrolls itself rather than
      scrolling the whole page sideways. The markup contract is nothing — author a
      plain <table>. Call it again after rendering more rows.
+  5. `initSelects()` replaces the OS dropdown on every <select> with the estate's own —
+     the one component CSS alone can never fix, because the option list is drawn outside
+     the page. The markup contract is nothing here either: author a plain <select>, and
+     it stays the element that holds the value and fires input/change. Selects rendered
+     later are picked up on their own, so there is nothing to call again.
 -->
 
 <!-- ─────────────── <head> ─────────────── -->