@marianmeres/stuic 2.65.0 → 3.0.0

package/dist/components/DropdownMenu/index.css

@@ -1,27 +1,248 @@
-/* Base dropdown styles */
+/* =============================================================================
+   DROPDOWN MENU COMPONENT TOKENS
+   Override globally: :root { --stuic-dropdown-menu-radius: 0; }
+   Override locally:  <DropdownMenu style="--stuic-dropdown-menu-radius: 9999px;">
+   ============================================================================= */
+
+:root {
+	/* Structure tokens */
+	--stuic-dropdown-menu-radius: var(--radius-md);
+	--stuic-dropdown-menu-padding: calc(var(--spacing) * 1);
+	--stuic-dropdown-menu-gap: calc(var(--spacing) * 0.5);
+	--stuic-dropdown-menu-min-width: 12rem;
+	--stuic-dropdown-menu-transition: 150ms;
+
+	/* Dropdown container colors */
+	--stuic-dropdown-menu-bg: var(--stuic-color-surface);
+	--stuic-dropdown-menu-text: var(--stuic-color-surface-foreground);
+	--stuic-dropdown-menu-border: var(--stuic-color-border);
+	--stuic-dropdown-menu-shadow: var(--shadow-lg);
+
+	/* Trigger button colors */
+	--stuic-dropdown-menu-trigger-bg: var(--stuic-color-surface);
+	--stuic-dropdown-menu-trigger-bg-hover: var(--stuic-color-surface-hover);
+	--stuic-dropdown-menu-trigger-bg-active: var(--stuic-color-surface-active);
+	--stuic-dropdown-menu-trigger-text: var(--stuic-color-surface-foreground);
+	--stuic-dropdown-menu-trigger-text-hover: var(--stuic-color-surface-foreground-hover);
+	--stuic-dropdown-menu-trigger-text-active: var(--stuic-color-surface-foreground-active);
+	--stuic-dropdown-menu-trigger-border: var(--stuic-color-border);
+	--stuic-dropdown-menu-trigger-border-hover: var(--stuic-color-border-hover);
+	--stuic-dropdown-menu-trigger-border-active: var(--stuic-color-border-active);
+
+	/* Trigger sizing */
+	--stuic-dropdown-menu-trigger-padding-x: calc(var(--spacing) * 3);
+	--stuic-dropdown-menu-trigger-padding-y: calc(var(--spacing) * 2);
+
+	/* Focus ring */
+	--stuic-dropdown-menu-ring-width: 3px;
+	--stuic-dropdown-menu-ring-offset: 0px;
+	--stuic-dropdown-menu-ring-color: var(--stuic-color-ring);
+
+	/* Divider */
+	--stuic-dropdown-menu-divider-bg: var(--stuic-color-border);
+	--stuic-dropdown-menu-divider-height: 1px;
+	--stuic-dropdown-menu-divider-margin-y: calc(var(--spacing) * 1);
+
+	/* Header (section label) */
+	--stuic-dropdown-menu-header-text: var(--stuic-color-muted-foreground);
+	--stuic-dropdown-menu-header-font-size: var(--text-xs);
+	--stuic-dropdown-menu-header-font-weight: var(--font-weight-semibold);
+	--stuic-dropdown-menu-header-padding-x: calc(var(--spacing) * 2);
+	--stuic-dropdown-menu-header-padding-y: calc(var(--spacing) * 1.5);
+	--stuic-dropdown-menu-header-letter-spacing: 0.05em;
+	--stuic-dropdown-menu-header-text-transform: uppercase;
+
+	/* Backdrop (fallback mode) */
+	--stuic-dropdown-menu-backdrop-bg: rgb(0 0 0 / 0.25);
+	--stuic-dropdown-menu-backdrop-z-index: 40;
+
+	/* Close button (fallback mode) */
+	--stuic-dropdown-menu-close-bg: var(--stuic-color-foreground);
+	--stuic-dropdown-menu-close-text: var(--stuic-color-background);
+	--stuic-dropdown-menu-close-opacity: 0.6;
+	--stuic-dropdown-menu-close-opacity-hover: 1;
+
+	/* Expandable section indent */
+	--stuic-dropdown-menu-expandable-indent: calc(var(--spacing) * 4);
+}
+
+/* =============================================================================
+   BASE STYLES
+   ============================================================================= */
+
+.stuic-dropdown-menu {
+	position: relative;
+	display: inline-block;
+}
+
+/* =============================================================================
+   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: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: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
+   ============================================================================= */
+
 .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;
 }
 
