@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/Notifications/notifications-stack.svelte.d.ts

@@ -132,6 +132,10 @@ export declare class NotificationsStack {
     success: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
     /** Main api. */
     warn: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
+    /** "warn" alias */
+    warning: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
     /** Main api. */
     error: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
+    /** "error" alias */
+    destructive: (content: THC, n?: Partial<NotificationInput>) => this | undefined;
 }

package/dist/components/Notifications/notifications-stack.svelte.js

@@ -182,8 +182,16 @@ export class NotificationsStack {
     warn = (content, n) => {
         return this.#add({ ...(n || {}), type: "warn", content });
     };
+    /** "warn" alias */
+    warning = (content, n) => {
+        return this.#add({ ...(n || {}), type: "warn", content });
+    };
     /** Main api. */
     error = (content, n) => {
         return this.#add({ ...(n || {}), type: "error", content });
     };
+    /** "error" alias */
+    destructive = (content, n) => {
+        return this.#add({ ...(n || {}), type: "error", content });
+    };
 }

package/dist/components/Progress/Progress.svelte

@@ -3,6 +3,7 @@
 		type?: "bar" | "circle";
 		progress?: number;
 		class?: string;
+		style?: string;
 		classBar?: string;
 		styleBar?: string;
 	}
@@ -16,13 +17,14 @@
 		type = "bar",
 		progress = 0,
 		class: classProp,
