@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/TabbedMenu/index.css

@@ -1,8 +1,90 @@
-/* TabbedMenu component tokens */
+/* ============================================================================
+   TABBED MENU COMPONENT TOKENS
+   Override globally: :root { --stuic-tabbed-menu-radius: 0; }
+   Override locally:  <TabbedMenu style="--stuic-tabbed-menu-radius: 9999px;">
+   ============================================================================ */
+
 :root {
+	/* Color tokens */
 	--stuic-tabbed-menu-tab-bg: var(--stuic-color-muted);
 	--stuic-tabbed-menu-tab-text: var(--stuic-color-muted-foreground);
-	--stuic-tabbed-menu-tab-bg-active: var(--stuic-color-surface);
-	--stuic-tabbed-menu-tab-text-active: var(--stuic-color-foreground);
+	--stuic-tabbed-menu-tab-bg-active: var(--stuic-color-primary);
+	--stuic-tabbed-menu-tab-text-active: var(--stuic-color-primary-foreground);
 	--stuic-tabbed-menu-border: var(--stuic-color-border);
+	--stuic-tabbed-menu-border-active: var(--stuic-color-primary);
+
+	/* Layout tokens */
+	--stuic-tabbed-menu-gap: calc(var(--spacing) * 1);
+	--stuic-tabbed-menu-radius: var(--radius-md);
+	--stuic-tabbed-menu-padding-x: calc(var(--spacing) * 4);
+	--stuic-tabbed-menu-padding-y: calc(var(--spacing) * 2);
+	--stuic-tabbed-menu-transition: 150ms;
+	--stuic-tabbed-menu-font-weight-active: var(--font-weight-medium);
+	--stuic-tabbed-menu-item-max-width: 10rem;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-tabbed-menu {
+		display: flex;
+		flex-direction: row;
+		gap: var(--stuic-tabbed-menu-gap);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.stuic-tabbed-menu-item {
+		min-width: 0;
+		flex: 1;
+		max-width: var(--stuic-tabbed-menu-item-max-width);
+	}
+
+	.stuic-tabbed-menu-tab {
+		display: block;
+		width: 100%;
+		padding: var(--stuic-tabbed-menu-padding-y) var(--stuic-tabbed-menu-padding-x);
+		border-radius: var(--stuic-tabbed-menu-radius) var(--stuic-tabbed-menu-radius) 0 0;
+		border: 1px solid var(--stuic-tabbed-menu-border);
+		border-bottom: 0;
+		background: var(--stuic-tabbed-menu-tab-bg);
+		color: var(--stuic-tabbed-menu-tab-text);
+		cursor: pointer;
+		transition:
+			background var(--stuic-tabbed-menu-transition),
+			color var(--stuic-tabbed-menu-transition),
+			filter var(--stuic-tabbed-menu-transition);
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.stuic-tabbed-menu-tab:hover:not([aria-disabled="true"]) {
+		filter: brightness(1.05);
+	}
+
+	/* Active tab state */
+	.stuic-tabbed-menu-tab[aria-selected="true"] {
+		background: var(--stuic-tabbed-menu-tab-bg-active);
+		color: var(--stuic-tabbed-menu-tab-text-active);
+		font-weight: var(--stuic-tabbed-menu-font-weight-active);
+		border-color: var(--stuic-tabbed-menu-border-active);
+	}
+
+	/* Disabled tab state */
+	.stuic-tabbed-menu-tab[aria-disabled="true"] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* Focus styles */
+	.stuic-tabbed-menu-tab:focus-visible {
+		outline: 2px solid var(--stuic-color-ring);
+		outline-offset: 2px;
+	}
 }

package/dist/components/ThemePreview/ThemePreview.svelte

@@ -23,6 +23,8 @@
 		footer?: Snippet;
 		/** Optional AlertConfirmPromptStack*/
 		acp?: AlertConfirmPromptStack;
+		/** Optional NotificationsStack*/
+		notifications?: NotificationsStack;
 	}
 
 	/** Intent colors to demonstrate */
@@ -40,15 +42,19 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Button from "../Button/Button.svelte";
+	import Switch from "../Switch/Switch.svelte";
 	import { AlertConfirmPromptStack } from "../AlertConfirmPrompt/index.js";
 	import {
 		type DismissibleMessageIntent,
 		DismissibleMessage,
 	} from "../DismissibleMessage/index.js";
 	import { createClog } from "@marianmeres/clog";
+	import Nav, { type NavGroup } from "../Nav/Nav.svelte";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+	import FieldInput from "../Input/FieldInput.svelte";
+	import FieldCheckbox from "../Input/FieldCheckbox.svelte";
 
 	const clog = createClog("ThemePreview", { color: "auto" });
 
@@ -63,12 +69,38 @@
 		sidebar,
 		footer,
 		acp,
+		notifications,
 		...rest
 	}: Props = $props();
 
 	let spacing = $derived(compact ? "gap-2 p-2" : "gap-4 p-4");
 
