srcdev-nuxt-components 9.0.15 → 9.0.16

package/app/components/04.templates/page-hero-highlights/tests/PageHeroHighlights.spec.ts

@@ -0,0 +1,198 @@
+import { describe, it, expect } from "vitest";
+import { h } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import PageHeroHighlights from "../PageHeroHighlights.vue";
+
+describe("PageHeroHighlights", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      slots: {
+        header: "<h1>Page Title</h1>",
+        highlights: "<div class='highlight'>Highlight 1</div>",
+        content: "<p>Content</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights);
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("renders with the correct tag when tag prop is provided", async () => {
+    for (const tag of ["section", "main"] as const) {
+      const wrapper = await mountSuspended(PageHeroHighlights, {
+        props: { tag },
+      });
+      expect(wrapper.element.tagName.toLowerCase()).toBe(tag);
+    }
+  });
+
+  it("renders header slot content", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      slots: { header: "<h1 class='page-title'>Dashboard</h1>" },
+    });
+    expect(wrapper.find(".page-title").exists()).toBe(true);
+    expect(wrapper.html()).toContain("Dashboard");
+  });
+
+  it("renders highlights slot content", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      slots: {
+        highlights: [
+          "<div class='highlight-card'>Card 1</div>",
+          "<div class='highlight-card'>Card 2</div>",
+        ].join(""),
+      },
+    });
+    expect(wrapper.findAll(".highlight-card").length).toBe(2);
+  });
+
+  it("renders content slot content", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      slots: { content: "<p class='body-text'>Page body</p>" },
+    });
+    expect(wrapper.find(".body-text").exists()).toBe(true);
+    expect(wrapper.html()).toContain("Page body");
+  });
+
+  it("content slot is rendered inside .content-slot", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      slots: { content: "<p class='body-text'>Page body</p>" },
+    });
+    expect(wrapper.find(".content-slot .body-text").exists()).toBe(true);
+  });
+
+  it("header slot is rendered inside .header-slot", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      slots: { header: "<h1 class='page-title'>Dashboard</h1>" },
+    });
+    expect(wrapper.find(".header-slot .page-title").exists()).toBe(true);
+  });
+
+  it("adds aria-labelledby when tag is section", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { tag: "section" },
+    });
+    expect(wrapper.find(".page-hero-highlights").attributes("aria-labelledby")).toBeTruthy();
+  });
+
+  it("adds aria-labelledby when tag is main", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { tag: "main" },
+    });
+    expect(wrapper.find(".page-hero-highlights").attributes("aria-labelledby")).toBeTruthy();
+  });
+
+  it("does not add aria-labelledby when tag is div", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { tag: "div" },
+    });
+    expect(wrapper.find(".page-hero-highlights").attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("exposes headingId via header scoped slot and aria-labelledby matches", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { tag: "section" },
+      slots: {
+        header: (props: Record<string, unknown>) =>
+          h("h1", { id: props.headingId, class: "page-title" }, "Dashboard"),
+      },
+    });
+    const labelledBy = wrapper.find(".page-hero-highlights").attributes("aria-labelledby");
+    expect(labelledBy).toBeTruthy();
+    expect(wrapper.find(".page-title").attributes("id")).toBe(labelledBy);
+  });
+
+  it("applies flexible-widths class by default", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights);
+    expect(wrapper.find(".highlights-row").classes()).toContain("flexible-widths");
+    expect(wrapper.find(".highlights-row").classes()).not.toContain("equal-widths");
+  });
+
+  it("applies equal-widths class when highlightsEqualWidths is true", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { highlightsEqualWidths: true },
+    });
+    expect(wrapper.find(".highlights-row").classes()).toContain("equal-widths");
+    expect(wrapper.find(".highlights-row").classes()).not.toContain("flexible-widths");
+  });
+
+  it("applies justify-start class by default", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights);
+    expect(wrapper.find(".highlights-row").classes()).toContain("justify-start");
+  });
+
+  it("applies the correct justify class for each highlightsJustify value", async () => {
+    const values = ["start", "center", "end", "space-between", "space-around"] as const;
+    for (const value of values) {
+      const wrapper = await mountSuspended(PageHeroHighlights, {
+        props: { highlightsJustify: value },
+      });
+      expect(wrapper.find(".highlights-row").classes()).toContain(`justify-${value}`);
+    }
+  });
+
+  it("does not apply highlight-title-baseline class by default", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights);
+    expect(wrapper.find(".page-hero-highlights").classes()).not.toContain("highlight-title-baseline");
+  });
+
+  it("applies highlight-title-baseline class when highlightTitleBaseline is true", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { highlightTitleBaseline: true },
+    });
+    expect(wrapper.find(".page-hero-highlights").classes()).toContain("highlight-title-baseline");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(PageHeroHighlights, {
+      props: { styleClassPassthrough: ["extra-class", "another-class"] },
+    });
+    const el = wrapper.find(".page-hero-highlights");
+    expect(el.classes()).toContain("extra-class");
+    expect(el.classes()).toContain("another-class");
+  });
+
+  describe("gridColumns", () => {
+    interface ComponentInstance {
+      gridColumns: string;
+    }
+
+    it("defaults to fixed 16px gutters with no maxWidth", async () => {
+      const wrapper = await mountSuspended(PageHeroHighlights);
+      const vm = wrapper.vm as unknown as ComponentInstance;
+      expect(vm.gridColumns).toBe("16px 1fr 16px");
+    });
+
+    it("returns centered max-width columns when maxWidth is set and contentAlign is center", async () => {
+      const wrapper = await mountSuspended(PageHeroHighlights, {
+        props: { maxWidth: "1064px", contentAlign: "center" },
+      });
+      const vm = wrapper.vm as unknown as ComponentInstance;
+      expect(vm.gridColumns).toBe("max(16px, (100% - 1064px) / 2) 1fr max(16px, (100% - 1064px) / 2)");
+    });
+
+    it("returns start-aligned columns when maxWidth is set and contentAlign is start", async () => {
+      const wrapper = await mountSuspended(PageHeroHighlights, {
+        props: { maxWidth: "1064px", contentAlign: "start" },
+      });
+      const vm = wrapper.vm as unknown as ComponentInstance;
+      expect(vm.gridColumns).toBe("16px minmax(0, 1064px) 1fr");
+    });
+
+    it("ignores contentAlign when maxWidth is not set", async () => {
+      const wrapper = await mountSuspended(PageHeroHighlights, {
+        props: { contentAlign: "start" },
+      });
+      const vm = wrapper.vm as unknown as ComponentInstance;
+      expect(vm.gridColumns).toBe("16px 1fr 16px");
+    });
+  });
+});

