tera-system-ui 0.1.76 → 0.2.2

package/dist/components/bottom-sheet/BottomSheet.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type BottomSheetProps } from './BottomSheet.recipe';
+declare const BottomSheet: import("svelte").Component<BottomSheetProps, {}, "open">;
+type BottomSheet = ReturnType<typeof BottomSheet>;
+export default BottomSheet;

package/dist/components/bottom-sheet/bottomSheetStore.svelte.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Bottom Sheet store — Svelte 5 runes.
+ *
+ * A small singleton that tracks the stack of open bottom sheets so multiple
+ * sheets can layer correctly (z-index), report drag progress, and resolve which
+ * sheet is topmost (for Escape handling). Sheets register on mount and push/pop
+ * themselves from the stack as they open/close. Exposed publicly so apps can
+ * drive sheets programmatically (open/close/closeTop) in addition to `bind:open`.
+ */
+export interface BottomSheetConfig {
+    id: string;
+    snapPoints: number[];
+    defaultSnapPoint: number;
+    closeOnBackdrop: boolean;
+}
+export interface SheetStackItem {
+    id: string;
+    zIndex: number;
+    progress: number;
+    config: BottomSheetConfig;
+}
+export declare const bottomSheetStore: {
+    readonly stack: SheetStackItem[];
+    readonly hasOpenSheets: boolean;
+    register: (id: string, config: Omit<BottomSheetConfig, "id">) => void;
+    unregister: (id: string) => void;
+    open: (id: string) => void;
+    close: (id: string) => void;
+    closeTop: () => void;
+    updateProgress: (id: string, progress: number) => void;
+    getZIndex: (id: string) => number;
+    isOpen: (id: string) => boolean;
+    isTopmost: (id: string) => boolean;
+    getProgress: (id: string) => number;
+    attachContainer: (sheetId: string, ref: HTMLElement) => void;
+    getContainer: (sheetId: string) => HTMLElement | undefined;
+    getCombinedBackdropOpacity: () => number;
+    getStack: () => SheetStackItem[];
+};

package/dist/components/bottom-sheet/bottomSheetStore.svelte.js

