@sentropic/design-system-svelte 0.3.0

package/dist/Menu.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "svelte/elements";
+export type MenuItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type MenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
+    label: string;
+    items: MenuItem[];
+    class?: string;
+    onselect?: (value: string) => void;
+};
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;
+//# sourceMappingURL=Menu.svelte.d.ts.map

package/dist/Menu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Menu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAyBJ,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/Modal.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ModalProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    closeLabel?: string;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+  };
+
+  let {
+    open = false,
+    title,
+    description,
+    closeLabel = "Close",
+    class: className,
+    children,
+    footer,
+    onclose,
+    ...rest
+  }: ModalProps = $props();
+
+  const classes = () => ["st-modal", className].filter(Boolean).join(" ");
+</script>
+
+{#if open}
+  <div class="st-modal__backdrop">
+    <section {...rest} class={classes()} role="dialog" aria-modal="true" aria-label={title}>
+      <header class="st-modal__header">
+        <div>
+          <h2 class="st-modal__title">{title}</h2>
+          {#if description}<p class="st-modal__description">{description}</p>{/if}
+        </div>
+        <button class="st-modal__close" type="button" aria-label={closeLabel} onclick={onclose}>
+          <span aria-hidden="true">x</span>
+        </button>
+      </header>
+      <div class="st-modal__body">
+        {@render children?.()}
+      </div>
+      {#if footer}
+        <footer class="st-modal__footer">
+          {@render footer()}
+        </footer>
+      {/if}
+    </section>
+  </div>
+{/if}
+
+<style>
+  .st-modal__backdrop {
+    align-items: center;
+    background: var(--st-component-overlay-backdrop, var(--st-semantic-surface-overlay));
+    display: grid;
+    inset: 0;
+    justify-items: center;
+    padding: var(--st-spacing-4, 1rem);
+    position: fixed;
+    z-index: var(--st-component-overlay-zIndex, 90);
+  }
+
+  .st-modal {
+    background: var(--st-component-overlay-surface, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-overlay-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-overlay-radius, 0.5rem);
+    box-shadow: var(--st-component-overlay-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    gap: var(--st-spacing-4, 1rem);
+    max-height: min(42rem, calc(100vh - 2rem));
+    max-width: 36rem;
+    overflow: auto;
+    padding: var(--st-spacing-4, 1rem);
+    width: min(100%, 36rem);
+  }
+
+  .st-modal__header {
+    align-items: start;
+    display: flex;
+    gap: var(--st-spacing-4, 1rem);
+    justify-content: space-between;
+  }
+
+  .st-modal__title {
+    font-size: 1.25rem;
+    line-height: 1.2;
+    margin: 0;
+  }
+
+  .st-modal__description {
+    color: var(--st-semantic-text-secondary);
+    line-height: 1.5;
+    margin: 0.5rem 0 0;
+  }
+
+  .st-modal__close {
+    align-items: center;
+    background: transparent;
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-radius-small, 0.375rem);
+    color: var(--st-semantic-text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    height: 2rem;
+    justify-content: center;
+    width: 2rem;
+  }
+
+  .st-modal__body {
+    line-height: 1.5;
+  }
+
+  .st-modal__footer {
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    justify-content: flex-end;
+  }
+</style>

package/dist/Modal.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ModalProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    closeLabel?: string;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+};
+declare const Modal: import("svelte").Component<ModalProps, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;
+//# sourceMappingURL=Modal.svelte.d.ts.map

package/dist/Modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Modal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAiDJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Pagination.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type PaginationProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    page: number;
+    pageCount: number;
+    previousLabel?: string;
+    nextLabel?: string;
+    class?: string;
+    onpagechange?: (page: number) => void;
+  };
+
+  let {
+    page,
+    pageCount,
+    previousLabel = "Previous",
+    nextLabel = "Next",
+    class: className,
+    onpagechange,
+    ...rest
+  }: PaginationProps = $props();
+
+  const classes = () => ["st-pagination", className].filter(Boolean).join(" ");
+  const pages = () => Array.from({ length: pageCount }, (_, index) => index + 1);
+  const go = (target: number) => {
+    if (target >= 1 && target <= pageCount && target !== page) onpagechange?.(target);
+  };
+</script>
+
+<nav {...rest} class={classes()} aria-label="Pagination">
+  <button type="button" disabled={page <= 1} onclick={() => go(page - 1)}>{previousLabel}</button>
+  {#each pages() as item}
+    <button
+      type="button"
+      class:st-pagination__page--active={item === page}
+      aria-label={`Page ${item}`}
+      aria-current={item === page ? "page" : undefined}
+      onclick={() => go(item)}
+    >
+      {item}
+    </button>
+  {/each}
+  <button type="button" disabled={page >= pageCount} onclick={() => go(page + 1)}>{nextLabel}</button>
+</nav>
+
+<style>
+  .st-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-pagination button {
+    background: var(--st-component-pagination-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-pagination-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-pagination-radius, 0.375rem);
+    color: var(--st-component-pagination-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    font: inherit;
+    min-height: 2.25rem;
+    min-width: 2.25rem;
+    padding: 0 0.75rem;
+  }
+
+  .st-pagination__page--active {
+    background: var(--st-component-pagination-activeBackground, var(--st-semantic-action-primary));
+    color: var(--st-component-pagination-activeText, var(--st-semantic-action-primaryText));
+  }
+
+  .st-pagination button:disabled {
+    color: var(--st-component-pagination-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+</style>

package/dist/Pagination.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "svelte/elements";
+type PaginationProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    page: number;
+    pageCount: number;
+    previousLabel?: string;
+    nextLabel?: string;
+    class?: string;
+    onpagechange?: (page: number) => void;
+};
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;
+//# sourceMappingURL=Pagination.svelte.d.ts.map

package/dist/Pagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Pagination.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAoCJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Popover.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type PopoverProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    open?: boolean;
+    label: string;
+    placement?: "top" | "right" | "bottom" | "left";
+    class?: string;
+    trigger?: Snippet;
+    children?: Snippet;
+  };
+
+  let {
+    open = false,
+    label,
+    placement = "bottom",
+    class: className,
+    trigger,
+    children,
+    ...rest
+  }: PopoverProps = $props();
+
+  const classes = () =>
+    ["st-popover", `st-popover--${placement}`, className].filter(Boolean).join(" ");
+</script>
+
+<span class="st-popover-host">
+  {@render trigger?.()}
+  {#if open}
+    <section {...rest} class={classes()} role="dialog" aria-label={label}>
+      {@render children?.()}
+    </section>
+  {/if}
+</span>
+
+<style>
+  .st-popover-host {
+    display: inline-block;
+    position: relative;
+  }
+
+  .st-popover {
+    background: var(--st-component-popover-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-popover-radius, 0.5rem);
+    box-shadow: var(--st-component-popover-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
+    color: var(--st-component-popover-text, var(--st-semantic-text-primary));
+    min-width: 16rem;
+    padding: var(--st-spacing-4, 1rem);
+    position: absolute;
+    z-index: var(--st-component-popover-zIndex, 80);
+  }
+
+  .st-popover--bottom {
+    left: 0;
+    top: calc(100% + var(--st-spacing-2, 0.5rem));
+  }
+
+  .st-popover--top {
+    bottom: calc(100% + var(--st-spacing-2, 0.5rem));
+    left: 0;
+  }
+
+  .st-popover--right {
+    left: calc(100% + var(--st-spacing-2, 0.5rem));
+    top: 0;
+  }
+
+  .st-popover--left {
+    right: calc(100% + var(--st-spacing-2, 0.5rem));
+    top: 0;
+  }
+</style>

package/dist/Popover.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type PopoverProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    open?: boolean;
+    label: string;
+    placement?: "top" | "right" | "bottom" | "left";
+    class?: string;
+    trigger?: Snippet;
+    children?: Snippet;
+};
+declare const Popover: import("svelte").Component<PopoverProps, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;
+//# sourceMappingURL=Popover.svelte.d.ts.map

package/dist/Popover.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Popover.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiCJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/Radio.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type RadioProps = Omit<HTMLInputAttributes, "class" | "type"> & {
+    label: string;
+    helperText?: string;
+    invalid?: boolean;
+    class?: string;
+  };
+
+  let { label, helperText, invalid = false, class: className, ...rest }: RadioProps = $props();
+  const classes = () => ["st-choice", className].filter(Boolean).join(" ");
+</script>
+
+<label class={classes()}>
+  <input {...rest} class="st-choice__input" type="radio" data-invalid={invalid ? "true" : undefined} />
+  <span class="st-choice__content">
+    <span class="st-choice__label">{label}</span>
+    {#if helperText}<span class="st-choice__help">{helperText}</span>{/if}
+  </span>
+</label>
+
+<style>
+  .st-choice {
+    align-items: start;
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    display: inline-grid;
+    gap: 0.625rem;
+    grid-template-columns: auto 1fr;
+  }
+
+  .st-choice__input {
+    height: 1rem;
+    margin: 0.125rem 0 0;
+    width: 1rem;
+  }
+
+  .st-choice__content {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .st-choice__label {
+    font-size: 0.9375rem;
+  }
+
+  .st-choice__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+</style>

package/dist/Radio.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type RadioProps = Omit<HTMLInputAttributes, "class" | "type"> & {
+    label: string;
+    helperText?: string;
+    invalid?: boolean;
+    class?: string;
+};
+declare const Radio: import("svelte").Component<RadioProps, {}, "">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;
+//# sourceMappingURL=Radio.svelte.d.ts.map

package/dist/Radio.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Radio.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqBJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Select.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLSelectAttributes } from "svelte/elements";
+
+  type SelectProps = Omit<HTMLSelectAttributes, "class" | "size"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    label,
+    helperText,
+    errorText,
+    invalid = false,
+    size = "md",
+    class: className,
+    children,
+    ...rest
+  }: SelectProps = $props();
+
+  const fieldClasses = () => ["st-field", className].filter(Boolean).join(" ");
+  const controlClasses = () => ["st-select", `st-select--${size}`].join(" ");
+  const isInvalid = () => invalid || Boolean(errorText);
+</script>
+
+<div class={fieldClasses()}>
+  <label class="st-field__control">
+    {#if label}<span class="st-field__label">{label}</span>{/if}
+    <select {...rest} class={controlClasses()} aria-invalid={isInvalid() ? "true" : undefined}>
+      {@render children?.()}
+    </select>
+  </label>
+  {#if errorText}
+    <span class="st-field__error">{errorText}</span>
+  {:else if helperText}
+    <span class="st-field__help">{helperText}</span>
+  {/if}
+</div>
+
+<style>
+  .st-field {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+    max-width: var(--st-component-field-maxWidth, 28rem);
+  }
+
+  .st-field__control {
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+  }
+
+  .st-field__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-field__help,
+  .st-field__error {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .st-field__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+  }
+
+  .st-field__error {
+    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
+  }
+
+  .st-select {
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-component-control-text, var(--st-semantic-text-primary));
+    font: inherit;
+    min-width: 0;
+    padding: 0 2rem 0 0.75rem;
+    width: 100%;
+  }
+
+  .st-select--sm {
+    min-height: var(--st-component-control-smHeight, 2rem);
+  }
+
+  .st-select--md {
+    min-height: var(--st-component-control-mdHeight, 2.5rem);
+  }
+
+  .st-select--lg {
+    min-height: var(--st-component-control-lgHeight, 3rem);
+  }
+
+  .st-select:focus-visible {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-select[aria-invalid="true"] {
+    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+</style>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
+type SelectProps = Omit<HTMLSelectAttributes, "class" | "size"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    class?: string;
+    children?: Snippet;
+};
+declare const Select: import("svelte").Component<SelectProps, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,KAAK,WAAW,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwCJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/SideNav.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+  export interface SideNavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type SideNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    items: SideNavItem[];
+    label?: string;
+    class?: string;
+  };
+
+  let { items, label = "Navigation", class: className, ...rest }: SideNavProps = $props();
+  const classes = () => ["st-sidenav", className].filter(Boolean).join(" ");
+</script>
+
+<nav {...rest} class={classes()} aria-label={label}>
+  <ul>
+    {#each items as item}
+      <li>
+        <a class:st-sidenav__link--active={item.active} href={item.href} aria-current={item.active ? "page" : undefined}>
+          {item.label}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+<style>
+  .st-sidenav {
+    background: var(--st-component-sideNav-background, var(--st-semantic-surface-default));
+    border-right: 1px solid var(--st-component-sideNav-border, var(--st-semantic-border-subtle));
+    padding: var(--st-spacing-3, 0.75rem);
+    width: var(--st-component-sideNav-width, 16rem);
+  }
+
+  .st-sidenav ul {
+    display: grid;
+    gap: 0.25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-sidenav a {
+    border-radius: var(--st-radius-small, 0.375rem);
+    color: var(--st-component-sideNav-itemText, var(--st-semantic-text-secondary));
+    display: block;
+    padding: 0.625rem 0.75rem;
+    text-decoration: none;
+  }
+
+  .st-sidenav__link--active {
+    background: var(--st-component-sideNav-activeBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-component-sideNav-activeText, var(--st-semantic-text-primary));
+    font-weight: 650;
+  }
+</style>

package/dist/SideNav.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface SideNavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type SideNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    items: SideNavItem[];
+    label?: string;
+    class?: string;
+};
+declare const SideNav: import("svelte").Component<SideNavProps, {}, "">;
+type SideNav = ReturnType<typeof SideNav>;
+export default SideNav;
+//# sourceMappingURL=SideNav.svelte.d.ts.map

package/dist/SideNav.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SideNav.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC/D,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2BJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}