@x33025/sveltely 0.1.3 → 0.1.6

package/dist/components/Library/Dropdown/Dropdown.demo.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-	import { CheckIcon, ChevronDownIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
+	import { CheckIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
 	import SearchField from '../SearchField';
 	import ScrollView, { type ScrollGeometry } from '../ScrollView';
 	import Dropdown from './index';
@@ -117,31 +117,23 @@
 			selectedLabel={selectedWebsite?.name ?? null}
 			showCheck={false}
 		>
-			{#snippet trigger(dropdown)}
-				<button
-					use:dropdown.useTrigger
-					type="button"
-					class="hstack w-full items-center gap-2 rounded-full border px-3 py-2 pr-2 text-left text-sm"
-					style="border-color: var(--sveltely-border-color); background: var(--sveltely-background-color);"
-					aria-expanded={dropdown.open}
-					aria-haspopup="dialog"
-					onclick={dropdown.toggle}
-				>
+			{#snippet trigger()}
+				<Dropdown.Trigger>
 					{#if selectedWebsite}
-						<span class="min-w-0 flex-1 truncate text-[var(--sveltely-primary-color)]"
-							>{selectedWebsite.name}</span
-						>
-						{#if selectedWebsite.domain}
-							<span class="max-w-32 truncate text-xs text-[var(--sveltely-secondary-color)]"
-								>{selectedWebsite.domain}</span
+						<span class="hstack min-w-0 items-center gap-2">
+							<span class="truncate text-[var(--sveltely-primary-color)]"
+								>{selectedWebsite.name}</span
 							>
-						{/if}
+							{#if selectedWebsite.domain}
+								<span class="truncate text-xs text-[var(--sveltely-secondary-color)]">
+									{selectedWebsite.domain}
+								</span>
+							{/if}
+						</span>
 					{:else}
-						<span class="min-w-0 flex-1 text-[var(--sveltely-secondary-color)]">Select website</span
-						>
+						<span class="text-[var(--sveltely-secondary-color)]">Select website</span>
 					{/if}
-					<ChevronDownIcon size={14} class="shrink-0 text-[var(--sveltely-secondary-color)]" />
-				</button>
+				</Dropdown.Trigger>
 			{/snippet}
 
 			<SearchField bind:value={websiteQuery} placeholder="Search websites..." />

package/dist/components/Library/Dropdown/Dropdown.svelte

@@ -4,7 +4,11 @@
 	import Floating from '../Floating/Floating.svelte';
 	import { surfaceStyle, type StyleProps } from '../../../style/surface';
 	import type { Anchor } from '../../../utils/positioning';
-	import { setDropdownContext, type DropdownTriggerState } from './context';
+	import {
+		setDropdownContext,
+		setDropdownTriggerContext,
+		type DropdownTriggerState
+	} from './context';
 
 	type Props = {
 		value?: TValue | null;
@@ -80,7 +84,7 @@
 >
 	{#snippet trigger(floating)}
 		{#if triggerContent}
-			{@render triggerContent({
+			{@const triggerState = setDropdownTriggerContext({
 				useTrigger: floating.useTrigger,
 				open: floating.open,
 				value,
@@ -91,20 +95,32 @@
 				openPanel: floating.openPanel,
 				closePanel: floating.closePanel
 			})}
+			{@render triggerContent(triggerState)}
 		{:else}
+			{@const triggerState = {
+				useTrigger: floating.useTrigger,
+				open: floating.open,
+				value,
+				selectedLabel: triggerText,
+				placeholder,
+				disabled,
+				toggle: floating.toggle,
+				openPanel: floating.openPanel,
+				closePanel: floating.closePanel
+			}}
 			<button
-				use:floating.useTrigger
+				use:triggerState.useTrigger
 				type="button"
 				class="dropdown-trigger justify-between"
 				aria-label={label}
-				aria-disabled={disabled}
-				{disabled}
+				aria-disabled={triggerState.disabled}
+				disabled={triggerState.disabled}
 				style={dropdownStyle}
-				aria-expanded={floating.open}
+				aria-expanded={triggerState.open}
 				aria-haspopup="dialog"
-				onclick={floating.toggle}
+				onclick={triggerState.toggle}
 			>
-				<span class="dropdown-trigger-label">{triggerText}</span>
+				<span class="dropdown-trigger-label">{triggerState.selectedLabel}</span>
 				<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
 			</button>
 		{/if}

package/dist/components/Library/Dropdown/Item.svelte

@@ -25,7 +25,7 @@
 
 <button
 	type="button"
-	class="dropdown-item inline-flex items-center justify-between text-left"
+	class="dropdown-item inline-flex items-center text-left"
 	data-popover-radius-source
 	disabled={resolvedDisabled}
 	aria-pressed={selected}
@@ -41,7 +41,7 @@
 		})}
 	{/if}
 	{#if resolvedShowCheck && selected}
-		<CheckIcon class="size-4 text-[var(--sveltely-primary-color)]" />
+		<CheckIcon class="dropdown-item-check size-4 text-[var(--sveltely-primary-color)]" />
 	{/if}
 </button>
 
@@ -65,4 +65,9 @@
 		cursor: not-allowed;
 		opacity: 0.5;
 	}
+
+	:global(.dropdown-item-check) {
+		margin-left: auto;
+		flex-shrink: 0;
+	}
 </style>

package/dist/components/Library/Dropdown/Trigger.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { ChevronDownIcon } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import { getDropdownTriggerContext, type DropdownTriggerState } from './context';
+
+	type Props = {
+		children?: Snippet<[DropdownTriggerState]>;
+	};
+
+	let { children }: Props = $props();
+
+	const dropdown = getDropdownTriggerContext();
+</script>
+
+<button
+	use:dropdown.useTrigger
+	type="button"
+	class="dropdown-trigger justify-between"
+	aria-disabled={dropdown.disabled}
+	disabled={dropdown.disabled}
+	aria-expanded={dropdown.open}
+	aria-haspopup="dialog"
+	onclick={dropdown.toggle}
+>
+	<span class="dropdown-trigger-label">
+		{#if children}
+			{@render children(dropdown)}
+		{:else}
+			{dropdown.selectedLabel}
+		{/if}
+	</span>
+	<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
+</button>
+
+<style>
+	.dropdown-trigger {
+		display: inline-flex;
+		min-width: 8rem;
+		max-width: 100%;
+		align-items: center;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-primary-color);
+		gap: var(--sveltely-gap);
+		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		text-align: left;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
+	}
+
+	.dropdown-trigger-label {
+		min-width: 0;
+		flex: 1 1 auto;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.dropdown-trigger :global(svg) {
+		flex: 0 0 auto;
+	}
+
+	.dropdown-trigger:hover {
+		background: var(--sveltely-hover-color);
+	}
+</style>

package/dist/components/Library/Dropdown/Trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { type DropdownTriggerState } from './context';
+type Props = {
+    children?: Snippet<[DropdownTriggerState]>;
+};
+declare const Trigger: import("svelte").Component<Props, {}, "">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;

package/dist/components/Library/Dropdown/context.d.ts

@@ -32,3 +32,5 @@ export type DropdownContext<TValue = DropdownValue> = {
 };
 export declare const setDropdownContext: <TValue>(context: DropdownContext<TValue>) => void;
 export declare const getDropdownContext: <TValue>() => DropdownContext<TValue>;
+export declare const setDropdownTriggerContext: <TValue>(context: DropdownTriggerState<TValue>) => DropdownTriggerState<TValue>;
+export declare const getDropdownTriggerContext: <TValue>() => DropdownTriggerState<TValue>;

package/dist/components/Library/Dropdown/context.js

@@ -1,6 +1,12 @@
 import { getContext, setContext } from 'svelte';
 const dropdownContextKey = Symbol('dropdown');
+const dropdownTriggerContextKey = Symbol('dropdown-trigger');
 export const setDropdownContext = (context) => {
     setContext(dropdownContextKey, context);
 };
 export const getDropdownContext = () => getContext(dropdownContextKey);
+export const setDropdownTriggerContext = (context) => {
+    setContext(dropdownTriggerContextKey, context);
+    return context;
+};
+export const getDropdownTriggerContext = () => getContext(dropdownTriggerContextKey);

package/dist/components/Library/Dropdown/index.d.ts

@@ -3,11 +3,13 @@ import Action from './Action.svelte';
 import Divider from './Divider.svelte';
 import Item from './Item.svelte';
 import Section from './Section.svelte';
+import Trigger from './Trigger.svelte';
 declare const Dropdown: typeof DropdownComponent & {
     Action: typeof Action;
     Divider: typeof Divider;
     Item: typeof Item;
     Section: typeof Section;
+    Trigger: typeof Trigger;
 };
 export default Dropdown;
 export type { DropdownActionState, DropdownItemState, DropdownTriggerState } from './context';

package/dist/components/Library/Dropdown/index.js

@@ -3,9 +3,11 @@ import Action from './Action.svelte';
 import Divider from './Divider.svelte';
 import Item from './Item.svelte';
 import Section from './Section.svelte';
+import Trigger from './Trigger.svelte';
 const Dropdown = DropdownComponent;
 Dropdown.Action = Action;
 Dropdown.Divider = Divider;
 Dropdown.Item = Item;
 Dropdown.Section = Section;
+Dropdown.Trigger = Trigger;
 export default Dropdown;

package/dist/style.css

@@ -298,9 +298,6 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
-  .max-w-32 {
-    max-width: calc(var(--spacing) * 32);
-  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -412,9 +409,6 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -458,18 +452,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
   .text-left {
     text-align: left;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.3",
+	"version": "0.1.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",