@ims360/svelte-ivory 0.4.21 → 0.5.0

package/src/lib/components/layout/modal/Modal.svelte

@@ -1,30 +1,17 @@
 <script lang="ts" module>
-    import type { Variant } from '$lib';
-    import { theme } from '$lib/theme.svelte';
+    import type { IvoryComponent } from '$lib/types';
     import { merge } from '$lib/utils/functions';
-    import { X } from '@lucide/svelte';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { Heading } from '..';
-    import { Dialog } from '../dialog';
+    import { Dialog, type DialogProps } from '../dialog';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export type ModalProps = {
+    export type ModalProps = IvoryComponent<HTMLDivElement> & {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
-        /** Class of the div wrapping the children */
-        innerClass?: ClassValue;
+        dialog?: DialogProps;
         /** Content of the modal */
         children?: Snippet;
-        /**
-         * If `true` the modal will not close when clicking outside of it
-         *
-         * Defaults to `true`
-         * */
-        closeOnOutsideClick?: boolean;
-        /** Variant of the modal, applies styling to the header */
-        variant?: Variant;
-        title?: string | Snippet;
         onclick?: MouseEventHandler<HTMLDivElement>;
     };
 </script>
@@ -35,16 +22,7 @@
         inner?: Snippet;
     }
 
-    let {
-        class: clazz = 'flex flex-col',
-        title,
-        children,
-        inner,
-        closeOnOutsideClick = true,
-        variant,
-        innerClass,
-        ...rest
-    }: Props = $props();
+    let { children, dialog: dialogProps = {}, ...props }: Props = $props();
 
     let dialog = $state<Dialog>();
 
@@ -59,72 +37,29 @@
 
     const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
         e.stopPropagation();
-        rest.onclick?.(e);
+        props.onclick?.(e);
     };
 </script>
 
 <!-- 
 	@component
-	A modal, comes with a title, close button and different variants per default.
+	A modal inside a dialog element
 -->
 <Dialog
     bind:this={dialog}
-    onclose={() => {
-        if (closeOnOutsideClick) close();
-    }}
-    class="flex h-full w-full flex-col items-center justify-center p-2 sm:p-4 md:p-8 lg:p-12 xl:p-16"
+    {...dialogProps}
+    class={merge(
+        'flex h-full w-full flex-col items-center justify-center p-2 sm:p-4 md:p-8 lg:p-12 xl:p-16',
+        dialogProps?.class
+    )}
 >
