@pnx-mixtape/mxds 0.0.29 → 0.1.0-rc.0

package/src/Atom/DefinitionList/DefinitionList.stories.ts

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./definition-list.twig"
+import DefinitionListItem from "./definition-list-item.twig"
 import "../_base.css"
 import { DefinitionList as DefinitionListType } from "@pnx-mixtape/ids-shape"
-import { Icons } from "../../enums"
 
 /**
  * The definition list is useful for categorising short pieces of content.
@@ -13,31 +13,31 @@ const meta: Meta<DefinitionListType> = {
   component: Component,
   args: {
     items: [
-      {
+      DefinitionListItem({
         title: "Some title",
         content: "Some content",
-      },
-      {
+      }),
+      DefinitionListItem({
         title: "Another title",
         content: "More content",
-      },
-      {
+      }),
+      DefinitionListItem({
         title: "Yet another title",
         content: "And even more content",
-      },
-    ],
+      }),
+    ].join(""),
   },
   argTypes: {
     items: {
       description:
-        "A list of title/content objects to use, where title is the `<dt>` value and content is the `<dd>` value.",
+        "A concatenated string of [DefinitionListItem](/?path=/docs/atom-definitionlist-definitionlistitem--docs) markup, where title is the `<dt>` value and content is the `<dd>` value.",
       type: {
         name: "other",
         required: true,
-        value: "array",
+        value: "string",
       },
       table: {
-        type: { summary: "{ title: string, content: string }[]" },
+        type: { summary: "string" },
       },
     },
   },

package/src/Atom/DefinitionList/DefinitionListItem.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=46-10
+// source=src/Atom/DefinitionList/DefinitionList.tsx
+// component=DefinitionListItem
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const titleHandle = instance.findText("Title")
+const title = titleHandle.type === "TEXT" ? titleHandle.textContent : ""
+const content = instance.getSlot("Content")
+
+export default {
+  example: figma.code`<DefinitionListItem title="${title}">${content}</DefinitionListItem>`,
+  imports: ['import { DefinitionListItem } from "@pnx-mixtape/mxds/react"'],
+  id: "definition-list-item",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Atom/DefinitionList/DefinitionListItem.stories.ts

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./definition-list-item.twig"
+import "../_base.css"
+import { DefinitionListItem as DefinitionListItemType } from "@pnx-mixtape/ids-shape"
+
+/**
+ * A single title/content pair used by [DefinitionList](/?path=/docs/atom-definitionlist--docs).
+ */
+const meta: Meta<DefinitionListItemType> = {
+  tags: ["autodocs", "ids-mvp", "no-snapshot"],
+  component: Component,
+  args: {
+    title: "Some title",
+    content: "Some content",
+  },
+  argTypes: {
+    title: {
+      description: "The `<dt>` value.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    content: {
+      description: "The `<dd>` value.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: { type: { summary: "WysiwygText" } },
+    },
+  },
+  render: args => {
+    return `<dl>${Component({ ...args })}</dl>`
+  },
+}
+
+export default meta
+type Story = StoryObj<DefinitionListItemType>
+
+export const DefinitionListItem: Story = {}

package/src/Atom/DefinitionList/README.md

