@x33025/sveltely 0.1.2 → 0.1.3

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

@@ -17,7 +17,7 @@
 </script>
 
 <div class="vstack center gap-3">
-	<div class="text-3xl font-semibold text-zinc-900">
+	<div class="text-3xl font-semibold text-[var(--sveltely-primary-color)]">
 		<AnimatedNumber {value} />
 	</div>
 	<Button label="Change number" variant="solid" onclick={bump} />

package/dist/components/Library/AsyncButton/AsyncButton.svelte

@@ -17,7 +17,8 @@
 		iconColor?: string;
 		iconSize?: number | string;
 		labelColor?: string;
-	} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
+	} & StyleProps &
+		Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
 
 	let {
 		icon,
@@ -135,32 +136,57 @@
 		--async-button-font-size: var(--sveltely-font-size);
 		--async-button-scale: calc(var(--async-button-font-size) / 1rem);
 		--async-button-icon-size: calc(var(--async-button-font-size) * 1.143);
-		border: 1px solid var(--async-button-border-color, var(--sveltely-primary-color));
+		border: 1px solid var(--async-button-border-color, var(--sveltely-active-color));
 		border-radius: var(--async-button-border-radius, var(--sveltely-border-radius));
-		background: var(--async-button-background, var(--sveltely-primary-color));
-		color: var(--async-button-color, white);
+		background: var(--async-button-background, var(--sveltely-active-color));
+		color: var(--async-button-color, var(--sveltely-background-color));
 		gap: var(--async-button-gap, var(--sveltely-gap));
 		font-size: var(--async-button-font-size);
 		line-height: 1.25;
-		padding:
-			var(--async-button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale)))
+		padding: var(
+				--async-button-padding-y,
+				calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))
+			)
 			var(--async-button-padding-x, calc(var(--sveltely-padding-x) * var(--async-button-scale)));
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
 	.async-button:hover {
-		background: var(
-			--async-button-hover-background,
-			var(--sveltely-active-hover-color)
-		);
+		background: var(--async-button-hover-background, var(--sveltely-active-hover-color));
 	}
 
 	.async-button-icon-only {
-		padding:
-			var(--async-button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale)))
-			var(--async-button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale)));
-		min-width: calc((var(--async-button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale))) * 2) + 1rem);
-		min-height: calc((var(--async-button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))) * 2) + 1rem);
+		padding: var(
+				--async-button-padding-y,
+				calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))
+			)
+			var(
+				--async-button-padding-x,
+				calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale))
+			);
+		min-width: calc(
+			(
+					var(
+							--async-button-padding-x,
+							calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale))
+						) *
+						2
+				) +
+				1rem
+		);
+		min-height: calc(
+			(
+					var(
+							--async-button-padding-y,
+							calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))
+						) *
+						2
+				) +
+				1rem
+		);
 	}
 
 	.async-button-icon-frame {

package/dist/components/Library/Button/Button.svelte

@@ -10,7 +10,8 @@
 		iconSize?: number | string;
 		iconColor?: string;
 		variant?: 'default' | 'solid' | 'ghost';
-	} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
+	} & StyleProps &
+		Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
 
 	let {
 		children,
@@ -77,15 +78,17 @@
 		--button-icon-size: calc(var(--button-font-size) * 1.143);
 		border: 1px solid var(--button-border-color, var(--sveltely-border-color));
 		border-radius: var(--button-border-radius, var(--sveltely-border-radius));
-		background: var(--button-background, white);
-		color: var(--button-color, var(--color-zinc-800));
+		background: var(--button-background, var(--sveltely-background-color));
+		color: var(--button-color, var(--sveltely-primary-color));
 		gap: var(--button-gap, var(--sveltely-gap));
 		font-size: var(--button-font-size);
 		line-height: 1.25;
-		padding:
-			var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale)))
+		padding: var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale)))
 			var(--button-padding-x, calc(var(--sveltely-padding-x) * var(--button-scale)));
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
 	.button[data-variant='default']:hover {
@@ -93,9 +96,9 @@
 	}
 
 	.button[data-variant='solid'] {
-		border-color: var(--button-solid-border-color, var(--sveltely-primary-color));
-		background: var(--button-solid-background, var(--sveltely-primary-color));
-		color: var(--button-solid-color, white);
+		border-color: var(--button-solid-border-color, var(--sveltely-active-color));
+		background: var(--button-solid-background, var(--sveltely-active-color));
+		color: var(--button-solid-color, var(--sveltely-background-color));
 	}
 
 	.button[data-variant='solid']:hover {
@@ -112,11 +115,16 @@
 	}
 
 	.button-icon-only {
-		padding:
-			var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale)))
+		padding: var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale)))
 			var(--button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--button-scale)));
