@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/statusnotification/StatusNotification.svelte

@@ -1,39 +1,41 @@
 <svelte:options customElement={{ tag: 'm-status-notification' }} />
 
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';
-  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircle32/InfoCircle32.svelte';
-  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircle32/WarningCircle32.svelte';
-  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircle32/CrossCircle32.svelte';
-  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircle32/CheckCircle32.svelte';
-
+  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';
+  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';
+  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';
+  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';
+  /**
+   * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
+   *
+   * @slot footer - Use this slot to insert a button or a link in the footer
+   * @event close {CustomEvent<void>} - Emits when closing the notification.
+   */
   interface Props {
+    /**
+     * Title of the status notification.
+     */
     title: string;
-    children?: Snippet;
-    status?: 'information' | 'success' | 'warning' | 'error';
+    /**
+     * Description of the status notification.
+     */
+    description: string;
+    /**
+     * Allows to define the status notification type.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * if `true`, display the close button.
+     */
     closable?: boolean;
-    hasfooter?: boolean;
-    footer?: Snippet;
-    closelabel?: string;
-    titletag?: string;
-    onclose?: (event: MouseEvent) => void;
   }
 
-  let {
-    title,
-    children,
-    status = 'information',
-    closable = false,
-    hasfooter = false,
-    footer,
-    closelabel = 'Close',
-    titletag = 'h2',
-    onclose,
-  }: Props = $props();
+  let { title, description, status = 'info', closable }: Props = $props();
+  let element: HTMLElement;
 
   const iconMap = [
-    { status: 'information', component: InfoCircle32 },
+    { status: 'info', component: InfoCircle32 },
     { status: 'success', component: CheckCircle32 },
     { status: 'warning', component: WarningCircle32 },
     { status: 'error', component: CrossCircle32 },
@@ -44,14 +46,20 @@
   }
 
   let selected = $state(getSelected(status));