-    {#if inner}
-        <div {...rest} {onclick} class={merge('modal-content transition-all ease-in-out', clazz)}>
-            {@render inner()}
-        </div>
-    {:else}
-        <div
-            class={merge(
-                'modal-content bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded transition-all ease-in-out',
-                theme.current.modal?.class,
-                clazz
-            )}
-            {...rest}
-            {onclick}
-        >
-            <div
-                class={[
-                    'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                    !variant && 'pb-0',
-                    variant === 'primary' && 'preset-tonal-primary',
-                    variant === 'secondary' && 'preset-tonal-secondary',
-                    variant === 'tertiary' && 'preset-tonal-tertiary',
-                    variant === 'success' && 'preset-tonal-success',
-                    variant === 'warning' && 'preset-tonal-warning',
-                    variant === 'error' && 'preset-tonal-error',
-                    variant === 'surface' && 'preset-tonal-surface'
-                ]}
-            >
-                {#if title}
-                    <Heading class="flex grow flex-row items-center gap-4">
-                        {#if typeof title === 'function'}
-                            {@render title()}
-                        {:else}
-                            {title}
-                        {/if}
-                    </Heading>
-                {/if}
-                <button class="group ml-auto flex justify-end" type="button" onclick={close}>
-                    <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
-                </button>
-            </div>
-            <div
-                class={merge(
-                    'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
-                    theme.current.modal?.innerClass,
-                    innerClass
-                )}
-            >
-                {@render children?.()}
-            </div>
-        </div>
-    {/if}
+    <div
+        {...props}
+        {onclick}
+        class={merge('modal-content transition-all ease-in-out', props.class)}
+    >
+        {@render children?.()}
+    </div>
 </Dialog>
 
 <style>

package/src/lib/components/layout/popover/Popover.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { merge, pseudoRandomId } from '$lib/utils/functions';
 
@@ -173,7 +172,7 @@
     bind:this={popoverEl}
     style="{style} {externalStyle}"
     {popover}
-    class={merge('bg-transparent not-open:hidden!', theme.current.popover?.class, clazz)}
+    class={merge('bg-transparent not-open:hidden!', clazz)}
     {...rest}
 >
     {@render children?.()}

package/src/lib/components/layout/tabs/Tab.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
     import { page } from '$app/state';
-    import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { merge, pseudoRandomId } from '$lib/utils/functions';
     import { onMount, type Snippet } from 'svelte';
@@ -52,7 +51,6 @@
     this={href ? 'a' : 'button'}
     class={merge(
         'btn flex h-fit w-fit shrink-0 items-center justify-center px-0 text-xl font-bold select-none',
-        theme.current.tabs?.tab?.class?.(selected),
         typeof clazz === 'function' ? clazz(selected) : clazz
     )}
     onclick={href

package/src/lib/components/table/Column.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { theme } from '$lib/theme.svelte';
     import { merge } from '$lib/utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
@@ -76,7 +75,6 @@
     class={merge(
         'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
         column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
-        theme.current.table?.column?.class,
         clazz
     )}
 />

package/src/lib/components/table/ColumnHead.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { theme } from '$lib/theme.svelte';
     import { merge } from '$lib/utils/functions';
     import { getContext, setContext, type Snippet } from 'svelte';
     import { resize } from '../../utils/attachments';
@@ -48,7 +47,7 @@
 </script>
 
 <div
-    class={merge('group flex shrink-0 flex-row justify-start', theme.current.table?.head?.class)}
+    class={merge('group flex shrink-0 flex-row justify-start')}
     bind:this={target}
     style="width: {column?.width ?? 0}px;"
 >

package/src/lib/components/table/Table.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-    import { theme } from '$lib/theme.svelte';
     import { merge } from '$lib/utils/functions';
     import { ChevronRight } from '@lucide/svelte';
     import { getContext, setContext, untrack, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { ClassValue, HTMLAttributes } from 'svelte/elements';
     import { SvelteSet } from 'svelte/reactivity';
     import ColumnComponent from './Column.svelte';
     import { ColumnController, type ColumnConfig } from './columnController.svelte';
@@ -22,8 +21,8 @@
         virtualized?: boolean;
         /** Renders the rows */
         children?: Snippet<[{ row: T; nestingLevel?: number; index: number }]>;
-        rowClass?: ClassValue;
-        headerClass?: ClassValue;
+        row?: HTMLAttributes<HTMLDivElement>;
+        header?: HTMLAttributes<HTMLDivElement>;
         search?: {
             term: string;
             matches: (row: T) => boolean;
@@ -67,8 +66,8 @@
         class: clazz,
         data,
         children: passedChildren,
-        rowClass = 'hover:bg-surface-950-50/10 transition-colors',
-        headerClass,
+        row,
+        header: headerProps,
         rowHeight = 64,
         onclick,
         href,
@@ -202,20 +201,17 @@
     bind:this={list}
     bind:b_scrollTop
     data={results.entries}
-    class={merge(
-        'flex flex-col overflow-hidden border-transparent',
-        theme.current.table?.class,
-        clazz
-    )}
-    rowClass={merge('pl-2 pr-4', theme.current.table?.row?.class, rowClass)}
+    class={merge('flex flex-col overflow-hidden border-transparent', clazz)}
+    {row}
     {rowHeight}
     {virtualized}
 >
     {#snippet header()}
         <div
+            {...headerProps}
             class={merge(
                 'flex w-fit min-w-full flex-row border-b border-inherit pr-4 pl-2',
-                headerClass
+                headerProps?.class
             )}
         >
             {#if results.someHaveChildren}

package/src/lib/components/table/VirtualList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends { id: string }">
     import { merge } from '$lib/utils/functions';
     import { onMount, tick, untrack, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 
     type Props<T> = {
         class?: ClassValue;
@@ -11,7 +11,7 @@
         b_scrollTop?: number;
         rowHeight: number;
         overscan?: number;
-        rowClass?: ClassValue;
+        row?: HTMLAttributes<HTMLDivElement>;
         virtualized?: boolean;
     };
 
@@ -23,12 +23,12 @@
         b_scrollTop = $bindable(),
         rowHeight,
         overscan = 2,
-        rowClass,
+        row: rowProps,
         virtualized = true
     }: Props<T> = $props();
 
     const finalRowClass = $derived(
-        merge('flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass)
+        merge('flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowProps?.class)
     );
 
     let viewportReactivity = $state(0);
@@ -131,7 +131,11 @@
                 style="padding-top: {top}px; padding-bottom: {bottom}px; min-width: max(100%, {header_width}px) !important;"
             >
                 {#each visible as row, i (row.data.id)}
-                    <div class={finalRowClass} style="height: {rowHeight}px !important;">
+                    <div
+                        {...rowProps}
+                        class={finalRowClass}
+                        style="height: {rowHeight}px !important; {rowProps?.style}"
+                    >
                         {@render children({
                             row: row.data,
                             domIndex: i,

package/src/lib/index.ts

@@ -1,6 +1,7 @@
 // Reexport your entry components here
 export { ColorTheme, type ColorThemePreference } from './colorTheme.svelte';
 export { theme, type Theme } from './theme.svelte';
+export { Toasts, type ToastSettings } from './toasts.svelte';
 export { type IvoryComponent } from './types';
 
 export type Variant =

package/src/lib/theme.svelte.ts

@@ -2,45 +2,9 @@ import type { RemoteFormIssue } from '@sveltejs/kit';
 import type { ClassValue } from 'svelte/elements';
 
 export interface Theme {
-    checkbox?: {
-        class?: (checked: boolean, partial: boolean) => ClassValue;
-    };
-    heading?: {
-        class?: ClassValue;
-    };
     dialog?: {
         class?: ClassValue;
     };
-    tabs?: {
-        tab?: {
-            class?: (active: boolean) => ClassValue;
-        };
-    };
-    table?: {
-        class?: ClassValue;
-        column?: {
-            class?: ClassValue;
-        };
-        head?: {
-            class?: ClassValue;
-        };
-        row?: {
-            class?: ClassValue;
-        };
-    };
-    modal?: {
-        class?: ClassValue;
-        innerClass?: ClassValue;
-        dialog?: {
-            class?: ClassValue;
-        };
-    };
-    drawer?: {
-        class?: ClassValue;
-    };
-    popover?: {
-        class?: ClassValue;
-    };
     input?: {
         outerClass?: ClassValue;
         class?: (value: boolean, issues?: boolean) => ClassValue;

package/src/lib/{components/toast/toasts.svelte.ts → toasts.svelte.ts}

@@ -1,3 +1,4 @@
+import type { Variant } from '$lib';
 import { pseudoRandomId } from '$lib/utils/functions';
 import type { Icon } from '@lucide/svelte';
 
@@ -7,7 +8,7 @@ export interface ToastSettings {
     timeout?: number;
     hideDismiss?: boolean;
     icon?: typeof Icon;
-    variant: 'info' | 'success' | 'warning' | 'error';
+    variant: Variant;
 }
 
 interface Toast extends ToastSettings {
@@ -19,7 +20,7 @@ const TOAST_DEFAULTS: ToastSettings = {
     message: 'Missing Toast Message',
     autohide: true,
     timeout: 3000,
-    variant: 'info'
+    variant: 'primary'
 };
 
 class ToastStore {

package/dist/components/layout/Heading.svelte

@@ -1,25 +0,0 @@
-<script lang="ts" module>
-    import { theme } from '../../theme.svelte';
-    import type { IvoryComponent } from '../../types';
-    import { merge } from '../../utils/functions';
-    import type { ClassValue } from 'svelte/elements';
-
-    export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
-        class?: ClassValue;
-    }
-</script>
-
-<script lang="ts">
-    let { children, class: clazz, ...rest }: HeadingProps = $props();
-</script>
-
-<h2
-    class={merge(
-        'shrink-0 truncate text-lg font-bold select-none',
-        theme.current.heading?.class,
-        clazz
-    )}
-    {...rest}
->
-    {@render children?.()}
-</h2>

package/dist/components/layout/Heading.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { IvoryComponent } from '../../types';
-import type { ClassValue } from 'svelte/elements';
-export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
-    class?: ClassValue;
-}
-declare const Heading: import("svelte").Component<HeadingProps, {}, "">;
-type Heading = ReturnType<typeof Heading>;
-export default Heading;
-//# sourceMappingURL=Heading.svelte.d.ts.map

package/dist/components/layout/Heading.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Heading.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAkBL,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/toast/Toast.svelte

@@ -1,105 +0,0 @@
-<script lang="ts" module>
-    export interface Props {
-        class?: ClassValue;
-        children?: Snippet<[toast: ToastSettings & { close: () => void }]>;
-        duration?: number;
-    }
-</script>
-
-<!-- 
-	@component
-	Renders the toasts that have been triggered by the `Toasts` store.  
-	Make sure to include this component in your root `+layout.svelte` file.
--->
-<script lang="ts">
-    import type { Icon } from '@lucide/svelte';
-    import { Check, CircleAlert, Info, TriangleAlert, X } from '@lucide/svelte';
-    import type { Snippet } from 'svelte';
-    import { flip } from 'svelte/animate';
-    import type { ClassValue } from 'svelte/elements';
-    import { fly, scale } from 'svelte/transition';
-    import { Toasts, type ToastSettings } from './toasts.svelte';
-
-    let { class: clazz = 'px-2 pb-2', children, duration = 200 }: Props = $props();
-
-    function getIcon(
-        variant: 'info' | 'success' | 'warning' | 'error',
-        icon?: typeof Icon
-    ): typeof Icon {
-        if (icon) return icon;
-        switch (variant) {
-            case 'info':
-                return Info;
-            case 'success':
-                return Check;
-            case 'warning':
-                return CircleAlert;
-            case 'error':
-                return TriangleAlert;
-        }
-    }
-</script>
-
-<div
-    class="pointer-events-none absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-start"
->
-    <div
-        class={[
-            'flex h-full max-h-full flex-col-reverse items-center justify-end gap-2 overflow-hidden',
-            clazz
-        ]}
-    >
-        {#each Toasts.toasts as toast (toast.id)}
-            {@const VariantIcon = getIcon(toast.variant, toast.icon)}
-            <div
-                in:fly={{ y: '-100%', duration }}
-                out:scale={{ duration }}
-                animate:flip={{ duration }}
-                onpointerenter={() => {
-                    Toasts.freeze(toast.id);
-                }}
-                onpointerleave={() => {
-                    Toasts.unfreeze(toast.id);
-                }}
-                class="group pointer-events-auto flex h-fit w-fit flex-row items-center"
-            >
-                {#if children}
-                    {@render children({
-                        ...toast,
-                        close: () => Toasts.close(toast.id)
-                    })}
-                {:else}
-                    <div
-                        class={[
-                            'bg-opacity-85 flex flex-row items-center gap-4 rounded px-4 py-2 shadow-lg group-last:rounded-t-none',
-                            toast.variant === 'info' &&
-                                'bg-primary-200-800 text-primary-contrast-50-950',
-                            toast.variant === 'success' &&
-                                'bg-success-200-800 text-success-contrast-50-950',
-                            toast.variant === 'warning' &&
-                                'bg-warning-200-800 text-warning-contrast-50-950',
-                            toast.variant === 'error' &&
-                                'bg-error-200-800 text-error-contrast-50-950'
-                        ]}
-                    >
-                        <VariantIcon />
-                        <p class="font-bold">
-                            {toast.message}
-                        </p>
-                        {#if !toast.hideDismiss}
-                            <button
-                                type="button"
-                                onclick={() => {
-                                    Toasts.close(toast.id);
-                                }}
-                                class="group"
-                            >
-                                <X size={20} class="stroke-1 transition-all group-hover:stroke-2" />
-                            </button>
-                        {/if}
-                    </div>
-                {/if}
-            </div>
-        {/each}
-    </div>
-</div>

package/dist/components/toast/Toast.svelte.d.ts

@@ -1,18 +0,0 @@
-export interface Props {
-    class?: ClassValue;
-    children?: Snippet<[toast: ToastSettings & {
-        close: () => void;
-    }]>;
-    duration?: number;
-}
-import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
-import { type ToastSettings } from './toasts.svelte';
-/**
- * Renders the toasts that have been triggered by the `Toasts` store.
- * Make sure to include this component in your root `+layout.svelte` file.
- */
-declare const Toast: import("svelte").Component<Props, {}, "">;
-type Toast = ReturnType<typeof Toast>;
-export default Toast;
-//# sourceMappingURL=Toast.svelte.d.ts.map

package/dist/components/toast/Toast.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGI,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAKL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAmF7D;;;GAGG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/toast/index.d.ts

@@ -1,3 +0,0 @@
-export { default as ToastUI, type Props as ToastUIProps } from './Toast.svelte';
-export { Toasts, type ToastSettings } from './toasts.svelte';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/toast/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,KAAK,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/toast/index.js

@@ -1,2 +0,0 @@
-export { default as ToastUI } from './Toast.svelte';
-export { Toasts } from './toasts.svelte';

package/dist/components/toast/toasts.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toasts.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/toasts.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CACrD;AAED,UAAU,KAAM,SAAQ,aAAa;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;CAC7C;AASD,cAAM,UAAU;IACZ,MAAM,UAAuB;IAE7B,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,SAA0B;IAW1D,KAAK,CAAC,EAAE,EAAE,MAAM;IAOhB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa;IAiBvC,MAAM,CAAC,EAAE,EAAE,MAAM;IAMjB,QAAQ,CAAC,EAAE,EAAE,MAAM;IAMnB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;CAKvB;AAED,2EAA2E;AAC3E,eAAO,MAAM,MAAM,YAAmB,CAAC"}

package/src/lib/components/layout/Heading.svelte

@@ -1,25 +0,0 @@
-<script lang="ts" module>
-    import { theme } from '$lib/theme.svelte';
-    import type { IvoryComponent } from '$lib/types';
-    import { merge } from '$lib/utils/functions';
-    import type { ClassValue } from 'svelte/elements';
-
-    export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
-        class?: ClassValue;
-    }
-</script>
-
-<script lang="ts">
-    let { children, class: clazz, ...rest }: HeadingProps = $props();
-</script>
-
-<h2
-    class={merge(
-        'shrink-0 truncate text-lg font-bold select-none',
-        theme.current.heading?.class,
-        clazz
-    )}
-    {...rest}
->
-    {@render children?.()}
-</h2>