@stnd/styles 0.10.15 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stnd/styles
 
+## 0.11.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
 ## 0.10.15
 
 ### Patch Changes

package/README.md

@@ -147,7 +147,7 @@ File-by-file pass, adding WHY-comments and checking for cascade/scope bugs. Fixe
 - **`body`'s own dead `--max-width` fallback** (`_standard-07-base.scss`)
   — `max-width: var(--body-max-width, var(--max-width))`, left over from   *my own* `--max-width` removal earlier this session (missed this one   file at the time). `--body-max-width` always has a value, so the   fallback never fired — harmless, but stale. Now matches `.prose`'s   equivalent rule (`var(--body-max-width)`, no fallback).
 - **Garbled leftover comment** (`_standard-07-base.scss`) — a `[id]`
-  block's comment repeated the same incomplete CSS fragment   (`background: var(--color-surface-highest);`) four times, pure noise.   Replaced with an actual explanation of what `scroll-margin-top` there   is for (keeps anchor-linked headings clear of the sticky header).
+  block's comment repeated the same incomplete CSS fragment   (`background: var(--color-surface-light-2);`) four times, pure noise.   Replaced with an actual explanation of what `scroll-margin-top` there   is for (keeps anchor-linked headings clear of the sticky header).
 - **`.negate-body-padding*` docblock described a nonexistent API**
   (`_standard-07-base.scss`) — those three class names, and the usage   example, don't match the real implementation (`.no-body-margin`, and   far more restrictive: only `<footer>`/`<header>` that are direct   children of `<body>` and first/last-of-type). Neither name is used   anywhere in `apps/` today, so nothing broke in practice, but the docs   would have misled whoever reached for it next. Rewrote to match reality.
 - **Duplicate identical `font-family` on `select`** (`_standard-11-forms.scss`)
