@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte

@@ -39,7 +39,6 @@
 	import { twMerge } from "../../utils/tw-merge.js";
 	import Button from "../Button/Button.svelte";
 	//
-	import "./index.css";
 	import { tooltip, type TooltipConfig } from "../../actions/index.js";
 
 	let {

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

@@ -22,7 +22,6 @@ export interface Props {
     buttonProps?: (index: number, coll: ItemColl) => undefined | Record<string, any>;
     tooltip?: TooltipConfig;
 }
-import "./index.css";
 import { type TooltipConfig } from "../../actions/index.js";
 declare const ButtonGroupRadio: import("svelte").Component<Props, {}, "value" | "activeIndex">;
 type ButtonGroupRadio = ReturnType<typeof ButtonGroupRadio>;

package/dist/components/ButtonGroupRadio/index.css

@@ -36,123 +36,129 @@
 	--stuic-button-group-button-bg-active: var(--stuic-color-primary);
 	--stuic-button-group-button-text-active: var(--stuic-color-primary-foreground);
 	--stuic-button-group-button-bg-active-hover: var(--stuic-color-primary-hover);
-	--stuic-button-group-button-text-active-hover: var(--stuic-color-primary-foreground-hover);
+	--stuic-button-group-button-text-active-hover: var(
+		--stuic-color-primary-foreground-hover
+	);
 }
 
