feat: add Notification component with styling and integration in the main page

src/components/Notifications/_notification.scss

@@ -0,0 +1,67 @@
+.notification {
+  display: flex;
+  align-items: center;
+  gap: var(--nds-spacing-sm);
+  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
+  border-radius: var(--nds-radius-md);
+  border: var(--nds-border-width-thin) solid;
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-body-medium-size);
+  font-weight: var(--nds-type-body-medium-weight);
+  letter-spacing: var(--nds-type-body-medium-letter-spacing);
+
+  &__content {
+    flex: 1;
+    line-height: 1.5;
+  }
+
+  &__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--nds-focus-ring);
+      outline-offset: 2px;
+      border-radius: var(--nds-radius-xs);
+    }
+    &--error {
+      color: var(--nds-error-medium);
+    }
+  }
+
+  &--info {
+    background-color: var(--nds-info-low);
+    border-color: var(--nds-info-medium);
+    color: var(--nds-info-high);
+  }
+
+  &--success {
+    background-color: var(--nds-correct-low);
+    border-color: var(--nds-correct-medium);
+    color: var(--nds-correct-high);
+  }
+
+  &--warning {
+    background-color: var(--nds-warning-low);
+    border-color: var(--nds-warning-medium);
+    color: var(--nds-warning-high);
+  }
+
+  &--error {
+    background-color: var(--nds-error-low);
+    border-color: var(--nds-error-medium);
+    color: var(--nds-error-high);
+  }
+}

src/components/Notifications/notification.astro

@@ -0,0 +1,23 @@
+---
+import { CloseIcon } from "../Icons";
+
+
+export interface Props {
+  type:        'info' | 'success' | 'warning' | 'error';
+}
+const notificationUUID  = `notification-${Math.random().toString(36).substr(2, 9)}`;
+const { type } = Astro.props;
+---
+
+<div class={`notification notification--${type}`} role="alert" id={notificationUUID}>
+  <div class="notification__content">
+    <slot />
+  </div>
+  <button class={`notification__close notification__close--${type}`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
+    <CloseIcon size={16} label="Close notification" />
+  </button>
+</div>
+
+<style lang="scss">
+@use './_notification.scss';
+</style>

src/components/index.ts

@@ -1,3 +1,4 @@
 // Auto-generated by scripts/generate-barrel.mjs — do not edit manually.
 
 export * from './Icons/index.ts';
+export { default as Notification } from './Notifications/notification.astro';

src/pages/index.astro

@@ -7,11 +7,20 @@ import {
   SearchIcon, SettingsIcon, ShareIcon, ShieldIcon, SortIcon, StatsIcon,
   UploadIcon,
 } from '../components/Icons/index.ts';
+import Notification from '../components/Notifications/notification.astro';
 ---
 
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>Notifications — Error / Warning / Success / Info</h2>
+      <div style="max-width: 400px;">
+        <Notification type="error">
+            An error occurred during the operation. Please try again.
+        </Notification>
+      </div>
+    </section>
     <section>
       <h2>Icon — 16 / 24 / 32</h2>
       <div class="icon-grid">