@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/KbdShortcut/KbdShortcut.svelte

@@ -44,14 +44,11 @@
 	let { class: classProp, metas, keys, forcedOs }: Props = $props();
 
 	function wrap(s: string, mac: boolean) {
-		const cls = ["pr-0.5 font-mono tracking-tight"];
 		const sym = mac ? macSymbol[s as KnownMeta] : otherSymbol[s as KnownMeta];
 		if (sym) {
-			s = sym;
-			cls.push("font-sans pr-0");
+			return `<span class="stuic-kbd-symbol">${sym}</span>`;
 		}
-		const _class = twMerge(...cls);
-		return `<span class="${_class}">${ucfirst(s)}</span>`;
+		return `<span class="stuic-kbd-key">${ucfirst(s)}</span>`;
 	}
 
 	async function get_meta_key() {
@@ -73,13 +70,8 @@
 	}
 </script>
 
-<kbd
-	class={twMerge(
-		"text-sm leading-0 space-x-0.5 rounded px-1 py-0 outline outline-neutral-400",
-		classProp
-	)}
->
+<kbd class={twMerge("stuic-kbd", classProp)}>
 	{#await get_meta_key() then metaKey}
-		<span class="font-sans">{@html metaKey}</span><span>{keys}</span>
+		{@html metaKey}<span class="stuic-kbd-key">{keys}</span>
 	{/await}
 </kbd>

package/dist/components/KbdShortcut/README.md

@@ -79,3 +79,37 @@ Display keyboard shortcuts with platform-aware modifier key symbols. Automatical
   class="bg-gray-100 px-2 py-1"
 />
 ```
+
+## CSS Variables
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-kbd-font-family` | `var(--font-mono)` | Font family |
+| `--stuic-kbd-font-size` | `var(--text-sm)` | Font size |
+| `--stuic-kbd-padding-x` | `calc(var(--spacing) * 1)` | Horizontal padding |
+| `--stuic-kbd-padding-y` | `0` | Vertical padding |
+| `--stuic-kbd-gap` | `calc(var(--spacing) * 0.5)` | Gap between elements |
+| `--stuic-kbd-radius` | `var(--radius-sm)` | Border radius |
+| `--stuic-kbd-border-width` | `1px` | Border width |
+| `--stuic-kbd-border-color` | `var(--stuic-color-border)` | Border color (themeable) |
+
+### Global Override
+
+```css
+:root {
+  --stuic-kbd-border-color: var(--color-blue-500);
+  --stuic-kbd-radius: var(--radius-lg);
+}
+```
+
+### Local Override
+
+```svelte
+<KbdShortcut
+  metas={['cmd']}
+  keys="K"
+  style="--stuic-kbd-border-color: blue; --stuic-kbd-radius: 0;"
+/>
+```

package/dist/components/KbdShortcut/index.css

@@ -0,0 +1,55 @@
+/* ============================================================================
+   KBD SHORTCUT COMPONENT TOKENS
+   Override globally: :root { --stuic-kbd-border-color: blue; }
+   Override locally:  <KbdShortcut style="--stuic-kbd-radius: 0;">
+   ============================================================================ */
+
+:root {
+	/* Typography */
+	--stuic-kbd-font-family: var(--font-sans);
+	--stuic-kbd-font-size: var(--text-sm);
+
+	/* Spacing */
+	--stuic-kbd-padding-x: calc(var(--spacing) * 1);
+	--stuic-kbd-padding-y: calc(var(--spacing) * 1);
+	--stuic-kbd-gap: calc(var(--spacing) * 0.5);
+
+	/* Border */
+	--stuic-kbd-radius: var(--radius-sm);
+	--stuic-kbd-border-width: 1px;
+	--stuic-kbd-border-color: var(--stuic-color-border);
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-kbd {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		gap: var(--stuic-kbd-gap);
+
+		/* Typography */
+		font-family: var(--stuic-kbd-font-family);
+		font-size: var(--stuic-kbd-font-size);
+		line-height: 1;
+
+		/* Box model */
+		padding: var(--stuic-kbd-padding-y) var(--stuic-kbd-padding-x);
+		border-radius: var(--stuic-kbd-radius);
+		border: var(--stuic-kbd-border-width) solid var(--stuic-kbd-border-color);
+	}
+
+	/* Symbol styling (⌘, ⇧, ⌥, ⌃, ⊞) */
+	.stuic-kbd-symbol {
+		font-family: var(--font-sans);
+	}
+
+	/* Text key styling (Ctrl, Alt, etc.) */
+	.stuic-kbd-key {
+		font-family: var(--font-mono);
+		letter-spacing: var(--tracking-tight);
+	}
+}

package/dist/components/ListItemButton/ListItemButton.svelte

@@ -10,7 +10,7 @@
 		active?: boolean;
 		/** Whether this item is currently focused via keyboard navigation */
 		focused?: boolean;
-		/** Size preset affecting padding and min-height (sm, md, lg) */
+		/** Size preset affecting padding and min-height (sm, md, lg) or custom Tailwind classes */
 		size?: "sm" | "md" | "lg" | string;
 		/** Skip all default styling, use only custom classes */
 		unstyled?: boolean;
@@ -35,64 +35,12 @@
 		/** Bindable element reference */
 		el?: HTMLButtonElement | HTMLAnchorElement;
 	}
