@marianmeres/stuic 2.66.0 → 3.0.0

package/dist/components/DismissibleMessage/README.md

@@ -1,20 +1,18 @@
 # DismissibleMessage
 
-A dismissible alert/message component with color themes and slide transition.
+A dismissible alert/message component with semantic intents and slide transition.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `message` | `THC \| Error` | - | Message content (string, HTML, or Error object) |
-| `theme` | `TW_COLORS` | - | Tailwind color theme (e.g., `"red"`, `"green"`, `"blue"`) |
+| `intent` | `"destructive" \| "warning" \| "success" \| "info"` | - | Semantic color intent |
 | `forceAsHtml` | `boolean` | `true` | Render message as HTML |
 | `duration` | `number` | `150` | Slide transition duration (ms) |
 | `onDismiss` | `(() => void) \| null \| false` | - | Dismiss callback (set to `false` to hide X button) |
 | `class` | `string` | - | CSS for container |
 | `classContent` | `string` | - | CSS for content area |
-| `classDismiss` | `string` | - | CSS for dismiss button |
-| `classX` | `string` | - | CSS for X icon |
 
 ## Usage
 
@@ -22,7 +20,7 @@ A dismissible alert/message component with color themes and slide transition.
 
 ```svelte
 <script lang="ts">
-  import { DismissibleMessage } from 'stuic';
+  import { DismissibleMessage } from '@marianmeres/stuic';
 
   let message = $state('This is an important notice.');
 </script>
@@ -33,27 +31,41 @@ A dismissible alert/message component with color themes and slide transition.
 />
 ```
 
-### With Theme Colors
+### With Semantic Intents
 
 ```svelte
 <script lang="ts">
-  import { DismissibleMessage } from 'stuic';
+  import { DismissibleMessage } from '@marianmeres/stuic';
 
   let error = $state('Something went wrong!');
   let success = $state('Operation completed successfully.');
 </script>
 
+<!-- Error/destructive message -->
 <DismissibleMessage
   message={error}
-  theme="red"
+  intent="destructive"
   onDismiss={() => error = ''}
 />
 
+<!-- Success message -->
 <DismissibleMessage
   message={success}
-  theme="green"
+  intent="success"
   onDismiss={() => success = ''}
 />
+
+<!-- Warning message -->
+<DismissibleMessage
+  message="Please review your changes"
+  intent="warning"
+/>
+
+<!-- Info message -->
+<DismissibleMessage
+  message="New features are available"
+  intent="info"
+/>
 ```
 
 ### Non-Dismissible
@@ -61,7 +73,7 @@ A dismissible alert/message component with color themes and slide transition.
 ```svelte
 <DismissibleMessage
   message="This message cannot be dismissed."
-  theme="blue"
+  intent="info"
   onDismiss={false}
 />
 ```
