srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue

@@ -1,7 +1,7 @@
 <template>
   <component :is="tag" ref="rootEl" class="content-docs" :class="[elementClasses]">
     <div class="content-docs-inner">
-      <div v-if="hasDocsContent" class="docs-content">
+      <div v-if="hasDocsContent()" class="docs-content">
         <slot name="docsContent"></slot>
       </div>
       <div v-if="hasDocsNav" class="docs-nav">
@@ -116,14 +116,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const panelComponent = computed(() => (props.panelVariant === "modern" ? ExpandingPanel : ExpandingPanelClassic));
 
-const activeNavItem = defineModel<string | undefined>("activeNavItem");
-const activePageNavItem = defineModel<string | undefined>("activePageNavItem");
+const activeNavItem = defineModel<string | undefined>("activeNavItem", { default: undefined });
+const activePageNavItem = defineModel<string | undefined>("activePageNavItem", { default: undefined });
 
 const NuxtLink = resolveComponent("NuxtLink");
 
 const slots = useSlots();
 const hasDocsNav = computed(() => props.docsNavItems.length > 0);
-const hasDocsContent = computed(() => !!slots.docsContent);
+const hasDocsContent = () => !!slots.docsContent;
 const hasDocsPageNav = computed(() => props.docsPageNavItems.length > 0);
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -160,46 +160,29 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
   .content-docs {
     --_heading-font-size: var(--content-docs-heading-font-size, 1.4rem);
     --_heading-font-weight: var(--content-docs-heading-font-weight, 700);
-    --_heading-color: var(--content-docs-heading-color, light-dark(var(--slate-10), var(--slate-01)));
+    --_heading-color: var(--content-docs-heading-color, var(--colour-text-default));
     --_heading-bg: var(--content-docs-heading-bg, transparent);
     --_heading-margin: var(--content-docs-heading-margin, 0);
     --_heading-padding-block: var(--content-docs-heading-padding-block, 0.4rem 0.8rem);
     --_heading-padding-inline: var(--content-docs-heading-padding-inline, 0);
 
-    --_panel-bg: var(--content-docs-panel-bg, light-dark(var(--slate-00), var(--slate-10)));
+    --_panel-bg: var(--content-docs-panel-bg, var(--page-bg));
     --_panel-padding-block: var(--content-docs-panel-padding-block, 0.8rem);
     --_panel-padding-inline: var(--content-docs-panel-padding-inline, 0.8rem);
     --_panel-border-radius: var(--content-docs-panel-border-radius, 0.5rem);
 
-    --_nav-column-width: var(--content-docs-nav-column-width, 23rem);
-    --_page-nav-column-width: var(--content-docs-page-nav-column-width, 22rem);
-    --_page-nav-column-width-tablet: var(--content-docs-page-nav-column-width-tablet, 20rem);
-
     --_link-font-size: var(--content-docs-link-font-size, 1.4rem);
     --_link-padding-block: var(--content-docs-link-padding-block, 0.6rem);
     --_link-padding-inline: var(--content-docs-link-padding-inline, 0.8rem);
     --_link-margin-block: var(--content-docs-link-margin-block, 0);
     --_link-border-radius: var(--content-docs-link-border-radius, 0.4rem);
-    --_link-color: var(--content-docs-link-color, light-dark(var(--slate-09), var(--slate-01)));
+    --_link-color: var(--content-docs-link-color, var(--colour-text-default));
     --_link-bg: var(--content-docs-link-bg, transparent);
-    --_link-hover-bg: var(--content-docs-link-hover-bg, light-dark(var(--slate-01), var(--slate-09)));
+    --_link-hover-bg: var(--content-docs-link-hover-bg, var(--theme-surface-subtle));
     --_link-hover-color: var(--content-docs-link-hover-color, var(--_link-color));
-    --_link-active-bg: var(--content-docs-link-active-bg, light-dark(var(--green-01), var(--green-09)));
-    --_link-active-color: var(--content-docs-link-active-color, light-dark(var(--green-10), var(--green-04)));
-
-    --_nav-heading-font-size: var(--content-docs-nav-heading-font-size, var(--_heading-font-size));
-    --_nav-heading-font-weight: var(--content-docs-nav-heading-font-weight, var(--_heading-font-weight));
-    --_nav-heading-color: var(--content-docs-nav-heading-color, var(--_heading-color));
-    --_nav-heading-bg: var(--content-docs-nav-heading-bg, var(--_heading-bg));
-    --_nav-heading-margin: var(--content-docs-nav-heading-margin, var(--_heading-margin));
-    --_nav-heading-padding-block: var(--content-docs-nav-heading-padding-block, var(--_heading-padding-block));
-    --_nav-heading-padding-inline: var(--content-docs-nav-heading-padding-inline, var(--_heading-padding-inline));
-
-    --_page-nav-heading-font-size: var(--content-docs-page-nav-heading-font-size, var(--_heading-font-size));
-    --_page-nav-heading-font-weight: var(--content-docs-page-nav-heading-font-weight, var(--_heading-font-weight));
-    --_page-nav-heading-color: var(--content-docs-page-nav-heading-color, var(--_heading-color));
-    --_page-nav-heading-bg: var(--content-docs-page-nav-heading-bg, var(--_heading-bg));
-    --_page-nav-heading-margin: var(--content-docs-page-nav-heading-margin, var(--_heading-margin));
+    --_link-active-bg: var(--content-docs-link-active-bg, var(--green-01));
+    --_link-active-color: var(--content-docs-link-active-color, var(--green-10));
+
     --_page-nav-heading-padding-block: var(
       --content-docs-page-nav-heading-padding-block,
       var(--_heading-padding-block)
@@ -209,21 +192,6 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       var(--_heading-padding-inline)
     );
 
-    --_nav-panel-bg: var(--content-docs-nav-panel-bg, var(--_panel-bg));
-    --_page-nav-panel-bg: var(--content-docs-page-nav-panel-bg, var(--_panel-bg));
-
-    --_nav-link-color: var(--content-docs-nav-link-color, var(--_link-color));
-    --_nav-link-hover-bg: var(--content-docs-nav-link-hover-bg, var(--_link-hover-bg));
-    --_nav-link-hover-color: var(--content-docs-nav-link-hover-color, var(--_link-hover-color));
-    --_nav-link-active-bg: var(--content-docs-nav-link-active-bg, var(--_link-active-bg));
-    --_nav-link-active-color: var(--content-docs-nav-link-active-color, var(--_link-active-color));
-
-    --_page-nav-link-color: var(--content-docs-page-nav-link-color, var(--_link-color));
-    --_page-nav-link-hover-bg: var(--content-docs-page-nav-link-hover-bg, var(--_link-hover-bg));
-    --_page-nav-link-hover-color: var(--content-docs-page-nav-link-hover-color, var(--_link-hover-color));
-    --_page-nav-link-active-bg: var(--content-docs-page-nav-link-active-bg, var(--_link-active-bg));
-    --_page-nav-link-active-color: var(--content-docs-page-nav-link-active-color, var(--_link-active-color));
-
     container-type: inline-size;
     container-name: contentDocs;
 
@@ -241,14 +209,14 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
           "docsNav docsPageNav"
           "docsContent docsPageNav";
         gap: 1.6rem;
-        grid-template-columns: 1fr var(--_page-nav-column-width-tablet);
+        grid-template-columns: 1fr var(--content-docs-page-nav-column-width-tablet, 20rem);
         grid-template-rows: auto 1fr;
       }
 
       @container contentDocs (width >= 1024px) {
         grid-template-areas: "docsNav docsContent  docsPageNav";
         gap: 1.6rem;
-        grid-template-columns: var(--_nav-column-width) 1fr var(--_page-nav-column-width);
+        grid-template-columns: var(--content-docs-nav-column-width, 23rem) 1fr var(--content-docs-page-nav-column-width, 22rem);
       }
 
       .docs-nav {
@@ -280,20 +248,20 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
     }
 
     .docs-nav-heading {
-      font-size: var(--_nav-heading-font-size);
-      font-weight: var(--_nav-heading-font-weight);
-      color: var(--_nav-heading-color);
-      background-color: var(--_nav-heading-bg);
-      margin: var(--_nav-heading-margin);
-      padding-block: var(--_nav-heading-padding-block);
-      padding-inline: var(--_nav-heading-padding-inline);
+      font-size: var(--content-docs-nav-heading-font-size, var(--_heading-font-size));
+      font-weight: var(--content-docs-nav-heading-font-weight, var(--_heading-font-weight));
+      color: var(--content-docs-nav-heading-color, var(--_heading-color));
+      background-color: var(--content-docs-nav-heading-bg, var(--_heading-bg));
+      margin: var(--content-docs-nav-heading-margin, var(--_heading-margin));
+      padding-block: var(--content-docs-nav-heading-padding-block, var(--_heading-padding-block));
+      padding-inline: var(--content-docs-nav-heading-padding-inline, var(--_heading-padding-inline));
     }
     .docs-page-nav-heading {
-      font-size: var(--_page-nav-heading-font-size);
-      font-weight: var(--_page-nav-heading-font-weight);
-      color: var(--_page-nav-heading-color);
-      background-color: var(--_page-nav-heading-bg);
-      margin: var(--_page-nav-heading-margin);
+      font-size: var(--content-docs-page-nav-heading-font-size, var(--_heading-font-size));
+      font-weight: var(--content-docs-page-nav-heading-font-weight, var(--_heading-font-weight));
+      color: var(--content-docs-page-nav-heading-color, var(--_heading-color));
+      background-color: var(--content-docs-page-nav-heading-bg, var(--_heading-bg));
+      margin: var(--content-docs-page-nav-heading-margin, var(--_heading-margin));
       padding-block: var(--_page-nav-heading-padding-block);
       padding-inline: var(--_page-nav-heading-padding-inline);
     }