-/* Override ListItemButton defaults for dropdown context */
+/* =============================================================================
+   DIVIDER
+   ============================================================================= */
+
+.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);
+}
+
+/* =============================================================================
+   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;
+}
+
+/* =============================================================================
+   BACKDROP (Fallback Mode)
+   ============================================================================= */
+
+.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;
+}
+
+/* =============================================================================
+   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);
+}
+
+.stuic-dropdown-menu-close:hover {
+	opacity: var(--stuic-dropdown-menu-close-opacity-hover);
+}
+
+/* =============================================================================
+   EXPANDABLE SECTION
+   ============================================================================= */
+
+.stuic-dropdown-menu-expandable-content {
+	padding-left: var(--stuic-dropdown-menu-expandable-indent);
+	overflow: hidden;
+}
+
+/* =============================================================================
+   LIST ITEM BUTTON OVERRIDES FOR DROPDOWN CONTEXT
+   Reset default ListItemButton background to transparent within dropdown.
+   ============================================================================= */
+
 .stuic-dropdown-menu-dropdown .stuic-list-item-button {
-	--color-lib-bg: transparent;
-	--color-lib-bg-dark: transparent;
-	--color-lib-border: transparent;
-	--color-lib-border-dark: transparent;
+	--stuic-list-item-button-bg: transparent;
+	--stuic-list-item-button-border: transparent;
 }
 
+/* =============================================================================
+   CSS ANCHOR POSITIONING (when supported)
+   ============================================================================= */
+
 @position-try --pop-top {
-	position-area: top; /* above, centered */
+	position-area: top;
 }
 @position-try --pop-top-span-right {
-	position-area: top span-right; /* above, aligned to anchor's left edge */
+	position-area: top span-right;
 }
 @position-try --pop-top-span-left {
-	position-area: top span-left; /* above, aligned to anchor's right edge */
+	position-area: top span-left;
 }
 @position-try --pop-bottom {
-	position-area: bottom; /* below, centered */
+	position-area: bottom;
 }
 @position-try --pop-bottom-span-right {
 	position-area: bottom span-right;
@@ -36,28 +257,11 @@
 	position-area: right;
 }
 
-/* CSS Anchor Positioning supported mode - flip only when viewport overflow */
 @supports (anchor-name: --anchor) {
 	.stuic-dropdown-menu-dropdown {
-		/* position-try-fallbacks: flip-block, flip-inline; */
-
-		/* position-area is set via inline style based on position param */
-
-		/* fallbacks ensure popover stays within viewport */
-		/* order: try other bottom positions first, then top, then left/right */
 		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;
 	}
 }
-
-/* Expandable section animation handled by Svelte slide transition */
-.stuic-dropdown-menu-expandable-content {
-	overflow: hidden;
-}
-
-/* Backdrop for fallback mode */
-.stuic-dropdown-menu-backdrop {
-	transition-property: opacity;
-}

package/dist/components/Input/FieldAssets.svelte

@@ -37,6 +37,7 @@
 	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
+	import Button from "../Button/Button.svelte";
 
 	const clog = createClog("FieldAssets");
 
@@ -324,7 +325,6 @@
 			clog.warn(`${e}`);
 		}
 	});
