@sentropic/design-system-svelte 0.6.0 → 0.8.0

package/dist/OverflowMenu.svelte

@@ -1,14 +1,42 @@
 <script lang="ts" module>
-  export interface OverflowMenuItem {
+  import type { Component } from "svelte";
+
+  export type OverflowMenuIconProps = {
+    size?: number | string;
+    strokeWidth?: number | string;
+    color?: string;
+    class?: string;
+  } & Record<`data-${string}`, unknown>;
+
+  export type OverflowMenuIcon = Component<OverflowMenuIconProps>;
+
+  export interface OverflowMenuActionItem {
+    kind?: "item";
     value: string;
     label: string;
     disabled?: boolean;
     danger?: boolean;
+    icon?: OverflowMenuIcon;
     onclick?: () => void;
   }
+
+  export interface OverflowMenuDividerItem {
+    kind: "divider";
+  }
+
+  export interface OverflowMenuGroupItem {
+    kind: "group";
+    label: string;
+  }
+
+  export type OverflowMenuItem =
+    | OverflowMenuActionItem
+    | OverflowMenuDividerItem
+    | OverflowMenuGroupItem;
 </script>
 
 <script lang="ts">
+  import { Ellipsis } from "@lucide/svelte";
   import type { HTMLAttributes } from "svelte/elements";
 
   type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
@@ -18,6 +46,7 @@
     placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
     class?: string;
     triggerLabel?: string;
+    dense?: boolean;
     onselect?: (value: string) => void;
   };
 
@@ -28,6 +57,7 @@
     placement = "bottom-end",
     class: className,
     triggerLabel = "More actions",
+    dense = false,
     onselect,
     ...rest
   }: OverflowMenuProps = $props();
@@ -35,7 +65,14 @@
   let host: HTMLDivElement | undefined = $state();
 
   const classes = () =>