@@ -0,0 +1,158 @@
+/**
+ * Bottom Sheet store — Svelte 5 runes.
+ *
+ * A small singleton that tracks the stack of open bottom sheets so multiple
+ * sheets can layer correctly (z-index), report drag progress, and resolve which
+ * sheet is topmost (for Escape handling). Sheets register on mount and push/pop
+ * themselves from the stack as they open/close. Exposed publicly so apps can
+ * drive sheets programmatically (open/close/closeTop) in addition to `bind:open`.
+ */
+const BASE_Z_INDEX = 1000;
+const Z_INDEX_INCREMENT = 10;
+function createBottomSheetStore() {
+    // Stack of active sheets (bottom to top)
+    let sheetStack = $state([]);
+    // Registry of all sheet configs
+    let registry = $state(new Map());
+    // Container refs for scale effect
+    let containerRefs = $state(new Map());
+    /**
+     * Register a sheet with its config
+     */
+    function register(id, config) {
+        registry.set(id, { id, ...config });
+    }
+    /**
+     * Unregister a sheet
+     */
+    function unregister(id) {
+        registry.delete(id);
+        containerRefs.delete(id);
+        // Remove from stack if present
+        sheetStack = sheetStack.filter(s => s.id !== id);
+    }
+    /**
+     * Open a sheet by ID
+     */
+    function open(id) {
+        const config = registry.get(id);
+        if (!config) {
+            // Sheet was not registered (component not mounted yet) — ignore.
+            return;
+        }
+        // Check if already in stack
+        if (sheetStack.some(s => s.id === id)) {
+            return;
+        }
+        // Calculate z-index based on stack position
+        const zIndex = BASE_Z_INDEX + (sheetStack.length * Z_INDEX_INCREMENT);
+        sheetStack = [...sheetStack, {
+                id,
+                zIndex,
+                progress: 0,
+                config
+            }];
+    }
+    /**
+     * Close a sheet by ID
+     */
+    function close(id) {
+        sheetStack = sheetStack.filter(s => s.id !== id);
+        // Recalculate z-indices for remaining sheets
+        sheetStack = sheetStack.map((sheet, index) => ({
+            ...sheet,
+            zIndex: BASE_Z_INDEX + (index * Z_INDEX_INCREMENT)
+        }));
+    }
+    /**
+     * Close the topmost sheet
+     */
+    function closeTop() {
+        const top = sheetStack[sheetStack.length - 1];
+        if (top) {
+            close(top.id);
+        }
+    }
+    /**
+     * Update progress for a sheet (0-1)
+     */
+    function updateProgress(id, progress) {
+        const index = sheetStack.findIndex(s => s.id === id);
+        const sheet = sheetStack[index];
+        if (sheet) {
+            sheet.progress = Math.max(0, Math.min(1, progress));
+        }
+    }
+    /**
+     * Get z-index for a sheet
+     */
+    function getZIndex(id) {
+        const sheet = sheetStack.find(s => s.id === id);
+        return sheet?.zIndex ?? BASE_Z_INDEX;
+    }
+    /**
+     * Check if a sheet is open
+     */
+    function isOpen(id) {
+        return sheetStack.some(s => s.id === id);
+    }
+    /**
+     * Check if a sheet is the topmost
+     */
+    function isTopmost(id) {
+        return sheetStack[sheetStack.length - 1]?.id === id;
+    }
+    /**
+     * Get progress for a sheet
+     */
+    function getProgress(id) {
+        const sheet = sheetStack.find(s => s.id === id);
+        return sheet?.progress ?? 0;
+    }
+    /**
+     * Attach container ref for scale effect
+     */
+    function attachContainer(sheetId, ref) {
+        containerRefs.set(sheetId, ref);
+    }
+    /**
+     * Get container ref for a sheet
+     */
+    function getContainer(sheetId) {
+        return containerRefs.get(sheetId);
+    }
+    /**
+     * Get combined backdrop opacity from all sheets
+     */
+    function getCombinedBackdropOpacity() {
+        // Use the topmost sheet's progress for backdrop
+        const top = sheetStack[sheetStack.length - 1];
+        return top ? top.progress * 0.5 : 0;
+    }
+    /**
+     * Get the current stack
+     */
+    function getStack() {
+        return sheetStack;
+    }
+    return {
+        get stack() { return sheetStack; },
+        get hasOpenSheets() { return sheetStack.length > 0; },
+        register,
+        unregister,
+        open,
+        close,
+        closeTop,
+        updateProgress,
+        getZIndex,
+        isOpen,
+        isTopmost,
+        getProgress,
+        attachContainer,
+        getContainer,
+        getCombinedBackdropOpacity,
+        getStack
+    };
+}
+// Export singleton instance
+export const bottomSheetStore = createBottomSheetStore();

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,5 @@
+export { default as BottomSheet } from './BottomSheet.svelte';
+export { bottomSheetStore } from './bottomSheetStore.svelte.js';
+export { bottomSheetRecipe } from './BottomSheet.recipe';
+export type { BottomSheetRecipeProps, BottomSheetProps } from './BottomSheet.recipe';
+export type { BottomSheetConfig, SheetStackItem } from './bottomSheetStore.svelte.js';

package/dist/components/bottom-sheet/index.js

@@ -0,0 +1,3 @@
+export { default as BottomSheet } from './BottomSheet.svelte';
+export { bottomSheetStore } from './bottomSheetStore.svelte.js';
+export { bottomSheetRecipe } from './BottomSheet.recipe';

package/dist/components/button/Button.recipe.d.ts

