@marianmeres/stuic 2.66.0 → 3.0.0

package/dist/components/Avatar/index.css

@@ -0,0 +1,128 @@
+/* ============================================================================
+   AVATAR COMPONENT TOKENS
+   Override globally: :root { --stuic-avatar-radius: 0.5rem; }
+   Override locally:  <Avatar style="--stuic-avatar-radius: 0;">
+   ============================================================================ */
+
+:root {
+	/* Component-level customization tokens */
+	--stuic-avatar-radius: 9999px;
+	--stuic-avatar-font-weight: var(--font-weight-medium);
+	--stuic-avatar-transition: 150ms;
+
+	/* Default colors (uses muted role colors) */
+	--stuic-avatar-bg: var(--stuic-color-muted);
+	--stuic-avatar-fg: var(--stuic-color-muted-foreground);
+
+	/* Focus ring (for interactive/button mode) */
+	--stuic-avatar-ring-width: 3px;
+	--stuic-avatar-ring-offset: 0px;
+	--stuic-avatar-ring-color: var(--stuic-color-ring);
+
+	/* Size: sm */
+	--stuic-avatar-size-sm: calc(var(--spacing) * 8);
+	--stuic-avatar-font-size-sm: var(--text-xs);
+
+	/* Size: md */
+	--stuic-avatar-size-md: calc(var(--spacing) * 10);
+	--stuic-avatar-font-size-md: var(--text-base);
+
+	/* Size: lg */
+	--stuic-avatar-size-lg: calc(var(--spacing) * 12);
+	--stuic-avatar-font-size-lg: var(--text-lg);
+
+	/* Size: xl */
+	--stuic-avatar-size-xl: calc(var(--spacing) * 14);
+	--stuic-avatar-font-size-xl: var(--text-xl);
+
+	/* Size: 2xl */
+	--stuic-avatar-size-2xl: calc(var(--spacing) * 16);
+	--stuic-avatar-font-size-2xl: var(--text-2xl);
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+.stuic-avatar {
+	/* Layout */
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	overflow: hidden;
+
+	/* Typography */
+	font-weight: var(--stuic-avatar-font-weight);
+
+	/* Box model */
+	border-radius: var(--stuic-avatar-radius);
+
+	/* Colors (can be overridden by autoColor inline styles) */
+	background: var(--stuic-avatar-bg);
+	color: var(--stuic-avatar-fg);
+
+	/* Transition for interactive mode */
+	transition:
+		background var(--stuic-avatar-transition),
+		color var(--stuic-avatar-transition),
+		opacity var(--stuic-avatar-transition);
+}
+
+/* ============================================================================
+   SIZE VARIANTS
+   ============================================================================ */
+
+.stuic-avatar[data-size="sm"] {
+	width: var(--stuic-avatar-size-sm);
+	height: var(--stuic-avatar-size-sm);
+	font-size: var(--stuic-avatar-font-size-sm);
+}
+
+.stuic-avatar[data-size="md"] {
+	width: var(--stuic-avatar-size-md);
+	height: var(--stuic-avatar-size-md);
+	font-size: var(--stuic-avatar-font-size-md);
+}
+
+.stuic-avatar[data-size="lg"] {
+	width: var(--stuic-avatar-size-lg);
+	height: var(--stuic-avatar-size-lg);
+	font-size: var(--stuic-avatar-font-size-lg);
+}
+
+.stuic-avatar[data-size="xl"] {
+	width: var(--stuic-avatar-size-xl);
+	height: var(--stuic-avatar-size-xl);
+	font-size: var(--stuic-avatar-font-size-xl);
+}
+
+.stuic-avatar[data-size="2xl"] {
+	width: var(--stuic-avatar-size-2xl);
+	height: var(--stuic-avatar-size-2xl);
+	font-size: var(--stuic-avatar-font-size-2xl);
+}
+
+/* ============================================================================
+   INTERACTIVE MODE (button)
+   ============================================================================ */
+
+.stuic-avatar[data-interactive] {
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.stuic-avatar[data-interactive]:hover {
+	opacity: 0.85;
+}
+
+.stuic-avatar[data-interactive]:active {
+	opacity: 0.75;
+}
+
+/* Focus styles */
+.stuic-avatar[data-interactive]:focus-visible {
+	outline: var(--stuic-avatar-ring-width) solid var(--stuic-avatar-ring-color);
+	outline-offset: var(--stuic-avatar-ring-offset);
+}

package/dist/components/Backdrop/Backdrop.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { FocusTrapOptions } from "../../actions/focus-trap.js";
-	import { BodyScroll, focusTrap as focusTrapAction, twMerge } from "../../index.js";
+	import { BodyScroll, focusTrap as focusTrapAction } from "../../index.js";
 	import { createClog } from "@marianmeres/clog";
 	import { watch } from "runed";
 	import { onDestroy } from "svelte";
@@ -26,6 +26,9 @@
 </script>
 
 <script lang="ts">
+	import "./index.css";
+	import { twMerge } from "../../utils/tw-merge.js";
+
 	const clog = createClog("Backdrop", { color: "auto" });
 
 	let {
@@ -142,6 +145,9 @@
 		}
 		return opts;
 	});
