@marianmeres/stuic 2.45.0 → 2.47.0

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -543,7 +543,15 @@
 				</div>
 			{/if}
 
-			<div class="absolute top-4 right-4 flex items-center space-x-3">
+			<div class="absolute top-4 left-4 right-4 flex items-center justify-between gap-3">
+				{#if !noName && previewAsset?.name}
+					<span class="truncate bg-white px-1 rounded">
+						{previewAsset?.name}
+					</span>
+				{:else}
+					<span></span>
+				{/if}
+				<div class="flex items-center space-x-3 shrink-0">
 				{#if previewAsset.isImage}
 					<button
 						class={twMerge(TOP_BUTTON_CLS, classControls)}
@@ -602,14 +610,9 @@
 				>
 					<X />
 				</button>
+				</div>
 			</div>
 
-			{#if !noName && previewAsset?.name}
-				<span class="absolute top-4 left-4 bg-white px-1 rounded">
-					{previewAsset?.name}
-				</span>
-			{/if}
-
 			{#if assets.length > 1}
 				{#if !noName && dotTooltip}
 					<div

package/dist/components/TabbedMenu/README.md

@@ -0,0 +1,84 @@
+# TabbedMenu
+
+A horizontal tab navigation component built on semantic `ul/li` markup with ARIA accessibility support.
+
+## Usage
+
+```svelte
+<script>
+	import { TabbedMenu } from '@marianmeres/stuic';
+
+	let activeTab = $state('tab1');
+
+	const items = [
+		{ id: 'tab1', label: 'First Tab' },
+		{ id: 'tab2', label: 'Second Tab' },
+		{ id: 'tab3', label: 'Third Tab', disabled: true },
+	];
+</script>
+
+<TabbedMenu {items} bind:value={activeTab} />
+```
+
+## Props
+
+| Prop                  | Type                              | Default     | Description                          |
+| --------------------- | --------------------------------- | ----------- | ------------------------------------ |
+| `items`               | `TabbedMenuItem[]`                | required    | Array of tab items                   |
+| `value`               | `string \| number`                | `undefined` | Active tab id (bindable)             |
+| `disabled`            | `boolean`                         | `false`     | Disable all tabs                     |
+| `onSelect`            | `(item: TabbedMenuItem) => void`  | `undefined` | Callback when tab is selected        |
+| `class`               | `string`                          | `undefined` | Class for the `ul` wrapper           |
+| `classItem`           | `string`                          | `undefined` | Class for each `li` element          |
+| `classButton`         | `string`                          | `undefined` | Class for tab buttons                |
+| `classButtonActive`   | `string`                          | `undefined` | Additional class for active tab      |
+| `classButtonDisabled` | `string`                          | `undefined` | Additional class for disabled tabs   |
+| `unstyled`            | `boolean`                         | `false`     | Skip default styling                 |
+| `el`                  | `HTMLUListElement`                | `undefined` | Element reference (bindable)         |
+
+## TabbedMenuItem Interface
+
+```typescript
+interface TabbedMenuItem {
+	id: string | number;
+	label: THC; // Text, HTML, Component, or Snippet
+	disabled?: boolean;
+	class?: string;
+	data?: Record<string, any>;
+	onSelect?: () => void | boolean; // Return false to prevent selection
+}
+```
+
+## CSS Variables
+
+```css
+/* Tab button */
+--color-tabbed-menu-tab-bg
+--color-tabbed-menu-tab-bg-dark
+--color-tabbed-menu-tab-text
+--color-tabbed-menu-tab-text-dark
+
+/* Active tab */
+--color-tabbed-menu-tab-active-bg
+--color-tabbed-menu-tab-active-bg-dark
+--color-tabbed-menu-tab-active-text
+--color-tabbed-menu-tab-active-text-dark
+
+/* Border */
+--color-tabbed-menu-border
+--color-tabbed-menu-border-dark
+
+/* Sizing */
+--tabbed-menu-border-radius: 0.5rem
+--tabbed-menu-padding-x: 1rem
+--tabbed-menu-padding-y: 0.5rem
+--tabbed-menu-gap: 0.25rem
+```
+
+## Keyboard Navigation
+
+- `ArrowRight` / `ArrowDown` - Move to next tab
+- `ArrowLeft` / `ArrowUp` - Move to previous tab
+- `Home` - Move to first tab
+- `End` - Move to last tab
+- `Enter` / `Space` - Select focused tab

package/dist/components/TabbedMenu/TabbedMenu.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { THC } from "../Thc/index.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+
+	export interface TabbedMenuItem {
+		id: string | number;
+		label: THC;
+		disabled?: boolean;
+		class?: string;
+		data?: Record<string, any>;
+		onSelect?: () => void | boolean;
+		href?: string;
+	}
+
+	export interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "children"> {
+		items: TabbedMenuItem[];
+		value?: string | number;
+		disabled?: boolean;
+		onSelect?: (item: TabbedMenuItem) => void;
+		//
+		class?: string;
+		classItem?: string;
+		classButton?: string;
+		classButtonActive?: string;
+		classButtonDisabled?: string;
+		//
+		unstyled?: boolean;
+		//
+		el?: HTMLUListElement;
+	}
+</script>
+
+<script lang="ts">
+	import "./index.css";
+
+	//
+	let {
+		items,
+		value = $bindable(),
+		disabled,
+		onSelect,
+		//
+		class: classProp,
+		classItem,
+		classButton,
+		classButtonActive,
+		classButtonDisabled,
+		//
+		unstyled,
+		//
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	const CLS = `
+		stuic-tabbed-menu
+		flex flex-row items-end
+		gap-1
+		list-none m-0 p-0
+	`;
+
+	const CLS_ITEM = `
+        min-w-0 flex-1
+    `;
+
+	const CLS_BUTTON = `
+		px-4 py-2
+		rounded-t-md
+		border border-b-0
+		border-tabbed-menu-border dark:border-tabbed-menu-border-dark
+		bg-tabbed-menu-tab-bg dark:bg-tabbed-menu-tab-bg-dark
+		text-tabbed-menu-tab-text dark:text-tabbed-menu-tab-text-dark
+		cursor-pointer
+		transition-colors duration-150
+		hover:brightness-105
+		focus-visible:outline-2 focus-visible:outline-offset-2
+        truncate w-full
+	`;
+
+	const CLS_BUTTON_ACTIVE = `
+		bg-tabbed-menu-tab-active-bg dark:bg-tabbed-menu-tab-active-bg-dark
+		text-tabbed-menu-tab-active-text dark:text-tabbed-menu-tab-active-text-dark
+		font-medium
+	`;
+
+	const CLS_BUTTON_DISABLED = `
+		opacity-50 cursor-not-allowed
+		pointer-events-none
+	`;
+
+	let buttonEls = $state<Record<string | number, HTMLButtonElement | HTMLAnchorElement>>(
+		{}
+	);
+
+	function selectItem(item: TabbedMenuItem) {
+		if (item.disabled || disabled) return;
+		// item-level handler takes priority
+		if (item.onSelect?.() === false) return;
+		value = item.id;
+		onSelect?.(item);
+	}
+
+	function handleKeydown(e: KeyboardEvent, item: TabbedMenuItem) {
+		const enabledItems = items.filter((i) => !i.disabled && !disabled);
+		const currentEnabledIndex = enabledItems.findIndex((i) => i.id === item.id);
+
+		if (["ArrowRight", "ArrowDown"].includes(e.key)) {
+			e.preventDefault();
+			const nextIndex = (currentEnabledIndex + 1) % enabledItems.length;
+			const nextItem = enabledItems[nextIndex];
+			buttonEls[nextItem.id]?.focus();
+		} else if (["ArrowLeft", "ArrowUp"].includes(e.key)) {
+			e.preventDefault();
+			const prevIndex =
+				(currentEnabledIndex - 1 + enabledItems.length) % enabledItems.length;
+			const prevItem = enabledItems[prevIndex];
+			buttonEls[prevItem.id]?.focus();
+		} else if (["Enter", " "].includes(e.key)) {
+			// For anchors, let Enter trigger native navigation (onclick still fires)
+			if (e.key === "Enter" && item.href) return;
+			e.preventDefault();
+			selectItem(item);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			const firstItem = enabledItems[0];
+			if (firstItem) buttonEls[firstItem.id]?.focus();
+		} else if (e.key === "End") {
+			e.preventDefault();
+			const lastItem = enabledItems[enabledItems.length - 1];
+			if (lastItem) buttonEls[lastItem.id]?.focus();
+		}
+	}
+
+	function getButtonClass(item: TabbedMenuItem): string {
+		const isActive = value === item.id;
+		const isDisabled = item.disabled || disabled;
+
+		return twMerge(
+			!unstyled && CLS_BUTTON,
+			classButton,
+			isActive && !unstyled && CLS_BUTTON_ACTIVE,
+			isActive && classButtonActive,
+			isDisabled && !unstyled && CLS_BUTTON_DISABLED,
+			isDisabled && classButtonDisabled,
+			item.class
+		);
+	}
+</script>
+
+{#if items.length}
+	<ul
+		bind:this={el}
+		class={twMerge(!unstyled && CLS, classProp)}
+		role="tablist"
+		{...rest}
+	>
+		{#each items as item (item.id)}
+			{@const props = {
+				role: "tab",
+				["aria-selected"]: value === item.id,
+				["aria-disabled"]: item.disabled || disabled || undefined,
+				tabindex: value === item.id ? 0 : -1,
+				class: getButtonClass(item),
+				onclick: () => selectItem(item),
+				onkeydown: (e: KeyboardEvent) => handleKeydown(e, item),
+			}}
+			<li class={twMerge(CLS_ITEM, classItem)} role="presentation">
+				{#if item.href}
+					<a href={item.href} {...props} bind:this={buttonEls[item.id]}>
+						<Thc thc={item.label} />
+					</a>
+				{:else}
+					<button type="button" {...props} bind:this={buttonEls[item.id]}>
+						<Thc thc={item.label} />
+					</button>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}

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

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { THC } from "../Thc/index.js";
+export interface TabbedMenuItem {
+    id: string | number;
+    label: THC;
+    disabled?: boolean;
+    class?: string;
+    data?: Record<string, any>;
+    onSelect?: () => void | boolean;
+    href?: string;
+}
+export interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "children"> {
+    items: TabbedMenuItem[];
+    value?: string | number;
+    disabled?: boolean;
+    onSelect?: (item: TabbedMenuItem) => void;
+    class?: string;
+    classItem?: string;
+    classButton?: string;
+    classButtonActive?: string;
+    classButtonDisabled?: string;
+    unstyled?: boolean;
+    el?: HTMLUListElement;
+}
+import "./index.css";
+declare const TabbedMenu: import("svelte").Component<Props, {}, "value" | "el">;
+type TabbedMenu = ReturnType<typeof TabbedMenu>;
+export default TabbedMenu;

package/dist/components/TabbedMenu/index.css

@@ -0,0 +1,23 @@
+/* prettier-ignore */
+@theme inline {
+	/* Tab button background */
+	--color-tabbed-menu-tab-bg: var(--color-tabbed-menu-tab-bg, var(--color-neutral-100));
+	--color-tabbed-menu-tab-bg-dark: var(--color-tabbed-menu-tab-bg-dark, var(--color-neutral-700));
+
+	/* Tab button text */
+	--color-tabbed-menu-tab-text: var(--color-tabbed-menu-tab-text, var(--color-neutral-600));
+	--color-tabbed-menu-tab-text-dark: var(--color-tabbed-menu-tab-text-dark, var(--color-neutral-300));
+
+	/* Active tab background */
+	--color-tabbed-menu-tab-active-bg: var(--color-tabbed-menu-tab-active-bg, var(--color-white));
+	--color-tabbed-menu-tab-active-bg-dark: var(--color-tabbed-menu-tab-active-bg-dark, var(--color-neutral-800));
+
+	/* Active tab text */
+	--color-tabbed-menu-tab-active-text: var(--color-tabbed-menu-tab-active-text, var(--color-neutral-900));
+	--color-tabbed-menu-tab-active-text-dark: var(--color-tabbed-menu-tab-active-text-dark, var(--color-white));
+
+	/* Border */
+	--color-tabbed-menu-border: var(--color-tabbed-menu-border, var(--color-neutral-300));
+	--color-tabbed-menu-border-dark: var(--color-tabbed-menu-border-dark, var(--color-neutral-600));
+
+}

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

@@ -0,0 +1 @@
+export { default as TabbedMenu, type Props as TabbedMenuProps, type TabbedMenuItem, } from "./TabbedMenu.svelte";

package/dist/components/TabbedMenu/index.js

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

package/dist/index.css

@@ -16,6 +16,7 @@ so, since we need to override, sticking with that */
 	@import "./components/Notifications/index.css";
 	@import "./components/Progress/index.css";
 	@import "./components/Switch/index.css";
+	@import "./components/TabbedMenu/index.css";
 	@import "./components/TwCheck/index.css";
 }
 

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export * from "./components/Skeleton/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
+export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";

package/dist/index.js

@@ -47,6 +47,7 @@ export * from "./components/Skeleton/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";
+export * from "./components/TabbedMenu/index.js";
 export * from "./components/Thc/index.js";
 export * from "./components/TwCheck/index.js";
 export * from "./components/TypeaheadInput/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.45.0",
+  "version": "2.47.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",