@finsweet/webflow-apps-utils 1.0.51 → 1.0.52

package/dist/ui/components/select/Select.stories.d.ts

@@ -108,3 +108,4 @@ export declare const InvalidState: Story;
 export declare const InvalidWithAlert: Story;
 export declare const ValidationStates: Story;
 export declare const FormValidationExample: Story;
+export declare const WithFooter: Story;

package/dist/ui/components/select/Select.stories.js

@@ -1,5 +1,6 @@
 import { CheckIcon, UndoIcon } from '../../icons';
 import Select from './Select.svelte';
+import SelectWithFooterStory from './SelectWithFooterStory.svelte';
 // Mock options for stories
 const basicOptions = [
     { label: 'Option 1', value: 'option1' },
@@ -567,3 +568,37 @@ export const FormValidationExample = {
         }
     }
 };
+// Footer snippet example
+const providerOptions = [
+    { label: 'Facebook', value: 'facebook' },
+    { label: 'Google', value: 'google' },
+    { label: 'Cloudflare', value: 'cloudflare' },
+    { label: 'Youtube', value: 'youtube' },
+    { label: 'Swiper', value: 'swiper' },
+    { label: 'GSAP', value: 'gsap' }
+];
+export const WithFooter = {
+    render: () => ({
+        Component: SelectWithFooterStory,
+        props: {
+            options: providerOptions,
+            defaultText: 'Providers',
+            dropdownWidth: '250px',
+            dropdownHeight: '200px',
+            selected: 'facebook'
+        }
+    }),
+    args: {
+        options: providerOptions,
+        defaultText: 'Providers',
+        dropdownWidth: '250px',
+        dropdownHeight: '200px'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Select with a sticky footer action. The footer stays visible while scrolling through options. Click the footer to trigger a custom action and close the dropdown.'
+            }
+        }
+    }
+};

package/dist/ui/components/select/Select.svelte

@@ -14,7 +14,12 @@
 
 	import { Tooltip } from '..';
 	import { Text } from '../text';
-	import type { DropdownInstance, SelectInstanceManager, SelectProps } from './types.js';
+	import type {
+		DropdownInstance,
+		SelectFooterProps,
+		SelectInstanceManager,
+		SelectProps
+	} from './types.js';
 
 	let {
 		id = uuidv4(),
@@ -38,7 +43,8 @@
 		invalid = false,
 		className = '',
 		onchange,
-		children
+		children,
+		footer
 	}: SelectProps = $props();
 
 	// State variables
@@ -274,6 +280,17 @@
 		lastHoveredItem = target;
 	};
 
