@marianmeres/stuic 2.65.0 → 3.0.0

package/dist/components/Notifications/README.md

@@ -1,60 +1,6 @@
 # Notifications
 
-A toast notification system with auto-disposal, deduplication, progress indicators, and flexible positioning.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `notifications` | `NotificationsStack` | - | Stack instance (required) |
-| `posX` | `"left" \| "center" \| "right"` | `"right"` | Horizontal position (desktop) |
-| `posY` | `"top" \| "center" \| "bottom"` | `"top"` | Vertical position (desktop) |
-| `posXMobile` | `"left" \| "center" \| "right"` | `"center"` | Horizontal position (mobile) |
-| `posYMobile` | `"top" \| "center" \| "bottom"` | `"top"` | Vertical position (mobile) |
-| `themeInfo` | `TW_COLORS` | `"neutral"` | Color theme for info notifications |
-| `themeError` | `TW_COLORS` | `"red"` | Color theme for error notifications |
-| `themeWarn` | `TW_COLORS` | `"yellow"` | Color theme for warning notifications |
-| `themeSuccess` | `TW_COLORS` | `"green"` | Color theme for success notifications |
-| `noTheme` | `boolean` | `false` | Disable color theming |
-| `noIcons` | `boolean` | `false` | Hide notification icons |
-| `noProgress` | `boolean` | `false` | Hide TTL progress bar |
-| `noXButton` | `boolean` | `false` | Hide close button |
-| `duration` | `number` | `200` | Fade transition duration (ms) |
-| `forceAsHtml` | `boolean` | - | Render content as HTML |
-| `iconFns` | `Record<type, () => string>` | - | Custom icon functions |
-
-## NotificationsStack API
-
-### Constructor Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `maxCapacity` | `number` | `5` | Maximum notifications in queue |
-| `defaultTtl` | `number` | `3000` | Default time-to-live (ms) |
-| `extraTtlPerChar` | `number` | `20` | Extra TTL per content character |
-| `sortOrder` | `"asc" \| "desc"` | `"asc"` | Stack sort order |
-| `disposeInterval` | `number` | `500` | Auto-dispose check interval (ms) |
-
-### Methods
-
-| Method | Description |
-|--------|-------------|
-| `info(content, opts?)` | Add info notification |
-| `success(content, opts?)` | Add success notification |
-| `warn(content, opts?)` | Add warning notification |
-| `error(content, opts?)` | Add error notification |
-| `removeById(id)` | Remove notification by ID |
-| `reset()` | Clear all notifications |
-| `destroy()` | Cleanup and stop ticker |
-
-### Notification Options
-
-| Option | Type | Description |
-|--------|------|-------------|
-| `id` | `string \| number` | Unique ID (auto-generated from content if omitted) |
-| `ttl` | `number` | Time-to-live in ms (0 = no auto-dismiss) |
-| `iconFn` | `(() => string) \| false` | Custom icon or `false` to hide |
-| `forceAsHtml` | `boolean` | Render content as HTML |
+A toast notification system with automatic stacking, progress indicators, and type-based theming using design tokens.
 
 ## Usage
 
@@ -62,7 +8,7 @@ A toast notification system with auto-disposal, deduplication, progress indicato
 
 ```svelte
 <script lang="ts">
-  import { Notifications, NotificationsStack } from 'stuic';
+  import { Notifications, NotificationsStack } from '@marianmeres/stuic';
 
   const notifications = new NotificationsStack();
 </script>
@@ -70,11 +16,11 @@ A toast notification system with auto-disposal, deduplication, progress indicato
 <Notifications {notifications} />
 
 <button onclick={() => notifications.info('Hello!')}>
-  Show Info
+  Show notification
 </button>
 ```
 
-### Different Types
+### Notification Types
 
 ```svelte
 <script lang="ts">
@@ -85,14 +31,14 @@ A toast notification system with auto-disposal, deduplication, progress indicato
 </script>
 ```
 
-### Custom TTL
+### Custom TTL (Time to Live)
 
 ```svelte
 <script lang="ts">
   // Auto-dismiss after 10 seconds
-  notifications.info('Long message', { ttl: 10000 });
+  notifications.info('Long notification', { ttl: 10000 });
 
-  // Never auto-dismiss
+  // No auto-dismiss (sticky)
   notifications.error('Critical error', { ttl: 0 });
 </script>
 ```
