@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/components/eds-accordion/eds-accordion.js

@@ -2,22 +2,13 @@ import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 /**
  * `EdsAccordion` is a flexible, interactive component for expanding and collapsing content sections.
- * It features a customizable header, optional description, and content area that can be dynamically expanded.
- * This component supports a range of configurations, including background toggling, minimum height adjustments,
- * and various styles to suit different layouts and display requirements.
+ * It features a customizable header with optional icon, description, and content area.
  *
- * It includes an optional button or link element within the header, which can be customized for additional interactions.
+ * Supports two visual variants (`default` and `inverse`) matching the card design system,
+ * with hover effects, smooth CSS-driven expand/collapse animation, and optional icon display.
  *
- * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent components
- * to track its open/close status.
- *
- * Key features include:
- * - Header with customizable title
- * - Expandable/collapsible content section
- * - Background color switch on expand and hover
- * - Compact layout option with reduced header height
- * - Adjustable content height and text clamping
- * - Emitted events for tracking changes in expansion state and context
+ * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent
+ * components to track its open/close status.
  */
 export class EdsAccordion {
     constructor() {
@@ -28,8 +19,8 @@ export class EdsAccordion {
         this.handleClick = () => {
             var _a;
             this.isExpanded = !this.isExpanded;
+            this.toggleIcon = this.isExpanded ? 'chevron-down' : 'chevron-right';
             this.accordion.emit(this.isExpanded);
-            this.setPanelHeight();
             sendAnalytics({
                 category: 'ui-component',
                 parentContext: null,
@@ -39,55 +30,30 @@ export class EdsAccordion {
             });
         };
         /**
-         * Calculates and sets the panel height based on the content height
-         * and adjusts based on the `shortContent` and `isExpanded` states.
+         * Handles keyboard activation on the header (Enter and Space keys).
          */
-        this.setPanelHeight = () => {
-            if (this.childContentRef) {
-                this.shortContent =
-                    this.wrapperRef.scrollWidth > 830 && !this.description
-                        ? this.childContentRef.scrollHeight <= 80
-                        : this.childContentRef.scrollHeight <= 20;
-                this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
-            }
-            if (this.headerRef) {
-                this.headerHeight = this.headerRef.scrollHeight - 30;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleClick();
             }
         };
         this.heading = undefined;
         this.description = undefined;
+        this.variant = 'inverse';
+        this.icon = undefined;
         this.switchBg = true;
         this.expanded = false;
         this.clampText = true;
-        this.buttonIntent = 'tertiary';
         this.isExpanded = this.expanded;
-        this.panelHeight = 0;
-        this.shortContent = false;
-        this.headerHeight = 0;
-    }
-    /**
-     * Lifecycle method that sets up the initial panel height and adds a resize event listener
-     * to recalculate height on window resize.
-     */
-    componentDidLoad() {
-        this.setPanelHeight();
-        window.addEventListener('resize', this.setPanelHeight);
+        this.toggleIcon = this.expanded ? 'chevron-down' : 'chevron-right';
     }
-    /**
-     * Lifecycle method that cleans up the resize event listener when the component is removed.
-     */
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.setPanelHeight);
-    }
-    /**
-     * Renders the accordion structure, including header, content, description, and any slotted content.
-     * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
-     */
     render() {
-        return (h("div", { key: '095474500f7c60f20e4d737188001d2f3084dbcc', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
-          ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
-          ${this.switchBg ? 'hover:bg-inverse' : ''}
-          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: 'f090fbe3632df8302046f1178e82b8affc4cc821', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '0a30ab8c27cadbb342fc57f6393111c84f10a664', class: "ml-auto" }, h("eds-button", { key: '01f4658df8181b63b71a2e0d2a67e8f8b58efbb7', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '9f3b5a0e425c2dffe3b6fe40fa33b020d64256d8', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '414735d7d982de76d8a1b8db24aa9a569eba37c7', id: "accordionSection", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '11097a0646b18f728af494c14aa4cc0e5335defe', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '88414c40490aa77166d23868f16556b9356279a7', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '8070a7676ca8fba065f813852a2e0cf4146f3374' })))))));
+        const cardClasses = [
+            'accordion-card',
+            `accordion-card-${this.variant}`
+        ].join(' ');
+        return (h("div", { key: '08061b87dfd54b49f8aa782f29e2a9c5c8bcd2ef', class: cardClasses }, h("div", { key: '728033232d8e6aa348bc98d028a5bd62d32fd934', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (h("div", { key: 'eeb4260c955a2d4394bc3663dc749afc45b6f87f', class: "accordion-icon" }, h("eds-icon-wrapper", { key: '0896625a235bda97a098ac7b9a4ebec00e5fa587', name: this.icon, size: 24 }))), h("div", { key: '3e6b85780bc597a84dc0eb5d2526f9e54c16148d', class: "accordion-header-text" }, h("h3", { key: 'b5c5c0023bc23dc225183736f02683134a40da93', class: "accordion-title" }, this.heading), this.description && (h("p", { key: 'eb04c90cef03a838a4f852b988f3a9984e593120', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), h("eds-icon-wrapper", { key: '583d0bcc82a178c2a47eef586aede9c87e8ea456', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), h("section", { key: '8f820377d639ced2d0a4fe505452b6b408640400', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, h("div", { key: 'd41dc9c3ef21f14df3ca25138440356703fa35ed', class: "accordion-panel-inner" }, h("div", { key: '156c3c9b139efcb964525147338ecdeeca538123', class: "accordion-content" }, h("slot", { key: 'b19b54c279cca1a32b4ed0f5b0a319d87b7bf937' }))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -132,11 +98,52 @@ export class EdsAccordion {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional description displayed above the main content"
+                    "text": "Optional description displayed below the title in the header"
                 },
                 "attribute": "description",
                 "reflect": false
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: 'default' for dark background, 'inverse' for light background"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inverse'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon displayed in the header"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
             "switchBg": {
                 "type": "boolean",
                 "mutable": false,
@@ -148,8 +155,11 @@ export class EdsAccordion {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the background color on expand and hover"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `variant` prop instead. Kept for backward compatibility."
+                        }],
+                    "text": ""
                 },
                 "attribute": "switch-bg",
                 "reflect": false,
@@ -185,41 +195,18 @@ export class EdsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Clamps the text when the accordion is collapsed to prevent overflow"
+                    "text": "Clamps the description text when the accordion is collapsed to prevent overflow"
                 },
                 "attribute": "clamp-text",
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "buttonIntent": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'secondary' | 'tertiary' | 'ghost'",
-                    "resolved": "\"ghost\" | \"secondary\" | \"tertiary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'tertiary'"
-                        }],
-                    "text": "Intent/style of the toggle button.\nOptions: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'"
-                },
-                "attribute": "button-intent",
-                "reflect": false,
-                "defaultValue": "'tertiary'"
             }
         };
     }
     static get states() {
         return {
             "isExpanded": {},
-            "panelHeight": {},
-            "shortContent": {},
-            "headerHeight": {}
+            "toggleIcon": {}
         };
     }
     static get events() {

package/dist/collection/components/eds-accordion/eds-accordion.stories.js

@@ -1,3 +1,7 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the render treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 export default {
     title: 'Components/Accordion',
     component: 'eds-accordion',
@@ -8,11 +12,17 @@ export default {
         },
         description: {
             control: 'text',
-            description: 'Optional description displayed above the main content'
+            description: 'Optional description displayed below the title in the header'
         },
-        switchBg: {
-            control: 'boolean',
-            description: 'Toggles the background color on expand and hover'
+        variant: {
+            control: { type: 'select' },
+            options: ['default', 'inverse'],
+            description: 'Visual variant: default (dark bg) or inverse (light bg)'
+        },
+        icon: {
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'Optional icon name displayed in the header (from the EDS icon set)'
         },
         expanded: {
             control: 'boolean',
@@ -20,26 +30,15 @@ export default {
         },
         clampText: {
             control: 'boolean',
-            description: 'Clamps the text when the accordion is collapsed to prevent overflow'
-        },
-        minHeightContent: {
-            control: 'boolean',
-            description: 'Applies a minimum height to the content area for consistent spacing'
-        },
-        buttonIntent: {
-            control: 'select',
-            options: ['secondary', 'tertiary', 'ghost'],
-            description: 'Visual style intent of the toggle button.'
+            description: 'Clamps the description text when collapsed to prevent overflow'
         }
     },
     args: {
         title: 'Accordion Title',
-        description: 'An optional description above the main content.',
-        switchBg: true,
+        description: 'An optional description below the title.',
+        variant: 'inverse',
         expanded: false,
-        clampText: true,
-        minHeightContent: true,
-        buttonIntent: 'tertiary'
+        clampText: true
     }
 };
 export const Default = {
@@ -47,35 +46,78 @@ export const Default = {
     <eds-accordion
       title="${args.title}"
       description="${args.description}"
-      switch-bg="${args.switchBg}"
+      variant="${args.variant}"
+      ${args.icon ? `icon="${args.icon}"` : ''}
       expanded="${args.expanded}"
       clamp-text="${args.clampText}"
-      min-height-content="${args.minHeightContent}"
-      button-intent="${args.buttonIntent}"
     >
-    This is the main content of the accordion. It can be expanded or collapsed.
+      This is the main content of the accordion. It can be expanded or collapsed.
+    </eds-accordion>
+  `
+};
+export const DefaultVariant = {
+    render: (args) => `
+    <eds-accordion
+      title="${args.title}"
+      description="${args.description}"
+      variant="default"
+      expanded="${args.expanded}"
+      clamp-text="${args.clampText}"
+    >
+      This is the main content of the accordion on a dark background.
     </eds-accordion>
   `,
     args: {
-        title: 'Accordion Title',
-        description: 'An optional description above the main content.',
-        switchBg: true,
-        expanded: false,
-        clampText: true,
-        minHeightContent: true,
-        buttonIntent: 'tertiary'
+        title: 'Dark Variant Accordion',
+        description: 'This accordion uses the default (dark) variant matching the card design system.'
+    }
+};
+export const WithIcon = {
+    render: (args) => `
+    <eds-accordion
+      title="${args.title}"
+      description="${args.description}"
+      variant="default"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      expanded="${args.expanded}"
+      clamp-text="${args.clampText}"
+    >
+      Content with an icon in the header on a dark background.
+    </eds-accordion>
+  `,
+    args: {
+        title: 'Accordion with Icon',
+        description: 'Features an icon in the header area.',
+        icon: 'checkmark'
     }
 };
-export const SlotComponent = {
+export const WithIconInverse = {
     render: (args) => `
     <eds-accordion
       title="${args.title}"
       description="${args.description}"
-      switch-bg="${args.switchBg}"
+      variant="inverse"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      expanded="${args.expanded}"
+      clamp-text="${args.clampText}"
+    >
+      Content with an icon in the header on a light background.
+    </eds-accordion>
+  `,
+    args: {
+        title: 'Accordion with Icon (Inverse)',
+        description: 'Features an icon in the header area on a light background.',
+        icon: 'settings'
+    }
+};
+export const WithSlotComponent = {
+    render: (args) => `
+    <eds-accordion
+      title="${args.title}"
+      description="${args.description}"
+      variant="${args.variant}"
       expanded="true"
       clamp-text="${args.clampText}"
-      min-height-content="${args.minHeightContent}"
-      button-intent="${args.buttonIntent}"
     >
       <eds-alert
         message="This is a slot component"
@@ -86,12 +128,7 @@ export const SlotComponent = {
     </eds-accordion>
   `,
     args: {
-        title: 'Accordion Title',
-        description: 'An optional description above the main content.',
-        switchBg: true,
-        expanded: false,
-        clampText: true,
-        minHeightContent: true,
-        buttonIntent: 'tertiary'
+        title: 'Accordion with Slotted Component',
+        description: 'Demonstrates slotted content inside the accordion.'
     }
 };

package/dist/collection/components/eds-alert/eds-alert.css

@@ -1,3 +1,10 @@
+/* ─── Host ─── */
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ─── Reset ─── */
 *,
 ::before,
 ::after {
@@ -11,7 +18,16 @@ p {
   margin: 0;
 }
 
-.f-ui-01 {
+/* ─── Base card ─── */
+.alert-card {
+  position: relative;
+  border-radius: 16px;
+  padding: 1rem 1.25rem;
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  overflow: hidden;
   font-family: var(--f-ui-01-fontFamily);
   font-weight: var(--f-ui-01-fontWeight);
   font-size: var(--f-ui-01-fontSize);
@@ -19,147 +35,158 @@ p {
   letter-spacing: var(--f-ui-01-letterSpacing);
 }
 
-.border-inside {
-  position: relative;
-
-  &::after {
-    pointer-events: none;
-  }
-
-  &::after {
-    position: absolute;
-  }
-
-  &::after {
-    inset: 0rem;
-  }
-
-  &::after {
-    z-index: 1;
-  }
-
-  &::after {
-    border-radius: 8px;
-  }
-
-  &::after {
-    border-width: 1px;
-  }
-
-  &::after {
-    border-width: 2px;
-  }
+/* ─── Left accent border ─── */
+.alert-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+}
 
-  &::after {
-    border-color: rgba(0, 0, 0, .1);
-  }
+/* ─── Default intent ─── */
+.alert-default {
+  background-color: var(--grey-light);
+  color: var(--brand-black);
+}
 
-  &::after {
-    content: '';
-  }
+.alert-default::before {
+  background-color: var(--grey-dark);
 }
 
-.flex {
-  display: flex;
+.alert-default .alert-icon {
+  color: var(--grey-dark);
 }
 
-.w-full {
-  width: 100%;
+/* ─── Warning intent ─── */
+.alert-warning {
+  background-color: var(--yellow-200);
+  color: var(--brand-black);
 }
 
-.flex-row {
-  flex-direction: row;
+.alert-warning::before {
+  background-color: var(--yellow-600);
 }
 
-.items-center {
-  align-items: center;
+.alert-warning .alert-icon {
+  color: var(--yellow-600);
 }
 
-.justify-between {
-  justify-content: space-between;
+/* ─── Error intent ─── */
+.alert-error {
+  background-color: var(--red-200);
+  color: var(--brand-black);
 }
 
-.gap-x-12 {
-  -moz-column-gap: 0.75rem;
-  column-gap: 0.75rem;
+.alert-error::before {
+  background-color: var(--red-600);
 }
 
-.space-y-12> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+.alert-error .alert-icon {
+  color: var(--red-600);
 }
 
-.rounded-lg {
-  border-radius: 16px;
+/* ─── Success intent ─── */
+.alert-success {
+  background-color: var(--brand-green);
+  color: var(--brand-black);
 }
 
-.bg-dark {
-  background-color: var(--grey-300);
+.alert-success::before {
+  background-color: var(--green-700);
 }
 
-.bg-error {
-  background-color: var(--red-200);
+.alert-success .alert-icon {
+  color: var(--green-700);
 }
 
-.bg-success {
-  background-color: var(--green-200);
+/* ─── Brand intent ─── */
+.alert-brand {
+  background-color: var(--brand-black);
+  color: var(--brand-green);
 }
 
-.bg-warning {
-  background-color: var(--yellow-200);
+.alert-brand::before {
+  background-color: var(--brand-green);
 }
 
-.p-16 {
-  padding: 1rem;
+.alert-brand .alert-icon {
+  color: var(--brand-green);
 }
 
-.p-20 {
-  padding: 1.25rem;
+.alert-brand .alert-dismiss {
+  color: var(--brand-green);
 }
 
-.px-12 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+/* ─── Direction variants ─── */
+.alert-horizontal {
+  flex-direction: row;
+  align-items: center;
 }
 
-.px-20 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+.alert-vertical {
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-.py-12 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+/* ─── Icon ─── */
+.alert-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.py-20 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
+/* ─── Body (message) ─── */
+.alert-body {
+  flex: 1;
+  min-width: 0;
 }
 
-.py-8 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.alert-message {
+  margin: 0;
 }
 
-.pr-12 {
-  padding-right: 0.75rem;
+/* ─── Action (link/button) ─── */
+.alert-action {
+  flex-shrink: 0;
 }
 
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+/* ─── Dismiss button ─── */
+.alert-dismiss {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 8px;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
 }
 
-[class*=underline-] {
-  text-decoration-line: underline;
+.alert-dismiss:hover {
+  opacity: 1;
 }
 
-.after\:rounded-lg::after {
-  border-radius: 16px;
+.alert-dismiss:focus-visible {
+  outline: 2px solid var(--brand-green);
+  outline-offset: 2px;
 }
 
-.after\:border-softest::after {
-  border-color: rgba(0, 0, 0, .05);
-}
+/* ─── Responsive ─── */
+@media (max-width: 768px) {
+  .alert-card {
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  .alert-horizontal {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}