+
+  const onClose = () => {
+    const event = new CustomEvent('close', {
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  };
 </script>
 
 <section
-  class="mc-status-notification"
+  class={['mc-status-notification', `mc-status-notification--${status}`]}
   role="status"
-  class:mc-status-notification--success={status === 'success'}
-  class:mc-status-notification--warning={status === 'warning'}
-  class:mc-status-notification--error={status === 'error'}
+  bind:this={element}
 >
   <span class="mc-status-notification__icon" aria-hidden="true">
     <selected.component
@@ -61,35 +69,21 @@
   </span>
 
   <div class="mc-status-notification__content">
-    {#if title}
-      <svelte:element this={titletag} class="mc-status-notification__title"
-      >{title}</svelte:element
-      >
-    {/if}
+    <h2 class="mc-status-notification__title">{title}</h2>
     <p class="mc-status-notification__message">
-      {#if children}
-        {@render children()}
-      {:else}
-        <slot />
-      {/if}
+      {description}
     </p>
 
-    {#if hasfooter}
-      <div class="mc-status-notification__footer">
-        {#if footer}
-          {@render footer()}
-        {:else}
-          <slot name="footer" />
-        {/if}
-      </div>
-    {/if}
+    <div class="mc-status-notification__footer">
+      <slot name="footer" />
+    </div>
   </div>
 
   {#if closable}
-    <button 
-      class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost" 
+    <button
+      class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost"
       aria-label="Close"
-      onclick={onclose}
+      onclick={onClose}
     >
       <Cross20
         class="mc-status-notification-closable__icon"
@@ -102,22 +96,38 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-button {
-  color: #ffffff;
-  background-color: #464e63;
-  font-weight: 600;
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
   display: inline-flex;
   justify-content: center;
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: 0.25rem;
+  border-radius: var(--button-radius, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -127,23 +137,8 @@
   gap: 0.25rem;
   cursor: pointer;
 }
-.mc-button:hover {
-  background-color: #343b4c;
-}
-.mc-button:active {
-  background-color: #242938;
-}
-.mc-button:disabled {
-  background-color: #d9d9d9;
-  border-color: transparent;
-  color: #737373;
-  cursor: not-allowed;
-}
-.mc-button .mc-button__label {
-  font-size: 1rem;
-}
 .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button__icon {
   flex-shrink: 0;
@@ -151,13 +146,13 @@
   height: 1.5rem;
 }
 .mc-button:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
@@ -167,7 +162,7 @@
   min-width: 2rem;
 }
 .mc-button--s .mc-button__label {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
 }
 .mc-button--s .mc-button__icon {
   width: 1.25rem;
@@ -183,7 +178,7 @@
   min-width: 3rem;
 }
 .mc-button--m .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button--m .mc-button__icon {
   width: 1.5rem;
@@ -199,7 +194,7 @@
   min-width: 4rem;
 }
 .mc-button--l .mc-button__label {
-  font-size: 1.125rem;
+  font-size: var(--font-size-200, 1.125rem);
 }
 .mc-button--l .mc-button__icon {
   width: 2rem;
@@ -213,90 +208,90 @@
   padding: 0.25rem;
 }
 .mc-button--outlined {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
 }
 .mc-button--outlined:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--accent {
-  color: #ffffff;
-  background-color: #117f03;
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
 }
 .mc-button--accent:hover {
-  background-color: #006902;
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
 }
 .mc-button--accent:active {
-  background-color: #035010;
+  background-color: var(--button-color-filled-accent-active-background, #035010);
 }
 .mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
 }
 .mc-button--danger:hover {
-  background-color: #8c0003;
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
 }
 .mc-button--danger:active {
-  background-color: #530000;
+  background-color: var(--button-color-filled-danger-active-background, #530000);
 }
 .mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #242938;
-  background-color: #ffffff;
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
 }
 .mc-button--inverse:hover {
-  background-color: #e6e6e6;
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
 }
 .mc-button--inverse:active {
-  background-color: #cccccc;
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
 }
 .mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -308,135 +303,135 @@
   visibility: hidden;
 }
 .mc-button--outlined.mc-button--standard {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
 }
 .mc-button--outlined.mc-button--standard:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined.mc-button--standard:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--accent {
-  color: #117f03;
-  border-color: #78be20;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
 }
 .mc-button--outlined.mc-button--accent:hover {
-  background-color: #ebf5de;
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
 }
 .mc-button--outlined.mc-button--accent:active {
-  background-color: #c5e39e;
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
 }
 .mc-button--outlined.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--danger {
-  color: #c61112;
-  border-color: #ef5f5c;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
 }
 .mc-button--outlined.mc-button--danger:hover {
-  background-color: #fdeaea;
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
 }
 .mc-button--outlined.mc-button--danger:active {
-  background-color: #f8bcbb;
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
 }
 .mc-button--outlined.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--inverse {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--outlined.mc-button--inverse:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--outlined.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--outlined.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--standard {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--standard:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost.mc-button--standard:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--accent {
-  color: #117f03;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--accent:hover {
-  background-color: rgba(17, 127, 3, 0.1);
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
 }
 .mc-button--ghost.mc-button--accent:active {
-  background-color: rgba(17, 127, 3, 0.2);
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
 }
 .mc-button--ghost.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--danger {
-  color: #c61112;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--danger:hover {
-  background-color: rgba(198, 17, 18, 0.1);
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
 }
 .mc-button--ghost.mc-button--danger:active {
-  background-color: rgba(198, 17, 18, 0.2);
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
 }
 .mc-button--ghost.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--inverse {
-  color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--inverse:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--ghost.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--ghost.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 
@@ -444,37 +439,37 @@
 /* create columns */
 /* create custom named columns with custom content */
 .mc-status-notification {
-  border-radius: 0.5rem;
+  border-radius: var(--radius-m, 0.5rem);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  background: #e1f3f9;
-  box-shadow: inset 0 0 0 1px #3facd7;
+  background: var(--status-notification-color-background-information, #e1f3f9);
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
   position: relative;
   box-sizing: border-box;
-  color: #000000;
+  color: var(--status-notification-color-text, #000000);
 }
 .mc-status-notification__icon {
   width: 2rem;
   height: 2rem;
   margin: 0.75rem;
-  fill: #0b96cc;
+  fill: var(--status-notification-color-icon-information, #0b96cc);
 }
 .mc-status-notification__content {
   flex: 1 1 0;
   padding: 0.75rem 1rem 0.75rem 0;
 }
 .mc-status-notification__title, .mc-status-notification__message {
-  line-height: 1.3;
+  line-height: var(--line-height-s, 1.3);
   margin-block: 0;
 }
 .mc-status-notification__title {
-  font-weight: 600;
-  font-size: 1rem;
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-size-150, 1rem);
   margin-block-end: 0.25rem;
 }
 .mc-status-notification__message {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
 }
 .mc-status-notification__footer {
   align-items: flex-start;
@@ -485,33 +480,37 @@
   margin-bottom: 0.5rem;
 }
 .mc-status-notification--information {
-  background: #e1f3f9;
-  box-shadow: inset 0 0 0 1px #3facd7;
+  background: var(--status-notification-color-background-information, #e1f3f9);
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
 }
 .mc-status-notification--information .mc-status-notification__icon {
-  fill: #0b96cc;
+  fill: var(--status-notification-color-icon-information, #0b96cc);
 }
 .mc-status-notification--success {
-  background: #ebf5de;
-  box-shadow: inset 0 0 0 1px #78be20;
+  background: var(--status-notification-color-background-success, #ebf5de);
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-success, #78be20);
 }
 .mc-status-notification--success .mc-status-notification__icon {
-  fill: #3f9e10;
+  fill: var(--status-notification-color-icon-success, #3f9e10);
 }
 .mc-status-notification--warning {
-  background: #fdf1e8;
-  box-shadow: inset 0 0 0 1px #ef934a;
+  background: var(--status-notification-color-background-warning, #fdf1e8);
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-warning, #ef934a);
 }
 .mc-status-notification--warning .mc-status-notification__icon {
-  fill: #ea7315;
+  fill: var(--status-notification-color-icon-warning, #ea7315);
 }
 .mc-status-notification--error {
-  background: #fdeaea;
-  box-shadow: inset 0 0 0 1px #ef5f5c;
+  background: var(--status-notification-color-background-error, #fdeaea);
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-error, #ef5f5c);
 }
 .mc-status-notification--error .mc-status-notification__icon {
-  fill: #ea302d;
+  fill: var(--status-notification-color-icon-error, #ea302d);
 }
 .mc-status-notification-closable__close {
   margin: 0.25rem;
+}
+
+.mc-status-notification__footer:empty {
+  display: none;
 }</style>