@@ -107,30 +53,193 @@ A toast notification system with auto-disposal, deduplication, progress indicato
 </script>
 ```
 
-### Custom Positioning
+### Positioning
 
 ```svelte
+<!-- Top right (default) -->
+<Notifications {notifications} />
+
+<!-- Bottom center -->
+<Notifications {notifications} posX="center" posY="bottom" />
+
+<!-- Different positions for mobile vs desktop -->
 <Notifications
   {notifications}
-  posX="left"
-  posY="bottom"
+  posX="right"
   posXMobile="center"
+  posY="top"
   posYMobile="bottom"
 />
 ```
 
-### Custom Stack Options
+### Without Icons or Progress
+
+```svelte
+<Notifications {notifications} noIcons />
+<Notifications {notifications} noProgress />
+<Notifications {notifications} noXButton />
+```
+
+### Custom Icons
 
 ```svelte
 <script lang="ts">
-  const notifications = new NotificationsStack([], {
-    maxCapacity: 3,
-    defaultTtl: 5000,
-    sortOrder: 'desc'
-  });
+  const customIcons = {
+    info: () => '<svg>...</svg>',
+    success: () => '<svg>...</svg>',
+    warn: () => '<svg>...</svg>',
+    error: () => '<svg>...</svg>',
+  };
 </script>