-/* ============================================================================
-   BASE STYLES
-   ============================================================================ */
-
-.stuic-button-group {
-	/* Layout */
-	display: inline-flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--stuic-button-group-gap);
-	width: 100%;
-
-	/* Box model */
-	padding: var(--stuic-button-group-padding);
-	border-width: var(--stuic-button-group-border-width);
-	border-style: solid;
-	border-radius: var(--stuic-button-group-radius);
-
-	/* Colors */
-	background: var(--stuic-button-group-bg);
-	color: var(--stuic-button-group-text);
-	border-color: var(--stuic-button-group-border);
-}
-
-/* Focus-within state */
-.stuic-button-group:focus-within {
-	outline: var(--stuic-button-group-ring-width) solid var(--stuic-button-group-ring-color);
-	outline-offset: 0;
-}
-
-/* ============================================================================
-   SIZE VARIANTS
-   ============================================================================ */
-
-.stuic-button-group[data-size="sm"] {
-	--stuic-button-group-padding: 0.25rem;
-	--stuic-button-group-gap: 0.125rem;
-	--stuic-button-group-button-padding-x: 0.5rem;
-	--stuic-button-group-button-padding-y: 0.375rem;
-	--stuic-button-group-button-min-height: 2.25rem; /* 36px - still touch-friendly */
-}
-
-.stuic-button-group[data-size="lg"] {
-	--stuic-button-group-padding: 0.5rem;
-	--stuic-button-group-gap: 0.375rem;
-	--stuic-button-group-button-padding-x: 1rem;
-	--stuic-button-group-button-padding-y: 0.625rem;
-	--stuic-button-group-button-min-height: 3rem; /* 48px */
-}
-
-/* ============================================================================
-   BUTTON STYLES
-   ============================================================================ */
-
-.stuic-button-group-button {
-	/* Layout */
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex: 1;
-
-	/* Box model - mobile-friendly touch targets */
-	padding: var(--stuic-button-group-button-padding-y) var(--stuic-button-group-button-padding-x);
-	min-height: var(--stuic-button-group-button-min-height);
-	border: none;
-	border-radius: var(--stuic-button-group-radius);
-
-	/* Typography */
-	white-space: nowrap;
-	line-height: 1;
-	text-align: center;
-
-	/* Colors */
-	background: var(--stuic-button-group-button-bg);
-	color: var(--stuic-button-group-button-text);
-
-	/* Interaction - mobile-friendly */
-	cursor: pointer;
-	user-select: none;
-	-webkit-tap-highlight-color: transparent;
-	touch-action: manipulation;
-
-	/* Transition */
-	transition:
-		background var(--stuic-button-group-transition),
-		color var(--stuic-button-group-transition);
-
-	/* Focus */
-	outline: none;
-}
-
-.stuic-button-group-button:hover:not(:disabled):not([aria-checked="true"]) {
-	background: var(--stuic-button-group-button-bg-hover);
-	color: var(--stuic-button-group-button-text-hover);
-}
-
-.stuic-button-group-button:focus-visible {
-	outline: none; /* Focus handled by container */
-}
-
-/* Active/selected button */
-.stuic-button-group-button[aria-checked="true"] {
-	background: var(--stuic-button-group-button-bg-active);
-	color: var(--stuic-button-group-button-text-active);
-	box-shadow: none;
-}
-
-.stuic-button-group-button[aria-checked="true"]:hover:not(:disabled) {
-	background: var(--stuic-button-group-button-bg-active-hover);
-	color: var(--stuic-button-group-button-text-active-hover);
-}
-
-/* Disabled state */
-.stuic-button-group-button:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
+@layer components {
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
+
+	.stuic-button-group {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--stuic-button-group-gap);
+		width: 100%;
+
+		/* Box model */
+		padding: var(--stuic-button-group-padding);
+		border-width: var(--stuic-button-group-border-width);
+		border-style: solid;
+		border-radius: var(--stuic-button-group-radius);
+
+		/* Colors */
+		background: var(--stuic-button-group-bg);
+		color: var(--stuic-button-group-text);
+		border-color: var(--stuic-button-group-border);
+	}
+
+	/* Focus-within state */
+	.stuic-button-group:focus-within {
+		outline: var(--stuic-button-group-ring-width) solid
+			var(--stuic-button-group-ring-color);
+		outline-offset: 0;
+	}
+
+	/* ============================================================================
+	   SIZE VARIANTS
+	   ============================================================================ */
+
+	.stuic-button-group[data-size="sm"] {
+		--stuic-button-group-padding: 0.25rem;
+		--stuic-button-group-gap: 0.125rem;
+		--stuic-button-group-button-padding-x: 0.5rem;
+		--stuic-button-group-button-padding-y: 0.375rem;
+		--stuic-button-group-button-min-height: 2.25rem; /* 36px - still touch-friendly */
+	}
+
+	.stuic-button-group[data-size="lg"] {
+		--stuic-button-group-padding: 0.5rem;
+		--stuic-button-group-gap: 0.375rem;
+		--stuic-button-group-button-padding-x: 1rem;
+		--stuic-button-group-button-padding-y: 0.625rem;
+		--stuic-button-group-button-min-height: 3rem; /* 48px */
+	}
+
+	/* ============================================================================
+	   BUTTON STYLES
+	   ============================================================================ */
+
+	.stuic-button-group-button {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+
+		/* Box model - mobile-friendly touch targets */
+		padding: var(--stuic-button-group-button-padding-y)
+			var(--stuic-button-group-button-padding-x);
+		min-height: var(--stuic-button-group-button-min-height);
+		border: none;
+		border-radius: var(--stuic-button-group-radius);
+
+		/* Typography */
+		white-space: nowrap;
+		line-height: 1;
+		text-align: center;
+
+		/* Colors */
+		background: var(--stuic-button-group-button-bg);
+		color: var(--stuic-button-group-button-text);
+
+		/* Interaction - mobile-friendly */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+
+		/* Transition */
+		transition:
+			background var(--stuic-button-group-transition),
+			color var(--stuic-button-group-transition);
+
+		/* Focus */
+		outline: none;
+	}
+
+	.stuic-button-group-button:hover:not(:disabled):not([aria-checked="true"]) {
+		background: var(--stuic-button-group-button-bg-hover);
+		color: var(--stuic-button-group-button-text-hover);
+	}
+
+	.stuic-button-group-button:focus-visible {
+		outline: none; /* Focus handled by container */
+	}
+
+	/* Active/selected button */
+	.stuic-button-group-button[aria-checked="true"] {
+		background: var(--stuic-button-group-button-bg-active);
+		color: var(--stuic-button-group-button-text-active);
+		box-shadow: none;
+	}
+
+	.stuic-button-group-button[aria-checked="true"]:hover:not(:disabled) {
+		background: var(--stuic-button-group-button-bg-active-hover);
+		color: var(--stuic-button-group-button-text-active-hover);
+	}
+
+	/* Disabled state */
+	.stuic-button-group-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 }

package/dist/components/Collapsible/index.css

@@ -17,22 +17,24 @@
 	--stuic-collapsible-ring-color: var(--stuic-color-ring);
 }
 
