srcdev-nuxt-components 9.4.12 → 9.5.1

package/app/components/01.atoms/glass-panel/GlassPanel.vue

@@ -1,6 +1,6 @@
 <template>
-  <component :is="tag" class="glass-panel" :class="[elementClasses]">
-    <slot name="default"></slot>
+  <component :is="tag" class="glass-panel" :class="elementClasses" :aria-labelledby="ariaLabelledby">
+    <slot name="default" :heading-id="headingId"></slot>
   </component>
 </template>
 
@@ -9,44 +9,48 @@ interface Props {
   tag?: "div" | "section" | "article" | "main" | "header" | "footer";
   styleClassPassthrough?: string | string[];
 }
+
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   styleClassPassthrough: () => [],
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-.glass-panel {
-  --_bg: var(--glass-panel-bg);
-  --_border-color: var(--glass-panel-border-color);
-  --_shadow: var(--glass-panel-shadow);
-  --_highlight: var(--glass-panel-highlight);
+  .glass-panel {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--glass-panel-border-radius, 1rem);
+    background: var(--glass-panel-bg, rgba(255, 255, 255, 0.55));
+    border: var(--glass-panel-border-width, 1px) solid var(--glass-panel-border-color, rgba(255, 255, 255, 0.8));
+    box-shadow: var(--glass-panel-shadow, 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));
+    backdrop-filter: var(--glass-panel-backdrop-filter, blur(14px) saturate(180%));
 
-  position: relative;
-  overflow: hidden;
-  border-radius: 1rem;
-
-  background: var(--_bg);
-  border: 1px solid var(--_border-color);
-  box-shadow: var(--_shadow);
-  backdrop-filter: blur(14px) saturate(180%);
-
-  /* Angled specular highlight — simulates light catching the top edge */
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: linear-gradient(
-      135deg,
-      var(--_highlight) 0%,
-      transparent 55%
-    );
-    pointer-events: none;
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      z-index: -1;
+      background: linear-gradient(
+        var(--glass-panel-highlight-angle, 135deg),
+        var(--glass-panel-highlight, rgba(255, 255, 255, 0.9)) 0%,
+        transparent var(--glass-panel-highlight-stop, 55%)
+      );
+      pointer-events: none;
+    }
   }
 }
-}
 </style>

package/app/components/01.atoms/glass-panel/stories/GlassPanel.stories.ts

