@marianmeres/stuic 2.66.0 → 3.0.1

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 {
@@ -88,42 +87,11 @@
 		});
 	});
 
-	const rounded = "rounded-md";
-	//
-	const CLS = `
-		stuic-button-group
-        ${rounded}
-		w-full
-        py-1.5 px-1.5 inline-block space-x-1
-        bg-button-group-bg text-button-group-text
-        dark:bg-button-group-bg-dark dark:text-button-group-text-dark
-        border-1
-        border-button-group-border dark:border-button-group-border-dark
-		flex justify-between
-        
-        focus-within:border-button-group-accent  focus-within:dark:border-button-group-accent-dark
-        focus-within:ring-button-group-accent/20 focus-within:dark:ring-button-group-accent-dark/20
-        focus-within:ring-4
-    `;
-
-	const CLS_BUTTON = `
-        ${rounded}
-		w-full inline-block
-	    bg-transparent text-button-group-text dark:text-button-group-text-dark
-        hover:bg-transparent hover:text-button-group-text hover:dark:text-button-group-text-dark
-        outline-none focus:outline-none
-    `;
+	// Base class - structural styling handled by CSS
+	const CLS = `stuic-button-group`;
 
-	// we need some active indication by default... use just something subtle here, in the wild
-	// this will be styled with classButtonActive
-	const CLS_BUTTON_ACTIVE = `
-        shadow-none
-        bg-button-group-bg-active dark:bg-button-group-bg-active-dark
-        text-button-group-text-active dark:text-button-group-text-active-dark
-        hover:bg-button-group-bg-active hover:dark:bg-button-group-bg-active
-        hover:text-button-group-text-active hover:dark:text-button-group-text-active-dark
-    `;
-	// shadow-[0px_0px_1px_1px_rgba(0_0_0_/_.6)]
+	// Button class - styling handled by CSS via aria-checked attribute
+	const CLS_BUTTON = `stuic-button-group-button`;
 
 	let els = $state<Record<number, HTMLButtonElement>>({});
 