@@ -302,7 +270,7 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       border-radius: var(--_panel-border-radius);
       padding-block: var(--_panel-padding-block);
       padding-inline: var(--_panel-padding-inline);
-      background-color: var(--_nav-panel-bg);
+      background-color: var(--content-docs-nav-panel-bg, var(--_panel-bg));
 
       ul {
         list-style: none;
@@ -317,7 +285,7 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       border-radius: var(--_panel-border-radius);
       padding-block: var(--_panel-padding-block);
       padding-inline: var(--_panel-padding-inline);
-      background-color: var(--_page-nav-panel-bg);
+      background-color: var(--content-docs-page-nav-panel-bg, var(--_panel-bg));
 
       ul {
         list-style: none;
@@ -331,9 +299,9 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
 
     .docs-nav-link {
       display: grid;
-      grid-template-columns: var(--docs-nav-link-icon-size, 1.6rem) 1fr;
+      grid-template-columns: var(--content-docs-link-icon-size, 1.6rem) 1fr;
       align-items: center;
-      gap: var(--docs-nav-link-icon-gap, 0.6rem);
+      gap: var(--content-docs-link-icon-gap, 0.6rem);
       border-radius: var(--_link-border-radius);
       font-size: var(--_link-font-size);
       padding-block: var(--_link-padding-block);
@@ -341,8 +309,8 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       margin-block: var(--_link-margin-block);
       background-color: var(--_link-bg);
       text-decoration: none;
-      direction: var(--docs-nav-link-icon-order, ltr);
-      color: var(--_nav-link-color);
+      direction: var(--content-docs-nav-link-icon-order, ltr);
+      color: var(--content-docs-nav-link-color, var(--_link-color));
       transition:
         background-color var(--control-transition-duration, 200ms) var(--control-transition-ease, ease),
         color var(--control-transition-duration, 200ms) var(--control-transition-ease, ease);
@@ -353,21 +321,21 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       }
 
       &:hover {
-        background-color: var(--_nav-link-hover-bg);
-        color: var(--_nav-link-hover-color);
+        background-color: var(--content-docs-nav-link-hover-bg, var(--_link-hover-bg));
+        color: var(--content-docs-nav-link-hover-color, var(--_link-hover-color));
       }
 
       &.is-active {
-        background-color: var(--_nav-link-active-bg);
-        color: var(--_nav-link-active-color);
+        background-color: var(--content-docs-nav-link-active-bg, var(--_link-active-bg));
+        color: var(--content-docs-nav-link-active-color, var(--_link-active-color));
         font-weight: 600;
       }
     }
     .docs-page-nav-link {
       display: grid;
-      grid-template-columns: var(--docs-nav-link-icon-size, 1.6rem) 1fr;
+      grid-template-columns: var(--content-docs-link-icon-size, 1.6rem) 1fr;
       align-items: center;
-      gap: var(--docs-nav-link-icon-gap, 0.6rem);
+      gap: var(--content-docs-link-icon-gap, 0.6rem);
       border-radius: var(--_link-border-radius);
       font-size: var(--_link-font-size);
       padding-block: var(--_link-padding-block);
@@ -375,8 +343,8 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       margin-block: var(--_link-margin-block);
       background-color: var(--_link-bg);
       text-decoration: none;
-      direction: var(--docs-page-nav-link-icon-order, ltr);
-      color: var(--_page-nav-link-color);
+      direction: var(--content-docs-page-nav-link-icon-order, ltr);
+      color: var(--content-docs-page-nav-link-color, var(--_link-color));
       transition:
         background-color var(--control-transition-duration, 200ms) var(--control-transition-ease, ease),
         color var(--control-transition-duration, 200ms) var(--control-transition-ease, ease);
@@ -387,13 +355,13 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       }
 
       &:hover {
-        background-color: var(--_page-nav-link-hover-bg);
-        color: var(--_page-nav-link-hover-color);
+        background-color: var(--content-docs-page-nav-link-hover-bg, var(--_link-hover-bg));
+        color: var(--content-docs-page-nav-link-hover-color, var(--_link-hover-color));
       }
 
       &.is-active {
-        background-color: var(--_page-nav-link-active-bg);
-        color: var(--_page-nav-link-active-color);
+        background-color: var(--content-docs-page-nav-link-active-bg, var(--_link-active-bg));
+        color: var(--content-docs-page-nav-link-active-color, var(--_link-active-color));
         font-weight: 600;
       }
     }
