@daydreamui/good-css 0.0.0-stage → 0.3.0

package/knowledge/recipes/popover-anchored-to-its-trigger.md

@@ -0,0 +1,57 @@
+---
+topic: "good-css-popover-anchored-to-its-trigger"
+title: "Popover anchored to its trigger"
+tier: "reference"
+tags:
+  - "good-css"
+  - "show"
+  - "hide"
+  - "popover"
+  - "anchored"
+  - "trigger"
+summary: "Use it for dropdown menus and other popovers opened by a click. It replaces a positioning library or a script that reads `getBoundingClientRect()`."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Popover anchored to its trigger
+
+Use it for dropdown menus and other popovers opened by a click. It replaces a positioning library or a script that reads `getBoundingClientRect()`.
+
+```html
+<button popovertarget="menu">Options</button>
+<div id="menu" popover>
+  <button>Rename</button>
+  <button>Delete</button>
+</div>
+```
+
+```css
+@supports (position-area: block-end) {
+  [popover] {
+    margin: 0;
+    margin-block-start: 0.5rem;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  }
+}
+```
+
+Why it works:
+
+- `popovertarget` makes the button the popover's anchor, so no anchor names are needed.
+- `position-area` places the popover on a 3×3 grid around the anchor. The fallbacks flip it when it would overflow the viewport.
+
+Rules:
+
+- Use `span-*` values, not `center`. Adam Argyle found that `center` stops the flips when the popover is wider than its grid cell.
+- `margin-block-start` is the gap between trigger and popover. The flip mirrors it, so the gap stays on the trigger's side.
+- A popover opened by a script has no anchor and lands in the top-left corner. Pass the trigger, as in `menu.showPopover({ source: button })`.
+- Write no fallback. Without support the `@supports` block is skipped and the popover opens centered in the viewport.
+
+Support: Chrome 133, Firefox 147, Safari 26.
+
+- Borrowed from: Una Kravets, [Introducing the CSS anchor positioning API](https://developer.chrome.com/blog/anchor-positioning-api), 2024-05-10 · Saron Yitbarek, [A gentle introduction to anchor positioning](https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning/), 2025-08-12 · Adam Argyle, [Why isn't my position-try-fallback working in small spaces?](https://nerdy.dev/why-isnt-my-position-try-fallback-working-in-small-spaces), 2024-10-12
+
+Source: [Good CSS](https://good-css.com/specimen/popover-anchored-to-its-trigger), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#popover-anchored-to-its-trigger).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/press-feedback.md

@@ -0,0 +1,43 @@
+---
+topic: "good-css-press-feedback"
+title: "Press feedback"
+tier: "reference"
+tags:
+  - "good-css"
+  - "interaction"
+  - "press"
+  - "feedback"
+summary: "Use it on every button and anything else that can be pressed."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Press feedback
+
+Use it on every button and anything else that can be pressed.
+
+```css
+.button:active { transform: scale(0.97); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .button { transition: transform 160ms var(--ease-out, ease-out); }
+}
+```
+
+Why it works:
+
+- A native button responds the instant a finger lands. `:active` does the same on every kind of input. Feedback that waits for `click` arrives when the finger leaves, and that reads as lag.
+- `scale()` shrinks the label and icon along with the button, so the whole control reads as pressed.
+
+Rules:
+
+- Keep the scale between 0.95 and 0.98.
+- [The reset](https://good-css.com/#the-reset) removes the browser's tap highlight. Without this entry a tap gives no feedback at all.
+- When feedback needs a script, listen for `pointerdown`, not `click`.
+
+Support: every browser.
+
+- Borrowed from: Emil Kowalski, [emil-design-eng skill](https://github.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md) and [mobile-native skill](https://github.com/emilkowalski/skills/blob/main/skills/mobile-native/SKILL.md)
+
+Source: [Good CSS](https://good-css.com/specimen/press-feedback), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#press-feedback).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/push-one-item-away-with-an-auto-margin.md

@@ -0,0 +1,70 @@
+---
+topic: "good-css-push-one-item-away-with-an-auto-margin"
+title: "Push one item away with an auto margin"
+tier: "reference"
+tags:
+  - "good-css"
+  - "spacing"
+  - "shape"
+  - "push"
+  - "one"
+  - "item"
+  - "away"
+  - "auto"
+  - "margin"
+summary: "Use it when one item in a flex row or column sits apart from the rest, such as the actions at the bottom of a card, the account link at the end of a toolbar, or a title centered in a full-height section between a header and a footer."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Push one item away with an auto margin
+
+Use it when one item in a flex row or column sits apart from the rest, such as the actions at the bottom of a card, the account link at the end of a toolbar, or a title centered in a full-height section between a header and a footer.
+
+```css
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.card > .actions { margin-block-start: auto; }
+
+.toolbar {
+  display: flex;
+  gap: 1rem;
+}
+
+.toolbar > .account { margin-inline-start: auto; }
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-block-size: 100svh;
+}
+
+.hero > h1 { margin-block: auto; }
+```
+
+Why it works:
+
+- In a flex container an auto margin takes all the free space on its side. One auto margin pushes the item, and everything after it, to the far end.
+- Two opposite auto margins split the free space, so the item sits centered between its neighbors. The header stays at the top and the footer at the bottom, and either can be missing.
+- `gap` still applies. It is the least space the pushed item keeps when there is no free space left.
+
+Rules:
+
+- The container needs free space. A card has it when a grid row stretches it to match a taller neighbor. A column that is the only child of a taller box needs `block-size: 100%`.
+- The centered item is centered in the space left over, not in the section. A footer with no header pulls the title up by half the footer's height.
+- Write `min-block-size`, never `block-size`. A fixed height cuts off long content.
+- This is a flex technique. In a grid column the spare height goes to the rows first and every child grows.
+- It replaces a spacer element, `space-between` on a container with more than two children, and a wrapper around the group that should stay together.
+
+Support: auto margins work wherever flexbox does. `margin-block` in Chrome 87, Firefox 66, Safari 14.1. `svh` in Chrome 108, Firefox 101, Safari 15.4.
+
+- Borrowed from: Heydon Pickering and Andy Bell, [The Stack](https://every-layout.dev/layouts/stack/), section "Splitting the stack", and [The Cover](https://every-layout.dev/layouts/cover/), Every Layout. The Cover gives every child a margin and removes it at both ends. `gap` does that in one declaration.
+- Docs: [MDN: Aligning items in a flex container](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items)
+
+Source: [Good CSS](https://good-css.com/specimen/push-one-item-away-with-an-auto-margin), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#push-one-item-away-with-an-auto-margin).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/reveal-with-clip-path.md

@@ -0,0 +1,61 @@
+---
+topic: "good-css-reveal-with-clip-path"
+title: "Reveal with clip-path"
+tier: "reference"
+tags:
+  - "good-css"
+  - "show"
+  - "hide"
+  - "reveal"
+  - "clip"
+  - "path"
+summary: "Use it for dropdowns, menus and panels that open over the page and whose height is not known. It unrolls the panel without animating `height`, and it works in every browser."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Reveal with `clip-path`
+
+Use it for dropdowns, menus and panels that open over the page and whose height is not known. It unrolls the panel without animating `height`, and it works in every browser.
+
+```css
+.menu {
+  clip-path: inset(0 -3rem 100%);
+  visibility: hidden;
+}
+
+.menu.is-open {
+  clip-path: inset(0 -3rem -3rem);
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .menu {
+    transition:
+      clip-path 0.25s var(--ease-out, ease-out),
+      visibility 0.25s;
+  }
+}
+```
+
+Why it works:
+
+- `inset()` clips from each edge, in the order top, sides, bottom. A bottom value of `100%` hides the whole box. The percentage refers to the element's own height, so nothing has to measure it.
+- A negative inset widens the clip beyond the box. That leaves room for the shadow at the sides and the bottom. The top stays at `0`, so no shadow shows where the menu meets its trigger.
+- Layout never changes. The panel has its full size the whole time and nothing around it moves.
+- The clipped part takes no pointer events, so a closed menu cannot be clicked.
+- `visibility` in the transition switches to `hidden` only when the close has finished. That takes the links out of the tab order.
+
+Rules:
+
+- The negative inset must be larger than the shadow's blur plus its offset.
+- Use it for panels that overlap the page. A closed panel in the normal flow leaves a gap, so an accordion uses [Accordion that animates its height](https://good-css.com/#accordion-that-animates-its-height).
+- Add `round` with a radius inside `inset()` only when the clip itself should have round corners. The element's own `border-radius` still applies.
+
+Support: every browser.
+
+- Borrowed from: Stripe, in the navigation menu on stripe.com. The `visibility` part was added for this list.
+- Docs: [MDN: inset()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/inset)
+
+Source: [Good CSS](https://good-css.com/specimen/reveal-with-clip-path), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#reveal-with-clip-path).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/safe-alignment.md

@@ -0,0 +1,41 @@
+---
+topic: "good-css-safe-alignment"
+title: "Safe alignment"
+tier: "reference"
+tags:
+  - "good-css"
+  - "layout"
+  - "safe"
+  - "alignment"
+summary: "Use it wherever content is centered or end-aligned in a container that can become too small, such as a tab row, a toolbar or a vertically centered modal."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Safe alignment
+
+Use it wherever content is centered or end-aligned in a container that can become too small, such as a tab row, a toolbar or a vertically centered modal.
+
+```css
+.tabs {
+  display: flex;
+  overflow-x: auto;
+  justify-content: safe center;
+}
+```
+
+Why it works:
+
+- Plain `center` pushes overflow off the start edge, where scrolling cannot reach it. `safe` falls back to `start` once the content overflows.
+
+Rules:
+
+- It works on every `align-*`, `justify-*` and `place-*` property.
+- Auto margins on the item center it the same way and are safe in every browser that has flexbox. [Push one item away with an auto margin](https://good-css.com/#push-one-item-away-with-an-auto-margin) has them.
+
+Support: Chrome 115, Firefox 63, Safari 17.6.
+
+- Borrowed from: Temani Afif, [Safe align your content](https://css-tip.com/safe-align/), 2025-06-10
+
+Source: [Good CSS](https://good-css.com/specimen/safe-alignment), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#safe-alignment).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/scroll-area-between-a-fixed-header-and-footer.md

@@ -0,0 +1,67 @@
+---
+topic: "good-css-scroll-area-between-a-fixed-header-and-footer"
+title: "Scroll area between a fixed header and footer"
+tier: "reference"
+tags:
+  - "good-css"
+  - "scroll"
+  - "viewport"
+  - "area"
+  - "between"
+  - "fixed"
+  - "header"
+  - "footer"
+summary: "Use it for the body of a modal, a chat list, a drawer or a sidebar. The panel grows with its content up to a limit, then the middle scrolls and the header and footer stay put."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Scroll area between a fixed header and footer
+
+Use it for the body of a modal, a chat list, a drawer or a sidebar. The panel grows with its content up to a limit, then the middle scrolls and the header and footer stay put.
+
+```css
+.panel {
+  display: flex;
+  flex-direction: column;
+  max-block-size: 80dvh;
+}
+
+.panel-body {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.panel-wrap {
+  flex: 1;
+  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
+}
+```
+
+Why it works:
+
+- A flex item will not shrink below its content. A scroll container is the exception, with a minimum of zero, so the body shrinks to the space left and scrolls.
+- An element between the panel and the body, such as a form, is not a scroll container. It keeps the height of its content and pushes the footer out of the panel. `min-block-size: 0` gives it the same zero minimum.
+- `auto` shows a scrollbar only when there is overflow.
+- `scrollbar-gutter` does not inherit. The reset's declaration on `:root` covers the page and no inner scroller.
+- `overscroll-behavior: contain` stops the scroll from passing to the page at the end of the list.
+
+Rules:
+
+- The panel needs a limit, either `max-block-size` or a height. With no limit nothing overflows.
+- `.panel-wrap` is only for an element that sits between the panel and the body. Leave it out when the body is a direct child.
+- A header or footer with a set height shrinks to its content when the body overflows. Give it `flex: none`, or size it with padding.
+- Keep `min-height: 0` out of the reset. On every element it lets each item of a fixed-height column shrink under its own text.
+- The gutter takes the scrollbar's width on a short list as well. That is the price of no shift.
+
+Support: `scrollbar-gutter` in Chrome 94, Firefox 97, Safari 18.2. `overscroll-behavior` in Chrome 63, Firefox 59, Safari 16. `dvh` in Chrome 108, Firefox 101, Safari 15.4.
+
+- Borrowed from: Ahmad Shadeed, [Defensive CSS](https://defensivecss.dev/), the tips [Scrollbars on demand](https://defensivecss.dev/tip/scrollbar/), [Scrollbar gutter](https://defensivecss.dev/tip/scrollbar-gutter/), [Scroll chaining](https://defensivecss.dev/tip/scroll-chain/) and [Minimum content size in flexbox](https://defensivecss.dev/tip/flexbox-min-content-size/). He gives the four declarations one by one, and the panel around them is added here.
+- Docs: [MDN: scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-gutter) · [MDN: overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overscroll-behavior) · [MDN: min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/min-height)
+
+Source: [Good CSS](https://good-css.com/specimen/scroll-area-between-a-fixed-header-and-footer), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#scroll-area-between-a-fixed-header-and-footer).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/section-spacing-that-depends-on-its-neighbors.md

@@ -0,0 +1,54 @@
+---
+topic: "good-css-section-spacing-that-depends-on-its-neighbors"
+title: "Section spacing that depends on its neighbors"
+tier: "reference"
+tags:
+  - "good-css"
+  - "spacing"
+  - "shape"
+  - "section"
+  - "depends"
+  - "neighbors"
+summary: "Use it on any page built from reorderable sections, above all in a CMS where an editor decides the order. When two particular sections meet, the spacing between them changes on its own."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Section spacing that depends on its neighbors
+
+Use it on any page built from reorderable sections, above all in a CMS where an editor decides the order. When two particular sections meet, the spacing between them changes on its own.
+
+```css
+section { padding-block: 6rem; }
+
+.logos:has(+ .features) { padding-block-end: 2rem; }
+.features:has(+ .cta) { padding-block-end: 0; }
+
+.hero + .logos { padding-block-start: 2rem; }
+.features + .faq { padding-block-start: 3rem; }
+
+.logos:where(.hero + *) { border-block-start: 1px solid; }
+```
+
+Why it works:
+
+- `A:has(+ B)` looks ahead. It matches A when B follows it, so A adjusts its own bottom edge.
+- `A + B` looks back. It matches B when A precedes it, so B adjusts its own top edge.
+- The rules describe pairs, not pages. Whatever order an editor picks, each pair that meets gets its spacing and every other section keeps its default.
+- `:where()` adds no specificity, so a default that depends on the neighbor stays easy to override.
+
+Rules:
+
+- A section owns its default padding. Write a pair rule only for a meeting that looks wrong with the defaults.
+- Never fix spacing with a spacer element, a per-page override, or a modifier class the template has to work out.
+- Put the rule on the section whose edge changes. Look ahead to change a bottom edge and look back to change a top edge.
+- Name sections by what they are, such as `.hero` and `.faq`, never by the page they sit on. The pair rules depend on those names.
+- Keep the list short. When many pairs share a reason, such as two sections with the same background, write one rule for the reason.
+- Where the authoring system has no sibling selectors, keep these few rules in a plain stylesheet.
+
+Support: `:has()` in Chrome 105, Firefox 121, Safari 15.4. The `+` combinator works everywhere.
+
+- Borrowed from: house pattern, used on production CMS sites · Kevin Powell, [The adjacent sibling combinator](https://www.kevinpowell.co/article/the-adjacent-sibling-combinator/) · Jen Simmons, [Using :has() as a CSS Parent Selector and much more](https://webkit.org/blog/13096/css-has-pseudo-class/), 2022-08-18
+
+Source: [Good CSS](https://good-css.com/specimen/section-spacing-that-depends-on-its-neighbors), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#section-spacing-that-depends-on-its-neighbors).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/shadow-change-that-fades-and-does-not-repaint.md

@@ -0,0 +1,80 @@
+---
+topic: "good-css-shadow-change-that-fades-and-does-not-repaint"
+title: "Shadow change that fades and does not repaint"
+tier: "reference"
+tags:
+  - "good-css"
+  - "motion"
+  - "shadow"
+  - "change"
+  - "fades"
+  - "does"
+  - "not"
+  - "repaint"
+summary: "Use it on cards that lift on hover, most of all in a grid of many cards or with a large blur."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Shadow change that fades and does not repaint
+
+Use it on cards that lift on hover, most of all in a grid of many cards or with a large blur.
+
+```css
+.card {
+  position: relative;
+  isolation: isolate;
+}
+
+.card::before,
+.card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.card::before {
+  box-shadow:
+    0 1px 4px oklch(0.3 0.05 250 / 0.1),
+    0 2px 10px oklch(0.3 0.05 250 / 0.08);
+}
+
+.card::after {
+  box-shadow:
+    0 4px 8px oklch(0.3 0.05 250 / 0.06),
+    0 12px 32px oklch(0.3 0.05 250 / 0.16);
+  opacity: 0;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .card:hover::before { opacity: 0; }
+  .card:hover::after { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .card::before,
+  .card::after { transition: opacity 0.3s var(--ease-out, ease-out); }
+}
+```
+
+Why it works:
+
+- A `box-shadow` transition repaints the shadow on every frame. Each shadow here is painted once, and the transition changes only `opacity`, which the compositor handles. In a Chrome trace of one card it took 12 paint events, against about 78 for a plain `box-shadow` transition.
+- The two shadows cross-fade, so the end state is exactly the raised shadow and not the sum of both.
+- `isolation: isolate` gives the card its own stacking context. `z-index: -1` then puts the pseudo-elements above the card's background and below its content.
+
+Rules:
+
+- The card needs its own background. The pseudo-elements have none.
+- It uses both pseudo-elements of the card. [Hit area larger than the visual](https://good-css.com/#hit-area-larger-than-the-visual) uses `::after` for the hit area and [Whole card clickable from one link](https://good-css.com/#whole-card-clickable-from-one-link) uses it for the link, so do not combine them on one element.
+- For a single small element, transition `box-shadow` directly. The saving is real but small per card.
+
+Support: every browser.
+
+- Borrowed from: Stripe, on its resource cards · Tobias Ahlin, [How to animate box-shadow](https://tobiasahlin.com/blog/how-to-animate-box-shadow/), for the older form of the idea
+
+Source: [Good CSS](https://good-css.com/specimen/shadow-change-that-fades-and-does-not-repaint), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#shadow-change-that-fades-and-does-not-repaint).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/sidebar-that-wraps-on-its-own.md

@@ -0,0 +1,56 @@
+---
+topic: "good-css-sidebar-that-wraps-on-its-own"
+title: "Sidebar that wraps on its own"
+tier: "reference"
+tags:
+  - "good-css"
+  - "layout"
+  - "sidebar"
+  - "wraps"
+  - "own"
+summary: "Use it for any pair where one side has an ideal width and the other takes the rest, such as a media object, an input with a button, or a page with an aside."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Sidebar that wraps on its own
+
+Use it for any pair where one side has an ideal width and the other takes the rest, such as a media object, an input with a button, or a page with an aside.
+
+```css
+.with-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.sidebar {
+  flex-basis: 20rem;
+  flex-grow: 1;
+}
+
+.main {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: 50%;
+}
+```
+
+Why it works:
+
+- The main side's huge `flex-grow` takes all the free space, which holds the sidebar at its basis.
+- Once the main side would get less than half the container it wraps below, and both sides grow to full width.
+
+Rules:
+
+- The wrap point is a share of the container, not a length. Change `min-inline-size` to move it.
+- Drop the sidebar's `flex-basis` for a sidebar sized by its content.
+- For a sticky sidebar, add `align-self: start` beside `position: sticky` and its inset. The two sides stretch to the same height, and a stretched sidebar has no room to stick.
+- A bare `img` or `video` as one of the sides stretches to the height of the row and distorts. Set `align-items: start` on the container.
+
+Support: Chrome 84, Firefox 63, Safari 14.1.
+
+- Borrowed from: Heydon Pickering and Andy Bell, [The Sidebar](https://every-layout.dev/layouts/sidebar/), Every Layout
+
+Source: [Good CSS](https://good-css.com/specimen/sidebar-that-wraps-on-its-own), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#sidebar-that-wraps-on-its-own).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/space-between-siblings-set-by-the-parent.md

@@ -0,0 +1,59 @@
+---
+topic: "good-css-space-between-siblings-set-by-the-parent"
+title: "Space between siblings set by the parent"
+tier: "reference"
+tags:
+  - "good-css"
+  - "spacing"
+  - "shape"
+  - "space"
+  - "between"
+  - "siblings"
+  - "set"
+  - "parent"
+summary: "Use it wherever elements sit one above another, such as form fields, the parts of a card or the blocks of an article. The parent sets one space between its children, and no child carries a block margin of its own."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Space between siblings set by the parent
+
+Use it wherever elements sit one above another, such as form fields, the parts of a card or the blocks of an article. The parent sets one space between its children, and no child carries a block margin of its own.
+
+```css
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.prose > * { margin-block: 0; }
+.prose > * + * { margin-block-start: var(--flow-space, 1em); }
+
+.prose > :is(h2, h3) { --flow-space: 2em; }
+.prose > :is(h2, h3) + * { --flow-space: 0.5em; }
+```
+
+Why it works:
+
+- A margin describes the relation between two neighbors, so the element itself is the wrong place for it. A paragraph with `margin-block-end` leaves that margin behind when it is the last child of a padded box.
+- `gap` puts space between flex items only. Nothing is left above the first child or below the last.
+- `* + *` matches every child that has a sibling before it, so the first child gets no margin. Heydon Pickering named the selector the lobotomized owl.
+- The fallback in `var(--flow-space, 1em)` is in `em`, so the space above each element follows that element's font size.
+- A custom property on a child changes the space above that child alone. A heading asks for more room above itself, and whatever follows a heading asks for less.
+
+Rules:
+
+- Use the flex form in a component whose children you know. Use the margin form for content you do not control, such as CMS or Markdown output, because flex turns every child into a flex item.
+- A flex column stretches its children, so a button or link that is a direct child becomes full width. Set `align-self: start` on it.
+- In the margin form, zero the children's block margins first. Without that line the browser's default margins stay above the first child and below the last.
+- Keep the `>`. Without it the rule reaches every nested element, list items included.
+- The margin form counts a hidden child, so a hidden first child leaves a space at the top. `gap` ignores hidden children.
+
+Support: `gap` in flex layout in Chrome 84, Firefox 63, Safari 14.1. `:is()` in Chrome 88, Firefox 78, Safari 14.
+
+- Borrowed from: Heydon Pickering and Andy Bell, [The Stack](https://every-layout.dev/layouts/stack/), Every Layout · Heydon Pickering, [Axiomatic CSS and Lobotomized Owls](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/), 2014-10-21 · Andy Bell, [My favourite 3 lines of CSS](https://piccalil.li/blog/my-favourite-3-lines-of-css/), 2023-02-06. Both authors keep the margin form everywhere. This version uses `gap` in components.
+- Docs: [MDN: gap](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/gap) · [MDN: next-sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Next-sibling_combinator)
+
+Source: [Good CSS](https://good-css.com/specimen/space-between-siblings-set-by-the-parent), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#space-between-siblings-set-by-the-parent).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/stack-layers-with-grid.md

@@ -0,0 +1,43 @@
+---
+topic: "good-css-stack-layers-with-grid"
+title: "Stack layers with grid"
+tier: "reference"
+tags:
+  - "good-css"
+  - "layout"
+  - "stack"
+  - "layers"
+  - "grid"
+summary: "Use it whenever things sit on top of each other, such as text over an image, a badge on a card, or two icons that swap. It replaces `position: absolute` with its offsets, sizes and transforms."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Stack layers with grid
+
+Use it whenever things sit on top of each other, such as text over an image, a badge on a card, or two icons that swap. It replaces `position: absolute` with its offsets, sizes and transforms.
+
+```css
+.stack { display: grid; }
+.stack > * { grid-area: 1 / 1; }
+
+.stack > .title { place-self: center; }
+.stack > .badge { place-self: start end; }
+```
+
+Why it works:
+
+- Every child goes into the same grid cell, so they overlap.
+- The layers stay in flow. The container takes the size of its largest layer, where an absolutely positioned child adds nothing to it.
+- `place-self` aligns one layer inside the cell. Without it the layer stretches to fill.
+
+Rules:
+
+- A layer later in the DOM paints on top. Use `z-index` only to change that order.
+- Keep `position: absolute` for a layer that must not affect the container's size.
+
+- Borrowed from: Ana Tudor, @anatudor on X, 2025-03-29
+- Docs: [MDN: grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-area) · [MDN: place-self](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/place-self)
+
+Source: [Good CSS](https://good-css.com/specimen/stack-layers-with-grid), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#stack-layers-with-grid).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.