-
 </script>
 
 {#snippet default_render()}
@@ -386,17 +386,20 @@
 					</button>
 				</div>
 			{/each}
-			<button
+			<Button
 				type="button"
 				onclick={(e) => {
 					e.preventDefault();
 					e.stopPropagation();
 					inputEl.click();
 				}}
-				class={[objectSize, " grid place-content-center group", classControls]}
+				class={["m-4", classControls].join(" ")}
+				roundedFull
+				aspect1
+				variant="ghost"
 			>
-				{@html iconAdd({ size: 32, class: "opacity-75 group-hover:opacity-100" })}
-			</button>
+				{@html iconAdd({ size: 24 })}
+			</Button>
 		</div>
 	{/if}
 {/snippet}

package/dist/components/Input/FieldCheckbox.svelte

@@ -70,23 +70,7 @@
 
 	// $inspect(33333, invalid, validation);
 
-	//
-	let _classCommon = $derived(
-		[invalid && "invalid", disabled && "disabled", required && "required", renderSize]
-			.filter(Boolean)
-			.join(" ")
-	);
 
-	const _preset = {
-		labelBox: {
-			label: {
-				size: {
-					sm: "text-sm mt-0.5",
-					lg: "font-bold",
-				} as any,
-			},
-		},
-	};
 </script>
 
 {#snippet snippetOrThc({ id, value }: { id: string; value?: SnippetWithId | THC })}
@@ -99,17 +83,18 @@
 
 <label
 	class={twMerge(
-		`stuic-checkbox`,
-		_classCommon,
+		"stuic-checkbox",
 		"flex items-start mb-4 text-base",
+		invalid && "invalid",
+		disabled && "disabled",
 		classProp
 	)}
+	data-size={renderSize}
 	{style}
 >
 	<div
 		class={twMerge(
 			"input-box",
-			_classCommon,
 			"flex h-6 items-center ml-1",
 			classInputBox
 		)}
@@ -126,40 +111,20 @@
 				...(typeof validate === "boolean" ? {} : validate),
 				setValidationResult,
 			})}
-			class={twMerge(
-				_classCommon,
-				`size-5 rounded
-				bg-neutral-100
-				border-neutral-300
-				text-input-accent dark:text-input-accent-dark
-				cursor-pointer
-
-				checked:border-input-accent checked:bg-input-accent 
-				checked:dark:border-input-accent-dark checked:dark:bg-input-accent-dark
-
-				focus:border-input-accent
-				focus:ring-4
-				focus:ring-offset-0
-				focus:ring-input-accent/20 focus:dark:ring-input-accent-dark/20
-
-				disabled:cursor-not-allowed`,
-				classInput
-			)}
+			class={twMerge(classInput)}
 			{required}
 			{disabled}
 			{...rest}
 		/>
 	</div>