+
+	// Build class string - add base class for CSS targeting, allow user overrides
+	let _class = $derived(twMerge("stuic-backdrop", classProp));
 </script>
 
 {#if visible}
@@ -149,7 +155,7 @@
 		bind:this={el}
 		role="presentation"
 		tabindex="-1"
-		class={twMerge("fixed inset-0 flex z-10 h-dvh", classProp)}
+		class={_class}
 		in:fade={{ duration: fadeInDuration }}
 		out:fade={{ duration: fadeOutDuration }}
 		use:focusTrapAction={focusTrapOptions}

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

@@ -13,6 +13,7 @@ export interface Props extends Record<string, any> {
     visible?: boolean;
     noScrollLock?: boolean;
 }
+import "./index.css";
 declare const Backdrop: import("svelte").Component<Props, {
     close: () => void;
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;

package/dist/components/Backdrop/README.md

@@ -12,9 +12,10 @@ A semi-transparent overlay with focus trap and body scroll locking. Commonly use
 | `fadeOutDuration` | `number` | `150` | Fade out transition duration (ms) |
 | `transitionEnabled` | `boolean` | `true` | Enable/disable transitions |
 | `onEscape` | `() => void` | - | Callback when Escape key is pressed |
+| `onBackdropClick` | `() => void` | - | Callback when backdrop area is clicked |
 | `noScrollLock` | `boolean` | `false` | Disable body scroll locking |
 | `el` | `HTMLDivElement` | - | Element reference (bindable) |
-| `class` | `string` | - | CSS classes for backdrop |
+| `class` | `string` | - | Additional CSS classes |
 
 ## Methods
 
@@ -25,13 +26,52 @@ A semi-transparent overlay with focus trap and body scroll locking. Commonly use
 | `setOpener(el)` | Set element to refocus when closed |
 | `visibility()` | Returns object with `visible` getter |
 
+## CSS Variables
+
+Override these tokens to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-backdrop-bg` | `rgb(0 0 0 / 0.5)` | Background color |
+| `--stuic-backdrop-z-index` | `10` | Stacking order |
+
+### Global Override
+
+```css
+:root {
+  --stuic-backdrop-bg: rgb(0 0 0 / 0.7);
+  --stuic-backdrop-z-index: 50;
+}
+```
+
+### Local Override
+
+```svelte
+<Backdrop
+  bind:visible
+  style="--stuic-backdrop-bg: rgb(0 0 0 / 0.8);"
+>
+  ...
+</Backdrop>
+```
+
+### Tailwind Class Override
+
+You can still override styles using Tailwind classes via the `class` prop:
+
+```svelte
+<Backdrop bind:visible class="bg-black/25">
+  ...
+</Backdrop>
+```
+
 ## Usage
 
 ### Basic Backdrop
 
 ```svelte
 <script lang="ts">
-  import { Backdrop } from 'stuic';
+  import { Backdrop } from '@marianmeres/stuic';
 
   let visible = $state(false);
 </script>
@@ -41,7 +81,7 @@ A semi-transparent overlay with focus trap and body scroll locking. Commonly use
 <Backdrop
   bind:visible
   onEscape={() => visible = false}
-  class="bg-black/50"
+  onBackdropClick={() => visible = false}
 >
   <div class="m-auto p-8 bg-white rounded">
     Modal content
@@ -54,7 +94,7 @@ A semi-transparent overlay with focus trap and body scroll locking. Commonly use
 
 ```svelte
 <script lang="ts">
-  import { Backdrop } from 'stuic';
+  import { Backdrop } from '@marianmeres/stuic';
 
   let backdrop: Backdrop;
 </script>
@@ -64,7 +104,6 @@ A semi-transparent overlay with focus trap and body scroll locking. Commonly use
 <Backdrop
   bind:this={backdrop}
   onEscape={() => backdrop.close()}
-  class="bg-black/50"
 >
   <div class="m-auto p-8 bg-white rounded">
     Content here
@@ -72,10 +111,36 @@ A semi-transparent overlay with focus trap and body scroll locking. Commonly use
 </Backdrop>
 ```
 
+### Custom Styling
+
+```svelte
+<!-- Lighter overlay -->
+<Backdrop bind:visible class="bg-black/25">
+  <div>Overlay content</div>
+</Backdrop>
+
+<!-- Blur effect with CSS variable override -->
+<Backdrop
+  bind:visible
+  class="backdrop-blur-sm"
+  style="--stuic-backdrop-bg: rgb(0 0 0 / 0.3);"
+>
+  <div>Blurred backdrop content</div>
+</Backdrop>
+
+<!-- Higher z-index for stacking -->
+<Backdrop
+  bind:visible
+  style="--stuic-backdrop-z-index: 100;"
+>
+  <div>High priority overlay</div>
+</Backdrop>
+```
+
 ### Without Scroll Lock
 
 ```svelte
-<Backdrop bind:visible noScrollLock class="bg-black/25">
+<Backdrop bind:visible noScrollLock>
   <div>Overlay content - page still scrollable</div>
 </Backdrop>
 ```

package/dist/components/Backdrop/index.css

@@ -0,0 +1,29 @@
+/* ============================================================================
+   BACKDROP COMPONENT TOKENS
+   Override globally: :root { --stuic-backdrop-bg: rgb(0 0 0 / 0.3); }
+   Override locally:  <Backdrop style="--stuic-backdrop-bg: rgb(0 0 0 / 0.8);">
+   ============================================================================ */
+
+:root {
+	/* Component-level customization tokens */
+	--stuic-backdrop-bg: rgb(0 0 0 / 0.5);
+	--stuic-backdrop-z-index: 10;
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+.stuic-backdrop {
+	/* Layout */
+	position: fixed;
+	inset: 0;
+	display: flex;
+	height: 100dvh;
+
+	/* Stacking */
+	z-index: var(--stuic-backdrop-z-index);
+
+	/* Colors */
+	background: var(--stuic-backdrop-bg);
+}

package/dist/components/Button/Button.svelte

@@ -1,121 +1,80 @@
 <script lang="ts" module>
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
+
+	export type ButtonVariant = "solid" | "outline" | "ghost" | "soft" | "link";
+	export type ButtonSize = "sm" | "md" | "lg" | "xl";
 
 	export interface Props extends Omit<HTMLButtonAttributes, "children"> {
-		/** Style variant (primary = accent colors, secondary = neutral) */
-		variant?: "primary" | "secondary" | string;
-		size?: "sm" | "md" | "lg" | string;
-		/** Reduce text contrast for less emphasis */
+		/** Color intent (semantic meaning) */
+		intent?: IntentColorKey;
+		/** Visual variant (how colors are applied) */
+		variant?: ButtonVariant | string;
+		/** Size preset */
+		size?: ButtonSize | string;
+		/** Reduce emphasis */
 		muted?: boolean;
-		noshadow?: boolean;
-		noborder?: boolean;
+		/** 3D push effect */
+		raised?: boolean;
 		/** Skip all default styling, use only custom classes */
 		unstyled?: boolean;
-		/** Transparent bg, styled on hover */
-		inverse?: boolean;
+		/** Render as rounded-full */
+		roundedFull?: boolean;
+		/** Render as aspect ratio 1 */
+		aspect1?: boolean;
+		/** Additional CSS classes */
 		class?: string;
 		/** Render as anchor tag instead of button */
 		href?: string;
+		/** Content snippet */
 		children?: Snippet<[{ checked?: boolean }]>;
-		/** Enable switch/toggle behavior (uses aria-checked) */
-		roleSwitch?: boolean;
+		/** Toggle state for switch behavior */
 		checked?: boolean;
-		el?: Element;
-		/*  */
-		tooltip?: TooltipConfig;
-	}
-
-	export interface ButtonPresetClasses {
-		size: Record<string, string>;
-		variant: Record<string, string>;
-		muted: string;
-		shadow: string;
-		inverse: string;
+		/** Enable switch/toggle behavior */
+		roleSwitch?: boolean;
+		/** Bindable element reference */
+		el?: HTMLElement;
+		/** Optional tooltip configuration or direct content */
+		tooltip?: string | TooltipConfig;
+		/** Is this button a "X" button (this is a pragmatic convenience) */
+		x?: boolean | XProps;
+		/** Optional out-of-the-box spinner support  */
+		spinner?: boolean | THC;
+		/** Show only spinner when spinner? */
+		spinnerOnly?: boolean;
 	}
-
-	export const BUTTON_STUIC_BASE_CLASSES = `
-		bg-button-bg text-button-text
-		dark:bg-button-bg-dark dark:text-button-text-dark
-		text-base text-center
-		leading-none
-		border-1
-		border-button-border dark:border-button-border-dark
-		rounded-lg
-		inline-flex items-center justify-center gap-x-2
-		px-4 py-3
-		select-none
-		min-h-[44px] min-w-[44px]
-
-		hover:brightness-105
-		active:brightness-95
-		disabled:hover:brightness-100 disabled:opacity-50
-
-		focus:brightness-105
-		focus:border-button-border-focus focus:dark:border-button-border-focus-dark
-
-		        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20
-		focus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20
-	`;
-
-	export const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses = {
-		size: {
-			sm: `text-sm rounded-md px-3 py-2 min-h-none min-w-none`,
-			lg: `text-lg rounded-xl`,
-		},
-		variant: {
-			primary: `font-medium`,
-			secondary: `
-				bg-neutral-100 dark:bg-neutral-600
-				text-black/60 dark:text-white/80
-				shadow-[1px_1px_0_0_rgba(0_0_0_/_.2)]
-				active:shadow-none active:translate-[1px]
-				focus:shadow-black/30
-			`,
-		},
-		muted: `text-black/70 dark:text-white/70`,
-		shadow: `
-			shadow-[1px_1px_0_0_rgba(0_0_0_/_.4)]
-			active:shadow-none active:translate-[1px]
-			disabled:shadow-none disabled:active:shadow-none disabled:active:translate-none
-		`,
-		inverse: `
-			bg-transparent dark:bg-transparent
-			hover:bg-button-bg hover:dark:bg-button-bg-dark
-			hover:brightness-100
-		`,
-	};
 </script>
 
 <script lang="ts">
-	import { twMerge } from "../../utils/tw-merge.js";
-	//
 	import "./index.css";
-	import { tooltip, type TooltipConfig } from "../../actions/index.js";
-
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { tooltip, type TooltipConfig } from "../../actions/tooltip/tooltip.svelte.js";
+	import { X, type XProps } from "../X/index.js";
+	import Thc, { type THC } from "../Thc/Thc.svelte";
+	import Spinner from "../Spinner/Spinner.svelte";
 	let {
-		variant,
-		size,
 		class: classProp,
-		muted,
-		noshadow,
-		noborder,
-		inverse,
-		unstyled,
+		intent,
+		size = "md",
+		variant = "solid",
 		href,
 		children,
-		//
-		roleSwitch = false,
 		checked = $bindable(false),
+		roleSwitch = false,
 		el = $bindable(),
-		//
-		tooltip: tooltipConfig = () => ({ enabled: false }),
-		//
+		muted = false,
+		raised = false,
+		unstyled = false,
+		roundedFull = false,
+		aspect1 = false,
+		tooltip: _tooltip,
+		x,
+		spinner,
+		spinnerOnly,
 		...rest
 	}: Props = $props();
 
-	// let button: HTMLButtonElement | undefined = $state();
-
 	$effect(() => {
 		const toggle = () => (checked = !checked);
 		if (!href && roleSwitch && el) {
@@ -124,51 +83,85 @@
 		return () => el?.removeEventListener("click", toggle);
 	});
 
-	const _base = BUTTON_STUIC_BASE_CLASSES;
-	const _preset: any = BUTTON_STUIC_PRESET_CLASSES;
+	// Build class string - add base class for CSS targeting unless unstyled
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-button", classProp));
+
+	let _tooltipConfig: TooltipConfig = $derived.by(() => {
+		if (typeof _tooltip === "string") {
+			return () => ({ enabled: true, content: _tooltip });
+		}
+		return _tooltip ? _tooltip : () => ({ enabled: false });
+	});
+
+	let _xProps: undefined | XProps = $derived.by(() => {
+		if (x) {
+			return typeof x === "boolean" ? {} : x;
+		}
+	});
 
-	// see button.css
-	let _class = $derived(
-		[
-			// "namespace" (so we can target it in css files when customizing)
-			"stuic-button",
-			// pass all styling props as classnames as well
-			variant,
-			size,
-			muted && "muted",
-			noshadow && "no-shadow",
-			noborder && "border-none",
-			inverse && "inverse",
-			// now, attach the default tw classes (unless not explicitly forbidden)
-			!unstyled && _base,
-			!unstyled && size && _preset.size[size],
-			!unstyled && variant && _preset.variant[variant],
-			!unstyled && muted && _preset.muted,
-			!unstyled && !noshadow && _preset.shadow,
-			!unstyled && inverse && _preset.inverse,
-		]
-			.filter(Boolean)
-			.join(" ")
-	);
+	// "x" implicitly set aspect1
+	let _isAspect1 = $derived(aspect1 || _xProps);
 </script>
 
 {#if href}
 	<a
 		{href}
 		bind:this={el}
-		class={twMerge(_class, classProp)}
-		use:tooltip={tooltipConfig}
-		{...rest as any}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-raised={!unstyled && raised ? "true" : undefined}
+		data-checked={roleSwitch && checked ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
+		use:tooltip={_tooltipConfig}
+		{...rest as HTMLAnchorAttributes}
 	>
-		{@render children?.({})}
+		{#if _xProps}
+			<X {..._xProps} />
+		{:else}
+			{#if spinner}
+				{#if typeof spinner === "boolean"}
+					<Spinner />
+				{:else}
+					<Thc thc={spinner} />
+				{/if}
+			{/if}
+			{#if !spinner || (spinner && !spinnerOnly)}
+				{@render children?.({ checked })}
+			{/if}
+		{/if}
 	</a>
 {:else}
 	<button
 		bind:this={el}
-		class={twMerge(_class, classProp)}
-		use:tooltip={tooltipConfig}
+		class={_class}
+		data-intent={!unstyled ? intent : undefined}
+		data-variant={!unstyled ? variant : undefined}
+		data-size={!unstyled ? size : undefined}
+		data-muted={!unstyled && muted ? "true" : undefined}
+		data-raised={!unstyled && raised ? "true" : undefined}
+		data-checked={roleSwitch && checked ? "true" : undefined}
+		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
+		use:tooltip={_tooltipConfig}
 		{...rest}
 	>
-		{@render children?.({ checked })}
+		{#if _xProps}
+			<X {..._xProps} />
+		{:else}
+			{#if spinner}
+				{#if typeof spinner === "boolean"}
+					<Spinner />
+				{:else}
+					<Thc thc={spinner} />
+				{/if}
+			{/if}
+			{#if !spinner || (spinner && !spinnerOnly)}
+				{@render children?.({ checked })}
+			{/if}
+		{/if}
 	</button>
 {/if}