srcdev-nuxt-components 9.1.41 → 9.1.43

package/app/components/01.atoms/grids/data-grid/stories/{DataGrid.stories.ts → AutoGrid.stories.ts}

@@ -1,15 +1,53 @@
+import { computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import DataGridComponent from "../DataGrid.vue";
+import AutoGridComponent from "../AutoGrid.vue";
 
-const meta: Meta<typeof DataGridComponent> = {
-  title: "Atoms/Grids/DataGrid",
-  component: DataGridComponent,
+interface AutoGridArgs {
+  tag: "div" | "section" | "article" | "main";
+  isResponsive: boolean;
+  styleClassPassthrough: string[];
+  minColSizeSmall: string;
+  minColSizeDefault: string;
+  minColSizeLarge: string;
+  gap: string;
+}
+
+const meta: Meta<AutoGridArgs> = {
+  title: "Atoms/Grids/AutoGrid",
+  component: AutoGridComponent,
   argTypes: {
     tag: {
       control: { type: "select" },
       options: ["div", "section", "article", "main"],
       description: "HTML tag to render as",
-      table: { category: "Semantic" },
+      table: { category: "Props" },
+    },
+    isResponsive: {
+      control: { type: "boolean" },
+      description:
+        "Enables container-query breakpoints: `--auto-grid-min-col-size-small` below 768px, default 768px+, large 1024px+. Requires a `container-type: inline-size` ancestor.",
+      table: { category: "Props" },
+    },
+    minColSizeSmall: {
+      control: { type: "text" },
+      description: "`--auto-grid-min-col-size-small` — minimum column width in responsive mode below 768px",
+      table: { category: "CSS Tokens" },
+    },
+    minColSizeDefault: {
+      control: { type: "text" },
+      description:
+        "`--auto-grid-min-col-size-default` — controls column width when `isResponsive` is **off**. Also used as the mid-size step in responsive mode (768px+).",
+      table: { category: "CSS Tokens" },
+    },
+    minColSizeLarge: {
+      control: { type: "text" },
+      description: "`--auto-grid-min-col-size-large` — minimum column width in responsive mode 1024px+",
+      table: { category: "CSS Tokens" },
+    },
+    gap: {
+      control: { type: "text" },
+      description: "`--auto-grid-gap` — gap between grid items",
+      table: { category: "CSS Tokens" },
     },
     styleClassPassthrough: {
       table: { disable: true },
@@ -17,13 +55,18 @@ const meta: Meta<typeof DataGridComponent> = {
   },
   args: {
     tag: "div",
+    isResponsive: false,
+    minColSizeSmall: "250px",
+    minColSizeDefault: "300px",
+    minColSizeLarge: "350px",
+    gap: "1rem",
     styleClassPassthrough: [],
   },
   parameters: {
     docs: {
       description: {
         component:
-          "A responsive auto-fit grid container. Uses CSS custom properties `--data-grid-columns` and `--data-grid-gap` to control layout. Renders named slots provided by the consumer.",
+          "A responsive auto-fit grid container. Override `--auto-grid-min-col-size-default` and `--auto-grid-gap` to control layout. Enable `isResponsive` for container-query-based column steps using `--auto-grid-min-col-size-small` and `--auto-grid-min-col-size-large`.",
       },
     },
   },
@@ -33,22 +76,24 @@ export default meta;
 
 const cardStyle =
   "padding: 2.4rem; background: white; border-radius: 0.8rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.8rem;";
-const labelStyle = "font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;";
+const labelStyle =
+  "font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;";
 const valueStyle = "font-size: 2.4rem; font-weight: 700; color: #111827;";
 
-interface DataGridArgs {
-  tag: "div" | "section" | "article" | "main";
-  styleClassPassthrough: string[];
-}
-
-const Template: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+const Template: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
-    return { args };
+    const cssTokenStyle = computed(() => ({
+      "--auto-grid-min-col-size-small": args.minColSizeSmall,
+      "--auto-grid-min-col-size-default": args.minColSizeDefault,
+      "--auto-grid-min-col-size-large": args.minColSizeLarge,
+      "--auto-grid-gap": args.gap,
+    }));
+    return { args, cssTokenStyle };
   },
   template: `
-    <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+    <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+      <AutoGridComponent :tag="args.tag" :is-responsive="args.isResponsive" :style="cssTokenStyle" :style-class-passthrough="args.styleClassPassthrough">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -73,7 +118,7 @@ const Template: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">4.9</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });
@@ -82,7 +127,18 @@ export const Default = Template.bind({});
 Default.parameters = {
   docs: {
     description: {
-      story: "Default grid with four stat cards. Columns auto-fit to available space at a minimum of 250px each.",
+      story: "Default grid with four stat cards. Columns auto-fit to available space at a minimum of 300px each.",
+    },
+  },
+};
+
+export const Responsive = Template.bind({});
+Responsive.args = { isResponsive: true };
+Responsive.parameters = {
+  docs: {
+    description: {
+      story:
+        "With `isResponsive` enabled, column width steps through three sizes based on container width. Resize the story viewport to see the breakpoints in action.",
     },
   },
 };
@@ -91,10 +147,10 @@ export const TwoItems = Template.bind({});
 TwoItems.storyName = "Two Items";
 TwoItems.decorators = [
   () => ({
-    components: { DataGridComponent },
+    components: { AutoGridComponent },
     template: `
-      <div style="padding: 3.2rem; background: #f9fafb;">
-        <DataGridComponent>
+      <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+        <AutoGridComponent>
           <template #item-1>
             <div style="${cardStyle}">
               <span style="${labelStyle}">Revenue</span>
@@ -107,7 +163,7 @@ TwoItems.decorators = [
               <span style="${valueStyle}">142</span>
             </div>
           </template>
-        </DataGridComponent>
+        </AutoGridComponent>
       </div>
     `,
   }),
@@ -116,15 +172,15 @@ TwoItems.parameters = {
   docs: { description: { story: "Grid with two items — auto-fit spreads them to fill available columns." } },
 };
 
-export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const NarrowContainer: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 3.2rem; background: #f9fafb;">
-      <div style="max-width: 400px;">
-        <DataGridComponent :tag="args.tag">
+      <div style="max-width: 400px; container-type: inline-size;">
+        <AutoGridComponent :tag="args.tag">
           <template #item-1>
             <div style="${cardStyle}">
               <span style="${labelStyle}">Revenue</span>
@@ -143,7 +199,7 @@ export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
               <span style="${valueStyle}">38</span>
             </div>
           </template>
-        </DataGridComponent>
+        </AutoGridComponent>
       </div>
     </div>
   `,
@@ -151,19 +207,19 @@ export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
 NarrowContainer.parameters = {
   docs: {
     description: {
-      story: "In a 400px container the auto-fit columns stack to a single column once items fall below 250px.",
+      story: "In a 400px container the auto-fit columns stack to a single column once items fall below 300px.",
     },
   },
 };
 
-export const CustomColumns: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const CustomColumns: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;" :tag="args.tag">
+      <AutoGridComponent style="grid-template-columns: repeat(3, 1fr); --auto-grid-gap: 2.4rem;" :tag="args.tag">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -182,7 +238,7 @@ export const CustomColumns: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">38</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });
@@ -190,19 +246,19 @@ CustomColumns.parameters = {
   docs: {
     description: {
       story:
-        "Override `--data-grid-columns` and `--data-grid-gap` via inline style to force a fixed 3-column layout with wider gaps.",
+        "Override `grid-template-columns` and `--auto-grid-gap` via inline style to force a fixed 3-column layout with wider gaps.",
     },
   },
 };
 
-export const SemanticSection: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const SemanticSection: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
-    <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent tag="section">
+    <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+      <AutoGridComponent tag="section">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -221,7 +277,7 @@ export const SemanticSection: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">38</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });

package/app/components/01.atoms/grids/data-grid/tests/{DataGrid.spec.ts → AutoGrid.spec.ts}

@@ -1,26 +1,27 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import DataGrid from "../DataGrid.vue";
+import AutoGrid from "../AutoGrid.vue";
 
-describe("DataGrid", () => {
+describe("AutoGrid", () => {
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure (default props)", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (all props and slots set)", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: {
         tag: "section",
+        isResponsive: true,
         styleClassPassthrough: ["custom-class"],
       },
       slots: {
@@ -35,58 +36,77 @@ describe("DataGrid", () => {
   // ─── Root element ────────────────────────────────────────────────────────
 
   it("renders a <div> as the root element by default", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
-  it("always has the data-grid class", async () => {
-    const wrapper = await mountSuspended(DataGrid);
-    expect(wrapper.classes()).toContain("data-grid");
+  it("always has the auto-grid class", async () => {
+    const wrapper = await mountSuspended(AutoGrid);
+    expect(wrapper.classes()).toContain("auto-grid");
   });
 
   // ─── Tag prop ────────────────────────────────────────────────────────────
 
   it("renders a <section> when tag is section", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "section" } });
     expect(wrapper.element.tagName).toBe("SECTION");
   });
 
   it("renders an <article> when tag is article", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "article" } });
     expect(wrapper.element.tagName).toBe("ARTICLE");
   });
 
   it("renders a <main> when tag is main", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "main" } });
     expect(wrapper.element.tagName).toBe("MAIN");
   });
 
   // ─── Aria ─────────────────────────────────────────────────────────────────
 
   it("does not set aria-labelledby when tag is div", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "div" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "div" } });
     expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
   });
 
   it("sets aria-labelledby when tag is section", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "section" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("sets aria-labelledby when tag is article", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "article" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("sets aria-labelledby when tag is main", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "main" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
+  // ─── isResponsive ────────────────────────────────────────────────────────
+
+  it("does not have is-responsive class by default", async () => {
+    const wrapper = await mountSuspended(AutoGrid);
+    expect(wrapper.classes()).not.toContain("is-responsive");
+  });
+
+  it("adds is-responsive class when isResponsive is true", async () => {
+    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
+    expect(wrapper.classes()).toContain("is-responsive");
+  });
+
+  it("removes is-responsive class when isResponsive changes to false", async () => {
+    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
+    expect(wrapper.classes()).toContain("is-responsive");
+    await wrapper.setProps({ isResponsive: false });
+    expect(wrapper.classes()).not.toContain("is-responsive");
+  });
+
   // ─── Slots ───────────────────────────────────────────────────────────────
 
   it("renders a named slot", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       slots: { "item-1": "<div class='card'>Card 1</div>" },
     });
     expect(wrapper.find(".card").exists()).toBe(true);
@@ -94,7 +114,7 @@ describe("DataGrid", () => {
   });
 
   it("renders multiple named slots", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       slots: {
         "item-1": "<div class='card-1'>Card 1</div>",
         "item-2": "<div class='card-2'>Card 2</div>",
@@ -107,21 +127,21 @@ describe("DataGrid", () => {
   });
 
   it("renders no slot content when no slots are provided", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.text()).toBe("");
   });
 
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string to the root", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: "my-grid" },
     });
     expect(wrapper.classes()).toContain("my-grid");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: ["my-grid", "mbe-32"] },
     });
     expect(wrapper.classes()).toContain("my-grid");
