@marianmeres/stuic 3.48.0 → 3.51.0

package/AGENTS.md

@@ -26,7 +26,7 @@ src/lib/
 ├── components/     # 46 UI components
 ├── actions/        # 15 Svelte actions
 ├── utils/          # 43 utility modules
-├── themes/         # 29 theme definitions (.ts) + generated CSS (css/)
+├── themes/         # Generated theme CSS (css/) — definitions from @marianmeres/design-tokens
 ├── icons/          # Icon re-exports
 ├── index.css       # Centralized CSS imports
 └── index.ts        # Main exports
@@ -92,9 +92,8 @@ src/lib/
 | -------------------------------- | ---------------------------------------------------------------------- |
 | `src/lib/index.css`              | CSS entry point                                                        |
 | `src/lib/index.ts`               | JS entry point                                                         |
-| `src/lib/utils/design-tokens.ts` | Theme types + CSS generation (`ThemeSchema`, `generateThemeCss`, etc.) |
-| `src/lib/themes/*.ts`            | Theme definitions (29 themes, `TokenSchema`-typed)                     |
-| `src/lib/themes/css/stone.css`   | Default theme (generated)                                              |
+| `src/lib/utils/design-tokens.ts` | Re-exports from `@marianmeres/design-tokens`                          |
+| `src/lib/themes/css/stone.css`   | Default theme (generated from `@marianmeres/design-tokens/themes`)     |
 | `src/lib/components/Button/`     | Reference component                                                    |
 | `scripts/generate-theme.ts`      | CLI: `pnpm run build:theme:all`                                        |
 

package/API.md

@@ -1711,17 +1711,6 @@ Format a token record as a CSS selector block.
 
 **Returns:** `string` — CSS block string
 
-#### `createDarkOverride(baseTokens, overrides)`
-
-Create a filtered dark mode token set from base tokens and overrides.
-
-**Parameters:**
-
-- `baseTokens` (GeneratedTokens) — Light mode tokens (used as key filter)
-- `overrides` (Partial\<GeneratedTokens\>) — Dark mode values
-
-**Returns:** `GeneratedTokens`
-
 ---
 
 ## Icons
@@ -1879,19 +1868,19 @@ Each component defines customization tokens. Override globally in `:root {}` or
 | property  | `bg`, `text`, `border`, `ring`, `shadow`, `radius`, `padding`        |
 | state     | `hover`, `active`, `focus`, `disabled`, `error`                      |
 
-### Available Themes (29)
+### Available Themes (31)
 
-Default theme: `stone`.
+Default theme: `stone`. Theme definitions come from `@marianmeres/design-tokens`.
 
 ```ts
 // Import pre-built CSS
 import "@marianmeres/stuic/themes/css/blue-orange.css";
 
-// Import theme definition object (to extend/customize)
-import stone from "@marianmeres/stuic/themes/stone";
+// Import theme definition object (from design-tokens package)
+import { stone } from "@marianmeres/design-tokens/themes";
 ```
 
-stone, gray, zinc, dds, blue-orange, cyan-red, cyan-slate, emerald-amber-forest, emerald-pink, fuchsia-emerald, indigo-amber, lime-fuchsia-neon, orange-pink-sunset, pink-emerald, pink-teal, purple-yellow, rainbow, red-blue, red-cyan, red-sky, red-sky-slate, rose-teal, sky-amber, slate-cyan, slate-teal-ocean, stone-orange-earth, teal-rose, violet-lime, violet-rose-dusk
+stone, gray, zinc, blue-orange, cyan-red, cyan-slate, emerald-amber-forest, emerald-pink, fuchsia-emerald, indigo-amber, lime-fuchsia-neon, monokai-cyan, monokai-green, monokai-pink, orange-pink-sunset, pink-emerald, pink-teal, purple-yellow, rainbow, red-blue, red-cyan, red-sky, red-sky-slate, rose-teal, sky-amber, slate-cyan, slate-teal-ocean, stone-orange-earth, teal-rose, violet-lime, violet-rose-dusk
 
 ### Dark Mode
 