+
+<Notifications {notifications} iconFns={customIcons} />
 ```
 
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `notifications` | `NotificationsStack` | required | The notifications stack instance |
+| `posX` | `"left" \| "center" \| "right"` | `"right"` | Horizontal position (desktop) |
+| `posXMobile` | `"left" \| "center" \| "right"` | `"center"` | Horizontal position (mobile) |
+| `posY` | `"top" \| "center" \| "bottom"` | `"top"` | Vertical position (desktop) |
+| `posYMobile` | `"top" \| "center" \| "bottom"` | `"top"` | Vertical position (mobile) |
+| `noIcons` | `boolean` | `false` | Hide notification icons |
+| `noProgress` | `boolean` | `false` | Hide TTL progress bar |
+| `noXButton` | `boolean` | `false` | Hide close button |
+| `forceAsHtml` | `boolean` | `false` | Render content as HTML |
+| `ariaCloseLabel` | `string` | `"Close"` | Accessibility label for close button |
+| `duration` | `number` | `200` | Fade transition duration (ms) |
+| `iconFns` | `Record<type, () => string>` | - | Custom icon render functions |
+| `class` | `string` | - | Additional CSS classes for notification box |
+| `classWrapX` | `string` | - | Additional CSS classes for horizontal wrapper |
+| `classWrapY` | `string` | - | Additional CSS classes for vertical wrapper |
+| `classNotifCount` | `string` | - | Additional CSS classes for count badge |
+| `classNotifIcon` | `string` | - | Additional CSS classes for icon |
+| `classNotifContent` | `string` | - | Additional CSS classes for content |
+| `classProgress` | `string` | - | Additional CSS classes for progress container |
+| `classProgressBar` | `string` | - | Additional CSS classes for progress bar |
+| `el` | `HTMLDivElement` | - | Bindable element reference |
+
+## CSS Variables
+
+### Component Tokens
+
+Override globally in `:root` or locally via `style` attribute:
+
+```css
+:root {
+  /* Layout */
+  --stuic-notification-max-width: var(--container-sm);      /* 24rem */
+  --stuic-notification-radius: var(--radius-lg);            /* 0.5rem */
+  --stuic-notification-padding-x: calc(var(--spacing) * 4); /* 1rem */
+  --stuic-notification-padding-y: calc(var(--spacing) * 3); /* 0.75rem */
+  --stuic-notification-gap: calc(var(--spacing) * 4);       /* 1rem */
+
+  /* Typography */
+  --stuic-notification-font-size: var(--text-sm);
+
+  /* Animation */
+  --stuic-notification-transition: 200ms;
+
+  /* Shadow */
+  --stuic-notification-shadow: var(--shadow-lg);
+
+  /* Icon */
+  --stuic-notification-icon-size: calc(var(--spacing) * 6); /* 1.5rem */
+
+  /* Counter badge */
+  --stuic-notification-badge-font-size: var(--text-xs);
+  --stuic-notification-badge-padding-x: calc(var(--spacing) * 2);
+  --stuic-notification-badge-padding-y: calc(var(--spacing) * 1);
+  --stuic-notification-badge-radius: 9999px;
+  --stuic-notification-badge-bg: var(--color-neutral-950);
+  --stuic-notification-badge-text: var(--color-neutral-50);
+
+  /* Progress bar */
+  --stuic-notification-progress-opacity: 0.1;
+}
+```
+
+### Example Override
+
+```css
+/* Make notifications more compact */
+:root {
+  --stuic-notification-padding-x: calc(var(--spacing) * 3);
+  --stuic-notification-padding-y: calc(var(--spacing) * 2);
+  --stuic-notification-radius: var(--radius-md);
+}
+```
+
+```svelte
+<!-- Local override -->
+<Notifications
+  {notifications}
+  style="--stuic-notification-radius: 9999px;"
+/>
+```
+
+### Type Colors
+
+Notification types use the global STUIC design tokens:
+
+| Type | Background | Foreground | Border |
+|------|------------|------------|--------|
+| `info` | `--stuic-color-info` | `--stuic-color-info-foreground` | `--stuic-color-info-hover` |
+| `success` | `--stuic-color-success` | `--stuic-color-success-foreground` | `--stuic-color-success-hover` |
+| `warn` | `--stuic-color-warning` | `--stuic-color-warning-foreground` | `--stuic-color-warning-hover` |
+| `error` | `--stuic-color-destructive` | `--stuic-color-destructive-foreground` | `--stuic-color-destructive-hover` |
+
+To customize type colors, override the global intent tokens:
+
+```css
+:root {
+  --stuic-color-info: var(--color-blue-600);
+  --stuic-color-info-foreground: var(--color-white);
+  --stuic-color-info-hover: var(--color-blue-700);
+}
+```
+
+## Data Attributes
+
+The notification box uses data attributes for type-based styling:
+
+- `data-type` - The notification type (`info`, `success`, `warn`, `error`)
+
+## NotificationsStack API
+
+### Constructor Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `maxCapacity` | `number` | `5` | Maximum notifications in queue |
+| `defaultTtl` | `number` | `3000` | Default time-to-live (ms) |
+| `extraTtlPerChar` | `number` | `20` | Extra TTL per content character |
+| `sortOrder` | `"asc" \| "desc"` | `"asc"` | Stack sort order |
+| `disposeInterval` | `number` | `500` | Auto-dispose check interval (ms) |
+
+### Methods
+
+| Method | Description |
+|--------|-------------|
+| `info(content, opts?)` | Add info notification |
+| `success(content, opts?)` | Add success notification |
+| `warn(content, opts?)` | Add warning notification |
+| `error(content, opts?)` | Add error notification |
+| `removeById(id)` | Remove notification by ID |
+| `reset()` | Clear all notifications |
+| `destroy()` | Cleanup and stop ticker |
+
+### Notification Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `id` | `string \| number` | Unique ID (auto-generated from content if omitted) |
+| `ttl` | `number` | Time-to-live in ms (0 = no auto-dismiss) |
+| `iconFn` | `(() => string) \| false` | Custom icon or `false` to hide |
+| `forceAsHtml` | `boolean` | Render content as HTML |
+
 ## Cleanup
 
 ```svelte