@@ -129,7 +149,7 @@ describe("DataGrid", () => {
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: ["original"] },
     });
     expect(wrapper.classes()).toContain("original");

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/AutoGrid.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
+"<section class="auto-grid custom-class is-responsive" aria-labelledby="v-0-0">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</section>"
+`;
+
+exports[`AutoGrid > renders correct HTML structure (default props) 1`] = `"<div class="auto-grid"></div>"`;

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/DataGrid.spec.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DataGrid > renders correct HTML structure (all props and slots set) 1`] = `
-"<section class="data-grid custom-class" aria-labelledby="v-0-0">
+exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
+"<section class="auto-grid custom-class" aria-labelledby="v-0-0">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
 </section>"
 `;
 
-exports[`DataGrid > renders correct HTML structure (default props) 1`] = `"<div class="data-grid"></div>"`;
+exports[`AutoGrid > renders correct HTML structure (default props) 1`] = `"<div class="auto-grid"></div>"`;

package/app/components/02.molecules/samaritan-prompt/SamaritanPromptMixed.vue

@@ -1,12 +1,13 @@
 <template>
   <div :class="['samaritan-prompt', elementClasses]">
-    <div class="samaritan-prompt__content" :style="{ opacity: textOpacity }">
+    <div class="samaritan-prompt__content" :style="{ opacity: textOpacity }" aria-hidden="true">
       <div class="samaritan-prompt__stage">
         <span class="samaritan-prompt__text">{{ displayText }}</span>
       </div>
       <div class="samaritan-prompt__underline"></div>
     </div>
     <span class="samaritan-prompt__cursor" :style="{ opacity: cursorOpacity }" aria-hidden="true">▲</span>
