@marianmeres/stuic 2.65.0 → 3.0.0

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,57 +35,6 @@
 		/** 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">
@@ -115,31 +64,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 +106,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,14 +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>;

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;
+}
 ```

package/dist/components/ListItemButton/index.css

@@ -1,58 +1,177 @@
-/* Border radius (0.375rem = rounded-md) */
+/* =============================================================================
+   LIST ITEM BUTTON COMPONENT TOKENS
+   Override globally: :root { --stuic-list-item-button-radius: 0; }
+   Override locally:  <ListItemButton style="--stuic-list-item-button-radius: 9999px;">
+   ============================================================================= */
+
 :root {
-	--lib-radius: var(--radius-md);
-}
-
-/* prettier-ignore */
-@theme inline {
-
-	/* "lib" -> list item button */
-
-	/* Private defaults (for human readability) */
-	--_lib-bg: var(--color-neutral-200);
-	--_lib-bg-hi: var(--color-neutral-500);
-	--_lib-bg-dark: var(--color-neutral-600);
-	--_lib-bg-hi-dark: var(--color-neutral-200);
-
-	--_lib-text: var(--color-black);
-	--_lib-text-hi: var(--color-white);
-	--_lib-text-dark: var(--color-neutral-100);
-	--_lib-text-hi-dark: var(--color-neutral-900);
-	
-	--_lib-border: transparent;
-	--_lib-border-hi: transparent;
-	--_lib-border-dark: transparent;
-	--_lib-border-hi-dark: transparent;
-
-	/* Base state */
-	--color-lib-bg:          var(--color-lib-bg,          var(--_lib-bg));
-	--color-lib-bg-dark:     var(--color-lib-bg-dark,     var(--_lib-bg-dark));
-	--color-lib-text:        var(--color-lib-text,        var(--_lib-text));
-	--color-lib-text-dark:   var(--color-lib-text-dark,   var(--_lib-text-dark));
-	--color-lib-border:      var(--color-lib-border,      var(--_lib-border));
-	--color-lib-border-dark: var(--color-lib-border-dark, var(--_lib-border-dark));
-
-	/* Hover state */
-	--color-lib-hover-bg:          var(--color-lib-hover-bg,          var(--_lib-bg-hi));
-	--color-lib-hover-bg-dark:     var(--color-lib-hover-bg-dark,     var(--_lib-bg-hi-dark));
-	--color-lib-hover-text:        var(--color-lib-hover-text,        var(--_lib-text-hi));
-	--color-lib-hover-text-dark:   var(--color-lib-hover-text-dark,   var(--_lib-text-hi-dark));
-	--color-lib-hover-border:      var(--color-lib-hover-border,      var(--_lib-border-hi));
-	--color-lib-hover-border-dark: var(--color-lib-hover-border-dark, var(--_lib-border-hi-dark));
-
-	/* Active/Selected state */
-	--color-lib-active-bg:          var(--color-lib-active-bg,          var(--_lib-bg-hi));
-	--color-lib-active-bg-dark:     var(--color-lib-active-bg-dark,     var(--_lib-bg-hi-dark));
-	--color-lib-active-text:        var(--color-lib-active-text,        var(--_lib-text-hi));
-	--color-lib-active-text-dark:   var(--color-lib-active-text-dark,   var(--_lib-text-hi-dark));
-	--color-lib-active-border:      var(--color-lib-active-border,      var(--_lib-border-hi));
-	--color-lib-active-border-dark: var(--color-lib-active-border-dark, var(--_lib-border-hi-dark));
-
-	/* Focus-visible state (keyboard focus) */
-	--color-lib-focus-bg:          var(--color-lib-focus-bg,          var(--_lib-bg-hi));
-	--color-lib-focus-bg-dark:     var(--color-lib-focus-bg-dark,     var(--_lib-bg-hi-dark));
-	--color-lib-focus-text:        var(--color-lib-focus-text,        var(--_lib-text-hi));
-	--color-lib-focus-text-dark:   var(--color-lib-focus-text-dark,   var(--_lib-text-hi-dark));
-	--color-lib-focus-border:      var(--color-lib-focus-border,      var(--_lib-border-hi));
-	--color-lib-focus-border-dark: var(--color-lib-focus-border-dark, var(--_lib-border-hi-dark));
+	/* Structure tokens */
+	--stuic-list-item-button-radius: var(--radius-md);
+	--stuic-list-item-button-transition: 150ms;
+	--stuic-list-item-button-gap: 0.5rem;
+
+	/* Focus ring */
+	--stuic-list-item-button-ring-width: 3px;
+	--stuic-list-item-button-ring-offset: 0px;
+	--stuic-list-item-button-ring-color: var(--stuic-color-ring);
+
+	/* Size: sm */
+	--stuic-list-item-button-padding-x-sm: 0.5rem;
+	--stuic-list-item-button-padding-y-sm: 0.375rem;
+	--stuic-list-item-button-font-size-sm: var(--text-sm);
+	--stuic-list-item-button-min-height-sm: 2.25rem; /* 36px */
+
+	/* Size: md */
+	--stuic-list-item-button-padding-x-md: 0.625rem;
+	--stuic-list-item-button-padding-y-md: 0.5rem;
+	--stuic-list-item-button-font-size-md: var(--text-base);
+	--stuic-list-item-button-min-height-md: 2.5rem; /* 40px */
+
+	/* Size: lg */
+	--stuic-list-item-button-padding-x-lg: 0.75rem;
+	--stuic-list-item-button-padding-y-lg: 0.625rem;
+	--stuic-list-item-button-font-size-lg: var(--text-base);
+	--stuic-list-item-button-min-height-lg: 2.75rem; /* 44px - Apple HIG minimum */
+
+	/* Touch-friendly modifier */
+	--stuic-list-item-button-min-height-touch: 2.75rem; /* 44px */
+	--stuic-list-item-button-padding-y-touch: 0.625rem;
+
+	/* Color tokens: Base state */
+	--stuic-list-item-button-bg: var(--stuic-color-muted);
+	--stuic-list-item-button-text: var(--stuic-color-foreground);
+	--stuic-list-item-button-border: transparent;
+
+	/* Color tokens: Hover state */
+	--stuic-list-item-button-bg-hover: var(--stuic-color-primary);
+	--stuic-list-item-button-text-hover: var(--stuic-color-primary-foreground);
+	--stuic-list-item-button-border-hover: transparent;
+
+	/* Color tokens: Active/Selected state */
+	--stuic-list-item-button-bg-active: var(--stuic-color-primary);
+	--stuic-list-item-button-text-active: var(--stuic-color-primary-foreground);
+	--stuic-list-item-button-border-active: transparent;
+
+	/* Color tokens: Focus state (keyboard navigation) */
+	--stuic-list-item-button-bg-focus: var(--stuic-color-primary);
+	--stuic-list-item-button-text-focus: var(--stuic-color-primary-foreground);
+	--stuic-list-item-button-border-focus: transparent;
+}
+
+/* =============================================================================
+   BASE STYLES
+   ============================================================================= */
+
+.stuic-list-item-button {
+	/* Layout */
+	display: flex;
+	align-items: center;
+	gap: var(--stuic-list-item-button-gap);
+	width: 100%;
+
+	/* Typography */
+	text-align: left;
+	text-decoration: none;
+
+	/* Box model */
+	border-width: 1px;
+	border-style: solid;
+	border-radius: var(--stuic-list-item-button-radius);
+
+	/* Colors */
+	background: var(--stuic-list-item-button-bg);
+	color: var(--stuic-list-item-button-text);
+	border-color: var(--stuic-list-item-button-border);
+
+	/* Interaction */
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	touch-action: manipulation;
+	transition:
+		background var(--stuic-list-item-button-transition),
+		color var(--stuic-list-item-button-transition),
+		border-color var(--stuic-list-item-button-transition);
+}
+
+/* =============================================================================
+   STATE STYLES
+   ============================================================================= */
+
+/* Hover state */
+.stuic-list-item-button:hover:not(:disabled):not([data-active]) {
+	background: var(--stuic-list-item-button-bg-hover);
+	color: var(--stuic-list-item-button-text-hover);
+	border-color: var(--stuic-list-item-button-border-hover);
+}
+
+/* Focus styles */
+.stuic-list-item-button:focus {
+	outline: none;
+}
+
+.stuic-list-item-button:focus-visible:not([data-active]) {
+	background: var(--stuic-list-item-button-bg-focus);
+	color: var(--stuic-list-item-button-text-focus);
+	border-color: var(--stuic-list-item-button-border-focus);
+	outline: var(--stuic-list-item-button-ring-width) solid
+		var(--stuic-list-item-button-ring-color);
+	outline-offset: var(--stuic-list-item-button-ring-offset);
+}
+
+/* Active/Selected state (via data attribute) */
+.stuic-list-item-button[data-active] {
+	background: var(--stuic-list-item-button-bg-active);
+	color: var(--stuic-list-item-button-text-active);
+	border-color: var(--stuic-list-item-button-border-active);
+}
+
+/* Focused state (keyboard navigation highlight, distinct from focus-visible) */
+.stuic-list-item-button[data-focused]:not([data-active]) {
+	background: var(--stuic-list-item-button-bg-focus);
+	color: var(--stuic-list-item-button-text-focus);
+	border-color: var(--stuic-list-item-button-border-focus);
+}
+
+/* Disabled state */
+.stuic-list-item-button:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+/* =============================================================================
+   SIZE VARIANTS
+   ============================================================================= */
+
+.stuic-list-item-button[data-size="sm"] {
+	padding: var(--stuic-list-item-button-padding-y-sm)
+		var(--stuic-list-item-button-padding-x-sm);
+	font-size: var(--stuic-list-item-button-font-size-sm);
+	min-height: var(--stuic-list-item-button-min-height-sm);
+}
+
+.stuic-list-item-button[data-size="md"] {
+	padding: var(--stuic-list-item-button-padding-y-md)
+		var(--stuic-list-item-button-padding-x-md);
+	font-size: var(--stuic-list-item-button-font-size-md);
+	min-height: var(--stuic-list-item-button-min-height-md);
+}
+
+.stuic-list-item-button[data-size="lg"] {
+	padding: var(--stuic-list-item-button-padding-y-lg)
+		var(--stuic-list-item-button-padding-x-lg);
+	font-size: var(--stuic-list-item-button-font-size-lg);
+	min-height: var(--stuic-list-item-button-min-height-lg);
+}
+
+/* =============================================================================
+   TOUCH-FRIENDLY MODIFIER
+   Ensures minimum 44px touch target per Apple HIG guidelines
+   ============================================================================= */
+
+.stuic-list-item-button[data-touch-friendly] {
+	min-height: var(--stuic-list-item-button-min-height-touch);
+	padding-top: var(--stuic-list-item-button-padding-y-touch);
+	padding-bottom: var(--stuic-list-item-button-padding-y-touch);
 }

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

