@marianmeres/stuic 3.0.0 → 3.0.1

package/dist/components/DismissibleMessage/index.css

@@ -12,114 +12,120 @@
 	--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.
-   ============================================================================= */
-
-.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);
+@layer components {
+	/* =============================================================================
+	   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) 15%, transparent);
+		/* --_text: var(--stuic-color-destructive); */
+		--_text: color-mix(in srgb, var(--stuic-color-destructive), black 15%);
+		--_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) 15%, transparent);
+		/* --_text: var(--stuic-color-warning); */
+		--_text: color-mix(in srgb, var(--stuic-color-warning), black 15%);
+		--_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) 15%, transparent);
+		/* --_text: var(--stuic-color-success); */
+		--_text: color-mix(in srgb, var(--stuic-color-success), black 15%);
+		--_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) 15%, transparent);
+		/* --_text: var(--stuic-color-info); */
+		--_text: color-mix(in srgb, var(--stuic-color-info), black 15%);
+		--_border: color-mix(in srgb, var(--stuic-color-info) 30%, transparent);
+	}
+
+	/* =============================================================================
+	   DARK MODE ADJUSTMENTS
+	   Increase color intensity for better visibility in dark mode.
+	   ============================================================================= */
+
+	.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/DropdownMenu/DropdownMenu.svelte

@@ -229,7 +229,6 @@
 	import { untrack } from "svelte";
 	import Thc from "../Thc/Thc.svelte";
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
-	import "./index.css";
 	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 	import { waitForTwoRepaints } from "../../utils/paint.js";
 

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

@@ -153,7 +153,6 @@ export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "stuic-dropdown-menu-dropd
 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>;
 export default DropdownMenu;

package/dist/components/DropdownMenu/index.css

@@ -66,202 +66,204 @@
 	--stuic-dropdown-menu-expandable-indent: calc(var(--spacing) * 4);
 }
 
-/* =============================================================================
-   BASE STYLES
-   ============================================================================= */
-
-.stuic-dropdown-menu {
-	position: relative;
-	display: inline-block;
-}
-
-/* =============================================================================
-   TRIGGER BUTTON
-   ============================================================================= */
-
-.stuic-dropdown-menu-trigger {
-	/* Layout */
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--stuic-dropdown-menu-gap);
-
-	/* Sizing */
-	padding: var(--stuic-dropdown-menu-trigger-padding-y)
-		var(--stuic-dropdown-menu-trigger-padding-x);
-
-	/* Box model */
-	border-width: 1px;
-	border-style: solid;
-	border-radius: var(--stuic-dropdown-menu-radius);
-
-	/* Colors */
-	background: var(--stuic-dropdown-menu-trigger-bg);
-	color: var(--stuic-dropdown-menu-trigger-text);
-	border-color: var(--stuic-dropdown-menu-trigger-border);
-
-	/* Interaction */
-	cursor: pointer;
-	user-select: none;
-	-webkit-tap-highlight-color: transparent;
-	touch-action: manipulation;
-	transition:
-		background var(--stuic-dropdown-menu-transition),
-		color var(--stuic-dropdown-menu-transition),
-		border-color var(--stuic-dropdown-menu-transition);
-}
-
-.stuic-dropdown-menu-trigger:hover:not(:disabled) {
-	background: var(--stuic-dropdown-menu-trigger-bg-hover);
-	color: var(--stuic-dropdown-menu-trigger-text-hover);
-	border-color: var(--stuic-dropdown-menu-trigger-border-hover);
-}
-
-.stuic-dropdown-menu-trigger:active:not(:disabled) {
-	background: var(--stuic-dropdown-menu-trigger-bg-active);
-	color: var(--stuic-dropdown-menu-trigger-text-active);
-	border-color: var(--stuic-dropdown-menu-trigger-border-active);
-}
-
-.stuic-dropdown-menu-trigger:focus-visible {
-	outline: var(--stuic-dropdown-menu-ring-width) solid
-		var(--stuic-dropdown-menu-ring-color);
-	outline-offset: var(--stuic-dropdown-menu-ring-offset);
-}
+@layer components {
+	/* =============================================================================
+	   BASE STYLES
+	   ============================================================================= */
+
+	.stuic-dropdown-menu {
+		position: relative;
+		display: inline-block;
+	}
 
-/* =============================================================================
-   DROPDOWN CONTAINER
-   ============================================================================= */
+	/* =============================================================================
+	   TRIGGER BUTTON
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-trigger {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--stuic-dropdown-menu-gap);
+
+		/* Sizing */
+		padding: var(--stuic-dropdown-menu-trigger-padding-y)
+			var(--stuic-dropdown-menu-trigger-padding-x);
+
+		/* Box model */
+		border-width: 1px;
+		border-style: solid;
+		border-radius: var(--stuic-dropdown-menu-radius);
+
+		/* Colors */
+		background: var(--stuic-dropdown-menu-trigger-bg);
+		color: var(--stuic-dropdown-menu-trigger-text);
+		border-color: var(--stuic-dropdown-menu-trigger-border);
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+		transition:
+			background var(--stuic-dropdown-menu-transition),
+			color var(--stuic-dropdown-menu-transition),
+			border-color var(--stuic-dropdown-menu-transition);
+	}
 
