srcdev-nuxt-components 9.4.12 → 9.5.1

package/app/components/02.molecules/action-menu/stories/ActionMenu.stories.ts

@@ -1,13 +1,14 @@
 import { computed, ref } from "vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import ActionMenu from "../ActionMenu.vue";
-import ActionMenuItemCore from "../ActionMenuItemCore.vue";
+import ActionMenuItem from "../ActionMenuItem.vue";
 
 // ─── Meta ─────────────────────────────────────────────────────────────────────
 
 interface StoryArgs {
   itemCount?: number;
   label?: string;
+  triggerIcon?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -25,6 +26,11 @@ const meta: Meta<StoryArgs> = {
       description: "Accessible label for both the trigger button and the menu list (`aria-label`)",
       table: { category: "Accessibility" },
     },
+    triggerIcon: {
+      control: { type: "text" },
+      description: "Icon name for the trigger button",
+      table: { category: "Appearance" },
+    },
     styleClassPassthrough: {
       table: { disable: true },
     },
@@ -32,13 +38,14 @@ const meta: Meta<StoryArgs> = {
   args: {
     itemCount: 5,
     label: "Open actions menu",
+    triggerIcon: "lucide:ellipsis",
   },
   parameters: {
     docs: {
       description: {
         component:
           "An ellipsis trigger button that opens an anchored popover menu. " +
-          "Populate the menu via indexed `item-{n}` slots, each containing a single `ActionMenuItemCore`. " +
+          "Populate the menu via indexed `item-{n}` slots, each containing a single `ActionMenuItem`. " +
           "Items can be buttons (omit `href`) or links (internal `/path` → NuxtLink, external URL → `<a>`). " +
           "The menu closes automatically when any item is clicked. " +
           "Set shared CSS tokens globally — see `CONSUMER-STYLING.md` in the component folder.",
@@ -72,7 +79,7 @@ export const Default: Story = {
     itemCount: 5,
   },
   render: (args) => ({
-    components: { ActionMenu, ActionMenuItemCore },
+    components: { ActionMenu, ActionMenuItem },
     setup() {
       // `args` is Storybook's own reactive object — read from it directly (`args.x`) inside
       // these computeds rather than destructuring it into local variables at setup-time, which
@@ -94,11 +101,11 @@ export const Default: Story = {
       <div style="padding: 4rem 8rem; display: flex; flex-direction: column; align-items: flex-end; gap: 2rem;">
         <ActionMenu v-bind="componentArgs">
           <template v-for="item in items" :key="item.slotName" #[item.slotName]>
-            <ActionMenuItemCore :label="item.label" @click="lastAction = item.label">
+            <ActionMenuItem :label="item.label" @click="lastAction = item.label">
               <template #icon>
                 <Icon :name="item.icon" />
               </template>
-            </ActionMenuItemCore>
+            </ActionMenuItem>
           </template>
         </ActionMenu>
         <p v-if="lastAction" style="margin: 0; font-size: 1.3rem; opacity: 0.6;">
@@ -110,7 +117,7 @@ export const Default: Story = {
 };
 
 /**
- * Mixed items — demonstrates the three `ActionMenuItemCore` rendering modes:
+ * Mixed items — demonstrates the three `ActionMenuItem` rendering modes:
  * button (no href), internal link (/path), and external link (https://…).
  */
 export const MixedItems: Story = {
@@ -119,7 +126,7 @@ export const MixedItems: Story = {
     label: "Record actions",
   },
   render: (args) => ({
-    components: { ActionMenu, ActionMenuItemCore },
+    components: { ActionMenu, ActionMenuItem },
     setup() {
       return { args };
     },
@@ -127,24 +134,24 @@ export const MixedItems: Story = {
       <div style="padding: 4rem 8rem; display: flex; justify-content: flex-end;">
         <ActionMenu v-bind="args">
           <template #item-0>
-            <ActionMenuItemCore label="Edit record" @click="() => {}">
+            <ActionMenuItem label="Edit record" @click="() => {}">
               <template #icon><Icon name="lucide:pencil" /></template>
-            </ActionMenuItemCore>
+            </ActionMenuItem>
           </template>
           <template #item-1>
-            <ActionMenuItemCore label="View full profile" href="/profile/123">
+            <ActionMenuItem label="View full profile" href="/profile/123">
               <template #icon><Icon name="lucide:user" /></template>
-            </ActionMenuItemCore>
+            </ActionMenuItem>
           </template>
           <template #item-2>
-            <ActionMenuItemCore label="Open in new tab" href="https://example.com">
+            <ActionMenuItem label="Open in new tab" href="https://example.com">
               <template #icon><Icon name="lucide:external-link" /></template>
-            </ActionMenuItemCore>
+            </ActionMenuItem>
           </template>
           <template #item-3>
-            <ActionMenuItemCore label="Delete record" @click="() => {}">
+            <ActionMenuItem label="Delete record" @click="() => {}">
               <template #icon><Icon name="lucide:trash-2" /></template>
-            </ActionMenuItemCore>
+            </ActionMenuItem>
           </template>
         </ActionMenu>
       </div>
@@ -159,7 +166,7 @@ export const NoIcons: Story = {
   name: "No Icons",
   args: {},
   render: (args) => ({
-    components: { ActionMenu, ActionMenuItemCore },
+    components: { ActionMenu, ActionMenuItem },
     setup() {
       return { args };
     },
@@ -167,13 +174,13 @@ export const NoIcons: Story = {
       <div style="padding: 4rem 8rem; display: flex; justify-content: flex-end;">
         <ActionMenu v-bind="args">
           <template #item-0>
-            <ActionMenuItemCore label="Approve" @click="() => {}" />
+            <ActionMenuItem label="Approve" @click="() => {}" />
           </template>
           <template #item-1>
-            <ActionMenuItemCore label="Request changes" @click="() => {}" />
+            <ActionMenuItem label="Request changes" @click="() => {}" />
           </template>
           <template #item-2>
-            <ActionMenuItemCore label="Reject" @click="() => {}" />
+            <ActionMenuItem label="Reject" @click="() => {}" />
           </template>
         </ActionMenu>
       </div>
@@ -192,7 +199,7 @@ export const InContext: Story = {
     label: "User actions",
   },
   render: (args) => ({
-    components: { ActionMenu, ActionMenuItemCore },
+    components: { ActionMenu, ActionMenuItem },
     setup() {
       const users = [
         { name: "Alex Morgan",    email: "alex@example.com",    role: "Admin" },
@@ -240,24 +247,24 @@ export const InContext: Story = {
           <span style="font-size: 1.2rem; opacity: 0.5; white-space: nowrap;">{{ user.role }}</span>
           <ActionMenu v-bind="args">
             <template #item-0>
-              <ActionMenuItemCore label="Edit user" @click="() => {}">
+              <ActionMenuItem label="Edit user" @click="() => {}">
                 <template #icon><Icon name="lucide:pencil" /></template>
-              </ActionMenuItemCore>
+              </ActionMenuItem>
             </template>
             <template #item-1>
-              <ActionMenuItemCore label="View profile" :href="'/users/' + user.email">
+              <ActionMenuItem label="View profile" :href="'/users/' + user.email">
                 <template #icon><Icon name="lucide:user" /></template>
-              </ActionMenuItemCore>
+              </ActionMenuItem>
             </template>
             <template #item-2>
-              <ActionMenuItemCore label="Reset password" @click="() => {}">
+              <ActionMenuItem label="Reset password" @click="() => {}">
                 <template #icon><Icon name="lucide:key" /></template>
-              </ActionMenuItemCore>
+              </ActionMenuItem>
             </template>
             <template #item-3>
-              <ActionMenuItemCore label="Remove user" @click="() => {}">
+              <ActionMenuItem label="Remove user" @click="() => {}">
                 <template #icon><Icon name="lucide:user-minus" /></template>
-              </ActionMenuItemCore>
+              </ActionMenuItem>
             </template>
           </ActionMenu>
         </div>
@@ -267,15 +274,15 @@ export const InContext: Story = {
 };
 
 /**
- * ActionMenuItemCore — standalone view of the child component in its three
+ * ActionMenuItem — standalone view of the child component in its three
  * rendering modes (button, internal link, external link). Not an interactive
  * menu — use this story to style and test individual item rows.
  */
 export const ItemCoreStandalone: Story = {
-  name: "ActionMenuItemCore — Standalone",
+  name: "ActionMenuItem — Standalone",
   args: {},
   render: () => ({
-    components: { ActionMenuItemCore },
+    components: { ActionMenuItem },
     setup() {
       const lastClick = ref<string | null>(null);
       return { lastClick };
@@ -284,43 +291,43 @@ export const ItemCoreStandalone: Story = {
       <div style="padding: 4rem; max-width: 32rem; margin: 0 auto;">
         <p style="margin: 0 0 1.2rem; font-size: 1.2rem; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.08em;">Button items</p>
         <div style="border: 0.1rem solid light-dark(#e5e7eb, #374151); border-radius: 0.8rem; overflow: hidden;">
-          <ActionMenuItemCore
+          <ActionMenuItem
             label="Edit"
             style="border-bottom: 0.1rem solid light-dark(#e5e7eb, #374151);"
             @click="lastClick = 'Edit'"
           >
             <template #icon><Icon name="lucide:pencil" /></template>
-          </ActionMenuItemCore>
-          <ActionMenuItemCore
+          </ActionMenuItem>
+          <ActionMenuItem
             label="Duplicate"
             style="border-bottom: 0.1rem solid light-dark(#e5e7eb, #374151);"
             @click="lastClick = 'Duplicate'"
           >
             <template #icon><Icon name="lucide:copy" /></template>
-          </ActionMenuItemCore>
-          <ActionMenuItemCore
+          </ActionMenuItem>
+          <ActionMenuItem
             label="Delete"
             @click="lastClick = 'Delete'"
           >
             <template #icon><Icon name="lucide:trash-2" /></template>
-          </ActionMenuItemCore>
+          </ActionMenuItem>
         </div>
 
         <p style="margin: 2.4rem 0 1.2rem; font-size: 1.2rem; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.08em;">Link items</p>
         <div style="border: 0.1rem solid light-dark(#e5e7eb, #374151); border-radius: 0.8rem; overflow: hidden;">
-          <ActionMenuItemCore
+          <ActionMenuItem
             label="Internal link (/about)"
             href="/about"
             style="border-bottom: 0.1rem solid light-dark(#e5e7eb, #374151);"
           >
             <template #icon><Icon name="lucide:arrow-up-right" /></template>
-          </ActionMenuItemCore>
-          <ActionMenuItemCore
+          </ActionMenuItem>
+          <ActionMenuItem
             label="External link"
             href="https://example.com"
           >
             <template #icon><Icon name="lucide:external-link" /></template>
-          </ActionMenuItemCore>
+          </ActionMenuItem>
         </div>
 
         <p v-if="lastClick" style="margin: 1.6rem 0 0; font-size: 1.3rem; opacity: 0.6;">

package/app/components/02.molecules/action-menu/tests/ActionMenu.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { nextTick } from "vue";
+import { defineComponent, nextTick, ref } from "vue";
 import ActionMenu from "../ActionMenu.vue";
 
 // --- Types ---
@@ -454,5 +454,50 @@ describe("ActionMenu", () => {
       wrapper = await createWrapper({ styleClassPassthrough: "extra-class" });
       expect(wrapper.classes()).toContain("action-menu");
     });
+
+    it("updates classes when styleClassPassthrough changes after mount", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["original"] });
+      await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+      expect(wrapper.classes()).not.toContain("original");
+      expect(wrapper.classes()).toContain("updated");
+    });
+  });
+
+  describe("triggerIcon", () => {
+    const triggerIconName = () =>
+      wrapper.find(".action-menu-trigger .iconify").classes().find((c: string) => c.includes(":")) ?? "";
+
+    it("uses the ellipsis icon by default", async () => {
+      wrapper = await createWrapper();
+      expect(triggerIconName()).toContain("lucide:ellipsis");
+    });
+
+    it("uses the triggerIcon prop when given", async () => {
+      wrapper = await createWrapper({ triggerIcon: "lucide:more-vertical" });
+      expect(triggerIconName()).toContain("lucide:more-vertical");
+    });
+  });
+
+  describe("Item slots added after mount", () => {
+    it("renders a list item for an item slot that appears after mount", async () => {
+      const Host = defineComponent({
+        components: { ActionMenu },
+        setup() {
+          const showSecond = ref(false);
+          return { showSecond };
+        },
+        template: `
+          <ActionMenu>
+            <template #item-0><button role="menuitem">One</button></template>
+            <template v-if="showSecond" #item-1><button role="menuitem">Two</button></template>
+          </ActionMenu>
+        `,
+      });
+      const host = await mountSuspended(Host);
+      expect(host.findAll(".action-menu-list-item")).toHaveLength(1);
+      (host.vm as unknown as { showSecond: boolean }).showSecond = true;
+      await nextTick();
+      expect(host.findAll(".action-menu-list-item")).toHaveLength(2);
+    });
   });
 });

package/app/components/02.molecules/action-menu/tests/{ActionMenuItemCore.spec.ts → ActionMenuItem.spec.ts}

@@ -1,17 +1,17 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
-import ActionMenuItemCore from "../ActionMenuItemCore.vue";
+import ActionMenuItem from "../ActionMenuItem.vue";
 
 // --- Helpers ---
 const createWrapper = async (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
-  return mountSuspended(ActionMenuItemCore, {
+  return mountSuspended(ActionMenuItem, {
     props: { label: "Edit item", ...props },
     slots,
   });
 };
 
-describe("ActionMenuItemCore", () => {
+describe("ActionMenuItem", () => {
   let wrapper: Awaited<ReturnType<typeof createWrapper>>;
 
   beforeEach(() => {
@@ -95,9 +95,9 @@ describe("ActionMenuItemCore", () => {
       expect(wrapper.attributes("role")).toBe("menuitem");
     });
 
-    it("has class 'action-menu-item-core'", async () => {
+    it("has class 'action-menu-item'", async () => {
       wrapper = await createWrapper();
-      expect(wrapper.classes()).toContain("action-menu-item-core");
+      expect(wrapper.classes()).toContain("action-menu-item");
     });
   });
 
@@ -146,6 +146,12 @@ describe("ActionMenuItemCore", () => {
       wrapper = await createWrapper();
       expect(wrapper.find(".action-menu-item-arrow").attributes("aria-hidden")).toBe("true");
     });
+
+    it("uses the arrowIcon prop for the arrow icon", async () => {
+      wrapper = await mountSuspended(ActionMenuItem, { props: { label: "Edit", arrowIcon: "lucide:chevron-right" } });
+      const name = wrapper.find(".action-menu-item-arrow .iconify").classes().find((c: string) => c.includes(":")) ?? "";
+      expect(name).toContain("lucide:chevron-right");
+    });
   });
 
   // -------------------------

package/app/components/02.molecules/action-menu/tests/__snapshots__/ActionMenuItem.spec.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ActionMenuItem > Snapshots > as external link 1`] = `
+"<a href="https://example.com" class="action-menu-item" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</a>"
+`;
+
+exports[`ActionMenuItem > Snapshots > as internal link 1`] = `
+"<a href="/about" class="action-menu-item" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</a>"
+`;
+
+exports[`ActionMenuItem > Snapshots > default button (no href) 1`] = `
+"<button type="button" class="action-menu-item" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</button>"
+`;
+
+exports[`ActionMenuItem > Snapshots > with icon slot 1`] = `"<button type="button" class="action-menu-item" role="menuitem"><span class="action-menu-item-icon" aria-hidden="true"><span data-testid="test-icon">⚡</span></span><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span></button>"`;
+
+exports[`ActionMenuItem > Snapshots > with styleClassPassthrough 1`] = `
+"<button type="button" class="action-menu-item custom-class another-class" role="menuitem">
+  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
+</button>"
+`;

package/app/components/02.molecules/alert-content/AlertContent.vue

@@ -3,6 +3,7 @@
     <AlertContentInner
       :theme="theme"
       :custom-icon="customIcon"
+      :show-icon="showIcon"
       :dismissible="dismissible"
       :content-id="contentId"
       :aria-live="ariaLive"
@@ -17,6 +18,9 @@
       <template v-if="slots.content" #content>
         <slot name="content"></slot>
       </template>
+      <template v-if="slots.actions" #actions>
+        <slot name="actions"></slot>
+      </template>
       <template v-if="slots.dismissIcon" #dismissIcon>
         <slot name="dismissIcon"></slot>
       </template>
@@ -33,6 +37,7 @@ import type { SemanticTheme } from "~/types/components";
 interface Props {
   theme: SemanticTheme;
   customIcon?: string;
+  showIcon?: boolean;
   dismissible?: boolean;
   contentId?: string;
   ariaLive?: "polite" | "assertive" | "off";
@@ -40,6 +45,7 @@ interface Props {
 
 withDefaults(defineProps<Props>(), {
   customIcon: undefined,
+  showIcon: true,
   dismissible: false,
   contentId: undefined,
   ariaLive: undefined,
@@ -53,15 +59,18 @@ const slots = useSlots();
 <style lang="css">
 @layer components {
   .alert-content {
-    background-color: var(--theme-accent);
-    border: 0.1rem solid var(--theme-border);
-    border-start-start-radius: 8px;
-    border-end-start-radius: 8px;
-    border-start-end-radius: 4px;
-    border-end-end-radius: 4px;
-    padding-inline-start: 6px;
-    overflow: hidden;
+    --_radius-start: var(--alert-content-border-radius-start, 0.8rem);
+    --_radius-end: var(--alert-content-border-radius-end, 0.4rem);
 
+    display: grid;
+    background-color: var(--alert-content-accent, var(--theme-accent));
+    border: var(--alert-content-border, 0.1rem solid var(--theme-border));
+    border-start-start-radius: var(--_radius-start);
+    border-end-start-radius: var(--_radius-start);
+    border-start-end-radius: var(--_radius-end);
+    border-end-end-radius: var(--_radius-end);
+    padding-inline-start: var(--alert-content-accent-width, 0.6rem);
+    overflow: hidden;
   }
 }
 </style>

package/app/components/02.molecules/alert-content/AlertContentInner.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="alert-content-inner">
-    <div class="alert-content-icon" data-test-id="alert-icon" aria-hidden="true">
+    <div v-if="showIcon" class="alert-content-icon" data-test-id="alert-icon" aria-hidden="true">
       <slot name="icon">
         <Icon :name="customIcon || themeIcon" class="icon" />
       </slot>
     </div>
 
-    <div :id="contentId" class="alert-content-body" :aria-live="ariaLive">
-      <p v-if="slots.title" class="title" data-test-id="alert-title">
-        <slot name="title"></slot>
-      </p>
-      <p v-if="slots.content" class="content" data-test-id="alert-content">
-        <slot name="content"></slot>
-      </p>
+    <div class="alert-content-main">
+      <div :id="contentId" class="alert-content-body" :aria-live="ariaLive">
+        <p v-if="slots.title" class="alert-content-title" data-test-id="alert-title">
+          <slot name="title"></slot>
+        </p>
+        <p v-if="slots.content" class="alert-content-text" data-test-id="alert-content">
+          <slot name="content"></slot>
+        </p>
+      </div>
+
+      <div v-if="slots.actions" class="alert-content-actions" data-test-id="alert-actions">
+        <slot name="actions"></slot>
+      </div>
     </div>
 
     <button
@@ -38,6 +44,7 @@ import type { SemanticTheme } from "~/types/components";
 interface Props {
   theme: SemanticTheme;
   customIcon?: string;
+  showIcon?: boolean;
   dismissible?: boolean;
   contentId?: string;
   ariaLive?: "polite" | "assertive" | "off";
@@ -45,6 +52,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   customIcon: undefined,
+  showIcon: true,
   dismissible: false,
   contentId: undefined,
   ariaLive: undefined,
@@ -73,46 +81,53 @@ const dismissIcon = computed(() => appConfig.srcdev?.alertContent?.dismissIcon ?
 <style lang="css">
 @layer components {
   .alert-content-inner {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 1.2rem;
+    display: flex;
     align-items: center;
-    background-color: var(--_alert-content-inner-bg, var(--theme-surface-subtle));
-    border-start-start-radius: 8px;
-    border-end-start-radius: 8px;
-    padding: 1.2rem 1.5rem;
+    gap: var(--alert-content-gap, 1.2rem);
+    background-color: var(--alert-content-inner-background, var(--theme-surface-subtle));
+    color: var(--alert-content-text-colour, var(--theme-text));
+    border-start-start-radius: var(--alert-content-border-radius-start, 0.8rem);
+    border-end-start-radius: var(--alert-content-border-radius-start, 0.8rem);
+    padding: var(--alert-content-padding, 1.2rem 1.5rem);
     overflow: hidden;
 
     .alert-content-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
 
       .icon {
-        color: var(--theme-text);
+        color: var(--alert-content-icon-colour, currentColor);
         display: inline-block;
-        font-size: 2.5rem;
+        font-size: var(--alert-content-icon-size, 2.5rem);
         font-style: normal;
         font-weight: normal;
         overflow: hidden;
       }
     }
 
+    .alert-content-main {
+      flex: 1;
+      min-width: 0;
+      display: grid;
+      gap: var(--alert-content-actions-spacing, 1.2rem);
+    }
+
     .alert-content-body {
       display: flex;
       flex-direction: column;
-      gap: 0.4rem;
-      color: var(--theme-text);
+      gap: var(--alert-content-body-gap, 0.4rem);
 
-      .title {
-        font-size: var(--step-4);
+      .alert-content-title {
+        font-size: var(--alert-content-title-font-size, var(--step-4));
         font-weight: 600;
         line-height: 1.2;
         margin: 0;
       }
 
-      .content {
-        font-size: var(--step-3);
+      .alert-content-text {
+        font-size: var(--alert-content-text-font-size, var(--step-3));
         font-weight: normal;
         line-height: 1.4;
         margin: 0;
@@ -120,33 +135,45 @@ const dismissIcon = computed(() => appConfig.srcdev?.alertContent?.dismissIcon ?
       }
     }
 
+    .alert-content-actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: var(--alert-content-actions-justify, flex-end);
+      gap: var(--alert-content-actions-gap, 0.8rem);
+    }
+
     .alert-content-dismiss {
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
       background: transparent;
-      border: 0.1rem solid var(--theme-border);
+      border: 0.1rem solid var(--alert-content-dismiss-border-colour, var(--theme-border));
       outline: 0.1rem solid transparent;
       border-radius: 50%;
-      color: var(--theme-text);
+      color: inherit;
       cursor: pointer;
-      flex-shrink: 0;
       padding: 0.5rem;
       transition: all 200ms ease;
 
       .icon {
         color: inherit;
         display: block;
-        font-size: 1.5rem;
+        font-size: var(--alert-content-dismiss-icon-size, 1.5rem);
       }
 
       &:hover,
       &:focus-visible {
-        background-color: var(--theme-surface-hover);
-        color: var(--theme-on-surface);
-        outline: 0.1rem solid var(--theme-ring);
+        background-color: var(--alert-content-dismiss-background-hover, var(--theme-surface-hover));
+        color: var(--alert-content-dismiss-colour-hover, var(--theme-on-surface));
+        outline: 0.1rem solid var(--alert-content-dismiss-ring, var(--theme-ring));
         outline-offset: 0.2rem;
       }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 }