@marianmeres/stuic 2.66.0 → 3.0.1

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
@@ -107,6 +110,34 @@ A toggle switch component with size variants, keyboard support, and optional asy
 <Switch checked={false} disabled />
 ```
 
+## CSS Variables
+
+### Component Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--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 Overrides
+
+```css
+/* Global: green switches */
+:root {
+  --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?: "xs" | "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 = "md",
+		intent,
 		name,
 		class: classProp,
 		dotClass,
@@ -62,19 +71,17 @@
 
 	const _preset: any = {
 		size: {
-			xs: `h-4 w-7`,
-			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: {
-				xs: `size-2 data-[checked=true]:translate-x-4`,
-				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`,
 			},
 		},
 	};
@@ -94,31 +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-switch-accent
-		dark:data-[checked=true]:bg-switch-accent-dark
-
-		focus:outline-0
-		focus:ring-switch-accent/20 focus:dark:ring-switch-accent-dark/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)) {
@@ -142,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?: "xs" | "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,5 +1,122 @@
-/* prettier-ignore */
-@theme inline {
-	--color-switch-accent: var(--color-switch-accent, var(--color-red-600));
-	--color-switch-accent-dark: var(--color-switch-accent-dark, var(--color-red-400));
+/* ============================================================================
+   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 {
+	/* 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%, transparent);
+	}
+
+	/* 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,33 +46,49 @@ 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
 
+### Component Tokens
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--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
-/* 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
+/* 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);
+}
+```
+
+```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-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
-        truncate w-full
-        block
-        text-center
-	`;
-	// focus-visible:outline-2 focus-visible:outline-offset-2
-
-	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>>(
 		{}
 	);
@@ -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;

package/dist/components/TabbedMenu/index.css

@@ -1,23 +1,90 @@
-/* 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));
+/* ============================================================================
+   TABBED MENU COMPONENT TOKENS
+   Override globally: :root { --stuic-tabbed-menu-radius: 0; }
+   Override locally:  <TabbedMenu style="--stuic-tabbed-menu-radius: 9999px;">
+   ============================================================================ */
 
-	/* 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));
+: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-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);
 
-	/* 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));
+	/* 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 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));
+	/* 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);
+	}
 
-	/* 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));
+	/* 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;
+	}
 }