-.stuic-dropdown-menu-dropdown {
-	/* Colors */
-	background: var(--stuic-dropdown-menu-bg);
-	color: var(--stuic-dropdown-menu-text);
-	border: 1px solid var(--stuic-dropdown-menu-border);
-	box-shadow: var(--stuic-dropdown-menu-shadow);
+	.stuic-dropdown-menu-trigger:hover:not(:disabled) {
+		background: var(--stuic-dropdown-menu-trigger-bg-hover);
+		color: var(--stuic-dropdown-menu-trigger-text-hover);
+		border-color: var(--stuic-dropdown-menu-trigger-border-hover);
+	}
 
-	/* Box model */
-	border-radius: var(--stuic-dropdown-menu-radius);
-	padding: var(--stuic-dropdown-menu-padding);
+	.stuic-dropdown-menu-trigger:active:not(:disabled) {
+		background: var(--stuic-dropdown-menu-trigger-bg-active);
+		color: var(--stuic-dropdown-menu-trigger-text-active);
+		border-color: var(--stuic-dropdown-menu-trigger-border-active);
+	}
 
-	/* Layout */
-	min-width: var(--stuic-dropdown-menu-min-width);
-	overflow-y: auto;
-	scrollbar-width: thin;
+	.stuic-dropdown-menu-trigger:focus-visible {
+		outline: var(--stuic-dropdown-menu-ring-width) solid
+			var(--stuic-dropdown-menu-ring-color);
+		outline-offset: var(--stuic-dropdown-menu-ring-offset);
+	}
 
-	/* Stacking */
-	z-index: 50;
-}
+	/* =============================================================================
+	   DROPDOWN CONTAINER
+	   ============================================================================= */
 
-/* =============================================================================
-   DIVIDER
-   ============================================================================= */
+	.stuic-dropdown-menu-dropdown {
+		/* Colors */
+		background: var(--stuic-dropdown-menu-bg);
+		color: var(--stuic-dropdown-menu-text);
+		border: 1px solid var(--stuic-dropdown-menu-border);
+		box-shadow: var(--stuic-dropdown-menu-shadow);
+
+		/* Box model */
+		border-radius: var(--stuic-dropdown-menu-radius);
+		padding: var(--stuic-dropdown-menu-padding);
+
+		/* Layout */
+		min-width: var(--stuic-dropdown-menu-min-width);
+		overflow-y: auto;
+		scrollbar-width: thin;
+
+		/* Stacking */
+		z-index: 50;
+	}
 
-.stuic-dropdown-menu-divider {
-	height: var(--stuic-dropdown-menu-divider-height);
-	margin: var(--stuic-dropdown-menu-divider-margin-y) 0;
-	background: var(--stuic-dropdown-menu-divider-bg);
-}
+	/* =============================================================================
+	   DIVIDER
+	   ============================================================================= */
 
-/* =============================================================================
-   HEADER (Section Label)
-   ============================================================================= */
+	.stuic-dropdown-menu-divider {
+		height: var(--stuic-dropdown-menu-divider-height);
+		margin: var(--stuic-dropdown-menu-divider-margin-y) 0;
+		background: var(--stuic-dropdown-menu-divider-bg);
+	}
 
-.stuic-dropdown-menu-header {
-	padding: var(--stuic-dropdown-menu-header-padding-y)
-		var(--stuic-dropdown-menu-header-padding-x);
-	font-size: var(--stuic-dropdown-menu-header-font-size);
-	font-weight: var(--stuic-dropdown-menu-header-font-weight);
-	letter-spacing: var(--stuic-dropdown-menu-header-letter-spacing);
-	text-transform: var(--stuic-dropdown-menu-header-text-transform);
-	color: var(--stuic-dropdown-menu-header-text);
-	user-select: none;
-}
+	/* =============================================================================
+	   HEADER (Section Label)
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-header {
+		padding: var(--stuic-dropdown-menu-header-padding-y)
+			var(--stuic-dropdown-menu-header-padding-x);
+		font-size: var(--stuic-dropdown-menu-header-font-size);
+		font-weight: var(--stuic-dropdown-menu-header-font-weight);
+		letter-spacing: var(--stuic-dropdown-menu-header-letter-spacing);
+		text-transform: var(--stuic-dropdown-menu-header-text-transform);
+		color: var(--stuic-dropdown-menu-header-text);
+		user-select: none;
+	}
 
-/* =============================================================================
-   BACKDROP (Fallback Mode)
-   ============================================================================= */
+	/* =============================================================================
+	   BACKDROP (Fallback Mode)
+	   ============================================================================= */
 
-.stuic-dropdown-menu-backdrop {
-	position: fixed;
-	inset: 0;
-	background: var(--stuic-dropdown-menu-backdrop-bg);
-	z-index: var(--stuic-dropdown-menu-backdrop-z-index);
-	transition-property: opacity;
-}
-
-/* =============================================================================
-   CLOSE BUTTON (Fallback Mode)
-   ============================================================================= */
+	.stuic-dropdown-menu-backdrop {
+		position: fixed;
+		inset: 0;
+		background: var(--stuic-dropdown-menu-backdrop-bg);
+		z-index: var(--stuic-dropdown-menu-backdrop-z-index);
+		transition-property: opacity;
+	}
 