@@ -0,0 +1,63 @@
+# DefinitionList
+
+A styled `<dl>` for key/value pairs. Each item wraps a `<dt>` (term) and `<dd>` (description) in a `<div>`. No class required — applied globally.
+
+## CSS Import
+
+No dedicated CSS file — base styles come from the global reset. Import `base.css` for all atom defaults:
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/base.css";
+```
+
+## Twig
+
+```twig
+{% include '@mixtape/Atom/DefinitionList/definition-list.twig' with {
+  items: [
+    { title: 'Published', content: '12 April 2026' },
+    { title: 'Author', content: 'Jane Smith' },
+  ],
+} %}
+```
+
+**definition-list.twig props** (`DefinitionList` type from `ids-shape`):
+
+| Prop         | Type                                   | Required | Description                                                     |
+| ------------ | -------------------------------------- | -------- | --------------------------------------------------------------- |
+| `items`      | `DefinitionListItem[]` \| `Collection` | Yes      | Each item renders a `<div>` containing a `<dt>` and `<dd>` pair |
+| `attributes` | `Attribute`                            | No       | Optional Drupal-style attributes object applied to the `<dl>`   |
+
+**DefinitionListItem props:**
+
+| Prop      | Type          | Required | Description                         |
+| --------- | ------------- | -------- | ----------------------------------- |
+| `title`   | `string`      | Yes      | Term — renders inside `<dt>`        |
+| `content` | `WysiwygText` | Yes      | Description — renders inside `<dd>` |
+
+The template is consumed by `ids-shape`'s `DefinitionList` type but does not currently render the optional `title` heading the type declares — pass a heading separately above the include if required.
+
+## HTML
+
+```html
+<dl>
+  <div>
+    <dt>Published</dt>
+    <dd>12 April 2026</dd>
+  </div>
+  <div>
+    <dt>Author</dt>
+    <dd>Jane Smith</dd>
+  </div>
+</dl>
+```
+
+## React
+
+```tsx
+import DefinitionList, { DefinitionListItem } from "@pnx-mixtape/mxds/react"
+;<DefinitionList>
+  <DefinitionListItem title="Published">12 April 2026</DefinitionListItem>
+  <DefinitionListItem title="Author">Jane Smith</DefinitionListItem>
+</DefinitionList>
+```

package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap

@@ -2,18 +2,19 @@
 
 exports[`Definition List 1`] = `
 "<dl>
-      <div>
-      <dt>Some title</dt>
-      <dd>Some content</dd>
-    </div>
-      <div>
-      <dt>Another title</dt>
-      <dd>More content</dd>
-    </div>
-      <div>
-      <dt>Yet another title</dt>
-      <dd>And even more content</dd>
-    </div>
-  </dl>
+  <div>
+  <dt>Some title</dt>
+  <dd>Some content</dd>
+</div>
+<div>
+  <dt>Another title</dt>
+  <dd>More content</dd>
+</div>
+<div>
+  <dt>Yet another title</dt>
+  <dd>And even more content</dd>
+</div>
+
+</dl>
 "
 `;

package/src/Atom/DefinitionList/__snapshots__/DefinitionListItem.stories.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Definition List Item 1`] = `
+"<div>
+  <dt>Some title</dt>
+  <dd>Some content</dd>
+</div>
+"
+`;

package/src/Atom/DefinitionList/definition-list-item.twig

@@ -0,0 +1,4 @@
+<div>
+  <dt>{{ title }}</dt>
+  <dd>{{ content }}</dd>
+</div>

package/src/Atom/DefinitionList/definition-list.twig

@@ -1,9 +1,4 @@
 {% set attributes = attributes ?? create_attribute() %}
 <dl{{ attributes }}>
-  {% for item in items %}
-    <div>
-      <dt>{{ item.title }}</dt>
-      <dd>{{ item.content }}</dd>
-    </div>
-  {% endfor %}
+  {{ items }}
 </dl>