-/* ============================================================================
-   TOGGLE BUTTON STYLES
-   ============================================================================ */
+@layer components {
+	/* ============================================================================
+	   TOGGLE BUTTON STYLES
+	   ============================================================================ */
 
-.stuic-collapsible-toggle {
-	opacity: var(--stuic-collapsible-toggle-opacity);
-	padding: var(--stuic-collapsible-toggle-padding-y)
-		var(--stuic-collapsible-toggle-padding-x);
-	transition: opacity var(--stuic-collapsible-transition);
-}
+	.stuic-collapsible-toggle {
+		opacity: var(--stuic-collapsible-toggle-opacity);
+		padding: var(--stuic-collapsible-toggle-padding-y)
+			var(--stuic-collapsible-toggle-padding-x);
+		transition: opacity var(--stuic-collapsible-transition);
+	}
 
-.stuic-collapsible-toggle:hover {
-	opacity: var(--stuic-collapsible-toggle-opacity-hover);
-}
+	.stuic-collapsible-toggle:hover {
+		opacity: var(--stuic-collapsible-toggle-opacity-hover);
+	}
 
-.stuic-collapsible-toggle:focus-visible {
-	outline: var(--stuic-collapsible-ring-width) solid var(--stuic-collapsible-ring-color);
-	outline-offset: 2px;
+	.stuic-collapsible-toggle:focus-visible {
+		outline: var(--stuic-collapsible-ring-width) solid var(--stuic-collapsible-ring-color);
+		outline-offset: 2px;
+	}
 }

package/dist/components/CommandMenu/CommandMenu.svelte

@@ -63,7 +63,6 @@
 
 <script lang="ts">
 	import Button from "../Button/Button.svelte";
-	import "./index.css";
 
 	const clog = createClog("CommandMenu");
 
@@ -224,7 +223,7 @@
 <ModalDialog
 	bind:this={modalDialog}
 	classDialog="items-start"
-	class="w-full max-w-3xl bg-transparent pointer-events-none"
+	class="w-full max-w-3xl bg-transparent! shadow-none! pointer-events-none"
 	{noScrollLock}
 >
 	<div class="pt-0 md:pt-[20vh] w-full">
@@ -263,12 +262,16 @@
 				}}
 			>
 				{#snippet inputBefore()}
-					<div class="flex flex-col items-center justify-center pl-3 stuic-command-menu-muted">
+					<div
+						class="flex flex-col items-center justify-center pl-3 stuic-command-menu-muted"
+					>
 						{@html iconSearch({ size: 19, strokeWidth: 3 })}
 					</div>
 				{/snippet}
 				{#snippet inputAfter()}
-					<div class="flex pl-2 items-center justify-center stuic-command-menu-placeholder">
+					<div
+						class="flex pl-2 items-center justify-center stuic-command-menu-placeholder"
+					>
 						{#if isFetching}
 							<Spinner class="w-4" />
 						{/if}

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

@@ -17,7 +17,6 @@ export interface Props {
     classOptionActive?: string;
     showAllOnEmptyQ?: boolean;
 }
-import "./index.css";
 declare const CommandMenu: import("svelte").Component<Props, {
     close: () => void;
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;

package/dist/components/CommandMenu/index.css

@@ -18,29 +18,31 @@
 	--stuic-command-menu-muted-text: var(--stuic-color-muted-foreground);
 }
 
-/* =============================================================================
-   BASE STYLES
-   ============================================================================= */
-
-/* Options container */
-.stuic-command-menu-options {
-	scrollbar-width: thin;
-	max-height: var(--stuic-command-menu-options-max-height);
-	border-top-color: var(--stuic-command-menu-divider-color);
-}
-
-/* Option group header */
-.stuic-command-menu-group-header {
-	color: var(--stuic-command-menu-group-header-color);
-	font-size: var(--stuic-command-menu-group-header-font-size);
-}
-
-/* Muted elements (search icon) */
-.stuic-command-menu-muted {
-	color: var(--stuic-command-menu-muted-text);
-}
-
-/* Placeholder/loading states (spinner) */
-.stuic-command-menu-placeholder {
-	color: var(--stuic-command-menu-muted-text);
+@layer components {
+	/* =============================================================================
+	   BASE STYLES
+	   ============================================================================= */
+
+	/* Options container */
+	.stuic-command-menu-options {
+		scrollbar-width: thin;
+		max-height: var(--stuic-command-menu-options-max-height);
+		border-top-color: var(--stuic-command-menu-divider-color);
+	}
+
+	/* Option group header */
+	.stuic-command-menu-group-header {
+		color: var(--stuic-command-menu-group-header-color);
+		font-size: var(--stuic-command-menu-group-header-font-size);
+	}
+
+	/* Muted elements (search icon) */
+	.stuic-command-menu-muted {
+		color: var(--stuic-command-menu-muted-text);
+	}
+
+	/* Placeholder/loading states (spinner) */
+	.stuic-command-menu-placeholder {
+		color: var(--stuic-command-menu-muted-text);
+	}
 }

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -29,8 +29,6 @@
 		iconAlertError,
 	} from "../../icons/index.js";
 
-	import "./index.css";
-
 	const INTENT_ICONS: Record<MessageIntent, () => string> = {
 		destructive: () => iconAlertError({ size: 29 }),
 		warning: () => iconAlertWarning({ size: 29 }),

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

@@ -12,7 +12,6 @@ export interface Props {
     withIcon?: boolean;
     iconFn?: (() => string) | false;
 }
-import "./index.css";
 declare const DismissibleMessage: import("svelte").Component<Props, {}, "">;
 type DismissibleMessage = ReturnType<typeof DismissibleMessage>;
 export default DismissibleMessage;