srcdev-nuxt-components 9.6.12 → 9.6.14

package/app/components/01.atoms/text-blocks/eyebrow-text/stories/EyebrowText.stories.ts

@@ -8,42 +8,129 @@ const meta: Meta<typeof EyebrowText> = {
     tag: {
       control: { type: "select" },
       options: ["p", "div", "span"],
-      description: "HTML tag for the text element",
-      defaultValue: "div",
+      description: "HTML tag for the text element. Use `span` inside a line of text.",
+      table: { category: "Basic" },
     },
     fontSize: {
       control: { type: "select" },
       options: ["large", "medium", "small"],
-      description: "Font size",
-      defaultValue: "medium",
+      description: "Size step, set as `data-font-size` and sized by `--eyebrow-text-large/medium/small`.",
+      table: { category: "Basic" },
     },
     textContent: {
-      control: "object",
-      description: "Text content for the eyebrow text element",
-      defaultValue: "Designing Artistry at Home",
+      control: { type: "text" },
+      description: "The label text. Pass it in normal case: the component uppercases it.",
+      table: { category: "Content" },
     },
-    styleClassPassthrough: {
-      control: "object",
-      description: "Additional classes",
-      defaultValue: [],
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    tag: "div",
+    fontSize: "medium",
+    textContent: "Designing Artistry at Home",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A short uppercase label above a heading, filled with the `--eyebrow-text-bg-img` gradient. `textContent` is the label, `fontSize` picks one of three size steps and `tag` the element. Rendered inside `ServicesCard`, `ServiceSummary` and `ServiceDetail`; `ProfileSection` restyles one placed in its slot.",
+      },
     },
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof EyebrowText>;
+
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const parentNote = `
+  <p style="${storyNoteStyle}">
+    In use: the subtitle above the title in
+    <a href="/?path=/story/organisms-services-services-card--config-overrides" target="_top">ServicesCard</a>
+    (size and tag set through <code>eyebrowConfig</code>),
+    <a href="/?path=/story/organisms-services-service-summary--default" target="_top">ServiceSummary</a> and
+    <a href="/?path=/story/organisms-services-service-detail--default" target="_top">ServiceDetail</a>.
+  </p>
+`;
+const parentDocs =
+  "In use: the subtitle in [ServicesCard](?path=/story/organisms-services-services-card--config-overrides) (sized through `eyebrowConfig`), [ServiceSummary](?path=/story/organisms-services-service-summary--default) and [ServiceDetail](?path=/story/organisms-services-service-detail--default).";
+
 export const Default: Story = {
-  args: {
-    tag: "div",
-    fontSize: "medium",
-    textContent: "Designing Artistry at Home",
-    styleClassPassthrough: [],
+  render: (args) => ({
+    components: { EyebrowText },
+    setup() {
+      return { args };
+    },
+    template: `<div>${parentNote}<EyebrowText v-bind="args" /></div>`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: `Default \`div\` at the \`medium\` size. Use the Controls panel to change the tag, size and text. ${parentDocs}`,
+      },
+    },
   },
+};
+
+export const Sizes: Story = {
   render: (args) => ({
     components: { EyebrowText },
     setup() {
       return { args };
     },
-    template: `<EyebrowText v-bind="args" />`,
+    template: `
+      ${parentNote}
+      <div style="display: grid; gap: 1.2rem;">
+        <EyebrowText v-bind="args" font-size="large" />
+        <EyebrowText v-bind="args" font-size="medium" />
+        <EyebrowText v-bind="args" font-size="small" />
+      </div>
+    `,
   }),
+  parameters: {
+    docs: {
+      description: {
+        story: `The three \`fontSize\` steps, largest first. ${parentDocs}`,
+      },
+    },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  render: () => ({
+    components: { EyebrowText },
+    template: `
+      <div style="display: grid; gap: 2.4rem; padding: 2.4rem; font-size: 1.4rem;">
+        <p style="margin: 0;">Long German copy and an unbroken string in an 18rem column.</p>
+        <div style="display: grid; gap: 1.2rem; inline-size: 18rem; outline: 0.1rem dashed currentColor;">
+          <EyebrowText text-content="Kostenlose Lieferung für alle Bestellungen über einem Mindestbestellwert" font-size="large" />
+          <EyebrowText text-content="Kostenloselieferungfürallebestellungenübereinemmindestbestellwert" />
+          <EyebrowText text-content="https://example.invalid/a/very/long/unbroken/url/with/no/break/opportunity" font-size="small" />
+        </div>
+
+        <p style="margin: 0;">Emoji first, HTML-like text (must show as text), right-to-left text, a single character and an empty string (renders nothing visible).</p>
+        <div style="display: grid; gap: 1.2rem;">
+          <EyebrowText text-content="😀 Emoji at the start" />
+          <EyebrowText text-content="<b>not bold</b>" />
+          <EyebrowText text-content="التوصيل المجاني" dir="rtl" />
+          <EyebrowText text-content="a" />
+          <EyebrowText text-content="" />
+        </div>
+
+        <p style="margin: 0;">Inline <code>span</code> inside a sentence: the italic overhang of the last letter should not be cut off.</p>
+        <p style="margin: 0;">Before <EyebrowText tag="span" text-content="Inline eyebrow WIDTH" font-size="large" /> after.</p>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          "Worst-case text. Check: long copy and unbroken strings wrap inside the dashed column; emoji and right-to-left text keep the gradient fill; HTML-like text shows its tags as text; an empty string adds no visible box; the inline span sits on the line and its last italic letter is fully painted.",
+      },
+    },
+  },
 };

package/app/components/01.atoms/text-blocks/eyebrow-text/tests/EyebrowText.spec.ts

@@ -1,52 +1,55 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import EyebrowText from "../EyebrowText.vue";
 
-describe("EyebrowText", () => {
-  // ─── Mount ───────────────────────────────────────────────────────────────
+type EyebrowProps = InstanceType<typeof EyebrowText>["$props"];
+
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountEyebrow = async (props: EyebrowProps) => {
+  const wrapper = await mountSuspended(EyebrowText, { props });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
 
+describe("EyebrowText", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Hello World" },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Hello World" });
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure with default props", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Featured Collection" },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Featured Collection" });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure with all props set", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: {
-        tag: "p",
-        fontSize: "large",
-        textContent: "New Arrivals",
-        styleClassPassthrough: ["custom-class"],
-      },
+    const wrapper = await mountEyebrow({
+      tag: "p",
+      fontSize: "large",
+      textContent: "New Arrivals",
+      styleClassPassthrough: ["custom-class"],
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure for each tag variant", async () => {
     for (const tag of ["p", "div", "span"] as const) {
-      const wrapper = await mountSuspended(EyebrowText, {
-        props: { tag, textContent: "Snapshot text" },
-      });
+      const wrapper = await mountEyebrow({ tag, textContent: "Snapshot text" });
       expect(wrapper.html()).toMatchSnapshot();
     }
   });
 
   it("renders correct HTML structure for each fontSize variant", async () => {
     for (const fontSize of ["large", "medium", "small"] as const) {
-      const wrapper = await mountSuspended(EyebrowText, {
-        props: { fontSize, textContent: "Snapshot text" },
-      });
+      const wrapper = await mountEyebrow({ fontSize, textContent: "Snapshot text" });
       expect(wrapper.html()).toMatchSnapshot();
     }
   });
@@ -54,154 +57,101 @@ describe("EyebrowText", () => {
   // ─── Tag rendering ───────────────────────────────────────────────────────
 
   it("renders as <div> by default", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Default tag" },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Default tag" });
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
-  it("renders as <p> when tag='p'", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { tag: "p", textContent: "Paragraph tag" },
-    });
-    expect(wrapper.element.tagName).toBe("P");
-  });
-
-  it("renders as <span> when tag='span'", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { tag: "span", textContent: "Span tag" },
-    });
-    expect(wrapper.element.tagName).toBe("SPAN");
-  });
-
-  it("renders as <div> when tag='div'", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { tag: "div", textContent: "Div tag" },
-    });
-    expect(wrapper.element.tagName).toBe("DIV");
+  it.each([
+    ["p", "P"],
+    ["span", "SPAN"],
+    ["div", "DIV"],
+  ] as const)("renders as <%s> when tag='%s'", async (tag, tagName) => {
+    const wrapper = await mountEyebrow({ tag, textContent: "Tag" });
+    expect(wrapper.element.tagName).toBe(tagName);
   });
 
-  // ─── Base class ──────────────────────────────────────────────────────────
-
   it("always has the eyebrow-text class", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Base class check" },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Base class check" });
     expect(wrapper.classes()).toContain("eyebrow-text");
   });
 
-  // ─── fontSize class ──────────────────────────────────────────────────────
+  // ─── fontSize ────────────────────────────────────────────────────────────
 
-  it("applies the medium class by default", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Default fontSize" },
-    });
-    expect(wrapper.classes()).toContain("medium");
+  it("sets data-font-size='medium' by default", async () => {
+    const wrapper = await mountEyebrow({ textContent: "Default fontSize" });
+    expect(wrapper.attributes("data-font-size")).toBe("medium");
   });
 
-  it("applies the large class when fontSize='large'", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { fontSize: "large", textContent: "Large text" },
-    });
-    expect(wrapper.classes()).toContain("large");
+  it.each(["large", "medium", "small"] as const)("sets data-font-size='%s'", async (fontSize) => {
+    const wrapper = await mountEyebrow({ fontSize, textContent: "Sized" });
+    expect(wrapper.attributes("data-font-size")).toBe(fontSize);
   });
 
-  it("applies the small class when fontSize='small'", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { fontSize: "small", textContent: "Small text" },
-    });
-    expect(wrapper.classes()).toContain("small");
-  });
-
-  it("applies only one fontSize class at a time", async () => {
-    const fontSizes = ["large", "medium", "small"] as const;
-    for (const fontSize of fontSizes) {
-      const wrapper = await mountSuspended(EyebrowText, {
-        props: { fontSize, textContent: "One class only" },
-      });
-      const otherSizes = fontSizes.filter((s) => s !== fontSize);
-      otherSizes.forEach((size) => {
-        expect(wrapper.classes()).not.toContain(size);
-      });
-    }
+  it("does not put the size on the element as a bare class", async () => {
+    const wrapper = await mountEyebrow({ fontSize: "small", textContent: "No bare class" });
+    expect(wrapper.classes()).toEqual(["eyebrow-text"]);
   });
 
   // ─── textContent ─────────────────────────────────────────────────────────
 
   it("renders the textContent string", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "New Arrivals" },
-    });
+    const wrapper = await mountEyebrow({ textContent: "New Arrivals" });
     expect(wrapper.text()).toBe("New Arrivals");
   });
 
   it("renders an empty string without error", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "" },
-    });
+    const wrapper = await mountEyebrow({ textContent: "" });
     expect(wrapper.text()).toBe("");
   });
 
   it("renders textContent with special characters correctly", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Édition Limitée & Co." },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Édition Limitée & Co." });
     expect(wrapper.text()).toBe("Édition Limitée & Co.");
   });
 
+  it("renders HTML-like textContent as text", async () => {
+    const wrapper = await mountEyebrow({ textContent: "<b>not bold</b>" });
+    expect(wrapper.find("b").exists()).toBe(false);
+    expect(wrapper.text()).toBe("<b>not bold</b>");
+  });
+
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a styleClassPassthrough array", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: {
-        textContent: "Styled",
-        styleClassPassthrough: ["class-a", "class-b"],
-      },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Styled", styleClassPassthrough: ["class-a", "class-b"] });
     expect(wrapper.classes()).toContain("class-a");
     expect(wrapper.classes()).toContain("class-b");
   });
 
   it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Styled", styleClassPassthrough: "solo-class" },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Styled", styleClassPassthrough: "solo-class" });
     expect(wrapper.classes()).toContain("solo-class");
   });
 
-  it("renders cleanly with no styleClassPassthrough prop", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "No passthrough" },
-    });
-    expect(wrapper.classes()).toContain("eyebrow-text");
-  });
-
-  // ─── Combined props ───────────────────────────────────────────────────────
-
   it("renders correctly with all props combined", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: {
-        tag: "span",
-        fontSize: "small",
-        textContent: "Limited Edition",
-        styleClassPassthrough: ["promo-label"],
-      },
+    const wrapper = await mountEyebrow({
+      tag: "span",
+      fontSize: "small",
+      textContent: "Limited Edition",
+      styleClassPassthrough: ["promo-label"],
     });
     expect(wrapper.element.tagName).toBe("SPAN");
     expect(wrapper.classes()).toContain("eyebrow-text");
-    // expect(wrapper.classes()).toContain("small");
+    expect(wrapper.attributes("data-font-size")).toBe("small");
     expect(wrapper.classes()).toContain("promo-label");
     expect(wrapper.text()).toBe("Limited Edition");
   });
-});
 
-describe("EyebrowText styleClassPassthrough reactivity", () => {
   it("updates classes when styleClassPassthrough changes after mount", async () => {
-    const wrapper = await mountSuspended(EyebrowText, {
-      props: { textContent: "Eyebrow", styleClassPassthrough: ["original"] },
-    });
+    const wrapper = await mountEyebrow({ textContent: "Eyebrow", styleClassPassthrough: ["original"] });
     await wrapper.setProps({ styleClassPassthrough: ["updated"] });
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  it("updates data-font-size when fontSize changes after mount", async () => {
+    const wrapper = await mountEyebrow({ textContent: "Eyebrow", fontSize: "small" });
+    await wrapper.setProps({ fontSize: "large" });
+    expect(wrapper.attributes("data-font-size")).toBe("large");
+  });
 });

package/app/components/01.atoms/text-blocks/eyebrow-text/tests/__snapshots__/EyebrowText.spec.ts.snap

@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`EyebrowText > renders correct HTML structure for each fontSize variant 1`] = `"<div class="eyebrow-text large">Snapshot text</div>"`;
+exports[`EyebrowText > renders correct HTML structure for each fontSize variant 1`] = `"<div class="eyebrow-text" data-font-size="large">Snapshot text</div>"`;
 
-exports[`EyebrowText > renders correct HTML structure for each fontSize variant 2`] = `"<div class="eyebrow-text medium">Snapshot text</div>"`;
+exports[`EyebrowText > renders correct HTML structure for each fontSize variant 2`] = `"<div class="eyebrow-text" data-font-size="medium">Snapshot text</div>"`;
 
-exports[`EyebrowText > renders correct HTML structure for each fontSize variant 3`] = `"<div class="eyebrow-text small">Snapshot text</div>"`;
+exports[`EyebrowText > renders correct HTML structure for each fontSize variant 3`] = `"<div class="eyebrow-text" data-font-size="small">Snapshot text</div>"`;
 
-exports[`EyebrowText > renders correct HTML structure for each tag variant 1`] = `"<p class="eyebrow-text medium">Snapshot text</p>"`;
+exports[`EyebrowText > renders correct HTML structure for each tag variant 1`] = `"<p class="eyebrow-text" data-font-size="medium">Snapshot text</p>"`;
 
-exports[`EyebrowText > renders correct HTML structure for each tag variant 2`] = `"<div class="eyebrow-text medium">Snapshot text</div>"`;
+exports[`EyebrowText > renders correct HTML structure for each tag variant 2`] = `"<div class="eyebrow-text" data-font-size="medium">Snapshot text</div>"`;
 
-exports[`EyebrowText > renders correct HTML structure for each tag variant 3`] = `"<span class="eyebrow-text medium">Snapshot text</span>"`;
+exports[`EyebrowText > renders correct HTML structure for each tag variant 3`] = `"<span class="eyebrow-text" data-font-size="medium">Snapshot text</span>"`;
 
-exports[`EyebrowText > renders correct HTML structure with all props set 1`] = `"<p class="eyebrow-text custom-class large">New Arrivals</p>"`;
+exports[`EyebrowText > renders correct HTML structure with all props set 1`] = `"<p class="eyebrow-text custom-class" data-font-size="large">New Arrivals</p>"`;
 
-exports[`EyebrowText > renders correct HTML structure with default props 1`] = `"<div class="eyebrow-text medium">Featured Collection</div>"`;
+exports[`EyebrowText > renders correct HTML structure with default props 1`] = `"<div class="eyebrow-text" data-font-size="medium">Featured Collection</div>"`;

package/app/components/01.atoms/text-blocks/header-block/CONSUMER-STYLING.md

@@ -1,25 +1,27 @@
 # HeaderBlock — Consumer Styling Guide
 
-## No component-owned CSS tokens
+## Public token API
 
-`HeaderBlock` has no `<style>` block of its own. Visual size comes from applying one of six global
-`.page-heading-1`–`.page-heading-6` utility classes (`classLevel` prop), defined in
-`app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-heading.css`:
+`HeaderBlock` has no tokens of its own, public or private (`--_`). Its own style block only sets
+`overflow-wrap: anywhere` on `.header-block`, so an unbroken word or URL wraps instead of
+overflowing its column.
 
-```css
-.page-heading-1 { font-size: var(--step-8); }
-.page-heading-2 { font-size: var(--step-7); }
-/* … down to .page-heading-6 { font-size: var(--step-3); } */
-```
+Visual size comes from one of six global `.page-heading-1`–`.page-heading-6` utility classes (the
+`classLevel` prop), defined in
+`app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-heading.css`:
 
-Each size is a fluid type-scale token (`--step-3` through `--step-8`, defined globally, not by
-this component) — override those tokens at a page/section scope to change every `page-heading-*`
-element's size at once, not just this component's.
+| Class | `font-size` |
+|---|---|
+| `.page-heading-1` | `var(--step-8)` |
+| `.page-heading-2` | `var(--step-7)` |
+| `.page-heading-3` | `var(--step-6)` |
+| `.page-heading-4` | `var(--step-5)` |
+| `.page-heading-5` | `var(--step-4)` |
+| `.page-heading-6` | `var(--step-3)` |
 
-All six levels also reset `margin-block: 0rem` and `padding-block: 0rem` (instead of relying on the
-browser's own per-level heading margins, which vary by `<h1>`–`<h6>` and would otherwise fight
-`classLevel`/`tagLevel` being independent). This is a deliberate blank slate — add spacing in your
-own CSS rather than expecting a level to come with baked-in margin:
+All six also set `font-weight: 600`, `line-height: 1`, and reset `margin-block` and `padding-block`
+to `0rem` instead of relying on the browser's per-level heading margins, which would fight
+`classLevel` and `tagLevel` being independent. Add spacing in your own CSS:
 
 ```css
 .my-page .page-heading-1 {
@@ -29,13 +31,27 @@ own CSS rather than expecting a level to come with baked-in margin:
 
 ---
 
+## State hooks
+
+No state attributes. Classes on the root `<h1>`–`<h6>`:
+
+| Class | Meaning |
+|---|---|
+| `.header-block` | Always present |
+| `.page-heading-{1-6}` | The `classLevel` prop (out-of-range values fall back to `1`) |
+
+> Changed 2026-10-19: `.header-block` is new. Before, the root carried only the
+> `.page-heading-*` class and passthrough classes.
+
+---
+
 ## Local overrides
 
-There are no public tokens, so override the classes above with direct properties, scoped to an
-element you own (a page or section class, or a class added with `:style-class-passthrough`). Keep
-the block **unlayered** (no `@layer` wrapper) so it beats the library's `@layer components`. If your
-own file uses `<style scoped>`, selectors that reach inside the component need `:deep()`. Patterns
-and examples: `.claude/skills/component-local-style-override.md`.
+There are no public tokens, so override with direct properties, scoped to an element you own (a
+page or section class, or a class added with `:style-class-passthrough`). Keep the block
+**unlayered** (no `@layer` wrapper) so it beats the library's `@layer components`. If your own file
+uses `<style scoped>`, selectors that reach inside the component need `:deep()`. Patterns and
+examples: `.claude/skills/component-local-style-override.md`.
 
 **Caveat:** size comes from the global `--step-*` type-scale tokens behind `.page-heading-*`.
 Overriding a `--step-*` token on your own element changes every `page-heading-*` inside it, not just
@@ -43,9 +59,6 @@ this component's.
 
 ### One instance
 
-Use `styleClassPassthrough` to add your own class and override `font-size`/`font-weight`/etc. for
-a single `HeaderBlock` instance without touching the shared `.page-heading-*` utility classes:
-
 ```vue
 <HeaderBlock :tag-level="2" :class-level="1" style-class-passthrough="hero-title">Big idea</HeaderBlock>
 ```
@@ -56,3 +69,15 @@ a single `HeaderBlock` instance without touching the shared `.page-heading-*` ut
 }
 ```
 
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root heading element. Reactive after mount.
+
+---
+
+## Notes
+
+- Text arrives through the default slot, so there's no line-clamp token: clamp it in your own
+  markup if needed.

package/app/components/01.atoms/text-blocks/header-block/HeaderBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" :id :class="[classLevelClass, elementClasses]">
+  <component :is="tag" :id class="header-block" :class="[classLevelClass, elementClasses]">
     <slot></slot>
   </component>
 </template>
@@ -48,3 +48,11 @@ watch(
   }
 );
 </script>
+
+<style lang="css">
+@layer components {
+  .header-block {
+    overflow-wrap: anywhere;
+  }
+}
+</style>