package/src/Atom/Heading/Heading.figma.ts

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/aGH90DVE6lrFVdLfDCHnFK/mxds---Design-System?node-id=46-103
+// source=src/Atom/Heading/Heading.tsx
+// component=Heading
+import figma from "figma"
+
+const instance = figma.selectedInstance
+
+const text = instance.getSlot("Content")
+
+// "Level" conflates two different code props on purpose, matching what each Figma
+// value actually needs: H1–H5 map to `as` (HeadingTypes — the real semantic tag, which
+// also drives the correct size via CSS keyed off the tag itself). "Headline" is a
+// totally different prop (`style`, HeadingStyles.HEADLINE) that can combine with any
+// `as` tag in real usage — modelled here as its own value for simplicity, not
+// implying they're mutually exclusive in code. H6 has NO HeadingTypes member at
+// all (the enum only defines ONE–FIVE / h1–h5) — _headings.css styles h6/
+// .mx-heading--xs, but it's only reachable via a raw className, same shape as
+// Button's Accent gap.
+const level = instance.getEnum("Level", {
+  Headline: "headline",
+  H1: "h1",
+  H2: "h2",
+  H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  H6: "h6",
+})
+
+let props
+if (level === "headline") {
+  props = ` style={[HeadingStyles.HEADLINE]}`
+} else if (level === "h6") {
+  props = ` className="mx-heading--xs"`
+} else {
+  const asMap = { h1: "ONE", h2: "TWO", h3: "THREE", h4: "FOUR", h5: "FIVE" }
+  props = ` as={HeadingTypes.${asMap[level]}}`
+}
+
+export default {
+  example: figma.code`<Heading${props}>${text}</Heading>`,
+  imports: [
+    'import { HeadingStyles } from "@pnx-mixtape/mxds/react"',
+    'import { HeadingTypes } from "@pnx-mixtape/ids-shape"',
+  ],
+  id: "heading",
+  metadata: {
+    nestable: true,
+  },
+}

package/src/Atom/Heading/Heading.stories.ts

@@ -2,11 +2,17 @@ import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./heading.twig"
 import "../_base.css"
 import { Heading as HeadingType, HeadingTypes } from "@pnx-mixtape/ids-shape"
+import ExampleComponent from "./twig/heading-example.twig"
+import { HeadingStyles } from "../../enums"
+
+type MxHeadingType = HeadingType & {
+  style?: HeadingStyles[]
+}
 
 /**
  * Heading element should always follow correct html heading order. The modifier class can be used to visually change the size when needed.
  */
-const meta: Meta<HeadingType> = {
+const meta: Meta<MxHeadingType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
@@ -25,13 +31,20 @@ const meta: Meta<HeadingType> = {
     },
     modifiers: {
       description: "The visual heading size (only one applies)",
-      // @todo add mixtapes heading modifiers.
       options: Object.values(HeadingTypes),
       control: "multi-select",
       table: {
         type: { summary: "enum" },
       },
     },
+    style: {
+      description: "The visual heading styles",
+      options: Object.values(HeadingStyles),
+      control: "multi-select",
+      table: {
+        type: { summary: "enum" },
+      },
+    },
     title: {
       description: "The heading text",
       type: "string",
@@ -68,3 +81,7 @@ export const Resized: Story = {
     modifiers: [HeadingTypes.FOUR],
   },
 }
+
+export const Example: Story = {
+  render: args => `<div class="mx-rich-text mx-vertical-flow">${ExampleComponent(args)}</div>`,
+}

package/src/Atom/Heading/Heading.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 import Component from "./Heading"
-import { HeadingLevels, HeadingStyles } from "../../enums"
+import { HeadingStyles } from "../../enums"
 import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
@@ -8,12 +9,16 @@ const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
   args: {
-    as: HeadingLevels.TWO,
+    as: HeadingTypes.TWO,
     children: "Heading",
   },
   argTypes: {
-    as: { options: Object.values(HeadingLevels) },
-    modifier: { options: Object.values(HeadingStyles) },
+    as: { options: Object.values(HeadingTypes) },
+    modifiers: { options: Object.values(HeadingTypes), control: "multi-select" },
+    style: {
+      options: Object.values(HeadingStyles),
+      control: "multi-select",
+    },
   },
 }
 export default meta

package/src/Atom/Heading/Heading.tsx

@@ -1,26 +1,43 @@
 import { PropsWithChildren, JSX, useRef, useState, useEffect } from "react"
 import classNames from "classnames"
 import { makeAnchor } from "../../Utility/utilities"