@@ -138,6 +106,7 @@
 {#if coll.size}
 	<div
 		class={twMerge(CLS, classProp)}
+		data-size={size}
 		{style}
 		role="radiogroup"
 		aria-labelledby={$coll?.active?.id || ""}
@@ -145,15 +114,14 @@
 	>
 		{#each coll.items as item, i}
 			<Button
+				unstyled
 				tabindex={$coll.activeIndex === i ? tabindex : -1}
 				class={twMerge(
-					"border-none shadow-none",
 					CLS_BUTTON,
 					classButton,
-					$coll.activeIndex === i && [CLS_BUTTON_ACTIVE, classButtonActive].join(" ")
+					$coll.activeIndex === i && classButtonActive
 				)}
 				{disabled}
-				{size}
 				type="button"
 				role="radio"
 				aria-checked={$coll.activeIndex === i}

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/README.md

@@ -12,12 +12,13 @@ A radio button group styled as a segmented button toggle. Supports keyboard navi
 | `size` | `"sm" \| "md" \| "lg" \| string` | `"md"` | Button size |
 | `disabled` | `boolean` | `false` | Disable all buttons |
 | `tabindex` | `number` | `0` | Tab index for active button |
-| `class` | `string` | - | CSS for container |
-| `classButton` | `string` | - | CSS for all buttons |
-| `classButtonActive` | `string` | - | CSS for active button |
+| `class` | `string` | - | CSS classes for container |
+| `classButton` | `string` | - | CSS classes for all buttons |
+| `classButtonActive` | `string` | - | CSS classes for active button |
 | `style` | `string` | - | Inline styles for container |
 | `onButtonClick` | `(index, coll) => Promise<boolean> \| boolean` | - | Async validation hook (return `false` to prevent) |
 | `buttonProps` | `(index, coll) => Record<string, any>` | - | Dynamic props per button |
+| `tooltip` | `TooltipConfig` | - | Tooltip configuration |
 
 ## Option Format
 
@@ -38,7 +39,7 @@ A radio button group styled as a segmented button toggle. Supports keyboard navi
 
 ```svelte
 <script lang="ts">
-  import { ButtonGroupRadio } from 'stuic';
+  import { ButtonGroupRadio } from '@marianmeres/stuic';
 
   let selected = $state('monthly');
 </script>
@@ -88,7 +89,84 @@ A radio button group styled as a segmented button toggle. Supports keyboard navi
 />
 ```
 
+### Custom Styling
+
+```svelte
+<!-- Override component tokens inline -->
+<ButtonGroupRadio
+  options={['One', 'Two', 'Three']}
+  style="--stuic-button-group-radius: 9999px;"
+/>
+
+<!-- Override via Tailwind classes -->
+<ButtonGroupRadio
+  options={['One', 'Two', 'Three']}
+  class="bg-slate-100 border-slate-300"
+  classButton="font-semibold"
+  classButtonActive="bg-indigo-600 text-white"
+/>
+```
+
 ## Keyboard Navigation
 
 - **Arrow Left/Up**: Select previous option
 - **Arrow Right/Down**: Select next option
+
+## CSS Variables
+
+### Component Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-button-group-radius` | `var(--radius-md)` | Border radius for container and buttons |
+| `--stuic-button-group-padding` | `0.375rem` | Container padding |
+| `--stuic-button-group-gap` | `0.25rem` | Gap between buttons |
+| `--stuic-button-group-border-width` | `1px` | Container border width |
+| `--stuic-button-group-transition` | `150ms` | Transition duration |
+| `--stuic-button-group-ring-width` | `3px` | Focus ring width |
+| `--stuic-button-group-ring-color` | `var(--stuic-color-ring)` | Focus ring color |
+| `--stuic-button-group-button-padding-x` | `0.75rem` | Button horizontal padding |
+| `--stuic-button-group-button-padding-y` | `0.5rem` | Button vertical padding |
+| `--stuic-button-group-button-min-height` | `2.75rem` | Button min height (44px touch target) |
+
+### Color Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-button-group-bg` | `var(--stuic-color-surface)` | Container background |
+| `--stuic-button-group-text` | `var(--stuic-color-foreground)` | Container text color |
+| `--stuic-button-group-border` | `var(--stuic-color-border)` | Container border color |
+| `--stuic-button-group-button-bg` | `transparent` | Inactive button background |
+| `--stuic-button-group-button-text` | `var(--stuic-color-foreground)` | Inactive button text |
+| `--stuic-button-group-button-bg-hover` | `var(--stuic-color-muted)` | Inactive button hover background |
+| `--stuic-button-group-button-bg-active` | `var(--stuic-color-primary)` | Active button background |
+| `--stuic-button-group-button-text-active` | `var(--stuic-color-primary-foreground)` | Active button text |
+| `--stuic-button-group-button-bg-active-hover` | `var(--stuic-color-primary-hover)` | Active button hover background |
+
+### Customization Examples
+
+```css
+/* Global override */
+:root {
+  --stuic-button-group-radius: 0;
+  --stuic-button-group-button-bg-active: var(--stuic-color-accent);
+  --stuic-button-group-button-text-active: var(--stuic-color-accent-foreground);
+}
+```
+
+```svelte
+<!-- Local override via style prop -->
+<ButtonGroupRadio
+  options={['A', 'B', 'C']}
+  style="--stuic-button-group-radius: 9999px; --stuic-button-group-button-bg-active: #10b981;"
+/>
+```
+
+## Data Attributes
+
+The container uses:
+- `data-size` - The size value (`sm`, `md`, `lg`)
+
+The inner buttons use:
+- `aria-checked` - `true` when selected (used for active state styling)
+- `role="radio"` - Accessibility role

package/dist/components/ButtonGroupRadio/index.css

@@ -1,20 +1,164 @@
-/* prettier-ignore */
-@theme inline {
-	--color-button-group-bg: var(--color-button-group-bg, var(--color-white));
-	--color-button-group-bg-dark: var(--color-button-group-bg-dark, var(--color-neutral-600));
+/* ============================================================================
+   BUTTON GROUP RADIO COMPONENT TOKENS
+   Override globally: :root { --stuic-button-group-radius: 0; }
+   Override locally:  <ButtonGroupRadio style="--stuic-button-group-radius: 9999px;">
+   ============================================================================ */
 
-	--color-button-group-text: var(--color-button-group-text, var(--color-black));
-	--color-button-group-text-dark: var(--color-button-group-text-dark, var(--color-neutral-300));
+:root {
+	/* Structure - reference Tailwind vars where applicable */
+	--stuic-button-group-radius: var(--radius-md);
+	--stuic-button-group-padding: 0.375rem;
+	--stuic-button-group-gap: 0.25rem;
+	--stuic-button-group-border-width: 1px;
+	--stuic-button-group-transition: 150ms;
 
-	--color-button-group-border: var(--color-button-group-border, var(--color-neutral-300));
-	--color-button-group-border-dark: var(--color-button-group-border-dark, var(--color-neutral-800));
+	/* Button sizing - 44px is Apple HIG minimum touch target */
+	--stuic-button-group-button-padding-x: 0.75rem;
+	--stuic-button-group-button-padding-y: 0.5rem;
+	--stuic-button-group-button-min-height: 2.75rem; /* 44px */
 
-    --color-button-group-accent: var(--color-button-group-accent, var(--color-red-600));
-	--color-button-group-accent-dark: var(--color-button-group-accent-dark, var(--color-red-400));
+	/* Focus ring */
+	--stuic-button-group-ring-width: 3px;
+	--stuic-button-group-ring-color: var(--stuic-color-ring);
 
-	--color-button-group-bg-active: var(--color-button-group-bg-active, var(--color-neutral-500));
-	--color-button-group-bg-active-dark: var(--color-button-group-bg-active-dark, var(--color-neutral-500));
+	/* Container colors - theme vars */
+	--stuic-button-group-bg: var(--stuic-color-surface);
+	--stuic-button-group-text: var(--stuic-color-foreground);
+	--stuic-button-group-border: var(--stuic-color-border);
 
-    --color-button-group-text-active: var(--color-button-group-text-active, var(--color-white));
-    --color-button-group-text-active-dark: var(--color-button-group-text-active-dark, var(--color-white));
+	/* Button colors (inactive) */
+	--stuic-button-group-button-bg: transparent;
+	--stuic-button-group-button-text: var(--stuic-color-foreground);
+	--stuic-button-group-button-bg-hover: var(--stuic-color-muted);
+	--stuic-button-group-button-text-hover: var(--stuic-color-foreground);
+
+	/* Button colors (active) */
+	--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
+	);
+}
+
+@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/Collapsible.svelte

@@ -23,8 +23,8 @@
 		classContent?: string;
 		/** Toggle button class */
 		classToggle?: string;
-		/** Opacity class for toggle button (default: "opacity-70") */
-		toggleOpacity?: string;
+		/** Inline styles (for CSS variable overrides) */
+		style?: string;
 		/** Bind reference to container element */
 		el?: HTMLDivElement;
 		/** Optional translate function */
@@ -39,8 +39,8 @@
 		i18nSpanWrap: boolean = true
 	) {
 		const m: Record<string, string> = {
-			more: "Show more...",
-			less: "Show less...",
+			more: "More...",
+			less: "Less...",
 		};
 		let out = m[k] ?? fallback ?? k;
 
@@ -58,7 +58,7 @@
 		class: classProp,
 		classContent,
 		classToggle,
-		toggleOpacity = "opacity-75",
+		style,
 		el = $bindable(),
 		t = t_default,
 	}: Props = $props();
@@ -86,6 +86,7 @@
 	bind:this={el}
 	bind:clientWidth={containerWidth}
 	class={twMerge("stuic-collapsible", classProp)}
+	{style}
 >
 	<div class="flex items-end">
 		<div
@@ -98,8 +99,7 @@
 			<button
 				type="button"
 				class={twMerge(
-					toggleOpacity,
-					"hover:opacity-100 cursor-pointer px-2 py-1 -my-1 -mr-2",
+					"stuic-collapsible-toggle cursor-pointer -my-1 -mr-2",
 					classToggle
 				)}
 				onclick={() => (expanded = !expanded)}

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

@@ -17,8 +17,8 @@ export interface Props {
     classContent?: string;
     /** Toggle button class */
     classToggle?: string;
-    /** Opacity class for toggle button (default: "opacity-70") */
-    toggleOpacity?: string;
+    /** Inline styles (for CSS variable overrides) */
+    style?: string;
     /** Bind reference to container element */
     el?: HTMLDivElement;
     /** Optional translate function */

package/dist/components/Collapsible/README.md

@@ -14,8 +14,9 @@ A component that truncates content to a specified number of lines with an expand
 | `class`              | `string`        | -             | Container element class                          |
 | `classContent`       | `string`        | -             | Content wrapper class                            |
 | `classToggle`        | `string`        | -             | Toggle button class                              |
-| `toggleOpacity`      | `string`        | `"opacity-70"`| Opacity class for toggle button                  |
+| `style`              | `string`        | -             | Inline styles (for CSS variable overrides)       |
 | `el`                 | `HTMLDivElement`| -             | Bind reference to container element              |
+| `t`                  | `TranslateFn`   | -             | Optional translate function                      |
 
 ## Usage
 
@@ -74,8 +75,39 @@ A component that truncates content to a specified number of lines with an expand
   class="bg-gray-100 p-4 rounded"
   classContent="text-sm text-gray-600"
   classToggle="text-blue-500 font-bold"
-  toggleOpacity="opacity-100"
 >
   Styled collapsible content.
 </Collapsible>
 ```
+
+### CSS Variable Overrides
+
+```svelte
+<!-- Local override via inline style -->
+<Collapsible style="--stuic-collapsible-toggle-opacity: 1;">
+  Always fully visible toggle button.
+</Collapsible>
+```
+
+## CSS Variables
+
+Override to customize appearance:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-collapsible-toggle-opacity` | `0.7` | Toggle button opacity |
+| `--stuic-collapsible-toggle-opacity-hover` | `1` | Hover opacity |
+| `--stuic-collapsible-toggle-padding-x` | `calc(var(--spacing) * 2)` | Horizontal padding |
+| `--stuic-collapsible-toggle-padding-y` | `0.25rem` | Vertical padding |
+| `--stuic-collapsible-transition` | `150ms` | Transition duration |
+| `--stuic-collapsible-ring-width` | `2px` | Focus ring width |
+| `--stuic-collapsible-ring-color` | `--stuic-color-ring` | Focus ring color |
+
+### Global Override
+
+```css
+:root {
+  --stuic-collapsible-toggle-opacity: 0.5;
+  --stuic-collapsible-toggle-opacity-hover: 0.8;
+}
+```

package/dist/components/Collapsible/index.css

@@ -0,0 +1,40 @@
+/* ============================================================================
+   COLLAPSIBLE COMPONENT TOKENS
+   Override globally: :root { --stuic-collapsible-toggle-opacity: 0.5; }
+   Override locally:  <Collapsible style="--stuic-collapsible-toggle-opacity: 1;">
+   ============================================================================ */
+
+:root {
+	/* Toggle button styling */
+	--stuic-collapsible-toggle-opacity: 0.7;
+	--stuic-collapsible-toggle-opacity-hover: 1;
+	--stuic-collapsible-toggle-padding-x: calc(var(--spacing) * 2);
+	--stuic-collapsible-toggle-padding-y: calc(var(--spacing) * 1);
+	--stuic-collapsible-transition: 150ms;
+
+	/* Focus ring (uses theme token) */
+	--stuic-collapsible-ring-width: 2px;
+	--stuic-collapsible-ring-color: var(--stuic-color-ring);
+}
+
+@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: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;
+	}
+}