-
-	export interface ListItemButtonPresetClasses {
-		size: Record<string, string>;
-		touchFriendly: string;
-	}
-
-	export const LIST_ITEM_BUTTON_STUIC_BASE_CLASSES = `
-		w-full
-		flex items-center gap-2
-		text-left
-		rounded-[var(--lib-radius)]
-		cursor-pointer
-		touch-action-manipulation
-
-		bg-lib-bg dark:bg-lib-bg-dark
-		text-lib-text dark:text-lib-text-dark
-
-		border border-lib-border dark:border-lib-border-dark
-
-		hover:bg-lib-hover-bg dark:hover:bg-lib-hover-bg-dark
-		hover:text-lib-hover-text dark:hover:text-lib-hover-text-dark
-		hover:border-lib-hover-border dark:hover:border-lib-hover-border-dark
-
-		focus:outline-none
-		focus-visible:bg-lib-focus-bg dark:focus-visible:bg-lib-focus-bg-dark
-		focus-visible:text-lib-focus-text dark:focus-visible:text-lib-focus-text-dark
-		focus-visible:border-lib-focus-border dark:focus-visible:border-lib-focus-border-dark
-
-		disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none
-	`;
-
-	export const LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES: ListItemButtonPresetClasses = {
-		size: {
-			sm: `px-2 py-1.5 text-sm min-h-[36px]`,
-			md: `px-2.5 py-2 text-base min-h-[40px]`,
-			lg: `px-3 py-2.5 text-base min-h-[44px]`,
-		},
-		touchFriendly: `min-h-[44px] py-2.5`,
-	};
-
-	export const LIST_ITEM_BUTTON_ACTIVE_CLASSES = `
-		bg-lib-active-bg dark:bg-lib-active-bg-dark
-		text-lib-active-text dark:text-lib-active-text-dark
-		border-lib-active-border dark:border-lib-active-border-dark
-	`;
-
-	export const LIST_ITEM_BUTTON_FOCUSED_CLASSES = `
-		bg-lib-focus-bg dark:bg-lib-focus-bg-dark
-		text-lib-focus-text dark:text-lib-focus-text-dark
-		border-lib-focus-border dark:border-lib-focus-border-dark
-	`;
 </script>
 
 <script lang="ts">
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { DevicePointer } from "../../utils/device-pointer.svelte.js";
 	import Thc from "../Thc/Thc.svelte";
