@marianmeres/stuic 2.66.0 → 3.0.1

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,8 @@
 </script>
 
 <script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+
 	const clog = createClog("Backdrop", { color: "auto" });
 
 	let {
@@ -142,6 +144,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 +154,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/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,31 @@
+/* ============================================================================
+   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;
+}
+
+@layer components {
+	/* ============================================================================
+	   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,79 @@
 <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 { 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 +82,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}

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

@@ -1,40 +1,51 @@
-import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+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 declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text\n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\ttext-base text-center\n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-lg\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-4 py-3\n\t\tselect-none\n\t\tmin-h-[44px] min-w-[44px]\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
-export declare const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses;
-import "./index.css";
-import { type TooltipConfig } from "../../actions/index.js";
+import { type TooltipConfig } from "../../actions/tooltip/tooltip.svelte.js";
+import { type XProps } from "../X/index.js";
+import { type THC } from "../Thc/Thc.svelte";
 declare const Button: import("svelte").Component<Props, {}, "checked" | "el">;
 type Button = ReturnType<typeof Button>;
 export default Button;