@@ -142,3 +251,10 @@ A toast notification system with auto-disposal, deduplication, progress indicato
   onDestroy(() => notifications.destroy());
 </script>
 ```
+
+## Accessibility
+
+- Uses `role="alert"` for screen reader announcements
+- Uses `aria-live="assertive"` on the container
+- Close button has configurable `aria-label`
+- Renders in a popover layer for proper stacking context

package/dist/components/Notifications/index.css

@@ -1,20 +1,217 @@
-/* 
-    When defining theme variables that reference other variables, use the inline option.
+/* ============================================================================
+   NOTIFICATION COMPONENT TOKENS
+   Override globally: :root { --stuic-notification-radius: 0; }
+   Override locally:  <Notifications style="--stuic-notification-radius: 9999px;">
+   ============================================================================ */
 
-    Using the inline option, the utility class will use the theme variable value instead 
-    of referencing the actual theme variable.
+:root {
+	/* Layout */
+	--stuic-notification-max-width: var(--container-sm); /* 24rem */
+	--stuic-notification-radius: var(--radius-lg); /* 0.5rem */
+	--stuic-notification-padding-x: calc(var(--spacing) * 4); /* 1rem */
+	--stuic-notification-padding-y: calc(var(--spacing) * 3); /* 0.75rem */
+	--stuic-notification-gap: calc(
+		var(--spacing) * 4
+	); /* 1rem - gap between notifications */
 
-    Without using inline, your utility classes might resolve to unexpected values because 
-    of how variables are resolved in CSS.
-*/
+	/* Typography */
+	--stuic-notification-font-size: var(--text-base);
 
-/* prettier-ignore */
-@theme inline {
-	--color-notif-bg: var(--color-notif-bg, var(--color-neutral-700));
-    --color-notif-text: var(--color-notif-text, var(--color-neutral-50));
-    --color-notif-border: var(--color-notif-border, var(--color-neutral-900));
+	/* Animation */
+	--stuic-notification-transition: 200ms;
 
-    --color-notif-bg-dark: var(--color-notif-bg-dark, var(--color-neutral-950));
-    --color-notif-text-dark: var(--color-notif-text-dark, var(--color-neutral-200));
-    --color-notif-border-dark: var(--color-notif-border-dark, var(--color-neutral-500)); 
+	/* Shadow */
+	--stuic-notification-shadow: var(--shadow-lg);
+
+	/* Icon */
+	--stuic-notification-icon-size: calc(var(--spacing) * 6); /* 1.5rem */
+
+	/* Counter badge */
+	--stuic-notification-badge-font-size: var(--text-xs);
+	--stuic-notification-badge-padding-x: calc(var(--spacing) * 2);
+	--stuic-notification-badge-padding-y: calc(var(--spacing) * 1);
+	--stuic-notification-badge-radius: 9999px;
+	--stuic-notification-badge-bg: var(--color-neutral-950);
+	--stuic-notification-badge-text: var(--color-neutral-50);
+
+	/* Progress bar */
+	--stuic-notification-progress-opacity: 0.1;
+}
+
+/* ============================================================================
+   TYPE-BASED COLOR MAPPING
+   Each type sets the color palette via internal CSS vars.
+   ============================================================================ */
+
+/* Default / info */
+.stuic-notification {
+	--_bg: var(--stuic-color-info);
+	--_text: var(--stuic-color-info-foreground);
+	--_border: var(--stuic-color-info-hover);
+}
+
+.stuic-notification[data-type="success"] {
+	--_bg: var(--stuic-color-success);
+	--_text: var(--stuic-color-success-foreground);
+	--_border: var(--stuic-color-success-hover);
+}
+
+.stuic-notification[data-type="warn"] {
+	--_bg: var(--stuic-color-warning);
+	--_text: var(--stuic-color-warning-foreground);
+	--_border: var(--stuic-color-warning-hover);
+}
+
+.stuic-notification[data-type="error"] {
+	--_bg: var(--stuic-color-destructive);
+	--_text: var(--stuic-color-destructive-foreground);
+	--_border: var(--stuic-color-destructive-hover);
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+.stuic-notification {
+	/* Layout */
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	max-width: 100%;
+
+	/* Box model */
+	border-width: 1px;
+	border-style: solid;
+	border-radius: var(--stuic-notification-radius);
+
+	/* Shadow */
+	box-shadow: var(--stuic-notification-shadow);
+
+	/* Colors - use internal vars set by type */
+	background: var(--_bg);
+	color: var(--_text);
+	border-color: var(--_border);
+
+	/* Interaction */
+	pointer-events: auto;
+}
+
+@media (min-width: 40rem) {
+	.stuic-notification {
+		width: var(--stuic-notification-max-width);
+	}
+}
+
+/* ============================================================================
+   ICON
+   ============================================================================ */
+
+.stuic-notification .icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-top: var(--stuic-notification-padding-y);
+	padding-bottom: var(--stuic-notification-padding-y);
+	padding-left: var(--stuic-notification-padding-x);
+	padding-right: 0;
+	color: var(--_text);
+	opacity: 0.85;
+}
+
+.stuic-notification .icon svg {
+	width: var(--stuic-notification-icon-size);
+	height: var(--stuic-notification-icon-size);
+}
+
+/* ============================================================================
+   CONTENT
+   ============================================================================ */
+
+.stuic-notification .content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: var(--stuic-notification-padding-y) calc(var(--spacing) * 1)
+		var(--stuic-notification-padding-y) var(--stuic-notification-padding-x);
+	font-size: var(--stuic-notification-font-size);
+	letter-spacing: var(--tracking-tight);
+}
+
+.stuic-notification .content.no-close-button {
+	padding-right: var(--stuic-notification-padding-x);
+}
+
+/* ============================================================================
+   CLOSE BUTTON
+   ============================================================================ */
+
+.stuic-notification .close-button {
+	align-self: stretch;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 0 calc(var(--spacing) * 3);
+	border-top-right-radius: var(--stuic-notification-radius);
+	border-bottom-right-radius: var(--stuic-notification-radius);
+	color: var(--_text);
+	opacity: 0.75;
+	transition: opacity var(--stuic-notification-transition);
+}
+
+.stuic-notification .close-button:hover {
+	opacity: 1;
+	background: rgb(0 0 0 / 0.1);
+}
+
+.stuic-notification .close-button:focus-visible {
+	opacity: 1;
+	outline: none;
+	background: rgb(0 0 0 / 0.1);
+}
+
+/* ============================================================================
+   COUNTER BADGE
+   ============================================================================ */
+
+.stuic-notification .count {
+	position: absolute;
+	top: calc(var(--spacing) * -2);
+	right: calc(var(--spacing) * -2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--stuic-notification-badge-padding-y)
+		var(--stuic-notification-badge-padding-x);
+	border-radius: var(--stuic-notification-badge-radius);
+	font-size: var(--stuic-notification-badge-font-size);
+	line-height: 1;
+	background: var(--stuic-notification-badge-bg);
+	color: var(--stuic-notification-badge-text);
+}
+
+/* ============================================================================
+   PROGRESS BAR
+   ============================================================================ */
+
+.stuic-notification .progress {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	background: transparent;
+	border-top-left-radius: var(--stuic-notification-radius);
+	border-bottom-left-radius: var(--stuic-notification-radius);
+	overflow: hidden;
+	pointer-events: none;
+}
+
+.stuic-notification .progress-bar {
+	width: 100%;
+	height: 100%;
+	background: rgb(255 255 255 / var(--stuic-notification-progress-opacity));
+	border-top-left-radius: var(--stuic-notification-radius);
+	border-bottom-left-radius: var(--stuic-notification-radius);
 }

package/dist/components/Progress/README.md

@@ -69,3 +69,18 @@ A progress indicator available as either a horizontal bar or circular display.
   classBar="transition-all duration-300"
 />
 ```
