zabi-components 7.0.1 → 8.0.0

package/dist/atoms/Button.svelte

@@ -2,12 +2,16 @@
     import type { Snippet } from "svelte";
     import type { HTMLButtonAttributes } from "svelte/elements";
     import type { ButtonVariant, SizeVariant } from "../types/variants.js";
+    import { cn } from "../util/cn.js";
 
     type Props = Omit<HTMLButtonAttributes, "class"> & {
         variant?: ButtonVariant;
         size?: SizeVariant;
         loading?: boolean;
         text?: string;
+        /** Stretch to the width of the container. */
+        fullWidth?: boolean;
+        /** @deprecated use `fullWidth` — kept so 7.x call sites keep working. */
         isFullWidth?: boolean;
         class?: string;
         children?: Snippet;
@@ -20,6 +24,7 @@
         loading = false,
         type = "button",
         text = "",
+        fullWidth = false,
         isFullWidth = false,
         class: className = "",
         onclick,
@@ -29,63 +34,58 @@
 
     const isDisabled = $derived(disabled || loading);
 
+    /**
+     * One height scale, shared with Input, Select and IconButton, so controls
+     * of the same size line up in a row. Heights are fixed (h-8 / h-10 / h-12)
+     * rather than derived from padding + line-height, which is what let Button
+     * and Input drift 14px apart at `lg`.
+     *
+     * Weight and tracking do NOT change with size: a large button used to drop
+     * to font-normal, so the biggest button had the lightest label.
+     */
     const sizeClass = $derived.by(() => {
         if (size === "sm") {
-            return {
-                padding: "px-4 py-2.5",
-                text: "text-sm",
-                font: "font-medium",
-                leading: "leading-5",
-                tracking: "tracking-[0.1px]",
-                radius: "rounded-lg",
-                gap: "gap-2",
-            };
-        } else if (size === "lg") {
-            return {
-                padding: "px-8 py-4",
-                text: "text-lg",
-                font: "font-normal",
-                leading: "leading-8",
-                tracking: "tracking-normal",
-                radius: "rounded-xl",
-                gap: "gap-3",
-            };
-        } else {
-            return {
-                padding: "px-5 py-3",
-                text: "text-base",
-                font: "font-medium",
-                leading: "leading-6",
-                tracking: "tracking-[0.15px]",
-                radius: "rounded-lg",
-                gap: "gap-2",
-            };
+            return { box: "h-8 px-3", text: "text-sm", gap: "gap-2", spinner: "size-3.5" };
         }
+        if (size === "lg") {
+            return { box: "h-12 px-5", text: "text-base", gap: "gap-2", spinner: "size-4" };
+        }
+        return { box: "h-10 px-4", text: "text-sm", gap: "gap-2", spinner: "size-4" };
     });
 
+    /**
+     * Disabled is deliberately NOT `opacity-50` over the variant colour — that
+     * made a disabled primary lighter and more colourful than an enabled
+     * secondary. Every variant falls back to the same neutral disabled pair.
+     */
+    const disabledClass =
+        "disabled:bg-action-disabled disabled:text-action-disabled-text disabled:border-transparent disabled:no-underline disabled:shadow-none disabled:cursor-not-allowed disabled:active:scale-100";
+
     const variantClass = $derived.by(() => {
-        return variant === "primary"
-            ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]"
-            : variant === "secondary"
-              ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98]"
-              : variant === "danger"
-                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] focus-ring--danger"
-                : variant === "ghost"
-                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 active:scale-[0.98] focus-ring--muted disabled:text-disabled"
-                    : variant === "outline"
-                      ? "bg-transparent border border-border text-headline hover:bg-action-secondary hover:border-border-medium hover:text-action-primary active:bg-action-primary-active active:text-action-primary active:scale-[0.98] disabled:border-disabled disabled:text-disabled"
-                    : variant === "link"
-                      ? "text-brand-700 active:text-brand-700 underline-offset-4 hover:underline disabled:text-disabled disabled:no-underline"
-                      : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]";
+        switch (variant) {
+            case "secondary":
+                return "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98]";
+            case "danger":
+                return "bg-action-danger text-action-danger-text hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] focus-ring--danger";
+            case "ghost":
+                return "bg-transparent text-headline hover:bg-surface-hover active:bg-surface-active active:scale-[0.98] focus-ring--muted";
+            case "outline":
+                return "bg-transparent border border-border text-headline hover:bg-surface-hover hover:border-border-medium active:bg-surface-active active:scale-[0.98]";
+            case "link":
+                // A link variant has to look like a link at rest, not only on
+                // hover — otherwise it is indistinguishable from `ghost`.
+                return "bg-transparent text-link hover:text-link-hover underline underline-offset-4 decoration-1 hover:decoration-2 px-0 focus-ring--muted";
+            case "primary":
+            default:
+                return "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]";
+        }
     });
 
     const buttonClasses = $derived.by(() => {
-        const sizeStyles = sizeClass;
-        const flexClass = isFullWidth ? "flex" : "inline-flex";
-        const widthClass = isFullWidth ? "w-full" : "";
-        const baseClasses = `${flexClass} focus-ring items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100`;
-
-        return `${baseClasses} ${widthClass} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.font} ${sizeStyles.leading} ${sizeStyles.tracking} ${sizeStyles.radius} ${sizeStyles.gap} ${variantClass} ${className}`.trim();
+        const s = sizeClass;
+        const layout = fullWidth || isFullWidth ? "flex w-full" : "inline-flex";
+        const base = `${layout} focus-ring items-center justify-center rounded-control font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer select-none`;
+        return cn(`${base} ${s.box} ${s.text} ${s.gap} ${variantClass} ${disabledClass} ${className}`);
     });
 </script>
 