-		min-width: calc((var(--button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--button-scale))) * 2) + 1rem);
-		min-height: calc((var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale))) * 2) + 1rem);
+		min-width: calc(
+			(var(--button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--button-scale))) * 2) +
+				1rem
+		);
+		min-height: calc(
+			(var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale))) * 2) +
+				1rem
+		);
 	}
 
 	.button-icon-frame {

package/dist/components/Library/Calendar/Calendar.svelte

@@ -164,9 +164,9 @@
 		--calendar-font-size: calc(var(--sveltely-font-size) * 0.971);
 		--calendar-scale: calc(var(--calendar-font-size) / 1rem);
 		--calendar-cell-core-size: max(2ch, calc(2ch * var(--calendar-scale)));
-		--calendar-weekend-color: var(--color-zinc-500);
-		--calendar-weekend-header-color: var(--color-zinc-400);
-		--calendar-weekend-selected-color: white;
+		--calendar-weekend-color: var(--sveltely-secondary-color);
+		--calendar-weekend-header-color: var(--sveltely-secondary-color);
+		--calendar-weekend-selected-color: var(--sveltely-background-color);
 		--calendar-cell-width: calc(var(--calendar-cell-core-size) + (var(--sveltely-padding-x) * 2.2));
 		--calendar-cell-height: calc(
 			var(--calendar-cell-core-size) + (var(--sveltely-padding-y) * 2.2)
@@ -193,7 +193,7 @@
 		font-size: var(--calendar-title-size);
 		line-height: 1.4;
 		font-weight: 600;
-		color: var(--color-zinc-900);
+		color: var(--sveltely-primary-color);
 	}
 
 	.calendar-nav-button {
@@ -210,15 +210,15 @@
 		max-height: var(--calendar-cell-height);
 		border: 1px solid color-mix(in oklab, var(--sveltely-border-color) 75%, white);
 		border-radius: var(--sveltely-border-radius);
-		background: color-mix(in oklab, white 92%, var(--color-zinc-100));
+		background: color-mix(in oklab, white 92%, var(--sveltely-inactive-color));
 		padding: 0;
-		color: var(--color-zinc-600);
+		color: var(--sveltely-secondary-color);
 		cursor: pointer;
 		appearance: none;
 	}
 
 	.calendar-nav-button:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
 		outline-offset: 2px;
 	}
 
@@ -250,7 +250,7 @@
 		font-size: var(--calendar-weekday-size);
 		line-height: 1;
 		text-align: center;
-		color: var(--color-zinc-500);
+		color: var(--sveltely-secondary-color);
 	}
 
 	.calendar-weekday-weekend {
@@ -266,11 +266,11 @@
 		height: 100%;
 		border: 1px solid color-mix(in oklab, var(--sveltely-border-color) 75%, white);
 		border-radius: var(--sveltely-border-radius);
-		background: color-mix(in oklab, white 92%, var(--color-zinc-100));
+		background: color-mix(in oklab, white 92%, var(--sveltely-inactive-color));
 		padding: 0;
 		font-size: calc(var(--calendar-font-size) * 0.85);
 		line-height: 1;
-		color: var(--color-zinc-700);
+		color: var(--sveltely-primary-color);
 		cursor: pointer;
 		appearance: none;
 	}