@@ -0,0 +1,131 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+/**
+ * Button recipe — the canonical styled layer for the base design language.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: buttonRecipe, ... })` in typed code — base sizing and
+ * states are inherited; only the design language changes. See
+ * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the
+ * llms doc generator doesn't grep its variant tokens).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS vars below
+ * (--tera-button-*) let a theme/app retune radius, weight and press feel with
+ * no code change; they default to global axis tokens in tera-ui-base.css.
+ */
+export declare const buttonRecipe: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        default: string;
+        dashed: string;
+        text: string;
+        link: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        default: string;
+        circle: string;
+        round: string;
+    };
+    disabled: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    danger: {
+        true: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, "relative overflow-visible rounded-[var(--tera-button-radius,var(--tera-radius-base))] inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon select-none outline-none [font-weight:var(--tera-button-font-weight,500)] cursor-pointer transition-[background-color,border-color,box-shadow,transform,opacity] ease-ui duration-[var(--tera-duration-fast)] focus-visible:shadow-focus", {
+    variant: {
+        primary: string;
+        default: string;
+        dashed: string;
+        text: string;
+        link: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        default: string;
+        circle: string;
+        round: string;
+    };
+    disabled: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    danger: {
+        true: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        default: string;
+        dashed: string;
+        text: string;
+        link: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        default: string;
+        circle: string;
+        round: string;
+    };
+    disabled: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    danger: {
+        true: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, "relative overflow-visible rounded-[var(--tera-button-radius,var(--tera-radius-base))] inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon select-none outline-none [font-weight:var(--tera-button-font-weight,500)] cursor-pointer transition-[background-color,border-color,box-shadow,transform,opacity] ease-ui duration-[var(--tera-duration-fast)] focus-visible:shadow-focus", unknown, unknown, undefined>>;
+export type ButtonRecipeProps = VariantProps<typeof buttonRecipe>;
+export interface ButtonProps extends Omit<HTMLButtonAttributes, 'disabled'>, ButtonRecipeProps {
+    children?: Snippet;
+    /** Replace the default loading spinner with custom markup (structural seam). */
+    spinner?: Snippet;
+    /** When set, the button renders as an `<a>` (button-as-link) without forking. */
+    href?: HTMLAnchorAttributes['href'];
+    target?: HTMLAnchorAttributes['target'];
+    rel?: HTMLAnchorAttributes['rel'];
+    class?: string;
+    ref?: HTMLElement | null;
+}

package/dist/components/button/Button.recipe.js

@@ -0,0 +1,120 @@
+import { tv } from "tailwind-variants";
+/**
+ * Button recipe — the canonical styled layer for the base design language.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: buttonRecipe, ... })` in typed code — base sizing and
+ * states are inherited; only the design language changes. See
+ * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the
+ * llms doc generator doesn't grep its variant tokens).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS vars below
+ * (--tera-button-*) let a theme/app retune radius, weight and press feel with
+ * no code change; they default to global axis tokens in tera-ui-base.css.
+ */
+export const buttonRecipe = tv({
+    base: 'relative overflow-visible rounded-[var(--tera-button-radius,var(--tera-radius-base))] inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon select-none outline-none [font-weight:var(--tera-button-font-weight,500)] cursor-pointer transition-[background-color,border-color,box-shadow,transform,opacity] ease-ui duration-[var(--tera-duration-fast)] focus-visible:shadow-focus',
+    variants: {
+        variant: {
+            // "Detent" press: primary rides a raised accent key; hover brightens
+            // + lifts, active depresses (translateY down, key collapses).
+            primary: 'bg-primary-600 text-white border border-primary-700 shadow-key hover:bg-primary-500 hover:border-primary-600 hover:[transform:translateY(var(--tera-button-hover-lift,-1px))] active:bg-primary-700 active:shadow-sm active:[transform:translateY(1px)_scale(var(--tera-button-active-scale,0.98))]',
+            // Default reads as a physical key — subtle raised edge, surface lifts
+            // on hover, depresses on press. Accent stays reserved for primary.
+            default: 'bg-surface-control text-text-primary border border-border-default shadow-xs hover:bg-surface-raised hover:border-border-strong active:bg-surface-sunken active:shadow-none active:[transform:translateY(1px)_scale(var(--tera-button-active-scale,0.98))]',
+            dashed: 'bg-surface-control text-text-secondary border border-dashed border-border-strong hover:text-text-primary hover:bg-surface-raised active:bg-surface-sunken active:[transform:translateY(1px)_scale(var(--tera-button-active-scale,0.98))]',
+            text: 'bg-transparent text-text-primary border border-transparent hover:bg-surface-hover active:bg-surface-hover active:[transform:scale(var(--tera-button-active-scale,0.98))]',
+            link: 'bg-transparent text-interactive border border-transparent hover:text-interactive-hover hover:underline underline-offset-2 active:text-interactive-active px-0',
+        },
+        size: {
+            xs: 'h-[var(--tera-control-height-xs)] px-[var(--tera-control-px-xs)] gap-1 text-xs [&>svg]:size-3',
+            sm: 'h-[var(--tera-control-height-sm)] px-[var(--tera-control-px-sm)] gap-1.5 text-sm [&>svg]:size-3.5',
+            md: 'h-[var(--tera-control-height-base)] px-[var(--tera-control-px-lg)] gap-2 text-sm [&>svg]:size-4',
+            lg: 'h-[var(--tera-control-height-lg)] px-[var(--tera-control-px-lg)] gap-2 text-base [&>svg]:size-5',
+        },
+        shape: {
+            default: '',
+            circle: 'rounded-full px-0',
+            round: 'rounded-full',
+        },
+        disabled: {
+            true: 'bg-surface-sunken text-text-disabled border-border-default pointer-events-none shadow-none cursor-not-allowed',
+        },
+        loading: {
+            true: 'cursor-wait pointer-events-none opacity-65'
+        },
+        icon: {
+            true: 'px-0'
+        },
+        danger: {
+            true: ''
+        },
+        block: {
+            true: 'w-full'
+        }
+    },
+    compoundVariants: [
+        // Primary danger state — swap the accent key for a neutral shadow.
+        {
+            variant: 'primary',
+            danger: true,
+            disabled: false,
+            class: 'bg-error-default border-error-600 shadow-sm hover:bg-error-hover hover:border-error-default active:bg-error-active active:border-error-active'
+        },
+        // Default danger state
+        {
+            variant: 'default',
+            danger: true,
+            disabled: false,
+            class: 'text-error-default border-error-default hover:text-error-hover hover:border-error-hover active:text-error-active active:border-error-active'
+        },
+        // Dashed danger state
+        {
+            variant: 'dashed',
+            danger: true,
+            disabled: false,
+            class: 'text-error-default border-error-default hover:text-error-hover hover:border-error-hover active:text-error-active active:border-error-active'
+        },
+        // Text danger state
+        {
+            variant: 'text',
+            danger: true,
+            disabled: false,
+            class: 'text-error-default hover:bg-error-subtle active:bg-error-muted'
+        },
+        // Link danger state
+        {
+            variant: 'link',
+            danger: true,
+            disabled: false,
+            class: 'text-error-default hover:text-error-hover active:text-error-active'
+        },
+        // Text disabled state
+        {
+            variant: 'text',
+            disabled: true,
+            class: 'bg-transparent border-transparent'
+        },
+        // Link disabled state
+        {
+            variant: 'link',
+            disabled: true,
+            class: 'bg-transparent border-transparent'
+        },
+        // Icon size variants - circle and icon-only
+        { size: 'xs', icon: true, class: 'size-[var(--tera-control-height-xs)]' },
+        { size: 'sm', icon: true, class: 'size-[var(--tera-control-height-sm)]' },
+        { size: 'md', icon: true, class: 'size-[var(--tera-control-height-base)]' },
+        { size: 'lg', icon: true, class: 'size-[var(--tera-control-height-lg)]' },
+        // Circle shape sizing
+        { size: 'xs', shape: 'circle', class: 'size-[var(--tera-control-height-xs)]' },
+        { size: 'sm', shape: 'circle', class: 'size-[var(--tera-control-height-sm)]' },
+        { size: 'md', shape: 'circle', class: 'size-[var(--tera-control-height-base)]' },
+        { size: 'lg', shape: 'circle', class: 'size-[var(--tera-control-height-lg)]' },
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+        shape: 'default',
+    },
+});

package/dist/components/button/Button.svelte

@@ -1,27 +1,41 @@
-<script lang="ts">import { styles } from "./Button";
-let { children, disabled, variant = 'default', icon, size = 'md', shape = 'default', danger, loading, block, class: className, ref = $bindable(), onclick, ...props } = $props();
+<script lang="ts">import { buttonRecipe } from "./Button.recipe";
+let { children, disabled, variant = 'default', icon, size = 'md', shape = 'default', danger, loading, block, class: className, href, target, rel, spinner, ref = $bindable(), onclick, ...props } = $props();
+const tag = $derived(href ? 'a' : 'button');
+const isDisabled = $derived(disabled || loading);
 function handleClick(e) {
-    if (disabled || loading)
+    if (isDisabled) {
+        e.preventDefault();
         return;
+    }
     onclick?.(e);
 }
-</script>
-
-<button
-        bind:this={ref}
-        class={styles({ disabled: disabled || loading, variant, icon, size, shape, danger, block, className })}
-        data-variant={variant}
-        data-danger={danger || undefined}
-        {...props}
-        disabled={disabled || loading}
-        aria-busy={loading}
-        onclick={handleClick}
->
-    {#if loading}
-        <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-    {/if}
-    {@render children?.()}
-</button>
+</script>
+
+<svelte:element
+        this={tag}
+        bind:this={ref}
+        class={buttonRecipe({ disabled: isDisabled, variant, icon, size, shape, danger, block, class: className })}
+        data-variant={variant}
+        data-danger={danger || undefined}
+        href={tag === 'a' ? href : undefined}
+        target={tag === 'a' ? target : undefined}
+        rel={tag === 'a' ? rel : undefined}
+        role={tag === 'a' ? 'button' : undefined}
+        disabled={tag === 'button' ? isDisabled : undefined}
+        aria-disabled={isDisabled || undefined}
+        aria-busy={loading}
+        {...props}
+        onclick={handleClick}
+>
+    {#if loading}
+        {#if spinner}
+            {@render spinner()}
+        {:else}
+            <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        {/if}
+    {/if}
+    {@render children?.()}
+</svelte:element>

package/dist/components/button/Button.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonProps } from "./Button";
+import { type ButtonProps } from "./Button.recipe";
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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

@@ -1,2 +1,3 @@
 export { default as Button } from './Button.svelte';
-export type { ButtonProps } from './Button';
+export { buttonRecipe } from './Button.recipe';
+export type { ButtonProps, ButtonRecipeProps } from './Button.recipe';

package/dist/components/button/index.js

@@ -1 +1,2 @@
 export { default as Button } from './Button.svelte';
+export { buttonRecipe } from './Button.recipe';

package/dist/components/card/{Card.d.ts → Card.recipe.d.ts}

@@ -1,7 +1,20 @@
 import { type VariantProps } from "tailwind-variants";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{
+/**
+ * Card recipe — the canonical styled layer for the base design language.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: cardRecipe, ... })` in typed code — surface, variant and
+ * padding scales are inherited; only the design language changes. See
+ * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the
+ * llms doc generator doesn't grep its variant tokens).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-card-radius) lets a theme/app retune the corner radius with no code
+ * change; it defaults to the global container-radius token in tera-ui-base.css.
+ */
+export declare const cardRecipe: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         elevated: string;
@@ -20,7 +33,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     loading: {
         true: string;
     };
-}, undefined, "relative bg-surface-raised rounded-container transition-[box-shadow,transform] ease-spring duration-200", {
+}, undefined, "relative bg-surface-raised rounded-[var(--tera-card-radius,var(--border-radius-container))] transition-[box-shadow,transform] ease-spring duration-[var(--tera-duration-base)]", {
     variant: {
         default: string;
         elevated: string;
@@ -58,11 +71,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     loading: {
         true: string;
     };
-}, undefined, "relative bg-surface-raised rounded-container transition-[box-shadow,transform] ease-spring duration-200", unknown, unknown, undefined>>;
-type CardVariants = VariantProps<typeof styles>;
-export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariants {
+}, undefined, "relative bg-surface-raised rounded-[var(--tera-card-radius,var(--border-radius-container))] transition-[box-shadow,transform] ease-spring duration-[var(--tera-duration-base)]", unknown, unknown, undefined>>;
+export type CardRecipeProps = VariantProps<typeof cardRecipe>;
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardRecipeProps {
     children?: Snippet;
     class?: string;
     ref?: HTMLDivElement | null;
 }
-export {};

package/dist/components/card/Card.recipe.js

@@ -0,0 +1,41 @@
+import { tv } from "tailwind-variants";
+/**
+ * Card recipe — the canonical styled layer for the base design language.
+ *
+ * Primary customization surface: an app owns its look by extending this recipe
+ * with `tv({ extend: cardRecipe, ... })` in typed code — surface, variant and
+ * padding scales are inherited; only the design language changes. See
+ * docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the
+ * llms doc generator doesn't grep its variant tokens).
+ *
+ * Restyle-internals (the lighter rung): the per-component CSS var below
+ * (--tera-card-radius) lets a theme/app retune the corner radius with no code
+ * change; it defaults to the global container-radius token in tera-ui-base.css.
+ */
+export const cardRecipe = tv({
+    base: 'relative bg-surface-raised rounded-[var(--tera-card-radius,var(--border-radius-container))] transition-[box-shadow,transform] ease-spring duration-[var(--tera-duration-base)]',
+    variants: {
+        variant: {
+            default: 'shadow-sm',
+            elevated: 'shadow-md',
+            bordered: 'border border-border-default shadow-none',
+            ghost: 'bg-transparent shadow-none',
+        },
+        padding: {
+            none: 'p-0',
+            sm: 'p-3',
+            md: 'p-5',
+            lg: 'p-7',
+        },
+        clickable: {
+            true: 'cursor-pointer hover:shadow-md hover:-translate-y-px active:scale-[0.99]',
+        },
+        loading: {
+            true: 'overflow-hidden',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        padding: 'md',
+    },
+});

package/dist/components/card/Card.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">import { styles } from './Card.js';
+<script lang="ts">import { cardRecipe } from './Card.recipe';
 let { children, class: className, variant, padding, clickable, loading, ref = $bindable(), onclick, ...props } = $props();
 </script>
 
 {#if clickable}
     <button
         bind:this={ref}
-        class={styles({ variant, padding, clickable, loading, className })}
+        class={cardRecipe({ variant, padding, clickable, loading, class: className })}
         {onclick}
         {...props}
     >
         {#if loading}
-            <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-container">
+            <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-[var(--tera-card-radius)]">
                 <div class="size-6 rounded-full border-2 border-border-default border-t-interactive animate-spin"></div>
             </div>
         {/if}
@@ -19,12 +19,12 @@ let { children, class: className, variant, padding, clickable, loading, ref = $b
 {:else}
     <div
         bind:this={ref}
-        class={styles({ variant, padding, clickable, loading, className })}
+        class={cardRecipe({ variant, padding, clickable, loading, class: className })}
         {onclick}
         {...props}
     >
         {#if loading}
-            <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-container">
+            <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-[var(--tera-card-radius)]">
                 <div class="size-6 rounded-full border-2 border-border-default border-t-interactive animate-spin"></div>
             </div>
         {/if}