package/dist/actions/dim-behind/index.css

@@ -7,7 +7,6 @@
 	--stuic-dim-behind-backdrop-bg: rgb(0 0 0 / 0.5);
 	--stuic-dim-behind-backdrop-z-index: 40;
 	--stuic-dim-behind-element-z-index: 41;
-	--stuic-dim-behind-transition-duration: 150ms;
 }
 
 .stuic-dim-behind-backdrop {
@@ -17,7 +16,7 @@
 	background: var(--stuic-dim-behind-backdrop-bg);
 	opacity: 0;
 	transition-property: opacity;
-	transition-duration: var(--stuic-dim-behind-transition-duration);
+	transition-duration: var(--stuic-dim-behind-transition-duration, var(--stuic-transition));
 	pointer-events: auto;
 
 	&.dim-visible {

package/dist/actions/onboarding/index.css

@@ -5,7 +5,6 @@
 	--stuic-onboarding-shell-gap: calc(var(--spacing) * 2);
 	--stuic-onboarding-shell-min-width: 200px;
 	--stuic-onboarding-shell-max-width: 320px;
-	--stuic-onboarding-shell-radius: var(--radius-md, 0.375rem);
 	--stuic-onboarding-title-size: var(--text-base);
 	--stuic-onboarding-content-size: var(--text-sm);
 	--stuic-onboarding-footer-gap: calc(var(--spacing) * 3);
@@ -21,7 +20,7 @@
 	padding: var(--stuic-onboarding-shell-padding);
 	min-width: var(--stuic-onboarding-shell-min-width);
 	max-width: var(--stuic-onboarding-shell-max-width);
-	border-radius: var(--stuic-onboarding-shell-radius);
+	border-radius: var(--stuic-onboarding-shell-radius, var(--stuic-radius));
 }
 
 .stuic-onboarding-title {

package/dist/components/Accordion/index.css

@@ -7,11 +7,8 @@
 :root {
 	/* Border & shape */
 	--stuic-accordion-border-color: var(--stuic-color-border);
-	--stuic-accordion-border-width: 1px;
-	--stuic-accordion-radius: var(--radius-md);
 
 	/* Animation */
-	--stuic-accordion-transition: 200ms;
 
 	/* Trigger */
 	--stuic-accordion-trigger-padding-x: 1rem;
@@ -39,8 +36,8 @@
 	   ============================================================================ */
 
 	.stuic-accordion {
-		border: var(--stuic-accordion-border-width) solid var(--stuic-accordion-border-color);
-		border-radius: var(--stuic-accordion-radius);
+		border: var(--stuic-accordion-border-width, var(--stuic-border-width)) solid var(--stuic-accordion-border-color);
+		border-radius: var(--stuic-accordion-radius, var(--stuic-radius-container));
 		overflow: hidden;
 	}
 
@@ -49,7 +46,7 @@
 	   ============================================================================ */
 
 	.stuic-accordion-item + .stuic-accordion-item {
-		border-top: var(--stuic-accordion-border-width) solid
+		border-top: var(--stuic-accordion-border-width, var(--stuic-border-width)) solid
 			var(--stuic-accordion-border-color);
 	}
 
@@ -69,7 +66,7 @@
 		border: none;
 		cursor: pointer;
 		text-align: left;
-		transition: background var(--stuic-accordion-transition);
+		transition: background var(--stuic-accordion-transition, var(--stuic-transition));
 	}
 
 	.stuic-accordion-trigger:hover:not(:disabled) {
@@ -92,7 +89,7 @@
 
 	.stuic-accordion-chevron {
 		flex-shrink: 0;
-		transition: transform var(--stuic-accordion-transition);
+		transition: transform var(--stuic-accordion-transition, var(--stuic-transition));
 	}
 
 	[data-open="true"] > .stuic-accordion-trigger > .stuic-accordion-chevron {
@@ -106,7 +103,7 @@
 	.stuic-accordion-content {
 		display: grid;
 		grid-template-rows: 0fr;
-		transition: grid-template-rows var(--stuic-accordion-transition);
+		transition: grid-template-rows var(--stuic-accordion-transition, var(--stuic-transition));
 	}
 
 	[data-open="true"] > .stuic-accordion-content {

package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte

@@ -97,7 +97,7 @@
 		noClickOutsideClose
 		type={acp?.current?.type}
 		class={twMerge(
-			"max-w-xl justify-end max-h-[62vh] h-auto border p-4 rounded-lg",
+			"max-w-xl justify-end max-h-[62vh] h-auto border p-4",
 			// different max-h based on not/existing content
 			// isTHCNotEmpty(acp?.current?.content) ? "sm:max-h-[200px]" : "sm:max-h-[150px]",
 			// acp?.current?.type === PROMPT && "sm:max-h-[250px]",

package/dist/components/AssetsPreview/index.css

@@ -10,7 +10,6 @@
 	/* Labels (filename, tooltip) */
 	--stuic-assets-preview-label-bg: rgba(0 0 0 / 0.6);
 	--stuic-assets-preview-label-text: white;
-	--stuic-assets-preview-label-radius: var(--radius-sm);
 
 	/* Dot indicators */
 	--stuic-assets-preview-dot-size: 0.75rem;
@@ -27,7 +26,6 @@
 	--stuic-assets-preview-area-fill-hover: rgba(0 0 0 / 0.06);
 
 	/* Transition */
-	--stuic-assets-preview-transition: 150ms;
 }
 
 @layer components {
@@ -38,7 +36,7 @@
 	.stuic-assets-preview-label {
 		background: var(--stuic-assets-preview-label-bg);
 		color: var(--stuic-assets-preview-label-text);
-		border-radius: var(--stuic-assets-preview-label-radius);
+		border-radius: var(--stuic-assets-preview-label-radius, var(--stuic-radius));
 	}
 
 	/* ============================================================================
@@ -51,7 +49,7 @@
 		border-radius: 9999px;
 		background: var(--stuic-assets-preview-dot-bg);
 		border: 1px solid var(--stuic-assets-preview-dot-border);
-		transition: background var(--stuic-assets-preview-transition);
+		transition: background var(--stuic-assets-preview-transition, var(--stuic-transition));
 	}
 
 	.stuic-assets-preview-dot:hover {
@@ -78,7 +76,7 @@
 		pointer-events: all;
 		cursor: pointer;
 		fill: transparent;
-		transition: fill var(--stuic-assets-preview-transition);
+		transition: fill var(--stuic-assets-preview-transition, var(--stuic-transition));
 	}
 
 	.stuic-assets-preview-area:hover {

package/dist/components/Avatar/index.css

@@ -8,7 +8,6 @@
 	/* Component-level customization tokens */
 	--stuic-avatar-radius: 9999px;
 	--stuic-avatar-font-weight: var(--font-weight-medium);
-	--stuic-avatar-transition: 150ms;
 
 	/* Default colors (uses muted role colors) */
 	--stuic-avatar-bg: var(--stuic-color-muted);
@@ -65,9 +64,9 @@
 
 		/* Transition for interactive mode */
 		transition:
-			background var(--stuic-avatar-transition),
-			color var(--stuic-avatar-transition),
-			opacity var(--stuic-avatar-transition);
+			background var(--stuic-avatar-transition, var(--stuic-transition)),
+			color var(--stuic-avatar-transition, var(--stuic-transition)),
+			opacity var(--stuic-avatar-transition, var(--stuic-transition));
 	}
 
 	/* ============================================================================

package/dist/components/Book/index.css

@@ -5,7 +5,6 @@
 	--stuic-book-timing: ease-out;
 	--stuic-book-page-bg: transparent; /*var(--stuic-color-surface, #fff);*/
 	--stuic-book-page-shadow: none; /*0 2px 16px rgba(0, 0, 0, 0.15);*/
-	--stuic-book-radius: var(--radius-sm, 2px);
 	--stuic-book-page-width: 300px;
 	--stuic-book-page-height: 400px;
 }
@@ -25,7 +24,7 @@
 		vertical-align: top;
 		text-align: initial;
 		background: var(--stuic-book-page-bg);
-		border-radius: var(--stuic-book-radius);
+		border-radius: var(--stuic-book-radius, var(--stuic-radius));
 		box-shadow: var(--stuic-book-page-shadow);
 		transition: width var(--stuic-book-duration) var(--stuic-book-timing);
 	}
@@ -65,7 +64,7 @@
 		backface-visibility: hidden;
 		-webkit-backface-visibility: hidden;
 		background: var(--stuic-book-page-bg);
-		border-radius: 0 var(--stuic-book-radius) var(--stuic-book-radius) 0;
+		border-radius: 0 var(--stuic-book-radius, var(--stuic-radius)) var(--stuic-book-radius, var(--stuic-radius)) 0;
 		overflow: hidden;
 	}
 
@@ -83,7 +82,7 @@
 		-webkit-backface-visibility: hidden;
 		transform: rotateY(180deg);
 		background: var(--stuic-book-page-bg);
-		border-radius: var(--stuic-book-radius) 0 0 var(--stuic-book-radius);
+		border-radius: var(--stuic-book-radius, var(--stuic-radius)) 0 0 var(--stuic-book-radius, var(--stuic-radius));
 		overflow: hidden;
 	}
 

package/dist/components/Button/index.css

@@ -7,10 +7,8 @@
 /* prettier-ignore */
 :root {
 	/* Component-level customization tokens */
-	--stuic-button-radius: var(--radius-md);
 	--stuic-button-font-family: var(--font-sans);
 	--stuic-button-font-weight: var(--font-weight-medium);
-	--stuic-button-transition: 150ms;
 
 	/* Focus ring */
 	--stuic-button-ring-width: 3px;
@@ -69,7 +67,7 @@
 		/* Box model */
 		border-width: 1px;
 		border-style: solid;
-		border-radius: var(--stuic-button-radius);
+		border-radius: var(--stuic-button-radius, var(--stuic-radius));
 
 		/* Interaction */
 		cursor: pointer;
@@ -77,10 +75,10 @@
 		-webkit-tap-highlight-color: transparent; /* Remove iOS tap highlight */
 		touch-action: manipulation; /* Disable double-tap zoom for faster response */
 		transition:
-			background var(--stuic-button-transition),
-			color var(--stuic-button-transition),
-			border-color var(--stuic-button-transition),
-			opacity var(--stuic-button-transition);
+			background var(--stuic-button-transition, var(--stuic-transition)),
+			color var(--stuic-button-transition, var(--stuic-transition)),
+			border-color var(--stuic-button-transition, var(--stuic-transition)),
+			opacity var(--stuic-button-transition, var(--stuic-transition));
 
 		/* Colors - use internal vars set by intent/variant */
 		background: var(--_bg);
@@ -355,12 +353,12 @@
 		box-shadow: var(--stuic-button-raised-offset) var(--stuic-button-raised-offset) 0 0
 			var(--stuic-button-raised-color);
 		transition:
-			background var(--stuic-button-transition),
-			color var(--stuic-button-transition),
-			border-color var(--stuic-button-transition),
-			opacity var(--stuic-button-transition),
-			box-shadow var(--stuic-button-transition),
-			transform var(--stuic-button-transition);
+			background var(--stuic-button-transition, var(--stuic-transition)),
+			color var(--stuic-button-transition, var(--stuic-transition)),
+			border-color var(--stuic-button-transition, var(--stuic-transition)),
+			opacity var(--stuic-button-transition, var(--stuic-transition)),
+			box-shadow var(--stuic-button-transition, var(--stuic-transition)),
+			transform var(--stuic-button-transition, var(--stuic-transition));
 	}
 
 	.stuic-button[data-raised]:active:not(:disabled) {

package/dist/components/ButtonGroupRadio/index.css

@@ -6,11 +6,8 @@
 
 :root {
 	/* Structure - reference Tailwind vars where applicable */
-	--stuic-button-group-radius: var(--radius-md);
 	--stuic-button-group-padding: 0.1rem;
 	--stuic-button-group-gap: 0.25rem;
-	--stuic-button-group-border-width: 1px;
-	--stuic-button-group-transition: 150ms;
 
 	/* Button sizing - 44px is Apple HIG minimum touch target */
 	--stuic-button-group-button-padding-x: 0.75rem;
@@ -56,9 +53,9 @@
 
 		/* Box model */
 		padding: var(--stuic-button-group-padding);
-		border-width: var(--stuic-button-group-border-width);
+		border-width: var(--stuic-button-group-border-width, var(--stuic-border-width));
 		border-style: solid;
-		border-radius: var(--stuic-button-group-radius);
+		border-radius: var(--stuic-button-group-radius, var(--stuic-radius));
 
 		/* Colors */
 		background: var(--stuic-button-group-bg);
@@ -109,7 +106,7 @@
 			var(--stuic-button-group-button-padding-x);
 		min-height: var(--stuic-button-group-button-min-height);
 		border: none;
-		border-radius: var(--stuic-button-group-radius);
+		border-radius: var(--stuic-button-group-radius, var(--stuic-radius));
 
 		/* Typography */
 		white-space: nowrap;
@@ -128,8 +125,8 @@
 
 		/* Transition */
 		transition:
-			background var(--stuic-button-group-transition),
-			color var(--stuic-button-group-transition);
+			background var(--stuic-button-group-transition, var(--stuic-transition)),
+			color var(--stuic-button-group-transition, var(--stuic-transition));
 
 		/* Focus */
 		outline: none;

package/dist/components/Card/Card.svelte

@@ -0,0 +1,168 @@
+<script lang="ts" module>
+	import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	export type CardVariant = "vertical" | "horizontal";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+		/** Image URL for the top (vertical) or side (horizontal) image area */
+		image?: string;
+		/** Alt text for the image */
+		imageAlt?: string;
+		/** Small label above the title (category, date, tag) */
+		eyebrow?: THC;
+		/** Card title */
+		title?: THC;
+		/** Short description below the title */
+		description?: THC;
+		/** Layout variant */
+		variant?: CardVariant;
+		/** When provided, the card renders as <a> */
+		href?: string;
+		/** Disabled state */
+		disabled?: boolean;
+		/** Override the entire card body */
+		children?: Snippet;
+		/** Override the image area */
+		renderImage?: Snippet<[{ image: string; imageAlt: string }]>;
+		/** Badge/overlay positioned over the image */
+		renderBadge?: Snippet;
+		/** Override the content area (eyebrow + title + description) */
+		renderContent?: Snippet<[{ eyebrow?: THC; title?: THC; description?: THC }]>;
+		/** Footer area (action buttons, metadata, etc.) */
+		renderFooter?: Snippet;
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for the image container */
+		classImage?: string;
+		/** Class for the content area */
+		classContent?: string;
+		/** Class for the footer area */
+		classFooter?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+
+	let {
+		image,
+		imageAlt,
+		eyebrow,
+		title,
+		description,
+		variant = "vertical",
+		href,
+		disabled = false,
+		children,
+		renderImage,
+		renderBadge,
+		renderContent,
+		renderFooter,
+		unstyled = false,
+		class: classProp,
+		classImage: classImageProp,
+		classContent: classContentProp,
+		classFooter: classFooterProp,
+		el = $bindable(),
+		onclick,
+		...rest
+	}: Props = $props();
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-card", classProp));
+	let _classImage = $derived(unstyled ? classImageProp : twMerge("stuic-card-image", classImageProp));
+	let _classContent = $derived(unstyled ? classContentProp : twMerge("stuic-card-content", classContentProp));
+	let _classFooter = $derived(unstyled ? classFooterProp : twMerge("stuic-card-footer", classFooterProp));
+
+	let _isInteractive = $derived(!!(href || onclick));
+	let _hasImage = $derived(!!(image || renderImage));
+	let _hasContent = $derived(!!(eyebrow || title || description || renderContent));
+</script>
+
+{#snippet cardInner()}
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if _hasImage}
+			<div class={_classImage}>
+				{#if renderImage}
+					{@render renderImage({ image: image ?? "", imageAlt: imageAlt ?? "" })}
+				{:else if image}
+					<img src={image} alt={imageAlt ?? ""} />
+				{/if}
+				{#if renderBadge}
+					<div class={unstyled ? undefined : "stuic-card-badge"}>
+						{@render renderBadge()}
+					</div>
+				{/if}
+			</div>
+		{/if}
+		{#if renderContent}
+			<div class={_classContent}>
+				{@render renderContent({ eyebrow, title, description })}
+			</div>
+		{:else if _hasContent}
+			<div class={_classContent}>
+				{#if eyebrow}
+					<div class={unstyled ? undefined : "stuic-card-eyebrow"}><Thc thc={eyebrow} /></div>
+				{/if}
+				{#if title}
+					<div class={unstyled ? undefined : "stuic-card-title"}><Thc thc={title} /></div>
+				{/if}
+				{#if description}
+					<div class={unstyled ? undefined : "stuic-card-description"}><Thc thc={description} /></div>
+				{/if}
+			</div>
+		{/if}
+		{#if renderFooter}
+			<div class={_classFooter}>
+				{@render renderFooter()}
+			</div>
+		{/if}
+	{/if}
+{/snippet}
+
+{#if href}
+	<a
+		{href}
+		bind:this={el}
+		class={_class}
+		data-variant={!unstyled ? variant : undefined}
+		data-interactive={!unstyled ? "" : undefined}
+		data-disabled={!unstyled && disabled ? "" : undefined}
+		aria-disabled={disabled ? "true" : undefined}
+		{...rest as HTMLAnchorAttributes}
+	>
+		{@render cardInner()}
+	</a>
+{:else if onclick}
+	<button
+		type="button"
+		bind:this={el}
+		class={_class}
+		data-variant={!unstyled ? variant : undefined}
+		data-interactive={!unstyled ? "" : undefined}
+		data-disabled={!unstyled && disabled ? "" : undefined}
+		{disabled}
+		{onclick}
+		{...rest as any}
+	>
+		{@render cardInner()}
+	</button>
+{:else}
+	<div
+		bind:this={el}
+		class={_class}
+		data-variant={!unstyled ? variant : undefined}
+		data-disabled={!unstyled && disabled ? "" : undefined}
+		{...rest}
+	>
+		{@render cardInner()}
+	</div>
+{/if}

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

@@ -0,0 +1,54 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { THC } from "../Thc/Thc.svelte";
+export type CardVariant = "vertical" | "horizontal";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    /** Image URL for the top (vertical) or side (horizontal) image area */
+    image?: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Small label above the title (category, date, tag) */
+    eyebrow?: THC;
+    /** Card title */
+    title?: THC;
+    /** Short description below the title */
+    description?: THC;
+    /** Layout variant */
+    variant?: CardVariant;
+    /** When provided, the card renders as <a> */
+    href?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Override the entire card body */
+    children?: Snippet;
+    /** Override the image area */
+    renderImage?: Snippet<[{
+        image: string;
+        imageAlt: string;
+    }]>;
+    /** Badge/overlay positioned over the image */
+    renderBadge?: Snippet;
+    /** Override the content area (eyebrow + title + description) */
+    renderContent?: Snippet<[{
+        eyebrow?: THC;
+        title?: THC;
+        description?: THC;
+    }]>;
+    /** Footer area (action buttons, metadata, etc.) */
+    renderFooter?: Snippet;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Class for the image container */
+    classImage?: string;
+    /** Class for the content area */
+    classContent?: string;
+    /** Class for the footer area */
+    classFooter?: string;
+    /** Bindable element reference */
+    el?: HTMLElement;
+}
+declare const Card: import("svelte").Component<Props, {}, "el">;
+type Card = ReturnType<typeof Card>;
+export default Card;