package/dist/components/CommandMenu/CommandMenu.svelte

@@ -62,7 +62,7 @@
 </script>
 
 <script lang="ts">
-	import "./index.css";
+	import Button from "../Button/Button.svelte";
 
 	const clog = createClog("CommandMenu");
 
@@ -223,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">
@@ -251,8 +251,8 @@
 				placeholder={searchPlaceholder ?? t("search_placeholder")}
 				classInputBoxWrap={twMerge(
 					// always look like focused
-					`border-primary border-input-accent dark:border-input-accent-dark`,
-					`ring-input-accent/20 dark:ring-input-accent-dark/20 ring-4`
+					`border-primary border-(--stuic-input-accent)`,
+					`ring-(--stuic-input-accent)/20 ring-4`
 				)}
 				onkeydown={(e) => {
 					if (e.key === "Enter") {
@@ -262,25 +262,26 @@
 				}}
 			>
 				{#snippet inputBefore()}
-					<div class="flex flex-col items-center justify-center pl-3 opacity-75">
+					<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 opacity-50">
+					<div
+						class="flex pl-2 items-center justify-center stuic-command-menu-placeholder"
+					>
 						{#if isFetching}
 							<Spinner class="w-4" />
 						{/if}
 					</div>
 					<div class="flex items-center justify-center">
-						<button
+						<Button
+							x
+							variant="ghost"
+							roundedFull
 							type="button"
-							class={twMerge(
-								"rounded m-1 opacity-75",
-								"hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-800",
-								"focus-visible:opacity-100 focus-visible:outline-0",
-								"focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-800"
-							)}
 							onclick={(e) => {
 								e.preventDefault();
 								if (!`${q || ""}`.trim()) {
@@ -289,9 +290,7 @@
 								q = "";
 								input?.focus();
 							}}
-						>
-							<X class="m-2 size-6" />
-						</button>
+						/>
 					</div>
 				{/snippet}
 				{#snippet inputBelow()}
@@ -304,10 +303,9 @@
 						<div
 							class={twMerge(
 								"stuic-command-menu-options",
-								"options block space-y-1 p-1",
+								"block space-y-1 p-1",
 								"overflow-y-auto overflow-x-hidden mb-1",
-								"border-t border-black/20",
-								"max-h-60"
+								"border-t"
 							)}
 							bind:this={optionsBox}
 							tabindex="-1"
@@ -320,10 +318,7 @@
 								<div class="p-1">
 									{#if _optgroup}
 										<div
-											class={[
-												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide",
-												"text-neutral-500 dark:text-neutral-400",
-											]}
+											class="stuic-command-menu-group-header mb-1 p-1 font-semibold uppercase tracking-wide"
 										>
 											{_optgroup}
 										</div>
@@ -369,9 +364,6 @@
 </ModalDialog>
 
 <style>
-	.options {
-		scrollbar-width: thin;
-	}
 	.sr-only {
 		position: absolute;
 		width: 1px;

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;