@marianmeres/stuic 3.0.0 → 3.0.2

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

@@ -41,7 +41,6 @@
 	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,

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

@@ -33,7 +33,6 @@ export interface Props extends Omit<HTMLButtonAttributes, "children" | "class">
     /** Bindable element reference */
     el?: HTMLButtonElement | HTMLAnchorElement;
 }
-import "./index.css";
 declare const ListItemButton: import("svelte").Component<Props, {}, "el">;
 type ListItemButton = ReturnType<typeof ListItemButton>;
 export default ListItemButton;

package/dist/components/ListItemButton/index.css

@@ -58,120 +58,122 @@
 	--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);
+@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 */
+	.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/Modal/Modal.svelte

@@ -27,7 +27,6 @@
 <script lang="ts">
 	import ModalDialog from "../ModalDialog/ModalDialog.svelte";
 	import { twMerge } from "../../utils/tw-merge.js";
-	import "./index.css";
 
 	let {
 		visible = $bindable(false),

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

@@ -20,7 +20,6 @@ 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;

package/dist/components/Modal/index.css

@@ -13,24 +13,26 @@
 	--stuic-modal-radius: var(--radius-md);
 }
 
-/* ============================================================================
-   BASE STYLES
-   ============================================================================ */
-
-.stuic-modal {
-	background: var(--stuic-modal-bg);
-	color: var(--stuic-modal-text);
-	border-radius: 0; /* Mobile: fullscreen, no radius */
-}
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
 
-@media (min-width: 48rem) {
-	/* md breakpoint */
 	.stuic-modal {
-		border-radius: var(--stuic-modal-radius);
+		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;
+	/* Thin scrollbar for main content area */
+	.stuic-modal .main {
+		scrollbar-width: thin;
+	}
 }

package/dist/components/ModalDialog/index.css

@@ -20,38 +20,40 @@
 	--stuic-modal-dialog-shadow: var(--shadow-xl);
 }
 
-/* ============================================================================
-   BACKDROP STYLES
-   ============================================================================ */
+@layer components {
+	/* ============================================================================
+	   BACKDROP STYLES
+	   ============================================================================ */
 
-.stuic-modal-dialog::backdrop {
-	background: var(--stuic-modal-dialog-backdrop);
-}
+	.stuic-modal-dialog::backdrop {
+		background: var(--stuic-modal-dialog-backdrop);
+	}
 
-/* ============================================================================
-   CONTENT BOX STYLES
-   ============================================================================ */
+	/* ============================================================================
+	   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 .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);
+	}
 
-.stuic-modal-dialog[open]::backdrop {
-	animation: stuic-modal-dialog-fadeIn var(--stuic-modal-dialog-transition) ease-out;
-}
+	/* ============================================================================
+	   ANIMATIONS
+	   ============================================================================ */
 
-@keyframes stuic-modal-dialog-fadeIn {
-	from {
-		opacity: 0;
+	.stuic-modal-dialog[open]::backdrop {
+		animation: stuic-modal-dialog-fadeIn var(--stuic-modal-dialog-transition) ease-out;
 	}
-	to {
-		opacity: 1;
+
+	@keyframes stuic-modal-dialog-fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 }