+		style: styleProp,
 		classBar,
 		styleBar,
 	}: Props = $props();
 </script>
 
 {#if type === "bar"}
-	<Bar {progress} class={classProp} {classBar} {styleBar} />
+	<Bar {progress} class={classProp} style={styleProp} {classBar} {styleBar} />
 {:else if type === "circle"}
-	<Circle {progress} class={classProp} />
+	<Circle {progress} class={classProp} style={styleProp} />
 {/if}

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

@@ -2,6 +2,7 @@ export interface Props {
     type?: "bar" | "circle";
     progress?: number;
     class?: string;
+    style?: string;
     classBar?: string;
     styleBar?: string;
 }

package/dist/components/Progress/README.md

@@ -8,9 +8,10 @@ A progress indicator available as either a horizontal bar or circular display.
 |------|------|---------|-------------|
 | `type` | `"bar" \| "circle"` | `"bar"` | Display type |
 | `progress` | `number` | `0` | Progress value (0-100) |
-| `class` | `string` | - | CSS for container |
-| `classBar` | `string` | - | CSS for progress bar fill (bar type only) |
-| `styleBar` | `string` | - | Inline styles for bar fill |
+| `class` | `string` | - | CSS classes for container |
+| `style` | `string` | - | Inline styles for container (use for CSS variable overrides) |
+| `classBar` | `string` | - | CSS classes for bar fill (bar type only) |
+| `styleBar` | `string` | - | Inline styles for bar fill (bar type only) |
 
 ## Usage
 
@@ -18,7 +19,7 @@ A progress indicator available as either a horizontal bar or circular display.
 
 ```svelte
 <script lang="ts">
-  import { Progress } from 'stuic';
+  import { Progress } from '@marianmeres/stuic';
 
   let progress = $state(0);
 </script>
@@ -29,7 +30,7 @@ A progress indicator available as either a horizontal bar or circular display.
 ### Circle Progress
 
 ```svelte
-<Progress type="circle" progress={75} class="size-16" />
+<Progress type="circle" progress={75} />
 ```
 
 ### Animated Progress
@@ -51,36 +52,106 @@ A progress indicator available as either a horizontal bar or circular display.
 <button onclick={start}>Start</button>
 ```
 
-### Custom Styling
+### Custom Sizing
 
 ```svelte
+<!-- Taller bar -->
 <Progress
   progress={60}
-  class="h-2 bg-gray-200 rounded-full"
-  classBar="bg-blue-500 rounded-full"
+  style="--stuic-progress-height: 1rem;"
+/>
+
+<!-- Larger circle -->
+<Progress
+  type="circle"
+  progress={75}
+  style="--stuic-progress-circle-size: 6rem;"
+/>
+```
+
+### Custom Colors
+
+```svelte
+<!-- Override accent color inline -->
+<Progress
+  progress={80}
+  style="--stuic-progress-accent: var(--stuic-color-success);"
+/>
+
+<!-- Using Tailwind classes -->
+<Progress
+  progress={60}
+  classBar="bg-green-500"
 />
 ```
 
-### With Transition
+### With Border Radius
 
 ```svelte
 <Progress
-  progress={value}
-  classBar="transition-all duration-300"
+  progress={50}
+  style="--stuic-progress-radius: var(--radius-full);"
 />
 ```
 
 ## CSS Variables
 
+### Component Tokens
+
+Override globally in `:root` or locally via `style` prop:
+
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--stuic-progress-bg` | `--stuic-surface-interactive` | Track background |
-| `--stuic-progress-accent` | `--stuic-accent` | Progress bar fill color |
+| `--stuic-progress-bg` | `--stuic-color-muted` | Track background color |
+| `--stuic-progress-accent` | `--stuic-color-primary` | Progress fill color |
+| `--stuic-progress-height` | `calc(var(--spacing) * 2)` | Bar height (0.5rem) |
+| `--stuic-progress-radius` | `--radius-sm` | Border radius |
+| `--stuic-progress-transition` | `100ms` | Animation duration |
+| `--stuic-progress-circle-size` | `calc(var(--spacing) * 16)` | Circle dimensions (4rem) |
+| `--stuic-progress-circle-stroke-width` | `10` | Circle stroke width (viewBox units) |
 
-### Example Override
+### Example Overrides
 
 ```css
+/* Global override */
 :root {
-  --stuic-progress-accent: var(--color-green-500);
+  --stuic-progress-accent: var(--stuic-color-accent);
+  --stuic-progress-height: calc(var(--spacing) * 3);
+  --stuic-progress-radius: var(--radius-full);
 }
 ```
+
+```svelte
+<!-- Local override -->
+<Progress
+  progress={75}
+  style="--stuic-progress-accent: var(--stuic-color-success); --stuic-progress-height: 1rem;"
+/>
+```
+
+## Theming
+
+The component uses theme color tokens:
+- `--stuic-color-muted` for the track background
+- `--stuic-color-primary` for the progress fill
+
+These automatically adapt to light/dark mode when using a properly configured theme.
+
+To show different states (success, warning, error), override the accent color:
+
+```svelte
+<Progress
+  progress={100}
+  style="--stuic-progress-accent: var(--stuic-color-success);"
+/>
+
+<Progress
+  progress={90}
+  style="--stuic-progress-accent: var(--stuic-color-warning);"
+/>
+
+<Progress
+  progress={50}
+  style="--stuic-progress-accent: var(--stuic-color-destructive);"
+/>
+```

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

@@ -1,31 +1,20 @@
 <script lang="ts">
 	import { twMerge } from "../../../utils/tw-merge.js";
 
-	import "../index.css";
-
 	interface Props {
 		progress: number;
 		class?: string;
+		style?: string;
 		classBar?: string;
 		styleBar?: string;
 	}
 
-	let { progress = 0, class: classProp, classBar, styleBar = "" }: Props = $props();
+	let { progress = 0, class: classProp, style: styleProp, classBar, styleBar = "" }: Props = $props();
 </script>
 
-<div
-	class={twMerge(
-		"stuic-progress-bar",
-		"w-full h-2 bg-(--stuic-progress-bg) flex justify-start pointer-events-none",
-		classProp
-	)}
->
+<div class={twMerge("stuic-progress-bar", classProp)} style={styleProp}>
 	<div
-		class={twMerge(
-			"bar",
-			"w-full h-full bg-(--stuic-progress-accent) transition-[width] ease-linear duration-100",
-			classBar
-		)}
+		class={twMerge("bar", classBar)}
 		style="width:{Math.min(100, Math.max(0, progress))}%; {styleBar}"
 	></div>
 </div>

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

@@ -1,7 +1,7 @@
-import "../index.css";
 interface Props {
     progress: number;
     class?: string;
+    style?: string;
     classBar?: string;
     styleBar?: string;
 }

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

@@ -1,10 +1,38 @@
 <script lang="ts">
+	import { svgCircle } from "../../../utils/svg-circle.js";
+	import { twMerge } from "../../../utils/tw-merge.js";
+
 	interface Props {
 		progress: number;
 		class?: string;
+		style?: string;
 	}
 
-	let { progress = 0, class: classProp }: Props = $props();
+	let { progress = 0, class: classProp, style: styleProp }: Props = $props();
+
+	let container: HTMLDivElement;
+	let circleApi: ReturnType<typeof svgCircle> | null = null;
+
+	// Create SVG once when container is mounted
+	$effect(() => {
+		if (container && !circleApi) {
+			circleApi = svgCircle({
+				completeness: Math.min(100, Math.max(0, progress)) / 100,
+				strokeWidth: 10, // in viewBox units (100x100)
+				bgStrokeColor: "var(--stuic-progress-bg)",
+				circleStyle:
+					"stroke: var(--stuic-progress-accent); transition: stroke-dashoffset var(--stuic-progress-transition) linear;",
+				roundedEdges: true,
+				rotate: -90, // start from top
+			});
+			container.appendChild(circleApi.svg);
+		}
+	});
+
+	// Update progress reactively
+	$effect(() => {
+		circleApi?.setCompleteness(Math.min(100, Math.max(0, progress)) / 100);
+	});
 </script>
 
-todo
+<div bind:this={container} class={twMerge("stuic-progress-circle", classProp)} style={styleProp}></div>

package/dist/components/Progress/_internal/Circle.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     progress: number;
     class?: string;
+    style?: string;
 }
 declare const Circle: import("svelte").Component<Props, {}, "">;
 type Circle = ReturnType<typeof Circle>;

package/dist/components/Progress/index.css

@@ -1,5 +1,51 @@
-/* Progress component tokens */
+/* ============================================================================
+   PROGRESS COMPONENT TOKENS
+   Override globally: :root { --stuic-progress-height: 1rem; }
+   Override locally:  <Progress style="--stuic-progress-accent: green;" />
+   ============================================================================ */
+
 :root {
+	/* Colors */
 	--stuic-progress-bg: var(--stuic-color-muted);
 	--stuic-progress-accent: var(--stuic-color-primary);
+
+	/* Bar dimensions */
+	--stuic-progress-height: calc(var(--spacing) * 2); /* 0.5rem */
+	--stuic-progress-radius: var(--radius-sm);
+	--stuic-progress-transition: 100ms;
+
+	/* Circle dimensions */
+	--stuic-progress-circle-size: calc(var(--spacing) * 16); /* 4rem */
+	--stuic-progress-circle-stroke-width: 10; /* in viewBox units (100x100) */
+}
+
+@layer components {
+	/* ============================================================================
+	   BAR STYLES
+	   ============================================================================ */
+
+	.stuic-progress-bar {
+		width: 100%;
+		height: var(--stuic-progress-height);
+		background: var(--stuic-progress-bg);
+		border-radius: var(--stuic-progress-radius);
+		overflow: hidden;
+		pointer-events: none;
+	}
+
+	.stuic-progress-bar > .bar {
+		height: 100%;
+		background: var(--stuic-progress-accent);
+		border-radius: inherit;
+		transition: width var(--stuic-progress-transition) linear;
+	}
+
+	/* ============================================================================
+	   CIRCLE STYLES
+	   ============================================================================ */
+
+	.stuic-progress-circle {
+		width: var(--stuic-progress-circle-size);
+		height: var(--stuic-progress-circle-size);
+	}
 }

package/dist/components/Skeleton/README.md

@@ -0,0 +1,152 @@
+# Skeleton
+
+A loading placeholder component with shimmer and pulse animations. Automatically respects `prefers-reduced-motion` for accessibility.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"text" \| "circle" \| "rectangle"` | `"rectangle"` | Shape variant |
+| `width` | `string` | - | Width (e.g., "100%", "200px") |
+| `height` | `string` | CSS token | Height (e.g., "1rem", "40px") |
+| `size` | `string` | - | Circle shorthand (sets both width & height) |
+| `lines` | `number` | `1` | Number of text lines (text variant) |
+| `gap` | `string` | CSS token | Gap between lines (text variant) |
+| `lastLineWidth` | `string` | `"75%"` | Last line width (text variant) |
+| `animation` | `"shimmer" \| "pulse" \| "none"` | `"shimmer"` | Animation style |
+| `duration` | `string` | CSS token | Animation duration |
+| `rounded` | `boolean \| string` | `true` | Border radius (boolean for default, string for custom) |
+| `ariaLabel` | `string` | - | Accessibility label |
+| `el` | `HTMLDivElement` | - | Bindable element reference |
+| `class` | `string \| string[]` | - | CSS classes |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+  import { Skeleton } from '@marianmeres/stuic';
+</script>
+
+<Skeleton width="100%" height="1rem" />
+```
+
+### Variants
+
+```svelte
+<!-- Rectangle (default) -->
+<Skeleton width="200px" height="100px" />
+
+<!-- Circle -->
+<Skeleton variant="circle" size="48px" />
+
+<!-- Text block -->
+<Skeleton variant="text" lines={3} />
+```
+
+### Animations
+
+```svelte
+<Skeleton animation="shimmer" />
+<Skeleton animation="pulse" />
+<Skeleton animation="none" />
+```
+
+### Custom Duration
+
+```svelte
+<Skeleton duration="2s" />
+
+<!-- Or via CSS variable -->
+<Skeleton style="--stuic-skeleton-duration: 2s;" />
+```
+
+### Card Skeleton Example
+
+```svelte
+<div class="flex items-center gap-4 p-4">
+  <Skeleton variant="circle" size="48px" />
+  <div class="flex-1 space-y-2">
+    <Skeleton height="1rem" width="60%" />
+    <Skeleton height="0.75rem" width="80%" />
+  </div>
+</div>
+```
+
+### List Skeleton Example
+
+```svelte
+{#each Array(5) as _}
+  <div class="flex items-center gap-3 py-2">
+    <Skeleton variant="circle" size="32px" />
+    <Skeleton width="200px" />
+  </div>
+{/each}
+```
+
+## CSS Variables
+
+### Component Tokens
+
+Override globally in `:root` or locally via `style` prop:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-skeleton-bg` | `--stuic-color-muted` | Base background color |
+| `--stuic-skeleton-bg-highlight` | `--stuic-color-muted-hover` | Shimmer highlight color |
+| `--stuic-skeleton-height` | `1rem` | Default height for text lines |
+| `--stuic-skeleton-gap` | `0.5rem` | Gap between text lines |
+| `--stuic-skeleton-radius` | `--radius-sm` | Default border radius |
+| `--stuic-skeleton-duration` | `1.5s` | Animation duration |
+| `--stuic-skeleton-timing` | `ease-in-out` | Animation timing function |
+| `--stuic-skeleton-pulse-opacity` | `0.4` | Pulse animation minimum opacity |
+
+### Customization Examples
+
+```css
+/* Global override - different colors */
+:root {
+  --stuic-skeleton-bg: var(--color-gray-200);
+  --stuic-skeleton-bg-highlight: var(--color-gray-300);
+}
+
+/* Global override - slower animation */
+:root {
+  --stuic-skeleton-duration: 2s;
+}
+
+/* Global override - sharper corners */
+:root {
+  --stuic-skeleton-radius: 0;
+}
+```
+
+```svelte
+<!-- Local override - faster animation -->
+<Skeleton style="--stuic-skeleton-duration: 0.8s;" />
+
+<!-- Local override - custom colors -->
+<Skeleton style="--stuic-skeleton-bg: oklch(0.9 0.02 250);" />
+
+<!-- Local override - no rounded corners -->
+<Skeleton rounded={false} />
+
+<!-- Local override - custom radius -->
+<Skeleton rounded="1rem" />
+```
+
+## Accessibility
+
+- Uses `role="status"` and `aria-busy="true"` by default
+- Optional `ariaLabel` prop for custom screen reader text
+- Automatically disables animations when `prefers-reduced-motion: reduce` is set
+
+## Theming
+
+The Skeleton component uses theme tokens for colors:
+
+- Background: `--stuic-color-muted`
+- Highlight: `--stuic-color-muted-hover`
+
+These automatically adapt to light/dark mode when using the STUIC theming system.

package/dist/components/Skeleton/Skeleton.svelte

@@ -35,7 +35,6 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
 
@@ -45,10 +44,10 @@
 		height,
 		size,
 		lines = 1,
-		gap = "0.5rem",
+		gap,
 		lastLineWidth = "75%",
 		animation = "shimmer",
-		duration = "1.5s",
+		duration,
 		rounded = true,
 		ariaLabel,
 		el = $bindable(),
@@ -67,7 +66,7 @@
 			effectiveAnimation === "pulse" && "stuic-skeleton-pulse",
 			effectiveAnimation === "none" && "bg-[var(--stuic-skeleton-bg)]",
 			variant === "circle" && "stuic-skeleton-circle",
-			rounded === true && variant !== "circle" && "rounded",
+			rounded === true && variant !== "circle" && "stuic-skeleton-rounded",
 			classProp
 		)
 	);
@@ -102,9 +101,9 @@
 			{@const isLast = i === lines - 1}
 			<div
 				class={baseClass}
-				style="{baseStyle}; width: {isLast
-					? lastLineWidth
-					: width || '100%'}; height: {height || '1rem'}"
+				style="{baseStyle}; width: {isLast ? lastLineWidth : width || '100%'}{height
+					? `; height: ${height}`
+					: ''}"
 			></div>
 		{/each}
 		{#if ariaLabel}

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

@@ -27,7 +27,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" |
     /** CSS class */
     class?: string | string[];
 }
-import "./index.css";
 declare const Skeleton: import("svelte").Component<Props, {}, "el">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;