-.stuic-dropdown-menu-close {
-	background: var(--stuic-dropdown-menu-close-bg);
-	color: var(--stuic-dropdown-menu-close-text);
-	opacity: var(--stuic-dropdown-menu-close-opacity);
-	border-radius: var(--stuic-dropdown-menu-radius);
-	padding: calc(var(--spacing) * 2);
-	cursor: pointer;
-	line-height: 1;
-	transition: opacity var(--stuic-dropdown-menu-transition);
-}
+	/* =============================================================================
+	   CLOSE BUTTON (Fallback Mode)
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-close {
+		background: var(--stuic-dropdown-menu-close-bg);
+		color: var(--stuic-dropdown-menu-close-text);
+		opacity: var(--stuic-dropdown-menu-close-opacity);
+		border-radius: var(--stuic-dropdown-menu-radius);
+		padding: calc(var(--spacing) * 2);
+		cursor: pointer;
+		line-height: 1;
+		transition: opacity var(--stuic-dropdown-menu-transition);
+	}
 
-.stuic-dropdown-menu-close:hover {
-	opacity: var(--stuic-dropdown-menu-close-opacity-hover);
-}
+	.stuic-dropdown-menu-close:hover {
+		opacity: var(--stuic-dropdown-menu-close-opacity-hover);
+	}
 
-/* =============================================================================
-   EXPANDABLE SECTION
-   ============================================================================= */
+	/* =============================================================================
+	   EXPANDABLE SECTION
+	   ============================================================================= */
 
-.stuic-dropdown-menu-expandable-content {
-	padding-left: var(--stuic-dropdown-menu-expandable-indent);
-	overflow: hidden;
-}
+	.stuic-dropdown-menu-expandable-content {
+		padding-left: var(--stuic-dropdown-menu-expandable-indent);
+		overflow: hidden;
+	}
 
-/* =============================================================================
-   LIST ITEM BUTTON OVERRIDES FOR DROPDOWN CONTEXT
-   Reset default ListItemButton background to transparent within dropdown.
-   ============================================================================= */
+	/* =============================================================================
+	   LIST ITEM BUTTON OVERRIDES FOR DROPDOWN CONTEXT
+	   Reset default ListItemButton background to transparent within dropdown.
+	   ============================================================================= */
 
-.stuic-dropdown-menu-dropdown .stuic-list-item-button {
-	--stuic-list-item-button-bg: transparent;
-	--stuic-list-item-button-border: transparent;
-}
+	.stuic-dropdown-menu-dropdown .stuic-list-item-button {
+		--stuic-list-item-button-bg: transparent;
+		--stuic-list-item-button-border: transparent;
+	}
 
-/* =============================================================================
-   CSS ANCHOR POSITIONING (when supported)
-   ============================================================================= */
+	/* =============================================================================
+	   CSS ANCHOR POSITIONING (when supported)
+	   ============================================================================= */
 
-@position-try --pop-top {
-	position-area: top;
-}
-@position-try --pop-top-span-right {
-	position-area: top span-right;
-}
-@position-try --pop-top-span-left {
-	position-area: top span-left;
-}
-@position-try --pop-bottom {
-	position-area: bottom;
-}
-@position-try --pop-bottom-span-right {
-	position-area: bottom span-right;
-}
-@position-try --pop-bottom-span-left {
-	position-area: bottom span-left;
-}
-@position-try --pop-left {
-	position-area: left;
-}
-@position-try --pop-right {
-	position-area: right;
-}
+	@position-try --pop-top {
+		position-area: top;
+	}
+	@position-try --pop-top-span-right {
+		position-area: top span-right;
+	}
+	@position-try --pop-top-span-left {
+		position-area: top span-left;
+	}
+	@position-try --pop-bottom {
+		position-area: bottom;
+	}
+	@position-try --pop-bottom-span-right {
+		position-area: bottom span-right;
+	}
+	@position-try --pop-bottom-span-left {
+		position-area: bottom span-left;
+	}
+	@position-try --pop-left {
+		position-area: left;
+	}
+	@position-try --pop-right {
+		position-area: right;
+	}
 
-@supports (anchor-name: --anchor) {
-	.stuic-dropdown-menu-dropdown {
-		position-try-fallbacks:
-			flip-inline, --pop-bottom-span-right, --pop-bottom-span-left, --pop-bottom,
-			flip-block, --pop-top-span-right, --pop-top-span-left, --pop-top, --pop-left,
-			--pop-right;
+	@supports (anchor-name: --anchor) {
+		.stuic-dropdown-menu-dropdown {
+			position-try-fallbacks:
+				flip-inline, --pop-bottom-span-right, --pop-bottom-span-left, --pop-bottom,
+				flip-block, --pop-top-span-right, --pop-top-span-left, --pop-top, --pop-left,
+				--pop-right;
+		}
 	}
 }