@marianmeres/stuic 3.1.0 → 3.2.0

package/dist/components/Carousel/Carousel.svelte

@@ -0,0 +1,344 @@
+<script lang="ts" module>
+	import type { ItemCollection as ItemCollectionBase } from "@marianmeres/item-collection";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { THC } from "../Thc/index.js";
+
+	export interface CarouselItem {
+		id: string | number;
+		content: THC;
+		disabled?: boolean;
+		data?: Record<string, any>;
+	}
+
+	interface ItemCollectionItem extends CarouselItem {}
+	export interface ItemColl extends ItemCollectionBase<ItemCollectionItem> {}
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+		/** Array of carousel items */
+		items: CarouselItem[];
+
+		/** Number of items visible per view (default: 1) */
+		itemsPerView?: number;
+
+		/** Percentage of next item to show as peek hint (0-50) */
+		peekPercent?: number;
+
+		/** Gap between items in pixels or CSS value */
+		gap?: number | string;
+
+		/** Enable/disable active item tracking */
+		trackActive?: boolean;
+
+		/** Sync active item based on scroll position (requires trackActive) */
+		syncActiveOnScroll?: boolean;
+
+		/** Currently active item index (bindable) */
+		activeIndex?: number;
+
+		/** Currently active item value/id (bindable) */
+		value?: string | number;
+
+		/** Enable scroll snap behavior (default: true) */
+		snap?: boolean;
+
+		/** Snap alignment: start, center, end (default: start) */
+		snapAlign?: "start" | "center" | "end";
+
+		/** Enable keyboard navigation (default: true) */
+		keyboard?: boolean;
+
+		/** Allow cycling from last to first and vice versa */
+		loop?: boolean;
+
+		/** Scroll behavior for programmatic navigation (default: smooth) */
+		scrollBehavior?: ScrollBehavior;
+
+		/** Show scrollbar on hover (default: true). Set to false when using navigation buttons */
+		scrollbar?: boolean;
+
+		/** Custom class for container */
+		class?: string;
+
+		/** Custom class for the scrollable track */
+		classTrack?: string;
+
+		/** Custom class for each item wrapper */
+		classItem?: string;
+
+		/** Custom class for active item */
+		classItemActive?: string;
+
+		/** Skip all default styling */
+		unstyled?: boolean;
+
+		/** Bindable element reference */
+		el?: HTMLDivElement;
+
+		/** Callback when active item changes */
+		onActiveChange?: (item: CarouselItem, index: number) => void;
+
+		/** Custom render snippet for items (alternative to THC) */
+		renderItem?: Snippet<[{ item: CarouselItem; index: number; active: boolean }]>;
+	}
+</script>
+
+<script lang="ts">
+	import { ItemCollection } from "@marianmeres/item-collection";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+
+	let {
+		items,
+		itemsPerView = 1,
+		peekPercent = 0,
+		gap,
+		trackActive = false,
+		syncActiveOnScroll = false,
+		activeIndex = $bindable(0),
+		value = $bindable(),
+		snap = true,
+		snapAlign = "start",
+		keyboard = true,
+		loop = false,
+		scrollBehavior = "smooth",
+		scrollbar = true,
+		class: classProp,
+		classTrack,
+		classItem,
+		classItemActive,
+		unstyled = false,
+		el = $bindable(),
+		onActiveChange,
+		renderItem,
+		...rest
+	}: Props = $props();
+
+	// Internal refs
+	let trackEl: HTMLDivElement | undefined = $state();
+	let itemEls: Record<string | number, HTMLDivElement> = $state({});
+
+	// ItemCollection for managing items and active state
+	const coll: ItemColl = $derived.by(() => {
+		const out = new ItemCollection(
+			items.map((item) => ({ ...item })),
+			{
+				idPropName: "id",
+				allowNextPrevCycle: loop,
+			}
+		);
+
+		// Set initial active based on value or activeIndex
+		if (value !== undefined) {
+			const idx = out.items.findIndex((item) => item.id === value);
+			if (idx > -1) out.setActiveIndex(idx);
+		} else if (activeIndex !== undefined && activeIndex >= 0) {
+			out.setActiveIndex(activeIndex);
+		}
+
+		return out;
+	});
+
+	// Sync collection changes back to bindable props
+	$effect(() => {
+		return coll.subscribe((c) => {
+			if (trackActive) {
+				value = c.active?.id;
+				activeIndex = c.activeIndex ?? 0;
+				if (c.active && c.activeIndex !== undefined) {
+					onActiveChange?.(c.active, c.activeIndex);
+				}
+			}
+		});
+	});
+
+	// Flag to prevent scroll loops (when programmatic scroll triggers observer)
+	let isScrollingProgrammatically = false;
+
+	// Track active item based on scroll position using IntersectionObserver
+	$effect(() => {
+		if (!trackActive || !syncActiveOnScroll || !trackEl) return;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (isScrollingProgrammatically) return;
+
+				// Find the entry with highest intersection ratio
+				let mostVisible: { id: string | number; ratio: number } | null = null;
+
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						const id = entry.target.getAttribute("data-id");
+						if (id && (!mostVisible || entry.intersectionRatio > mostVisible.ratio)) {
+							// Parse id back to number if it was originally a number
+							const parsedId = coll.items.find((i) => String(i.id) === id)?.id;
+							if (parsedId !== undefined) {
+								mostVisible = { id: parsedId, ratio: entry.intersectionRatio };
+							}
+						}
+					}
+				}
+
+				if (mostVisible && mostVisible.id !== coll.active?.id) {
+					const item = coll.items.find((i) => i.id === mostVisible!.id);
+					if (item) {
+						coll.setActive(item);
+					}
+				}
+			},
+			{
+				root: trackEl,
+				threshold: [0.5, 0.75, 1.0],
+			}
+		);
+
+		// Observe all item elements
+		for (const id in itemEls) {
+			if (itemEls[id]) {
+				observer.observe(itemEls[id]);
+			}
+		}
+
+		return () => observer.disconnect();
+	});
+
+	// Scroll active item into view when active changes programmatically
+	function scrollActiveIntoView() {
+		// Set flag to prevent IntersectionObserver from re-triggering
+		isScrollingProgrammatically = true;
+
+		// Use setTimeout to allow the ItemCollection state to update first
+		setTimeout(() => {
+			const activeItem = coll.active;
+			if (activeItem && itemEls[activeItem.id]) {
+				itemEls[activeItem.id]?.scrollIntoView({
+					behavior: scrollBehavior,
+					block: "nearest",
+					inline: snapAlign === "center" ? "center" : snapAlign === "end" ? "end" : "start",
+				});
+			}
+
+			// Reset flag after scroll animation completes
+			setTimeout(() => {
+				isScrollingProgrammatically = false;
+			}, scrollBehavior === "instant" ? 0 : 300);
+		}, 0);
+	}
+
+	// Keyboard navigation handler
+	function handleKeydown(e: KeyboardEvent) {
+		if (!keyboard) return;
+
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault();
+			coll.setActiveNext();
+			scrollActiveIntoView();
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault();
+			coll.setActivePrevious();
+			scrollActiveIntoView();
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			coll.setActiveFirst();
+			scrollActiveIntoView();
+		} else if (e.key === "End") {
+			e.preventDefault();
+			coll.setActiveLast();
+			scrollActiveIntoView();
+		}
+	}
+
+	// Public API methods
+	export function goTo(index: number) {
+		coll.setActiveIndex(index);
+		scrollActiveIntoView();
+	}
+
+	export function goToId(id: string | number) {
+		const item = coll.items.find((i) => i.id === id);
+		if (item) {
+			coll.setActive(item);
+			scrollActiveIntoView();
+		}
+	}
+
+	export function next() {
+		coll.setActiveNext();
+		scrollActiveIntoView();
+	}
+
+	export function previous() {
+		coll.setActivePrevious();
+		scrollActiveIntoView();
+	}
+
+	export function getCollection() {
+		return coll;
+	}
+
+	// Compute inline styles for gap and peek
+	let trackStyle = $derived.by(() => {
+		const styles: string[] = [];
+		if (gap !== undefined) {
+			styles.push(`--stuic-carousel-gap: ${typeof gap === "number" ? `${gap}px` : gap}`);
+		}
+		if (peekPercent > 0) {
+			styles.push(`--stuic-carousel-peek-percent: ${peekPercent}%`);
+		}
+		return styles.join("; ");
+	});
+
+	// Helper to check if item is active
+	function isItemActive(index: number): boolean {
+		return trackActive && coll.activeIndex === index;
+	}
+</script>
+
+{#if coll.size}
+	<div
+		bind:this={el}
+		class={twMerge(!unstyled && "stuic-carousel", classProp)}
+		data-items-per-view={!unstyled ? itemsPerView : undefined}
+		{...rest}
+	>
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			bind:this={trackEl}
+			class={twMerge(!unstyled && "stuic-carousel-track", classTrack)}
+			style={trackStyle || undefined}
+			tabindex={keyboard ? 0 : undefined}
+			role="region"
+			aria-label="Carousel"
+			aria-roledescription="carousel"
+			data-snap={!unstyled && snap ? "true" : undefined}
+			data-snap-align={!unstyled && snap ? snapAlign : undefined}
+			data-scrollbar={!unstyled && scrollbar ? "true" : undefined}
+			onkeydown={handleKeydown}
+		>
+			{#each coll.items as item, i (item.id)}
+				{@const active = isItemActive(i)}
+				<div
+					bind:this={itemEls[item.id]}
+					data-id={item.id}
+					class={twMerge(
+						!unstyled && "stuic-carousel-item",
+						classItem,
+						active && classItemActive
+					)}
+					role="group"
+					aria-roledescription="slide"
+					aria-label={`Slide ${i + 1} of ${coll.size}`}
+					data-active={active ? "true" : undefined}
+					data-disabled={item.disabled ? "true" : undefined}
+				>
+					{#if renderItem}
+						{@render renderItem({ item, index: i, active })}
+					{:else}
+						<Thc thc={item.content} />
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,73 @@
+import type { ItemCollection as ItemCollectionBase } from "@marianmeres/item-collection";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { THC } from "../Thc/index.js";
+export interface CarouselItem {
+    id: string | number;
+    content: THC;
+    disabled?: boolean;
+    data?: Record<string, any>;
+}
+interface ItemCollectionItem extends CarouselItem {
+}
+export interface ItemColl extends ItemCollectionBase<ItemCollectionItem> {
+}
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Array of carousel items */
+    items: CarouselItem[];
+    /** Number of items visible per view (default: 1) */
+    itemsPerView?: number;
+    /** Percentage of next item to show as peek hint (0-50) */
+    peekPercent?: number;
+    /** Gap between items in pixels or CSS value */
+    gap?: number | string;
+    /** Enable/disable active item tracking */
+    trackActive?: boolean;
+    /** Sync active item based on scroll position (requires trackActive) */
+    syncActiveOnScroll?: boolean;
+    /** Currently active item index (bindable) */
+    activeIndex?: number;
+    /** Currently active item value/id (bindable) */
+    value?: string | number;
+    /** Enable scroll snap behavior (default: true) */
+    snap?: boolean;
+    /** Snap alignment: start, center, end (default: start) */
+    snapAlign?: "start" | "center" | "end";
+    /** Enable keyboard navigation (default: true) */
+    keyboard?: boolean;
+    /** Allow cycling from last to first and vice versa */
+    loop?: boolean;
+    /** Scroll behavior for programmatic navigation (default: smooth) */
+    scrollBehavior?: ScrollBehavior;
+    /** Show scrollbar on hover (default: true). Set to false when using navigation buttons */
+    scrollbar?: boolean;
+    /** Custom class for container */
+    class?: string;
+    /** Custom class for the scrollable track */
+    classTrack?: string;
+    /** Custom class for each item wrapper */
+    classItem?: string;
+    /** Custom class for active item */
+    classItemActive?: string;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Bindable element reference */
+    el?: HTMLDivElement;
+    /** Callback when active item changes */
+    onActiveChange?: (item: CarouselItem, index: number) => void;
+    /** Custom render snippet for items (alternative to THC) */
+    renderItem?: Snippet<[{
+        item: CarouselItem;
+        index: number;
+        active: boolean;
+    }]>;
+}
+declare const Carousel: import("svelte").Component<Props, {
+    goTo: (index: number) => void;
+    goToId: (id: string | number) => void;
+    next: () => void;
+    previous: () => void;
+    getCollection: () => ItemColl;
+}, "value" | "el" | "activeIndex">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/Carousel/README.md

@@ -0,0 +1,134 @@
+# Carousel
+
+A horizontally scrollable carousel component with optional active item tracking,
+keyboard navigation, snap scrolling, and flexible content rendering via THC.
+
+## Props
+
+| Prop             | Type                                                           | Default    | Description                                     |
+| ---------------- | -------------------------------------------------------------- | ---------- | ----------------------------------------------- |
+| `items`          | `CarouselItem[]`                                               | required   | Array of carousel items                         |
+| `itemsPerView`   | `number`                                                       | `1`        | Number of items visible per view                |
+| `peekPercent`    | `number`                                                       | `0`        | Percentage of next item to show (0-50)          |
+| `gap`            | `number \| string`                                             | -          | Gap between items                               |
+| `trackActive`    | `boolean`                                                      | `false`    | Enable active item tracking                     |
+| `activeIndex`    | `number`                                                       | `0`        | Active item index (bindable)                    |
+| `value`          | `string \| number`                                             | -          | Active item id (bindable)                       |
+| `snap`           | `boolean`                                                      | `true`     | Enable scroll snap                              |
+| `snapAlign`      | `"start" \| "center" \| "end"`                                 | `"start"`  | Snap alignment                                  |
+| `keyboard`       | `boolean`                                                      | `true`     | Enable keyboard navigation                      |
+| `loop`           | `boolean`                                                      | `false`    | Loop navigation                                 |
+| `scrollBehavior` | `ScrollBehavior`                                               | `"smooth"` | Scroll behavior                                 |
+| `class`          | `string`                                                       | -          | Custom class for container                      |
+| `classTrack`     | `string`                                                       | -          | Custom class for scroll track                   |
+| `classItem`      | `string`                                                       | -          | Custom class for items                          |
+| `classItemActive`| `string`                                                       | -          | Custom class for active item                    |
+| `unstyled`       | `boolean`                                                      | `false`    | Skip default styling                            |
+| `el`             | `HTMLDivElement`                                               | -          | Element reference (bindable)                    |
+| `onActiveChange` | `(item: CarouselItem, index: number) => void`                  | -          | Callback when active changes                    |
+| `renderItem`     | `Snippet<[{ item: CarouselItem; index: number; active: boolean }]>` | - | Custom item render snippet                      |
+
+## CarouselItem Interface
+
+```typescript
+interface CarouselItem {
+	id: string | number;
+	content: THC; // Text, HTML, Component, or Snippet
+	disabled?: boolean;
+	data?: Record<string, any>; // Custom data for renderItem
+}
+```
+
+## Methods
+
+| Method       | Description                    |
+| ------------ | ------------------------------ |
+| `goTo(index)`| Navigate to item at index      |
+| `goToId(id)` | Navigate to item with id       |
+| `next()`     | Navigate to next item          |
+| `previous()` | Navigate to previous item      |
+
+## Usage
+
+### Basic
+
+```svelte
+<Carousel
+	items={[
+		{ id: 1, content: "Slide 1" },
+		{ id: 2, content: "Slide 2" },
+		{ id: 3, content: "Slide 3" },
+	]}
+/>
+```
+
+### Multiple Items Per View with Peek
+
+```svelte
+<Carousel items={items} itemsPerView={3} peekPercent={10} gap={16} />
+```
+
+### With Active Tracking
+
+```svelte
+<script>
+	let activeIndex = $state(0);
+</script>
+
+<Carousel
+	items={items}
+	trackActive
+	bind:activeIndex
+	onActiveChange={(item, i) => console.log('Active:', item)}
+/>
+```
+
+### Custom Rendering
+
+```svelte
+<Carousel items={items}>
+	{#snippet renderItem({ item, index, active })}
+		<div class="card" class:active>
+			<h3>{item.content}</h3>
+			<p>{item.data?.description}</p>
+		</div>
+	{/snippet}
+</Carousel>
+```
+
+### Programmatic Navigation
+
+```svelte
+<script>
+	let carousel: Carousel;
+</script>
+
+<Carousel bind:this={carousel} items={items} trackActive />
+
+<button onclick={() => carousel.previous()}>Previous</button>
+<button onclick={() => carousel.next()}>Next</button>
+<button onclick={() => carousel.goTo(0)}>First</button>
+```
+
+## CSS Variables
+
+| Variable                                | Default                    | Description             |
+| --------------------------------------- | -------------------------- | ----------------------- |
+| `--stuic-carousel-gap`                  | `1rem`                     | Gap between items       |
+| `--stuic-carousel-peek-percent`         | `0%`                       | Peek percentage         |
+| `--stuic-carousel-item-radius`          | `--radius-md`              | Item border radius      |
+| `--stuic-carousel-item-bg`              | `transparent`              | Item background         |
+| `--stuic-carousel-item-bg-active`       | `transparent`              | Active item background  |
+| `--stuic-carousel-item-border`          | `transparent`              | Item border color       |
+| `--stuic-carousel-item-border-active`   | `--stuic-color-primary`    | Active border           |
+| `--stuic-carousel-item-border-width`    | `0`                        | Item border width       |
+| `--stuic-carousel-item-border-width-active` | `2px`                  | Active border width     |
+| `--stuic-carousel-ring-width`           | `3px`                      | Focus ring width        |
+| `--stuic-carousel-ring-color`           | `--stuic-color-ring`       | Focus ring color        |
+
+## Keyboard Navigation
+
+- **ArrowLeft/ArrowRight**: Previous/Next item
+- **ArrowUp/ArrowDown**: Previous/Next item (alternative)
+- **Home**: First item
+- **End**: Last item

package/dist/components/Carousel/index.css

@@ -0,0 +1,206 @@
+/* ============================================================================
+   CAROUSEL COMPONENT TOKENS
+   Override globally: :root { --stuic-carousel-gap: 2rem; }
+   Override locally:  <Carousel style="--stuic-carousel-gap: 2rem;">
+   ============================================================================ */
+
+:root {
+	/* Layout tokens */
+	--stuic-carousel-gap: 1rem;
+	--stuic-carousel-padding: 0;
+	--stuic-carousel-peek-percent: 0%;
+
+	/* Item tokens */
+	--stuic-carousel-item-radius: var(--radius-md);
+	--stuic-carousel-item-bg: transparent;
+	--stuic-carousel-item-bg-active: transparent;
+	--stuic-carousel-item-border: transparent;
+	--stuic-carousel-item-border-active: var(--stuic-color-primary);
+	--stuic-carousel-item-border-width: 1px;
+	--stuic-carousel-item-border-width-active: 1px;
+
+	/* Scroll behavior */
+	--stuic-carousel-scroll-padding: 0;
+	--stuic-carousel-snap-align: start;
+
+	/* Focus ring */
+	--stuic-carousel-ring-width: 2px;
+	--stuic-carousel-ring-color: var(--stuic-color-ring);
+
+	/* Transition */
+	--stuic-carousel-transition: 150ms;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-carousel {
+		position: relative;
+		width: 100%;
+		overflow: visible;
+	}
+
+	.stuic-carousel-track {
+		display: flex;
+		gap: var(--stuic-carousel-gap);
+		overflow-x: auto;
+		overflow-y: hidden;
+		scroll-padding: var(--stuic-carousel-scroll-padding);
+
+		/* Hide scrollbar by default */
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+
+		/* Mobile-friendly */
+		-webkit-overflow-scrolling: touch;
+		touch-action: pan-x pan-y;
+	}
+
+	/* Hide scrollbar for non-scrollbar mode */
+	.stuic-carousel-track::-webkit-scrollbar {
+		display: none;
+	}
+
+	/* Always show scrollbar space to prevent height jump, but thumb invisible until hover */
+	.stuic-carousel-track[data-scrollbar="true"] {
+		scrollbar-width: thin;
+		scrollbar-color: transparent transparent;
+	}
+
+	.stuic-carousel-track[data-scrollbar="true"]::-webkit-scrollbar {
+		display: block;
+		height: 8px;
+	}
+
+	.stuic-carousel-track[data-scrollbar="true"]::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.stuic-carousel-track[data-scrollbar="true"]::-webkit-scrollbar-thumb {
+		background: transparent;
+		border-radius: 4px;
+		transition: background 150ms;
+	}
+
+	/* Show scrollbar thumb on hover */
+	.stuic-carousel-track[data-scrollbar="true"]:hover {
+		scrollbar-color: var(--stuic-color-border, #ccc) transparent;
+	}
+
+	.stuic-carousel-track[data-scrollbar="true"]:hover::-webkit-scrollbar-thumb {
+		background: var(--stuic-color-border, #ccc);
+	}
+
+	.stuic-carousel-track[data-scrollbar="true"]:hover::-webkit-scrollbar-thumb:hover {
+		background: var(--stuic-color-border-hover, #999);
+	}
+
+	/* Snap scrolling */
+	.stuic-carousel-track[data-snap="true"] {
+		scroll-snap-type: x mandatory;
+	}
+
+	/* Focus styles for keyboard navigation */
+	.stuic-carousel-track:focus {
+		outline: none;
+	}
+
+	.stuic-carousel-track:focus-visible {
+		outline: var(--stuic-carousel-ring-width) solid var(--stuic-carousel-ring-color);
+		outline-offset: 2px;
+	}
+
+	/* ============================================================================
+	   ITEM STYLES
+	   ============================================================================ */
+
+	.stuic-carousel-item {
+		flex: 0 0 auto;
+		/* Width calculated via CSS custom property */
+		width: var(--_item-width, 100%);
+		min-width: 0;
+
+		border-radius: var(--stuic-carousel-item-radius);
+		background: var(--stuic-carousel-item-bg);
+		border: var(--stuic-carousel-item-border-width) solid
+			var(--stuic-carousel-item-border);
+
+		transition:
+			border-color var(--stuic-carousel-transition),
+			background var(--stuic-carousel-transition),
+			border-width var(--stuic-carousel-transition);
+	}
+
+	/* Snap alignment */
+	.stuic-carousel-track[data-snap="true"] .stuic-carousel-item {
+		scroll-snap-align: var(--stuic-carousel-snap-align, start);
+	}
+
+	.stuic-carousel-track[data-snap-align="center"] .stuic-carousel-item {
+		scroll-snap-align: center;
+	}
+
+	.stuic-carousel-track[data-snap-align="end"] .stuic-carousel-item {
+		scroll-snap-align: end;
+	}
+
+	/* Active item */
+	.stuic-carousel-item[data-active="true"] {
+		background: var(--stuic-carousel-item-bg-active);
+		border-color: var(--stuic-carousel-item-border-active);
+		border-width: var(--stuic-carousel-item-border-width-active);
+	}
+
+	/* Disabled item */
+	.stuic-carousel-item[data-disabled="true"] {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	/* ============================================================================
+	   ITEMS PER VIEW CALCULATIONS
+	   Width = (100% - (N-1)*gap - peek) / N
+	   ============================================================================ */
+
+	/* 1 item per view (default) */
+	.stuic-carousel[data-items-per-view="1"] .stuic-carousel-item {
+		--_item-width: calc(100% - var(--stuic-carousel-peek-percent, 0%));
+	}
+
+	/* 2 items per view */
+	.stuic-carousel[data-items-per-view="2"] .stuic-carousel-item {
+		--_item-width: calc(
+			(100% - var(--stuic-carousel-gap) - var(--stuic-carousel-peek-percent, 0%)) / 2
+		);
+	}
+
+	/* 3 items per view */
+	.stuic-carousel[data-items-per-view="3"] .stuic-carousel-item {
+		--_item-width: calc(
+			(100% - 2 * var(--stuic-carousel-gap) - var(--stuic-carousel-peek-percent, 0%)) / 3
+		);
+	}
+
+	/* 4 items per view */
+	.stuic-carousel[data-items-per-view="4"] .stuic-carousel-item {
+		--_item-width: calc(
+			(100% - 3 * var(--stuic-carousel-gap) - var(--stuic-carousel-peek-percent, 0%)) / 4
+		);
+	}
+
+	/* 5 items per view */
+	.stuic-carousel[data-items-per-view="5"] .stuic-carousel-item {
+		--_item-width: calc(
+			(100% - 4 * var(--stuic-carousel-gap) - var(--stuic-carousel-peek-percent, 0%)) / 5
+		);
+	}
+
+	/* 6 items per view */
+	.stuic-carousel[data-items-per-view="6"] .stuic-carousel-item {
+		--_item-width: calc(
+			(100% - 5 * var(--stuic-carousel-gap) - var(--stuic-carousel-peek-percent, 0%)) / 6
+		);
+	}
+}

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

@@ -0,0 +1 @@
+export { default as Carousel, type Props as CarouselProps, type CarouselItem, type ItemColl as CarouselItemCollection, } from "./Carousel.svelte";

package/dist/components/Carousel/index.js

@@ -0,0 +1 @@
+export { default as Carousel, } from "./Carousel.svelte";

package/dist/components/Input/FieldInputLocalized.svelte

@@ -243,32 +243,13 @@
 		setValidationResult,
 	});
 
-	const INPUT_CLS = [
-		"w-full",
-		// "rounded bg-neutral-50 dark:bg-neutral-800",
-		// "focus:outline-none focus:ring-0",
-		// "border border-neutral-300 dark:border-neutral-600",
-		// "focus:border-neutral-400 focus:dark:border-neutral-500",
-		// "focus-visible:outline-none focus-visible:ring-0",
-	].join(" ");
-
-	const INPUT_EXPANDED_CLS = [
-		// "w-full",
-		// "rounded bg-neutral-50 dark:bg-neutral-800",
-		// "focus:outline-none focus:ring-0",
-		"border border-neutral-300 dark:border-neutral-600",
-		// "focus:border-neutral-400 focus:dark:border-neutral-500",
-		// "focus-visible:outline-none focus-visible:ring-0",
-	].join(" ");
+	const INPUT_CLS = "w-full";
 
 	const BTN_CLS = [
+		"toggle-btn",
 		"px-2 rounded-r block",
-		"opacity-60 hover:opacity-100",
 		"min-w-[44px] min-h-[44px]",
 		"flex items-center justify-center",
-		"hover:bg-neutral-200 dark:hover:bg-neutral-600",
-		// "focus-visible:outline-neutral-400",
-		// "disabled:opacity-25 disabled:cursor-not-allowed disabled:hover:bg-transparent",
 	].join(" ");
 </script>
 
@@ -294,19 +275,14 @@
 	{validation}
 	{style}
 >
-	<div class="w-full flex">
+	<div class="stuic-input-localized w-full flex">
 		<div class="flex-1">
 			{#if !expanded}
 				{#if multiline}
 					<textarea
 						value={entries.find((e) => e.language === _defaultLanguage)?.value ?? ""}
 						oninput={(e) => updateEntry(_defaultLanguage, e.currentTarget.value)}
-						class={twMerge(
-							INPUT_CLS,
-							expanded && INPUT_EXPANDED_CLS,
-							"min-h-16",
-							classLanguageInput
-						)}
+						class={twMerge(INPUT_CLS, "min-h-16", classLanguageInput)}
 						{disabled}
 						{tabindex}
 						{placeholder}
@@ -320,30 +296,31 @@
 						type="text"
 						value={entries.find((e) => e.language === _defaultLanguage)?.value ?? ""}
 						oninput={(e) => updateEntry(_defaultLanguage, e.currentTarget.value)}
-						class={twMerge(INPUT_CLS, expanded && INPUT_EXPANDED_CLS, classLanguageInput)}
+						class={twMerge(INPUT_CLS, classLanguageInput)}
 						{disabled}
 						{tabindex}
 						{placeholder}
 					/>
 				{/if}
 			{:else}
-				<div class="">
+				<div class="expanded-wrap">
 					<!-- Expanded: all language rows -->
 					{#each sortedLanguages as lang, idx (lang)}
 						<div
 							class={twMerge(
 								"flex-1 flex gap-2 items-center pl-2",
-								idx > 0 && "border-t border-neutral-200 dark:border-neutral-600",
+								idx > 0 && "entry-divider",
 								classEntry
 							)}
 						>
 							<div
 								class={twMerge(
+									"lang-label",
 									"shrink-0 min-w-8",
 									"flex",
-									"text-sm font-medium opacity-60 uppercase",
+									"text-sm font-medium uppercase",
 									lang === _defaultLanguage &&
-										"after:content-['*'] after:opacity-40 after:pl-0.5",
+										"lang-label-default after:content-['*'] after:pl-0.5",
 									classLanguageLabel
 								)}
 							>

package/dist/components/Input/index.css

@@ -59,6 +59,13 @@
 	--stuic-checkbox-checked-bg: var(--stuic-input-accent);
 	--stuic-checkbox-checked-border: var(--stuic-input-accent);
 
+	/* FieldInputLocalized specific */
+	--stuic-input-localized-divider: var(--stuic-color-border);
+	--stuic-input-localized-toggle-text: var(--stuic-color-muted-foreground);
+	--stuic-input-localized-toggle-text-hover: var(--stuic-color-foreground);
+	--stuic-input-localized-toggle-hover-bg: var(--stuic-color-muted);
+	--stuic-input-localized-label-text: var(--stuic-color-muted-foreground);
+
 	/* FieldOptions specific */
 	--stuic-field-options-divider: var(--stuic-color-border);
 	--stuic-field-options-control-text: var(--stuic-color-muted-foreground);
@@ -217,7 +224,11 @@
 	.stuic-input .input-wrap.invalid:focus-within {
 		border-color: var(--stuic-input-accent-error);
 		box-shadow: 0 0 0 var(--stuic-input-ring-width)
-			color-mix(in srgb, var(--stuic-input-accent-error) 20%, var(--stuic-color-background));
+			color-mix(
+				in srgb,
+				var(--stuic-input-accent-error) 20%,
+				var(--stuic-color-background)
+			);
 	}
 
 	/* Disabled state */
@@ -541,4 +552,37 @@
 	.stuic-field-options-icon--selected {
 		opacity: 1;
 	}
+
+	/* ============================================================================
+	   FIELD INPUT LOCALIZED
+	   ============================================================================ */
+
+	.stuic-input-localized .entry-divider {
+		border-top: 1px solid var(--stuic-input-localized-divider);
+	}
+
+	.stuic-input-localized .toggle-btn {
+		color: var(--stuic-input-localized-toggle-text);
+		transition:
+			background var(--stuic-input-transition),
+			color var(--stuic-input-transition);
+	}
+
+	.stuic-input-localized .toggle-btn:hover:not(:disabled) {
+		color: var(--stuic-input-localized-toggle-text-hover);
+		background: var(--stuic-input-localized-toggle-hover-bg);
+	}
+
+	.stuic-input-localized .lang-label {
+		color: var(--stuic-input-localized-label-text);
+	}
+
+	.stuic-input-localized .lang-label-default::after {
+		opacity: 0.5;
+	}
+
+	.stuic-input-localized .expanded-wrap {
+		border-right: 1px solid var(--stuic-input-localized-divider);
+		/* border-radius: var(--stuic-input-radius); */
+	}
 }

package/dist/index.css

@@ -30,6 +30,7 @@ In practice:
 @import "./components/Button/index.css";
 @import "./components/ButtonGroupRadio/index.css";
 @import "./components/Collapsible/index.css";
+@import "./components/Carousel/index.css";
 @import "./components/CommandMenu/index.css";
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export * from "./components/Avatar/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
 export * from "./components/ButtonGroupRadio/index.js";
+export * from "./components/Carousel/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";

package/dist/index.js

@@ -30,6 +30,7 @@ export * from "./components/Avatar/index.js";
 export * from "./components/Backdrop/index.js";
 export * from "./components/Button/index.js";
 export * from "./components/ButtonGroupRadio/index.js";
+export * from "./components/Carousel/index.js";
 export * from "./components/Collapsible/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -26,22 +26,22 @@
     "@marianmeres/icons-fns": "^5.0.0",
     "@marianmeres/random-human-readable": "^1.6.1",
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.50.1",
+    "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.1.0",
+    "@types/node": "^25.2.0",
     "dotenv": "^16.6.1",
     "eslint": "^9.39.2",
     "globals": "^16.5.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.17",
-    "svelte": "^5.49.0",
-    "svelte-check": "^4.3.5",
+    "svelte": "^5.49.1",
+    "svelte-check": "^4.3.6",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",