package/app/components/04.templates/page-hero-highlights/tests/__snapshots__/PageHeroHighlights.spec.ts.snap

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PageHeroHighlights > renders correct HTML structure 1`] = `
+"<div class="page-hero-highlights">
+  <div class="header-row">
+    <div class="header-slot">
+      <h1>Page Title</h1>
+    </div>
+  </div>
+  <div class="highlights-row flexible-widths justify-start">
+    <div class="highlight">Highlight 1</div>
+  </div>
+  <div class="content-row">
+    <div class="content-slot">
+      <p>Content</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/container-glow/ContainerGlowCore.vue

@@ -2,13 +2,13 @@
   <div ref="containerGlowWrapper" class="container-glow-wrapper" :class="elementClasses">
     <component
       :is="tag"
-      v-for="(item, key) in itemCount"
-      :key="key"
+      v-for="(_, name) in $slots"
+      :key="name"
       ref="containerGlowItem"
       class="container-glow-core"
     >
       <div class="glows"></div>
-      <slot :name="`container-glow-${key}`"></slot>
+      <slot :name="name"></slot>
     </component>
   </div>
 </template>
@@ -23,30 +23,23 @@ interface Config {
   inactiveOpacity: number;
 }
 
-const props = defineProps({
-  itemCount: {
-    type: Number,
-    required: true,
-  },
-  tag: {
-    type: String as PropType<string>,
-    default: "div",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-  config: {
-    type: Object as PropType<Config>,
-    default: () => ({
-      proximity: 40,
-      spread: 80,
-      blur: 20,
-      gap: 32,
-      vertical: false,
-      inactiveOpacity: 0,
-    }),
-  },
+interface Props {
+  tag?: string;
+  config?: Config;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  config: () => ({
+    proximity: 40,
+    spread: 80,
+    blur: 20,
+    gap: 32,
+    vertical: false,
+    inactiveOpacity: 0,
+  }),
+  styleClassPassthrough: () => [],
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);

package/app/components/forms/input-button/InputButtonCore.vue

@@ -86,134 +86,135 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 @layer components {
-.input-button-core {
-  display: grid;
-  grid-auto-flow: column;
-  gap: var(--button-icon-gap);
-  justify-content: center;
-  align-items: center;
-  box-sizing: content-box;
-  border-radius: var(--button-border-radius);
-  font-family: var(--font-family);
-  padding-inline: var(--button-padding-inline);
-  padding-block: var(--button-padding-block);
-  touch-action: manipulation;
-  overflow: hidden;
-  transition: all var(--control-transition-duration) var(--control-transition-ease);
-
-  &.is-link {
-    display: inline-grid;
-  }
+  .input-button-core {
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--button-icon-gap);
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    border-radius: var(--button-border-radius);
+    font-family: var(--font-family);
+    padding-inline: var(--button-padding-inline);
+    padding-block: var(--button-padding-block);
+    touch-action: manipulation;
+    overflow: hidden;
+    transition: all var(--control-transition-duration) var(--control-transition-ease);
+
+    &.is-link {
+      display: inline-grid;
+    }
 
-  /*
+    /*
   * Variants
   **/
-  &.primary {
-    background-color: var(--theme-button-primary-surface);
-    color: var(--theme-button-primary-text);
-    border: var(--button-border-width) solid var(--theme-button-primary-border);
-    outline: var(--button-outline-width) solid var(--theme-button-primary-outline);
-
-    &:hover,
-    &:focus-visible {
-      background-color: var(--theme-button-secondary-surface);
-      color: var(--theme-button-secondary-text);
-      border-color: var(--theme-button-primary-border-active);
-      outline-color: var(--theme-button-primary-outline-active);
-    }
-
-    &.is-pending {
-      background-color: color-mix(in oklab, var(--theme-button-primary-surface) 50%, transparent);
-    }
-  }
-
-  &.secondary {
-    background-color: var(--theme-button-secondary-surface);
-    border: var(--button-border-width) solid var(--theme-button-secondary-border);
-    color: var(--theme-button-secondary-text);
-    outline: var(--button-outline-width) solid var(--theme-button-secondary-outline);
-
-    &:hover,
-    &:focus-visible {
+    &.primary {
       background-color: var(--theme-button-primary-surface);
       color: var(--theme-button-primary-text);
-      border-color: var(--theme-button-secondary-border-active);
-      outline-color: var(--theme-button-secondary-outline-active);
+      border: var(--button-border-width) solid var(--theme-button-primary-border);
+      outline: var(--button-outline-width) solid var(--theme-button-primary-outline);
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--theme-button-secondary-surface);
+        color: var(--theme-button-secondary-text);
+        border-color: var(--theme-button-primary-border-active);
+        outline-color: var(--theme-button-primary-outline-active);
+      }
+
+      &.is-pending {
+        background-color: color-mix(in oklab, var(--theme-button-primary-surface) 50%, transparent);
+      }
     }
-  }
 
-  &.tertiary {
-    background-color: var(--theme-button-tertiary-surface);
-    border: var(--button-border-width) solid transparent;
-    color: var(--theme-button-tertiary-text);
-    text-decoration: underline;
-    outline: var(--button-outline-width) solid transparent;
+    &.secondary {
+      background-color: var(--theme-button-secondary-surface);
+      border: var(--button-border-width) solid var(--theme-button-secondary-border);
+      color: var(--theme-button-secondary-text);
+      outline: var(--button-outline-width) solid var(--theme-button-secondary-outline);
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--theme-button-primary-surface);
+        color: var(--theme-button-primary-text);
+        border-color: var(--theme-button-secondary-border-active);
+        outline-color: var(--theme-button-secondary-outline-active);
+      }
+    }
 
-    &:hover,
-    &:focus-visible {
-      border-color: var(--theme-button-tertiary-border-active);
-      outline-color: var(--theme-button-tertiary-outline-active);
+    &.tertiary {
+      background-color: var(--theme-button-tertiary-surface);
+      border: var(--button-border-width) solid transparent;
+      color: var(--theme-button-tertiary-text);
+      text-decoration: underline;
+      outline: var(--button-outline-width) solid transparent;
+
+      &:hover,
+      &:focus-visible {
+        border-color: var(--theme-button-tertiary-border-active);
+        outline-color: var(--theme-button-tertiary-outline-active);
+      }
     }
-  }
 
-  &.primary,
-  &.secondary,
-  &.tertiary {
-    &.pill {
-      border-radius: 100vw;
+    &.primary,
+    &.secondary,
+    &.tertiary {
+      &.pill {
+        border-radius: 100vw;
+      }
     }
-  }
 
-  /*
+    /*
   * Shared States
   **/
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:focus-visible {
-    outline-width: var(--button-focus-ring-width);
-    outline-offset: var(--button-focus-ring-offset);
-  }
+    &:hover {
+      cursor: pointer;
+    }
 
-  &[readonly] {
-    opacity: 0.5;
-    &:hover,
     &:focus-visible {
-      cursor: not-allowed;
-      pointer-events: none;
+      outline-width: var(--button-focus-ring-width);
+      outline-offset: var(--button-focus-ring-offset);
     }
-  }
-
-  .button-text {
-    display: inline-block;
-    white-space: nowrap;
-    font-size: var(--button-font-size);
-    line-height: var(--button-line-height);
-    font-weight: var(--button-font-weight);
-  }
 
-  .btn-icon {
-    display: flex;
+    &[readonly] {
+      opacity: 0.5;
+      &:hover,
+      &:focus-visible {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
 
-    .icon {
-      aspect-ratio: 1;
+    .button-text {
       display: inline-block;
-      height: var(--input-icon-size);
-      width: var(--input-icon-size);
+      white-space: nowrap;
+      font-size: var(--button-font-size);
+      line-height: var(--button-line-height);
+      font-weight: var(--button-font-weight);
+      text-transform: var(--button-text-transform);
     }
-  }
-
-  &.icon-only {
-    aspect-ratio: 1;
-    border-radius: var(--button-border-radius-icon-only);
-    margin: 0;
-    padding: 0;
 
     .btn-icon {
-      margin: 1.2rem;
+      display: flex;
+
+      .icon {
+        aspect-ratio: 1;
+        display: inline-block;
+        height: var(--input-icon-size);
+        width: var(--input-icon-size);
+      }
+    }
+
+    &.icon-only {
+      aspect-ratio: 1;
+      border-radius: var(--button-border-radius-icon-only);
+      margin: 0;
+      padding: 0;
+
+      .btn-icon {
+        margin: 1.2rem;
+      }
     }
   }
 }
-}
 </style>

package/app/components/glowing-border/stories/GlowingBorder.stories.ts

@@ -5,8 +5,8 @@ import StorybookComponent from "../GlowingBorder.vue";
 interface GlowingBorderStoryArgs {
   variant: "vivid" | "subtle" | "silver" | "steel";
   content: string;
-  showDisplayCard: boolean;
-  displayCardVariant: "solid" | "subtle" | "soft" | "outline";
+  showCardCore: boolean;
+  cardCoreVariant: "solid" | "subtle" | "soft" | "outline";
 }
 
 export default {
@@ -28,17 +28,17 @@ export default {
         category: "Content",
       },
     },
-    showDisplayCard: {
+    showCardCore: {
       control: { type: "boolean" },
-      description: "Show content wrapped in a DisplayCard component",
+      description: "Show content wrapped in a CardCore component",
       table: {
         category: "Content",
       },
     },
-    displayCardVariant: {
+    cardCoreVariant: {
       control: { type: "select" },
       options: ["solid", "subtle", "soft", "outline"],
-      description: "DisplayCard variant when showDisplayCard is true",
+      description: "CardCore variant when showCardCore is true",
       table: {
         category: "Content",
       },
@@ -54,8 +54,8 @@ export default {
     variant: "vivid",
     content:
       "This is default slot content for the GlowingBorder component. As it's a slot, any HTML content can be placed here.",
-    showDisplayCard: false,
-    displayCardVariant: "solid",
+    showCardCore: false,
+    cardCoreVariant: "solid",
   },
 } as Meta<GlowingBorderStoryArgs>;
 
@@ -70,32 +70,32 @@ const Template: StoryFn<GlowingBorderStoryArgs> = (args) => ({
         :variant="args.variant"
         :style-class-passthrough="['storybook-demo']"
       >
-        <div v-if="!args.showDisplayCard" style="padding: 20px; color: var(--slate-02);">
+        <div v-if="!args.showCardCore" style="padding: 20px; color: var(--slate-02);">
           <h3 style="margin: 0 0 12px 0; font-size: 1.5rem; font-weight: 600;">GlowingBorder Header</h3>
           <h4 style="margin: 0 0 16px 0; font-size: 1.25rem; font-weight: 500;">GlowingBorder Content</h4>
           <p style="margin: 0 0 12px 0; line-height: 1.6;">{{ args.content }}</p>
           <p style="margin: 0; font-size: 0.875rem; color: var(--slate-09);">GlowingBorder Footer</p>
         </div>
 
-        <!-- DisplayCard version -->
-        <DisplayCard
+        <!-- CardCore version -->
+        <CardCore
           v-else
-          :variant="args.displayCardVariant"
+          :variant="args.cardCoreVariant"
           :has-dividers="true"
           :no-outline="false"
         >
           <template #header>
-            <h2 style="margin: 0; font-size: 1.5rem; font-weight: 600;">DisplayCard Header</h2>
+            <h2 style="margin: 0; font-size: 1.5rem; font-weight: 600;">CardCore Header</h2>
           </template>
           <template #default>
-            <h3 style="margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 500; color: var(--slate-02);">DisplayCard Content</h3>
+            <h3 style="margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 500; color: var(--slate-02);">CardCore Content</h3>
             <p style="margin: 0 0 12px 0; line-height: 1.6; color: var(--slate-02);">{{ args.content }}</p>
             <p style="margin: 0; line-height: 1.6; color: var(--slate-02);">This demonstrates how GlowingBorder can wrap other components.</p>
           </template>
           <template #footer>
-            <p style="margin: 0; font-size: 0.875rem; color: var(--slate-02);">DisplayCard Footer</p>
+            <p style="margin: 0; font-size: 0.875rem; color: var(--slate-02);">CardCore Footer</p>
           </template>
-        </DisplayCard>
+        </CardCore>
       </StorybookComponent>
     </div>
   `,
@@ -131,11 +131,11 @@ Steel.args = {
     "Steel variant provides a cool, industrial glow effect that's perfect for technical or utilitarian design themes.",
 };
 
-export const WithDisplayCard = Template.bind({});
-WithDisplayCard.args = {
+export const WithCardCore = Template.bind({});
+WithCardCore.args = {
   variant: "vivid",
   content:
-    "This example shows how GlowingBorder can enhance other components like DisplayCard, creating layered visual effects.",
-  showDisplayCard: true,
-  displayCardVariant: "solid",
+    "This example shows how GlowingBorder can enhance other components like CardCore, creating layered visual effects.",
+  showCardCore: true,
+  cardCoreVariant: "solid",
 };

package/app/composables/useAriaLabelledById.ts

@@ -0,0 +1,13 @@
+import type { MaybeRefOrGetter } from "vue";
+
+const LABELLED_TAGS = new Set(["section", "main", "article", "aside"]);
+
+export function useAriaLabelledById(tag: MaybeRefOrGetter<string>) {
+  const headingId = useId();
+
+  const ariaLabelledby = computed(() => {
+    return LABELLED_TAGS.has(toValue(tag)) ? headingId : undefined;
+  });
+
+  return { headingId, ariaLabelledby };
+}