@marianmeres/stuic 2.66.0 → 3.0.1

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; */
+}
+
+@layer components {
+	/* ============================================================================
+	   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;
+		background: transparent;
+		border-bottom-left-radius: var(--stuic-notification-radius);
+		border-bottom-right-radius: var(--stuic-notification-radius);
+		overflow: hidden;
+		pointer-events: none;
+	}
+
+	.stuic-notification .progress-bar {
+		width: 100%;
+		height: 100%;
+		/* background: rgb(255 255 255 / 0.5); */
+		border-bottom-left-radius: var(--stuic-notification-radius);
+		border-bottom-right-radius: var(--stuic-notification-radius);
+	}
 }

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;
 }