@devslab/dds-svelte 0.0.0-stage → 0.29.0

package/LICENSE

@@ -0,0 +1,74 @@
+DevsLab Source-Available License 1.0
+
+Copyright (c) 2026 DevsLab. All rights reserved.
+
+This license governs the DDS software, design tokens, components, icons,
+documentation, and other materials distributed with this license (the
+"Software").
+
+1. Permitted use
+
+Subject to this license, DevsLab grants you a limited, worldwide,
+non-exclusive, non-transferable, revocable, royalty-free right to:
+
+- download and install unmodified copies of the Software;
+- use and execute the Software for internal or commercial applications;
+- compile, minify, tree-shake, and bundle unmodified Software solely as a
+  technical part of building an application; and
+- distribute the resulting object code only as an inseparable part of that
+  application and not as a standalone library, design system, component kit,
+  template, or asset collection.
+
+Normal application configuration through documented public APIs, design-token
+overrides, CSS custom properties, and component properties is permitted and is
+not considered modification of the Software.
+
+2. Restrictions
+
+Except where applicable law does not allow the restriction, you may not:
+
+- modify, adapt, translate, reverse engineer, or create derivative works of the
+  Software itself;
+- publish, republish, sublicense, sell, rent, host, or redistribute the
+  Software or any modified version as a standalone package or downloadable
+  collection;
+- use the Software or a substantial portion of it to create or operate a
+  competing general-purpose design system, UI kit, component library, icon
+  library, token library, template marketplace, or hosted equivalent;
+- remove or alter copyright, license, attribution, or provenance notices; or
+- use DevsLab names, logos, product marks, or trade dress except to make a
+  truthful statement that an application uses the Software.
+
+No patent, trademark, design, or branding rights are granted except the
+copyright permissions stated in Section 1.
+
+3. Ownership and feedback
+
+The Software is licensed, not sold. DevsLab and its licensors retain all
+right, title, and interest in the Software. You grant DevsLab a perpetual,
+worldwide, irrevocable, royalty-free right to use feedback you voluntarily
+provide about the Software.
+
+4. Termination
+
+This license terminates automatically if you breach it. Upon termination, you
+must stop using and distributing the Software and delete all copies under your
+control. Sections 2, 3, 5, and 6 survive termination.
+
+5. Disclaimer and limitation of liability
+
+THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE, TITLE, AND NON-INFRINGEMENT. TO THE MAXIMUM EXTENT PERMITTED BY LAW,
+DEVSLAB WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL,
+CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE DAMAGES, OR FOR LOSS OF DATA, PROFITS,
+REVENUE, OR BUSINESS, ARISING FROM OR RELATED TO THE SOFTWARE.
+
+6. Governing law
+
+This license is governed by the laws of the Republic of Korea, excluding
+conflict-of-law rules. The Seoul Central District Court has exclusive
+jurisdiction over disputes arising from this license.
+
+This is a source-available license, not an open-source license approved by the
+Open Source Initiative.

package/README.ko.md

@@ -0,0 +1,21 @@
+# @devslab/dds-svelte
+
+공통 DDS 간격·타이포·CSS를 사용하는 Svelte 5 Layout·LeftNav·TopNav·ConsoleShell입니다.
+현재 이 화면 구성 요소만 제공합니다. 다른 프레임워크의 전체 컨트롤·그리드가 포함되었다는 의미가 아닙니다.
+
+`@devslab/dds-svelte/styles.css`를 한 번 import하세요. Layout의 navigationPosition은
+left/top, contentWidth는 workspace/form/settings/full입니다. header/navigation/railStart/
+railEnd/footer와 본문은 Svelte snippet으로 조립합니다. 메뉴는 레이아웃 없이도 사용합니다.
+아이콘은 장식용 snippet이고 라벨이 접근 가능한 이름을 제공합니다.
+
+LeftNav의 expandedGroups/onExpandedGroupsChange는 외부 제어, defaultExpandedGroups는
+초기값입니다. 빈 배열은 모두 접고 생략하면 활성 그룹만 엽니다. 앱은 권한·라우팅·이동 시
+그룹 열기·세션 보관을 담당합니다. 브라우저 저장소는 hydration 이후 읽으세요.
+Layout은 모바일 탐색과 초점 복귀를 담당하고 TopNav는 네이티브 disclosure를 사용합니다.
+
+[공통 화면 규격](../../docs/layouts.ko.md)을 참고하세요. 배포 전 test/check/build로 검증합니다.
+
+
+## 공통 업무 화면
+
+Layout·LeftNav·TopNav는 공통 간격과 타이포 규격을 사용합니다. [조립 방법과 수치](../../docs/layouts.ko.md)를 참고하세요.

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# @devslab/dds-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte 5 Layout, LeftNav, TopNav and ConsoleShell using the shared DDS geometry,
+typography and CSS. This package currently provides these application shell
+components; it does not claim the React/Solid control or grid inventory.
+
+Import `@devslab/dds-svelte/styles.css` once. Use `Layout` with
+`navigationPosition="left"` or `"top"`, `contentWidth="workspace"|"form"|"settings"|"full"`,
+and header/navigation/railStart/railEnd/footer snippets plus children.
+`LeftNav` and `TopNav` work independently of Layout. Icons are decorative snippets.
+
+LeftNav supports nav groups with stable IDs and optional collapsible disclosure.
+Use expandedGroups/onExpandedGroupsChange for parent control, or
+ defaultExpandedGroups for initial state. Empty defaults close all groups;
+otherwise active groups initially open. The app owns routing, permissions,
+route-change expansion and storage; read browser storage after hydration.
+Layout owns the shared mobile navigation and focus restoration. TopNav uses
+native disclosure navigation, not a partial application menubar.
+
+See [shared layout guidance](../../docs/layouts.md) for exact dimensions and
+composition examples. Run package test/check/build before publication.
+
+
+## Shared application layouts
+
+Layout, LeftNav and TopNav use the common geometry and typography rules. See [composition and exact dimensions](../../docs/layouts.md).