-	const alert = () => acp?.alert();
+	const alert = (intent?: string) => {
+		acp?.alert(intent);
+		notif(intent);
+	};
+
+	const notif = (intent?: string) => {
+		if (intent && notifications) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			(notifications as any)[intent]?.(intent);
+		}
+	};
+
+	// Navigation groups for sidebar
+	let activeNavId = $state("dashboard");
+	const navGroups: NavGroup[] = [
+		{
+			title: "Navigation",
+			id: "navigation",
+			items: [
+				{ id: "dashboard", label: "Dashboard" },
+				{ id: "settings", label: "Settings" },
+				{ id: "profile", label: "Profile" },
+				{ id: "archived", label: "Archived", disabled: true },
+			],
+		},
+	];
 
 	//
 	let dismissibleMessage = $state<string | null>();
@@ -95,17 +127,11 @@
 			{#if sidebar}
 				{@render sidebar()}
 			{:else}
-				<nav class="sidebar-nav">
-					{#if showLabels}
-						<span class="section-label">Navigation</span>
-					{/if}
-					<ul class="nav-list">
-						<li class="nav-item active">Dashboard</li>
-						<li class="nav-item">Settings</li>
-						<li class="nav-item">Profile</li>
-						<li class="nav-item muted">Archived</li>
-					</ul>
-				</nav>
+				<Nav
+					groups={navGroups}
+					activeId={activeNavId}
+					onSelect={(item) => (activeNavId = item.id)}
+				/>
 				<div class="sidebar-footer">
 					<span class="muted-text">v1.0.0</span>
 				</div>
@@ -144,8 +170,9 @@
 											if (!["primary", "accent"].includes(intent)) {
 												dismissibleIntent = intent as DismissibleMessageIntent;
 												dismissibleMessage = intent;
+												notif(intent);
 											} else {
-												alert();
+												alert(intent);
 											}
 										}}
 									>
@@ -153,7 +180,7 @@
 									</Button>
 								{/each}
 							{:else}
-								<Button {intent} onclick={alert}>
+								<Button {intent} onclick={() => alert(intent)}>
 									{intent}
 								</Button>
 							{/if}
@@ -176,6 +203,23 @@
 				</div>
 			</section>
 