@@ -0,0 +1,121 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
+import StorybookComponent from "../GlassPanel.vue";
+
+interface GlassPanelStoryArgs {
+  tag: "div" | "section" | "article" | "main" | "header" | "footer";
+  styleClassPassthrough: string;
+  bg: string;
+  borderColor: string;
+  highlight: string;
+  borderRadius: string;
+  backdropFilter: string;
+}
+
+export default {
+  title: "Atoms/GlassPanel",
+  component: StorybookComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main", "header", "footer"],
+      description: "section/article get aria-labelledby pointing at the heading bound to the heading-id slot prop",
+      table: { category: "Basic" },
+    },
+    styleClassPassthrough: { control: "text", table: { category: "Styling" } },
+    bg: {
+      control: "color",
+      description: "--glass-panel-bg (empty = default)",
+      table: { category: "Tokens" },
+    },
+    borderColor: {
+      control: "color",
+      description: "--glass-panel-border-color (empty = default)",
+      table: { category: "Tokens" },
+    },
+    highlight: {
+      control: "color",
+      description: "--glass-panel-highlight (empty = default)",
+      table: { category: "Tokens" },
+    },
+    borderRadius: {
+      control: { type: "select" },
+      options: ["0rem", "0.4rem", "1rem", "1.6rem", "2.4rem"],
+      description: "--glass-panel-border-radius (default 1rem)",
+      table: { category: "Tokens" },
+    },
+    backdropFilter: {
+      control: { type: "select" },
+      options: ["none", "blur(6px)", "blur(14px) saturate(180%)", "blur(24px) saturate(140%)"],
+      description: "--glass-panel-backdrop-filter (default blur(14px) saturate(180%))",
+      table: { category: "Tokens" },
+    },
+  },
+  args: {
+    tag: "section",
+    styleClassPassthrough: "",
+    bg: "",
+    borderColor: "",
+    highlight: "",
+    borderRadius: "1rem",
+    backdropFilter: "blur(14px) saturate(180%)",
+  },
+} as Meta<GlassPanelStoryArgs>;
+
+const Template: StoryFn<GlassPanelStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const tokenStyle = computed(() => ({
+      ...(args.bg ? { "--glass-panel-bg": args.bg } : {}),
+      ...(args.borderColor ? { "--glass-panel-border-color": args.borderColor } : {}),
+      ...(args.highlight ? { "--glass-panel-highlight": args.highlight } : {}),
+      "--glass-panel-border-radius": args.borderRadius,
+      "--glass-panel-backdrop-filter": args.backdropFilter,
+    }));
+    return { args, tokenStyle };
+  },
+  template: `
+    <div
+      :style="[
+        tokenStyle,
+        {
+          padding: '4.8rem',
+          minHeight: '40rem',
+          display: 'grid',
+          placeItems: 'center',
+          background:
+            'radial-gradient(circle at 20% 30%, oklch(70% 0.2 20) 0 12rem, transparent 12.1rem),' +
+            'radial-gradient(circle at 75% 65%, oklch(65% 0.18 250) 0 14rem, transparent 14.1rem),' +
+            'linear-gradient(135deg, oklch(85% 0.1 90), oklch(75% 0.12 300))',
+        },
+      ]"
+    >
+      <StorybookComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+        <template #default="{ headingId }">
+          <div style="padding: 3.2rem; max-width: 36rem;">
+            <h2 :id="headingId" style="margin: 0 0 1.2rem; font-size: 2.4rem;">Book a consultation</h2>
+            <p style="margin: 0; font-size: 1.5rem;">
+              GlassPanel only reads as glass over a busy background like this one. The coloured shapes
+              behind are blurred and saturated by the panel's backdrop-filter.
+            </p>
+          </div>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const NoFrosting = Template.bind({});
+NoFrosting.args = { backdropFilter: "none" };
+
+export const DarkGlass = Template.bind({});
+DarkGlass.args = {
+  bg: "#0c0c1473",
+  borderColor: "#ffffff12",
+  highlight: "#ffffff0a",
+};
+DarkGlass.parameters = {
+  docs: { description: { story: "The pre-2026-09-26 dark-mode defaults, now set by the consumer." } },
+};

package/app/components/01.atoms/glass-panel/tests/GlassPanel.spec.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from "vitest";
+import { h, nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import GlassPanel from "../GlassPanel.vue";
+
+describe("GlassPanel", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(GlassPanel);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders a div with the glass-panel class by default", async () => {
+    const wrapper = await mountSuspended(GlassPanel);
+    const root = wrapper.find(".glass-panel");
+    expect(root.element.tagName).toBe("DIV");
+    expect(root.attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("renders default slot content", async () => {
+    const wrapper = await mountSuspended(GlassPanel, {
+      slots: { default: () => "Panel content" },
+    });
+    expect(wrapper.find(".glass-panel").text()).toBe("Panel content");
+  });
+
+  it.each(["main", "header", "footer"] as const)("renders <%s> without aria-labelledby", async (tag) => {
+    const wrapper = await mountSuspended(GlassPanel, { props: { tag } });
+    const root = wrapper.find(".glass-panel");
+    expect(root.element.tagName).toBe(tag.toUpperCase());
+    expect(root.attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it.each(["section", "article"] as const)(
+    "labels a <%s> from the heading bound to the heading-id slot prop",
+    async (tag) => {
+      const wrapper = await mountSuspended(GlassPanel, {
+        props: { tag },
+        slots: {
+          default: ({ headingId }: { headingId: string }) => h("h2", { id: headingId }, "Booking"),
+        },
+      });
+      const root = wrapper.find(".glass-panel");
+      const heading = wrapper.find("h2");
+      expect(root.element.tagName).toBe(tag.toUpperCase());
+      expect(heading.attributes("id")).toBeTruthy();
+      expect(root.attributes("aria-labelledby")).toBe(heading.attributes("id"));
+    }
+  );
+
+  it("applies styleClassPassthrough and updates on change", async () => {
+    const wrapper = await mountSuspended(GlassPanel, { props: { styleClassPassthrough: ["one"] } });
+    expect(wrapper.find(".glass-panel").classes()).toContain("one");
+
+    await wrapper.setProps({ styleClassPassthrough: "two three" });
+    await nextTick();
+    const classes = wrapper.find(".glass-panel").classes();
+    expect(classes).toContain("two");
+    expect(classes).toContain("three");
+    expect(classes).not.toContain("one");
+  });
+});

package/app/components/01.atoms/grids/auto-grid/AutoGrid.vue

@@ -28,27 +28,22 @@ watch(
 <style lang="css">
 @layer components {
   .auto-grid {
-    --auto-grid-min-col-size-small: 250px;
-    --auto-grid-min-col-size-default: 300px;
-    --auto-grid-min-col-size-large: 350px;
-    --auto-grid-gap: 1rem;
-
     display: grid;
-    gap: var(--auto-grid-gap);
+    gap: var(--auto-grid-gap, 1rem);
 
     &:not(.is-responsive) {
-      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default, 300px), 100%), 1fr));
     }
 
     &.is-responsive {
-      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-small), 100%), 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-small, 250px), 100%), 1fr));
 
       @container (width >= 768px) {
-        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default, 300px), 100%), 1fr));
       }
 
       @container (width >= 1024px) {
-        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-large), 100%), 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-large, 350px), 100%), 1fr));
       }
     }
   }

package/app/components/01.atoms/grids/auto-grid/CONSUMER-STYLING.md

@@ -0,0 +1,76 @@
+# AutoGrid — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--auto-grid-gap` | `1rem` | Gap between grid items |
+| `--auto-grid-min-col-size-default` | `300px` | Minimum column width when `is-responsive` is off; the 768px+ step when it's on |
+| `--auto-grid-min-col-size-small` | `250px` | Minimum column width below 768px container width (`is-responsive` only) |
+| `--auto-grid-min-col-size-large` | `350px` | Minimum column width at 1024px+ container width (`is-responsive` only) |
+
+Columns use `repeat(auto-fit, minmax(min(<min-col-size>, 100%), 1fr))`, so a column never
+overflows a container narrower than the minimum. There is no column-count token: to fix the count,
+override `grid-template-columns` directly (see Notes).
+
+No private `--_` tokens.
+
+> Changed 2026-09-27: the four tokens used to be declared on `.auto-grid` itself, so a value set
+> on a page or section ancestor never landed (only a value set on the grid element itself did).
+> The defaults now live as `var()` fallbacks at the point of use, so ancestor values inherit in.
+
+---
+
+## State hooks
+
+| Hook | When | Effect |
+|---|---|---|
+| `.auto-grid` | Always | Root element |
+| `.auto-grid.is-responsive` | `is-responsive` prop is `true` | Column minimum steps small → default → large via `@container` queries at 768px and 1024px |
+
+The breakpoints are container queries, so `is-responsive` needs an ancestor with
+`container-type: inline-size`. Without one, the small size applies at every width.
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --auto-grid-gap: 2.4rem;
+}
+```
+
+---
+
+## 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`.
+
+### One instance
+
+```vue
+<AutoGrid style="--auto-grid-min-col-size-default: 200px; --auto-grid-gap: 2rem;">
+  ...
+</AutoGrid>
+```
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `.auto-grid` element (the grid container
+itself). It's the usual hook for per-instance token overrides or for replacing
+`grid-template-columns` outright.
+
+---
+
+## Notes
+
+- **Fixed column count**: there's no token for it. Override `grid-template-columns` on the root,
+  e.g. `style="grid-template-columns: repeat(3, 1fr)"` or an unlayered rule on a passthrough class.
+- AutoGrid adds no styling to slot content. Each named slot's root element becomes one grid item.