+
+## CSS Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-progress-bg` | `--stuic-surface-interactive` | Track background |
+| `--stuic-progress-accent` | `--stuic-accent` | Progress bar fill color |
+
+### Example Override
+
+```css
+:root {
+  --stuic-progress-accent: var(--color-green-500);
+}
+```

package/dist/components/Progress/_internal/Bar.svelte

@@ -16,14 +16,14 @@
 <div
 	class={twMerge(
 		"stuic-progress-bar",
-		"w-full h-2 bg-progress-bg flex justify-start pointer-events-none",
+		"w-full h-2 bg-(--stuic-progress-bg) flex justify-start pointer-events-none",
 		classProp
 	)}
 >
 	<div
 		class={twMerge(
 			"bar",
-			"w-full h-full bg-progress-accent transition-[width] ease-linear duration-100",
+			"w-full h-full bg-(--stuic-progress-accent) transition-[width] ease-linear duration-100",
 			classBar
 		)}
 		style="width:{Math.min(100, Math.max(0, progress))}%; {styleBar}"

package/dist/components/Progress/index.css

@@ -1,5 +1,5 @@
-/* prettier-ignore */
-@theme inline {
-	--color-progress-bg: var(--color-progress-bg, var(--color-neutral-200));
-	--color-progress-accent: var(--color-progress-accent, var(--color-neutral-600));
+/* Progress component tokens */
+:root {
+	--stuic-progress-bg: var(--stuic-color-muted);
+	--stuic-progress-accent: var(--stuic-color-primary);
 }

package/dist/components/Skeleton/Skeleton.svelte

@@ -62,9 +62,10 @@
 
 	const baseClass = $derived(
 		twMerge(
-			"block bg-neutral-200 dark:bg-neutral-700",
+			"block",
 			effectiveAnimation === "shimmer" && "stuic-skeleton-shimmer",
 			effectiveAnimation === "pulse" && "stuic-skeleton-pulse",
+			effectiveAnimation === "none" && "bg-[var(--stuic-skeleton-bg)]",
 			variant === "circle" && "stuic-skeleton-circle",
 			rounded === true && variant !== "circle" && "rounded",
 			classProp
@@ -73,7 +74,7 @@
 
 	const baseStyle = $derived.by(() => {
 		const styles: string[] = [];
-		if (duration) styles.push(`--skeleton-duration: ${duration}`);
+		if (duration) styles.push(`--stuic-skeleton-duration: ${duration}`);
 		if (variant === "circle" && size) {
 			styles.push(`width: ${size}`, `height: ${size}`);
 		} else {

package/dist/components/Skeleton/index.css

@@ -1,12 +1,8 @@
-/* Define CSS custom properties for use in gradients */
-:root {
-	--skeleton-base: #e5e5e5;
-	--skeleton-highlight: #f5f5f5;
-}
-
-.dark {
-	--skeleton-base: #404040;
-	--skeleton-highlight: #525252;
+/* prettier-ignore */
+@theme inline {
+	/* Skeleton component tokens */
+	--stuic-skeleton-bg: var(--stuic-skeleton-bg, var(--stuic-surface-interactive));
+	--stuic-skeleton-bg-highlight: var(--stuic-skeleton-bg-highlight, var(--stuic-surface-interactive-hover));
 }
 
 .stuic-skeleton-circle {
@@ -31,12 +27,12 @@
 .stuic-skeleton-shimmer {
 	background: linear-gradient(
 		90deg,
-		var(--skeleton-base) 25%,
-		var(--skeleton-highlight) 50%,
-		var(--skeleton-base) 75%
+		var(--stuic-skeleton-bg) 25%,
+		var(--stuic-skeleton-bg-highlight) 50%,
+		var(--stuic-skeleton-bg) 75%
 	);
 	background-size: 200% 100%;
-	animation: skeleton-shimmer var(--skeleton-duration, 1.5s) ease-in-out infinite;
+	animation: skeleton-shimmer var(--stuic-skeleton-duration, 1.5s) ease-in-out infinite;
 }
 
 /* Pulse animation */
@@ -50,7 +46,8 @@
 }
 
 .stuic-skeleton-pulse {
-	animation: skeleton-pulse var(--skeleton-duration, 1.5s) ease-in-out infinite;
+	background-color: var(--stuic-skeleton-bg);
+	animation: skeleton-pulse var(--stuic-skeleton-duration, 1.5s) ease-in-out infinite;
 }
 
 /* Reduced motion */

package/dist/components/Spinner/Spinner.svelte

@@ -30,7 +30,7 @@
 	};
 	const heightMap: Record<NonNullable<Props["height"]>, number> = {
 		short: 5,
-		normal: 7,
+		normal: 6,
 		tall: 10,
 	};
 
@@ -42,7 +42,7 @@
 </script>
 
 <div
-	class={twMerge("spinner opacity-50", classProp)}
+	class={twMerge("spinner opacity-80", classProp)}
 	style:--size="{size}px"
 	style:--duration="{duration}ms"
 >

package/dist/components/Spinner/SpinnerCircle.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <span
-	class={twMerge("stuic-spinner-basic inline-block size-5", _thickness, classProp)}
+	class={twMerge("stuic-spinner-basic inline-block size-4", _thickness, classProp)}
 	style="animation-duration: {duration}ms; animation-direction: {direction === 'ccw'
 		? 'reverse'
 		: 'normal'};"