-import { HeadingStyles } from "../../enums"
+import { EMPTY_ARRAY, HeadingStyles } from "../../enums"
 import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 export type HeadingProps = PropsWithChildren & {
   as?: HeadingTypes
-  modifier?: HeadingTypes | HeadingStyles
+  modifiers?: HeadingTypes[]
+  style?: HeadingStyles[]
   className?: string
   id?: string
+  /**
+   * When true, adds the `is-excluded` class. Used by InPageNavigation and
+   * other auto-generated outlines to skip this heading.
+   */
+  excluded?: boolean
+}
+
+export const HeadingModifierClass = {
+  [HeadingTypes.ONE]: "mx-heading--xxl",
+  [HeadingTypes.TWO]: "mx-heading--xl",
+  [HeadingTypes.THREE]: "mx-heading--l",
+  [HeadingTypes.FOUR]: "mx-heading--m",
+  [HeadingTypes.FIVE]: "mx-heading--s",
 }
 
 const Heading = ({
   children,
   as = HeadingTypes.TWO,
-  modifier,
+  modifiers = EMPTY_ARRAY,
+  style,
   className,
   id,
+  excluded,
   ...props
 }: HeadingProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
   const ref = useRef<HTMLHeadingElement>(null)
+  const modifierClass = modifiers.map(modifier => HeadingModifierClass[modifier])
   const [anchor, setAnchor] = useState(id)
 
   useEffect(() => {
@@ -30,7 +47,12 @@ const Heading = ({
   }, [anchor, ref])
 
   return (
-    <Tag className={classNames(modifier, className)} id={anchor} ref={ref} {...props}>
+    <Tag
+      className={classNames(modifierClass, className, style, { "is-excluded": excluded })}
+      id={anchor}
+      ref={ref}
+      {...props}
+    >
       {children}
     </Tag>
   )

package/src/Atom/Heading/README.md

@@ -0,0 +1,125 @@
+# Heading
+
+Typographic heading styles for `h1`–`h6` and utility size classes. Sizes use fluid `clamp()` scaling based on container inline size (`cqi`). Auto-generates an `id` anchor from text content (React only).
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/Heading/_headings.css";
+```
+
+## Twig
+
+```twig
+{# Semantic h2 at default size #}
+{% include '@mixtape/Atom/Heading/heading.twig' with {
+  as: 'h2',
+  title: 'Section heading',
+} %}
+
+{# Semantic h2 displayed at h1 size — pass a HeadingTypes value via modifiers #}
+{% include '@mixtape/Atom/Heading/heading.twig' with {
+  as: 'h2',
+  title: 'Page title',
+  modifiers: ['h1'],
+} %}
+
+{# Visually hidden heading (kept in the document outline for AT) #}
+{% include '@mixtape/Atom/Heading/heading.twig' with {
+  as: 'h2',
+  title: 'Filters',
+  srOnly: true,
+} %}
+```
+
+**heading.twig props** (`Heading` type from `ids-shape`):
+
+| Prop         | Type             | Required | Description                                                                                                                             |
+| ------------ | ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`         | `HeadingTypes`   | Yes      | Semantic element — one of `h1`–`h6`. Defaults to `h2` if not supplied                                                                   |
+| `title`      | `string`         | Yes      | Visible heading text                                                                                                                    |
+| `modifiers`  | `HeadingTypes[]` | No       | Visual size override mapped to `mx-heading--{xxl,xl,l,m,s}`. The last `h1`–`h5` value in the array wins; `h6` has no class output       |
+| `excluded`   | `boolean`        | No       | Adds `is-excluded` so `<mx-in-page-navigation>` skips this heading when building its index                                              |
+| `srOnly`     | `boolean`        | No       | Adds `sr-only` — heading remains in the document outline but is visually hidden                                                         |
+| `icon`       | `Icon`           | No       | Optional rendered Icon atom (declared on the type but not currently consumed by `heading.twig` — author it inline in `title` if needed) |
+| `attributes` | `Attribute`      | No       | Optional Drupal-style attributes object — modifier classes are merged on top                                                            |
+
+The `modifiers` array is iterated and each `h1`–`h5` value is translated to the matching `mx-heading--*` size class (h1→xxl, h2→xl, h3→l, h4→m, h5→s). This lets you decouple the semantic level (`as`) from the visual size — render an `h2` that looks like an `h1`, etc.
+
+## HTML
+
+```html
+<h1>Heading (xxl)</h1>
+<h2>Heading (xl)</h2>
+<h3>Heading (l)</h3>
+<h4>Heading (ml)</h4>
+<h5>Heading (m — body size)</h5>
+<h6>Heading (s)</h6>
+```
+
+`h5` renders at body-copy size and `h6` renders smaller than body — pick the semantic level for document outline, then add a size class if you need a different visual treatment.
+
+## React
+
+```tsx
+import { Heading } from "@pnx-mixtape/mxds/react"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { HeadingStyles } from "../../enums"
+
+// Semantic h2, displayed at h1 size
+<Heading as={HeadingTypes.TWO} modifier={HeadingTypes.ONE}>Page Title</Heading>
+
+// Section label style
+<Heading as={HeadingTypes.THREE} style={[HeadingStyles.EYEBROW]}>Section Label</Heading>
+```
+
+**Props:** `as?: HeadingTypes` (default: `h2`), `modifier?: HeadingTypes`, `style?: HeadingStyles[]`, `id?: string`, `className?: string`, `excluded?: boolean`.
+
+The `id` prop is auto-set from text content if omitted — useful for in-page anchor links.
+
+## Size classes (decoupled from semantic level)
+
+Apply these to any heading to override its visual size. The "Maps to" column names the underlying `--font-size-*` token, since the modifier names and the token names don't all match (e.g. `mx-heading--m` uses `--font-size-ml`).
+
+| Class             | `HeadingTypes` enum  | Maps to           | Default at desktop |
+| ----------------- | -------------------- | ----------------- | ------------------ |
+| `mx-heading--xxl` | `HeadingTypes.ONE`   | `--font-size-xxl` | base × ratio³      |
+| `mx-heading--xl`  | `HeadingTypes.TWO`   | `--font-size-xl`  | base × ratio²      |
+| `mx-heading--l`   | `HeadingTypes.THREE` | `--font-size-l`   | base × ratio¹      |
+| `mx-heading--m`   | `HeadingTypes.FOUR`  | `--font-size-ml`  | base × ratio^0.5   |
+| `mx-heading--s`   | `HeadingTypes.FIVE`  | `--font-size-m`   | `1rem` (base)      |
+| `mx-heading--xs`  | _(no enum)_          | `--font-size-s`   | base × ratio^-0.25 |
+
+`ratio` is the global `--type-ratio` (default `1.414` desktop / `1.2` mobile — see [DESIGN.md → Typography](../../../DESIGN.md)).
+
+## Special text styles
+
+| Class                  | `HeadingStyles` enum        | Description                                                             |
+| ---------------------- | --------------------------- | ----------------------------------------------------------------------- |
+| `mx-headline`          | `HeadingStyles.HEADLINE`    | Largest heading size at `--font-size-xxxl`.                             |
+| `mx-text--eyebrow`     | `HeadingStyles.EYEBROW`     | Uppercase heading-font label at `--font-size-xs`. Place above a heading |
+| `mx-text--embellished` | `HeadingStyles.EMBELLISHED` | A decorative primary-coloured underbar                                  |
+
+The eyebrow and embellished styles can be combined together or used separately. They're designed for short labels rather than long headings, so the font size is smaller.
+
+## Spacing reset helpers
+
+| Class                      | `HeadingStyles` enum        | Effect                 |
+| -------------------------- | --------------------------- | ---------------------- |
+| `mx-spacing--reset`        | `HeadingStyles.RESET`       | Removes all padding    |
+| `mx-spacing--top-reset`    | `HeadingStyles.RESETTOP`    | Removes top padding    |
+| `mx-spacing--bottom-reset` | `HeadingStyles.RESETBOTTOM` | Removes bottom padding |
+
+## Customisation via CSS custom properties
+
+```css
+h2 {
+  --heading-font-family: "My Custom Font", serif;
+  --heading-font-weight: 900;
+  --font-size-diff: 0.2; /* controls how much the fluid size shrinks at small containers */
+}
+```
+
+---
+
+→ Used in context: `mockups/ArticleListingPage.stories.ts:8`

package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap

@@ -1,5 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Example 1`] = `
+"<div class="mx-rich-text mx-vertical-flow"><div class="mx-headline">Headline: Headliner size</div>
+<h1>Heading xxl: Heading 1</h1>
+<h2>Heading xl: Heading 2</h2>
+<h3>Heading l: Heading 3</h3>
+<h4>Heading m: Heading 4</h4>
+<h5>Heading s: Heading 5</h5>
+<h6>Heading xs: Heading 6</h6>
+
+<h2 class="mx-text--eyebrow mx-text--embellished">Embellished eyebrow</h2>
+<h2 class="mx-text--eyebrow">Normal eyebrow</h2>
+
+<h2 class="mx-text--primary">Text primary: Text classes also apply to headings.</h2>
+<h2 class="mx-background--alt"><span>Background colours can be added combined with headings (and a span) to have inline <u>backgrounds</u> on text.</span></h2>
+</div>"
+`;
+
 exports[`Headings 1`] = `
 "
 <h2>Heading</h2>

package/src/Atom/Heading/_headings.css

@@ -19,6 +19,18 @@
     font-size: var(--heading-font-size, var(--font-size));
     font-weight: var(--heading-font-weight, var(--font-weight-bold));
     text-wrap: balance;
+
+    &[class*="mx-background--"] {
+      background-color: var(--colour-background);
+      color: var(--colour-foreground);
+      color-scheme: var(--colour-scheme);
+
+      & > span {
+        background-color: var(--background, var(--colour-background));
+        color: var(--foreground, var(--colour-foreground));
+        color-scheme: var(--scheme, var(--colour-scheme));
+      }
+    }
   }
 
   @supports (font-size: 1cqi) {
@@ -40,7 +52,7 @@
       );
 
       font-size: clamp(
-        max(var(--base-font-size), var(--font-min)),
+        max(var(--font-size-s), var(--font-min)),
         var(--font-min) + 1cqi,
         var(--heading-font-size)
       );
@@ -68,12 +80,12 @@
 
   h4,
   .mx-heading--m {
-    --heading-font-size: var(--font-size-m);
+    --heading-font-size: var(--font-size-ml);
   }
 
   h5,
   .mx-heading--s {
-    --heading-font-size: var(--base-font-size);
+    --heading-font-size: var(--font-size-m);
   }
 
   h6,

package/src/Atom/Heading/heading.twig

@@ -1,26 +1,30 @@
-{% set style = null %}
+{% set size = null %}
 {% for modifier in modifiers %}
   {% if modifier == "h1" %}
-    {% set style = 'xxl' %}
+    {% set size = 'xxl' %}
   {% endif %}
   {% if modifier == "h2" %}
-    {% set style = 'xl' %}
+    {% set size = 'xl' %}
   {% endif %}
   {% if modifier == "h3" %}
-    {% set style = 'l' %}
+    {% set size = 'l' %}
   {% endif %}
   {% if modifier == "h4" %}
-    {% set style = 'm' %}
+    {% set size = 'm' %}
   {% endif %}
   {% if modifier == "h5" %}
-    {% set style = 's' %}
+    {% set size = 's' %}
   {% endif %}
 {% endfor %}
 {% set classes = [
   excluded ? 'is-excluded' : null,
   srOnly ? 'sr-only' : null,
-  style ? 'mx-heading--'~style : null,
+  size ? 'mx-heading--'~size : null,
+  customClass,
 ] %}
+{% if style is not empty %}
+  {% set classes = classes|merge(style) %}
+{% endif %}
 {% set attributes = (attributes ?? create_attribute()) %}
 {% if classes|join(" ")|trim() %}
   {% set attributes = attributes.addClass(classes) %}