@@ -162,7 +162,7 @@ Every flagged item below got fixed except three, which are real judgment calls a
 - `_standard-02-color.scss`: dark-mode purple/pink/brown now reassign to their `--color-dark-*` counterparts (in both the `prefers-color-scheme: dark` block and the `[data-color-mode="dark"]` blocks); added the missing Stage 8 non-OKLCH fallback hex for all three; deleted the dead `0 solid transparent` `--border` line (kept `none` — see deferred items, the *value* wasn't touched); collapsed `--shadow`'s duplicated `--shadow-ambient` layer to one.
 - `_standard-03-typography.scss`: `grid-line-height` mixin now reads `var(--font-header-line-height, ...)` instead of ignoring the token outright — headings actually respond to the frontmatter token now; deleted the dead hardcoded second `.font-interface` block.
 - `_standard-04-grid.scss`: deleted the dead `--grid-gap` copy of `.grid.compact`/`.relaxed`; replaced every `[class^="grid-"]`/`[class|="grid"]` attribute selector with an explicit, order-independent `$grid-selectors` list (confirmed fix against real markup: `apps/stnd.build/modules/core/routes/index.astro`'s `class="cover grid-12"`).
-- `_standard-06-prose.scss`: `.mycelial-graft` now uses real tokens (`--color-muted`, `--color-accent`, `--color-surface-high`); deleted the stale `h1:first-child` comment.
+- `_standard-06-prose.scss`: `.mycelial-graft` now uses real tokens (`--color-muted`, `--color-accent`, `--color-surface-light-1`); deleted the stale `h1:first-child` comment.
 - `_standard-07-base.scss`: mobile header padding-negation now sets `margin-block-start` (matching the desktop rule and the footer's symmetric block), not `margin-block-end`.
 - `_standard-08-media.scss`: deleted the dead `--gap-body` padding line on `.image-zoom-overlay`; hardcoded `768px` → `#{$small}`.
 - `_standard-09-lists.scss` / `_standard-50-utilities.scss`: removed all 5 dead `--base-gap` lines; `.display-flex` → `.flex` (the real class).

package/_standard-01-token.scss

@@ -148,7 +148,10 @@
   --filter-glass: blur(20px);
   --stroke-width: max(1px, 0.06rem);
   --stroke-width-lg: calc(var(--stroke-width) * 2);
-  --radius: var(--trim);
+  /* `--corner` is the documented hook (see Theme Authoring Hooks) — an app or
+     theme sets it and this follows. It was documented and never read, so
+     `--corner: 6px` in app.scss left --radius at --trim (~1.3px). */
+  --radius: var(--corner, var(--trim));
   --radius-sm: 4px;
 
   /**

package/_standard-11-forms.scss

@@ -14,9 +14,9 @@
  * @property input, textarea Zero-class text controls with interface typography, raised shadow, and accent focus rings.
  * @property select Custom styled dropdown with double-chevron indicator and rhythm-aligned padding.
  * @property input[role=switch] Accessible toggle switch with animated sliding thumb.
- * @property --switch-height Primary height sizing knob for toggle switch controls.
+ * @property --switch-height Primary height sizing knob for toggle switch controls. Set it anywhere — on the switch, a class, or a container — and width and thumb follow.
  * @property --switch-width Width sizing token for toggle switches (`calc(var(--switch-height) * 2)`).
- * @property --switch-padding Inset padding controlling the toggle switch thumb gap (`2px`).
+ * @property --switch-padding Inset padding controlling the toggle switch thumb gap (`0px`).
  * @property --slider-value Percentage value driving custom filled range slider tracks.
  *
  * @example html - A switch (role=switch on a checkbox)
@@ -117,7 +117,10 @@ select {
   text-shadow: none !important;
   text-box-trim: trim;
 
-  padding: 0 var(--trim);
+  /* Room on the right for the chevron drawn below: without it a long value
+     ran under the arrow. */
+  padding: 0 calc(1em + var(--space-d4)) 0 var(--trim);
+  text-overflow: ellipsis;
 
   appearance: none;
   /* Match Combobox double-chevron */
@@ -134,6 +137,28 @@ select {
   }
 }
 
+/* A colour input is a swatch, not a text field: fill the control with the
+   colour instead of inheriting the text-input padding around a tiny chip. */
+input[type="color"] {
+  height: var(--space-2);
+  padding: var(--space-d8);
+  cursor: pointer;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: calc(var(--radius-sm) - var(--stroke-width));
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+}
+
 textarea {
   resize: vertical;
   min-height: var(--space-2);
@@ -250,24 +275,33 @@ input[type="radio"] {
 }
 
 input[type="checkbox"][role="switch"] {
-  --switch-height: calc(var(--space) - var(--space-d3));
-  --switch-width: calc(var(--switch-height) * 2);
+  /* The public knobs (--switch-height, --switch-width, --switch-padding) are
+     only READ here, never declared on the element. Declaring them on the
+     input itself made them impossible to set from outside: a value on a
+     container is shadowed by the element's own declaration, and a value on
+     the input loses to this rule's specificity — it only ever worked for an
+     inline style, or for a consumer that happened to out-rank this selector
+     by source order. The resolved values live in private --_switch-* props,
+     computed from whatever the cascade supplies, so a knob set anywhere
+     (ancestor, class, inline) takes effect and the others follow it. */
+  --_switch-height: var(--switch-height, calc(var(--space) - var(--space-d3)));
+  --_switch-width: var(--switch-width, calc(var(--_switch-height) * 2));
   /* Was a fixed 2px — correct-looking at the default ~16px-tall switch
      (an 8px thumb inset by 2px on each side), but any consumer overriding
-     --switch-height alone (a smaller, denser control panel, say) kept that
-     same fixed inset and ended up with a visibly undersized thumb, since
-     the padding never scaled down with it. Went to 0 (Francis, iterating
-     live: the thumb should fill the track, full height, no ring of bare
-     track color around it) — the thumb's own diameter now equals the
-     track's height exactly. */
-  --switch-padding: 0px;
+     the height alone (a smaller, denser control panel, say) kept that same
+     fixed inset and ended up with a visibly undersized thumb, since the
+     padding never scaled down with it. Went to 0 (Francis, iterating live:
+     the thumb should fill the track, full height, no ring of bare track
+     color around it) — the thumb's own diameter now equals the track's
+     height exactly. */
+  --_switch-padding: var(--switch-padding, 0px);
 
   appearance: none;
   box-sizing: border-box; /* Reset content-box from base checkbox rule */
   position: relative;
   top: 0; /* Reset top: 50% from base checkbox rule */
-  width: var(--switch-width);
-  height: var(--switch-height);
+  width: var(--_switch-width);
+  height: var(--_switch-height);
   border-radius: 9999px;
   border: none;
   cursor: pointer;
@@ -304,10 +338,10 @@ input[type="checkbox"][role="switch"] {
   &::before {
     content: "";
     position: absolute;
-    top: var(--switch-padding);
-    left: var(--switch-padding);
-    width: calc(var(--switch-height) - var(--switch-padding) * 2);
-    height: calc(var(--switch-height) - var(--switch-padding) * 2);
+    top: var(--_switch-padding);
+    left: var(--_switch-padding);
+    width: calc(var(--_switch-height) - var(--_switch-padding) * 2);
+    height: calc(var(--_switch-height) - var(--_switch-padding) * 2);
     border-radius: 50%;
     background: var(--color-surface-light-2);
     /* Not --shadow-raised here on purpose — its ambient component
@@ -332,7 +366,7 @@ input[type="checkbox"][role="switch"] {
     background: var(--color-accent);
     &::before {
       background: var(--color-surface-light-2);
-      transform: translateX(calc(var(--switch-width) - var(--switch-height)));
+      transform: translateX(calc(var(--_switch-width) - var(--_switch-height)));
     }
   }
 
@@ -345,6 +379,37 @@ input[type="checkbox"][role="switch"] {
   }
 }
 
+/* Progress: a filled track, the way a range is, for work that has a known
+   length. Indeterminate (no value) shows the empty track. */
+progress {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: var(--space-d4);
+  border: none;
+  border-radius: 9999px;
+  overflow: hidden;
+  background: var(--color-surface-dark-2);
+  color: var(--color-accent);
+
+  &::-webkit-progress-bar {
+    background: var(--color-surface-dark-2);
+    border-radius: inherit;
+  }
+
+  &::-webkit-progress-value {
+    background: var(--color-accent);
+    border-radius: inherit;
+    transition: width var(--duration-standard) var(--ease-soft);
+  }
+
+  &::-moz-progress-bar {
+    background: var(--color-accent);
+    border-radius: inherit;
+  }
+}
+
 input[type="range"] {
   -webkit-appearance: none;
   /* Webkit/Blink */
@@ -371,10 +436,10 @@ input[type="range"] {
      actually renders. */
   background: linear-gradient(
     to right,
-    var(--color-background, var(--color-accent)) 0%,
-    var(--color-background, var(--color-accent)) var(--slider-value, 50%),
-    var(--color-red, var(--color-surface)) var(--slider-value, 50%),
-    var(--color-red, var(--color-surface)) 100%
+    var(--color-accent) 0%,
+    var(--color-accent) var(--slider-value, 50%),
+    var(--color-surface-dark-2) var(--slider-value, 50%),
+    var(--color-surface-dark-2) 100%
   );
 }
 

package/_standard-13-components.scss

@@ -241,6 +241,53 @@ a.btn:disabled {
   cursor: not-allowed !important;
   pointer-events: none !important;
 }
+/* A toggle button that is currently ON (aria-pressed): the accent, the same
+   cue whichever variant it wears. Zero-class so any variant or consumer rule
+   still wins over it. */
+:where(button):is([aria-pressed="true"], [aria-current]:not([aria-current="false"])) {
+  color: var(--color-accent);
+}
+
+/* Segmented button group — the either/or control (Frames | Editorial, a row
+   of tabs). Documented in the header and referenced by the form spacing rules
+   for a long time, but never actually defined. The pressed one is marked the
+   way assistive tech reads it — aria-pressed / aria-selected / aria-checked /
+   aria-current — so the look can never disagree with the state. */
+.btn-group {
+  display: inline-flex;
+  gap: 1px;
+  padding: 1px;
+  border-radius: var(--radius);
+  background: var(--color-surface-dark-1);
+  box-shadow: var(--shadow-inset);
+
+  > :where(button, a.btn) {
+    flex: 1 1 0;
+    min-width: 0;
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--color-muted);
+    border-radius: calc(var(--radius) - 1px);
+
+    &:hover {
+      background-color: var(--color-surface);
+      color: var(--color-foreground);
+      box-shadow: none;
+    }
+
+    &:is(
+        [aria-pressed="true"],
+        [aria-selected="true"],
+        [aria-checked="true"],
+        [aria-current]:not([aria-current="false"])
+      ) {
+      background-color: var(--color-surface-light-2);
+      color: var(--color-foreground);
+      box-shadow: var(--shadow);
+    }
+  }
+}
+
 /*
 :is(:where(button), .btn) svg {
   height: 100%;
@@ -1056,7 +1103,7 @@ a.skip-link {
 
 .std-menu-content {
   padding: var(--space-d4);
-  background: var(--color-surface-high);
+  background: var(--color-surface-light-1);
   border: none;
   border-radius: var(--radius);
   box-shadow: var(--shadow-raised), var(--shadow-glow);
@@ -1112,12 +1159,12 @@ a.skip-link {
   text-decoration: none;
 
   &:hover:not(.disabled) {
-    background: var(--color-surface-highest);
+    background: var(--color-surface-light-2);
     box-shadow: var(--shadow);
   }
 
   &:active:not(.disabled) {
-    background: var(--color-surface-low);
+    background: var(--color-surface-dark-1);
     box-shadow: var(--shadow-inset);
   }
 

package/app.scss

@@ -18,6 +18,18 @@
  * @property --window-inset Gap between the window edge and a floating pane.
  * @property --pane-radius Corner of a pane floating inside the window.
  * @property --titlebar-height Band centred on the OS traffic lights.
+ *
+ * Everything an application window needs that a document does not — this
+ * sheet is where it lives, so nothing has to be hunted for or rebuilt in an app:
+ *
+ * @property .pane A surface floating inside the window: inset, concentric corner, raised.
+ * @property .list, .item A column of rows. `.item` hovers, and reads aria-current / aria-selected as "this one".
+ * @property .hud A floating translucent chip or panel over the content (a toast, a status readout).
+ * @property .divider A hairline between groups.
+ * @property .window-controls, .window-close, .window-minimize, .window-zoom The traffic lights.
+ * @property .is-dragging, .is-drop-target The two states of a drag and drop.
+ * @property [data-reveal-host], [data-reveal] A control that only shows while its host is hovered or focused.
+ * @property .muted, .fine Secondary text and small print.
  */
 :root {
   /* ---- Type ------------------------------------------------------------
@@ -83,3 +95,227 @@
      window top (same capture as --window-radius), band = twice that. */
   --titlebar-height: 41.5px;
 }
+
+/* ---- Images -------------------------------------------------------------
+   standard.scss zooms an image on press (a lightbox fallback that needs no
+   script) — right for a document, wrong for an app, where an image is a
+   workflow item you select and drag. Switch that behaviour off here so an
+   app never has to fight it with !important of its own. */
+img,
+img:not([data-no-zoom]) {
+  cursor: inherit !important;
+}
+
+html img:active,
+html:not(.js-image-zoom-enabled) img:active {
+  position: static !important;
+  z-index: auto !important;
+  transform: none !important;
+  max-height: none !important;
+  max-width: none !important;
+  margin: 0 !important;
+  top: auto !important;
+  left: auto !important;
+  cursor: inherit !important;
+}
+
+html:has(img:active)::before,
+html:not(.js-image-zoom-enabled):has(img:active)::before {
+  display: none !important;
+  content: none !important;
+}
+
+/* ---- Panes --------------------------------------------------------------
+   A sidebar, an inspector, a tray: a surface that floats inside the window,
+   --window-inset from its edge, corner concentric with the window's. Every
+   one of them used to spell these five lines out for itself. Layout (width,
+   flex, padding) stays with the pane; this is only what makes it a pane. */
+.pane {
+  margin: var(--window-inset);
+  background: var(--color-surface-light-1);
+  border-radius: var(--pane-radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+/* ---- States ---------------------------------------------------------------
+   The "current" state of anything is said with ARIA, never a class of the
+   app's own: aria-current (this row, this page), aria-selected (this tab,
+   this option), aria-pressed (this toggle), aria-expanded, aria-disabled.
+   The kit below styles those, so the look can never disagree with what a
+   screen reader is told. Drag and drop has no ARIA of its own; it has two
+   classes. */
+.is-dragging {
+  opacity: 0.4;
+}
+
+/* A region switched off by the state of something else (a row of AI options
+   while AI is off). Native controls inside keep their own disabled styling. */
+[aria-disabled="true"]:not(.item, button, a, input, select, textarea) {
+  opacity: 0.5;
+}
+
+.is-drop-target {
+  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
+  box-shadow: inset 0 0 0 var(--stroke-width) var(--color-accent);
+}
+
+/* Shown only while the host is hovered or holds focus — the quiet controls
+   of a row or a photo (remove, grip, reorder) that would clutter it at rest. */
+[data-reveal] {
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-soft);
+}
+
+[data-reveal-host]:is(:hover, :focus-within) [data-reveal],
+[data-reveal]:is(:hover, :focus-visible) {
+  opacity: 1;
+}
+
+/* ---- Lists ----------------------------------------------------------------
+   A column of rows: folders, notes, settings, a queue. */
+.list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.list.divided > :not(:last-child) {
+  border-bottom: var(--border);
+}
+
+/* A card whose content is rows: no padding of its own, rows run edge to edge. */
+.card.flush {
+  padding: 0;
+  overflow: hidden;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--space-d2);
+  min-width: 0;
+  padding: var(--space-d5) var(--space-d2);
+  border-radius: var(--radius-sm);
+  /* Works on a div or a button alike: a row is not a raised control. */
+  background: transparent;
+  box-shadow: none;
+  text-align: left;
+  color: var(--color-muted);
+  cursor: pointer;
+  transition:
+    background var(--duration-instant) var(--ease-soft),
+    color var(--duration-instant) var(--ease-soft);
+
+  &:hover {
+    background: var(--color-surface);
+    color: var(--color-foreground);
+  }
+
+  &:is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
+    background: var(--color-surface-dark-1);
+    color: var(--color-foreground);
+    font-weight: var(--font-weight-bold);
+  }
+
+  &:is(:disabled, [aria-disabled="true"]) {
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+/* ---- HUD ------------------------------------------------------------------
+   A translucent chip over the content: a toast, an export readout, a
+   legend. Not a pane — it carries no chrome of the window, it just floats. */
+.hud {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-d2);
+  padding: var(--space-d4) var(--space-d2);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-surface-light-1) 88%, transparent);
+  backdrop-filter: var(--filter-blur);
+  box-shadow: var(--shadow-raised);
+  color: var(--color-foreground);
+  font-size: var(--scale-d2);
+  white-space: nowrap;
+
+  &.panel {
+    display: flex;
+    border-radius: var(--radius-lg);
+    white-space: normal;
+  }
+}
+
+.divider {
+  flex-shrink: 0;
+  height: var(--stroke-width);
+  margin: 0;
+  border: none;
+  background: var(--color-border);
+}
+
+.muted {
+  color: var(--color-muted);
+}
+
+.fine {
+  font-size: var(--scale-d2);
+  color: var(--color-muted);
+}
+
+/* ---- Window controls ------------------------------------------------------
+   The traffic lights, drawn by the page because the native ones are hidden
+   (an overlay title bar). At rest they are three quiet dots; over the group
+   they take the system colours and their glyphs. The three colours are
+   macOS's own, not the theme's. */
+.window-controls {
+  display: flex;
+  gap: var(--space-d2);
+
+  > button {
+    all: unset;
+    box-sizing: border-box;
+    position: relative;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    cursor: default;
+    background: var(--color-foreground);
+    opacity: 0.35;
+    transition:
+      opacity var(--duration-instant) var(--ease-soft),
+      background-color var(--duration-instant) var(--ease-soft);
+  }
+
+  &:has(> button:hover) > button {
+    opacity: 1;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      color: rgb(0 0 0 / 55%);
+      font-family: sans-serif;
+      font-size: 8px;
+      font-weight: 700;
+      line-height: 1;
+    }
+  }
+
+  &:has(> button:hover) > .window-close {
+    background: #ff5f57;
+    &::after { content: "×"; }
+  }
+  &:has(> button:hover) > .window-minimize {
+    background: #febc2e;
+    &::after { content: "−"; }
+  }
+  &:has(> button:hover) > .window-zoom {
+    background: #28c840;
+    &::after { content: "+"; }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/styles",
-  "version": "0.10.15",
+  "version": "0.11.0",
   "type": "module",
   "author": "Francis Fontaine",
   "license": "MIT",