+			<!-- HIGHLIGHT BOXES -->
+			<section class="preview-section">
+				{#if showLabels}
+					<h2 class="section-label">Highlighted Content</h2>
+				{/if}
+
+				<div class="highlight-box primary">
+					<strong>Primary Highlight</strong>
+					<p>This box uses primary intent colors for important content.</p>
+				</div>
+
+				<div class="highlight-box accent">
+					<strong>Accent Highlight</strong>
+					<p>This box uses accent colors to draw attention.</p>
+				</div>
+			</section>
+
 			<!-- ROLE COLORS -->
 			<section class="preview-section">
 				{#if showLabels}
@@ -193,6 +237,16 @@
 						<span class="surface-foreground-text">surface-foreground</span>
 					</div>
 
+					<div class="color-swatch surface-1">
+						<span class="swatch-label">surface-1</span>
+						<span class="surface-1-foreground-text">surface-1-foreground</span>
+					</div>
+
+					<div class="color-swatch surface-2">
+						<span class="swatch-label">surface-2</span>
+						<span class="surface-2-foreground-text">surface-2-foreground</span>
+					</div>
+
 					<div class="color-swatch muted-bg">
 						<span class="swatch-label">muted</span>
 						<span class="muted-foreground-text">muted-foreground</span>
@@ -220,36 +274,35 @@
 						<h2 class="section-label">Inputs</h2>
 					{/if}
 
-					<div class="input-examples">
-						<div class="input-wrapper">
-							<input type="text" class="preview-input" placeholder="Text input..." />
-						</div>
-						<div class="input-wrapper">
-							<input
+					<div class="input-examples flex items-center">
+						<!-- <div class="input-wrapper"> -->
+						<!-- <input type="text" class="preview-input" placeholder="Text input..." /> -->
+						<FieldInput class="m-0" />
+						<!-- </div> -->
+						<!-- <div class="input-wrapper"> -->
+						<FieldCheckbox label="Hey ho" class="m-0" />
+						<!-- <input
 								type="text"
 								class="preview-input focus"
 								value="Focused state"
 								readonly
-							/>
-						</div>
+							/> -->
+						<!-- </div> -->
 					</div>
 				</section>
 			{/if}
 
-			<!-- HIGHLIGHT BOXES -->
+			<!-- SWITCHES -->
 			<section class="preview-section">
 				{#if showLabels}
-					<h2 class="section-label">Highlighted Content</h2>
+					<h2 class="section-label">Switches</h2>
 				{/if}
 
-				<div class="highlight-box primary">
-					<strong>Primary Highlight</strong>
-					<p>This box uses primary intent colors for important content.</p>
-				</div>
-
-				<div class="highlight-box accent">
-					<strong>Accent Highlight</strong>
-					<p>This box uses accent colors to draw attention.</p>
+				<div class="flex flex-wrap items-center gap-4">
+					<Switch checked />
+					{#each INTENT_COLORS as intent}
+						<Switch {intent} checked />
+					{/each}
 				</div>
 			</section>
 

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

@@ -21,13 +21,15 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     footer?: Snippet;
     /** Optional AlertConfirmPromptStack*/
     acp?: AlertConfirmPromptStack;
+    /** Optional NotificationsStack*/
+    notifications?: NotificationsStack;
 }
 /** Intent colors to demonstrate */
 export declare const INTENT_COLORS: readonly ["primary", "accent", "destructive", "warning", "success", "info"];
 /** Button variants to demonstrate */
 export declare const BUTTON_VARIANTS: readonly ["solid", "outline", "ghost", "soft", "link"];
-import "./index.css";
 import { AlertConfirmPromptStack } from "../AlertConfirmPrompt/index.js";
+import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 declare const ThemePreview: import("svelte").Component<Props, {}, "el">;
 type ThemePreview = ReturnType<typeof ThemePreview>;
 export default ThemePreview;

package/dist/components/ThemePreview/index.css

@@ -235,7 +235,7 @@
 .stuic-theme-preview .color-swatch {
 	padding: 1rem;
 	border-radius: var(--stuic-theme-preview-radius);
-	border: 1px solid var(--stuic-color-border);
+	/* border: 1px solid var(--stuic-color-border); */
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
@@ -256,6 +256,14 @@
 	background: var(--stuic-color-surface);
 }
 
+.stuic-theme-preview .color-swatch.surface-1 {
+	background: var(--stuic-color-surface-1);
+}
+
+.stuic-theme-preview .color-swatch.surface-2 {
+	background: var(--stuic-color-surface-2);
+}
+
 .stuic-theme-preview .color-swatch.muted-bg {
 	background: var(--stuic-color-muted);
 }
@@ -269,6 +277,14 @@
 	color: var(--stuic-color-surface-foreground);
 }
 
+.stuic-theme-preview .surface-1-foreground-text {
+	color: var(--stuic-color-surface-1-foreground);
+}
+
+.stuic-theme-preview .surface-2-foreground-text {
+	color: var(--stuic-color-surface-2-foreground);
+}
+
 .stuic-theme-preview .muted-foreground-text {
 	color: var(--stuic-color-muted-foreground);
 }
@@ -386,17 +402,17 @@
 	opacity: 0.9;
 }
 
-/* Using soft variant pattern for content boxes */
+/* Using surface-intent tokens for content boxes */
 .stuic-theme-preview .highlight-box.primary {
-	background: color-mix(in srgb, var(--stuic-color-primary) 15%, transparent);
-	color: var(--stuic-color-primary);
-	border: 1px solid color-mix(in srgb, var(--stuic-color-primary) 30%, transparent);
+	background: var(--stuic-color-surface-primary);
+	color: var(--stuic-color-surface-primary-foreground);
+	border: 1px solid var(--stuic-color-surface-primary-border);
 }
 
 .stuic-theme-preview .highlight-box.accent {
-	background: color-mix(in srgb, var(--stuic-color-accent) 15%, transparent);
-	color: var(--stuic-color-accent);
-	border: 1px solid color-mix(in srgb, var(--stuic-color-accent) 30%, transparent);
+	background: var(--stuic-color-surface-accent);
+	color: var(--stuic-color-surface-accent-foreground);
+	border: 1px solid var(--stuic-color-surface-accent-border);
 }
 
 /* ============================================================================

package/dist/components/TwCheck/README.md

@@ -1,43 +1,62 @@
 # TwCheck
 
-A development utility component to verify that Tailwind CSS is properly loaded and working. Displays differently styled content at different breakpoints.
+A development utility component to verify that Tailwind CSS is properly loaded and working. Displays different styles at different breakpoints.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `theme` | `string` | - | Tailwind color theme for background |
+| `theme` | `string` | - | Tailwind color palette name (e.g., "blue", "amber") |
 | `class` | `string` | - | Additional CSS classes |
 
+## Component Tokens
+
+Override to customize appearance:
+
+```css
+:root {
+    --stuic-twcheck-bg: var(--stuic-color-primary);
+    --stuic-twcheck-text: var(--stuic-color-primary-foreground);
+    --stuic-twcheck-border-color: var(--stuic-color-accent);
+    --stuic-twcheck-padding-x: calc(var(--spacing) * 2);
+}
+```
+
 ## Usage
 
 ### Basic Check
 
 ```svelte
 <script lang="ts">
-  import { TwCheck } from 'stuic';
+  import { TwCheck } from '@marianmeres/stuic';
 </script>
 
-<TwCheck>
-  TW Check
-</TwCheck>
+<TwCheck>TW Check</TwCheck>
 ```
 
-### With Theme
+### Customization Strategies
 
 ```svelte
-<TwCheck theme="blue">
-  Tailwind is working!
-</TwCheck>
+<!-- 1. Default styles (uses theme tokens) -->
+<TwCheck>default</TwCheck>
+
+<!-- 2. Tailwind class override -->
+<TwCheck class="bg-green-600 text-white">green</TwCheck>
+
+<!-- 3. CSS variable override -->
+<TwCheck --stuic-twcheck-bg="var(--color-blue-600)">blue</TwCheck>
+
+<!-- 4. Theme prop shorthand -->
+<TwCheck theme="amber">amber</TwCheck>
 ```
 
 ## Visual Indicators
 
 When Tailwind CSS is properly loaded:
-- **Mobile**: Yellow text, no border
-- **Desktop (sm+)**: White text, teal border, larger font
+- **Mobile**: Smaller text (text-base), no border
+- **Desktop (sm+)**: Larger text (text-2xl), visible border
 
-If the component appears unstyled (plain text), Tailwind CSS is not loading correctly.
+If the component appears unstyled (no size change, no border at wider viewports), Tailwind CSS is not loading correctly.
 
 ## Development Use
 

package/dist/components/TwCheck/TwCheck.svelte

@@ -9,24 +9,26 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
-	import { twMerge } from "tailwind-merge";
+	import { twMerge } from "../../utils/index.js";
 
 	let { class: classProp, children, theme }: Props = $props();
 
+	// Responsive classes demonstrate Tailwind is working:
+	// - Font size changes: text-base -> sm:text-2xl
+	// Note: border styles are in component CSS to avoid Vite HMR timing issues
 	const _default = `
-		stuic-twcheck bg-(--stuic-twcheck-bg)
-		inline-block px-2
-		text-yellow-300 sm:text-white
+		stuic-twcheck
+		inline-block
 		text-base sm:text-2xl
 		sm:border-2 border-teal-400
 	`;
 
 	const _buildTheme = (theme?: string) => {
-		// simulating missing css var
-		return theme
-			? `--stuic-twcheck-bg: var(--color-foo-bar-baz, var(--color-${theme}-600));`
-			: "";
+		if (!theme) return "";
+		return [
+			`--stuic-twcheck-bg: var(--color-${theme}-600)`,
+			`--stuic-twcheck-text: var(--color-${theme}-100, var(--color-white))`,
+		].join(";");
 	};
 </script>
 

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

@@ -4,7 +4,6 @@ export interface Props {
     children?: Snippet;
     theme?: string;
 }
-import "./index.css";
 declare const TwCheck: import("svelte").Component<Props, {}, "">;
 type TwCheck = ReturnType<typeof TwCheck>;
 export default TwCheck;

package/dist/components/TwCheck/index.css

@@ -1,4 +1,18 @@
 /* TwCheck component tokens */
 :root {
 	--stuic-twcheck-bg: var(--stuic-color-primary);
+	--stuic-twcheck-text: var(--stuic-color-primary-foreground);
+	--stuic-twcheck-border-color: var(--stuic-color-accent);
+	--stuic-twcheck-padding-x: calc(var(--spacing) * 2);
+}
+
+/* @layer components ensures Tailwind utilities (@layer utilities) win in the cascade */
+@layer components {
+	.stuic-twcheck {
+		background: var(--stuic-twcheck-bg);
+		color: var(--stuic-twcheck-text);
+		border-color: var(--stuic-twcheck-border-color);
+		padding-left: var(--stuic-twcheck-padding-x);
+		padding-right: var(--stuic-twcheck-padding-x);
+	}
 }