@marianmeres/stuic 3.0.1 → 3.0.2

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

@@ -72,6 +72,19 @@ export interface NavigableExpandable {
     expandableItem: DropdownMenuExpandableItem;
 }
 export type NavigableItem = DropdownMenuActionItem | NavigableExpandable;
+/** Search configuration options */
+export interface DropdownMenuSearchConfig {
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Search strategy */
+    strategy?: "prefix" | "exact" | "fuzzy";
+    /** Custom function to extract searchable text from an item */
+    getContent?: (item: DropdownMenuActionItem | DropdownMenuExpandableItem) => string;
+    /** Auto-focus search input when menu opens */
+    autoFocus?: boolean;
+    /** Message shown when no results found */
+    noResultsMessage?: string;
+}
 export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     /** Menu items to display */
     items: DropdownMenuItem[];
@@ -91,6 +104,8 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     closeOnEscape?: boolean;
     /** Force fallback positioning mode (for testing) */
     forceFallback?: boolean;
+    /** Enable search/filter functionality (true for defaults, or config object) */
+    search?: boolean | DropdownMenuSearchConfig;
     /** Classes for the wrapper element */
     class?: string;
     /** Classes for the trigger button */
@@ -117,6 +132,10 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     classExpandableContent?: string;
     /** Classes for backdrop (fallback mode only) */
     classBackdrop?: string;
+    /** Classes for search input container */
+    classSearchContainer?: string;
+    /** Classes for search input */
+    classSearchInput?: string;
     /** Show backdrop in fallback mode (default: true) */
     showBackdrop?: boolean;
     /** Custom trigger snippet - receives isOpen state, toggle function, and ARIA props for full control */

package/dist/components/DropdownMenu/index.css

@@ -64,6 +64,11 @@
 
 	/* Expandable section indent */
 	--stuic-dropdown-menu-expandable-indent: calc(var(--spacing) * 4);
+
+	/* Search */
+	--stuic-dropdown-menu-search-bg: var(--stuic-color-surface);
+	--stuic-dropdown-menu-search-border: var(--stuic-color-border);
+	--stuic-dropdown-menu-search-text: var(--stuic-color-muted-foreground);
 }
 
 @layer components {
@@ -266,4 +271,63 @@
 				--pop-right;
 		}
 	}
+
+	/* =============================================================================
+	   SEARCH INPUT
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-search {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 1);
+		padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+		background: var(--stuic-dropdown-menu-search-bg);
+		border-bottom: 1px solid var(--stuic-dropdown-menu-search-border);
+		margin: calc(var(--stuic-dropdown-menu-padding) * -1);
+		margin-bottom: var(--stuic-dropdown-menu-padding);
+	}
+
+	.stuic-dropdown-menu-search-icon {
+		color: var(--stuic-dropdown-menu-search-text);
+		flex-shrink: 0;
+		display: flex;
+	}
+
+	.stuic-dropdown-menu-search-input {
+		flex: 1;
+		min-width: 0;
+		background: transparent;
+		border: none;
+		outline: none;
+		color: var(--stuic-dropdown-menu-text);
+		font-size: inherit;
+	}
+
+	.stuic-dropdown-menu-search-input::placeholder {
+		color: var(--stuic-dropdown-menu-search-text);
+	}
+
+	.stuic-dropdown-menu-search-clear {
+		background: transparent;
+		border: none;
+		color: var(--stuic-dropdown-menu-search-text);
+		cursor: pointer;
+		padding: calc(var(--spacing) * 0.5);
+		display: flex;
+		border-radius: var(--stuic-dropdown-menu-radius);
+		transition: color var(--stuic-dropdown-menu-transition);
+	}
+
+	.stuic-dropdown-menu-search-clear:hover {
+		color: var(--stuic-dropdown-menu-text);
+	}
+
+	.stuic-dropdown-menu-no-results {
+		padding: calc(var(--spacing) * 4);
+		text-align: center;
+		color: var(--stuic-dropdown-menu-search-text);
+	}
 }

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

@@ -1 +1 @@
-export { default as DropdownMenu, type Props as DropdownMenuProps, type DropdownMenuItem, type DropdownMenuActionItem, type DropdownMenuDividerItem, type DropdownMenuHeaderItem, type DropdownMenuCustomItem, type DropdownMenuExpandableItem, type DropdownMenuFlatItem, type DropdownMenuPosition, type NavigableItem, type NavigableExpandable, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";
+export { default as DropdownMenu, type Props as DropdownMenuProps, type DropdownMenuItem, type DropdownMenuActionItem, type DropdownMenuDividerItem, type DropdownMenuHeaderItem, type DropdownMenuCustomItem, type DropdownMenuExpandableItem, type DropdownMenuFlatItem, type DropdownMenuPosition, type DropdownMenuSearchConfig, type NavigableItem, type NavigableExpandable, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";

package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte

@@ -9,6 +9,7 @@
 		targetWidth?: number;
 		delayIn?: number;
 		delayOut?: number;
+		zIndex?: number;
 		children: Snippet<
 			[
 				{
@@ -38,6 +39,7 @@
 		targetWidth = 256,
 		delayIn = 500,
 		delayOut = 300,
+		zIndex = 10,
 		class: classProp,
 		children,
 		...rest
@@ -95,7 +97,7 @@
 		el.style.width = "auto";
 		el.style.height = "auto";
 
-		el.style.zIndex = "1";
+		el.style.zIndex = `${zIndex}`;
 
 		// kind of ugly - need to set props in multiple steps...
 		(async () => {

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

@@ -7,6 +7,7 @@ export interface Props {
     targetWidth?: number;
     delayIn?: number;
     delayOut?: number;
+    zIndex?: number;
     children: Snippet<[
         {
             isExpanded: boolean;

package/dist/components/Input/index.css

@@ -217,7 +217,7 @@
 	.stuic-input .input-wrap.invalid:focus-within {
 		border-color: var(--stuic-input-accent-error);
 		box-shadow: 0 0 0 var(--stuic-input-ring-width)
-			color-mix(in srgb, var(--stuic-input-accent-error) 20%, transparent);
+			color-mix(in srgb, var(--stuic-input-accent-error) 20%, var(--stuic-color-background));
 	}
 
 	/* Disabled state */