+	/**
+	 * Clears the hover state when mouse leaves the items area.
+	 */
+	const clearHoverState = (): void => {
+		if (lastHoveredItem) {
+			lastHoveredItem.classList.remove('hover-state');
+			lastHoveredItem.setAttribute('tabindex', '-1');
+			lastHoveredItem = null;
+		}
+	};
+
 	type EventOption = [string, () => void];
 
 	/**
@@ -403,14 +420,14 @@
 	const getTooltipColor = (alertType: string) => {
 		switch (alertType) {
 			case 'error':
-				return 'var(--redBackground, #ff4d4d)';
+				return 'var(--redBackground)';
 			case 'warning':
-				return 'var(--orangeBackground, #ff9933)';
+				return 'var(--orangeBackground)';
 			case 'success':
-				return 'var(--greenBackground, #00cc66)';
+				return 'var(--greenBackground)';
 			case 'info':
 			default:
-				return 'var(--blueBackground, #4d9fff)';
+				return 'var(--actionPrimaryBackground)';
 		}
 	};
 
@@ -458,8 +475,9 @@
 			<div
 				tabindex={disabled || isOpen ? -1 : 0}
 				class="dropdown-list"
+				class:has-footer={footer}
 				role="listbox"
-				style="width:{dropdownWidth}; max-height:{dropdownHeight};"
+				style="width:{dropdownWidth};"
 				onkeydown={(e) => {
 					e.stopPropagation();
 					e.preventDefault();
@@ -467,85 +485,98 @@
 				}}
 				bind:this={dropdownItems}
 			>
-				{#if selectedLabel}
-					<div class="selected">
-						<div class="label">
-							<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="dropdown-items-scroll"
+					style="max-height:{dropdownHeight};"
+					onmouseleave={clearHoverState}
+				>
+					{#if selectedLabel}
+						<div class="selected">
+							<div class="label">
+								<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
+							</div>
 						</div>
-					</div>
-				{/if}
-
-				{#if enableSearch}
-					<div class="search-container">
-						<input
-							type="text"
-							placeholder="Search"
-							oninput={(e) => {
+					{/if}
+
+					{#if enableSearch}
+						<div class="search-container">
+							<input
+								type="text"
+								placeholder="Search"
+								oninput={(e) => {
+									e.stopPropagation();
+									e.preventDefault();
+									handleSearch(e);
+								}}
+								onkeydown={(e) => e.stopPropagation()}
+							/>
+						</div>
+					{/if}
+
+					{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
+						{@const indexId = index + 1}
+						{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
+						<button
+							aria-posinset={indexId}
+							aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
+							id={`${itemId}-list-${indexId}-${id}`}
+							data-value={value}
+							class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
+							role="option"
+							onclick={(e) => {
+								e.stopPropagation();
+								if (isDisabled) return;
+								handleSelect(value, label, e.currentTarget);
+							}}
+							onkeydown={(e) => {
 								e.stopPropagation();
 								e.preventDefault();
-								handleSearch(e);
 							}}
-							onkeydown={(e) => e.stopPropagation()}
-						/>
+							onmouseenter={handleMouseEnter}
+							aria-hidden={!isOpen}
+							tabindex={value === selected ? 0 : -1}
+							style={description ? 'align-items:start;' : ''}
+						>
+							<div class="icon" aria-label={label}>
+								{#if value === selected && selected?.trim() !== ''}
+									<CheckIcon />
+								{/if}
+							</div>
+							<div class="label">
+								{#if description || descriptionTitle || labelIcon}
+									<div class="label-content">
+										<div class="label-name">
+											<Text {label} />
+											{#if labelIcon}
+												{@const IconComponent = labelIcon}
+												<IconComponent />
+											{/if}
+										</div>
+										<div class="label-description-title">
+											<Text
+												label={descriptionTitle || ''}
+												fontColor="var(--greenText)"
+												fontSize="10px"
+											/>
+										</div>
+										<div class="label-description">
+											<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
+										</div>
+									</div>
+								{:else}
+									<Text {label} fontSize="normal" />
+								{/if}
+							</div>
+						</button>
+					{/each}
+				</div>
+
+				{#if footer}
+					<div class="dropdown-footer">
+						{@render footer({ close: closeDropdown })}
 					</div>
 				{/if}
-
-				{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
-					{@const indexId = index + 1}
-					{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
-					<button
-						aria-posinset={indexId}
-						aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
-						id={`${itemId}-list-${indexId}-${id}`}
-						data-value={value}
-						class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
-						role="option"
-						onclick={(e) => {
-							e.stopPropagation();
-							if (isDisabled) return;
-							handleSelect(value, label, e.currentTarget);
-						}}
-						onkeydown={(e) => {
-							e.stopPropagation();
-							e.preventDefault();
-						}}
-						onmouseenter={handleMouseEnter}
-						aria-hidden={!isOpen}
-						tabindex={value === selected ? 0 : -1}
-						style={description ? 'align-items:start;' : ''}
-					>
-						<div class="icon" aria-label={label}>
-							{#if value === selected && selected?.trim() !== ''}
-								<CheckIcon />
-							{/if}
-						</div>
-						<div class="label">
-							{#if description || descriptionTitle || labelIcon}
-								<div class="label-content">
-									<div class="label-name">
-										<Text {label} />
-										{#if labelIcon}
-											{@const IconComponent = labelIcon}
-											<IconComponent />
-										{/if}
-									</div>
-									<div class="label-description-title">
-										<Text
-											label={descriptionTitle || ''}
-											fontColor="var(--greenText)"
-											fontSize="10px"
-										/>
-									</div>
-									<div class="label-description">
-										<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
-									</div>
-								</div>
-							{:else}
-								<Text {label} fontSize="normal" />
-							{/if}
-						</div>
-					</button>
-				{/each}
 			</div>
 		</div>
 	</div>
@@ -675,14 +706,30 @@
 		position: absolute;
 		flex-direction: column;
 		align-items: flex-start;
-		gap: 4px;
+		gap: 0;
 		border-radius: 4px;
 		border: 1px solid var(--border1);
 		background: var(--background3);
 		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+		z-index: 99999;
+	}
 
+	.dropdown-items-scroll {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+		width: 100%;
 		overflow-y: auto;
-		z-index: 99999;
+	}
+
+	.dropdown-footer {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border-top: 1px solid var(--border1);
+		background: var(--background3);
+		flex-shrink: 0;
 	}
 	.dropdown-list .selected {
 		display: flex;

package/dist/ui/components/select/SelectWithFooterStory.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import Select from './Select.svelte';
+	import type { SelectOption } from './types.js';
+
+	interface Props {
+		options: SelectOption[];
+		defaultText?: string;
+		dropdownWidth?: string;
+		dropdownHeight?: string;
+		selected?: string | null;
+	}
+
+	let {
+		options,
+		defaultText = 'Select',
+		dropdownWidth = '200px',
+		dropdownHeight = '200px',
+		selected = $bindable(null)
+	}: Props = $props();
+
+	const handleFooterClick = (close: () => void) => {
+		console.log('Footer action clicked - adding a new provider manually');
+		close();
+	};
+</script>
+
+<Select {options} {defaultText} {dropdownWidth} {dropdownHeight} bind:selected>
+	{#snippet footer({ close })}
+		<button type="button" class="footer-action" onclick={() => handleFooterClick(close)}>
+			+ Add manually a provider
+		</button>
+	{/snippet}
+</Select>
+
+<style>
+	.footer-action {
+		all: unset;
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		width: 100%;
+		color: var(--blueText);
+		font-size: 11.5px;
+		font-weight: 400;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		cursor: pointer;
+		box-sizing: border-box;
+	}
+
+	.footer-action:hover {
+		background: var(--background5);
+	}
+</style>

package/dist/ui/components/select/SelectWithFooterStory.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SelectOption } from './types.js';
+interface Props {
+    options: SelectOption[];
+    defaultText?: string;
+    dropdownWidth?: string;
+    dropdownHeight?: string;
+    selected?: string | null;
+}
+declare const SelectWithFooterStory: import("svelte").Component<Props, {}, "selected">;
+type SelectWithFooterStory = ReturnType<typeof SelectWithFooterStory>;
+export default SelectWithFooterStory;

package/dist/ui/components/select/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Select } from './Select.svelte';
-export type { SelectOption, SelectProps, SelectChangeEvent, SelectChangeHandler, SelectState, DropdownInstance, DropdownConfig, SelectStyles, NavigationKey, KeyboardNavigationEvent, SearchConfig, FilterFunction, SelectElementRefs, SelectInstanceManager } from './types.js';
+export type { SelectOption, SelectProps, SelectFooterProps, SelectChangeEvent, SelectChangeHandler, SelectState, DropdownInstance, DropdownConfig, SelectStyles, NavigationKey, KeyboardNavigationEvent, SearchConfig, FilterFunction, SelectElementRefs, SelectInstanceManager } from './types.js';

package/dist/ui/components/select/types.d.ts

@@ -24,6 +24,9 @@ export interface SelectChangeEvent {
     value: string | null;
 }
 export type SelectChangeHandler = (event: SelectChangeEvent) => void;
+export interface SelectFooterProps {
+    close: () => void;
+}
 export interface SelectProps {
     id?: string;
     defaultText?: string;
@@ -53,6 +56,11 @@ export interface SelectProps {
     className?: string;
     onchange?: SelectChangeHandler;
     children?: Snippet;
+    /**
+     * Footer snippet for custom actions at the bottom of the dropdown.
+     * Receives { close } function to close the dropdown.
+     */
+    footer?: Snippet<[SelectFooterProps]>;
 }
 export interface SelectState {
     isOpen: boolean;

package/dist/ui/components/tags/TagsInput.svelte

@@ -52,12 +52,19 @@
 		return value.length < minTags;
 	});
 