-	import "./index.css";
 
 	let {
 		children,
@@ -115,31 +63,28 @@
 
 	const devicePointer = new DevicePointer();
 
-	const _base = LIST_ITEM_BUTTON_STUIC_BASE_CLASSES;
-	const _preset = LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES;
+	// Check if size is a known preset
+	const isPresetSize = (s: string): s is "sm" | "md" | "lg" =>
+		["sm", "md", "lg"].includes(s);
 
-	let _touchClasses = $derived.by(() => {
-		if (touchFriendly === true) return _preset.touchFriendly;
-		if (touchFriendly === "auto" && devicePointer.isCoarse) return _preset.touchFriendly;
-		return "";
+	// Compute whether touch-friendly should be active
+	let isTouchFriendly = $derived.by(() => {
+		if (touchFriendly === true) return true;
+		if (touchFriendly === "auto" && devicePointer.isCoarse) return true;
+		return false;
 	});
 
+	// Build class string - styling is handled by CSS + data attributes
 	let _class = $derived(
-		[
-			"stuic-list-item-button",
-			size,
-			active && "active",
-			focused && "focused",
-			!unstyled && _base,
-			!unstyled && size && _preset.size[size],
-			!unstyled && _touchClasses,
-			!unstyled && active && LIST_ITEM_BUTTON_ACTIVE_CLASSES,
-			!unstyled && focused && !active && LIST_ITEM_BUTTON_FOCUSED_CLASSES,
+		twMerge(
+			!unstyled && "stuic-list-item-button",
+			// Custom size classes when not using preset
+			!unstyled && !isPresetSize(size) && size,
+			// User-provided state classes
 			active && classActive,
 			focused && !active && classFocused,
-		]
-			.filter(Boolean)
-			.join(" ")
+			classProp
+		)
 	);
 </script>
 
@@ -160,11 +105,29 @@
 {/snippet}
 
 {#if href}
-	<a {href} bind:this={el} class={twMerge(_class, classProp)} {...rest as any}>
+	<a
+		{href}
+		bind:this={el}
+		class={_class}
+		data-size={!unstyled && isPresetSize(size) ? size : undefined}
+		data-active={!unstyled && active ? "" : undefined}
+		data-focused={!unstyled && focused ? "" : undefined}
+		data-touch-friendly={!unstyled && isTouchFriendly ? "" : undefined}
+		{...rest as any}
+	>
 		{@render content()}
 	</a>
 {:else}
-	<button bind:this={el} class={twMerge(_class, classProp)} type="button" {...rest}>
+	<button
+		bind:this={el}
+		class={_class}
+		type="button"
+		data-size={!unstyled && isPresetSize(size) ? size : undefined}
+		data-active={!unstyled && active ? "" : undefined}
+		data-focused={!unstyled && focused ? "" : undefined}
+		data-touch-friendly={!unstyled && isTouchFriendly ? "" : undefined}
+		{...rest}
+	>
 		{@render content()}
 	</button>
 {/if}

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

@@ -8,7 +8,7 @@ export interface Props extends Omit<HTMLButtonAttributes, "children" | "class">
     active?: boolean;
     /** Whether this item is currently focused via keyboard navigation */
     focused?: boolean;
-    /** Size preset affecting padding and min-height (sm, md, lg) */
+    /** Size preset affecting padding and min-height (sm, md, lg) or custom Tailwind classes */
     size?: "sm" | "md" | "lg" | string;
     /** Skip all default styling, use only custom classes */
     unstyled?: boolean;
@@ -33,15 +33,6 @@ export interface Props extends Omit<HTMLButtonAttributes, "children" | "class">
     /** Bindable element reference */
     el?: HTMLButtonElement | HTMLAnchorElement;
 }
-export interface ListItemButtonPresetClasses {
-    size: Record<string, string>;
-    touchFriendly: string;
-}
-export declare const LIST_ITEM_BUTTON_STUIC_BASE_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\ttext-left\n\t\trounded-[var(--lib-radius)]\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\n\t\tbg-lib-bg dark:bg-lib-bg-dark\n\t\ttext-lib-text dark:text-lib-text-dark\n\n\t\tborder border-lib-border dark:border-lib-border-dark\n\n\t\thover:bg-lib-hover-bg dark:hover:bg-lib-hover-bg-dark\n\t\thover:text-lib-hover-text dark:hover:text-lib-hover-text-dark\n\t\thover:border-lib-hover-border dark:hover:border-lib-hover-border-dark\n\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-lib-focus-bg dark:focus-visible:bg-lib-focus-bg-dark\n\t\tfocus-visible:text-lib-focus-text dark:focus-visible:text-lib-focus-text-dark\n\t\tfocus-visible:border-lib-focus-border dark:focus-visible:border-lib-focus-border-dark\n\n\t\tdisabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none\n\t";
-export declare const LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES: ListItemButtonPresetClasses;
-export declare const LIST_ITEM_BUTTON_ACTIVE_CLASSES = "\n\t\tbg-lib-active-bg dark:bg-lib-active-bg-dark\n\t\ttext-lib-active-text dark:text-lib-active-text-dark\n\t\tborder-lib-active-border dark:border-lib-active-border-dark\n\t";
-export declare const LIST_ITEM_BUTTON_FOCUSED_CLASSES = "\n\t\tbg-lib-focus-bg dark:bg-lib-focus-bg-dark\n\t\ttext-lib-focus-text dark:text-lib-focus-text-dark\n\t\tborder-lib-focus-border dark:border-lib-focus-border-dark\n\t";
-import "./index.css";
 declare const ListItemButton: import("svelte").Component<Props, {}, "el">;
 type ListItemButton = ReturnType<typeof ListItemButton>;
 export default ListItemButton;

package/dist/components/ListItemButton/README.md

@@ -19,7 +19,7 @@ A versatile button component for list-like contexts such as dropdown menus, comm
 | `children` | `Snippet` | - | Content displayed in the button |
 | `active` | `boolean` | `false` | Whether this item is currently active/selected |
 | `focused` | `boolean` | `false` | Whether this item is focused via keyboard navigation |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size preset affecting padding and min-height |
+| `size` | `"sm" \| "md" \| "lg" \| string` | `"md"` | Size preset or custom Tailwind classes |
 | `unstyled` | `boolean` | `false` | Skip all default styling, use only custom classes |
 | `touchFriendly` | `boolean \| "auto"` | `false` | Enable touch-friendly sizing. `"auto"` detects coarse pointer. |
 | `contentBefore` | `THC` | - | Icon/content displayed before the main content |
@@ -100,81 +100,136 @@ A versatile button component for list-like contexts such as dropdown menus, comm
 
 ## CSS Variables
 
-All colors support customization via CSS variables. Define them on a parent element to override defaults.
+All styling can be customized via CSS variables. Define them on a parent element or in `:root` to override defaults.
 
-### Border Radius
+### Structure Tokens
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--lib-radius` | `var(--radius-md)` | Border radius |
+| `--stuic-list-item-button-radius` | `var(--radius-md)` | Border radius |
+| `--stuic-list-item-button-transition` | `150ms` | Transition duration |
+| `--stuic-list-item-button-gap` | `0.5rem` | Gap between icon and content |
 
-### Base State
+### Focus Ring Tokens
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--color-lib-bg` | `neutral-200` | Background color |
-| `--color-lib-bg-dark` | `neutral-600` | Background color (dark mode) |
-| `--color-lib-text` | `black` | Text color |
-| `--color-lib-text-dark` | `neutral-100` | Text color (dark mode) |
-| `--color-lib-border` | `transparent` | Border color |
-| `--color-lib-border-dark` | `transparent` | Border color (dark mode) |
+| `--stuic-list-item-button-ring-width` | `3px` | Focus ring width |
+| `--stuic-list-item-button-ring-offset` | `0px` | Focus ring offset |
+| `--stuic-list-item-button-ring-color` | `var(--stuic-color-ring)` | Focus ring color |
 
-### Hover State
+### Size Tokens: Small (`size="sm"`)
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--color-lib-hover-bg` | `neutral-500` | Hover background |
-| `--color-lib-hover-bg-dark` | `neutral-200` | Hover background (dark mode) |
-| `--color-lib-hover-text` | `white` | Hover text color |
-| `--color-lib-hover-text-dark` | `neutral-900` | Hover text color (dark mode) |
-| `--color-lib-hover-border` | `transparent` | Hover border color |
-| `--color-lib-hover-border-dark` | `transparent` | Hover border color (dark mode) |
+| `--stuic-list-item-button-padding-x-sm` | `0.5rem` | Horizontal padding |
+| `--stuic-list-item-button-padding-y-sm` | `0.375rem` | Vertical padding |
+| `--stuic-list-item-button-font-size-sm` | `var(--text-sm)` | Font size |
+| `--stuic-list-item-button-min-height-sm` | `2.25rem` | Minimum height (36px) |
 
-### Active State
+### Size Tokens: Medium (`size="md"`)
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--color-lib-active-bg` | `neutral-500` | Active background |
-| `--color-lib-active-bg-dark` | `neutral-200` | Active background (dark mode) |
-| `--color-lib-active-text` | `white` | Active text color |
-| `--color-lib-active-text-dark` | `neutral-900` | Active text color (dark mode) |
-| `--color-lib-active-border` | `transparent` | Active border color |
-| `--color-lib-active-border-dark` | `transparent` | Active border color (dark mode) |
+| `--stuic-list-item-button-padding-x-md` | `0.625rem` | Horizontal padding |
+| `--stuic-list-item-button-padding-y-md` | `0.5rem` | Vertical padding |
+| `--stuic-list-item-button-font-size-md` | `var(--text-base)` | Font size |
+| `--stuic-list-item-button-min-height-md` | `2.5rem` | Minimum height (40px) |
 
-### Focus State
+### Size Tokens: Large (`size="lg"`)
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--color-lib-focus-bg` | `neutral-500` | Focus background |
-| `--color-lib-focus-bg-dark` | `neutral-200` | Focus background (dark mode) |
-| `--color-lib-focus-text` | `white` | Focus text color |
-| `--color-lib-focus-text-dark` | `neutral-900` | Focus text color (dark mode) |
-| `--color-lib-focus-border` | `transparent` | Focus border color |
-| `--color-lib-focus-border-dark` | `transparent` | Focus border color (dark mode) |
+| `--stuic-list-item-button-padding-x-lg` | `0.75rem` | Horizontal padding |
+| `--stuic-list-item-button-padding-y-lg` | `0.625rem` | Vertical padding |
+| `--stuic-list-item-button-font-size-lg` | `var(--text-base)` | Font size |
+| `--stuic-list-item-button-min-height-lg` | `2.75rem` | Minimum height (44px) |
+
+### Touch-Friendly Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-list-item-button-min-height-touch` | `2.75rem` | Touch-friendly min height (44px) |
+| `--stuic-list-item-button-padding-y-touch` | `0.625rem` | Touch-friendly vertical padding |
+
+### Color Tokens: Base State
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-list-item-button-bg` | `var(--stuic-color-muted)` | Background color |
+| `--stuic-list-item-button-text` | `var(--stuic-color-foreground)` | Text color |
+| `--stuic-list-item-button-border` | `transparent` | Border color |
+
+### Color Tokens: Hover State
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-list-item-button-bg-hover` | `var(--stuic-color-primary)` | Hover background |
+| `--stuic-list-item-button-text-hover` | `var(--stuic-color-primary-foreground)` | Hover text color |
+| `--stuic-list-item-button-border-hover` | `transparent` | Hover border color |
+
+### Color Tokens: Active State (selected)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-list-item-button-bg-active` | `var(--stuic-color-primary)` | Active background |
+| `--stuic-list-item-button-text-active` | `var(--stuic-color-primary-foreground)` | Active text color |
+| `--stuic-list-item-button-border-active` | `transparent` | Active border color |
+
+### Color Tokens: Focus State (keyboard navigation)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-list-item-button-bg-focus` | `var(--stuic-color-primary)` | Focus background |
+| `--stuic-list-item-button-text-focus` | `var(--stuic-color-primary-foreground)` | Focus text color |
+| `--stuic-list-item-button-border-focus` | `transparent` | Focus border color |
 
 ### Custom Theme Example
 
 ```svelte
 <div style="
-  --color-lib-hover-bg: var(--color-blue-500);
-  --color-lib-hover-bg-dark: var(--color-blue-600);
-  --color-lib-active-bg: var(--color-blue-600);
-  --color-lib-active-bg-dark: var(--color-blue-500);
+  --stuic-list-item-button-bg-hover: var(--color-blue-500);
+  --stuic-list-item-button-bg-active: var(--color-blue-600);
 ">
   <ListItemButton>Blue theme</ListItemButton>
   <ListItemButton active>Active blue</ListItemButton>
 </div>
 ```
 
-## Exported Constants
+### Global Theme Override
+
+```css
+/* In your app.css */
+:root {
+  --stuic-list-item-button-radius: 0;
+  --stuic-list-item-button-bg-hover: var(--color-indigo-500);
+  --stuic-list-item-button-text-hover: white;
+}
+```
+
+## Data Attributes
+
+The component uses data attributes for styling states. These are automatically applied based on props:
+
+| Attribute | Applied When | CSS Selector |
+|-----------|--------------|--------------|
+| `data-size="sm\|md\|lg"` | When `size` is a preset value | `.stuic-list-item-button[data-size="md"]` |
+| `data-active` | When `active={true}` | `.stuic-list-item-button[data-active]` |
+| `data-focused` | When `focused={true}` | `.stuic-list-item-button[data-focused]` |
+| `data-touch-friendly` | When `touchFriendly={true}` or auto-detected | `.stuic-list-item-button[data-touch-friendly]` |
+
+### Custom Styling via Data Attributes
 
-The component exports several class constants for advanced customization:
+```css
+/* Example: Custom active state styling */
+.stuic-list-item-button[data-active] {
+  background: var(--color-green-500);
+  color: white;
+}
 
-```typescript
-import {
-  LIST_ITEM_BUTTON_STUIC_BASE_CLASSES,
-  LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES,
-  LIST_ITEM_BUTTON_ACTIVE_CLASSES,
-  LIST_ITEM_BUTTON_FOCUSED_CLASSES,
-} from "stuic";
+/* Example: Different padding for all sizes */
+.stuic-list-item-button[data-size] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 ```