@greendrake/scss-kit 0.7.0 → 0.8.0

package/README.md

@@ -136,6 +136,7 @@ The `url()` literals must be written in the font package's own `.scss` file: Vit
 - `control-clear` — the × clear button rendered inside a select-shaped control, before the chevron: an inline-flex box held at the WCAG 2.2 target-size minimum (24×24, SC 2.5.8) with a negative block margin (computed from `var(--line-height-tight, 18px)`) so it grows into the control's padding instead of its height; glyph size `var(--control-clear-font-size, 18px)`; opacity 0.5, 1 on hover.
 - `control-chevron($point: down)` — a dropdown/drill chevron built from two borders (no icon dependency): 7×7px, `currentColor`, opacity 0.6, `transform` transition; `$point: right` rotates it to point right.
 - `img-spinner($size: 24px)` — a centred spinner `::before` on an `img` container. Requires global `spinner` keyframes and the `--spinner-color`/`--spinner-side-color` custom properties, all the app's to provide.
+- `column-filled-by-last` — a flex column whose last child takes the room the others leave (`flex: 1`), shrinking below its content to scroll in itself (`min-height: 0`); the column has `min-height: 0` too, so that it nests as the last child of another.
 - `hover-grow` — scales the element 1.2× under the pointer (0.3 s `transform` transition) and raises it to `z-index: 1` while grown, dropping back only once the shrink has finished; the host must take part in stacking (positioned, or a flex/grid item).
 
 ```scss

package/_mixins.scss

@@ -104,6 +104,19 @@
     }
 }
 
+// A flex column whose last child takes the room the others leave, shrinking below its
+// content to scroll in itself: a pane under its header, say. The column shrinks as
+// well, so that it nests as the last child of another.
+@mixin column-filled-by-last {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    > :last-child {
+        flex: 1;
+        min-height: 0;
+    }
+}
+
 // Grow-on-hover: an icon-sized mark or icon button swells slightly under the
 // pointer. The transition sits on the base state, not inside :hover — declared
 // inside the hovered state it would animate the way in and snap the way out.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/scss-kit",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "description": "Framework-free SCSS primitives: breakpoints (single-sourced with TS via codegen), z-layer map, icon-mask registry, @font-face generator, misc mixins",
     "license": "MIT",
     "author": "Eugene Greendrake <eugene@greendrake.nz>",