@sentropic/design-system-svelte 0.6.0 → 0.8.0

package/dist/MenuPopover.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type MenuPopoverProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    open?: boolean;
+    trigger: HTMLElement | null;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    align?: "start" | "end" | "center";
+    label: string;
+    class?: string;
+    closeOnOutside?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+  };
+
+  let {
+    open = $bindable(false),
+    trigger,
+    placement = "bottom-start",
+    align,
+    label,
+    class: className,
+    closeOnOutside = true,
+    closeOnEscape = true,
+    children,
+    ...rest
+  }: MenuPopoverProps = $props();
+
+  let panel: HTMLDivElement | undefined = $state();
+  let top = $state(0);
+  let left = $state(0);
+  let alignmentRight = $state(false);
+  let alignmentCenter = $state(false);
+
+  const GAP = 4;
+
+  function computePosition() {
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const verticalUp = placement === "top-start" || placement === "top-end";
+    const horizontalEnd = placement === "bottom-end" || placement === "top-end";
+
+    // Resolve secondary alignment override (align prop overrides the placement's horizontal cue).
+    const resolvedAlign: "start" | "end" | "center" = align
+      ?? (horizontalEnd ? "end" : "start");
+
+    alignmentRight = resolvedAlign === "end";
+    alignmentCenter = resolvedAlign === "center";
+
+    if (verticalUp) {
+      // We don't know the panel height yet on first frame; position the panel's
+      // bottom edge above the trigger using transform.
+      top = rect.top + window.scrollY - GAP;
+    } else {
+      top = rect.bottom + window.scrollY + GAP;
+    }
+
+    if (resolvedAlign === "end") {
+      left = rect.right + window.scrollX;
+    } else if (resolvedAlign === "center") {
+      left = rect.left + window.scrollX + rect.width / 2;
+    } else {
+      left = rect.left + window.scrollX;
+    }
+  }
+
+  $effect(() => {
+    if (!open) return;
+    computePosition();
+    const onScroll = () => computePosition();
+    const onResize = () => computePosition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  });
+
+  function isWithin(event: Event, node: HTMLElement | null | undefined): boolean {
+    if (!node) return false;
+    const path = typeof (event as Event & { composedPath?: () => EventTarget[] }).composedPath === "function"
+      ? (event as Event & { composedPath: () => EventTarget[] }).composedPath()
+      : [];
+    if (path.includes(node)) return true;
+    const target = event.target as Node | null;
+    return Boolean(target && node.contains(target));
+  }
+
+  function onWindowPointerDown(event: PointerEvent) {
+    if (!open || !closeOnOutside) return;
+    if (isWithin(event, panel)) return;
+    if (isWithin(event, trigger)) return;
+    open = false;
+  }
+
+  function onWindowKeyDown(event: KeyboardEvent) {
+    if (!open || !closeOnEscape) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      open = false;
+    }
+  }
+
+  const classes = () =>
+    [
+      "st-menuPopover",
+      `st-menuPopover--${placement}`,
+      alignmentRight ? "st-menuPopover--alignEnd" : null,
+      alignmentCenter ? "st-menuPopover--alignCenter" : null,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ");
+</script>
+
+<svelte:window onpointerdown={onWindowPointerDown} onkeydown={onWindowKeyDown} />
+
+{#if open}
+  <div
+    {...rest}
+    bind:this={panel}
+    class={classes()}
+    role="dialog"
+    aria-label={label}
+    style={`top: ${top}px; left: ${left}px;`}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  .st-menuPopover {
+    background: var(--st-component-menu-background, var(--st-semantic-surface-raised, #ffffff));
+    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));
+    min-width: var(--st-component-menu-minWidth, 12rem);
+    max-width: var(--st-component-menu-maxWidth, 18rem);
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+    padding: 0;
+    position: absolute;
+    z-index: var(--st-component-popover-zIndex, 80);
+  }
+
+  /* Default origin: left edge aligned to trigger left. */
+  .st-menuPopover--alignEnd {
+    /* Move the panel left by 100% of its width so its right edge aligns to `left`. */
+    transform: translateX(-100%);
+  }
+
+  .st-menuPopover--alignCenter {
+    transform: translateX(-50%);
+  }
+
+  /* For top placements, the `top` value is the trigger's top edge; shift the
+     panel up by 100% of its height so its bottom edge sits above the trigger. */
+  .st-menuPopover--top-start {
+    transform: translateY(-100%);
+  }
+
+  .st-menuPopover--top-end {
+    transform: translate(-100%, -100%);
+  }
+
+  .st-menuPopover--top-start.st-menuPopover--alignEnd {
+    transform: translate(-100%, -100%);
+  }
+
+  .st-menuPopover--top-start.st-menuPopover--alignCenter {
+    transform: translate(-50%, -100%);
+  }
+
+  .st-menuPopover--top-end.st-menuPopover--alignCenter {
+    transform: translate(-50%, -100%);
+  }
+</style>

package/dist/MenuPopover.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type MenuPopoverProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    open?: boolean;
+    trigger: HTMLElement | null;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    align?: "start" | "end" | "center";
+    label: string;
+    class?: string;
+    closeOnOutside?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+};
+declare const MenuPopover: import("svelte").Component<MenuPopoverProps, {}, "open">;
+type MenuPopover = ReturnType<typeof MenuPopover>;
+export default MenuPopover;
+//# sourceMappingURL=MenuPopover.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopover.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MenuPopover.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuHJ,QAAA,MAAM,WAAW,0DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/MenuTriggerButton.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { ChevronDownCircle } from "@lucide/svelte";
+  import IconButton from "./IconButton.svelte";
+
+  type MenuTriggerButtonProps = Omit<
+    HTMLButtonAttributes,
+    "class" | "type" | "aria-label" | "aria-haspopup" | "aria-expanded" | "aria-controls"
+  > & {
+    "aria-label": string;
+    "aria-controls"?: string;
+    expanded?: boolean;
+    size?: "sm" | "md" | "lg";
+    variant?: "ghost" | "secondary";
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+  };
+
+  let {
+    "aria-label": ariaLabel,
+    "aria-controls": ariaControls,
+    expanded = false,
+    size = "md",
+    variant = "ghost",
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: MenuTriggerButtonProps = $props();
+</script>
+
+<IconButton
+  {...rest}
+  aria-label={ariaLabel}
+  aria-haspopup="menu"
+  aria-expanded={expanded}
+  aria-controls={ariaControls}
+  {size}
+  {variant}
+  {disabled}
+  class={className}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <ChevronDownCircle size={18} strokeWidth={2} aria-hidden="true" />
+  {/if}
+</IconButton>

package/dist/MenuTriggerButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type MenuTriggerButtonProps = Omit<HTMLButtonAttributes, "class" | "type" | "aria-label" | "aria-haspopup" | "aria-expanded" | "aria-controls"> & {
+    "aria-label": string;
+    "aria-controls"?: string;
+    expanded?: boolean;
+    size?: "sm" | "md" | "lg";
+    variant?: "ghost" | "secondary";
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const MenuTriggerButton: import("svelte").Component<MenuTriggerButtonProps, {}, "">;
+type MenuTriggerButton = ReturnType<typeof MenuTriggerButton>;
+export default MenuTriggerButton;
+//# sourceMappingURL=MenuTriggerButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTriggerButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MenuTriggerButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAK1D,KAAK,sBAAsB,GAAG,IAAI,CAChC,oBAAoB,EACpB,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CACtF,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA+BJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/MessageActions.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import IconButton from "./IconButton.svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type MessageActionVariant = "default" | "danger";
+
+  export type MessageAction = {
+    id: string;
+    label: string;
+    icon: Snippet;
+    onClick?: () => void;
+    disabled?: boolean;
+    variant?: MessageActionVariant;
+  };
+
+  type MessageActionsVisibility = "always" | "hover";
+
+  type MessageActionsProps = Omit<HTMLAttributes<HTMLElement>, "children" | "class"> & {
+    actions: MessageAction[];
+    visibility?: MessageActionsVisibility;
+    overflow?: Snippet;
+    class?: string;
+  };
+
+  let {
+    actions = [],
+    visibility = "hover",
+    overflow,
+    class: className,
+    ...rest
+  }: MessageActionsProps = $props();
+
+  const classes = () =>
+    ["st-messageActions", visibility === "hover" && "st-messageActions--hoverOnly", className]
+      .filter(Boolean)
+      .join(" ");
+</script>
+
+<div class={classes()} {...rest} role="group" aria-label="Actions du message">
+  {#if actions.length > 0}
+    {#each actions as action (action.id)}
+      <IconButton
+        size="sm"
+        variant={action.variant === "danger" ? "danger" : "ghost"}
+        aria-label={action.label}
+        disabled={action.disabled}
+        onclick={action.onClick}
+      >
+        {@render action.icon()}
+      </IconButton>
+    {/each}
+  {/if}
+  {#if overflow}
+    <div class="st-messageActions__overflow">{@render overflow()}</div>
+  {/if}
+</div>
+
+<style>
+  .st-messageActions {
+    align-items: center;
+    display: inline-flex;
+    gap: 0.25rem;
+  }
+
+  .st-messageActions--hoverOnly {
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-messageActions--hoverOnly:focus-within,
+  .st-messageActions--hoverOnly:hover {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-messageActions--hoverOnly {
+      transition: none;
+    }
+  }
+
+  .st-messageActions__overflow {
+    align-items: center;
+    display: inline-flex;
+  }
+</style>

package/dist/MessageActions.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type MessageActionVariant = "default" | "danger";
+export type MessageAction = {
+    id: string;
+    label: string;
+    icon: Snippet;
+    onClick?: () => void;
+    disabled?: boolean;
+    variant?: MessageActionVariant;
+};
+type MessageActionsVisibility = "always" | "hover";
+type MessageActionsProps = Omit<HTMLAttributes<HTMLElement>, "children" | "class"> & {
+    actions: MessageAction[];
+    visibility?: MessageActionsVisibility;
+    overflow?: Snippet;
+    class?: string;
+};
+declare const MessageActions: import("svelte").Component<MessageActionsProps, {}, "">;
+type MessageActions = ReturnType<typeof MessageActions>;
+export default MessageActions;
+//# sourceMappingURL=MessageActions.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageActions.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MessageActions.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC,CAAC;AAEF,KAAK,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACnF,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyCJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/MessageStatusBadge.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Tag from "./Tag.svelte";
+  import type { ChatMessageStatus } from "./ChatMessage.svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type StatusTone = "neutral" | "success" | "warning" | "error" | "info";
+
+  type MessageStatusBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    status: ChatMessageStatus;
+    tone?: StatusTone;
+    class?: string;
+  };
+
+  let { status, tone, class: className, ...rest }: MessageStatusBadgeProps = $props();
+
+  const mappedTone = () => {
+    if (tone) return tone;
+    if (status === "processing") return "info";
+    if (status === "failed") return "error";
+    if (status === "completed") return "success";
+    return "warning";
+  };
+
+  const label = () => {
+    if (status === "pending") return "En attente";
+    if (status === "processing") return "En cours";
+    if (status === "completed") return "Terminé";
+    return "Échec";
+  };
+
+  const classes = () => ["st-messageStatusBadge", className].filter(Boolean).join(" ");
+</script>
+
+<Tag tone={mappedTone()} size="sm" class={classes()} {...rest} aria-label={`Statut: ${label()}`}>
+  <span class="st-messageStatusBadge__dot" aria-hidden="true"></span>
+  {label()}
+</Tag>
+
+<style>
+  .st-messageStatusBadge {
+    align-items: center;
+    text-transform: none;
+  }
+
+  .st-messageStatusBadge__dot {
+    background: currentColor;
+    border-radius: 999px;
+    display: inline-block;
+    height: 0.38rem;
+    width: 0.38rem;
+  }
+</style>

package/dist/MessageStatusBadge.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MessageStatusBadge.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvE,KAAK,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqCJ,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/Modal.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { X } from "@lucide/svelte";
+  import { tick } from "svelte";
   import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
 
@@ -25,19 +27,97 @@
     ...rest
   }: ModalProps = $props();
 
+  let dialog: HTMLElement | undefined = $state();
+  let closeButton: HTMLButtonElement | undefined = $state();
+  let previousFocus: HTMLElement | null = null;
   const classes = () => ["st-modal", className].filter(Boolean).join(" ");
+
+  const focusableSelector = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])"
+  ].join(",");
+
+  $effect(() => {
+    if (!open) return;
+    previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    tick().then(() => closeButton?.focus());
+  });
+
+  function requestClose() {
+    onclose?.();
+    tick().then(() => previousFocus?.focus());
+  }
+
+  function trapFocus(event: KeyboardEvent) {
+    if (!dialog || event.key !== "Tab") return;
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(focusableSelector));
+
+    if (focusable.length === 0) {
+      event.preventDefault();
+      dialog.focus();
+      return;
+    }
+
+    const first = focusable[0];
+    const last = focusable.at(-1);
+    const active = document.activeElement;
+
+    if (!dialog.contains(active)) {
+      event.preventDefault();
+      first.focus();
+      return;
+    }
+
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function onWindowKeydown(event: KeyboardEvent) {
+    if (!open) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestClose();
+      return;
+    }
+    trapFocus(event);
+  }
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 {#if open}
   <div class="st-modal__backdrop">
-    <section {...rest} class={classes()} role="dialog" aria-modal="true" aria-label={title}>
+    <section
+      {...rest}
+      bind:this={dialog}
+      class={classes()}
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+      tabindex="-1"
+    >
       <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
+          bind:this={closeButton}
+          class="st-modal__close"
+          type="button"
+          aria-label={closeLabel}
+          onclick={requestClose}
+        >
+          <X size={18} strokeWidth={2.25} aria-hidden="true" />
         </button>
       </header>
       <div class="st-modal__body">

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

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

package/dist/MultiSelect.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts">
+  import { ChevronDown, X } from "@lucide/svelte";
   import type { HTMLAttributes } from "svelte/elements";
 
   type MultiSelectProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
@@ -115,7 +116,7 @@
             {disabled}
             onclick={() => removeOption(option.value)}
           >
-            <span aria-hidden="true">×</span>
+            <X size={14} strokeWidth={2.25} aria-hidden="true" />
           </button>
         </span>
       {/each}
@@ -135,7 +136,13 @@
       {:else}
         <span class="st-multiSelect__count">{selectedOptions.length} selected</span>
       {/if}
-      <span class="st-multiSelect__caret" aria-hidden="true">▾</span>
+      <span class="st-multiSelect__caret" aria-hidden="true">
+        <ChevronDown
+          class={`st-multiSelect__caretIcon ${expanded ? "st-multiSelect__caretIcon--open" : ""}`}
+          size={18}
+          strokeWidth={2.25}
+        />
+      </span>
       <span class="st-visually-hidden">{toggleLabel}</span>
     </button>
   </span>
@@ -342,11 +349,18 @@
     color: var(--st-semantic-text-secondary);
     display: inline-flex;
     flex: 0 0 auto;
-    font-size: 0.875rem;
     margin-inline-start: auto;
     padding-inline-start: 0.25rem;
   }
 
+  .st-multiSelect__caretIcon {
+    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-multiSelect__caretIcon--open {
+    transform: rotate(180deg);
+  }
+
   .st-multiSelect__panel {
     background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
     border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MultiSelect.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACnF,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,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC,CAAC;AAkIJ,QAAA,MAAM,WAAW,8DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MultiSelect.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACnF,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,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC,CAAC;AAqIJ,QAAA,MAAM,WAAW,8DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}