@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/DropdownMenu/index.css

@@ -64,204 +64,270 @@
 
 	/* 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);
 }
 
-/* =============================================================================
-   BASE STYLES
-   ============================================================================= */
+@layer components {
+	/* =============================================================================
+	   BASE STYLES
+	   ============================================================================= */
 
-.stuic-dropdown-menu {
-	position: relative;
-	display: inline-block;
-}
+	.stuic-dropdown-menu {
+		position: relative;
+		display: inline-block;
+	}
 
-/* =============================================================================
-   TRIGGER BUTTON
-   ============================================================================= */
+	/* =============================================================================
+	   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 {
-	/* 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: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: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);
+	}
 
-.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);
-}
+	/* =============================================================================
+	   DROPDOWN CONTAINER
+	   ============================================================================= */
 
-/* =============================================================================
-   DROPDOWN CONTAINER
-   ============================================================================= */
+	.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-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);
+	/* =============================================================================
+	   DIVIDER
+	   ============================================================================= */
 
-	/* Box model */
-	border-radius: var(--stuic-dropdown-menu-radius);
-	padding: var(--stuic-dropdown-menu-padding);
+	.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);
+	}
 
-	/* Layout */
-	min-width: var(--stuic-dropdown-menu-min-width);
-	overflow-y: auto;
-	scrollbar-width: thin;
+	/* =============================================================================
+	   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;
+	}
 
-	/* Stacking */
-	z-index: 50;
-}
+	/* =============================================================================
+	   BACKDROP (Fallback Mode)
+	   ============================================================================= */
 
-/* =============================================================================
-   DIVIDER
-   ============================================================================= */
+	.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-divider {
-	height: var(--stuic-dropdown-menu-divider-height);
-	margin: var(--stuic-dropdown-menu-divider-margin-y) 0;
-	background: var(--stuic-dropdown-menu-divider-bg);
-}
+	/* =============================================================================
+	   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);
+	}
 
-/* =============================================================================
-   HEADER (Section Label)
-   ============================================================================= */
+	.stuic-dropdown-menu-close:hover {
+		opacity: var(--stuic-dropdown-menu-close-opacity-hover);
+	}
 
-.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;
-}
+	/* =============================================================================
+	   EXPANDABLE SECTION
+	   ============================================================================= */
 
-/* =============================================================================
-   BACKDROP (Fallback Mode)
-   ============================================================================= */
+	.stuic-dropdown-menu-expandable-content {
+		padding-left: var(--stuic-dropdown-menu-expandable-indent);
+		overflow: hidden;
+	}
 
-.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;
-}
+	/* =============================================================================
+	   LIST ITEM BUTTON OVERRIDES FOR DROPDOWN CONTEXT
+	   Reset default ListItemButton background to transparent within dropdown.
+	   ============================================================================= */
 
-/* =============================================================================
-   CLOSE BUTTON (Fallback Mode)
-   ============================================================================= */
+	.stuic-dropdown-menu-dropdown .stuic-list-item-button {
+		--stuic-list-item-button-bg: transparent;
+		--stuic-list-item-button-border: transparent;
+	}
 
-.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);
-}
+	/* =============================================================================
+	   CSS ANCHOR POSITIONING (when supported)
+	   ============================================================================= */
 
-.stuic-dropdown-menu-close:hover {
-	opacity: var(--stuic-dropdown-menu-close-opacity-hover);
-}
+	@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;
+	}
 
-/* =============================================================================
-   EXPANDABLE SECTION
-   ============================================================================= */
+	@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;
+		}
+	}
 
-.stuic-dropdown-menu-expandable-content {
-	padding-left: var(--stuic-dropdown-menu-expandable-indent);
-	overflow: hidden;
-}
+	/* =============================================================================
+	   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);
+	}
 
-/* =============================================================================
-   LIST ITEM BUTTON OVERRIDES FOR DROPDOWN CONTEXT
-   Reset default ListItemButton background to transparent within dropdown.
-   ============================================================================= */
+	.stuic-dropdown-menu-search-icon {
+		color: var(--stuic-dropdown-menu-search-text);
+		flex-shrink: 0;
+		display: flex;
+	}
 
-.stuic-dropdown-menu-dropdown .stuic-list-item-button {
-	--stuic-list-item-button-bg: transparent;
-	--stuic-list-item-button-border: transparent;
-}
+	.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;
+	}
 
-/* =============================================================================
-   CSS ANCHOR POSITIONING (when supported)
-   ============================================================================= */
+	.stuic-dropdown-menu-search-input::placeholder {
+		color: var(--stuic-dropdown-menu-search-text);
+	}
 
-@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;
-}
+	.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);
+	}
 
-@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;
+	.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/FieldInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { TypeaheadOptions } from "../../actions/typeahead.svelte.js";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
 
@@ -17,6 +18,7 @@
 		tabindex?: number;
 		renderSize?: "sm" | "md" | "lg" | string;
 		useTrim?: boolean;
+		useTypeahead?: boolean | Omit<TypeaheadOptions, "enabled">;
 		required?: boolean;
 		disabled?: boolean;
 		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
@@ -42,6 +44,7 @@
 
 <script lang="ts">
 	import { trim } from "../../actions/trim.svelte.js";
+	import { typeahead } from "../../actions/typeahead.svelte.js";
 	import {
 		validate as validateAction,
 		type ValidationResult,
@@ -61,6 +64,7 @@
 		class: classProp,
 		renderSize = "md",
 		useTrim = true,
+		useTypeahead,
 		//
 		required = false,
 		disabled = false,
@@ -131,6 +135,10 @@
 			enabled: useTrim,
 			setValue: (v: string) => useTrim && (value = v),
 		})}
+		use:typeahead={() => ({
+			enabled: !!useTypeahead,
+			...(typeof useTypeahead === "boolean" ? {} : useTypeahead),
+		})}
 		use:validateAction={() => ({
 			enabled: !!validate,
 			...(typeof validate === "boolean" ? {} : validate),

package/dist/components/Input/FieldInput.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
+import type { TypeaheadOptions } from "../../actions/typeahead.svelte.js";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
 type SnippetWithId = Snippet<[{
@@ -16,6 +17,7 @@ export interface Props extends HTMLInputAttributes, Record<string, any> {
     tabindex?: number;
     renderSize?: "sm" | "md" | "lg" | string;
     useTrim?: boolean;
+    useTypeahead?: boolean | Omit<TypeaheadOptions, "enabled">;
     required?: boolean;
     disabled?: boolean;
     validate?: boolean | Omit<ValidateOptions, "setValidationResult">;

package/dist/components/Input/FieldOptions.svelte

@@ -561,7 +561,7 @@
 		bind:this={modalDialog}
 		preEscapeClose={escape}
 		classDialog="items-start"
-		class="w-full max-w-2xl bg-transparent pointer-events-none"
+		class={twMerge("w-full max-w-2xl bg-transparent! shadow-none! pointer-events-none")}
 		ariaLabelledby={id}
 		{noScrollLock}
 	>