package/dist/components/Switch/index.css

@@ -68,7 +68,7 @@
 	.stuic-switch:focus {
 		outline: none;
 		box-shadow: 0 0 0 var(--stuic-switch-ring-width)
-			color-mix(in srgb, var(--stuic-switch-ring-color) 30%, transparent);
+			color-mix(in srgb, var(--stuic-switch-ring-color) 30%, var(--stuic-color-background));
 	}
 
 	/* Disabled */

package/dist/components/ThemePreview/ThemePreview.svelte

@@ -203,6 +203,23 @@
 				</div>
 			</section>
 
+			<!-- HIGHLIGHT BOXES -->
+			<section class="preview-section">
+				{#if showLabels}
+					<h2 class="section-label">Highlighted Content</h2>
+				{/if}
+
+				<div class="highlight-box primary">
+					<strong>Primary Highlight</strong>
+					<p>This box uses primary intent colors for important content.</p>
+				</div>
+
+				<div class="highlight-box accent">
+					<strong>Accent Highlight</strong>
+					<p>This box uses accent colors to draw attention.</p>
+				</div>
+			</section>
+
 			<!-- ROLE COLORS -->
 			<section class="preview-section">
 				{#if showLabels}
@@ -289,23 +306,6 @@
 				</div>
 			</section>
 
-			<!-- HIGHLIGHT BOXES -->
-			<section class="preview-section">
-				{#if showLabels}
-					<h2 class="section-label">Highlighted Content</h2>
-				{/if}
-
-				<div class="highlight-box primary">
-					<strong>Primary Highlight</strong>
-					<p>This box uses primary intent colors for important content.</p>
-				</div>
-
-				<div class="highlight-box accent">
-					<strong>Accent Highlight</strong>
-					<p>This box uses accent colors to draw attention.</p>
-				</div>
-			</section>
-
 			<!-- TYPOGRAPHY -->
 			<section class="preview-section">
 				{#if showLabels}

package/dist/components/ThemePreview/index.css

@@ -402,17 +402,17 @@
 	opacity: 0.9;
 }
 
-/* Using soft variant pattern for content boxes */
+/* Using surface-intent tokens for content boxes */
 .stuic-theme-preview .highlight-box.primary {
-	background: color-mix(in srgb, var(--stuic-color-primary) 15%, transparent);
-	color: var(--stuic-color-primary);
-	border: 1px solid color-mix(in srgb, var(--stuic-color-primary) 30%, transparent);
+	background: var(--stuic-color-surface-primary);
+	color: var(--stuic-color-surface-primary-foreground);
+	border: 1px solid var(--stuic-color-surface-primary-border);
 }
 
 .stuic-theme-preview .highlight-box.accent {
-	background: color-mix(in srgb, var(--stuic-color-accent) 15%, transparent);
-	color: var(--stuic-color-accent);
-	border: 1px solid color-mix(in srgb, var(--stuic-color-accent) 30%, transparent);
+	background: var(--stuic-color-surface-accent);
+	color: var(--stuic-color-surface-accent-foreground);
+	border: 1px solid var(--stuic-color-surface-accent-border);
 }
 
 /* ============================================================================

package/dist/icons/index.d.ts

@@ -26,6 +26,7 @@ export { iconLucideTrash2 as iconTrash } from "@marianmeres/icons-fns/lucide/ico
 export { iconLucideZoomIn as iconZoomIn } from "@marianmeres/icons-fns/lucide/iconLucideZoomIn.js";
 export { iconLucideZoomOut as iconZoomOut } from "@marianmeres/icons-fns/lucide/iconLucideZoomOut.js";
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideX as iconX } from "@marianmeres/icons-fns/lucide/iconLucideX.js";
 export { iconLucideChevronDown as iconChevronDown } from "@marianmeres/icons-fns/lucide/iconLucideChevronDown.js";
 export { iconLucideChevronUp as iconChevronUp } from "@marianmeres/icons-fns/lucide/iconLucideChevronUp.js";
 export { iconLucideChevronRight as iconChevronRight } from "@marianmeres/icons-fns/lucide/iconLucideChevronRight.js";

package/dist/icons/index.js

@@ -30,6 +30,7 @@ export { iconLucideZoomIn as iconZoomIn } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideZoomOut as iconZoomOut } from "@marianmeres/icons-fns/lucide/iconLucideZoomOut.js";
 // UI Control Icons (Lucide)
 export { iconLucideSearch as iconSearch } from "@marianmeres/icons-fns/lucide/iconLucideSearch.js";
+export { iconLucideX as iconX } from "@marianmeres/icons-fns/lucide/iconLucideX.js";
 export { iconLucideChevronDown as iconChevronDown } from "@marianmeres/icons-fns/lucide/iconLucideChevronDown.js";
 export { iconLucideChevronUp as iconChevronUp } from "@marianmeres/icons-fns/lucide/iconLucideChevronUp.js";
 export { iconLucideChevronRight as iconChevronRight } from "@marianmeres/icons-fns/lucide/iconLucideChevronRight.js";