-    ["st-overflowMenu", `st-overflowMenu--${placement}`, className].filter(Boolean).join(" ");
+    [
+      "st-overflowMenu",
+      `st-overflowMenu--${placement}`,
+      dense ? "st-overflowMenu--dense" : null,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ");
 
   function toggle() {
     open = !open;
@@ -45,13 +82,17 @@
     open = false;
   }
 
-  function selectItem(item: OverflowMenuItem) {
+  function selectItem(item: OverflowMenuActionItem) {
     if (item.disabled) return;
     item.onclick?.();
     onselect?.(item.value);
     close();
   }
 
+  function isAction(item: OverflowMenuItem): item is OverflowMenuActionItem {
+    return item.kind === undefined || item.kind === "item";
+  }
+
   function onWindowKeydown(event: KeyboardEvent) {
     if (event.key === "Escape" && open) {
       event.preventDefault();
@@ -77,28 +118,36 @@
     aria-label={triggerLabel}
     onclick={toggle}
   >
-    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
-      <circle cx="3" cy="8" r="1.4" fill="currentColor" />
-      <circle cx="8" cy="8" r="1.4" fill="currentColor" />
-      <circle cx="13" cy="8" r="1.4" fill="currentColor" />
-    </svg>
+    <Ellipsis size={18} strokeWidth={2.25} aria-hidden="true" />
   </button>
   {#if open}
     <ul class="st-overflowMenu__list" role="menu" aria-label={label}>
-      {#each items as item (item.value)}
-        <li role="none" class="st-overflowMenu__listItem">
-          <button
-            type="button"
-            class="st-overflowMenu__item"
-            class:st-overflowMenu__item--danger={item.danger}
-            role="menuitem"
-            aria-disabled={item.disabled ? "true" : undefined}
-            disabled={item.disabled}
-            onclick={() => selectItem(item)}
-          >
-            {item.label}
-          </button>
-        </li>
+      {#each items as item, index (index)}
+        {#if isAction(item)}
+          {@const Icon = item.icon}
+          <li role="none" class="st-overflowMenu__listItem">
+            <button
+              type="button"
+              class="st-overflowMenu__item"
+              class:st-overflowMenu__item--danger={item.danger}
+              role="menuitem"
+              aria-disabled={item.disabled ? "true" : undefined}
+              disabled={item.disabled}
+              onclick={() => selectItem(item)}
+            >
+              {#if Icon}
+                <span class="st-overflowMenu__itemIcon" aria-hidden="true">
+                  <Icon size={16} strokeWidth={2} />
+                </span>
+              {/if}
+              <span class="st-overflowMenu__itemLabel">{item.label}</span>
+            </button>
+          </li>
+        {:else if item.kind === "divider"}
+          <li role="separator" aria-hidden="true" class="st-overflowMenu__divider"></li>
+        {:else}
+          <li role="presentation" class="st-overflowMenu__group">{item.label}</li>
+        {/if}
       {/each}
     </ul>
   {/if}
@@ -152,7 +201,8 @@
     display: grid;
     list-style: none;
     margin: 0;
-    min-width: 12rem;
+    min-width: var(--st-component-menu-minWidth, 12rem);
+    max-width: var(--st-component-menu-maxWidth, 18rem);
     padding: var(--st-spacing-1, 0.25rem);
     position: absolute;
     z-index: var(--st-component-popover-zIndex, 80);
@@ -184,18 +234,24 @@
   }
 
   .st-overflowMenu__item {
+    align-items: center;
     background: transparent;
     border: 0;
     border-radius: var(--st-radius-small, 0.375rem);
     color: var(--st-component-menu-text, var(--st-semantic-text-primary));
     cursor: pointer;
-    display: block;
+    display: flex;
     font: inherit;
+    gap: var(--st-spacing-2, 0.5rem);
     padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
     text-align: left;
     width: 100%;
   }
 
+  .st-overflowMenu--dense .st-overflowMenu__item {
+    padding: 0.3rem 0.6rem;
+  }
+
   .st-overflowMenu__item:hover:not(:disabled),
   .st-overflowMenu__item:focus-visible {
     background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
@@ -219,4 +275,35 @@
     );
     color: var(--st-component-overflowMenu-dangerHoverText, var(--st-semantic-action-primaryText));
   }
+
+  .st-overflowMenu__itemIcon {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+  }
+
+  .st-overflowMenu__itemLabel {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .st-overflowMenu__divider {
+    background: var(--st-component-menu-border, var(--st-semantic-border-subtle));
+    height: 1px;
+    list-style: none;
+    margin: 0.25rem 0;
+  }
+
+  .st-overflowMenu__group {
+    color: var(--st-component-menu-groupText, var(--st-semantic-text-muted));
+    font-size: 0.72rem;
+    font-weight: 650;
+    letter-spacing: 0.04em;
+    padding: 0.45rem 0.75rem 0.25rem;
+    text-transform: uppercase;
+    list-style: none;
+  }
 </style>

package/dist/OverflowMenu.svelte.d.ts

@@ -1,10 +1,28 @@
-export interface OverflowMenuItem {
+import type { Component } from "svelte";
+export type OverflowMenuIconProps = {
+    size?: number | string;
+    strokeWidth?: number | string;
+    color?: string;
+    class?: string;
+} & Record<`data-${string}`, unknown>;
+export type OverflowMenuIcon = Component<OverflowMenuIconProps>;
+export interface OverflowMenuActionItem {
+    kind?: "item";
     value: string;
     label: string;
     disabled?: boolean;
     danger?: boolean;
+    icon?: OverflowMenuIcon;
     onclick?: () => void;
 }
+export interface OverflowMenuDividerItem {
+    kind: "divider";
+}
+export interface OverflowMenuGroupItem {
+    kind: "group";
+    label: string;
+}
+export type OverflowMenuItem = OverflowMenuActionItem | OverflowMenuDividerItem | OverflowMenuGroupItem;
 import type { HTMLAttributes } from "svelte/elements";
 type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
     items: OverflowMenuItem[];
@@ -13,9 +31,10 @@ type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselec
     placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
     class?: string;
     triggerLabel?: string;
+    dense?: boolean;
     onselect?: (value: string) => void;
 };
-declare const OverflowMenu: import("svelte").Component<OverflowMenuProps, {}, "open">;
+declare const OverflowMenu: Component<OverflowMenuProps, {}, "open">;
 type OverflowMenu = ReturnType<typeof OverflowMenu>;
 export default OverflowMenu;
 //# sourceMappingURL=OverflowMenu.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OverflowMenu.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA+EJ,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"OverflowMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OverflowMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,OAAO,CAAC,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,gBAAgB,GACxB,sBAAsB,GACtB,uBAAuB,GACvB,qBAAqB,CAAC;AAI5B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAoGJ,QAAA,MAAM,YAAY,0CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/PaginationNav.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
+  import { ChevronLeft, ChevronRight, Ellipsis } from "@lucide/svelte";
 
   type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
     page: number;
@@ -89,22 +90,15 @@
         disabled={page <= 1 || pageCount <= 0}
         onclick={() => go(page - 1)}
       >
-        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-          <path
-            d="M10 3 5 8l5 5"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.6"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ChevronLeft size={16} strokeWidth={2} aria-hidden="true" />
       </button>
     </li>
     {#each slots as slot, index (typeof slot === "number" ? `p-${slot}` : `${slot}-${index}`)}
       <li>
         {#if slot === "ellipsis-start" || slot === "ellipsis-end"}
-          <span class="st-paginationNav__ellipsis" aria-hidden="true">…</span>
+          <span class="st-paginationNav__ellipsis" aria-hidden="true">
+            <Ellipsis size={16} strokeWidth={2} aria-hidden="true" />
+          </span>
         {:else}
           <button
             type="button"
@@ -127,16 +121,7 @@
         disabled={page >= pageCount || pageCount <= 0}
         onclick={() => go(page + 1)}
       >
-        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-          <path
-            d="M6 3l5 5-5 5"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.6"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ChevronRight size={16} strokeWidth={2} aria-hidden="true" />
       </button>
     </li>
   </ul>

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PaginationNav.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;AA2GJ,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PaginationNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PaginationNav.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;AA0GJ,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/PasswordInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from "svelte/elements";
+  import { Eye, EyeOff } from "@lucide/svelte";
 
   type PasswordInputProps = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value"> & {
     label?: string;
@@ -60,16 +61,9 @@
         onclick={toggle}
       >
         {#if visible}
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" width="16" height="16" aria-hidden="true">
-            <path d="M2 8s2-4 6-4 6 4 6 4-2 4-6 4-6-4-6-4Z" />
-            <circle cx="8" cy="8" r="2" />
-            <path d="M2 2l12 12" stroke-linecap="round" />
-          </svg>
+          <EyeOff size={16} strokeWidth={2} aria-hidden="true" />
         {:else}
-          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" width="16" height="16" aria-hidden="true">
-            <path d="M2 8s2-4 6-4 6 4 6 4-2 4-6 4-6-4-6-4Z" />
-            <circle cx="8" cy="8" r="2" />
-          </svg>
+          <Eye size={16} strokeWidth={2} aria-hidden="true" />
         {/if}
       </button>
     </span>

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IACzF,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6DJ,QAAA,MAAM,aAAa,yEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IACzF,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuDJ,QAAA,MAAM,aAAa,yEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ProgressIndicator.svelte

@@ -16,6 +16,7 @@
 
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
+  import { Check, X } from "@lucide/svelte";
 
   type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
     items: ProgressIndicatorItem[];
@@ -56,26 +57,9 @@
       <span class="st-progressIndicator__indicator" aria-hidden="true">
         <span class="st-progressIndicator__circle">
           {#if status === "complete"}
-            <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
-              <path
-                d="m3 8 3.5 3.5L13 5"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.6"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
+            <Check size={14} strokeWidth={2} aria-hidden="true" />
           {:else if status === "invalid"}
-            <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
-              <path
-                d="M4 4l8 8M12 4l-8 8"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.6"
-                stroke-linecap="round"
-              />
-            </svg>
+            <X size={14} strokeWidth={2} aria-hidden="true" />
           {:else if status === "current"}
             <span class="st-progressIndicator__dot"></span>
           {:else}

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmEJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ProgressIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIpD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgEJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/Search.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from "svelte/elements";
+  import { Search as SearchIcon, X } from "@lucide/svelte";
 
   type SearchProps = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value"> & {
     label?: string;
@@ -41,15 +42,11 @@
     {#if label}<span class="st-field__label">{label}</span>{/if}
     <span class={groupClasses()}>
       <span class="st-search__icon" aria-hidden="true">
-        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16">
-          <circle cx="7" cy="7" r="4.5" />
-          <path d="m13 13-2.6-2.6" stroke-linecap="round" />
-        </svg>
+        <SearchIcon size={16} strokeWidth={2} aria-hidden="true" />
       </span>
       <input
         {...rest}
         type="search"
-        role="searchbox"
         class="st-search__control"
         bind:value
         {placeholder}
@@ -64,7 +61,7 @@
           {disabled}
           onclick={clear}
         >
-          <span aria-hidden="true">×</span>
+          <X size={16} strokeWidth={2} aria-hidden="true" />
         </button>
       {/if}
     </span>

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

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAClF,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyDJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAClF,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuDJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Sparkline.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  type SparklineTone = "neutral" | "success" | "warning" | "error";
+
+  type SparklineProps = {
+    data: number[];
+    width?: number;
+    height?: number;
+    tone?: SparklineTone;
+    strokeWidth?: number;
+    area?: boolean;
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    data,
+    width = 120,
+    height = 28,
+    tone = "neutral",
+    strokeWidth = 1.5,
+    area = false,
+    label,
+    class: className
+  }: SparklineProps = $props();
+
+  const PADDING = 2;
+
+  const geometry = $derived.by(() => {
+    if (!data || data.length === 0) {
+      return { line: "", area: "" };
+    }
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const span = max - min || 1;
+    const innerWidth = Math.max(width - PADDING * 2, 1);
+    const innerHeight = Math.max(height - PADDING * 2, 1);
+    const step = data.length > 1 ? innerWidth / (data.length - 1) : 0;
+    const points = data.map((value, index) => {
+      const x = PADDING + step * index;
+      const normalised = (value - min) / span;
+      const y = PADDING + (1 - normalised) * innerHeight;
+      return { x, y };
+    });
+    const line = points
+      .map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`)
+      .join(" ");
+    const baseline = height - PADDING;
+    const first = points[0];
+    const last = points[points.length - 1];
+    const areaPath = `${line} L${last.x.toFixed(2)},${baseline.toFixed(2)} L${first.x.toFixed(2)},${baseline.toFixed(2)} Z`;
+    return { line, area: areaPath };
+  });
+
+  const classes = () =>
+    ["st-sparkline", `st-sparkline--${tone}`, className].filter(Boolean).join(" ");
+</script>
+
+<span
+  class={classes()}
+  role="img"
+  aria-label={label}
+>
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 {width} {height}"
+    preserveAspectRatio="none"
+    aria-hidden={label ? "true" : undefined}
+    focusable="false"
+  >
+    {#if area && geometry.area}
+      <path d={geometry.area} class="st-sparkline__area" />
+    {/if}
+    {#if geometry.line}
+      <path
+        d={geometry.line}
+        class="st-sparkline__line"
+        fill="none"
+        stroke-width={strokeWidth}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    {/if}
+  </svg>
+</span>
+
+<style>
+  .st-sparkline {
+    display: inline-flex;
+    line-height: 0;
+    vertical-align: middle;
+  }
+
+  .st-sparkline svg {
+    display: block;
+  }
+
+  .st-sparkline--neutral {
+    color: var(--st-component-sparkline-neutralStroke, var(--st-semantic-text-secondary));
+  }
+
+  .st-sparkline--success {
+    color: var(--st-component-sparkline-successStroke, var(--st-semantic-feedback-success));
+  }
+
+  .st-sparkline--warning {
+    color: var(--st-component-sparkline-warningStroke, var(--st-semantic-feedback-warning));
+  }
+
+  .st-sparkline--error {
+    color: var(--st-component-sparkline-errorStroke, var(--st-semantic-feedback-error));
+  }
+
+  .st-sparkline__line {
+    stroke: currentColor;
+  }
+
+  .st-sparkline__area {
+    fill: currentColor;
+    opacity: 0.18;
+    stroke: none;
+  }
+</style>

package/dist/Sparkline.svelte.d.ts

@@ -0,0 +1,15 @@
+type SparklineTone = "neutral" | "success" | "warning" | "error";
+type SparklineProps = {
+    data: number[];
+    width?: number;
+    height?: number;
+    tone?: SparklineTone;
+    strokeWidth?: number;
+    area?: boolean;
+    label?: string;
+    class?: string;
+};
+declare const Sparkline: import("svelte").Component<SparklineProps, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;
+//# sourceMappingURL=Sparkline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Sparkline.svelte.ts"],"names":[],"mappings":"AAGE,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+DJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}