feat: implement Modal component with overlay and dialog structure

src/components/ListItem/_listItem.scss

@@ -1,70 +1,31 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .list-item {
-  width: 350px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--nds-spacing-sm);
-  padding: var(--nds-spacing-md);
+  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
-  border-radius: var(--nds-radius-sm);
-  background: var(--nds-background, #040B0B);
-  flex-shrink: 0;
-  position: relative;
-  cursor: pointer;
-  &:hover {
-    background: color-mix(in srgb, var(--nds-secondary) 25%, transparent);
-  }
-
-  &:active {
-    background: color-mix(in srgb, var(--nds-accent) 25%, transparent);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-right: 1px solid;
-    border-bottom: 1px solid;
   border-radius: var(--nds-radius-md);
-    border-color: transparent;
+  transition: background-color 120ms ease;
-    background:
+  &:hover {
-      linear-gradient(var(--nds-background, #040B0B), var(--nds-background, #040B0B)) padding-box,
+    background-color: var(--nds-surface-hover);
-      linear-gradient(
-        135deg,
-        transparent 0%,
-        transparent 20%,
-        rgba(245, 250, 250, 0.08) 50%,
-        rgba(245, 250, 250, 0.28) 100%
-      ) border-box;
-    -webkit-mask:
-      linear-gradient(#fff 0 0) padding-box,
-      linear-gradient(#fff 0 0);
-    -webkit-mask-composite: destination-out;
-    mask-composite: exclude;
-    pointer-events: none;
   }
 
-  &::before {
+  &__body {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: -1px;
-    width: 1px;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  &__content {
     display: flex;
     flex-direction: column;
-    gap: var(--nds-spacing-md);
+    gap: var(--nds-spacing-3xs);
+    flex: 1;
+    min-width: 0;
   }
-
-  &__subTitle {
-    @include text-base;
-  }
-
   &__title {
-    @include text-xl;
+    @include text-label;
+    color: var(--nds-text);
+    margin: 0;
+  }
+  &__subtitle {
+    @include text-sm;
+    color: var(--nds-neutral);
+    margin: 0;
   }
 }

src/components/ListItem/listItem.astro

@@ -1,15 +1,11 @@
 ---
-import Arrow2 from "../Icons/Arrow2/Arrow2.astro"
+export interface Props {}
 ---
-<div class='list-item'>
+
-  <div class='list-item__content'>
+<div class="list-item">
   <slot />
 </div>
-  <Arrow2 
-  size={24}
-  orientation='right' />
-</div>
 
 <style lang="scss">
-@use './listItem';
+  @use "./_listItem.scss";
 </style>

src/components/ListItem/listItemSubtitle.astro

@@ -1,7 +1,11 @@
-<div class='list-item__subTitle'>
+---
+export interface Props {}
+---
+
+<p class="list-item__subtitle">
   <slot />
-</div>
+</p>
 
 <style lang="scss">
-@use './listItem';
+  @use "./_listItem.scss";
 </style>

src/components/ListItem/listItemTitle.astro

@@ -1,7 +1,11 @@
-<div class='list-item__title'>
+---
+export interface Props {}
+---
+
+<p class="list-item__title">
   <slot />
-</div>
+</p>
 
 <style lang="scss">
-@use './listItem';
+  @use "./_listItem.scss";
 </style>

src/components/Modal/_modal.scss

@@ -0,0 +1,78 @@
+@use "../../styles/tokens/typography" as *;
+
+.modal {
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(2, 12, 12, 0.55);
+    backdrop-filter: blur(3px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    padding: var(--nds-spacing-md);
+  }
+  &__dialog {
+    width: min(460px, 100%);
+    background-color: var(--nds-surface);
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+    border-radius: var(--nds-radius-xl);
+    overflow: hidden;
+    box-shadow: var(--nds-shadow-lg);
+    animation: nds-modal-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
+  }
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nds-spacing-md) var(--nds-spacing-lg);
+    border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
+  }
+  &__title {
+    @include text-xl;
+    color: var(--nds-text);
+  }
+  &__close {
+    background: transparent;
+    border: none;
+    color: var(--nds-neutral);
+    cursor: pointer;
+    display: flex;
+    padding: var(--nds-spacing-3xs);
+    border-radius: var(--nds-radius-sm);
+    transition:
+      color 120ms ease,
+      background-color 120ms ease;
+    &:hover {
+      color: var(--nds-text);
+      background-color: var(--nds-surface-hover);
+    }
+  }
+  &__body {
+    padding: var(--nds-spacing-lg);
+    @include text-base;
+    color: var(--nds-text);
+  }
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--nds-spacing-xs);
+    padding: var(--nds-spacing-md) var(--nds-spacing-lg);
+    border-top: var(--nds-border-width-thin) solid var(--nds-border);
+  }
+}
+
+nds-modal[data-open="true"] .modal__overlay {
+  display: flex;
+}
+
+@keyframes nds-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

src/components/Modal/modal.astro

@@ -0,0 +1,84 @@
+---
+import { CloseIcon } from "../Icons";
+
+export interface Props {
+  id: string;
+  title?: string;
+  open?: boolean;
+}
+const { id, title, open = false } = Astro.props;
+const hasFooter = Astro.slots.has("footer");
+---
+
+<nds-modal id={id} class="modal" data-open={open ? "true" : undefined}>
+  <div class="modal__overlay" data-modal-close>
+    <div
+      class="modal__dialog"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+    >
+      <div class="modal__head">
+        <span class="modal__title">{title}</span>
+        <button class="modal__close" data-modal-close aria-label="Close">
+          <CloseIcon size={18} label="Close" />
+        </button>
+      </div>
+      <div class="modal__body"><slot /></div>
+      {
+        hasFooter && (
+          <div class="modal__footer">
+            <slot name="footer" />
+          </div>
+        )
+      }
+    </div>
+  </div>
+</nds-modal>
+
+<script>
+  class NdsModal extends HTMLElement {
+    connectedCallback() {
+      this.addEventListener("click", (e) => {
+        const target = e.target as HTMLElement;
+        if (
+          target.closest("[data-modal-close]") ===
+          target.closest(".modal__dialog")
+        ) {
+          // clicked dialog interior, ignore
+        }
+        if (
+          target.matches("[data-modal-close]") ||
+          target.classList.contains("modal__overlay")
+        ) {
+          this.close();
+        }
+      });
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && this.dataset.open === "true") this.close();
+      });
+    }
+    open() {
+      this.dataset.open = "true";
+      this.dispatchEvent(new CustomEvent("nds:open", { bubbles: true }));
+    }
+    close() {
+      delete this.dataset.open;
+      this.dispatchEvent(new CustomEvent("nds:close", { bubbles: true }));
+    }
+  }
+  customElements.define("nds-modal", NdsModal);
+
+  document.addEventListener("click", (e) => {
+    const trigger = (e.target as HTMLElement).closest<HTMLElement>(
+      "[data-modal-open]",
+    );
+    if (!trigger) return;
+    const modal = document.getElementById(trigger.dataset.modalOpen!) as any;
+    modal?.open?.();
+  });
+</script>
+
+<style lang="scss">
+  @use "./_modal.scss";
+</style>