actual-css 0.4.0 → 0.4.2

package/src/css/layout/container-query.css

@@ -1,7 +1,9 @@
-/* Local container-query opt-in: establishes an inline-size query context for
+/* Convenience helper: establishes a query container named actual-grid for
    descendants. Use it for a component that changes representation according
-   to its allocated inline size, and to opt .grid-N into balanced subdivision
-   (see grid.css). Layout primitives are responsive without it — this adds
+   to its allocated inline size, and to give .grid-N the named context it needs
+   for balanced subdivision (see grid.css). The name matters: grids only respond
+   to an explicitly actual-grid-named container, never to an incidental
+   query container. Layout primitives are responsive without it; this adds
    precision, it is never a prerequisite.
 
    The element takes inline-size containment, so put it on a normal
@@ -9,5 +11,5 @@
    float, an inline-block): its contents would stop contributing to its own
    inline size and it would collapse. */
 .container-query {
-  container-type: inline-size;
+  container: actual-grid / inline-size;
 }

package/src/css/layout/grid.css

@@ -24,7 +24,8 @@
 /* Recipe:
    - collection whose item width is the contract -> .grid, tune --grid-min
    - collection whose column density is the contract -> .grid-2/3/4/6
-   - balanced subdivision of that density -> wrap it in .container-query
+   - balanced subdivision of that density -> place it inside any size query
+     container (.container-query is the convenience helper for that context)
    - peer regions that switch as a group -> .switcher
    - content + aside -> .sidebar-layout
    - exact custom track templates -> --grid-columns with an explicit collapse
@@ -85,7 +86,13 @@
   min-inline-size: 0;
 }
 
-/* Balanced subdivision, opted into by an ancestor query container.
+/* Balanced subdivision, activated by an ancestor container named actual-grid.
+ * A .grid-N inside such a container enters only divisor states of N. The name
+ * is deliberate: a grid must not key off the nearest anonymous query container,
+ * or a region that sets container-type: inline-size for an unrelated reason
+ * would silently change the grid. The author opts the grid in by naming the
+ * context — .container-query is the official helper, or declare
+ * container: actual-grid / inline-size on your own region.
  *
  *   .grid-2   2 -> 1
  *   .grid-3   3 -> 1
@@ -102,6 +109,11 @@
  * inline contribution and collapses it inside .cluster, .topbar, floats, and
  * any shrink-to-fit box. See docs/design-notes/grid.md.
  *
+ * Without an actual-grid ancestor none of these @container rules resolve, so
+ * the auto-fill baseline above stays. The min-width: 0 rule is the lowest
+ * step: it pins the grid to one column inside a container before any larger
+ * threshold fires (a bare grid would otherwise show a 2 + 1 orphan at 28-48rem).
+ *
  * Three shared thresholds, not one calibrated per preset: 28rem opens the
  * first horizontal density, 48rem opens three columns, 64rem opens the dense
  * 4 and 6. N already carries the author's statement about item size, so
@@ -113,28 +125,30 @@
  * Ascending min-width only: the last matching step wins by cascade order.
  */
 @supports (container-type: inline-size) {
-  .container-query :where(.grid-2, .grid-3, .grid-4, .grid-6) {
-    grid-template-columns: 1fr;
+  @container actual-grid (min-width: 0px) {
+    :where(.grid-2, .grid-3, .grid-4, .grid-6) {
+      grid-template-columns: 1fr;
+    }
   }
 
-  @container (min-width: 28rem) {
-    .container-query :where(.grid-2, .grid-4, .grid-6) {
+  @container actual-grid (min-width: 28rem) {
+    :where(.grid-2, .grid-4, .grid-6) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 48rem) {
-    .container-query :where(.grid-3, .grid-6) {
+  @container actual-grid (min-width: 48rem) {
+    :where(.grid-3, .grid-6) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 64rem) {
-    .container-query :where(.grid-4) {
+  @container actual-grid (min-width: 64rem) {
+    :where(.grid-4) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .container-query :where(.grid-6) {
+    :where(.grid-6) {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
   }

package/src/css/layout/index.css

@@ -8,12 +8,13 @@
  * .center         centered content column
  * .frame          fixed-ratio media frame
  * .app-shell      full-height application shell
+ * .app-layout     topbar + scrolling main + bottom/side app navigation
  * .media          fixed media + flexible content
  * .switcher       peer regions: all horizontal or all stacked
  * .sidebar-layout main content + secondary aside
  * .grid           responsive collection; item width is the contract
- * .grid-N         structural density of N; wrap in .container-query for
- *                 balanced subdivision (in grid.css)
+ *  .grid-N         structural density of N; balanced inside a container named
+ *                  actual-grid (in grid.css)
  * .column-layout  explicit 12-column region composition; the author owns
  *                 narrow-container recomposition
  * .scroller       theme-aware scrollbar density and colour
@@ -30,6 +31,7 @@
 @import "./center.css";
 @import "./frame.css";
 @import "./app-shell.css";
+@import "./app-layout.css";
 @import "./media.css";
 @import "./switcher.css";
 @import "./sidebar-layout.css";

package/src/css/layout/scroll-snap.css

@@ -18,6 +18,7 @@
   --scroll-snap-item-size: auto;
 
   display: flex;
+  flex-direction: row;
   gap: var(--scroll-snap-gap);
   overflow-x: auto;
 }

package/src/css/layout/sidebar-layout.css

@@ -10,22 +10,44 @@
  * --sidebar-content-min
  * --sidebar-layout-size
  *
- * Child contract: the first and last direct children carry the sizing roles.
+ * Child contract: the main region is first and the aside second by default
+ * (aside on the inline end). .reverse expects the aside first in the DOM, so
+ * visual, reading and keyboard order all agree — the role rules swap so the
+ * aside still takes its preferred width and the main still reclaims the row.
  */
 .sidebar-layout {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
   align-items: flex-start;
 }
 
+/* Main region — flexible, reclaims the full row when the aside wraps. */
 .sidebar-layout > :first-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: min(100%, var(--sidebar-content-min, 30rem));
 }
 
+/* Aside region — preferred width, never forces content min-width. */
 .sidebar-layout > :last-child {
   flex-basis: var(--sidebar-layout-size, 18rem);
   flex-grow: 1;
+  min-inline-size: 0;
+}
+
+/* .reverse: the aside is first in the DOM and the main last, so each role
+   rule above would hit the wrong element. Swap the sizing per child; the
+   higher-specificity reverse rules outrank the positional defaults. */
+.sidebar-layout.reverse > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: min(100%, var(--sidebar-content-min, 30rem));
+}
+
+.sidebar-layout.reverse > :first-child {
+  flex-basis: var(--sidebar-layout-size, 18rem);
+  flex-grow: 1;
+  min-inline-size: 0;
 }

package/src/css/layout/switcher.css

@@ -12,6 +12,7 @@
  */
 .switcher {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
 }

package/src/css/layout/topbar.css

@@ -15,6 +15,7 @@
   z-index: var(--z-sticky);
   isolation: isolate;
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: var(--gap);
   padding-block: var(--space-30);

package/src/css/typography/prose.css

@@ -38,6 +38,10 @@
 /* Vertical rhythm belongs to the direct block that participates in the
    document, so it must not be injected into the internals of a nested
    component (e.g. a .table-wrap around a .table would trap the margin). */
+.prose > * {
+  margin-block-end: 0;
+}
+
 .prose > * + * {
   margin-block-start: var(--prose-flow);
 }

package/src/js/tooltip.js

@@ -358,7 +358,8 @@ function ensureTip(trigger) {
 }
 
 function cleanupTrigger(trigger) {
-  if (trigger.isConnected) return;
+  // The enhancement runtime owns the root-membership decision; a trigger may
+  // still be connected after moving beyond that lifecycle boundary.
   triggerStates.get(trigger)?.cleanup?.();
 }
 

package/docs/pages/layout/list.md

@@ -1,41 +0,0 @@
-# List
-
-Lists stay native by default. Compose visual list rows from existing primitives.
-
-Use `.list-reset` only when markers are not part of the content. Combine `.stack`, `.media`, `.cluster`, spacing helpers, and local styles for application-style rows.
-
-```html demo
-<figure class="stack">
-  <figcaption><strong>Most played songs this week</strong></figcaption>
-
-  <ul class="list-reset stack gap-none">
-    <li class="media items-center py" style="border-block-end: var(--border-width) solid var(--border)">
-      <div class="avatar">
-        <img src="https://i.pravatar.cc/48?img=5" alt="Dio Lupa" />
-      </div>
-      <div class="cluster">
-        <div class="stack grow" style="--gap: var(--space-10)">
-          <strong>Dio Lupa</strong>
-          <span class="muted">Remaining Reason</span>
-        </div>
-        <span class="muted">3:45</span>
-      </div>
-    </li>
-
-    <li class="media items-center py" style="border-block-end: var(--border-width) solid var(--border)">
-      <div class="avatar">
-        <img src="https://i.pravatar.cc/48?img=10" alt="Astral Planes" />
-      </div>
-      <div class="cluster">
-        <div class="stack grow" style="--gap: var(--space-10)">
-          <strong>Astral Planes</strong>
-          <span class="muted">Neon Drift</span>
-        </div>
-        <span class="muted">4:12</span>
-      </div>
-    </li>
-  </ul>
-</figure>
-```
-
-Keep semantic lists unstyled when the markers carry meaning.