@sentropic/design-system-svelte 0.3.0

package/dist/Dropdown.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type DropdownOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+  };
+
+  type DropdownProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
+    label: string;
+    options: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    open?: boolean;
+    class?: string;
+    onselect?: (value: string) => void;
+  };
+
+  let {
+    label,
+    options,
+    value,
+    placeholder = "Select",
+    open = false,
+    class: className,
+    onselect,
+    ...rest
+  }: DropdownProps = $props();
+
+  let expanded = $state(false);
+  let currentValue = $state<string | undefined>(undefined);
+  let syncedOpen = $state<boolean | undefined>(undefined);
+  let syncedValue = $state<string | undefined>(undefined);
+  const classes = () => ["st-dropdown", className].filter(Boolean).join(" ");
+  const selectedLabel = () => options.find((option) => option.value === currentValue)?.label ?? placeholder;
+  const selectOption = (option: DropdownOption) => {
+    if (option.disabled) return;
+    currentValue = option.value;
+    expanded = false;
+    onselect?.(option.value);
+  };
+
+  $effect(() => {
+    if (syncedOpen !== open) {
+      expanded = open;
+      syncedOpen = open;
+    }
+  });
+
+  $effect(() => {
+    if (syncedValue !== value) {
+      currentValue = value;
+      syncedValue = value;
+    }
+  });
+</script>
+
+<div {...rest} class={classes()}>
+  <button
+    class="st-dropdown__button"
+    type="button"
+    aria-haspopup="listbox"
+    aria-expanded={expanded}
+    onclick={() => (expanded = !expanded)}
+  >
+    <span>{label}: {selectedLabel()}</span>
+    <span aria-hidden="true">v</span>
+  </button>
+  {#if expanded}
+    <div class="st-dropdown__list" role="listbox" aria-label={label}>
+      {#each options as option (option.value)}
+        <button
+          class="st-dropdown__option"
+          type="button"
+          role="option"
+          aria-selected={option.value === currentValue ? "true" : "false"}
+          aria-disabled={option.disabled ? "true" : undefined}
+          disabled={option.disabled}
+          onclick={() => selectOption(option)}
+        >
+          {option.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-dropdown {
+    display: inline-grid;
+    min-width: 14rem;
+    position: relative;
+  }
+
+  .st-dropdown__button {
+    align-items: center;
+    background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-dropdown-radius, 0.375rem);
+    color: var(--st-component-dropdown-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    justify-content: space-between;
+    min-height: var(--st-component-control-mdHeight, 2.5rem);
+    padding: 0 var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-dropdown__button:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+
+  .st-dropdown__list {
+    background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-dropdown-radius, 0.375rem);
+    box-shadow: var(--st-component-dropdown-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
+    display: grid;
+    left: 0;
+    margin-top: var(--st-spacing-1, 0.25rem);
+    min-width: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 100%;
+    z-index: var(--st-component-popover-zIndex, 80);
+  }
+
+  .st-dropdown__option {
+    background: transparent;
+    border: 0;
+    color: var(--st-component-dropdown-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    font: inherit;
+    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
+    text-align: left;
+  }
+
+  .st-dropdown__option:hover:not(:disabled),
+  .st-dropdown__option:focus-visible {
+    background: var(
+      --st-component-dropdown-optionHoverBackground,
+      var(--st-semantic-surface-subtle)
+    );
+    outline: none;
+  }
+
+  .st-dropdown__option[aria-selected="true"] {
+    background: var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary));
+    color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
+  }
+
+  .st-dropdown__option:disabled {
+    color: var(--st-semantic-text-muted);
+    cursor: not-allowed;
+  }
+</style>

package/dist/Dropdown.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dropdown.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAiEJ,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/EmptyState.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type EmptyStateProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    title: string;
+    message?: string;
+    class?: string;
+    action?: Snippet;
+    children?: Snippet;
+  };
+
+  let { title, message, class: className, action, children, ...rest }: EmptyStateProps = $props();
+  const classes = () => ["st-empty-state", className].filter(Boolean).join(" ");
+</script>
+
+<section {...rest} class={classes()}>
+  <div class="st-empty-state__content">
+    <h2 class="st-empty-state__title">{title}</h2>
+    {#if message}<p class="st-empty-state__message">{message}</p>{/if}
+    {@render children?.()}
+  </div>
+  {#if action}
+    <div class="st-empty-state__action">
+      {@render action()}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .st-empty-state {
+    align-items: center;
+    background: var(--st-component-emptyState-background, var(--st-semantic-surface-subtle));
+    border: 1px solid var(--st-component-emptyState-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-emptyState-radius, 0.5rem);
+    color: var(--st-component-emptyState-titleText, var(--st-semantic-text-primary));
+    display: grid;
+    gap: var(--st-spacing-4, 1rem);
+    justify-items: center;
+    padding: var(--st-spacing-8, 2rem);
+    text-align: center;
+  }
+
+  .st-empty-state__content {
+    display: grid;
+    gap: var(--st-spacing-2, 0.5rem);
+    max-width: 34rem;
+  }
+
+  .st-empty-state__title {
+    font-size: 1.125rem;
+    margin: 0;
+  }
+
+  .st-empty-state__message {
+    color: var(--st-component-emptyState-messageText, var(--st-semantic-text-secondary));
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .st-empty-state__action {
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dist/EmptyState.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../src/lib/EmptyState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,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,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2BJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Input.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type InputProps = Omit<HTMLInputAttributes, "class" | "size"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    class?: string;
+  };
+
+  let {
+    label,
+    helperText,
+    errorText,
+    invalid = false,
+    size = "md",
+    class: className,
+    ...rest
+  }: InputProps = $props();
+
+  const fieldClasses = () => ["st-field", className].filter(Boolean).join(" ");
+  const controlClasses = () => ["st-control", `st-control--${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}
+    <input {...rest} class={controlClasses()} aria-invalid={isInvalid() ? "true" : undefined} />
+  </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-control {
+    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 0.75rem;
+    transition:
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 100%;
+  }
+
+  .st-control--sm {
+    min-height: var(--st-component-control-smHeight, 2rem);
+  }
+
+  .st-control--md {
+    min-height: var(--st-component-control-mdHeight, 2.5rem);
+  }
+
+  .st-control--lg {
+    min-height: var(--st-component-control-lgHeight, 3rem);
+  }
+
+  .st-control::placeholder {
+    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
+  }
+
+  .st-control:hover:not(:disabled) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-control: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-control[aria-invalid="true"] {
+    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-control:disabled {
+    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+</style>

package/dist/Input.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Input.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,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;CAChB,CAAC;AAoCJ,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Link.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type LinkProps = Omit<HTMLAnchorAttributes, "class" | "href" | "target" | "rel" | "onclick"> & {
+    href: string;
+    variant?: "inline" | "standalone" | "muted";
+    disabled?: boolean;
+    external?: boolean;
+    class?: string;
+    target?: HTMLAnchorAttributes["target"];
+    rel?: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+  };
+
+  let {
+    href,
+    variant = "inline",
+    disabled = false,
+    external = false,
+    class: className,
+    target,
+    rel,
+    onclick,
+    children,
+    ...rest
+  }: LinkProps = $props();
+
+  const classes = () =>
+    ["st-link", `st-link--${variant}`, disabled ? "st-link--disabled" : undefined, className]
+      .filter(Boolean)
+      .join(" ");
+  const linkTarget = () => target ?? (external ? "_blank" : undefined);
+  const linkRel = () => rel ?? (external ? "noreferrer" : undefined);
+  const handleClick = (event: MouseEvent) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onclick?.(event);
+  };
+</script>
+
+<a
+  {...rest}
+  class={classes()}
+  href={disabled ? undefined : href}
+  target={linkTarget()}
+  rel={linkRel()}
+  aria-disabled={disabled ? "true" : undefined}
+  onclick={handleClick}
+>
+  {@render children?.()}
+</a>
+
+<style>
+  .st-link {
+    color: var(--st-component-link-text, var(--st-semantic-text-link));
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 0.18em;
+  }
+
+  .st-link--standalone {
+    display: inline-flex;
+    font-weight: 600;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-link--muted {
+    color: var(--st-semantic-text-secondary);
+  }
+
+  .st-link:hover {
+    color: var(--st-component-link-hoverText, var(--st-semantic-action-primary));
+  }
+
+  .st-link:focus-visible {
+    border-radius: var(--st-radius-small, 0.375rem);
+    outline: 2px solid var(--st-component-link-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+
+  .st-link--disabled {
+    color: var(--st-component-link-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+    text-decoration: none;
+  }
+</style>

package/dist/Link.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+type LinkProps = Omit<HTMLAnchorAttributes, "class" | "href" | "target" | "rel" | "onclick"> & {
+    href: string;
+    variant?: "inline" | "standalone" | "muted";
+    disabled?: boolean;
+    external?: boolean;
+    class?: string;
+    target?: HTMLAnchorAttributes["target"];
+    rel?: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+};
+declare const Link: import("svelte").Component<LinkProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;
+//# sourceMappingURL=Link.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Link.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,KAAK,SAAS,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,GAAG;IAC7F,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0CJ,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/LoadingState.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type LoadingStateProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    label?: string;
+    variant?: "spinner" | "skeleton";
+    class?: string;
+  };
+
+  let { label = "Loading", variant = "spinner", class: className, ...rest }: LoadingStateProps =
+    $props();
+
+  const classes = () =>
+    ["st-loading", `st-loading--${variant}`, className].filter(Boolean).join(" ");
+</script>
+
+<section {...rest} class={classes()} role="status" aria-label={label} aria-busy="true">
+  {#if variant === "spinner"}
+    <span class="st-loading__spinner" aria-hidden="true"></span>
+  {:else}
+    <span class="st-loading__skeleton" aria-hidden="true"></span>
+  {/if}
+  <span class="st-loading__label">{label}</span>
+</section>
+
+<style>
+  .st-loading {
+    align-items: center;
+    color: var(--st-component-loadingState-text, var(--st-semantic-text-secondary));
+    display: inline-flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-loading__spinner {
+    animation: st-loading-spin 800ms linear infinite;
+    border: 2px solid var(--st-component-loadingState-track, var(--st-semantic-surface-subtle));
+    border-radius: var(--st-component-loadingState-radius, 9999px);
+    border-top-color: var(--st-component-loadingState-indicator, var(--st-semantic-action-primary));
+    display: inline-block;
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  .st-loading__skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--st-component-loadingState-track, var(--st-semantic-surface-subtle)),
+      var(--st-component-loadingState-indicator, var(--st-semantic-action-primary)),
+      var(--st-component-loadingState-track, var(--st-semantic-surface-subtle))
+    );
+    background-size: 200% 100%;
+    border-radius: var(--st-component-loadingState-radius, 9999px);
+    display: inline-block;
+    height: 0.75rem;
+    width: 8rem;
+  }
+
+  .st-loading--skeleton .st-loading__skeleton {
+    animation: st-loading-skeleton 1200ms ease-in-out infinite;
+  }
+
+  .st-loading__label {
+    font-size: 0.875rem;
+  }
+
+  @keyframes st-loading-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes st-loading-skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+</style>

package/dist/LoadingState.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "svelte/elements";
+type LoadingStateProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    label?: string;
+    variant?: "spinner" | "skeleton";
+    class?: string;
+};
+declare const LoadingState: import("svelte").Component<LoadingStateProps, {}, "">;
+type LoadingState = ReturnType<typeof LoadingState>;
+export default LoadingState;
+//# sourceMappingURL=LoadingState.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.svelte.d.ts","sourceRoot":"","sources":["../src/lib/LoadingState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyBJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/Menu.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  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;
+  };
+
+  let { label, items, class: className, onselect, ...rest }: MenuProps = $props();
+  const classes = () => ["st-menu", className].filter(Boolean).join(" ");
+  const selectItem = (item: MenuItem) => {
+    if (!item.disabled) onselect?.(item.value);
+  };
+</script>
+
+<div {...rest} class={classes()} role="menu" aria-label={label}>
+  {#each items as item (item.value)}
+    <button
+      class="st-menu__item"
+      type="button"
+      role="menuitem"
+      aria-disabled={item.disabled ? "true" : undefined}
+      disabled={item.disabled}
+      onclick={() => selectItem(item)}
+    >
+      {item.label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .st-menu {
+    background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
+    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-menu-radius, 0.375rem);
+    box-shadow: var(--st-component-menu-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
+    color: var(--st-component-menu-text, var(--st-semantic-text-primary));
+    display: grid;
+    min-width: 12rem;
+    padding: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-menu__item {
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-radius-small, 0.375rem);
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
+    text-align: left;
+  }
+
+  .st-menu__item:hover:not(:disabled),
+  .st-menu__item:focus-visible {
+    background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
+    outline: none;
+  }
+
+  .st-menu__item:disabled {
+    color: var(--st-component-menu-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+</style>