-	<div class={twMerge("label-box", _classCommon, "ml-3 w-full", classLabelBox)}>
+	<div class={twMerge("label-box", "ml-3 w-full", classLabelBox)}>
 		{#if label}
 			<div
 				class={twMerge(
 					"label",
-					_classCommon,
 					"block w-full cursor-pointer",
 					disabled && "cursor-not-allowed",
 					required && "after:content-['*'] after:opacity-40 after:pl-1",
-					_preset.labelBox.label.size[renderSize],
 					classLabel
 				)}
 			>
@@ -175,8 +140,7 @@
 				transition:slide={{ duration: 150 }}
 				class={twMerge(
 					"validation-box",
-					_classCommon,
-					"text-sm text-input-accent-invalid dark:text-input-accent-invalid-dark tracking-tight",
+					"text-sm tracking-tight",
 					classValidationBox
 				)}
 			>
@@ -187,7 +151,6 @@
 			<Collapsible
 				class={twMerge(
 					"desc-box",
-					_classCommon,
 					"text-sm opacity-50 cursor-pointer font-normal",
 					disabled && "cursor-not-allowed",
 					classDescBox

package/dist/components/Input/FieldFile.svelte

@@ -126,12 +126,7 @@
 			bind:this={input}
 			{id}
 			class={twMerge(
-				"form-input",
-				"block border-0 w-full",
-				"file:rounded file:border-0 file:mr-4 file:bg-neutral-200",
-				"file:px-2  file:cursor-pointer",
-				"focus-visible:ring-0 focus:ring-0 focus:leading-0",
-				renderSize,
+				"block w-full",
 				classInput
 			)}
 			use:highlightDragover={() => ({ classes: ["outline-dashed"] })}

package/dist/components/Input/FieldInput.svelte

@@ -126,7 +126,7 @@
 		bind:this={input}
 		{type}
 		{id}
-		class={twMerge("form-input", renderSize, classInput)}
+		class={twMerge(classInput)}
 		use:trim={() => ({
 			enabled: useTrim,
 			setValue: (v: string) => useTrim && (value = v),

package/dist/components/Input/FieldOptions.svelte

@@ -228,10 +228,13 @@
 	}
 
 	function getIconThc(isSelected: boolean): { html: string } {
+		const size = 19;
 		if (isMultiple) {
-			return { html: isSelected ? iconCheckboxCheck() : iconCheckboxEmpty() };
+			return {
+				html: isSelected ? iconCheckboxCheck({ size }) : iconCheckboxEmpty({ size }),
+			};
 		}
-		return { html: isSelected ? iconRadioCheck() : iconRadioEmpty() };
+		return { html: isSelected ? iconRadioCheck({ size }) : iconRadioEmpty({ size }) };
 	}
 
 	function sortFn(a: Item, b: Item) {
@@ -542,7 +545,7 @@
 				let extra = '';
 				if (vals.length > limit) {
 					vals = vals.slice(0, limit);
-					extra = `, ... <span class="text-sm opacity-75">(+${(origLength - limit)})</span>`;
+					extra = `, ... <span class="text-sm stuic-field-options-muted">(+${(origLength - limit)})</span>`;
 				}
 				return vals.filter(v => v != null).map(_renderOptionLabel).join(", ") + extra;
 			} catch (e) {
@@ -569,8 +572,8 @@
 					class={twMerge("m-2 mb-12 shadow-xl", classModalField)}
 					classInputBoxWrap={twMerge(
 						// always look like focused
-						`border border-input-accent dark:border-input-accent-dark`,
-						`ring-input-accent/20 dark:ring-input-accent-dark/20 ring-4`
+						`border border-(--stuic-input-accent)`,
+						`ring-(--stuic-input-accent)/20 ring-4`
 					)}
 					{id}
 					{required}
@@ -580,7 +583,7 @@
 						bind:this={input}
 						{type}
 						{id}
-						class={twMerge("form-input", renderSize, classInput)}
+						class={twMerge(renderSize, classInput)}
 						tabindex={1}
 						{required}
 						{disabled}
@@ -599,16 +602,16 @@
 					/>
 
 					{#snippet inputBelow()}
-						<div class="h-full border-t p-2 border-black/20">
+						<div
+							class="h-full border-t p-2"
+							style="border-color: var(--stuic-field-options-divider);"
+						>
 							<div class="text-sm -mt-1 flex items-center">
 								{#if isMultiple}
 									<button
 										type="button"
 										onclick={() => _selectedColl.addMany(options.items)}
-										class={twMerge(
-											"control flex items-center p-1 m-1 text-sm opacity-75 underline rounded",
-											"hover:opacity-100 focus-visible:outline-neutral-400 focus-visible:opacity-100"
-										)}
+										class="control flex items-center p-1 m-1 text-sm underline rounded stuic-field-options-control"
 										tabindex={4}
 										disabled={!options.size}
 									>
@@ -621,11 +624,8 @@
 										_selectedColl.clear();
 										input?.focus();
 									}}
-									class={twMerge(
-										"control flex items-center p-1 m-1 text-sm opacity-75 underline rounded",
-										"hover:opacity-100 focus-visible:outline-neutral-400 focus-visible:opacity-100"
-									)}
-									class:opacity-20={!selected.items.length}
+									class="control flex items-center p-1 m-1 text-sm underline rounded stuic-field-options-control"
+									data-disabled={!selected.items.length || undefined}
 									tabindex={5}
 									disabled={!selected.items.length}
 								>
@@ -634,7 +634,7 @@
 
 								<span class="p-1 m-1 text-sm">&nbsp;</span>
 								<span
-									class="flex-1 block justify-end opacity-75 text-right text-xs p-1 pr-2"
+									class="flex-1 block justify-end text-right text-xs p-1 pr-2 stuic-field-options-muted"
 								>
 									{selected.items.length}
 									{#if cardinality > 0 && cardinality < Infinity}
@@ -655,11 +655,15 @@
 								tabindex="-1"
 							>
 								{#if isFetching && !options.items.length}
-									<div class="flex opacity-50 text-sm h-full items-center justify-center">
+									<div
+										class="flex text-sm h-full items-center justify-center stuic-field-options-placeholder"
+									>
 										<Spinner class="w-4" />
 									</div>
 								{:else if !options.items.length && !allowUnknown}
-									<div class="flex opacity-50 text-sm h-full items-center justify-center">
+									<div
+										class="flex text-sm h-full items-center justify-center stuic-field-options-placeholder"
+									>
 										{@html t("no_results")}
 									</div>
 								{/if}
@@ -682,8 +686,7 @@
 									{#if _optgroup}
 										<div
 											class={twMerge(
-												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide",
-												"text-neutral-500 dark:text-neutral-400",
+												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide stuic-field-options-optgroup",
 												classOptgroup
 											)}
 										>
@@ -717,7 +720,9 @@
 													active={isSelected}
 													focused={active}
 													contentBefore={showIcons ? getIconThc(isSelected) : undefined}
-													classContentBefore={isSelected ? "opacity-100" : "opacity-50"}
+													classContentBefore={isSelected
+														? "stuic-field-options-icon stuic-field-options-icon--selected"
+														: "stuic-field-options-icon"}
 													class={classOption}
 													classActive={classOptionActive}
 													classFocused={classOptionActive}
@@ -734,7 +739,7 @@
 							</div>
 							<!-- {/if} -->
 							<div class="p-2 px-3 flex items-end justify-between">
-								<div class="text-xs opacity-75">
+								<div class="text-xs stuic-field-options-muted">
 									<!-- Use arrows to navigate. Spacebar and Enter to select and/or submit. -->
 									{#if allowUnknown}
 										{@html t("unknown_allowed")}
@@ -746,7 +751,7 @@
 									<Button
 										class="control"
 										type="button"
-										variant="primary"
+										intent="primary"
 										onclick={async (e) => {
 											e.preventDefault();
 											try_submit(true);
@@ -761,22 +766,20 @@
 					{/snippet}
 
 					{#snippet inputAfter()}
-						<div class="flex pl-2 items-center justify-center opacity-50">
+						<div
+							class="flex pl-2 items-center justify-center stuic-field-options-placeholder"
+						>
 							{#if isFetching}
 								<Spinner class="w-4" />
 							{/if}
 						</div>
 						<div class="flex pl-2 pr-1 items-center justify-center">
-							<button
+							<Button
+								x
+								variant="ghost"
+								roundedFull
 								type="button"
-								class={twMerge(
-									"opacity-75 rounded",
-									"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"
-								)}
-								use:tooltip
-								aria-label={t("x_close")}
+								tooltip={t("x_close")}
 								onclick={(e) => {
 									e.preventDefault();
 									if (innerValue.trim() == "") {
@@ -787,14 +790,14 @@
 									input?.focus();
 								}}
 								tabindex={2}
-							>
-								<X class="m-2 size-6" />
-							</button>
+							/>
 						</div>
 					{/snippet}
 
 					{#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-field-options-muted"
+						>
 							{@html iconSearch({ size: 19, strokeWidth: 3 })}
 						</div>
 					{/snippet}