@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/Spinner/index.css

@@ -0,0 +1,104 @@
+:root {
+	/* Spinner (radial bars) */
+	--stuic-spinner-opacity: 0.8;
+	--stuic-spinner-fade-end-opacity: 0.12;
+	--stuic-spinner-duration: 750ms;
+
+	/* SpinnerCircle */
+	--stuic-spinner-circle-thickness-thin: 1px;
+	--stuic-spinner-circle-thickness-normal: 2px;
+	--stuic-spinner-circle-thickness-thick: 4px;
+	--stuic-spinner-circle-duration: 750ms;
+
+	/* SpinnerCircleOscillate */
+	--stuic-spinner-circle-oscillate-bg-stroke: var(
+		--stuic-color-border,
+		rgba(0 0 0 / 0.1)
+	);
+	--stuic-spinner-circle-oscillate-duration: 0.75s;
+
+	/* SpinnerUnicode */
+	--stuic-spinner-unicode-font-size: var(--text-xl);
+}
+
+@layer components {
+	/* ========================================================================
+	   Spinner (radial bars)
+	   ======================================================================== */
+
+	.stuic-spinner {
+		position: relative;
+		opacity: var(--stuic-spinner-opacity);
+	}
+
+	.stuic-spinner-bar {
+		position: absolute;
+		left: 50%;
+		top: 0;
+		background: currentColor;
+		animation: stuic-spinner-fade var(--stuic-spinner-duration) linear infinite;
+	}
+
+	@keyframes stuic-spinner-fade {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: var(--stuic-spinner-fade-end-opacity);
+		}
+	}
+
+	/* ========================================================================
+	   SpinnerCircle
+	   ======================================================================== */
+
+	.stuic-spinner-circle {
+		display: inline-block;
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-style: solid;
+		border-color: currentColor;
+		border-top-color: transparent;
+		animation: stuic-spinner-circle-spin linear infinite;
+		animation-duration: var(--stuic-spinner-circle-duration);
+	}
+
+	.stuic-spinner-circle[data-thickness="thin"] {
+		border-width: var(--stuic-spinner-circle-thickness-thin);
+	}
+
+	.stuic-spinner-circle[data-thickness="normal"] {
+		border-width: var(--stuic-spinner-circle-thickness-normal);
+	}
+
+	.stuic-spinner-circle[data-thickness="thick"] {
+		border-width: var(--stuic-spinner-circle-thickness-thick);
+	}
+
+	@keyframes stuic-spinner-circle-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* ========================================================================
+	   SpinnerCircleOscillate
+	   ======================================================================== */
+
+	.stuic-spinner-circle-oscillate {
+		animation: stuic-spinner-circle-spin linear infinite;
+		animation-duration: var(--stuic-spinner-circle-oscillate-duration);
+	}
+
+	/* ========================================================================
+	   SpinnerUnicode
+	   ======================================================================== */
+
+	.stuic-spinner-unicode {
+		display: inline-block;
+		font-family: var(--font-mono);
+		line-height: 1;
+		color: currentColor;
+		font-size: var(--stuic-spinner-unicode-font-size);
+	}
+}

package/dist/components/Switch/README.md

@@ -1,13 +1,14 @@
 # Switch
 
-A toggle switch component with size variants, keyboard support, and optional async validation.
+A toggle switch component with size variants, semantic intents, keyboard support, and optional async validation.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `checked` | `boolean` | - | Toggle state (bindable) |
-| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| string` | `"md"` | Switch size |
+| `size` | `"sm" \| "md" \| "lg" \| "xl" \| string` | `"lg"` | Switch size |
+| `intent` | `"primary" \| "accent" \| "success" \| "warning" \| "destructive" \| "info"` | - | Semantic color intent |
 | `name` | `string` | - | Form field name for hidden checkbox |
 | `label` | `string` | - | Screen reader label (visually hidden) |
 | `required` | `boolean` | `false` | Mark as required |
@@ -17,7 +18,6 @@ A toggle switch component with size variants, keyboard support, and optional asy
 | `validate` | `boolean \| ValidateOptions` | - | Enable validation |
 | `class` | `string` | - | CSS for switch container |
 | `dotClass` | `string` | - | CSS for toggle knob |
-| `button` | `HTMLButtonElement` | - | Button element reference (bindable) |
 
 ## Snippets
 
@@ -32,34 +32,41 @@ A toggle switch component with size variants, keyboard support, and optional asy
 
 ```svelte
 <script lang="ts">