package/app/components/01.atoms/grids/auto-grid/stories/AutoGrid.stories.ts

@@ -92,8 +92,8 @@ const Template: StoryFn<AutoGridArgs> = (args) => ({
     return { args, cssTokenStyle };
   },
   template: `
-    <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">
+    <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;" :style="cssTokenStyle">
+      <AutoGridComponent :tag="args.tag" :is-responsive="args.isResponsive" :style-class-passthrough="args.styleClassPassthrough">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -258,7 +258,7 @@ export const SemanticSection: StoryFn<AutoGridArgs> = (args) => ({
   },
   template: `
     <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
-      <AutoGridComponent tag="section">
+      <AutoGridComponent tag="section" aria-label="Practice stats">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -284,7 +284,8 @@ export const SemanticSection: StoryFn<AutoGridArgs> = (args) => ({
 SemanticSection.parameters = {
   docs: {
     description: {
-      story: "Rendered as a `<section>` — `aria-labelledby` is automatically applied via `useAriaLabelledById`.",
+      story:
+        "Rendered as a `<section>`. AutoGrid has no heading of its own and never sets `aria-labelledby`, so pass `aria-label` when a landmark tag needs an accessible name.",
     },
   },
 };

package/app/components/01.atoms/grids/auto-grid/tests/AutoGrid.spec.ts

@@ -76,6 +76,14 @@ describe("AutoGrid", () => {
     }
   );
 
+  it("passes a consumer aria-label through to the root", async () => {
+    const wrapper = await mountSuspended(AutoGrid, {
+      props: { tag: "section" },
+      attrs: { "aria-label": "Practice stats" },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Practice stats");
+  });
+
   // ─── isResponsive ────────────────────────────────────────────────────────
 
   it("does not have is-responsive class by default", async () => {

package/app/components/01.atoms/grids/column-flow-grid/CONSUMER-STYLING.md

@@ -13,7 +13,7 @@ part of the public token API. See `.claude/skills/components/column-flow-grid.md
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 ```css
 :where(html) {
@@ -24,10 +24,19 @@ part of the public token API. See `.claude/skills/components/column-flow-grid.md
 
 ---
 
-## Per-instance overrides
+## 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`.
+
+### One instance
 
 ```vue
 <ColumnFlowGrid style="--column-flow-grid-item-border-colour: var(--gold-04);">
   ...
 </ColumnFlowGrid>
 ```
+

package/app/components/01.atoms/grids/grid-stack/CONSUMER-STYLING.md

@@ -0,0 +1,76 @@
+# GridStack — Consumer Styling Guide
+
+## Public token API
+
+None. GridStack is pure layout: one grid area that every layer shares. It has no colours,
+spacing or sizes of its own to expose, so styling happens on the root and layer classes below, or
+on the content you put in each slot.
+
+No private `--_` tokens.
+
+---
+
+## State hooks
+
+| Class | Element |
+|---|---|
+| `.grid-stack` | Root element (`display: grid; grid-template-areas: "stack"`) |
+| `.grid-stack__layer` | Wrapper div around each slot, all sharing `grid-area: stack` |
+
+There are no `data-*` attributes or state classes.
+
+---
+
+## Stacking model
+
+- **DOM order is z-order**: the last slot paints on top. There is no built-in `z-index`.
+- The container sizes to the tallest layer, and every layer stretches to that height. Use
+  `align-self`/`place-items` on a layer's own content to position it within the stretched space.
+- For an overlay that shouldn't block the layer beneath it, put `pointer-events: none` on the
+  overlay content and `pointer-events: auto` back on its interactive children.
+
+---
+
+## 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:** GridStack has no tokens, so in practice "overrides" here means plain property rules on
+`.grid-stack` or `.grid-stack__layer` (scoped to your own page/section/passthrough class). Rules on
+`.grid-stack__layer` reach inside the component, so they need `:deep()` from a scoped file.
+
+### Page or section
+
+```css
+.my-page {
+  .grid-stack {
+    block-size: 60rem;
+    border-radius: 1.2rem;
+    overflow: hidden;
+  }
+
+  .grid-stack__layer:last-child {
+    display: grid;
+    place-items: center;
+  }
+}
+```
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `.grid-stack` element. A plain `class`
+attribute also falls through to the same element, since GridStack has a single root.
+
+---
+
+## Notes
+
+- Layer wrappers are keyed by slot name, so slot names must be unique.
+- Adding `z-index` to a layer for other reasons creates a new stacking context; DOM order still
+  decides everything else.

package/app/components/01.atoms/grids/grid-stack/GridStack.vue

@@ -17,7 +17,12 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 </script>
 
 <style lang="css">

package/app/components/01.atoms/grids/grid-stack/stories/GridStack.stories.ts

@@ -8,7 +8,7 @@ interface GridStackArgs {
 }
 
 export default {
-  title: "Atoms/Layout/GridStack",
+  title: "Atoms/Grids/GridStack",
   component: GridStackComponent,
   argTypes: {
     tag: {

package/app/components/01.atoms/grids/grid-stack/tests/GridStack.spec.ts

@@ -63,4 +63,39 @@ describe("GridStack", () => {
     expect(wrapper.classes()).toContain("class-a");
     expect(wrapper.classes()).toContain("class-b");
   });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { styleClassPassthrough: ["original"] },
+    });
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+
+  it("always has the grid-stack class", async () => {
+    const wrapper = await mountSuspended(GridStack);
+    expect(wrapper.classes()).toContain("grid-stack");
+  });
+
+  it("passes a consumer aria-label through to the root", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { tag: "section" },
+      attrs: { "aria-label": "Hero" },
+    });
+    expect(wrapper.attributes("aria-label")).toBe("Hero");
+    expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  it("renders the base layer first so later slots paint on top", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      slots: {
+        "layer-1": "<div class='base'>Base</div>",
+        "layer-2": "<div class='overlay'>Overlay</div>",
+      },
+    });
+    const layers = wrapper.findAll(".grid-stack__layer");
+    expect(layers[0]!.find(".base").exists()).toBe(true);
+    expect(layers[1]!.find(".overlay").exists()).toBe(true);
+  });
 });

package/app/components/01.atoms/grids/masonry-grid/CONSUMER-STYLING.md

@@ -14,7 +14,7 @@ computed in JS from measured pixel values. See `.claude/skills/components/masonr
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 ```css
 :where(html) {
@@ -26,10 +26,19 @@ computed in JS from measured pixel values. See `.claude/skills/components/masonr
 
 ---
 
-## Per-instance overrides
+## 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`.
+
+### One instance
 
 ```vue
 <MasonryGrid style="--masonry-grid-item-border-colour: var(--gold-04);">
   ...
 </MasonryGrid>
 ```
+

package/app/components/01.atoms/navigation/breadcrumb/Breadcrumb.vue

@@ -42,17 +42,12 @@ watch(
 <style lang="css">
 @layer components {
   .breadcrumb {
-    --_font-size: var(--breadcrumb-font-size, 1.3rem);
     --_gap: var(--breadcrumb-gap, 0.8rem);
-    --_text-transform: var(--breadcrumb-text-transform, uppercase);
-    --_letter-spacing: var(--breadcrumb-letter-spacing, 0.05em);
     --_colour: var(--breadcrumb-colour, currentColor);
-    --_colour-current: var(--breadcrumb-colour-current, var(--breadcrumb-colour, currentColor));
-    --_link-decoration-hover: var(--breadcrumb-link-decoration-hover, underline);
 
-    font-size: var(--_font-size);
-    text-transform: var(--_text-transform);
-    letter-spacing: var(--_letter-spacing);
+    font-size: var(--breadcrumb-font-size, 1.3rem);
+    text-transform: var(--breadcrumb-text-transform, uppercase);
+    letter-spacing: var(--breadcrumb-letter-spacing, 0.05em);
 
     .breadcrumb__list {
       display: flex;
@@ -76,7 +71,7 @@ watch(
     }
 
     .breadcrumb__label[aria-current="page"] {
-      color: var(--_colour-current);
+      color: var(--breadcrumb-colour-current, var(--breadcrumb-colour, currentColor));
     }
 
     .breadcrumb__link {
@@ -84,7 +79,7 @@ watch(
 
       &:hover,
       &:focus-visible {
-        text-decoration: var(--_link-decoration-hover);
+        text-decoration: var(--breadcrumb-link-decoration-hover, underline);
       }
     }