@@ -99,7 +99,7 @@
 >
     {#if loading}
         <span
-            class="inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
+            class="inline-block {sizeClass.spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
             aria-hidden="true"
         ></span>
     {/if}

package/dist/atoms/Button.svelte.d.ts

@@ -6,6 +6,9 @@ type Props = Omit<HTMLButtonAttributes, "class"> & {
     size?: SizeVariant;
     loading?: boolean;
     text?: string;
+    /** Stretch to the width of the container. */
+    fullWidth?: boolean;
+    /** @deprecated use `fullWidth` — kept so 7.x call sites keep working. */
     isFullWidth?: boolean;
     class?: string;
     children?: Snippet;

package/dist/atoms/Card.svelte

@@ -1,72 +1,75 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
     import type { CardVariant, SizeVariant } from "../types/variants.js";
 
-    interface Props {
+    import { cn } from "../util/cn.js";
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
         onclick?: (event: MouseEvent) => void | Promise<void>;
         size?: SizeVariant;
         variant?: CardVariant;
         fullWidth?: boolean;
+        class?: string;
+        /** @deprecated use `class` — kept so 7.x call sites keep working. */
         className?: string;
         /** Required when `onclick` is set (no visible label). */
         ariaLabel?: string;
         children?: Snippet;
-    }
+    };
 
     let {
         onclick,
         size = "md",
         variant = "default",
         fullWidth = true,
+        class: classProp = "",
         className = "",
         ariaLabel,
         children,
         ...restProps
     }: Props = $props();
 
+    /** Size changes the padding. It does NOT change the corner — see
+     * `--radius-container`. A large card is a bigger box, not a rounder one. */
     const sizeClass = $derived(
         size === "sm" ? "p-4" : size === "lg" ? "p-8" : "p-6",
     );
 
-    const radiusClass = $derived(
-        size === "sm"
-            ? "rounded-xl"
-            : size === "lg"
-              ? "rounded-3xl"
-              : "rounded-2xl",
-    );
-
     const variantClasses = $derived(
         variant === "elevated"
-            ? "bg-card shadow-lg"
+            ? "bg-card-elevated shadow-lg"
             : variant === "outlined"
-              ? "bg-card border-2 border-base-200 shadow-none"
+              ? "bg-card border border-border shadow-none"
               : variant === "flat"
                 ? "bg-card shadow-none border-none"
                 : "bg-card shadow-sm",
     );
 
+    const interactiveClasses = $derived.by(() => {
+        if (!onclick) return "";
+        const shared = "cursor-pointer focus-ring";
+        switch (variant) {
+            case "elevated":
+                return `${shared} hover:bg-card-hover`;
+            case "outlined":
+                return `${shared} hover:border-border-medium hover:bg-card-hover`;
+            case "flat":
+                return `${shared} hover:bg-card-hover`;
+            default:
+                return `${shared} hover:shadow-lg hover:bg-card-hover`;
+        }
+    });
+
     const cardClasses = $derived(
-        [
-            radiusClass,
-            "transition-all duration-200",
+        cn(
+            "rounded-container transition-all duration-150",
             variantClasses,
-            onclick
-                ? variant === "elevated"
-                    ? "cursor-pointer hover:shadow-xl hover:bg-card-hover"
-                    : variant === "outlined"
-                      ? "cursor-pointer hover:border-brand-500 hover:bg-card-hover"
-                      : variant === "flat"
-                        ? "cursor-pointer hover:bg-card-hover"
-                        : "cursor-pointer hover:shadow-lg hover:bg-card-hover"
-                : "",
+            interactiveClasses,
             fullWidth ? "w-full" : "",
             sizeClass,
+            classProp,
             className,
-        ]
-            .filter(Boolean)
-            .join(" ")
-            .trim(),
+        ),
     );
 
     function handleKeydown(event: KeyboardEvent) {

package/dist/atoms/Card.svelte.d.ts

@@ -1,15 +1,18 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { CardVariant, SizeVariant } from "../types/variants.js";
-interface Props {
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
     onclick?: (event: MouseEvent) => void | Promise<void>;
     size?: SizeVariant;
     variant?: CardVariant;
     fullWidth?: boolean;
+    class?: string;
+    /** @deprecated use `class` — kept so 7.x call sites keep working. */
     className?: string;
     /** Required when `onclick` is set (no visible label). */
     ariaLabel?: string;
     children?: Snippet;
-}
+};
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/atoms/CardContent.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         image?: string;
         imageAlt?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
@@ -11,10 +14,15 @@
     let {
         image = "",
         imageAlt = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 </script>
 
 <div class={className} {...restProps}>
@@ -22,7 +30,7 @@
         <img
             src={image}
             alt={imageAlt}
-            class="w-full h-48 object-cover rounded-lg mb-4"
+            class="w-full h-48 object-cover rounded-control mb-4"
         />
     {/if}
     {#if children}

package/dist/atoms/CardContent.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from "svelte";
 interface Props {
     image?: string;
     imageAlt?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/atoms/CardFooter.svelte

@@ -1,20 +1,28 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
 
     let {
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 </script>
 
 <footer
-    class="flex items-center p-6 pt-0 {className}"
+    class={cn("flex items-center p-6 pt-0", className)}
     {...restProps}
 >
     {#if children}

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

@@ -1,5 +1,7 @@
 import type { Snippet } from "svelte";
 interface Props {
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/atoms/CardHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         title?: string;
@@ -10,6 +11,8 @@
         /** `id` on the description `<p>`. */
         descriptionId?: string;
         level?: 1 | 2 | 3 | 4 | 5 | 6;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
@@ -21,18 +24,23 @@
         subtitleId,
         descriptionId,
         level = 3,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
 
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
+
     const headingTag = $derived(`h${level}`);
     const headingClasses = $derived(() => {
         return "text-2xl font-semibold leading-none tracking-tight text-headline";
     });
 </script>
 
-<header class={`flex flex-col space-y-1.5 pb-4 ${className}`.trim()} {...restProps}>
+<header class={cn(`flex flex-col space-y-2 pb-4 ${className}`)} {...restProps}>
     {#if title}
         <svelte:element this={headingTag} class={headingClasses()}>
             {title}

package/dist/atoms/CardHeader.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     /** `id` on the description `<p>`. */
     descriptionId?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/atoms/Checkbox.svelte

@@ -3,6 +3,8 @@
     import type { SelectionControlMarkProps } from "./SelectionControl.svelte";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         id?: string;
         name?: string;
         value?: string;
@@ -16,6 +18,7 @@
     }
 
     let {
+        class: className = "",
         id,
         value = "",
         name = "",
@@ -65,5 +68,6 @@
     {onChange}
     {onchange}
     {mark}
+    class={className}
     {...restProps}
 />

package/dist/atoms/Checkbox.svelte.d.ts

@@ -1,4 +1,6 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     id?: string;
     name?: string;
     value?: string;

package/dist/atoms/CodeBlock.svelte

@@ -2,11 +2,14 @@
     import Check from "@lucide/svelte/icons/check";
     import Copy from "@lucide/svelte/icons/copy";
     import IconButton from "./IconButton.svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         /** Raw source; escaped unless `trustHtml` (e.g. highlighter HTML). */
         code: string;
         language?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         showCopyButton?: boolean;
         /** If true, `{@html code}` — only trusted, sanitized input. */
@@ -16,11 +19,16 @@
     let {
         code,
         language = "svelte",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         showCopyButton = true,
         trustHtml = false,
         ...restProps
-    } = $props();
+    }: Props & Record<string, unknown> = $props();
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 
     let copied = $state(false);
 
@@ -38,16 +46,16 @@
 </script>
 
 <div
-    class="code-block relative bg-surface-1 border border-border rounded-lg overflow-hidden {className}"
+    class={cn("code-block relative bg-surface-1 border border-border rounded-control overflow-hidden", className)}
     {...restProps}
 >
     <div
         class="flex items-center justify-between px-4 py-2 bg-surface-2 border-b border-border"
     >
-        <div class="flex items-center gap-2">
-            <div class="w-3 h-3 rounded-full bg-red-500"></div>
-            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+        <div class="flex items-center gap-2" aria-hidden="true">
+            <div class="w-3 h-3 rounded-full bg-error"></div>
+            <div class="w-3 h-3 rounded-full bg-warning"></div>
+            <div class="w-3 h-3 rounded-full bg-success"></div>
         </div>
         {#if showCopyButton}
             <IconButton

package/dist/atoms/CodeBlock.svelte.d.ts

@@ -1,9 +1,15 @@
-declare const CodeBlock: import("svelte").Component<{
-    code: any;
+interface Props {
+    /** Raw source; escaped unless `trustHtml` (e.g. highlighter HTML). */
+    code: string;
     language?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     showCopyButton?: boolean;
+    /** If true, `{@html code}` — only trusted, sanitized input. */
     trustHtml?: boolean;
-} & Record<string, any>, {}, "">;
+}
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;
 export default CodeBlock;

package/dist/atoms/ColorPicker.svelte

@@ -3,6 +3,8 @@
     import { onMount, onDestroy, tick } from "svelte";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         value?: string;
         label?: string;
         disabled?: boolean;
@@ -11,7 +13,8 @@
     }
 
     let {
-        value = "",
+        class: className = "",
+        value = $bindable(""),
         label = "",
         disabled = false,
         placeholder = "#000000",
@@ -35,7 +38,14 @@
         return hexPattern.test(hex);
     }
 
-    function hexToHsl(hex: string): [number, number, number] {
+    /** `#f00` → `#ff0000`; 6-digit input is returned unchanged. */
+    function expandHex(hex: string): string {
+        if (hex.length !== 4) return hex;
+        return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+    }
+
+    function hexToHsl(rawHex: string): [number, number, number] {
+        const hex = expandHex(rawHex);
         const r = parseInt(hex.slice(1, 3), 16) / 255;
         const g = parseInt(hex.slice(3, 5), 16) / 255;
         const b = parseInt(hex.slice(5, 7), 16) / 255;
@@ -263,7 +273,7 @@
     const pickerIndicatorY = $derived(`${100 - lightness}%`);
 </script>
 
-<div {...restProps}>
+<div class={className} {...restProps}>
     <div class="flex items-start gap-2">
         <div class="flex-1">
             <Input
@@ -283,7 +293,7 @@
                 type="button"
                 onclick={togglePicker}
                 {disabled}
-                class="focus-ring w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-border transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                class="focus-ring w-11 h-11 rounded-control border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-border transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                 style="background-color: {displayColor};"
                 aria-label="Open color picker"
                 aria-expanded={isOpen}
@@ -292,14 +302,14 @@
             {#if isOpen}
                 <div
                     use:setPickerContainer
-                    class="absolute top-12 right-0 z-50 border border-input-border bg-input rounded-2xl shadow-lg p-4 w-80"
+                    class="absolute top-12 right-0 z-popover border border-input-border bg-input rounded-container shadow-lg p-4 w-80"
                     role="dialog"
                     aria-label="Color picker"
                 >
                     <div class="space-y-4">
                         <div
                             use:setColorMapContainer
-                            class="relative w-full h-48 rounded-xl overflow-hidden cursor-crosshair"
+                            class="relative w-full h-48 rounded-container overflow-hidden cursor-crosshair"
                             onmousedown={(e) => {
                                 isDragging = true;
                                 handleColorMapClick(e);
@@ -314,14 +324,14 @@
                                 class="w-full h-full"
                             ></canvas>
                             <div
-                                class="absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
+                                class="absolute w-4 h-4 border-2 border-white rounded-full shadow-sm pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
                                 style="left: {pickerIndicatorX}; top: {pickerIndicatorY};"
                             ></div>
                         </div>
 
                         <div class="space-y-2">
                             <div
-                                class="relative h-6 rounded-lg overflow-hidden"
+                                class="relative h-6 rounded-control overflow-hidden"
                             >
                                 <div
                                     class="absolute inset-0"
@@ -337,7 +347,7 @@
                                     aria-label="Hue slider"
                                 />
                                 <div
-                                    class="absolute top-0 bottom-0 w-3 bg-card shadow-md pointer-events-none my-0.25 rounded-full border border-base-950"
+                                    class="absolute top-0 bottom-0 w-3 bg-card shadow-sm pointer-events-none my-px rounded-full border border-base-950"
                                     style="left: {(hue / 360) * 100}%;"
                                 ></div>
                             </div>

package/dist/atoms/ColorPicker.svelte.d.ts

@@ -1,10 +1,12 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     value?: string;
     label?: string;
     disabled?: boolean;
     placeholder?: string;
     onchange?: (event: Event) => void;
 }
-declare const ColorPicker: import("svelte").Component<Props, {}, "">;
+declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/atoms/Container.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
 
+    import { cn } from "../util/cn.js";
     type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 
     interface Props {
@@ -31,9 +32,7 @@
 
 <svelte:element
     this={Tag}
-    class={['mx-auto w-full', maxClass[maxWidth], padded ? 'px-4 sm:px-6' : '', className]
-        .filter(Boolean)
-        .join(' ')}
+    class={cn('mx-auto w-full', maxClass[maxWidth], padded ? 'px-4 sm:px-6' : '', className)}
 >
     {#if children}
         {@render children()}