@@ -280,7 +280,7 @@
 	}
 
 	.calendar-day:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
 		outline-offset: 2px;
 	}
 
@@ -291,17 +291,17 @@
 	.calendar-day-outside {
 		border-color: transparent;
 		background: transparent;
-		color: var(--color-zinc-400);
+		color: var(--sveltely-secondary-color);
 	}
 
 	.calendar-day-today {
-		border-color: color-mix(in oklab, var(--sveltely-primary-color) 18%, white);
+		border-color: color-mix(in oklab, var(--sveltely-active-color) 18%, white);
 	}
 
 	.calendar-day-selected {
-		border-color: var(--sveltely-primary-color);
-		background: var(--sveltely-primary-color);
-		color: white;
+		border-color: var(--sveltely-active-color);
+		background: var(--sveltely-active-color);
+		color: var(--sveltely-background-color);
 	}
 
 	.calendar-day-selected:hover {

package/dist/components/Library/Checkbox/Checkbox.svelte

@@ -8,7 +8,8 @@
 		checked?: boolean;
 		label?: string;
 		children?: Snippet;
-	} & StyleProps & Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+	} & StyleProps &
+		Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
 
 	let {
 		checked = $bindable(false),
@@ -52,13 +53,14 @@
 		--checkbox-font-size: var(--sveltely-font-size);
 		--checkbox-scale: calc(var(--checkbox-font-size) / 1rem);
 		--checkbox-box-size: calc(
-			(var(--checkbox-font-size) * 0.92) + (var(--sveltely-padding-y) * 0.28 * var(--checkbox-scale))
+			(var(--checkbox-font-size) * 0.92) +
+				(var(--sveltely-padding-y) * 0.28 * var(--checkbox-scale))
 		);
 		--checkbox-icon-size: calc(var(--checkbox-box-size) * 0.64);
 		gap: var(--checkbox-gap, var(--sveltely-gap));
 		font-size: var(--checkbox-font-size);
 		line-height: 1.25;
-		color: var(--checkbox-color, var(--color-zinc-800));
+		color: var(--checkbox-color, var(--sveltely-primary-color));
 		cursor: pointer;
 		user-select: none;
 	}
@@ -93,7 +95,10 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		transition: color 150ms, border-color 150ms, background-color 150ms;
+		transition:
+			color 150ms,
+			border-color 150ms,
+			background-color 150ms;
 	}
 
 	.checkbox:hover .checkbox-mark {
@@ -103,22 +108,16 @@
 	.checkbox-control input:checked + .checkbox-mark {
 		border-color: var(--checkbox-checked-border-color, var(--sveltely-active-color));
 		background: var(--checkbox-checked-background, var(--sveltely-active-color));
-		color: var(--checkbox-checked-color, white);
+		color: var(--checkbox-checked-color, var(--sveltely-background-color));
 	}
 
 	.checkbox:hover .checkbox-control input:checked + .checkbox-mark {
-		background: var(
-			--checkbox-checked-hover-background,
-			var(--sveltely-active-hover-color)
-		);
-		border-color: var(
-			--checkbox-checked-hover-border-color,
-			var(--sveltely-active-hover-color)
-		);
+		background: var(--checkbox-checked-hover-background, var(--sveltely-active-hover-color));
+		border-color: var(--checkbox-checked-hover-border-color, var(--sveltely-active-hover-color));
 	}
 
 	.checkbox-control input:focus-visible + .checkbox-mark {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
 		outline-offset: 2px;
 	}
 

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

@@ -13,5 +13,5 @@
 
 <div class="vstack w-full max-w-sm gap-2">
 	<ChipInput bind:tags />
-	<p class="text-xs text-zinc-500">Tags: {tags.join(', ')}</p>
+	<p class="text-xs text-[var(--sveltely-secondary-color)]">Tags: {tags.join(', ')}</p>
 </div>

package/dist/components/Library/ChipInput/ChipInput.svelte

@@ -10,7 +10,8 @@
 		selection?: string[];
 		disabled?: boolean;
 		action?: Snippet;
-	} & StyleProps & Record<string, unknown>;
+	} & StyleProps &
+		Record<string, unknown>;
 
 	let {
 		placeholder = 'Add a tag...',
@@ -321,7 +322,9 @@
 		--chip-input-icon-size: calc(var(--chip-input-font-size) * 1);
 		--chip-input-padding-y: calc(var(--sveltely-padding-y) * 0.33 * var(--chip-input-scale));
 		--chip-input-padding-x: calc(var(--sveltely-padding-x) * 0.67 * var(--chip-input-scale));
-		--chip-input-control-height: calc(var(--chip-input-line-height) + (var(--chip-input-padding-y) * 2) + 2px);
+		--chip-input-control-height: calc(
+			var(--chip-input-line-height) + (var(--chip-input-padding-y) * 2) + 2px
+		);
 		gap: calc(var(--sveltely-gap) * 0.5);
 	}
 
