actual-css 0.5.0 → 0.6.0

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

@@ -1,15 +1,39 @@
-/* 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 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
-   block-level wrapper, never on a shrink-to-fit item (a .cluster child, a
-   float, an inline-block): its contents would stop contributing to its own
-   inline size and it would collapse. */
+/* Convenience helper for size-aware components: establishes an inline-size
+   query container named actual-container. The name is the contract, not this
+   class — an author can declare `container: actual-container / inline-size` on
+   their own region and get the same result.
+
+   actual-container is shared. Granting it to a region may enable size-aware
+   enhancements for any Actual component inside that region, not only the one
+   that motivated the container: .grid-N reads it for balanced subdivision,
+   .steps for its label collapse, and future components will read the same
+   context. That is the scope of the API, not a caveat.
+
+   An anonymous query container is not part of it. A region that declares
+   `container-type: inline-size` for the application's own purposes carries no
+   actual-container name, so no framework component changes behaviour there.
+   Opting into the protocol is always explicit. Nothing here is a prerequisite
+   either — every primitive is responsive without it; this adds precision.
+
+   Place it where the width you want measured lives: usually a wrapper for a
+   grid, whose queried children sit inside it, and the component itself for
+   .steps, whose own row is the width in question.
+
+   The rule for where it is safe is the containment rule, not a list of
+   primitives. Query containment removes the element's intrinsic inline-size
+   contribution, so:
+
+     safe    the element's width is imposed by its context
+             (.steps sets inline-size: 100%, so it survives even as a
+             .cluster child — it wraps and fills)
+
+     unsafe  the element's width depends on its contents' intrinsic
+             contribution (a bare .grid child of .cluster measures 0 once
+             contained, as does a float, inline-block, table, grid auto track,
+             max-content parent, or an abspos box sized by its contents)
+
+   So .cluster is neither safe nor unsafe; what matters is where the child's
+   width comes from. */
 .container-query {
-  container: actual-grid / inline-size;
+  container: actual-container / inline-size;
 }

package/src/css/layout/grid.css

@@ -86,13 +86,13 @@
   min-inline-size: 0;
 }
 
-/* Balanced subdivision, activated by an ancestor container named actual-grid.
+/* Balanced subdivision, activated by an ancestor container named actual-container.
  * 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.
+ * container: actual-container / inline-size on your own region.
  *
  *   .grid-2   2 -> 1
  *   .grid-3   3 -> 1
@@ -109,7 +109,7 @@
  * 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
+ * Without an actual-container 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).
@@ -125,25 +125,25 @@
  * Ascending min-width only: the last matching step wins by cascade order.
  */
 @supports (container-type: inline-size) {
-  @container actual-grid (min-width: 0px) {
+  @container actual-container (min-width: 0px) {
     :where(.grid-2, .grid-3, .grid-4, .grid-6) {
       grid-template-columns: 1fr;
     }
   }
 
-  @container actual-grid (min-width: 28rem) {
+  @container actual-container (min-width: 28rem) {
     :where(.grid-2, .grid-4, .grid-6) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  @container actual-grid (min-width: 48rem) {
+  @container actual-container (min-width: 48rem) {
     :where(.grid-3, .grid-6) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 
-  @container actual-grid (min-width: 64rem) {
+  @container actual-container (min-width: 64rem) {
     :where(.grid-4) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }

package/src/css/layout/index.css

@@ -14,7 +14,7 @@
  * .sidebar-layout main content + secondary aside
  * .grid           responsive collection; item width is the contract
  *  .grid-N         structural density of N; balanced inside a container named
- *                  actual-grid (in grid.css)
+ *                  actual-container (in grid.css)
  * .column-layout  explicit 12-column region composition; the author owns
  *                 narrow-container recomposition
  * .scroller       theme-aware scrollbar density and colour

package/src/js/password.js

@@ -92,7 +92,7 @@ if (typeof document !== "undefined") {
   submitRoots.add(document);
   document.addEventListener("submit", handleSubmit);
 
-  window.addEventListener("pagehide", () => {
+  document.defaultView?.addEventListener("pagehide", () => {
     for (const input of revealed) {
       // Opportunistic housekeeping: an input removed from the DOM before
       // navigation no longer needs reverting and can leave the set.