-  import { Switch } from 'stuic';
+  import { Switch } from '@marianmeres/stuic';
 
   let enabled = $state(false);
 </script>
 
 <Switch bind:checked={enabled} />
-<span>{enabled ? 'On' : 'Off'}</span>
 ```
 
 ### Different Sizes
 
 ```svelte
-<Switch size="xs" />
 <Switch size="sm" />
 <Switch size="md" />
 <Switch size="lg" />
 <Switch size="xl" />
 ```
 
+### Semantic Intents
+
+```svelte
+<Switch intent="primary" checked />
+<Switch intent="success" checked />
+<Switch intent="warning" checked />
+<Switch intent="destructive" checked />
+```
+
 ### With Icons Inside
 
 ```svelte
 <Switch bind:checked={darkMode}>
   {#snippet on()}
-    <span class="text-xs">🌙</span>
+    <span class="text-xs">ON</span>
   {/snippet}
   {#snippet off()}
-    <span class="text-xs">☀️</span>
+    <span class="text-xs">OFF</span>
   {/snippet}
 </Switch>
 ```
@@ -72,21 +79,17 @@ A toggle switch component with size variants, keyboard support, and optional asy
 
   async function checkPremium(current: boolean) {
     if (!current) {
-      // Turning on - check if user can enable premium
       const canEnable = await checkSubscription();
       if (!canEnable) {
         alert('Premium subscription required');
-        return false; // Prevent toggle
+        return false;
       }
     }
     return true;
   }
 </script>
 
-<Switch
-  bind:checked={premium}
-  preHook={checkPremium}
-/>
+<Switch bind:checked={premium} preHook={checkPremium} />
 ```
 
 ### In a Form
@@ -109,19 +112,32 @@ A toggle switch component with size variants, keyboard support, and optional asy
 
 ## CSS Variables
 
+### Component Tokens
+
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--stuic-switch-accent` | `--stuic-accent` | Active (checked) color |
+| `--stuic-switch-track` | `--stuic-color-border` | Unchecked track color |
+| `--stuic-switch-track-checked` | `--stuic-color-primary` | Checked track color |
+| `--stuic-switch-dot` | `--color-white` | Knob background color |
+| `--stuic-switch-dot-foreground` | `--stuic-color-foreground` | Knob text/icon color |
+| `--stuic-switch-ring-width` | `4px` | Focus ring width |
+| `--stuic-switch-ring-color` | `--stuic-color-ring` | Focus ring color |
+| `--stuic-switch-transition` | `100ms` | Transition duration |
 
-### Example Override
+### Example Overrides
 
 ```css
+/* Global: green switches */
 :root {
-  /* Green switches globally */
-  --stuic-switch-accent: var(--color-green-500);
+  --stuic-switch-track-checked: var(--color-green-500);
 }
 ```
 
+```svelte
+<!-- Local: orange switch -->
+<Switch style="--stuic-switch-track-checked: var(--color-orange-500);" />
+```
+
 ## Keyboard Support
 
 - **Space**: Toggle switch

package/dist/components/Switch/Switch.svelte

@@ -6,10 +6,20 @@
 		ValidationResult,
 	} from "../../actions/validate.svelte.js";
 
+	export type SwitchIntent =
+		| "primary"
+		| "accent"
+		| "success"
+		| "warning"
+		| "destructive"
+		| "info";
+
 	export interface Props extends Omit<HTMLLabelAttributes, "children" | "onchange"> {
 		button?: HTMLButtonElement;
 		checked?: boolean;
-		size?: "sm" | "md" | "lg" | "xl" | string;
+		size?: "sm" | "md" | "lg" | string;
+		/** Semantic color intent */
+		intent?: SwitchIntent;
 		/** Form field name for the hidden checkbox */
 		name?: string;
 		class?: string;
@@ -38,11 +48,10 @@
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { validate as validateAction } from "../../actions/validate.svelte.js";
 
-	import "./index.css";
-
 	let {
 		button = $bindable(),
-		size = "lg",
+		size = "md",
+		intent,
 		name,
 		class: classProp,
 		dotClass,
@@ -62,17 +71,17 @@
 
 	const _preset: any = {
 		size: {
-			sm: `h-5 w-9`,
-			md: `h-6 w-11`,
-			lg: `h-7 w-13`,
-			xl: `h-8 w-15`,
+			xs: `h-5 w-9`,
+			sm: `h-6 w-11`,
+			md: `h-7 w-13`,
+			lg: `h-8 w-15`,
 		},
 		dot: {
 			size: {
-				sm: `size-3 data-[checked=true]:translate-x-5`,
-				md: `size-4 data-[checked=true]:translate-x-6`,
-				lg: `size-5 data-[checked=true]:translate-x-7`,
-				xl: `size-6 data-[checked=true]:translate-x-8`,
+				xs: `size-3 data-[checked=true]:translate-x-5`,
+				sm: `size-4 data-[checked=true]:translate-x-6`,
+				md: `size-5 data-[checked=true]:translate-x-7`,
+				lg: `size-6 data-[checked=true]:translate-x-8`,
 			},
 		},
 	};
@@ -92,30 +101,10 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions  -->
 <label
 	bind:this={wrap}
-	class={twMerge(
-		"stuic-switch",
-		`m-2 
-		relative inline-flex shrink-0 items-center
-		rounded-full cursor-pointer
-
-		transition-colors duration-100
-
-		hover:brightness-105 active:brightness-95
-		data-[disabled=true]:cursor-not-allowed! data-[disabled=true]:opacity-50! data-[disabled=true]:hover:brightness-100
-
-		bg-neutral-400 dark:bg-neutral-400
-
-		data-[checked=true]:bg-(--stuic-switch-accent)
-
-		focus:outline-0
-		focus:ring-(--stuic-switch-accent)/20
-		focus:ring-4`,
-		size,
-		_preset.size[size],
-		classProp
-	)}
+	class={twMerge("stuic-switch m-2", _preset.size[size], classProp)}
 	data-checked={checked}
 	data-disabled={disabled}
+	data-intent={intent}
 	tabindex={disabled ? -1 : tabindex}
 	onkeydown={(e: KeyboardEvent) => {
 		if (!disabled && !e.metaKey && ["Space", "Enter"].includes(e.code)) {
@@ -139,18 +128,7 @@
 	{...rest as Record<string, unknown>}
 >
 	<span
-		class={twMerge(
-			"dot",
-			`flex items-center justify-center
-			translate-x-1 rounded-full  
-			transition-all duration-100
-			shadow
-			bg-neutral-50 dark:bg-neutral-50
-			text-neutral-950 dark:text-neutral-950`,
-			size,
-			_preset.dot.size[size],
-			dotClass
-		)}
+		class={twMerge("dot translate-x-1", _preset.dot.size[size], dotClass)}
 		data-checked={checked}
 	>
 		{#if checked}

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

@@ -1,10 +1,13 @@
 import type { Snippet } from "svelte";
 import type { FormEventHandler, HTMLLabelAttributes } from "svelte/elements";
 import type { ValidateOptions, ValidationResult } from "../../actions/validate.svelte.js";
+export type SwitchIntent = "primary" | "accent" | "success" | "warning" | "destructive" | "info";
 export interface Props extends Omit<HTMLLabelAttributes, "children" | "onchange"> {
     button?: HTMLButtonElement;
     checked?: boolean;
-    size?: "sm" | "md" | "lg" | "xl" | string;
+    size?: "sm" | "md" | "lg" | string;
+    /** Semantic color intent */
+    intent?: SwitchIntent;
     /** Form field name for the hidden checkbox */
     name?: string;
     class?: string;
@@ -26,7 +29,6 @@ export interface Props extends Omit<HTMLLabelAttributes, "children" | "onchange"
     validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
     setValidationResult?: (res: ValidationResult) => void;
 }
-import "./index.css";
 declare const Switch: import("svelte").Component<Props, {}, "button" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/Switch/index.css

@@ -1,4 +1,122 @@
-/* Switch component tokens */
+/* ============================================================================
+   SWITCH COMPONENT TOKENS
+   Override globally: :root { --stuic-switch-track-checked: var(--color-green-500); }
+   Override locally:  <Switch style="--stuic-switch-track-checked: var(--color-green-500);">
+   ============================================================================ */
+
 :root {
-	--stuic-switch-accent: var(--stuic-color-primary);
+	/* Track (background) */
+	--stuic-switch-track: var(
+		--stuic-color-border
+	); /* intentionally border, to make it more contrast */
+	--stuic-switch-track-checked: var(--stuic-color-primary);
+
+	/* Dot (knob) */
+	--stuic-switch-dot: var(--color-white);
+	--stuic-switch-dot-foreground: var(--stuic-color-foreground);
+
+	/* Focus ring */
+	--stuic-switch-ring-width: 4px;
+	--stuic-switch-ring-color: var(--stuic-color-ring);
+
+	/* Transition */
+	--stuic-switch-transition: 100ms;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-switch {
+		/* Use internal vars that can be set by intent */
+		--_track: var(--stuic-switch-track);
+		--_track-checked: var(--stuic-switch-track-checked);
+		--_dot: var(--stuic-switch-dot);
+		--_dot-fg: var(--stuic-switch-dot-foreground);
+
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		border-radius: 9999px;
+		cursor: pointer;
+
+		background: var(--_track);
+		transition:
+			background var(--stuic-switch-transition),
+			box-shadow var(--stuic-switch-transition);
+	}
+
+	/* Checked state */
+	.stuic-switch[data-checked="true"] {
+		background: var(--_track-checked);
+	}
+
+	/* Hover */
+	.stuic-switch:hover:not([data-disabled="true"]) {
+		/* filter: brightness(1.05); */
+		filter: brightness(0.95);
+	}
+
+	/* Active */
+	.stuic-switch:active:not([data-disabled="true"]) {
+		/* filter: brightness(0.95); */
+	}
+
+	/* Focus */
+	.stuic-switch:focus {
+		outline: none;
+		box-shadow: 0 0 0 var(--stuic-switch-ring-width)
+			color-mix(in srgb, var(--stuic-switch-ring-color) 30%, var(--stuic-color-background));
+	}
+
+	/* Disabled */
+	.stuic-switch[data-disabled="true"] {
+		cursor: not-allowed;
+		opacity: 0.8;
+	}
+
+	/* ============================================================================
+	   DOT (KNOB) STYLES
+	   ============================================================================ */
+
+	.stuic-switch > .dot {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		background: var(--_dot);
+		color: var(--_dot-fg);
+		box-shadow: var(--shadow-sm);
+		transition: transform var(--stuic-switch-transition);
+	}
+
+	/* ============================================================================
+	   INTENT COLOR MAPPING
+	   ============================================================================ */
+
+	.stuic-switch[data-intent="primary"] {
+		--_track-checked: var(--stuic-color-primary);
+	}
+
+	.stuic-switch[data-intent="accent"] {
+		--_track-checked: var(--stuic-color-accent);
+	}
+
+	.stuic-switch[data-intent="success"] {
+		--_track-checked: var(--stuic-color-success);
+	}
+
+	.stuic-switch[data-intent="warning"] {
+		--_track-checked: var(--stuic-color-warning);
+	}
+
+	.stuic-switch[data-intent="destructive"] {
+		--_track-checked: var(--stuic-color-destructive);
+	}
+
+	.stuic-switch[data-intent="info"] {
+		--_track-checked: var(--stuic-color-info);
+	}
 }

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

@@ -1,2 +1 @@
-export { default as Switch, type Props as SwitchProps } from "./Switch.svelte";
-export { default as SwitchButton, type Props as SwitchButtonProps, } from "./SwitchButton.svelte";
+export { default as Switch, type Props as SwitchProps, type SwitchIntent, } from "./Switch.svelte";

package/dist/components/Switch/index.js

@@ -1,2 +1 @@
-export { default as Switch } from "./Switch.svelte";
-export { default as SwitchButton, } from "./SwitchButton.svelte";
+export { default as Switch, } from "./Switch.svelte";

package/dist/components/TabbedMenu/README.md

@@ -46,39 +46,50 @@ interface TabbedMenuItem {
 	class?: string;
 	data?: Record<string, any>;
 	onSelect?: () => void | boolean; // Return false to prevent selection
+	href?: string; // Render as anchor instead of button
 }
 ```
 
 ## CSS Variables
 
-Customize the component's appearance using CSS custom properties:
+### Component Tokens
+
+Override to customize appearance:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--stuic-tabbed-menu-tab-bg` | `--stuic-surface-sunken` | Tab background |
-| `--stuic-tabbed-menu-tab-text` | `--stuic-text-muted` | Tab text color |
-| `--stuic-tabbed-menu-tab-bg-active` | `--stuic-surface` | Active tab background |
-| `--stuic-tabbed-menu-tab-text-active` | `--stuic-text` | Active tab text color |
-| `--stuic-tabbed-menu-border` | `--stuic-border` | Border color |
-
-### Example Override
+| `--stuic-tabbed-menu-tab-bg` | `--stuic-color-muted` | Tab background |
+| `--stuic-tabbed-menu-tab-text` | `--stuic-color-muted-foreground` | Tab text color |
+| `--stuic-tabbed-menu-tab-bg-active` | `--stuic-color-surface` | Active tab background |
+| `--stuic-tabbed-menu-tab-text-active` | `--stuic-color-foreground` | Active tab text color |
+| `--stuic-tabbed-menu-border` | `--stuic-color-border` | Border color |
+| `--stuic-tabbed-menu-border-active` | `--stuic-color-primary` | Active tab border color |
+| `--stuic-tabbed-menu-gap` | `calc(var(--spacing) * 1)` | Gap between tabs |
+| `--stuic-tabbed-menu-radius` | `var(--radius-md)` | Tab border radius (top corners) |
+| `--stuic-tabbed-menu-padding-x` | `calc(var(--spacing) * 4)` | Horizontal padding |
+| `--stuic-tabbed-menu-padding-y` | `calc(var(--spacing) * 2)` | Vertical padding |
+| `--stuic-tabbed-menu-transition` | `150ms` | Transition duration |
+| `--stuic-tabbed-menu-font-weight-active` | `var(--font-weight-medium)` | Active tab font weight |
+| `--stuic-tabbed-menu-item-max-width` | `10rem` | Max width per tab item |
+
+### Example Overrides
 
 ```css
+/* Global override */
 :root {
   --stuic-tabbed-menu-tab-bg-active: var(--color-indigo-100);
   --stuic-tabbed-menu-tab-text-active: var(--color-indigo-900);
+  --stuic-tabbed-menu-radius: var(--radius-lg);
 }
 ```
 
-### Legacy Variables (Backwards Compatibility)
-
-The following legacy variable names still work as aliases:
-
-| Legacy Name | New Name |
-|-------------|----------|
-| `--color-tabbed-menu-tab-bg` | `--stuic-tabbed-menu-tab-bg` |
-| `--color-tabbed-menu-tab-active-bg` | `--stuic-tabbed-menu-tab-bg-active` |
-| `--color-tabbed-menu-border` | `--stuic-tabbed-menu-border` |
+```svelte
+<!-- Local override -->
+<TabbedMenu
+  {items}
+  style="--stuic-tabbed-menu-radius: 9999px; --stuic-tabbed-menu-padding-x: 2rem;"
+/>
+```
 
 ## Keyboard Navigation
 

package/dist/components/TabbedMenu/TabbedMenu.svelte

@@ -33,7 +33,6 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
 
 	//
 	let {
@@ -54,44 +53,6 @@
 		...rest
 	}: Props = $props();
 
-	const CLS = `
-		stuic-tabbed-menu
-		flex flex-row
-		gap-1
-		list-none m-0 p-0
-	`;
-
-	const CLS_ITEM = `
-        min-w-0 flex-1 max-w-40
-    `;
-
-	const CLS_BUTTON = `
-		px-4 py-2
-		rounded-t-md
-		border border-b-0
-		border-(--stuic-tabbed-menu-border)
-		bg-(--stuic-tabbed-menu-tab-bg)
-		text-(--stuic-tabbed-menu-tab-text)
-		cursor-pointer
-		transition-colors duration-150
-		hover:brightness-105
-        truncate w-full
-        block
-        text-center
-	`;
-	// focus-visible:outline-2 focus-visible:outline-offset-2
-
-	const CLS_BUTTON_ACTIVE = `
-		bg-(--stuic-tabbed-menu-tab-bg-active)
-		text-(--stuic-tabbed-menu-tab-text-active)
-		font-medium
-	`;
-
-	const CLS_BUTTON_DISABLED = `
-		opacity-50 cursor-not-allowed
-		pointer-events-none
-	`;
-
 	let buttonEls = $state<Record<string | number, HTMLButtonElement | HTMLAnchorElement>>(
 		{}
 	);
@@ -135,16 +96,14 @@
 		}
 	}
 
-	function getButtonClass(item: TabbedMenuItem): string {
+	function getTabClass(item: TabbedMenuItem): string {
 		const isActive = value === item.id;
 		const isDisabled = item.disabled || disabled;
 
 		return twMerge(
-			!unstyled && CLS_BUTTON,
+			!unstyled && "stuic-tabbed-menu-tab",
 			classButton,
-			isActive && !unstyled && CLS_BUTTON_ACTIVE,
 			isActive && classButtonActive,
-			isDisabled && !unstyled && CLS_BUTTON_DISABLED,
 			isDisabled && classButtonDisabled,
 			item.class
 		);
@@ -154,7 +113,7 @@
 {#if items.length}
 	<ul
 		bind:this={el}
-		class={twMerge(!unstyled && CLS, classProp)}
+		class={twMerge(!unstyled && "stuic-tabbed-menu", classProp)}
 		role="tablist"
 		{...rest}
 	>
@@ -164,11 +123,11 @@
 				["aria-selected"]: value === item.id,
 				["aria-disabled"]: item.disabled || disabled || undefined,
 				tabindex: value === item.id ? 0 : -1,
-				class: getButtonClass(item),
+				class: getTabClass(item),
 				onclick: () => selectItem(item),
 				onkeydown: (e: KeyboardEvent) => handleKeydown(e, item),
 			}}
-			<li class={twMerge(CLS_ITEM, classItem)} role="presentation">
+			<li class={twMerge(!unstyled && "stuic-tabbed-menu-item", classItem)} role="presentation">
 				{#if item.href}
 					<a href={item.href} {...props} bind:this={buttonEls[item.id]}>
 						<Thc thc={item.label} />

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

@@ -22,7 +22,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "children"
     unstyled?: boolean;
     el?: HTMLUListElement;
 }
-import "./index.css";
 declare const TabbedMenu: import("svelte").Component<Props, {}, "value" | "el">;
 type TabbedMenu = ReturnType<typeof TabbedMenu>;
 export default TabbedMenu;