@@ -1 +1 @@
-export { default as ListItemButton, type Props as ListItemButtonProps, type ListItemButtonPresetClasses, LIST_ITEM_BUTTON_STUIC_BASE_CLASSES, LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES, LIST_ITEM_BUTTON_ACTIVE_CLASSES, LIST_ITEM_BUTTON_FOCUSED_CLASSES, } from "./ListItemButton.svelte";
+export { default as ListItemButton, type Props as ListItemButtonProps, } from "./ListItemButton.svelte";

package/dist/components/ListItemButton/index.js

@@ -1 +1 @@
-export { default as ListItemButton, LIST_ITEM_BUTTON_STUIC_BASE_CLASSES, LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES, LIST_ITEM_BUTTON_ACTIVE_CLASSES, LIST_ITEM_BUTTON_FOCUSED_CLASSES, } from "./ListItemButton.svelte";
+export { default as ListItemButton, } from "./ListItemButton.svelte";

package/dist/components/Modal/Modal.svelte

@@ -27,6 +27,7 @@
 <script lang="ts">
 	import ModalDialog from "../ModalDialog/ModalDialog.svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import "./index.css";
 
 	let {
 		visible = $bindable(false),
@@ -103,9 +104,8 @@
 	>
 		<div
 			class={twMerge(
-				"bg-white dark:bg-neutral-800",
+				"stuic-modal",
 				"flex flex-col overflow-hidden",
-				"rounded-none md:rounded-md",
 				"w-full flex-1",
 				classProp
 			)}
@@ -126,9 +126,3 @@
 		</div>
 	</div>
 </ModalDialog>
-
-<style>
-	.main {
-		scrollbar-width: thin;
-	}
-</style>

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

@@ -20,6 +20,7 @@ export interface Props {
     /** Disable body scroll lock when modal is open */
     noScrollLock?: boolean;
 }
+import "./index.css";
 declare const Modal: import("svelte").Component<Props, {
     close: () => void;
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;