@@ -84,8 +96,78 @@ A dismissible alert/message component with color themes and slide transition.
 {#if error}
   <DismissibleMessage
     message={error}
-    theme="red"
+    intent="destructive"
     onDismiss={() => error = null}
   />
 {/if}
 ```
+
+## CSS Variables
+
+### Component Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dismissible-message-radius` | `var(--radius-md)` | Border radius |
+| `--stuic-dismissible-message-padding-x` | `calc(var(--spacing) * 4)` | Horizontal padding |
+| `--stuic-dismissible-message-padding-y` | `calc(var(--spacing) * 3)` | Vertical padding |
+| `--stuic-dismissible-message-border-width` | `1px` | Border width |
+| `--stuic-dismissible-message-transition` | `150ms` | Color transition duration |
+
+### Customization Examples
+
+```css
+/* Global override */
+:root {
+  --stuic-dismissible-message-radius: var(--radius-lg);
+  --stuic-dismissible-message-padding-x: calc(var(--spacing) * 6);
+}
+```
+
+```svelte
+<!-- Inline override -->
+<DismissibleMessage
+  message="Custom styled message"
+  style="--stuic-dismissible-message-radius: 9999px;"
+/>
+```
+
+### Intent Colors
+
+Intent colors are derived from the global STUIC design tokens:
+
+| Intent | Token Used |
+|--------|------------|
+| `destructive` | `--stuic-color-destructive` |
+| `warning` | `--stuic-color-warning` |
+| `success` | `--stuic-color-success` |
+| `info` | `--stuic-color-info` |
+
+Customize these in your theme file to change all components at once.
+
+## Data Attributes
+
+The component uses data attributes for CSS targeting:
+
+- `data-intent` - The intent value (when set)
+
+```css
+/* Custom styling for specific intent */
+.stuic-dismissible-message[data-intent="destructive"] {
+  font-weight: bold;
+}
+```
+
+## Migration from v2
+
+The `theme` prop has been replaced with `intent`:
+
+| Old (v2) | New (v3) |
+|----------|----------|
+| `theme="red"` | `intent="destructive"` |
+| `theme="orange"` | `intent="warning"` |
+| `theme="green"` | `intent="success"` |
+| `theme="blue"` | `intent="info"` |
+| No theme | No intent (default) |
+
+The `classDismiss` and `classX` props have been removed.

package/dist/components/DismissibleMessage/index.css

@@ -1,11 +1,125 @@
-/* prettier-ignore */
-@theme inline {
-	--color-dismiss-bg: var(--color-dismiss-bg, var(--color-neutral-200));
-	--color-dismiss-bg-dark: var(--color-dismiss-bg-dark, var(--color-neutral-700));
+/* =============================================================================
+   DISMISSIBLE MESSAGE COMPONENT TOKENS
+   Override globally: :root { --stuic-dismissible-message-radius: 0; }
+   Override locally:  style="--stuic-dismissible-message-radius: 9999px;"
+   ============================================================================= */
 
-	--color-dismiss-text: var(--color-dismiss-text, var(--color-neutral-700));
-	--color-dismiss-text-dark: var(--color-dismiss-text-dark, var(--color-neutral-200));
+:root {
+	--stuic-dismissible-message-radius: var(--radius-md);
+	--stuic-dismissible-message-padding-x: calc(var(--spacing) * 4);
+	--stuic-dismissible-message-padding-y: calc(var(--spacing) * 3);
+	--stuic-dismissible-message-border-width: 1px;
+	--stuic-dismissible-message-transition: 150ms;
+}
+
+/* =============================================================================
+   BASE STYLES
+   ============================================================================= */
+
+.stuic-dismissible-message {
+	display: flex;
+	align-items: center;
+	border-width: var(--stuic-dismissible-message-border-width);
+	border-style: solid;
+	border-radius: var(--stuic-dismissible-message-radius);
+	transition:
+		background var(--stuic-dismissible-message-transition),
+		border-color var(--stuic-dismissible-message-transition);
+
+	/* Colors via internal vars set by intent */
+	background: var(--_bg);
+	color: var(--_text);
+	border-color: var(--_border);
+}
+
+/* Content area */
+.stuic-dismissible-message > .content {
+	flex: 1;
+	padding: var(--stuic-dismissible-message-padding-y)
+		var(--stuic-dismissible-message-padding-x);
+}
+
+/* Icon container (left side) */
+.stuic-dismissible-message > .icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	padding-left: var(--stuic-dismissible-message-padding-x);
+	color: var(--_text);
+	opacity: 0.85;
+}
+
+.stuic-dismissible-message > .icon svg {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+/* Dismiss button container */
+.stuic-dismissible-message > .dismiss {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: calc(var(--stuic-dismissible-message-padding-y) * 0.75);
+}
+
+/* Dismiss button inherits message text color */
+.stuic-dismissible-message > .dismiss .stuic-button {
+	color: var(--_text);
+}
+
+/* =============================================================================
+   DEFAULT (NO INTENT): NEUTRAL MUTED APPEARANCE
+   ============================================================================= */
+
+.stuic-dismissible-message:not([data-intent]) {
+	--_bg: var(--stuic-color-muted);
+	--_text: var(--stuic-color-muted-foreground);
+	--_border: var(--stuic-color-border);
+}
+
+/* =============================================================================
+   INTENT COLOR MAPPING (SOFT STYLE)
+   Each intent uses a soft/tinted appearance appropriate for messages.
+   ============================================================================= */
+
+/* Destructive: error messages */
+.stuic-dismissible-message[data-intent="destructive"] {
+	--_bg: color-mix(in srgb, var(--stuic-color-destructive) 10%, transparent);
+	--_text: var(--stuic-color-destructive);
+	--_border: color-mix(in srgb, var(--stuic-color-destructive) 30%, transparent);
+}
+
+/* Warning: caution messages */
+.stuic-dismissible-message[data-intent="warning"] {
+	--_bg: color-mix(in srgb, var(--stuic-color-warning) 10%, transparent);
+	--_text: var(--stuic-color-warning);
+	--_border: color-mix(in srgb, var(--stuic-color-warning) 30%, transparent);
+}
+
+/* Success: confirmation messages */
+.stuic-dismissible-message[data-intent="success"] {
+	--_bg: color-mix(in srgb, var(--stuic-color-success) 10%, transparent);
+	--_text: var(--stuic-color-success);
+	--_border: color-mix(in srgb, var(--stuic-color-success) 30%, transparent);
+}
+
+/* Info: informational messages */
+.stuic-dismissible-message[data-intent="info"] {
+	--_bg: color-mix(in srgb, var(--stuic-color-info) 10%, transparent);
+	--_text: var(--stuic-color-info);
+	--_border: color-mix(in srgb, var(--stuic-color-info) 30%, transparent);
+}
+
+/* =============================================================================
+   DARK MODE ADJUSTMENTS
+   Increase color intensity for better visibility in dark mode.
+   ============================================================================= */
 
-	--color-dismiss-border: var(--color-dismiss-border, var(--color-neutral-500));
-	--color-dismiss-border-dark: var(--color-dismiss-border-dark, var(--color-neutral-500));
+.dark .stuic-dismissible-message[data-intent="destructive"],
+.dark .stuic-dismissible-message[data-intent="warning"],
+.dark .stuic-dismissible-message[data-intent="success"],
+.dark .stuic-dismissible-message[data-intent="info"] {
+	--_bg: color-mix(in srgb, var(--_text) 20%, transparent);
+	--_border: color-mix(in srgb, var(--_text) 40%, transparent);
 }

package/dist/components/DismissibleMessage/index.d.ts

@@ -1 +1 @@
-export { default as DismissibleMessage, type Props as DismissibleMessageProps, } from "./DismissibleMessage.svelte";
+export { default as DismissibleMessage, type Props as DismissibleMessageProps, type MessageIntent as DismissibleMessageIntent, } from "./DismissibleMessage.svelte";

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -205,49 +205,17 @@
 		);
 	}
 