+	// Derived alert state for styling
+	let alertType = $derived(alert?.type || null);
+	let isErrorAlert = $derived(alertType === 'error' || alertType === 'warning');
+	let isSuccessAlert = $derived(alertType === 'success');
+
 	// CSS classes
 	let wrapperClasses = $derived(
 		`
 		tags-input-wrapper
 		${isDisabled ? 'disabled' : ''}
-		${invalid || hasAlert || isMinTagsInvalid ? 'invalid' : ''}
+		${readonly ? 'readonly' : ''}
+		${invalid || isErrorAlert || isMinTagsInvalid ? 'invalid' : ''}
+		${isSuccessAlert ? 'success' : ''}
 		${isFocused ? 'focused' : ''}
 		${loading ? 'loading' : ''}
 		${className}
@@ -237,14 +244,14 @@
 	const getTooltipColor = (alertType: string) => {
 		switch (alertType) {
 			case 'error':
-				return 'var(--redBackground, #cf313b)';
+				return 'var(--redBackground)';
 			case 'warning':
-				return 'var(--orangeBackground, #bf4704)';
+				return 'var(--orangeBackground)';
 			case 'success':
-				return 'var(--greenBackground, #007a41)';
+				return 'var(--greenBackground)';
 			case 'info':
 			default:
-				return 'var(--actionPrimaryBackground, #006acc)';
+				return 'var(--actionPrimaryBackground)';
 		}
 	};
 </script>
@@ -260,7 +267,7 @@
 		onkeydown={(e) => e.key === 'Enter' && handleWrapperClick()}
 	>
 		<div class="tags-input-content">
-			{#each value as tag, index (tag)}
+			{#each value as tag, index (`${index}-${tag}`)}
 				<span class="tag" role="listitem">
 					<span class="tag-text">{tag}</span>
 					{#if !readonly && !isDisabled}
@@ -337,14 +344,14 @@
 
 	.tags-input-wrapper {
 		position: relative;
-		border: 1px solid var(--border3, rgba(255, 255, 255, 0.19));
-		border-radius: var(--border-radius, 4px);
+		border: 1px solid var(--border3);
+		border-radius: var(--border-radius);
 		padding: 4px;
 		display: flex;
 		flex-wrap: wrap;
 		align-items: flex-start;
 		align-content: flex-start;
-		background: var(--background1, #1e1e1e);
+		background: var(--background1);
 		min-height: 32px;
 		box-shadow:
 			0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset,
@@ -357,17 +364,22 @@
 	}
 
 	.tags-input-wrapper.focused {
-		border-color: var(--blueBorder, #007df0);
+		border-color: var(--blueBorder);
 	}
 
 	.tags-input-wrapper.invalid {
-		border-color: var(--redBorder, #e42f3a);
+		border-color: var(--redBorder);
+	}
+
+	.tags-input-wrapper.success {
+		border-color: var(--greenBorder);
 	}
 
-	.tags-input-wrapper.disabled {
+	.tags-input-wrapper.disabled,
+	.tags-input-wrapper.readonly {
 		cursor: not-allowed;
-		opacity: 0.5;
-		border-color: var(--border1, rgba(255, 255, 255, 0.1));
+		opacity: 0.7;
+		border-color: var(--border1);
 	}
 
 	.tags-input-wrapper.loading {
@@ -389,24 +401,26 @@
 		padding: 4px 8px;
 		justify-content: center;
 		align-items: center;
-		border-radius: var(--border-radius, 4px);
+		border-radius: var(--border-radius);
 		background: var(--actionSecondaryBackground);
-		color: var(--text1, #ebebeb);
-		font-size: var(--font-size-small, 11.5px);
-		font-weight: var(--font-weight-normal, 400);
+		color: var(--text1);
+		font-size: var(--font-size-small);
+		font-weight: var(--font-weight-normal);
 		line-height: 16px;
 		letter-spacing: -0.115px;
 		box-shadow:
 			0 0.5px 1px 0 #000,
 			0 0.5px 0.5px 0 rgba(255, 255, 255, 0.12) inset;
 		user-select: none;
+		max-width: 100%;
+		min-width: 0;
 	}
 
 	.tag-text {
-		max-width: 150px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		min-width: 0;
 	}
 
 	.tag-remove {
@@ -423,7 +437,7 @@
 		background: #464646;
 		color: var(--text2);
 		cursor: pointer;
-		border-radius: 0 var(--border-radius, 4px) var(--border-radius, 4px) 0;
+		border-radius: 0 var(--border-radius) var(--border-radius) 0;
 		opacity: 0;
 		pointer-events: none;
 	}
@@ -434,7 +448,7 @@
 	}
 
 	.tag-remove:not(:disabled) {
-		color: var(--text1, #ebebeb);
+		color: var(--text1);
 	}
 
 	.tag-remove:disabled {
@@ -453,8 +467,8 @@
 		padding: 4px 8px;
 		border: none;
 		background: transparent;
-		color: var(--text1, #ebebeb);
-		font-size: var(--font-size-small, 11.5px);
+		color: var(--text1);
+		font-size: var(--font-size-small);
 		font-family: inherit;
 		line-height: 16px;
 		letter-spacing: -0.115px;
@@ -462,7 +476,7 @@
 	}
 
 	.tags-input-field::placeholder {
-		color: var(--text3, #a3a3a3);
+		color: var(--text3);
 	}
 
 	.tags-input-field:disabled {

package/dist/ui/icons/CheckCircleIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 12 12" fill="none">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

package/dist/ui/icons/CheckCircleOutlinedIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 14 14" fill="none">
 	<path
 		opacity="0.4"
 		fill-rule="evenodd"

package/dist/ui/icons/CloseCircleIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
 	<path
 		d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM11.53 10.47L10.47 11.53L8 9.06L5.53 11.53L4.47 10.47L6.94 8L4.47 5.53L5.53 4.47L8 6.94L10.47 4.47L11.53 5.53L9.06 8L11.53 10.47Z"
 		fill="currentColor"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {