@sentropic/design-system-svelte 0.3.0

package/dist/Alert.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type AlertProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    tone?: "info" | "success" | "warning" | "error";
+    title: string;
+    message?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+  };
+
+  let {
+    tone = "info",
+    title,
+    message,
+    class: className,
+    actions,
+    children,
+    ...rest
+  }: AlertProps = $props();
+
+  const classes = () => ["st-alert", `st-alert--${tone}`, className].filter(Boolean).join(" ");
+  const role = () => (tone === "error" || tone === "warning" ? "alert" : "status");
+</script>
+
+<section {...rest} class={classes()} role={role()}>
+  <div class="st-alert__content">
+    <h2 class="st-alert__title">{title}</h2>
+    {#if message}<p class="st-alert__message">{message}</p>{/if}
+    {@render children?.()}
+  </div>
+  {#if actions}
+    <div class="st-alert__actions">
+      {@render actions()}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .st-alert {
+    background: var(--st-component-alert-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle));
+    border-left-width: 0.25rem;
+    border-radius: var(--st-component-alert-radius, 0.5rem);
+    color: var(--st-component-alert-text, var(--st-semantic-text-primary));
+    display: flex;
+    gap: var(--st-spacing-4, 1rem);
+    justify-content: space-between;
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-alert--info {
+    border-left-color: var(--st-component-alert-infoBorder, var(--st-semantic-feedback-info));
+  }
+
+  .st-alert--success {
+    border-left-color: var(--st-component-alert-successBorder, var(--st-semantic-feedback-success));
+  }
+
+  .st-alert--warning {
+    border-left-color: var(--st-component-alert-warningBorder, var(--st-semantic-feedback-warning));
+  }
+
+  .st-alert--error {
+    border-left-color: var(--st-component-alert-errorBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-alert__content {
+    display: grid;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-alert__title {
+    font-size: 0.9375rem;
+    margin: 0;
+  }
+
+  .st-alert__message {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .st-alert__actions {
+    align-items: start;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+</style>

package/dist/Alert.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type AlertProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    tone?: "info" | "success" | "warning" | "error";
+    title: string;
+    message?: string;
+    class?: string;
+    actions?: Snippet;
+    children?: Snippet;
+};
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;
+//# sourceMappingURL=Alert.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Alert.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,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAqCJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Badge.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    tone?: "neutral" | "success" | "warning" | "error" | "info";
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { tone = "neutral", class: className, children, ...rest }: BadgeProps = $props();
+
+  const classes = () => ["st-badge", `st-badge--${tone}`, className].filter(Boolean).join(" ");
+</script>
+
+<span {...rest} class={classes()}>
+  {@render children?.()}
+</span>
+
+<style>
+  .st-badge {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--st-radius-pill, 999px);
+    font-size: 0.75rem;
+    font-weight: 650;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .st-badge--neutral {
+    background: var(--st-semantic-surface-subtle);
+    color: var(--st-semantic-text-secondary);
+  }
+
+  .st-badge--success {
+    background: color-mix(in srgb, var(--st-semantic-feedback-success) 14%, white);
+    color: var(--st-semantic-feedback-success);
+  }
+
+  .st-badge--warning {
+    background: color-mix(in srgb, var(--st-semantic-feedback-warning) 14%, white);
+    color: var(--st-semantic-feedback-warning);
+  }
+
+  .st-badge--error {
+    background: color-mix(in srgb, var(--st-semantic-feedback-error) 14%, white);
+    color: var(--st-semantic-feedback-error);
+  }
+
+  .st-badge--info {
+    background: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white);
+    color: var(--st-semantic-feedback-info);
+  }
+</style>

package/dist/Badge.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    tone?: "neutral" | "success" | "warning" | "error" | "info";
+    class?: string;
+    children?: Snippet;
+};
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Badge.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,eAAe,CAAC,EAAE,OAAO,CAAC,GAAG;IACjE,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmBJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Breadcrumb.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+  export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    current?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type BreadcrumbProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    items: BreadcrumbItem[];
+    label?: string;
+    class?: string;
+  };
+
+  let { items, label = "Breadcrumb", class: className, ...rest }: BreadcrumbProps = $props();
+  const classes = () => ["st-breadcrumb", className].filter(Boolean).join(" ");
+</script>
+
+<nav {...rest} class={classes()} aria-label={label}>
+  <ol>
+    {#each items as item, index}
+      <li>
+        {#if item.href && !item.current}
+          <a href={item.href}>{item.label}</a>
+        {:else}
+          <span aria-current={item.current ? "page" : undefined}>{item.label}</span>
+        {/if}
+        {#if index < items.length - 1}<span class="st-breadcrumb__separator" aria-hidden="true">/</span>{/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .st-breadcrumb ol {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-2, 0.5rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-breadcrumb li {
+    align-items: center;
+    color: var(--st-component-breadcrumb-text, var(--st-semantic-text-secondary));
+    display: inline-flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-breadcrumb a {
+    color: var(--st-component-breadcrumb-linkText, var(--st-semantic-text-link));
+  }
+
+  .st-breadcrumb [aria-current="page"] {
+    color: var(--st-component-breadcrumb-currentText, var(--st-semantic-text-primary));
+    font-weight: 600;
+  }
+
+  .st-breadcrumb__separator {
+    color: var(--st-component-breadcrumb-separator, var(--st-semantic-text-muted));
+  }
+</style>

package/dist/Breadcrumb.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8BJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Button.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  type ButtonProps = Omit<HTMLButtonAttributes, "class" | "disabled" | "type"> & {
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    type = "button",
+    class: className,
+    children,
+    ...rest
+  }: ButtonProps = $props();
+
+  const classes = () =>
+    ["st-button", `st-button--${variant}`, `st-button--${size}`, className]
+      .filter(Boolean)
+      .join(" ");
+</script>
+
+<button {...rest} class={classes()} {type} {disabled}>
+  {@render children?.()}
+</button>
+
+<style>
+  .st-button {
+    border: 1px solid transparent;
+    border-radius: var(--st-component-button-radius, 0.375rem);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--st-spacing-2, 0.5rem);
+    font: inherit;
+    font-weight: 600;
+    transition:
+      background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-button--sm {
+    min-height: 2rem;
+    padding: 0 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .st-button--md {
+    min-height: 2.5rem;
+    padding: 0 1rem;
+    font-size: 0.9375rem;
+  }
+
+  .st-button--lg {
+    min-height: 3rem;
+    padding: 0 1.25rem;
+    font-size: 1rem;
+  }
+
+  .st-button--primary {
+    background: var(--st-component-button-primaryBackground, var(--st-semantic-action-primary));
+    color: var(--st-component-button-primaryText, var(--st-semantic-action-primaryText));
+  }
+
+  .st-button--secondary {
+    background: var(--st-component-button-secondaryBackground, var(--st-semantic-action-secondary));
+    color: var(--st-component-button-secondaryText, var(--st-semantic-action-secondaryText));
+    border-color: var(--st-semantic-border-subtle);
+  }
+
+  .st-button--ghost {
+    background: transparent;
+    color: var(--st-semantic-text-link);
+  }
+
+  .st-button--danger {
+    background: var(--st-semantic-action-danger);
+    color: var(--st-semantic-text-inverse);
+  }
+
+  .st-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .st-button:focus-visible {
+    outline: 2px solid var(--st-component-input-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+</style>

package/dist/Button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type ButtonProps = Omit<HTMLButtonAttributes, "class" | "disabled" | "type"> & {
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    class?: string;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;
+//# sourceMappingURL=Button.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Button.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,UAAU,GAAG,MAAM,CAAC,GAAG;IAC7E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8BJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Card.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type CardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    interactive?: boolean;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { interactive = false, class: className, children, ...rest }: CardProps = $props();
+
+  const classes = () =>
+    ["st-card", interactive && "st-card--interactive", className].filter(Boolean).join(" ");
+</script>
+
+<section {...rest} class={classes()}>
+  {@render children?.()}
+</section>
+
+<style>
+  .st-card {
+    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-radius, 0.5rem);
+    box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
+    color: var(--st-semantic-text-primary);
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-card--interactive {
+    cursor: pointer;
+    transition:
+      box-shadow var(--st-motion-normal, 180ms) var(--st-motion-easing, ease),
+      transform var(--st-motion-normal, 180ms) var(--st-motion-easing, ease);
+  }
+
+  .st-card--interactive:hover {
+    box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
+    transform: translateY(-1px);
+  }
+</style>

package/dist/Card.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type CardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    interactive?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;
+//# sourceMappingURL=Card.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoBJ,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/Checkbox.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type CheckboxProps = Omit<HTMLInputAttributes, "class" | "type"> & {
+    label: string;
+    helperText?: string;
+    invalid?: boolean;
+    class?: string;
+  };
+
+  let { label, helperText, invalid = false, class: className, ...rest }: CheckboxProps = $props();
+  const classes = () => ["st-choice", className].filter(Boolean).join(" ");
+</script>
+
+<label class={classes()}>
+  <input {...rest} class="st-choice__input" type="checkbox" aria-invalid={invalid ? "true" : undefined} />
+  <span class="st-choice__box" aria-hidden="true"></span>
+  <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__box {
+    display: none;
+  }
+
+  .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/Checkbox.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsBJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/Drawer.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type DrawerProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    side?: "left" | "right";
+    closeLabel?: string;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    onclose?: () => void;
+  };
+
+  let {
+    open = false,
+    title,
+    description,
+    side = "right",
+    closeLabel = "Close",
+    class: className,
+    children,
+    footer,
+    onclose,
+    ...rest
+  }: DrawerProps = $props();
+
+  const classes = () => ["st-drawer", `st-drawer--${side}`, className].filter(Boolean).join(" ");
+</script>
+
+{#if open}
+  <div class="st-drawer__backdrop">
+    <aside {...rest} class={classes()} role="dialog" aria-modal="true" aria-label={title}>
+      <header class="st-drawer__header">
+        <div>
+          <h2 class="st-drawer__title">{title}</h2>
+          {#if description}<p class="st-drawer__description">{description}</p>{/if}
+        </div>
+        <button class="st-drawer__close" type="button" aria-label={closeLabel} onclick={onclose}>
+          <span aria-hidden="true">x</span>
+        </button>
+      </header>
+      <div class="st-drawer__body">
+        {@render children?.()}
+      </div>
+      {#if footer}
+        <footer class="st-drawer__footer">
+          {@render footer()}
+        </footer>
+      {/if}
+    </aside>
+  </div>
+{/if}
+
+<style>
+  .st-drawer__backdrop {
+    background: var(--st-component-drawer-backdrop, var(--st-semantic-surface-overlay));
+    inset: 0;
+    position: fixed;
+    z-index: var(--st-component-drawer-zIndex, 90);
+  }
+
+  .st-drawer {
+    background: var(--st-component-drawer-surface, var(--st-semantic-surface-raised));
+    border-color: var(--st-component-drawer-border, var(--st-semantic-border-subtle));
+    box-shadow: var(--st-component-drawer-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    max-width: min(100vw, var(--st-component-drawer-width, 24rem));
+    padding: var(--st-spacing-4, 1rem);
+    position: absolute;
+    top: 0;
+    width: var(--st-component-drawer-width, 24rem);
+  }
+
+  .st-drawer--right {
+    border-left-style: solid;
+    border-left-width: 1px;
+    right: 0;
+  }
+
+  .st-drawer--left {
+    border-right-style: solid;
+    border-right-width: 1px;
+    left: 0;
+  }
+
+  .st-drawer__header {
+    align-items: start;
+    display: flex;
+    gap: var(--st-spacing-4, 1rem);
+    justify-content: space-between;
+  }
+
+  .st-drawer__title {
+    font-size: 1.125rem;
+    line-height: 1.3;
+    margin: 0;
+  }
+
+  .st-drawer__description {
+    color: var(--st-semantic-text-secondary);
+    line-height: 1.5;
+    margin: 0.5rem 0 0;
+  }
+
+  .st-drawer__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-drawer__body {
+    line-height: 1.5;
+    overflow: auto;
+    padding-block: var(--st-spacing-4, 1rem);
+  }
+
+  .st-drawer__footer {
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    justify-content: flex-end;
+  }
+</style>

package/dist/Drawer.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Drawer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,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;AAkDJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}