-	export const DROPDOWN_MENU_BASE_CLASSES = `stuic-dropdown-menu relative inline-block`;
-
-	export const DROPDOWN_MENU_TRIGGER_CLASSES = `
-		inline-flex items-center justify-center gap-2
-		px-3 py-2
-		rounded-md border
-		bg-white dark:bg-neutral-800
-		text-neutral-900 dark:text-neutral-100
-		border-neutral-200 dark:border-neutral-700
-		hover:brightness-95 dark:hover:brightness-110
-		cursor-pointer
-		`;
-	// focus-visible:outline-2 focus-visible:outline-offset-2
-
-	export const DROPDOWN_MENU_DROPDOWN_CLASSES = `
-		stuic-dropdown-menu-dropdown
-		bg-white dark:bg-neutral-800
-		text-neutral-900 dark:text-neutral-100
-		border border-neutral-200 dark:border-neutral-700
-		rounded-md shadow-sm
-		p-1
-		overflow-y-auto
-		z-50
-		min-w-48
-	`;
-
-	export const DROPDOWN_MENU_DIVIDER_CLASSES = `
-		h-px my-1
-		bg-neutral-200 dark:bg-neutral-700
-	`;
-
-	export const DROPDOWN_MENU_HEADER_CLASSES = `
-		px-2 py-1.5
-		text-xs font-semibold uppercase tracking-wide
-		text-neutral-500 dark:text-neutral-400
-		select-none
-	`;
-
-	export const DROPDOWN_MENU_BACKDROP_CLASSES = `
-		stuic-dropdown-menu-backdrop
-		fixed inset-0 bg-black/25
-		z-40
-	`;
+	export const DROPDOWN_MENU_BASE_CLASSES = `stuic-dropdown-menu`;
+
+	export const DROPDOWN_MENU_TRIGGER_CLASSES = `stuic-dropdown-menu-trigger`;
+
+	export const DROPDOWN_MENU_DROPDOWN_CLASSES = `stuic-dropdown-menu-dropdown`;
+
+	export const DROPDOWN_MENU_DIVIDER_CLASSES = `stuic-dropdown-menu-divider`;
+
+	export const DROPDOWN_MENU_HEADER_CLASSES = `stuic-dropdown-menu-header`;
+
+	export const DROPDOWN_MENU_BACKDROP_CLASSES = `stuic-dropdown-menu-backdrop`;
 </script>
 
 <script lang="ts">
@@ -659,15 +627,11 @@
 		>
 			<!-- Close button (fallback mode only) -->
 			{#if !isSupported}
-				<div class="sticky top-0 right-0 z-10 flex just pointer-events-none">
+				<div class="sticky top-0 right-0 z-10 flex pointer-events-none">
 					<button
 						type="button"
 						aria-label="Close"
-						class={[
-							"bg-black text-white rounded-md cursor-pointer opacity-60",
-							"absolute right-0 top-0 p-2",
-							"leading-none hover:opacity-100 pointer-events-auto",
-						]}
+						class="stuic-dropdown-menu-close absolute right-0 top-0 pointer-events-auto"
 						onclick={() => {
 							isOpen = false;
 							triggerEl?.focus();
@@ -760,7 +724,7 @@
 						{#if isExpanded}
 							<div
 								class={twMerge(
-									"stuic-dropdown-menu-expandable-content pl-4",
+									"stuic-dropdown-menu-expandable-content",
 									classExpandableContent
 								)}
 								transition:slide={{ duration: transitionDuration }}

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

@@ -147,12 +147,12 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     /** Optional, used only when css positioning not supported (iPhone)*/
     noScrollLock?: boolean;
 }
-export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
-export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tcursor-pointer\n\t\t";
-export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-sm\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
-export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";
-export declare const DROPDOWN_MENU_HEADER_CLASSES = "\n\t\tpx-2 py-1.5\n\t\ttext-xs font-semibold uppercase tracking-wide\n\t\ttext-neutral-500 dark:text-neutral-400\n\t\tselect-none\n\t";
-export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "\n\t\tstuic-dropdown-menu-backdrop\n\t\tfixed inset-0 bg-black/25\n\t\tz-40\n\t";
+export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu";
+export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "stuic-dropdown-menu-trigger";
+export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "stuic-dropdown-menu-dropdown";
+export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "stuic-dropdown-menu-divider";
+export declare const DROPDOWN_MENU_HEADER_CLASSES = "stuic-dropdown-menu-header";
+export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "stuic-dropdown-menu-backdrop";
 import "./index.css";
 declare const DropdownMenu: import("svelte").Component<Props, {}, "isOpen" | "triggerEl" | "dropdownEl">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/components/DropdownMenu/README.md

@@ -313,3 +313,135 @@ interface DropdownMenuExpandableItem {
 - **Reduced Motion**: Respects user's reduced motion preference
 - **Click Outside**: Automatically closes when clicking outside
 - **Focus Management**: Returns focus to trigger on close
+
+## CSS Variables
+
+Override these tokens globally in `:root` or locally via inline `style`:
+
+### Structure Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-radius` | `--radius-md` | Border radius for trigger and dropdown |
+| `--stuic-dropdown-menu-padding` | `--spacing * 1` | Inner padding of dropdown container |
+| `--stuic-dropdown-menu-gap` | `--spacing * 0.5` | Gap between trigger content |
+| `--stuic-dropdown-menu-min-width` | `12rem` | Minimum width of dropdown |
+| `--stuic-dropdown-menu-transition` | `150ms` | Transition duration |
+
+### Container Colors
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-bg` | `--stuic-color-surface` | Dropdown background color |
+| `--stuic-dropdown-menu-text` | `--stuic-color-surface-foreground` | Dropdown text color |
+| `--stuic-dropdown-menu-border` | `--stuic-color-border` | Dropdown border color |
+| `--stuic-dropdown-menu-shadow` | subtle shadow | Dropdown shadow |
+
+### Trigger Button
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-trigger-bg` | `--stuic-color-surface` | Trigger background |
+| `--stuic-dropdown-menu-trigger-bg-hover` | `--stuic-color-surface-hover` | Trigger hover background |
+| `--stuic-dropdown-menu-trigger-bg-active` | `--stuic-color-surface-active` | Trigger active background |
+| `--stuic-dropdown-menu-trigger-text` | `--stuic-color-surface-foreground` | Trigger text color |
+| `--stuic-dropdown-menu-trigger-text-hover` | `--stuic-color-surface-foreground-hover` | Trigger hover text color |
+| `--stuic-dropdown-menu-trigger-text-active` | `--stuic-color-surface-foreground-active` | Trigger active text color |
+| `--stuic-dropdown-menu-trigger-border` | `--stuic-color-border` | Trigger border color |
+| `--stuic-dropdown-menu-trigger-border-hover` | `--stuic-color-border-hover` | Trigger hover border |
+| `--stuic-dropdown-menu-trigger-border-active` | `--stuic-color-border-active` | Trigger active border |
+| `--stuic-dropdown-menu-trigger-padding-x` | `--spacing * 3` | Trigger horizontal padding |
+| `--stuic-dropdown-menu-trigger-padding-y` | `--spacing * 2` | Trigger vertical padding |
+
+### Focus Ring
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-ring-width` | `3px` | Focus ring width |
+| `--stuic-dropdown-menu-ring-offset` | `0px` | Focus ring offset |
+| `--stuic-dropdown-menu-ring-color` | `--stuic-color-ring` | Focus ring color |
+
+### Divider
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-divider-bg` | `--stuic-color-border` | Divider color |
+| `--stuic-dropdown-menu-divider-height` | `1px` | Divider height |
+| `--stuic-dropdown-menu-divider-margin-y` | `--spacing * 1` | Divider vertical margin |
+
+### Header (Section Label)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-header-text` | `--stuic-color-muted-foreground` | Header text color |
+| `--stuic-dropdown-menu-header-font-size` | `--text-xs` | Header font size |
+| `--stuic-dropdown-menu-header-font-weight` | `--font-weight-semibold` | Header font weight |
+| `--stuic-dropdown-menu-header-padding-x` | `--spacing * 2` | Header horizontal padding |
+| `--stuic-dropdown-menu-header-padding-y` | `--spacing * 1.5` | Header vertical padding |
+| `--stuic-dropdown-menu-header-letter-spacing` | `0.05em` | Header letter spacing |
+| `--stuic-dropdown-menu-header-text-transform` | `uppercase` | Header text transform |
+
+### Backdrop (Fallback Mode)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-backdrop-bg` | `rgb(0 0 0 / 0.25)` | Backdrop color |
+| `--stuic-dropdown-menu-backdrop-z-index` | `40` | Backdrop z-index |
+
+### Close Button (Fallback Mode)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-close-bg` | `--stuic-color-foreground` | Close button background |
+| `--stuic-dropdown-menu-close-text` | `--stuic-color-background` | Close button text color |
+| `--stuic-dropdown-menu-close-opacity` | `0.6` | Close button opacity |
+| `--stuic-dropdown-menu-close-opacity-hover` | `1` | Close button hover opacity |
+
+### Expandable Section
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-expandable-indent` | `--spacing * 4` | Expandable content indent |
+
+## Customization Examples
+
+### Global Override
+
+```css
+/* Custom theme: pill-shaped dropdowns with more padding */
+:root {
+  --stuic-dropdown-menu-radius: 9999px;
+  --stuic-dropdown-menu-padding: 1rem;
+  --stuic-dropdown-menu-trigger-bg: var(--color-blue-500);
+  --stuic-dropdown-menu-trigger-text: white;
+}
+```
+
+### Local Override
+
+```svelte
+<DropdownMenu
+  style="--stuic-dropdown-menu-radius: 0; --stuic-dropdown-menu-shadow: none;"
+  items={items}
+>
+  Sharp Corners, No Shadow
+</DropdownMenu>
+```
+
+### Using Class Props
+
+Class props override default styling with Tailwind classes:
+
+```svelte
+<!-- Blue-themed dropdown -->
+<DropdownMenu
+  items={items}
+  classTrigger="bg-blue-500 text-white hover:bg-blue-600 border-blue-600"
+  classDropdown="bg-blue-50 dark:bg-blue-950 border-blue-200"
+  classItem="hover:bg-blue-100 dark:hover:bg-blue-900"
+>
+  Blue Theme
+</DropdownMenu>
+```
+
+Class props always win over CSS variables due to Tailwind's specificity.