@spaethtech/svelte-ui 0.20.1-dev.102.3c5719c → 0.20.1-dev.105.894ecae

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,7 +11,7 @@
    */
   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;
@@ -40,6 +41,7 @@
     iconPosition = "left",
     class: cls = "",
     children,
+    ...rest
   }: Props = $props();
 
   // Variant → semantic token (danger maps to the renamed --ui-color-error).
@@ -95,6 +97,7 @@
 {#if has}
   <div
     role="alert"
+    {...rest}
     class="flex {title ? 'items-start' : 'items-center'} [border-radius:var(--ui-border-radius)] border {responsiveClasses(
       size,
       sizeClass,

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,7 +8,7 @@ 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;

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/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;

package/dist/components/ConfirmDialog.svelte

@@ -5,6 +5,7 @@
   import CardFooter from "./CardFooter.svelte";
   import Button from "./Button.svelte";
   import type { ComponentProps, Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import type { Responsive } from "../types/responsive.js";
 
@@ -14,7 +15,7 @@
    * consistent with every other surface. Pass `children` to replace the message body with custom
    * content (the header + footer stay). For a fully custom modal, use `Dialog` directly.
    */
-  interface Props {
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
     isOpen: boolean;
     title?: string;
     message?: string;
@@ -57,6 +58,7 @@
     onShow,
     onHide,
     children,
+    ...rest
   }: Props = $props();
 
   function handleConfirm() {
@@ -70,6 +72,7 @@
 </script>
 
 <Dialog
+  {...rest}
   bind:isOpen
   {dismissible}
   {width}

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

@@ -1,5 +1,6 @@
 import Dialog from "./Dialog.svelte";
 import type { ComponentProps, 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";
  * consistent with every other surface. Pass `children` to replace the message body with custom
  * content (the header + footer stay). For a fully custom modal, use `Dialog` directly.
  */
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
     isOpen: boolean;
     title?: string;
     message?: string;

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -7,6 +7,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import Menu from "../Menu.svelte";
   import type { MenuItem } from "../../data/table/types.js";
   import type { Variant } from "../../types/variants.js";
@@ -20,6 +21,7 @@
     disabled = false,
     class: cls = "",
     children,
+    ...rest
   }: {
     items: MenuItem[];
     size?: Responsive<Size>;
@@ -27,7 +29,7 @@
     disabled?: boolean;
     class?: string;
     children: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   let open = $state(false);
   let anchorEl = $state<HTMLElement>();
@@ -44,7 +46,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="contents {cls}" oncontextmenu={onContextMenu}>
+<div {...rest} class="contents {cls}" oncontextmenu={onContextMenu}>
   {@render children()}
 </div>
 

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { MenuItem } from "../../data/table/types.js";
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
@@ -10,7 +11,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     class?: string;
     children: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const ContextMenu: import("svelte").Component<$$ComponentProps, {}, "">;
 type ContextMenu = ReturnType<typeof ContextMenu>;
 export default ContextMenu;

package/dist/components/DataTable.svelte

@@ -13,6 +13,7 @@
   import { uiI18n } from "../i18n.js";
   const i18n = uiI18n();
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import IconDots from "~icons/mdi/dots-vertical";
   import IconBulk from "~icons/mdi/format-list-checks";
   import IconSortAsc from "~icons/mdi/sort-ascending";
@@ -50,6 +51,7 @@
     truncate = true,
     borderless = false,
     variant,
+    ...rest
   }: {
     grid: DataGrid<T>;
     selectable?: boolean;
@@ -97,7 +99,7 @@
      *  `ghost` additionally drops ALL section fills (bands + body) for a bare,
      *  see-through table. Omit for the default grey tint. */
     variant?: Variant;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> = $props();
 
   /** When a variant is set, override --ui-accent so the shared interactive
    *  tints re-mix from that colour (the `.ui-accent` class on the root does
@@ -228,6 +230,7 @@
 </script>
 
 <div
+  {...rest}
   role="table"
   class="ui-accent relative [color:var(--ui-color-text)]"
   style="font-size: {textVar}; {accentVar}"

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { MenuItem, DataGrid } from "../data/table/index.js";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
@@ -51,7 +52,7 @@ declare function $$render<T>(): {
          *  `ghost` additionally drops ALL section fills (bands + body) for a bare,
          *  see-through table. Omit for the default grey tint. */
         variant?: Variant;
-    };
+    } & Omit<HTMLAttributes<HTMLDivElement>, "class" | "style">;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/DatePicker.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
   import { uiI18n } from "../i18n.js";
   const i18n = uiI18n();
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import { variantToken, type Variant } from "../types/variants.js";
@@ -27,7 +28,7 @@
   import IconClose from "~icons/mdi/close";
 
   type RangeValue = { start: string | null; end: string | null };
-  interface Props {
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
     value?: string | RangeValue | null;
     range?: boolean;
     time?: boolean;
@@ -66,6 +67,7 @@
     variant = "primary",
     class: cls = "",
     name,
+    ...rest
   }: Props = $props();
 
   const accent = $derived(`var(${variantToken[variant]})`);
@@ -178,7 +180,7 @@
   }
 </script>
 
-<div bind:this={anchorEl} class="w-full {cls}">
+<div {...rest} bind:this={anchorEl} class="w-full {cls}">
   <Input
     value={label}
     readonly

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
 import { type Variant } from "../types/variants.js";
@@ -6,7 +7,7 @@ type RangeValue = {
     start: string | null;
     end: string | null;
 };
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
     value?: string | RangeValue | null;
     range?: boolean;
     time?: boolean;

package/dist/components/Drawer/Drawer.svelte

@@ -8,6 +8,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import { cubicOut } from "svelte/easing";
   import type { TransitionConfig } from "svelte/transition";
   import { fade } from "svelte/transition";
@@ -32,6 +33,7 @@
     ariaLabel,
     class: cls = "",
     children,
+    ...rest
   }: {
     open?: boolean;
     side?: "left" | "right" | "top" | "bottom";
@@ -44,7 +46,7 @@
     ariaLabel?: string;
     class?: string;
     children?: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> = $props();
 
   const FOCUSABLE =
     'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -169,6 +171,7 @@
       ></div>
     {/if}
     <div
+      {...rest}
       bind:this={panelEl}
       class="fixed {sideClass} overflow-auto z-[10000] shadow-xl [background-color:var(--ui-color-background)] [border-color:var(--ui-border-color)] {cls}"
       style={panelStyle}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 interface DrawerShowContext {
     panel: HTMLElement;
     autoFocus: string | HTMLElement | false;
@@ -18,7 +19,7 @@ type $$ComponentProps = {
     ariaLabel?: string;
     class?: string;
     children?: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class" | "style">;
 declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/FileUpload/FileUpload.svelte

@@ -11,6 +11,7 @@
   const i18n = uiI18n();
   import { onDestroy, untrack } from "svelte";
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import FieldChrome, { nextFieldId } from "../FieldChrome.svelte";
   import Button from "../Button.svelte";
   import Progress from "../Progress/Progress.svelte";
@@ -39,6 +40,7 @@
     id,
     required = false,
     class: cls = "",
+    ...rest
   }: {
     files?: File[];
     accept?: string;
@@ -56,7 +58,7 @@
     id?: string;
     required?: boolean;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const controlId = id ?? nextFieldId();
   let inputEl = $state<HTMLInputElement>();
@@ -118,7 +120,7 @@
 
 <FieldChrome {label} {aside} error={error ?? (reject || null)} {description} {required} {controlId} {size} class={cls}>
   {#snippet control({ describedBy })}
-    <div class="flex flex-col gap-2">
+    <div {...rest} class="flex flex-col gap-2">
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <div
         role="button"

package/dist/components/FileUpload/FileUpload.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";
@@ -19,7 +20,7 @@ type $$ComponentProps = {
     id?: string;
     required?: boolean;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const FileUpload: import("svelte").Component<$$ComponentProps, {}, "files">;
 type FileUpload = ReturnType<typeof FileUpload>;
 export default FileUpload;

package/dist/components/Menu.svelte

@@ -8,6 +8,7 @@
  */
 -->
 <script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import Popup from "./Popup.svelte";
   import type { Side, Align, Boundary } from "../positioning/anchored.js";
   import type { MenuItem, MenuAction, MenuSeparator } from "../data/table/types.js";
@@ -24,6 +25,7 @@
     boundary = "viewport",
     size = "md",
     variant,
+    ...rest
   }: {
     anchor: HTMLElement | undefined;
     open?: boolean;
@@ -35,7 +37,7 @@
     /** Tints the highlighted item with a semantic colour (via `.ui-accent` / `--ui-accent`) instead
      *  of neutral grey. Omit for the default. */
     variant?: Variant;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class" | "style"> = $props();
 
   let active = $state(-1);
   const isSeparator = (i: MenuItem): i is MenuSeparator => "divider" in i;
@@ -87,6 +89,7 @@
 <Popup {anchor} bind:open {side} {align} {boundary}>
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <ul
+    {...rest}
     role="menu"
     tabindex="0"
     {onkeydown}

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "svelte/elements";
 import type { Side, Align, Boundary } from "../positioning/anchored.js";
 import type { MenuItem } from "../data/table/types.js";
 import type { Size } from "../types/sizes.js";
@@ -14,7 +15,7 @@ type $$ComponentProps = {
     /** Tints the highlighted item with a semantic colour (via `.ui-accent` / `--ui-accent`) instead
      *  of neutral grey. Omit for the default. */
     variant?: Variant;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class" | "style">;
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/components/Pagination/Pagination.svelte

@@ -10,6 +10,7 @@
 <script lang="ts">
   import { uiI18n } from "../../i18n.js";
   const i18n = uiI18n();
+  import type { HTMLAttributes } from "svelte/elements";
   import Button from "../Button.svelte";
   import Select from "../Select.svelte";
   import NumberInput from "../NumberInput.svelte";
@@ -34,6 +35,7 @@
     borderless = false,
     disabled = false,
     class: cls = "",
+    ...rest
   }: {
     page?: number;
     total: number;
@@ -52,7 +54,7 @@
     borderless?: boolean;
     disabled?: boolean;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class" | "style"> = $props();
 
   const pageCount = $derived(Math.max(1, Math.ceil((total || 0) / (perPage || 1))));
   // Keep `page` in range as total/perPage change.
@@ -106,6 +108,7 @@
 
 <nav
   aria-label={i18n.messages.pagination}
+  {...rest}
   class="ui-accent flex flex-wrap items-center justify-between gap-3 border rounded-[var(--ui-border-radius)] {bandPad} {cls}"
   style="border-color: {bandBorder}; background-color: {bandBg}; {accentVar}"
 >