package/dist/ConsoleShell.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import Layout from "./Layout.svelte";
+  import LeftNav from "./LeftNav.svelte";
+  import type { ConsoleShellProps } from "./types";
+  let {
+    surface,
+    activePath,
+    brand,
+    context,
+    nav = [],
+    navigation: customNavigation,
+    labels,
+    header: pageHeader,
+    foot,
+    children,
+    expandedGroups,
+    defaultExpandedGroups,
+    onExpandedGroupsChange,
+  }: ConsoleShellProps = $props();
+</script>
+
+<Layout {surface} {labels}>
+  {#snippet railStart()}<a class="dds-console-rail__brand" href={brand.href}
+      ><img src={brand.mark} alt="" width="20" height="20" /><strong
+        >{brand.name}</strong
+      ></a
+    >{#if context?.length}<dl class="dds-console-rail__context">
+        {#each context as row, index (index)}<div>
+            <dt>{row.label}</dt>
+            <dd>{row.value}</dd>
+          </div>{/each}
+      </dl>{/if}{/snippet}
+  {#snippet navigation()}{#if customNavigation}{@render customNavigation()}{:else}<LeftNav
+        {surface}
+        {activePath}
+        {nav}
+        {labels}
+        {expandedGroups}
+        {defaultExpandedGroups}
+        {onExpandedGroupsChange}
+      />{/if}{/snippet}
+  {#snippet railEnd()}{#if foot}<div class="dds-console-rail__foot">
+        {@render foot()}
+      </div>{/if}{/snippet}
+  {#snippet header()}<div class="dds-console-page-header">
+      <div class="dds-console-page-header__text">
+        {#if pageHeader.eyebrow}<p class="dds-console-page-eyebrow">
+            {pageHeader.eyebrow}
+          </p>{/if}
+        <h1>{pageHeader.title}</h1>
+      </div>
+      {#if pageHeader.actions}<div class="dds-console-page-header__actions">
+          {@render pageHeader.actions()}
+        </div>{/if}
+    </div>{/snippet}
+  {@render children?.()}
+</Layout>

package/dist/ConsoleShell.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ConsoleShellProps } from "./types";
+declare const ConsoleShell: import("svelte").Component<ConsoleShellProps, {}, "">;
+type ConsoleShell = ReturnType<typeof ConsoleShell>;
+export default ConsoleShell;

package/dist/Layout.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import type { LayoutProps } from "./types";
+  let {
+    navigationPosition = "left",
+    contentWidth = "workspace",
+    labels,
+    surface,
+    header,
+    navigation,
+    railStart,
+    railEnd,
+    footer,
+    children,
+  }: LayoutProps = $props();
+  const id = $props.id(),
+    railId = `dds-console-rail-${id}`,
+    mainId = `dds-console-main-${id}`;
+  let open = $state(false),
+    hydrated = $state(false),
+    opener: HTMLButtonElement,
+    rail: HTMLElement;
+  function close() {
+    open = false;
+    opener?.focus();
+  }
+  function focusables() {
+    return [
+      opener,
+      ...Array.from(
+        rail?.querySelectorAll<HTMLElement>(
+          'a[href],button,summary,input,select,textarea,[tabindex="0"]',
+        ) ?? [],
+      ),
+    ].filter(
+      (el) =>
+        el &&
+        !el.closest("[hidden]") &&
+        el.getClientRects().length > 0 &&
+        getComputedStyle(el).visibility !== "hidden" &&
+        !Array.from(rail?.querySelectorAll("details:not([open])") ?? []).some(
+          (details) =>
+            details.contains(el) &&
+            !details.querySelector("summary")?.contains(el),
+        ) &&
+        !el.hasAttribute("disabled"),
+    );
+  }
+  async function toggle() {
+    if (open) close();
+    else {
+      open = true;
+      await tick();
+      focusables()[1]?.focus();
+    }
+  }
+  function key(event: KeyboardEvent) {
+    if (!open) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+    }
+    if (event.key === "Tab") {
+      const items = focusables(),
+        first = items[0],
+        last = items.at(-1);
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus();
+      }
+    }
+  }
+  function navigate(event: MouseEvent) {
+    if (
+      open &&
+      event.target instanceof Element &&
+      event.target.closest("a[href]")
+    )
+      close();
+  }
+  onMount(() => {
+    hydrated = true;
+    const media =
+      typeof window.matchMedia === "function"
+        ? window.matchMedia("(max-width: 56.25rem)")
+        : undefined;
+    const resize = () => {
+      if (!media?.matches) open = false;
+    };
+    media?.addEventListener("change", resize);
+    document.addEventListener("keydown", key);
+    return () => {
+      document.removeEventListener("keydown", key);
+      media?.removeEventListener("change", resize);
+    };
+  });
+</script>
+
+<div
+  class="dds-console-shell dds-layout"
+  data-navigation-position={navigationPosition}
+  data-surface={surface}
+  data-hydrated={hydrated ? "true" : undefined}
+>
+  <a class="dds-console-skip dds-visually-hidden" href={`#${mainId}`}
+    >{labels.skip}</a
+  >
+  <button
+    bind:this={opener}
+    class="dds-console-rail__toggle"
+    type="button"
+    data-action="toggle-rail"
+    aria-controls={railId}
+    aria-expanded={open}
+    onclick={toggle}
+    ><span aria-hidden="true"></span><span class="dds-visually-hidden"
+      >{open ? labels.menuClose : labels.menuOpen}</span
+    ></button
+  >
+  <button
+    type="button"
+    tabindex="-1"
+    aria-label={labels.menuClose}
+    class="dds-console-rail__scrim"
+    data-open={String(open)}
+    onclick={close}
+  ></button>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_click_events_have_key_events -->
+  <aside
+    bind:this={rail}
+    id={railId}
+    class="dds-console-rail dds-layout__navigation"
+    data-open={String(open)}
+    onclick={navigate}
+  >
+    {@render railStart?.()}{@render navigation?.()}{@render railEnd?.()}
+  </aside>
+  <main id={mainId} class="dds-console-main dds-layout__main" tabindex="-1">
+    <div class="dds-layout__content" data-width={contentWidth}>
+      {#if header}<header class="dds-layout__header">
+          {@render header()}
+        </header>{/if}{@render children?.()}{#if footer}<footer
+          class="dds-layout__footer"
+        >
+          {@render footer()}
+        </footer>{/if}
+    </div>
+  </main>
+</div>

package/dist/Layout.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LayoutProps } from "./types";
+declare const Layout: import("svelte").Component<LayoutProps, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/LeftNav.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { LeftNavProps, ConsoleNavItem } from "./types";
+  let {
+    surface,
+    activePath,
+    nav,
+    labels,
+    expandedGroups,
+    defaultExpandedGroups,
+    onExpandedGroupsChange,
+    onNavigate,
+  }: LeftNavProps = $props();
+  const id = $props.id();
+  function active(item: ConsoleNavItem) {
+    return (
+      item.active ??
+      (activePath === item.href ||
+        (item.href.split("/").filter(Boolean).length > 1 &&
+          activePath.startsWith(`${item.href}/`)))
+    );
+  }
+  let internal = $state<readonly string[]>(
+    untrack(
+      () =>
+        defaultExpandedGroups ??
+        nav.flatMap((group, index) =>
+          group.collapsible && group.items.some(active)
+            ? [group.id ?? `group-${index}`]
+            : [],
+        ),
+    ),
+  );
+  let expanded = $derived(expandedGroups ?? internal);
+  function toggle(groupId: string) {
+    const next = expanded.includes(groupId)
+      ? expanded.filter((value) => value !== groupId)
+      : [...expanded, groupId];
+    if (expandedGroups === undefined) internal = next;
+    onExpandedGroupsChange?.(next);
+  }
+</script>
+
+<nav class="dds-console-rail__nav dds-left-nav" aria-label={labels.nav}>
+  {#each nav as group, index (group.id ?? index)}
+    <section
+      class="dds-console-rail__group"
+      aria-labelledby={`${id}-group-${index}`}
+      data-collapsible={group.collapsible ? "true" : undefined}
+    >
+      <h2 id={`${id}-group-${index}`} class="dds-console-rail__group-label">
+        {#if group.collapsible}<button
+            type="button"
+            class="dds-console-rail__group-toggle"
+            aria-expanded={expanded.includes(group.id ?? `group-${index}`)}
+            aria-controls={`${id}-items-${index}`}
+            onclick={() => toggle(group.id ?? `group-${index}`)}
+            ><span>{group.label}</span><span
+              class="dds-console-rail__chevron"
+              aria-hidden="true"
+            ></span></button
+          >{:else}{group.label}{/if}
+      </h2>
+      <ul
+        id={`${id}-items-${index}`}
+        hidden={group.collapsible &&
+          !expanded.includes(group.id ?? `group-${index}`)}
+      >
+        {#each group.items as item (item.id)}<li>
+            <a
+              class="dds-console-rail__item"
+              data-nav={`${surface}.${item.id}`}
+              href={item.href}
+              aria-current={active(item) ? "page" : undefined}
+              onclick={() => onNavigate?.()}
+            >
+              {#if item.icon}<span class="dds-console-rail__item-content"
+                  ><span class="dds-console-rail__item-icon" aria-hidden="true"
+                    >{@render item.icon()}</span
+                  ><span>{item.label}</span></span
+                >{:else}<span>{item.label}</span>{/if}
+              {#if item.badge != null && item.badge > 0}<span
+                  class="dds-console-rail__badge"
+                  aria-label={labels.badge.replace("{count}", () =>
+                    String(item.badge),
+                  )}>{item.badge}</span
+                >{/if}
+            </a>
+          </li>{/each}
+      </ul>
+    </section>
+  {/each}
+</nav>

package/dist/LeftNav.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LeftNavProps } from "./types";
+declare const LeftNav: import("svelte").Component<LeftNavProps, {}, "">;
+type LeftNav = ReturnType<typeof LeftNav>;
+export default LeftNav;

package/dist/TopNav.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { TopNavProps, ConsoleNavItem } from "./types";
+  let { surface, activePath, nav, labels, onNavigate }: TopNavProps = $props();
+  let root: HTMLElement;
+  function active(item: ConsoleNavItem) {
+    return (
+      item.active ??
+      (activePath === item.href ||
+        (item.href.split("/").filter(Boolean).length > 1 &&
+          activePath.startsWith(`${item.href}/`)))
+    );
+  }
+  function outside(event: PointerEvent) {
+    if (!root?.contains(event.target as Node))
+      root
+        ?.querySelectorAll("details[open]")
+        .forEach((el) => el.removeAttribute("open"));
+  }
+  function key(event: KeyboardEvent) {
+    if (event.key !== "Escape") return;
+    const details = (event.target as Element).closest("details");
+    if (details?.open) {
+      event.preventDefault();
+      event.stopPropagation();
+      details.open = false;
+      details.querySelector("summary")?.focus();
+    }
+  }
+  function navigate(event: MouseEvent) {
+    (event.currentTarget as Element)
+      .closest("details")
+      ?.removeAttribute("open");
+    onNavigate?.();
+  }
+  onMount(() => {
+    document.addEventListener("pointerdown", outside);
+    return () => document.removeEventListener("pointerdown", outside);
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<nav
+  bind:this={root}
+  class="dds-top-nav"
+  aria-label={labels.nav}
+  onkeydown={key}
+>
+  {#each nav as group, index (group.id ?? index)}<details
+      class="dds-top-nav__group"
+    >
+      <summary class="dds-top-nav__trigger">{group.label}</summary>
+      <ul class="dds-top-nav__items">
+        {#each group.items as item (item.id)}<li>
+            <a
+              class="dds-top-nav__item"
+              data-nav={`${surface}.${item.id}`}
+              href={item.href}
+              aria-current={active(item) ? "page" : undefined}
+              onclick={navigate}
+              >{#if item.icon}<span
+                  class="dds-top-nav__item-icon"
+                  aria-hidden="true">{@render item.icon()}</span
+                >{/if}<span>{item.label}</span
+              >{#if item.badge != null && item.badge > 0}<span
+                  class="dds-console-rail__badge"
+                  aria-label={labels.badge.replace("{count}", () =>
+                    String(item.badge),
+                  )}>{item.badge}</span
+                >{/if}</a
+            >
+          </li>{/each}
+      </ul>
+    </details>{/each}
+</nav>

package/dist/TopNav.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TopNavProps } from "./types";
+declare const TopNav: import("svelte").Component<TopNavProps, {}, "">;
+type TopNav = ReturnType<typeof TopNav>;
+export default TopNav;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ConsoleShell } from "./ConsoleShell.svelte";
+export type * from "./types";
+export { default as Layout } from "./Layout.svelte";
+export { default as LeftNav } from "./LeftNav.svelte";
+export { default as TopNav } from "./TopNav.svelte";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as ConsoleShell } from "./ConsoleShell.svelte";
+export { default as Layout } from "./Layout.svelte";
+export { default as LeftNav } from "./LeftNav.svelte";
+export { default as TopNav } from "./TopNav.svelte";

package/dist/types.d.ts

@@ -0,0 +1,72 @@
+import type { Snippet } from "svelte";
+export interface ConsoleNavItem {
+    id: string;
+    href: string;
+    label: string;
+    badge?: number;
+    active?: boolean;
+    icon?: Snippet;
+}
+export interface ConsoleNavGroup {
+    id?: string;
+    label: string;
+    items: readonly ConsoleNavItem[];
+    collapsible?: boolean;
+}
+export interface ConsoleShellLabels {
+    skip: string;
+    menuOpen: string;
+    menuClose: string;
+    nav: string;
+    badge: string;
+}
+export interface ConsoleHeader {
+    eyebrow?: string;
+    title: string;
+    actions?: Snippet;
+}
+export interface ConsoleShellProps {
+    surface: string;
+    activePath: string;
+    brand: {
+        href: string;
+        name: string;
+        mark: string;
+    };
+    context?: readonly {
+        label: string;
+        value: string;
+    }[];
+    nav?: readonly ConsoleNavGroup[];
+    navigation?: Snippet;
+    labels: ConsoleShellLabels;
+    header: ConsoleHeader;
+    foot?: Snippet;
+    children?: Snippet;
+    expandedGroups?: readonly string[];
+    defaultExpandedGroups?: readonly string[];
+    onExpandedGroupsChange?: (groupIds: string[]) => void;
+}
+export interface LeftNavProps {
+    surface: string;
+    activePath: string;
+    nav: readonly ConsoleNavGroup[];
+    labels: Pick<ConsoleShellLabels, "nav" | "badge">;
+    expandedGroups?: readonly string[];
+    defaultExpandedGroups?: readonly string[];
+    onExpandedGroupsChange?: (ids: string[]) => void;
+    onNavigate?: () => void;
+}
+export type TopNavProps = Pick<LeftNavProps, "surface" | "activePath" | "nav" | "labels" | "onNavigate">;
+export interface LayoutProps {
+    navigationPosition?: "left" | "top";
+    contentWidth?: "workspace" | "form" | "settings" | "full";
+    labels: Pick<ConsoleShellLabels, "skip" | "menuOpen" | "menuClose">;
+    surface?: string;
+    header?: Snippet;
+    navigation?: Snippet;
+    railStart?: Snippet;
+    railEnd?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@devslab/dds-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.29.0",
+  "description": "Svelte 5 ConsoleShell for the DevsLab Design System",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "sideEffects": [
+    "./styles.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devslab-kr/dds.git",
+    "directory": "packages/dds-svelte"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "files": [
+    "dist",
+    "styles.css",
+    "README.md",
+    "README.ko.md"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "dependencies": {
+    "@devslab/dds-css": "0.29.0",
+    "@devslab/dds-tokens": "0.29.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.46.4"
+  },
+  "devDependencies": {
+    "svelte": "5.57.2",
+    "@sveltejs/package": "3.0.1",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "svelte-check": "4.7.7",
+    "typescript": "6.0.3",
+    "vite": "8.2.1",
+    "vitest": "4.1.1",
+    "jsdom": "30.0.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/user-event": "14.6.1",
+    "axe-core": "4.13.0"
+  },
+  "scripts": {
+    "build": "svelte-package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run && vitest run --config vitest.ssr.config.ts"
+  }
 }

package/styles.css

@@ -0,0 +1,2 @@
+@import "@devslab/dds-tokens/tokens.css";
+@import "@devslab/dds-css/dds.css";