@@ -403,8 +371,7 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
       grid-column: 1;
       direction: ltr;
       flex-shrink: 0;
-      width: var(--docs-nav-link-icon-size, 1.6rem);
-      height: var(--docs-nav-link-icon-size, 1.6rem);
+      font-size: var(--content-docs-link-icon-size, 1.6rem);
     }
 
     .docs-nav-link-label,

package/app/components/01.atoms/content-wrappers/docs-pages/stories/ContentDocs.stories.ts

@@ -148,8 +148,8 @@ export const IconAtEnd: StoryFn<ContentDocsStoryArgs> = (args) => ({
     <div>
       <style>
         .content-docs.icon-at-end-demo {
-          --docs-nav-link-icon-order: rtl;
-          --docs-page-nav-link-icon-order: rtl;
+          --content-docs-nav-link-icon-order: rtl;
+          --content-docs-page-nav-link-icon-order: rtl;
         }
       </style>
       <ContentDocs
@@ -160,7 +160,7 @@ export const IconAtEnd: StoryFn<ContentDocsStoryArgs> = (args) => ({
         <template #docsContent>
           <h3 style="margin-top:0">Docs Content</h3>
           <p>
-            <code>--docs-nav-link-icon-order: rtl</code> moves the icon to the end of each
+            <code>--content-docs-nav-link-icon-order: rtl</code> moves the icon to the end of each
             link instead of the start (default <code>ltr</code>).
           </p>
         </template>

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/CONSUMER-STYLING.md

@@ -29,14 +29,27 @@ Or scope to a single instance via `styleClassPassthrough`:
 <DashboardQuadGrid style-class-passthrough="promo-quad-grid">...</DashboardQuadGrid>
 ```
 
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
 ## Notes
 
 - The four-panel layout (mobile stack → tablet 2×3 → desktop 3×2 with slot1 spanning vertically)
   is structural, driven by fixed container-query breakpoints (`768px`, `1060px`) rather than
   tokens/props — this is a fixed dashboard shape, not a general-purpose grid. Use
-  `LayoutGridByCols`/`LayoutGridByWidth` instead if you need an arbitrary column count.
+  `LayoutGridByCols` or `AutoGrid` instead if you need an arbitrary column count.
 - Responds to its own container width (`container-type: inline-size`), not the viewport.
 - Also declares a `rule`/`rule-break`/`rule-inset` gap-decoration line between grid cells (the
   CSS Gap Decorations spec) via `--dashboard-quad-grid-rule-*` tokens. Browser support is limited
   as of 2026, so it's transparent by default and safe to ignore — set
   `--dashboard-quad-grid-rule-colour` to opt in where supported.
+

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/stories/DashboardQuadGrid.stories.ts

@@ -521,6 +521,8 @@ const ComparisonTemplate: StoryFn = () => ({
 
 export const ResponsiveComparison = ComparisonTemplate.bind({});
 ResponsiveComparison.parameters = {
+  // Fixed showcase: hardcoded values, so Controls would do nothing here.
+  controls: { disable: true },
   docs: {
     description: {
       story:

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/CONSUMER-STYLING.md

@@ -26,6 +26,18 @@ Or scope to a single instance via `styleClassPassthrough`:
 <DashboardStatsGrid style-class-passthrough="quarterly-stats">...</DashboardStatsGrid>
 ```
 
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
 ## Notes
 
 - Layout shape (top-row split into a multi-panel cluster + 2 static panels, bottom-row panel
@@ -39,3 +51,4 @@ Or scope to a single instance via `styleClassPassthrough`:
   between the top row and bottom row. Browser support is limited as of 2026, so it's transparent
   by default and safe to ignore — set `--dashboard-stats-grid-rule-colour` to opt in where
   supported.
+

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/stories/DashboardStatsGrid.stories.ts

@@ -411,6 +411,8 @@ const ComparisonTemplate: StoryFn = () => ({
 
 export const ResponsiveComparison = ComparisonTemplate.bind({});
 ResponsiveComparison.parameters = {
+  // Fixed showcase: hardcoded values, so Controls would do nothing here.
+  controls: { disable: true },
   docs: {
     description: {
       story:

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/CONSUMER-STYLING.md

@@ -0,0 +1,72 @@
+# LayoutGridByCols — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Set by prop | Controls |
+|---|---|---|---|
+| `--layout-grid-by-cols-column-count` | `2` | `columnCount` | Number of equal columns above the collapse threshold (integer) |
+| `--layout-grid-by-cols-single-col-below` | `768px` | `singleColBelow` | Grid width below which it becomes one column. `0px` never collapses |
+| `--layout-grid-by-cols-gap` | `1rem` | `gap` | Row and column gap (a single length) |
+| `--layout-grid-by-cols-row-gap` | `var(--layout-grid-by-cols-gap)` | none | Row gap only |
+| `--layout-grid-by-cols-column-gap` | `var(--layout-grid-by-cols-gap)` | none | Column gap only |
+
+A prop, when passed, writes its token inline on the root and beats any CSS. None of the layout props
+has a default of its own, so leave one off to control that value from CSS (e.g. per breakpoint).
+
+> **Changed 2026-09-27**: `singleColBelow` used to do nothing (the breakpoint was hardcoded as a
+> `768px` container query), and `gap`/`columnCount` were `v-bind()` values with no token. All three
+> are now public tokens. The collapse no longer uses a container query, which is what lets the
+> threshold be a token (container query conditions can't read custom properties).
+
+Private tokens (not public API), all on `.layout-grid-by-cols-inner`: `--_cols`, `--_column-gap`,
+`--_collapse`, `--_column-min`, intermediates for the column track calculation.
+
+## State hooks
+
+No `data-*` attributes. Classes:
+
+- `.layout-grid-by-cols`: the root (`div` or `section`).
+- `.layout-grid-by-cols-inner`: the grid itself; slot content are its direct children.
+- `.sr-only`: the hidden label `<p>`, only when `tag="section"` and a `label` is passed.
+
+> **Changed 2026-09-27**: `.layout-grid-inner` → `.layout-grid-by-cols-inner`. The root no longer
+> sets `container-type`/`container-name: layoutGrid`.
+
+## Sizing model
+
+Columns are `repeat(auto-fill, minmax(<track>, 1fr))`, where the track minimum is either the full
+width (below the threshold) or exactly one Nth of the width minus the gaps (at or above it). The
+switch compares the grid's own width with the threshold, not the viewport's, so it behaves like the
+old container query. Fewer items than columns leave empty tracks, as before.
+
+The column-gap feeds that calculation, so it must be a single length (`gap: "1rem 2rem"` style
+shorthand isn't supported; use the row/column gap tokens instead).
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the
+component need `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** `columnCount`, `gap` and `singleColBelow`, when passed, are written inline on the root
+and override their tokens. To drive one from CSS, don't pass its prop.
+
+## Recipe: more columns on wide screens
+
+```css
+.team {
+  --layout-grid-by-cols-column-count: 2;
+  --layout-grid-by-cols-single-col-below: 480px;
+
+  @media (width >= 1024px) {
+    --layout-grid-by-cols-column-count: 4;
+  }
+}
+```
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root. Reachable in normal use, and the simplest place
+to set the tokens for one instance.

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/LayoutGridByCols.vue

@@ -2,13 +2,16 @@
   <component
     :is="tag"
     class="layout-grid-by-cols"
-    :aria-labelledby="ariaLabelledby"
+    :aria-labelledby="label ? ariaLabelledby : undefined"
     :class="[elementClasses]"
+    :style="{
+      '--layout-grid-by-cols-column-count': columnCountValue,
+      '--layout-grid-by-cols-gap': gap,
+      '--layout-grid-by-cols-single-col-below': singleColBelow,
+    }"
   >
-    <p v-if="ariaLabelledby" :id="headingId" class="sr-only">
-      {{ props.label || "If tag='section' then a label is required" }}
-    </p>
-    <div class="layout-grid-inner">
+    <p v-if="ariaLabelledby && label" :id="headingId" class="sr-only">{{ label }}</p>
+    <div class="layout-grid-by-cols-inner">
       <template v-for="(_, name) in $slots" :key="name">
         <slot :name="name"></slot>
       </template>
@@ -29,42 +32,40 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   label: "",
-  columnCount: 2,
-  gap: "1rem",
-  singleColBelow: "768px",
+  columnCount: undefined,
+  gap: undefined,
+  singleColBelow: undefined,
   styleClassPassthrough: () => [],
 });
 
 const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
-const columnCount = computed(() => (props.columnCount < 2 ? 2 : props.columnCount));
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const columnCountValue = computed(() =>
+  props.columnCount === undefined ? undefined : Math.max(2, Math.round(props.columnCount))
+);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
   () => props.styleClassPassthrough,
-  () => {
-    updateElementClasses(props.styleClassPassthrough);
-  }
+  () => resetElementClasses(props.styleClassPassthrough)
 );
 </script>
 
 <style lang="css">
 @layer components {
   .layout-grid-by-cols {
-    container-type: inline-size;
-    container-name: layoutGrid;
+    .layout-grid-by-cols-inner {
+      --_cols: var(--layout-grid-by-cols-column-count, 2);
+      --_column-gap: var(--layout-grid-by-cols-column-gap, var(--layout-grid-by-cols-gap, 1rem));
+      /* One column once the grid is narrower than the threshold, else N equal columns (no container query, so the threshold can be a token). */
+      --_collapse: calc((var(--layout-grid-by-cols-single-col-below, 768px) - 100%) * 999);
+      --_column-min: calc((100% - (var(--_cols) - 1) * var(--_column-gap)) / var(--_cols) - 0.1px);
 
-    --_gap: v-bind(gap);
-
-    .layout-grid-inner {
       display: grid;
-      grid-auto-flow: row;
-      gap: var(--_gap);
-
-      @container layoutGrid (width >= 768px) {
-        grid-template-columns: repeat(v-bind(columnCount), 1fr);
-        gap: var(--_gap);
-      }
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--_collapse), var(--_column-min))), 1fr));
+      row-gap: var(--layout-grid-by-cols-row-gap, var(--layout-grid-by-cols-gap, 1rem));
+      column-gap: var(--_column-gap);
     }
   }
 }