@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/ListItemButton/index.css

@@ -1,58 +1,179 @@
-/* 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);
+	/* 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;
 }
 
-/* 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));
+@layer components {
+	/* =============================================================================
+	   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 */
-	--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));
+	.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

@@ -103,9 +103,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 +125,3 @@
 		</div>
 	</div>
 </ModalDialog>
-
-<style>
-	.main {
-		scrollbar-width: thin;
-	}
-</style>

package/dist/components/Modal/README.md

@@ -118,6 +118,35 @@ By default, Modal is:
 - **Mobile**: Full screen with 1rem margins from viewport edges
 - **Desktop (md+)**: Centered, max-width 768px, auto height with max 80vh
 
+## CSS Variables
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-modal-bg` | `--stuic-color-surface` | Modal background color |
+| `--stuic-modal-text` | `--stuic-color-surface-foreground` | Modal text color |
+| `--stuic-modal-radius` | `--radius-md` | Border radius (desktop only) |
+
+### Customization Examples
+
+```css
+/* Global override */
+:root {
+  --stuic-modal-bg: var(--stuic-color-background);
+  --stuic-modal-radius: var(--radius-lg);
+}
+```
+
+```svelte
+<!-- Local override -->
+<Modal style="--stuic-modal-bg: var(--stuic-color-muted);">
+  Content with muted background
+</Modal>
+```
+
+Note: Modal inherits backdrop styling from ModalDialog. See ModalDialog documentation for backdrop customization (`--stuic-modal-dialog-backdrop`).
+
 ## Relationship to ModalDialog
 
 Modal is a higher-level component built on `ModalDialog`. It provides:

package/dist/components/Modal/index.css

@@ -0,0 +1,38 @@
+/* ============================================================================
+   MODAL COMPONENT TOKENS
+   Override globally: :root { --stuic-modal-radius: 0; }
+   Override locally:  <Modal style="--stuic-modal-radius: var(--radius-lg);">
+   ============================================================================ */
+
+:root {
+	/* Background & text - reference theme tokens */
+	--stuic-modal-bg: var(--stuic-color-surface);
+	--stuic-modal-text: var(--stuic-color-surface-foreground);
+
+	/* Border radius (desktop only - mobile is fullscreen) */
+	--stuic-modal-radius: var(--radius-md);
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-modal {
+		background: var(--stuic-modal-bg);
+		color: var(--stuic-modal-text);
+		border-radius: 0; /* Mobile: fullscreen, no radius */
+	}
+
+	@media (min-width: 48rem) {
+		/* md breakpoint */
+		.stuic-modal {
+			border-radius: var(--stuic-modal-radius);
+		}
+	}
+
+	/* Thin scrollbar for main content area */
+	.stuic-modal .main {
+		scrollbar-width: thin;
+	}
+}

package/dist/components/ModalDialog/ModalDialog.svelte

@@ -137,7 +137,7 @@
 			"fixed inset-4 m-auto size-auto",
 			"flex justify-center items-center",
 			"focus:outline-none focus-visible:outline-none",
-			"bg-transparent backdrop:bg-black/40",
+			"bg-transparent",
 			classDialog
 		)}
 		onclick={(e) => {
@@ -181,28 +181,9 @@
 			onpointerdown={stopPropagation()}
 			onclick={stopPropagation()}
 			data-type={type}
-			class={twMerge(
-				`box relative size-full overflow-auto
-				text-black dark:text-white bg-white dark:bg-neutral-800`,
-				classProp
-			)}
+			class={twMerge("box relative size-full overflow-auto", classProp)}
 		>
 			{@render children?.()}
 		</div>
 	</dialog>
 {/if}
-
-<style>
-	dialog[open]::backdrop {
-		animation: fadeIn 0.15s ease-out;
-	}
-
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-</style>

package/dist/components/ModalDialog/README.md

@@ -108,6 +108,41 @@ A modal component using the native HTML `<dialog>` element with `showModal()`. P
 </script>
 ```
 
+## CSS Variables
+
+### Component Tokens
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-modal-dialog-radius` | `--radius-lg` | Border radius of content box |
+| `--stuic-modal-dialog-transition` | `150ms` | Animation/transition duration |
+| `--stuic-modal-dialog-backdrop` | `rgb(0 0 0 / 0.4)` | Backdrop overlay color |
+| `--stuic-modal-dialog-bg` | `--stuic-color-surface` | Content box background |
+| `--stuic-modal-dialog-text` | `--stuic-color-surface-foreground` | Content box text color |
+| `--stuic-modal-dialog-shadow` | `--shadow-xl` | Content box shadow |
+
+### Customization Examples
+
+```css
+/* Global override - all dialogs */
+:root {
+  --stuic-modal-dialog-radius: 0;
+  --stuic-modal-dialog-backdrop: rgb(0 0 0 / 0.7);
+}
+```
+
+```svelte
+<!-- Local override - single dialog -->
+<ModalDialog
+  bind:this={dialog}
+  style="--stuic-modal-dialog-radius: 9999px;"
+>
+  Content with pill-shaped radius
+</ModalDialog>
+```
+
 ## Relationship to Modal
 
 `Modal` is a higher-level component built on top of `ModalDialog`.

package/dist/components/ModalDialog/index.css

@@ -0,0 +1,59 @@
+/* ============================================================================
+   MODAL DIALOG COMPONENT TOKENS
+   Override globally: :root { --stuic-modal-dialog-radius: 0; }
+   Override locally:  <ModalDialog style="--stuic-modal-dialog-radius: 9999px;">
+   ============================================================================ */
+
+:root {
+	/* Core customization */
+	--stuic-modal-dialog-radius: var(--radius-lg);
+	--stuic-modal-dialog-transition: 150ms;
+
+	/* Backdrop */
+	--stuic-modal-dialog-backdrop: rgb(0 0 0 / 0.4);
+
+	/* Content box - reference theme tokens */
+	--stuic-modal-dialog-bg: var(--stuic-color-surface);
+	--stuic-modal-dialog-text: var(--stuic-color-surface-foreground);
+
+	/* Optional shadow for elevation */
+	--stuic-modal-dialog-shadow: var(--shadow-xl);
+}
+
+@layer components {
+	/* ============================================================================
+	   BACKDROP STYLES
+	   ============================================================================ */
+
+	.stuic-modal-dialog::backdrop {
+		background: var(--stuic-modal-dialog-backdrop);
+	}
+
+	/* ============================================================================
+	   CONTENT BOX STYLES
+	   ============================================================================ */
+
+	.stuic-modal-dialog .box {
+		background: var(--stuic-modal-dialog-bg);
+		color: var(--stuic-modal-dialog-text);
+		border-radius: var(--stuic-modal-dialog-radius);
+		box-shadow: var(--stuic-modal-dialog-shadow);
+	}
+
+	/* ============================================================================
+	   ANIMATIONS
+	   ============================================================================ */
+
+	.stuic-modal-dialog[open]::backdrop {
+		animation: stuic-modal-dialog-fadeIn var(--stuic-modal-dialog-transition) ease-out;
+	}
+
+	@keyframes stuic-modal-dialog-fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+}