@@ -329,7 +332,7 @@
 		box-sizing: border-box;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--color-zinc-100);
+		background: var(--sveltely-inactive-color);
 		color: black;
 		min-height: var(--chip-input-control-height);
 		padding: var(--chip-input-padding-y) var(--chip-input-padding-x);
@@ -339,7 +342,7 @@
 	}
 
 	.chip-selected {
-		border-color: var(--color-zinc-300);
+		border-color: var(--sveltely-border-color);
 	}
 
 	.chip:hover,

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getDropdownContext, type DropdownActionState } from './context';
+
+	type Props = {
+		disabled?: boolean;
+		closeOnSelect?: boolean;
+		children?: Snippet<[DropdownActionState]>;
+		onclick?: (event: MouseEvent) => void;
+	};
+
+	let { disabled = false, closeOnSelect, children, onclick }: Props = $props();
+
+	const dropdown = getDropdownContext();
+	const resolvedDisabled = $derived(dropdown.disabled || disabled);
+	const resolvedCloseOnSelect = $derived(closeOnSelect ?? dropdown.closeOnSelect);
+
+	function handleClick(event: MouseEvent) {
+		if (resolvedDisabled) return;
+		onclick?.(event);
+		if (!event.defaultPrevented && resolvedCloseOnSelect) dropdown.close();
+	}
+</script>
+
+<button
+	type="button"
+	class="dropdown-action inline-flex items-center text-left"
+	data-popover-radius-source
+	disabled={resolvedDisabled}
+	onclick={handleClick}
+>
+	{#if children}
+		{@render children({
+			disabled: resolvedDisabled,
+			close: dropdown.close
+		})}
+	{/if}
+</button>
+
+<style>
+	.dropdown-action {
+		width: 100%;
+		gap: calc(var(--sveltely-inset) * 2);
+		border-radius: var(--dropdown-item-radius, var(--sveltely-border-radius-nested));
+		padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+	}
+
+	.dropdown-action :global(*) {
+		border-radius: inherit;
+	}
+
+	.dropdown-action:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.dropdown-action:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type DropdownActionState } from './context';
+type Props = {
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    children?: Snippet<[DropdownActionState]>;
+    onclick?: (event: MouseEvent) => void;
+};
+declare const Action: import("svelte").Component<Props, {}, "">;
+type Action = ReturnType<typeof Action>;
+export default Action;

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Divider from '../Divider';
+</script>
+
+<Divider />

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

@@ -0,0 +1,19 @@
+import Divider from '../Divider';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Divider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Divider = InstanceType<typeof Divider>;
+export default Divider;