+    <span class="samaritan-prompt__sr-text" aria-live="polite" aria-atomic="true">{{ announcedText }}</span>
   </div>
 </template>
 
@@ -53,6 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const displayText = ref("");
+const announcedText = ref("");
 const textOpacity = ref(1);
 const cursorVisible = ref(true);
 const activeFadeDuration = ref(props.fadeDuration);
@@ -85,7 +87,9 @@ const runTypewriter = async (config: ResolvedConfig) => {
     await wait(typeSpeed);
   }
 
+  announcedText.value = text;
   await wait(holdDuration);
+  announcedText.value = "";
 
   while (displayText.value.length > 0) {
     displayText.value = displayText.value.slice(0, -1);
@@ -112,8 +116,10 @@ const runWordPulse = async (config: ResolvedConfig) => {
   await wait(120);
 
   textOpacity.value = 1;
+  announcedText.value = text;
   await wait(wordDuration);
 
+  announcedText.value = "";
   textOpacity.value = 0;
   await wait(fadeDuration);
 
@@ -221,6 +227,30 @@ onUnmounted(stop);
     animation: samaritan-pulse 2.5s ease-in-out infinite;
     transition: opacity 400ms ease;
   }
+
+  .samaritan-prompt__sr-text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .samaritan-prompt {
+    .samaritan-prompt__content {
+      transition: none;
+    }
+
+    .samaritan-prompt__cursor {
+      animation: none;
+    }
+  }
 }
 
 @keyframes samaritan-pulse {