@x33025/sveltely 0.1.1 → 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.demo.svelte

@@ -1,17 +1,19 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Button',
-		description: 'Token-aware button primitive with optional icon support.'
+		description: 'Token-aware button primitive with optional icon support.',
+		columnSpan: 2
 	};
 </script>
 
 <script lang="ts">
 	import { SaveIcon } from '@lucide/svelte';
 	import Button from './Button.svelte';
+	import HStack from '../HStack';
 </script>
 
-<div class="hstack items-center gap-3">
+<HStack align="center" gap={0.75}>
 	<Button label="Default" />
 	<Button label="Solid" variant="solid" />
 	<Button icon={SaveIcon} label="With icon" />
-</div>
+</HStack>

package/dist/components/Library/Button/Button.demo.svelte.d.ts

@@ -1,6 +1,7 @@
 export declare const demo: {
     name: string;
     description: string;
+    columnSpan: number;
 };
 import Button from './Button.svelte';
 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> {

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.demo.svelte

@@ -3,7 +3,7 @@
 		name: 'Calendar',
 		description: 'Compact month calendar with token-driven spacing and radius.',
 		columnSpan: 2,
-		rowSpan: 2
+		rowSpan: 3
 	};
 </script>
 
@@ -15,16 +15,4 @@
 	let weekStart = $state<'monday' | 'sunday'>('monday');
 </script>
 
-<div class="vstack gap-2">
-	<div class="hstack gap-2">
-		<button type="button" onclick={() => (weekStart = 'monday')}>Monday start</button>
-		<button type="button" onclick={() => (weekStart = 'sunday')}>Sunday start</button>
-	</div>
-	<Calendar bind:value bind:month {weekStart} />
-	<p class="text-xs text-zinc-500">
-		Selected: {value ? value.toLocaleDateString() : 'none'} | Month: {month.toLocaleDateString(undefined, {
-			month: 'long',
-			year: 'numeric'
-		})} | Week starts: {weekStart}
-	</p>
-</div>
+<Calendar bind:value bind:month {weekStart} />

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

@@ -5,8 +5,7 @@
 	const startOfDay = (value: Date) =>
 		new Date(value.getFullYear(), value.getMonth(), value.getDate());
 
-	const startOfMonth = (value: Date) =>
-		new Date(value.getFullYear(), value.getMonth(), 1);
+	const startOfMonth = (value: Date) => new Date(value.getFullYear(), value.getMonth(), 1);
 
 	type CalendarCell = {
 		key: string;
@@ -23,7 +22,8 @@
 		month?: Date;
 		weekdayLabels?: string[];
 		weekStart?: 'monday' | 'sunday';
-	} & StyleProps & Record<string, unknown>;
+	} & StyleProps &
+		Record<string, unknown>;
 
 	const defaultWeekdayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 	const today = new Date();
@@ -42,14 +42,10 @@
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'calendar'));
 
 	const orderedWeekdayLabels = $derived(
-		weekStart === 'sunday'
-			? [weekdayLabels[6], ...weekdayLabels.slice(0, 6)]
-			: weekdayLabels
+		weekStart === 'sunday' ? [weekdayLabels[6], ...weekdayLabels.slice(0, 6)] : weekdayLabels
 	);
 
-	const weekendColumnIndexes = $derived(
-		weekStart === 'sunday' ? [0, 6] : [5, 6]
-	);
+	const weekendColumnIndexes = $derived(weekStart === 'sunday' ? [0, 6] : [5, 6]);
 
 	function shiftMonth(offset: number) {
 		month = new Date(month.getFullYear(), month.getMonth() + offset, 1);
@@ -59,6 +55,17 @@
 		value = startOfDay(nextValue);
 	}
 
+	function activateCell(cell: CalendarCell) {
+		if (!cell.value) return;
+
+		if (cell.isCurrentMonth) {
+			selectDate(cell.value);
+			return;
+		}
+
+		month = startOfMonth(cell.value);
+	}
+
 	const displayYear = $derived(month.getFullYear());
 	const displayMonth = $derived(month.getMonth());
 	const todayYear = today.getFullYear();
