@marianmeres/stuic 3.115.0 → 3.116.0

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

@@ -16,7 +16,10 @@
 	background: var(--stuic-dim-behind-backdrop-bg);
 	opacity: 0;
 	transition-property: opacity;
-	transition-duration: var(--stuic-dim-behind-transition-duration, var(--stuic-transition));
+	transition-duration: var(
+		--stuic-dim-behind-transition-duration,
+		var(--stuic-transition)
+	);
 	pointer-events: auto;
 
 	&.dim-visible {

package/dist/actions/focus-trap.js

@@ -39,7 +39,9 @@ const defaults = { enabled: true, autoFocusFirst: true };
  * ```
  */
 export function focusTrap(node, options = {}) {
-    let { enabled = true, autoFocusFirst } = { ...defaults, ...(options ?? {}) };
+    const merged = { ...defaults, ...(options ?? {}) };
+    let { enabled = true } = merged; // reassigned by the update hook below
+    const { autoFocusFirst } = merged;
     const focusableSelectors = [
         "[contentEditable=true]",
         //

package/dist/components/Accordion/README.md

@@ -93,21 +93,21 @@ Only one item can be open at a time:
 
 ## CSS Variables
 
-| Variable                                | Default                | Description                   |
-| --------------------------------------- | ---------------------- | ----------------------------- |
-| `--stuic-accordion-border-color`        | `--stuic-color-border` | Item separator color          |
-| `--stuic-accordion-border-width`        | `1px`                  | Separator width               |
+| Variable                                | Default                | Description                                   |
+| --------------------------------------- | ---------------------- | --------------------------------------------- |
+| `--stuic-accordion-border-color`        | `--stuic-color-border` | Item separator color                          |
+| `--stuic-accordion-border-width`        | `1px`                  | Separator width                               |
 | `--stuic-accordion-divider-inset`       | `0`                    | Inset of divider from L/R edges (e.g. `16px`) |
-| `--stuic-accordion-radius`              | `--radius-md`          | Corner rounding               |
-| `--stuic-accordion-transition`          | `200ms`                | Open/close animation duration |
-| `--stuic-accordion-trigger-padding-x`   | `1rem`                 | Trigger horizontal padding    |
-| `--stuic-accordion-trigger-padding-y`   | `0.75rem`              | Trigger vertical padding      |
-| `--stuic-accordion-trigger-font-weight` | `--font-weight-medium` | Trigger text weight           |
-| `--stuic-accordion-trigger-bg`          | `transparent`          | Trigger background            |
-| `--stuic-accordion-trigger-bg-hover`    | muted mix              | Trigger hover background      |
-| `--stuic-accordion-chevron-size`        | `16px`                 | Chevron icon size             |
-| `--stuic-accordion-chevron-color`       | `currentColor`         | Chevron icon color            |
-| `--stuic-accordion-content-padding-x`   | `1rem`                 | Content horizontal padding    |
-| `--stuic-accordion-content-padding-y`   | `0.75rem`              | Content vertical padding      |
-| `--stuic-accordion-ring-width`          | `2px`                  | Focus ring width              |
-| `--stuic-accordion-ring-color`          | `--stuic-color-ring`   | Focus ring color              |
+| `--stuic-accordion-radius`              | `--radius-md`          | Corner rounding                               |
+| `--stuic-accordion-transition`          | `200ms`                | Open/close animation duration                 |
+| `--stuic-accordion-trigger-padding-x`   | `1rem`                 | Trigger horizontal padding                    |
+| `--stuic-accordion-trigger-padding-y`   | `0.75rem`              | Trigger vertical padding                      |
+| `--stuic-accordion-trigger-font-weight` | `--font-weight-medium` | Trigger text weight                           |
+| `--stuic-accordion-trigger-bg`          | `transparent`          | Trigger background                            |
+| `--stuic-accordion-trigger-bg-hover`    | muted mix              | Trigger hover background                      |
+| `--stuic-accordion-chevron-size`        | `16px`                 | Chevron icon size                             |
+| `--stuic-accordion-chevron-color`       | `currentColor`         | Chevron icon color                            |
+| `--stuic-accordion-content-padding-x`   | `1rem`                 | Content horizontal padding                    |
+| `--stuic-accordion-content-padding-y`   | `0.75rem`              | Content vertical padding                      |
+| `--stuic-accordion-ring-width`          | `2px`                  | Focus ring width                              |
+| `--stuic-accordion-ring-color`          | `--stuic-color-ring`   | Focus ring color                              |

package/dist/components/Accordion/index.css

@@ -41,7 +41,8 @@
 	   ============================================================================ */
 
 	.stuic-accordion {
-		border: var(--stuic-accordion-border-width, var(--stuic-border-width)) solid var(--stuic-accordion-border-color);
+		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;
 	}
@@ -114,7 +115,8 @@
 	.stuic-accordion-content {
 		display: grid;
 		grid-template-rows: 0fr;
-		transition: grid-template-rows var(--stuic-accordion-transition, var(--stuic-transition));
+		transition: grid-template-rows
+			var(--stuic-accordion-transition, var(--stuic-transition));
 	}
 
 	[data-open="true"] > .stuic-accordion-content {

package/dist/components/AssetsPreview/README.md

@@ -4,13 +4,13 @@ A modal-based asset preview component for displaying images and files. Supports
 
 ## Props
 
-| Prop            | Type                         | Default  | Description                   |
-| --------------- | ---------------------------- | -------- | ----------------------------- |
-| `assets`        | `string[] \| AssetPreview[]` | -        | Array of assets to preview    |
-| `classControls` | `string`                     | -        | CSS for control buttons       |
-| `t`             | `TranslateFn`                | built-in | Translation function for i18n |
-| `onDelete`      | `(asset, index) => void`     | -        | Optional delete handler       |
-| `prevNextBottom`| `boolean`                      | `false`  | Render prev/next arrows at bottom |
+| Prop             | Type                         | Default  | Description                       |
+| ---------------- | ---------------------------- | -------- | --------------------------------- |
+| `assets`         | `string[] \| AssetPreview[]` | -        | Array of assets to preview        |
+| `classControls`  | `string`                     | -        | CSS for control buttons           |
+| `t`              | `TranslateFn`                | built-in | Translation function for i18n     |
+| `onDelete`       | `(asset, index) => void`     | -        | Optional delete handler           |
+| `prevNextBottom` | `boolean`                    | `false`  | Render prev/next arrows at bottom |
 
 ## Types
 

package/dist/components/AssetsPreview/_internal/assets-preview-types.d.ts

@@ -1,6 +1,5 @@
 import type { BookPageArea } from "../../Book/Book.svelte";
-export interface AssetArea extends BookPageArea {
-}
+export type AssetArea = BookPageArea;
 export type AssetPreviewUrlObj = {
     thumb: string | URL;
     full: string | URL;

package/dist/components/AssetsPreview/_internal/assets-preview-utils.d.ts

@@ -1,5 +1,5 @@
 import type { AssetPreview, AssetPreviewNormalized } from "./assets-preview-types.js";
 export declare function getAssetIcon(ext?: string): CallableFunction;
-export declare function t_default(k: string, values?: false | null | undefined | Record<string, string | number>, fallback?: string | boolean, i18nSpanWrap?: boolean): string;
+export declare function t_default(k: string, values?: false | null | undefined | Record<string, string | number>, fallback?: string | boolean, _i18nSpanWrap?: boolean): string;
 export declare function ext(name: string): string;
 export declare function normalizeInput(input: string | AssetPreview): AssetPreviewNormalized | null;

package/dist/components/AssetsPreview/_internal/assets-preview-utils.js

@@ -21,7 +21,9 @@ export function getAssetIcon(ext) {
     return map[getFileTypeLabel(ext ?? "unknown")] ?? iconFile;
 }
 // i18n ready
-export function t_default(k, values = null, fallback = "", i18nSpanWrap = true) {
+export function t_default(k, values = null, fallback = "", 
+// kept for signature compatibility; not used by this default impl
+_i18nSpanWrap = true) {
     const m = {
         unable_to_preview: "Unable to preview",
         download: "Download",
@@ -30,8 +32,12 @@ export function t_default(k, values = null, fallback = "", i18nSpanWrap = true)
         zoom_out: "Zoom out",
         delete: "Delete",
     };
-    let out = m[k] ?? fallback ?? k;
-    return isPlainObject(values) ? replaceMap(out, values) : out;
+    const out = m[k] ?? fallback ?? k;
+    // values is narrowed to Record<string, string | number>; replaceMap wants
+    // string | CallableFunction values (it stringifies), hence the bridge cast.
+    return isPlainObject(values)
+        ? replaceMap(out, values)
+        : out;
 }
 // naive best-effort
 export function ext(name) {

package/dist/components/Avatar/Avatar.svelte

@@ -180,9 +180,7 @@
 	);
 
 	// When padded: colors go on inner element; otherwise on outer
-	let outerStyle = $derived(
-		padding ? `--stuic-avatar-padding: ${padding}` : colorStyle
-	);
+	let outerStyle = $derived(padding ? `--stuic-avatar-padding: ${padding}` : colorStyle);
 	let innerStyle = $derived(padding ? colorStyle : undefined);
 
 	// Build class string - base class for CSS targeting, allow user overrides via classProp

package/dist/components/Avatar/README.md

@@ -4,24 +4,24 @@ A flexible avatar component that displays user photos, initials, or icons with a
 
 ## Props
 
-| Prop             | Type                                              | Default  | Description                                                                            |
-| ---------------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
-| `src`            | `string`                                          | -        | Photo URL - when provided, renders in photo mode                                       |
-| `alt`            | `string`                                          | -        | Alt text for photo mode                                                                |
-| `initials`       | `string`                                          | -        | String to extract initials from. Supports: "AB", "John Doe", or "john.doe@example.com" |
-| `initialsLength` | `number`                                          | `2`      | Maximum length of extracted initials                                                   |
-| `icon`           | `IconFn`                                          | -        | Icon function to display - when provided alone, renders in icon mode                   |
-| `fallback`       | `AvatarFallback`                                  | `"icon"` | Fallback when photo fails to load                                                      |
-| `hashSource`     | `string`                                          | -        | String for color hash calculation (e.g., email, user ID). Falls back to `initials`     |
-| `size`           | `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| string` | `"md"`   | Size preset or custom Tailwind size class                                              |
-| `onclick`        | `(event: MouseEvent) => void`                     | -        | Click handler - when provided, renders as a button                                     |
-| `bg`             | `string`                                          | -        | Background color (Tailwind class). Ignored if `autoColor=true`                         |
-| `textColor`      | `string`                                          | -        | Text color (Tailwind class). Ignored if `autoColor=true`                               |
-| `autoColor`      | `boolean`                                         | `false`  | Generate deterministic pastel colors from hashSource/initials                          |
+| Prop             | Type                                              | Default  | Description                                                                                                                                  |
+| ---------------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`            | `string`                                          | -        | Photo URL - when provided, renders in photo mode                                                                                             |
+| `alt`            | `string`                                          | -        | Alt text for photo mode                                                                                                                      |
+| `initials`       | `string`                                          | -        | String to extract initials from. Supports: "AB", "John Doe", or "john.doe@example.com"                                                       |
+| `initialsLength` | `number`                                          | `2`      | Maximum length of extracted initials                                                                                                         |
+| `icon`           | `IconFn`                                          | -        | Icon function to display - when provided alone, renders in icon mode                                                                         |
+| `fallback`       | `AvatarFallback`                                  | `"icon"` | Fallback when photo fails to load                                                                                                            |
+| `hashSource`     | `string`                                          | -        | String for color hash calculation (e.g., email, user ID). Falls back to `initials`                                                           |
+| `size`           | `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| string` | `"md"`   | Size preset or custom Tailwind size class                                                                                                    |
+| `onclick`        | `(event: MouseEvent) => void`                     | -        | Click handler - when provided, renders as a button                                                                                           |
+| `bg`             | `string`                                          | -        | Background color (Tailwind class). Ignored if `autoColor=true`                                                                               |
+| `textColor`      | `string`                                          | -        | Text color (Tailwind class). Ignored if `autoColor=true`                                                                                     |
+| `autoColor`      | `boolean`                                         | `false`  | Generate deterministic pastel colors from hashSource/initials                                                                                |
 | `padding`        | `string`                                          | -        | CSS padding around the visual circle. Outer keeps its size, inner circle shrinks (e.g. `"4px"`, `"0.25rem"`). Useful for larger tap targets. |
-| `class`          | `string`                                          | -        | Additional CSS classes                                                                 |
-| `classInner`     | `string`                                          | -        | Additional CSS classes for the inner element (only used when `padding` is set)         |
-| `el`             | `HTMLElement`                                     | -        | Bindable element reference                                                             |
+| `class`          | `string`                                          | -        | Additional CSS classes                                                                                                                       |
+| `classInner`     | `string`                                          | -        | Additional CSS classes for the inner element (only used when `padding` is set)                                                               |
+| `el`             | `HTMLElement`                                     | -        | Bindable element reference                                                                                                                   |
 
 ## Usage
 
@@ -91,7 +91,13 @@ Use `padding` to keep the avatar's outer footprint (e.g. a 44px tap target) whil
 ```svelte
 <!-- Outer stays at size="md" (2.75rem), circle shrinks by 4px on each side -->
 <Avatar size="md" initials="AB" padding="4px" />
-<Avatar size="md" autoColor initials="john@example.com" padding="0.25rem" onclick={() => {}} />
+<Avatar
+	size="md"
+	autoColor
+	initials="john@example.com"
+	padding="0.25rem"
+	onclick={() => {}}
+/>
 ```
 
 When `padding` is set, `bg`, `textColor`, and `autoColor` automatically apply to the inner circle (not the outer element).
@@ -112,15 +118,15 @@ When `padding` is set, `bg`, `textColor`, and `autoColor` automatically apply to
 
 Override globally in `:root` or locally via `style` prop:
 
-| Variable                     | Default                          | Description                       |
-| ---------------------------- | -------------------------------- | --------------------------------- |
-| `--stuic-avatar-radius`      | `9999px`                         | Border radius (circle by default) |
-| `--stuic-avatar-font-weight` | `--font-weight-medium`           | Font weight for initials          |
-| `--stuic-avatar-transition`  | `150ms`                          | Transition duration               |
-| `--stuic-avatar-bg`          | `--stuic-color-muted`            | Default background color          |
-| `--stuic-avatar-fg`          | `--stuic-color-muted-foreground` | Default text/icon color           |
-| `--stuic-avatar-ring-width`  | `3px`                            | Focus ring width (button mode)    |
-| `--stuic-avatar-ring-color`  | `--stuic-color-ring`             | Focus ring color                  |
+| Variable                     | Default                          | Description                                                    |
+| ---------------------------- | -------------------------------- | -------------------------------------------------------------- |
+| `--stuic-avatar-radius`      | `9999px`                         | Border radius (circle by default)                              |
+| `--stuic-avatar-font-weight` | `--font-weight-medium`           | Font weight for initials                                       |
+| `--stuic-avatar-transition`  | `150ms`                          | Transition duration                                            |
+| `--stuic-avatar-bg`          | `--stuic-color-muted`            | Default background color                                       |
+| `--stuic-avatar-fg`          | `--stuic-color-muted-foreground` | Default text/icon color                                        |
+| `--stuic-avatar-ring-width`  | `3px`                            | Focus ring width (button mode)                                 |
+| `--stuic-avatar-ring-color`  | `--stuic-color-ring`             | Focus ring color                                               |
 | `--stuic-avatar-padding`     | -                                | Set by the `padding` prop; can also be driven directly via CSS |
 
 ### Size Tokens

package/dist/components/Book/Book.svelte

@@ -720,7 +720,12 @@
 
 {#if spreads.length}
 	<!-- Measurement wrapper: always 100% width for responsive detection -->
-	<div bind:clientWidth={containerWidth} style:width="100%" style:display="flex" style:justify-content="center">
+	<div
+		bind:clientWidth={containerWidth}
+		style:width="100%"
+		style:display="flex"
+		style:justify-content="center"
+	>
 		<!-- Visual book wrapper: owns background/shadow/radius -->
 		<div
 			bind:this={el}

package/dist/components/Book/README.md

@@ -22,7 +22,9 @@ A physical book visualization with CSS 3D page-flipping animation. Displays an o
 	let activeSpread = $state(0);
 </script>
 
-<div style="--stuic-book-page-width: {size.width}px; --stuic-book-page-height: {size.height}px;">
+<div
+	style="--stuic-book-page-width: {size.width}px; --stuic-book-page-height: {size.height}px;"
+>
 	<Book bind:this={book} {pages} bind:activeSpread />
 </div>
 
@@ -68,10 +70,10 @@ Pages are grouped into **spreads**:
 ```typescript
 interface BookPageArea {
 	id: string | number;
-	x: number;       // X position in natural image pixels
-	y: number;       // Y position in natural image pixels
-	w: number;       // Width in natural image pixels
-	h: number;       // Height in natural image pixels
+	x: number; // X position in natural image pixels
+	y: number; // Y position in natural image pixels
+	w: number; // Width in natural image pixels
+	h: number; // Height in natural image pixels
 	[key: string]: any;
 }
 
@@ -79,8 +81,8 @@ interface BookPage {
 	id: string | number;
 	src: string;
 	title?: string;
-	width: number;         // Natural image width in px
-	height: number;        // Natural image height in px
+	width: number; // Natural image width in px
+	height: number; // Natural image height in px
 	areas?: BookPageArea[];
 	[key: string]: any;
 }
@@ -114,8 +116,8 @@ Computes display dimensions from page image metadata. Finds the largest width/he
 ```ts
 import { computeBookPageSize } from "@marianmeres/stuic";
 
-const size = computeBookPageSize(pages);       // { width: 283, height: 400 }
-const size = computeBookPageSize(pages, 300);  // { width: 212, height: 300 }
+const size = computeBookPageSize(pages); // { width: 283, height: 400 }
+const size = computeBookPageSize(pages, 300); // { width: 212, height: 300 }
 ```
 
 ## Clickable Areas
@@ -155,14 +157,14 @@ Pages can define clickable areas (e.g. product hotspots in a catalog). Areas are
 
 ## CSS Variables
 
-| Variable                   | Default                       | Description               |
-| -------------------------- | ----------------------------- | ------------------------- |
-| `--stuic-book-page-width`  | `300px`                       | Width of a single page    |
-| `--stuic-book-page-height` | `400px`                       | Height of the book        |
-| `--stuic-book-perspective` | `1200px`                      | CSS perspective depth     |
-| `--stuic-book-duration`    | `600ms`                       | Flip animation duration   |
-| `--stuic-book-timing`      | `ease-in-out`                 | Animation timing function |
-| `--stuic-book-page-bg`     | `var(--stuic-color-surface)`  | Page background color     |
-| `--stuic-book-page-shadow` | `0 2px 16px rgba(0,0,0,0.15)` | Book shadow               |
-| `--stuic-book-radius`      | `var(--radius-sm)`            | Page border radius        |
-| `--stuic-book-area-fill-hover` | `rgba(0, 0, 0, 0.06)`    | Area hover highlight fill |
+| Variable                       | Default                       | Description               |
+| ------------------------------ | ----------------------------- | ------------------------- |
+| `--stuic-book-page-width`      | `300px`                       | Width of a single page    |
+| `--stuic-book-page-height`     | `400px`                       | Height of the book        |
+| `--stuic-book-perspective`     | `1200px`                      | CSS perspective depth     |
+| `--stuic-book-duration`        | `600ms`                       | Flip animation duration   |
+| `--stuic-book-timing`          | `ease-in-out`                 | Animation timing function |
+| `--stuic-book-page-bg`         | `var(--stuic-color-surface)`  | Page background color     |
+| `--stuic-book-page-shadow`     | `0 2px 16px rgba(0,0,0,0.15)` | Book shadow               |
+| `--stuic-book-radius`          | `var(--radius-sm)`            | Page border radius        |
+| `--stuic-book-area-fill-hover` | `rgba(0, 0, 0, 0.06)`         | Area hover highlight fill |

package/dist/components/Book/index.css

@@ -64,7 +64,8 @@
 		backface-visibility: hidden;
 		-webkit-backface-visibility: hidden;
 		background: var(--stuic-book-page-bg);
-		border-radius: 0 var(--stuic-book-radius, var(--stuic-radius)) var(--stuic-book-radius, var(--stuic-radius)) 0;
+		border-radius: 0 var(--stuic-book-radius, var(--stuic-radius))
+			var(--stuic-book-radius, var(--stuic-radius)) 0;
 		overflow: hidden;
 	}
 
@@ -82,7 +83,8 @@
 		-webkit-backface-visibility: hidden;
 		transform: rotateY(180deg);
 		background: var(--stuic-book-page-bg);
-		border-radius: var(--stuic-book-radius, var(--stuic-radius)) 0 0 var(--stuic-book-radius, var(--stuic-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/README.md

@@ -4,24 +4,24 @@ A flexible button component with semantic intents, visual variants, sizes, and o
 
 ## Props
 
-| Prop         | Type                                                               | Default   | Description                                       |
-| ------------ | ------------------------------------------------------------------ | --------- | ------------------------------------------------- |
-| `intent`     | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -         | Semantic color intent                             |
-| `variant`    | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"solid"` | Visual variant (how colors are applied)           |
-| `size`       | `"sm" \| "md" \| "lg" \| "xl"`                                     | `"md"`    | Button size                                       |
-| `muted`      | `boolean`                                                          | `false`   | Reduce emphasis (lower opacity)                   |
-| `raised`     | `boolean`                                                          | `false`   | 3D push effect                                    |
-| `unstyled`   | `boolean`                                                          | `false`   | Skip all default styling                          |
-| `href`       | `string`                                                           | -         | Render as anchor tag with this URL                |
-| `roleSwitch` | `boolean`                                                          | `false`   | Enable toggle/switch behavior                     |
-| `checked`    | `boolean`                                                          | `false`   | Toggle state when `roleSwitch` is true (bindable) |
-| `el`         | `HTMLElement`                                                      | -         | Element reference (bindable)                      |
-| `iconButton` | `boolean`                                                          | `false`   | Icon-only button (implies aspect1, adds CSS hook) |
-| `iconSwap`   | `[string \| Snippet, string \| Snippet]`                           | -         | Two icon states with swap animation (implies iconButton) |
-| `x`          | `boolean \| XProps`                                                | -         | Normalized "X" icon button shortcut (close/dismiss) |
-| `nav`        | `"prev" \| "next" \| ButtonNavProps`                               | -         | Normalized prev/next icon button shortcut (arrow by default; `x` wins on conflict) |
+| Prop         | Type                                                               | Default   | Description                                                                               |
+| ------------ | ------------------------------------------------------------------ | --------- | ----------------------------------------------------------------------------------------- |
+| `intent`     | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -         | Semantic color intent                                                                     |
+| `variant`    | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"solid"` | Visual variant (how colors are applied)                                                   |
+| `size`       | `"sm" \| "md" \| "lg" \| "xl"`                                     | `"md"`    | Button size                                                                               |
+| `muted`      | `boolean`                                                          | `false`   | Reduce emphasis (lower opacity)                                                           |
+| `raised`     | `boolean`                                                          | `false`   | 3D push effect                                                                            |
+| `unstyled`   | `boolean`                                                          | `false`   | Skip all default styling                                                                  |
+| `href`       | `string`                                                           | -         | Render as anchor tag with this URL                                                        |
+| `roleSwitch` | `boolean`                                                          | `false`   | Enable toggle/switch behavior                                                             |
+| `checked`    | `boolean`                                                          | `false`   | Toggle state when `roleSwitch` is true (bindable)                                         |
+| `el`         | `HTMLElement`                                                      | -         | Element reference (bindable)                                                              |
+| `iconButton` | `boolean`                                                          | `false`   | Icon-only button (implies aspect1, adds CSS hook)                                         |
+| `iconSwap`   | `[string \| Snippet, string \| Snippet]`                           | -         | Two icon states with swap animation (implies iconButton)                                  |
+| `x`          | `boolean \| XProps`                                                | -         | Normalized "X" icon button shortcut (close/dismiss)                                       |
+| `nav`        | `"prev" \| "next" \| ButtonNavProps`                               | -         | Normalized prev/next icon button shortcut (arrow by default; `x` wins on conflict)        |
 | `iconEdge`   | `"leading" \| "trailing"`                                          | -         | Trim icon-side padding to the y-padding (pill + edge-flush icon; pair with `roundedFull`) |
-| `class`      | `string`                                                           | -         | Additional CSS classes                            |
+| `class`      | `string`                                                           | -         | Additional CSS classes                                                                    |
 
 ## Snippet Props
 

package/dist/components/Card/Card.svelte

@@ -5,7 +5,10 @@
 
 	export type CardVariant = "vertical" | "horizontal";
 
-	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+	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 */
@@ -82,14 +85,22 @@
 
 	let _effectiveVariant = $derived.by(() => {
 		if (variant !== "horizontal" || !horizontalThreshold) return variant;
-		return _offsetWidth > 0 && _offsetWidth < horizontalThreshold ? "vertical" : "horizontal";
+		return _offsetWidth > 0 && _offsetWidth < horizontalThreshold
+			? "vertical"
+			: "horizontal";
 	});
 
 	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 _classImage = $derived(
+		unstyled ? classImageProp : twMerge("stuic-card-image", classImageProp)
+	);
+	let _classContent = $derived(
+		unstyled ? classContentProp : twMerge("stuic-card-content", classContentProp)
+	);
 	let _classBody = $derived(unstyled ? undefined : "stuic-card-body");
-	let _classFooter = $derived(unstyled ? classFooterProp : twMerge("stuic-card-footer", classFooterProp));
+	let _classFooter = $derived(
+		unstyled ? classFooterProp : twMerge("stuic-card-footer", classFooterProp)
+	);
 
 	let _isInteractive = $derived(!!(href || onclick));
 	let _hasImage = $derived(!!(image || renderImage));
@@ -123,13 +134,19 @@
 				{:else if _hasContent}
 					<div class={_classContent}>
 						{#if eyebrow}
-							<div class={unstyled ? undefined : "stuic-card-eyebrow"}><Thc thc={eyebrow} /></div>
+							<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>
+							<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>
+							<div class={unstyled ? undefined : "stuic-card-description"}>
+								<Thc thc={description} />
+							</div>
 						{/if}
 					</div>
 				{/if}

package/dist/components/Card/README.md

@@ -10,11 +10,7 @@ A flexible card component for displaying content in a contained, visually distin
 </script>
 
 <!-- Basic -->
-<Card
-	image="/photo.jpg"
-	title="Card Title"
-	description="A brief description."
-/>
+<Card image="/photo.jpg" title="Card Title" description="A brief description." />
 
 <!-- With eyebrow and footer actions -->
 <Card
@@ -55,63 +51,63 @@ A flexible card component for displaying content in a contained, visually distin
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `image` | `string` | - | Image URL for the top (vertical) or side (horizontal) area |
-| `imageAlt` | `string` | `""` | Alt text for the image |
-| `eyebrow` | `THC` | - | Small label above the title (category, date, tag) |
-| `title` | `THC` | - | Card title |
-| `description` | `THC` | - | Short description below the title |
-| `variant` | `"vertical" \| "horizontal"` | `"vertical"` | Layout variant |
-| `horizontalThreshold` | `number` | `480` | Width (px) below which horizontal auto-switches to vertical. Set 0 to disable. |
-| `href` | `string` | - | Renders card as `<a>` |
-| `onclick` | `(e: MouseEvent) => void` | - | Renders card as `<button>` |
-| `disabled` | `boolean` | `false` | Disabled state (reduced opacity, no interaction) |
-| `unstyled` | `boolean` | `false` | Skip all default styling |
-| `class` | `string` | - | Additional CSS classes for the card shell |
-| `classImage` | `string` | - | Additional CSS classes for the image container |
-| `classContent` | `string` | - | Additional CSS classes for the content area |
-| `classFooter` | `string` | - | Additional CSS classes for the footer |
-| `el` | `HTMLElement` | - | Bindable element reference |
+| Prop                  | Type                         | Default      | Description                                                                    |
+| --------------------- | ---------------------------- | ------------ | ------------------------------------------------------------------------------ |
+| `image`               | `string`                     | -            | Image URL for the top (vertical) or side (horizontal) area                     |
+| `imageAlt`            | `string`                     | `""`         | Alt text for the image                                                         |
+| `eyebrow`             | `THC`                        | -            | Small label above the title (category, date, tag)                              |
+| `title`               | `THC`                        | -            | Card title                                                                     |
+| `description`         | `THC`                        | -            | Short description below the title                                              |
+| `variant`             | `"vertical" \| "horizontal"` | `"vertical"` | Layout variant                                                                 |
+| `horizontalThreshold` | `number`                     | `480`        | Width (px) below which horizontal auto-switches to vertical. Set 0 to disable. |
+| `href`                | `string`                     | -            | Renders card as `<a>`                                                          |
+| `onclick`             | `(e: MouseEvent) => void`    | -            | Renders card as `<button>`                                                     |
+| `disabled`            | `boolean`                    | `false`      | Disabled state (reduced opacity, no interaction)                               |
+| `unstyled`            | `boolean`                    | `false`      | Skip all default styling                                                       |
+| `class`               | `string`                     | -            | Additional CSS classes for the card shell                                      |
+| `classImage`          | `string`                     | -            | Additional CSS classes for the image container                                 |
+| `classContent`        | `string`                     | -            | Additional CSS classes for the content area                                    |
+| `classFooter`         | `string`                     | -            | Additional CSS classes for the footer                                          |
+| `el`                  | `HTMLElement`                | -            | Bindable element reference                                                     |
 
 ## Snippets
 
-| Snippet | Parameters | Description |
-|---------|------------|-------------|
-| `children` | - | Overrides the entire card body |
-| `renderImage` | `{ image, imageAlt }` | Overrides the image area |
-| `renderBadge` | - | Badge/overlay positioned over the image |
-| `renderContent` | `{ eyebrow?, title?, description? }` | Overrides the content area |
-| `renderFooter` | - | Footer area (action buttons, metadata) |
+| Snippet         | Parameters                           | Description                             |
+| --------------- | ------------------------------------ | --------------------------------------- |
+| `children`      | -                                    | Overrides the entire card body          |
+| `renderImage`   | `{ image, imageAlt }`                | Overrides the image area                |
+| `renderBadge`   | -                                    | Badge/overlay positioned over the image |
+| `renderContent` | `{ eyebrow?, title?, description? }` | Overrides the content area              |
+| `renderFooter`  | -                                    | Footer area (action buttons, metadata)  |
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--stuic-card-bg` | `var(--stuic-color-card, var(--stuic-color-background))` | Background color |
-| `--stuic-card-bg-hover` | `var(--stuic-color-card-hover, var(--stuic-color-muted))` | Hover background (interactive only) |
-| `--stuic-card-border-width` | `1px` | Border width |
-| `--stuic-card-border` | `var(--stuic-color-border)` | Border color |
-| `--stuic-card-border-hover` | `var(--stuic-color-border-hover)` | Hover border color |
-| `--stuic-card-radius` | `var(--radius-lg)` | Border radius |
-| `--stuic-card-shadow` | `var(--shadow-sm)` | Box shadow |
-| `--stuic-card-shadow-hover` | `var(--shadow-md)` | Hover box shadow |
-| `--stuic-card-transition` | `150ms` | Transition duration |
-| `--stuic-card-padding` | `1rem` | Content and footer padding |
-| `--stuic-card-content-gap` | `0.5rem` | Gap between content elements |
-| `--stuic-card-image-aspect-ratio` | `16 / 9` | Image aspect ratio (vertical only) |
-| `--stuic-card-image-object-fit` | `cover` | Image object-fit |
-| `--stuic-card-image-width-horizontal` | `40%` | Image width in horizontal variant |
-| `--stuic-card-eyebrow-font-size` | `var(--text-xs)` | Eyebrow font size |
-| `--stuic-card-eyebrow-text` | `var(--stuic-color-muted-foreground)` | Eyebrow text color |
-| `--stuic-card-title-font-size` | `var(--text-lg)` | Title font size |
-| `--stuic-card-title-font-weight` | `var(--font-weight-semibold)` | Title font weight |
-| `--stuic-card-title-text` | `var(--stuic-color-foreground)` | Title text color |
-| `--stuic-card-description-font-size` | `var(--text-sm)` | Description font size |
-| `--stuic-card-description-text` | `var(--stuic-color-muted-foreground)` | Description text color |
-| `--stuic-card-ring-width` | `3px` | Focus ring width |
-| `--stuic-card-ring-color` | `var(--stuic-color-ring)` | Focus ring color |
-| `--stuic-card-opacity-disabled` | `0.5` | Disabled opacity |
+| Variable                              | Default                                                   | Description                         |
+| ------------------------------------- | --------------------------------------------------------- | ----------------------------------- |
+| `--stuic-card-bg`                     | `var(--stuic-color-card, var(--stuic-color-background))`  | Background color                    |
+| `--stuic-card-bg-hover`               | `var(--stuic-color-card-hover, var(--stuic-color-muted))` | Hover background (interactive only) |
+| `--stuic-card-border-width`           | `1px`                                                     | Border width                        |
+| `--stuic-card-border`                 | `var(--stuic-color-border)`                               | Border color                        |
+| `--stuic-card-border-hover`           | `var(--stuic-color-border-hover)`                         | Hover border color                  |
+| `--stuic-card-radius`                 | `var(--radius-lg)`                                        | Border radius                       |
+| `--stuic-card-shadow`                 | `var(--shadow-sm)`                                        | Box shadow                          |
+| `--stuic-card-shadow-hover`           | `var(--shadow-md)`                                        | Hover box shadow                    |
+| `--stuic-card-transition`             | `150ms`                                                   | Transition duration                 |
+| `--stuic-card-padding`                | `1rem`                                                    | Content and footer padding          |
+| `--stuic-card-content-gap`            | `0.5rem`                                                  | Gap between content elements        |
+| `--stuic-card-image-aspect-ratio`     | `16 / 9`                                                  | Image aspect ratio (vertical only)  |
+| `--stuic-card-image-object-fit`       | `cover`                                                   | Image object-fit                    |
+| `--stuic-card-image-width-horizontal` | `40%`                                                     | Image width in horizontal variant   |
+| `--stuic-card-eyebrow-font-size`      | `var(--text-xs)`                                          | Eyebrow font size                   |
+| `--stuic-card-eyebrow-text`           | `var(--stuic-color-muted-foreground)`                     | Eyebrow text color                  |
+| `--stuic-card-title-font-size`        | `var(--text-lg)`                                          | Title font size                     |
+| `--stuic-card-title-font-weight`      | `var(--font-weight-semibold)`                             | Title font weight                   |
+| `--stuic-card-title-text`             | `var(--stuic-color-foreground)`                           | Title text color                    |
+| `--stuic-card-description-font-size`  | `var(--text-sm)`                                          | Description font size               |
+| `--stuic-card-description-text`       | `var(--stuic-color-muted-foreground)`                     | Description text color              |
+| `--stuic-card-ring-width`             | `3px`                                                     | Focus ring width                    |
+| `--stuic-card-ring-color`             | `var(--stuic-color-ring)`                                 | Focus ring color                    |
+| `--stuic-card-opacity-disabled`       | `0.5`                                                     | Disabled opacity                    |
 
 ## Notes