@spaethtech/svelte-ui 0.20.1-dev.99.8654270 → 0.21.1-dev.108.1b2415e

package/dist/components/Alert.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
 
@@ -10,10 +11,12 @@
    */
   type AlertVariant =
     "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
-  interface Props {
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> {
     variant?: AlertVariant;
     size?: Responsive<Size>;
     text?: string;
+    /** Optional bold heading rendered above the body (`text`/`children`). Icon top-aligns when set. */
+    title?: string;
     /** Faint tinted background in addition to the bordered + coloured text. */
     filled?: boolean;
     /** Drop the visible frame while keeping the 1px box: border colour = the alert's own background
@@ -31,12 +34,14 @@
     variant = "info",
     size = "md",
     text = "",
+    title,
     filled = false,
     borderless = false,
     icon,
     iconPosition = "left",
     class: cls = "",
     children,
+    ...rest
   }: Props = $props();
 
   // Variant → semantic token (danger maps to the renamed --ui-color-error).
@@ -86,13 +91,14 @@
       ` color: ${textColor};` +
       (filled ? ` background-color: ${bgColor};` : ""),
   );
-  const has = $derived(!!children || !!text);
+  const has = $derived(!!children || !!text || !!title);
 </script>
 
 {#if has}
   <div
     role="alert"
-    class="flex items-center [border-radius:var(--ui-border-radius)] border {responsiveClasses(
+    {...rest}
+    class="flex {title ? 'items-start' : 'items-center'} [border-radius:var(--ui-border-radius)] border {responsiveClasses(
       size,
       sizeClass,
     )} {cls}"
@@ -104,9 +110,12 @@
         >{@render icon()}</span
       >
     {/if}
-    <span class="min-w-0"
-      >{#if children}{@render children()}{:else}{text}{/if}</span
-    >
+    <div class="flex min-w-0 flex-col">
+      {#if title}<span class="font-semibold">{title}</span>{/if}
+      <span class="min-w-0"
+        >{#if children}{@render children()}{:else}{text}{/if}</span
+      >
+    </div>
     {#if icon && iconPosition === "right"}
       <span
         class="ml-auto inline-flex shrink-0 [&_svg]:fill-current {responsiveClasses(

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
 /**
@@ -7,10 +8,12 @@ import { type Responsive } from "../types/responsive.js";
  * hand-rolled `[color:var(--ui-color-error)]` divs. Renders nothing when empty (drop-in for `{#if err}`).
  */
 type AlertVariant = "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> {
     variant?: AlertVariant;
     size?: Responsive<Size>;
     text?: string;
+    /** Optional bold heading rendered above the body (`text`/`children`). Icon top-aligns when set. */
+    title?: string;
     /** Faint tinted background in addition to the bordered + coloured text. */
     filled?: boolean;
     /** Drop the visible frame while keeping the 1px box: border colour = the alert's own background

package/dist/components/Avatar/Avatar.svelte

@@ -12,6 +12,7 @@
 
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Variant } from "../../types/variants.js";
   import { variantToken } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
@@ -28,6 +29,7 @@
     shape = "circle",
     status,
     class: cls = "",
+    ...rest
   }: {
     src?: string;
     name?: string;
@@ -38,7 +40,7 @@
     shape?: AvatarShape;
     status?: AvatarStatus;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLSpanElement>, "class"> = $props();
 
   let imgFailed = $state(false);
   // Reset the failed flag whenever the source changes.
@@ -80,7 +82,7 @@
   const shapeClass = $derived(shape === "circle" ? "rounded-full" : "rounded-[var(--ui-border-radius)]");
 </script>
 
-<span class="relative inline-flex shrink-0 {cls}">
+<span class="relative inline-flex shrink-0 {cls}" {...rest}>
   <span
     class="ui-avatar inline-flex items-center justify-center overflow-hidden font-medium select-none {shapeClass} {responsiveClasses(
       size,

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -1,6 +1,7 @@
 export type AvatarShape = "circle" | "square";
 export type AvatarStatus = "online" | "offline" | "busy" | "away";
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
@@ -14,7 +15,7 @@ type $$ComponentProps = {
     shape?: AvatarShape;
     status?: AvatarStatus;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLSpanElement>, "class">;
 declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/Avatar/AvatarGroup.svelte

@@ -21,6 +21,7 @@
 
 <script lang="ts">
   import Avatar from "./Avatar.svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import { variantToken } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
@@ -33,6 +34,7 @@
     variant = "neutral",
     class: cls = "",
     children,
+    ...rest
   }: {
     items?: AvatarItem[];
     max?: number;
@@ -41,7 +43,7 @@
     variant?: Variant;
     class?: string;
     children?: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const shown = $derived(
     items ? (max != null && items.length > max ? items.slice(0, max) : items) : [],
@@ -61,6 +63,7 @@
      avatars stay visually separated. -->
 <div
   class="flex items-center [&_.ui-avatar]:border-2 [&_.ui-avatar]:[border-color:var(--ui-color-background)] [&>*:not(:first-child)]:-ml-2 {cls}"
+  {...rest}
 >
   {#if items}
     {#each shown as it, i (i)}

package/dist/components/Avatar/AvatarGroup.svelte.d.ts

@@ -8,6 +8,7 @@ export type AvatarItem = {
     variant?: Variant;
     icon?: Snippet;
 };
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
@@ -18,7 +19,7 @@ type $$ComponentProps = {
     variant?: Variant;
     class?: string;
     children?: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const AvatarGroup: import("svelte").Component<$$ComponentProps, {}, "">;
 type AvatarGroup = ReturnType<typeof AvatarGroup>;
 export default AvatarGroup;

package/dist/components/Badge/Badge.svelte

@@ -2,6 +2,7 @@
   import { uiI18n } from "../../i18n.js";
   const i18n = uiI18n();
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import Close from "~icons/mdi/close";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
@@ -27,10 +28,21 @@
     | "danger"
     | "ghost";
 
-  interface Props {
+  // Spreads leftover HTML attributes (`class`, `data-*`, `aria-*`, `title`, `id`, event handlers, …)
+  // onto the chip's root element. `style` is OMITTED — the chip computes its own themed `style`
+  // (fill/border/text `color-mix`); a passthrough would clobber it. Use `class` for overrides.
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "style"> {
     text?: string;
     variant?: BadgeVariant;
     size?: Responsive<Size>;
+    /** Arbitrary fill colour — any CSS colour (e.g. a DB-stored `#rrggbb` for data-driven statuses).
+     *  Overrides `variant` for colour: when set, `variant` is ignored for the fill/border/text
+     *  (size/radius/`borderless` still apply). Pair with `textColor` for contrast. This is the
+     *  supported alternative to a `style` override (which the chip owns). */
+    color?: string;
+    /** Text (and icon) colour paired with `color`. Only used when `color` is set; default
+     *  `var(--ui-color-text)`. */
+    textColor?: string;
     dismissible?: boolean;
     rounded?: boolean;
     /** Hide the border WITHOUT changing the box: the border stays 1px (so height/width are
@@ -49,12 +61,16 @@
     text = "",
     variant = "default",
     size = "md",
+    color,
+    textColor,
     dismissible = false,
     rounded = true,
     borderless = true,
     href,
     ondismiss,
     children,
+    class: cls = "",
+    ...rest
   }: Props = $props();
 
   // Every variant maps to a library-wide colour token — no Tailwind
@@ -101,16 +117,26 @@
       ? "color-mix(in srgb, var(--ui-color-text) 20%, transparent)"
       : `color-mix(in srgb, var(${token}) var(--ui-tint-border), transparent)`,
   );
-  const textColor = $derived(
+  const variantText = $derived(
     variant === "ghost"
       ? "color-mix(in srgb, var(--ui-color-text) 65%, transparent)"
       : `color-mix(in srgb, var(${token}) var(--ui-tint-strong), var(--ui-color-text))`,
   );
-  const style = $derived(
-    `background-color: ${bgColor};` +
-      ` border-color: ${borderless ? bgColor : standardBorder};` +
-      ` color: ${textColor};`,
+  // An explicit `color` overrides the variant entirely: fill = color; ring = color (borderless) or
+  // color mixed toward the text at the shared hover-border strength (keeps the ring on the tint
+  // scale); text = `textColor` or the theme text colour. Otherwise the variant tokens drive it.
+  const fill = $derived(color ?? bgColor);
+  const ring = $derived(
+    color
+      ? borderless
+        ? color
+        : `color-mix(in srgb, ${color} var(--ui-tint-border-hover), var(--ui-color-text))`
+      : borderless
+        ? bgColor
+        : standardBorder,
   );
+  const fg = $derived(color ? (textColor ?? "var(--ui-color-text)") : variantText);
+  const style = $derived(`background-color: ${fill}; border-color: ${ring}; color: ${fg};`);
 
   function handleDismiss() {
     ondismiss?.();
@@ -128,12 +154,13 @@
 {#if hasContent}
   <svelte:element
     this={href ? "a" : "span"}
+    {...rest}
     {href}
     class="inline-flex items-center gap-1 border no-underline select-none {href
       ? 'cursor-pointer hover:brightness-95'
       : 'cursor-default'} {responsiveClasses(size, sizeClass)} {rounded
       ? 'rounded-full'
-      : 'rounded'} transition-[filter,background-color,border-color] duration-150"
+      : 'rounded'} transition-[filter,background-color,border-color] duration-150 {cls}"
     {style}
   >
     <span class="truncate">

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
 /**
@@ -12,10 +13,18 @@ import { type Responsive } from "../../types/responsive.js";
  * text stays high-contrast against the background.
  */
 type BadgeVariant = "neutral" | "default" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLElement>, "style"> {
     text?: string;
     variant?: BadgeVariant;
     size?: Responsive<Size>;
+    /** Arbitrary fill colour — any CSS colour (e.g. a DB-stored `#rrggbb` for data-driven statuses).
+     *  Overrides `variant` for colour: when set, `variant` is ignored for the fill/border/text
+     *  (size/radius/`borderless` still apply). Pair with `textColor` for contrast. This is the
+     *  supported alternative to a `style` override (which the chip owns). */
+    color?: string;
+    /** Text (and icon) colour paired with `color`. Only used when `color` is set; default
+     *  `var(--ui-color-text)`. */
+    textColor?: string;
     dismissible?: boolean;
     rounded?: boolean;
     /** Hide the border WITHOUT changing the box: the border stays 1px (so height/width are

package/dist/components/Banner.svelte

@@ -2,6 +2,7 @@
   import { uiI18n } from "../i18n.js";
   const i18n = uiI18n();
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import IconClose from "~icons/mdi/close";
@@ -14,7 +15,7 @@
    */
   type BannerVariant =
     "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
-  interface Props {
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> {
     variant?: BannerVariant;
     size?: Responsive<Size>;
     text?: string;
@@ -43,6 +44,7 @@
     onClose,
     class: cls = "",
     children,
+    ...rest
   }: Props = $props();
 
   // Variant → semantic token (danger maps to --ui-color-error).
@@ -104,6 +106,7 @@
 {#if open}
   <div
     role="status"
+    {...rest}
     class="flex w-full items-center border [border-radius:var(--ui-border-radius)] [&_svg]:fill-current {responsiveClasses(
       size,
       sizeClass,

package/dist/components/Banner.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
 /**
@@ -8,7 +9,7 @@ import { type Responsive } from "../types/responsive.js";
  * inline field/form status, use <Alert> instead. Honours the shared Size axis (scalar OR responsive).
  */
 type BannerVariant = "neutral" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> {
     variant?: BannerVariant;
     size?: Responsive<Size>;
     text?: string;

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -19,6 +19,7 @@
 <script lang="ts">
   import { uiI18n } from "../../i18n.js";
   const i18n = uiI18n();
+  import type { HTMLAttributes } from "svelte/elements";
   import Button from "../Button.svelte";
   import Menu from "../Menu.svelte";
   import type { MenuItem } from "../../data/table/types.js";
@@ -33,13 +34,14 @@
     maxItems,
     size = "md",
     class: cls = "",
+    ...rest
   }: {
     items: BreadcrumbItem[];
     separator?: Snippet | string;
     maxItems?: number;
     size?: Responsive<Size>;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class"> = $props();
 
   type Node =
     | { kind: "crumb"; item: BreadcrumbItem; last: boolean }
@@ -73,7 +75,7 @@
   }
 </script>
 
-<nav aria-label={i18n.messages.breadcrumb} class={cls}>
+<nav aria-label={i18n.messages.breadcrumb} class={cls} {...rest}>
   <ol
     class="flex flex-wrap items-center gap-1 [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]"
   >

package/dist/components/Breadcrumbs/Breadcrumbs.svelte.d.ts

@@ -5,6 +5,7 @@ export type BreadcrumbItem = {
     onclick?: () => void;
     icon?: Snippet;
 };
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
@@ -13,7 +14,7 @@ type $$ComponentProps = {
     maxItems?: number;
     size?: Responsive<Size>;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class">;
 declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
 export default Breadcrumbs;

package/dist/components/CardFooter.svelte

@@ -17,6 +17,7 @@
     variant = "neutral",
     size = "md",
     separator = true,
+    align = "right",
     class: cls = "",
     children,
     ...rest
@@ -25,10 +26,20 @@
     size?: Responsive<Size>;
     /** Show the top separator (default true). */
     separator?: boolean;
+    /** Horizontal placement of the footer content (action buttons). Default `"right"` — footers
+     *  right-align actions. Convenience over `class`; a `class` justify-* still overrides (applied last). */
+    align?: "left" | "center" | "right" | "between";
     class?: string;
     children?: Snippet;
   } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
+  const justifyClass: Record<NonNullable<typeof align>, string> = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+    between: "justify-between",
+  };
+
   // The body→footer gap (`pad`) is ALWAYS applied, so `separator={false}` still leaves breathing room
   // above the footer (just no line). `separator={true}` adds the line + a matching margin above it
   // (`sepGap`), giving the margin → line → pad rhythm.
@@ -44,7 +55,7 @@
 </script>
 
 <div
-  class="flex items-center justify-end gap-3 {responsiveClasses(size, pad)} {separator
+  class="flex items-center {justifyClass[align]} gap-3 {responsiveClasses(size, pad)} {separator
     ? 'border-t ' + responsiveClasses(size, sepGap)
     : ''} {cls}"
   style={separator ? `border-color: ${sepColor}` : ""}

package/dist/components/CardFooter.svelte.d.ts

@@ -8,6 +8,9 @@ type $$ComponentProps = {
     size?: Responsive<Size>;
     /** Show the top separator (default true). */
     separator?: boolean;
+    /** Horizontal placement of the footer content (action buttons). Default `"right"` — footers
+     *  right-align actions. Convenience over `class`; a `class` justify-* still overrides (applied last). */
+    align?: "left" | "center" | "right" | "between";
     class?: string;
     children?: Snippet;
 } & Omit<HTMLAttributes<HTMLDivElement>, "class">;

package/dist/components/Carousel/Carousel.svelte

@@ -17,6 +17,7 @@
   import IconNext from "~icons/mdi/chevron-right";
   import type { Variant } from "../../types/variants.js";
   import { variantToken } from "../../types/variants.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
   let {
     items,
@@ -29,6 +30,7 @@
     variant = "primary",
     ariaLabel = "Carousel",
     class: cls = "",
+    ...rest
   }: {
     items: T[];
     slide: Snippet<[T, number]>;
@@ -41,7 +43,7 @@
     variant?: Variant;
     ariaLabel?: string;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const n = $derived(items.length);
   const token = $derived(variantToken[variant]);
@@ -77,6 +79,7 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex (focusable carousel region for keyboard nav) -->
 <div
+  {...rest}
   role="region"
   aria-roledescription="carousel"
   aria-label={ariaLabel}

package/dist/components/Carousel/Carousel.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { Variant } from "../../types/variants.js";
+import type { HTMLAttributes } from "svelte/elements";
 declare function $$render<T>(): {
     props: {
         items: T[];
@@ -13,7 +14,7 @@ declare function $$render<T>(): {
         variant?: Variant;
         ariaLabel?: string;
         class?: string;
-    };
+    } & Omit<HTMLAttributes<HTMLDivElement>, "class">;
     exports: {};
     bindings: "index";
     slots: {};

package/dist/components/Chip/Chip.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import IconClose from "~icons/mdi/close";
   import type { Variant } from "../../types/variants.js";
   import { variantToken } from "../../types/variants.js";
@@ -30,6 +31,7 @@
     rounded = true,
     class: cls = "",
     children,
+    ...rest
   }: {
     text?: string;
     icon?: Snippet;
@@ -44,7 +46,7 @@
     rounded?: boolean;
     class?: string;
     children?: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class" | "style"> = $props();
 
   const interactive = $derived(!!onclick || !!href);
   const isButton = $derived(!!onclick && !href); // role=button (href navigates instead)
@@ -107,6 +109,7 @@
 
 <svelte:element
   this={href ? "a" : "span"}
+  {...rest}
   {href}
   role={isButton ? "button" : undefined}
   tabindex={isButton ? (disabled ? -1 : 0) : undefined}

package/dist/components/Chip/Chip.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
@@ -16,7 +17,7 @@ type $$ComponentProps = {
     rounded?: boolean;
     class?: string;
     children?: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class" | "style">;
 declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/dist/components/Combobox/Combobox.svelte

@@ -7,6 +7,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import Input from "../Input.svelte";
   import Popup from "../Popup.svelte";
   import IconChevronDown from "~icons/mdi/chevron-down";
@@ -35,6 +36,7 @@
     id,
     required = false,
     class: cls = "",
+    ...rest
   }: {
     value?: string;
     options?: string[];
@@ -55,7 +57,7 @@
     id?: string;
     required?: boolean;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLInputElement>, "class"> = $props();
 
   const baseId = $props.id();
   const listId = `${baseId}-listbox`;
@@ -155,6 +157,7 @@
 </script>
 
 <Input
+  {...rest}
   bind:value
   bind:element={inputEl}
   bind:fieldElement={fieldEl}

package/dist/components/Combobox/Combobox.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
@@ -22,7 +23,7 @@ type $$ComponentProps = {
     id?: string;
     required?: boolean;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLInputElement>, "class">;
 declare const Combobox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/components/CommandPalette/CommandPalette.svelte

@@ -22,6 +22,7 @@
 <script lang="ts">
   import { uiI18n } from "../../i18n.js";
   const i18n = uiI18n();
+  import type { HTMLAttributes } from "svelte/elements";
   import Input from "../Input.svelte";
   import Kbd from "../Kbd/Kbd.svelte";
   import IconSearch from "~icons/mdi/magnify";
@@ -33,6 +34,7 @@
     placeholder = "Type a command or search…",
     empty = "No matching commands",
     onopen,
+    ...rest
   }: {
     open?: boolean;
     commands: Command[];
@@ -41,7 +43,7 @@
     placeholder?: string;
     empty?: string;
     onopen?: () => void;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   let query = $state("");
   let highlight = $state(0);
@@ -139,7 +141,7 @@
 
 {#if open}
   <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-  <div use:portal class="fixed inset-0 z-[9999] flex justify-center bg-black/40 p-4 pt-[12vh]" role="presentation"
+  <div use:portal {...rest} class="fixed inset-0 z-[9999] flex justify-center bg-black/40 p-4 pt-[12vh]" role="presentation"
     onclick={(e) => { if (e.target === e.currentTarget) open = false; }}>
     <div
       class="h-max w-full max-w-xl overflow-hidden rounded-[var(--ui-border-radius)] border shadow-2xl [background-color:var(--ui-color-background)] [border-color:var(--ui-border-color)]"

package/dist/components/CommandPalette/CommandPalette.svelte.d.ts

@@ -9,6 +9,7 @@ export type Command = {
     disabled?: boolean;
     onrun: () => void;
 };
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     open?: boolean;
     commands: Command[];
@@ -17,7 +18,7 @@ type $$ComponentProps = {
     placeholder?: string;
     empty?: string;
     onopen?: () => void;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "open">;
 type CommandPalette = ReturnType<typeof CommandPalette>;
 export default CommandPalette;