@@ -74,37 +81,28 @@
 
 	const cells = $derived.by(() => {
 		const firstDay = new Date(displayYear, displayMonth, 1);
-		const daysInMonth = new Date(displayYear, displayMonth + 1, 0).getDate();
 		const leadingEmptyDays =
 			weekStart === 'sunday' ? firstDay.getDay() : (firstDay.getDay() + 6) % 7;
 
-		return Array.from({ length: leadingEmptyDays + daysInMonth }, (_, index): CalendarCell => {
+		return Array.from({ length: 42 }, (_, index): CalendarCell => {
 			const dayNumber = index - leadingEmptyDays + 1;
-			if (dayNumber < 1) {
-				return {
-					key: `empty-${index}`,
-					label: '',
-					isCurrentMonth: false,
-					isToday: false,
-					isWeekend: false,
-					isSelected: false
-				};
-			}
-
 			const cellDate = new Date(displayYear, displayMonth, dayNumber);
 			const dayOfWeek = cellDate.getDay();
+			const isCurrentMonth = cellDate.getMonth() === displayMonth;
 
 			return {
-				key: `day-${dayNumber}`,
-				label: String(dayNumber),
-				isCurrentMonth: true,
+				key: `day-${cellDate.getFullYear()}-${cellDate.getMonth()}-${cellDate.getDate()}`,
+				label: String(cellDate.getDate()),
+				isCurrentMonth,
 				value: cellDate,
 				isToday:
+					isCurrentMonth &&
 					displayYear === todayYear &&
 					displayMonth === todayMonth &&
-					dayNumber === todayDate,
+					cellDate.getDate() === todayDate,
 				isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
 				isSelected:
+					isCurrentMonth &&
 					value !== null &&
 					cellDate.getFullYear() === value.getFullYear() &&
 					cellDate.getMonth() === value.getMonth() &&
@@ -116,16 +114,26 @@
 
 <div class="calendar vstack" style={rootStyle} {...props}>
 	<div class="calendar-grid">
-		<button class="calendar-nav-button" type="button" aria-label="Previous month" onclick={() => shiftMonth(-1)}>
+		<button
+			class="calendar-nav-button"
+			type="button"
+			aria-label="Previous month"
+			onclick={() => shiftMonth(-1)}
+		>
 			<ChevronLeftIcon class="calendar-nav-icon" strokeWidth={2} />
 		</button>
 		<div class="calendar-title-cell">
 			<h2 class="calendar-title">{monthLabel}</h2>
 		</div>
-		<button class="calendar-nav-button" type="button" aria-label="Next month" onclick={() => shiftMonth(1)}>
+		<button
+			class="calendar-nav-button"
+			type="button"
+			aria-label="Next month"
+			onclick={() => shiftMonth(1)}
+		>
 			<ChevronRightIcon class="calendar-nav-icon" strokeWidth={2} />
 		</button>
-		{#each orderedWeekdayLabels as weekday, index}
+		{#each orderedWeekdayLabels as weekday, index (weekday)}
 			<div
 				class="calendar-weekday"
 				class:calendar-weekday-weekend={weekendColumnIndexes.includes(index)}
@@ -135,23 +143,18 @@
 		{/each}
 
 		{#each cells as cell (cell.key)}
-			{#if cell.isCurrentMonth && cell.value}
-				<button
-					type="button"
-					class="calendar-day"
-					class:calendar-day-today={cell.isToday}
-					class:calendar-day-selected={cell.isSelected}
-					class:calendar-day-weekend={cell.isWeekend}
-					aria-pressed={cell.isSelected}
-					onclick={() => selectDate(cell.value!)}
-				>
-					{cell.label}
-				</button>
-			{:else}
-				<div class="calendar-day calendar-day-empty">
-					{cell.label}
-				</div>
-			{/if}
+			<button
+				type="button"
+				class="calendar-day"
+				class:calendar-day-outside={!cell.isCurrentMonth}
+				class:calendar-day-today={cell.isToday}
+				class:calendar-day-selected={cell.isSelected}
+				class:calendar-day-weekend={cell.isWeekend}
+				aria-pressed={cell.isSelected}
+				onclick={() => activateCell(cell)}
+			>
+				{cell.label}
+			</button>
 		{/each}
 	</div>
 </div>
@@ -161,11 +164,13 @@
 		--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));
+		--calendar-cell-height: calc(
+			var(--calendar-cell-core-size) + (var(--sveltely-padding-y) * 2.2)
+		);
 		--calendar-title-size: calc(var(--calendar-font-size) * 1.03);
 		--calendar-weekday-size: calc(var(--calendar-font-size) * 0.75);
 		font-size: var(--calendar-font-size);
@@ -188,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 {
@@ -205,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;
 	}
 
@@ -245,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 {
@@ -261,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;
 	}
@@ -275,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;
 	}
 
@@ -283,21 +288,20 @@
 		background: var(--sveltely-hover-color);
 	}
 
-	.calendar-day-empty {
+	.calendar-day-outside {
 		border-color: transparent;
 		background: transparent;
-		color: transparent;
-		cursor: default;
+		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/Divider/Divider.svelte

@@ -0,0 +1,10 @@
+<div class="divider" role="separator"></div>
+
+<style>
+	.divider {
+		width: var(--divider-width, 100%);
+		height: var(--divider-height, 1px);
+		align-self: var(--divider-align-self, auto);
+		background: var(--color-gray-200);
+	}
+</style>

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

@@ -0,0 +1,26 @@
+export default Divider;
+type Divider = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

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

@@ -0,0 +1 @@
+export { default } from './Divider.svelte';

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

@@ -0,0 +1 @@
+export { default } from './Divider.svelte';