@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/Avatar/Avatar.svelte

@@ -39,7 +39,6 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { generateAvatarColors } from "../../utils/avatar-colors.js";
 	import { iconUser as defaultIconUser } from "../../icons/index.js";

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

@@ -37,7 +37,6 @@ export interface Props {
     /** Bindable element reference */
     el?: HTMLDivElement | HTMLButtonElement;
 }
-import "./index.css";
 declare const Avatar: import("svelte").Component<Props, {}, "el">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/Avatar/index.css

@@ -40,89 +40,91 @@
 	--stuic-avatar-font-size-2xl: var(--text-2xl);
 }
 
-/* ============================================================================
-   BASE STYLES
-   ============================================================================ */
-
-.stuic-avatar {
-	/* Layout */
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	overflow: hidden;
-
-	/* Typography */
-	font-weight: var(--stuic-avatar-font-weight);
-
-	/* Box model */
-	border-radius: var(--stuic-avatar-radius);
-
-	/* Colors (can be overridden by autoColor inline styles) */
-	background: var(--stuic-avatar-bg);
-	color: var(--stuic-avatar-fg);
-
-	/* Transition for interactive mode */
-	transition:
-		background var(--stuic-avatar-transition),
-		color var(--stuic-avatar-transition),
-		opacity var(--stuic-avatar-transition);
-}
-
-/* ============================================================================
-   SIZE VARIANTS
-   ============================================================================ */
-
-.stuic-avatar[data-size="sm"] {
-	width: var(--stuic-avatar-size-sm);
-	height: var(--stuic-avatar-size-sm);
-	font-size: var(--stuic-avatar-font-size-sm);
-}
-
-.stuic-avatar[data-size="md"] {
-	width: var(--stuic-avatar-size-md);
-	height: var(--stuic-avatar-size-md);
-	font-size: var(--stuic-avatar-font-size-md);
-}
-
-.stuic-avatar[data-size="lg"] {
-	width: var(--stuic-avatar-size-lg);
-	height: var(--stuic-avatar-size-lg);
-	font-size: var(--stuic-avatar-font-size-lg);
-}
-
-.stuic-avatar[data-size="xl"] {
-	width: var(--stuic-avatar-size-xl);
-	height: var(--stuic-avatar-size-xl);
-	font-size: var(--stuic-avatar-font-size-xl);
-}
-
-.stuic-avatar[data-size="2xl"] {
-	width: var(--stuic-avatar-size-2xl);
-	height: var(--stuic-avatar-size-2xl);
-	font-size: var(--stuic-avatar-font-size-2xl);
-}
-
-/* ============================================================================
-   INTERACTIVE MODE (button)
-   ============================================================================ */
-
-.stuic-avatar[data-interactive] {
-	cursor: pointer;
-	user-select: none;
-	-webkit-tap-highlight-color: transparent;
-}
-
-.stuic-avatar[data-interactive]:hover {
-	opacity: 0.85;
-}
-
-.stuic-avatar[data-interactive]:active {
-	opacity: 0.75;
-}
-
-/* Focus styles */
-.stuic-avatar[data-interactive]:focus-visible {
-	outline: var(--stuic-avatar-ring-width) solid var(--stuic-avatar-ring-color);
-	outline-offset: var(--stuic-avatar-ring-offset);
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-avatar {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		overflow: hidden;
+
+		/* Typography */
+		font-weight: var(--stuic-avatar-font-weight);
+
+		/* Box model */
+		border-radius: var(--stuic-avatar-radius);
+
+		/* Colors (can be overridden by autoColor inline styles) */
+		background: var(--stuic-avatar-bg);
+		color: var(--stuic-avatar-fg);
+
+		/* Transition for interactive mode */
+		transition:
+			background var(--stuic-avatar-transition),
+			color var(--stuic-avatar-transition),
+			opacity var(--stuic-avatar-transition);
+	}
+
+	/* ============================================================================
+	   SIZE VARIANTS
+	   ============================================================================ */
+
+	.stuic-avatar[data-size="sm"] {
+		width: var(--stuic-avatar-size-sm);
+		height: var(--stuic-avatar-size-sm);
+		font-size: var(--stuic-avatar-font-size-sm);
+	}
+
+	.stuic-avatar[data-size="md"] {
+		width: var(--stuic-avatar-size-md);
+		height: var(--stuic-avatar-size-md);
+		font-size: var(--stuic-avatar-font-size-md);
+	}
+
+	.stuic-avatar[data-size="lg"] {
+		width: var(--stuic-avatar-size-lg);
+		height: var(--stuic-avatar-size-lg);
+		font-size: var(--stuic-avatar-font-size-lg);
+	}
+
+	.stuic-avatar[data-size="xl"] {
+		width: var(--stuic-avatar-size-xl);
+		height: var(--stuic-avatar-size-xl);
+		font-size: var(--stuic-avatar-font-size-xl);
+	}
+
+	.stuic-avatar[data-size="2xl"] {
+		width: var(--stuic-avatar-size-2xl);
+		height: var(--stuic-avatar-size-2xl);
+		font-size: var(--stuic-avatar-font-size-2xl);
+	}
+
+	/* ============================================================================
+	   INTERACTIVE MODE (button)
+	   ============================================================================ */
+
+	.stuic-avatar[data-interactive] {
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stuic-avatar[data-interactive]:hover {
+		opacity: 0.85;
+	}
+
+	.stuic-avatar[data-interactive]:active {
+		opacity: 0.75;
+	}
+
+	/* Focus styles */
+	.stuic-avatar[data-interactive]:focus-visible {
+		outline: var(--stuic-avatar-ring-width) solid var(--stuic-avatar-ring-color);
+		outline-offset: var(--stuic-avatar-ring-offset);
+	}
 }

package/dist/components/Backdrop/Backdrop.svelte

@@ -26,7 +26,6 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
 	import { twMerge } from "../../utils/tw-merge.js";
 
 	const clog = createClog("Backdrop", { color: "auto" });

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

@@ -13,7 +13,6 @@ export interface Props extends Record<string, any> {
     visible?: boolean;
     noScrollLock?: boolean;
 }
-import "./index.css";
 declare const Backdrop: import("svelte").Component<Props, {
     close: () => void;
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;

package/dist/components/Backdrop/index.css

@@ -10,20 +10,22 @@
 	--stuic-backdrop-z-index: 10;
 }
 
-/* ============================================================================
-   BASE STYLES
-   ============================================================================ */
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
 
-.stuic-backdrop {
-	/* Layout */
-	position: fixed;
-	inset: 0;
-	display: flex;
-	height: 100dvh;
+	.stuic-backdrop {
+		/* Layout */
+		position: fixed;
+		inset: 0;
+		display: flex;
+		height: 100dvh;
 
-	/* Stacking */
-	z-index: var(--stuic-backdrop-z-index);
+		/* Stacking */
+		z-index: var(--stuic-backdrop-z-index);
 
-	/* Colors */
-	background: var(--stuic-backdrop-bg);
+		/* Colors */
+		background: var(--stuic-backdrop-bg);
+	}
 }

package/dist/components/Button/Button.svelte

@@ -47,7 +47,6 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { tooltip, type TooltipConfig } from "../../actions/tooltip/tooltip.svelte.js";
 	import { X, type XProps } from "../X/index.js";

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

@@ -43,7 +43,6 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     /** Show only spinner when spinner? */
     spinnerOnly?: boolean;
 }
-import "./index.css";
 import { type TooltipConfig } from "../../actions/tooltip/tooltip.svelte.js";
 import { type XProps } from "../X/index.js";
 import { type THC } from "../Thc/Thc.svelte";