@x33025/sveltely 0.1.18 → 0.1.21

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

@@ -1,15 +1,25 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		children?: Snippet;
 		label?: string;
 	} & StyleProps &
+		TooltipProps &
 		Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
 
-	let { children, label, disabled = false, type = 'button', ...restProps }: Props = $props();
+	let {
+		children,
+		label,
+		tooltip,
+		disabled = false,
+		type = 'button',
+		...restProps
+	}: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -40,6 +50,7 @@
 	style={rootStyle}
 	{disabled}
 	{...props}
+	use:tooltipAction={tooltip}
 >
 	{#if children}
 		{@render children()}
@@ -55,8 +66,8 @@
 		--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, var(--sveltely-background-color));
-		color: var(--button-color, var(--sveltely-primary-color));
+		background: var(--button-background, var(--sveltely-control-background-color));
+		color: var(--button-color, var(--sveltely-text-primary-color));
 		gap: var(--button-gap, var(--sveltely-gap));
 		font-size: var(--button-font-size);
 		line-height: 1.25;
@@ -64,19 +75,7 @@
 			var(--button-padding-x, calc(var(--sveltely-padding-x) * var(--button-scale)));
 		transition:
 			color 150ms,
-			border-color 150ms,
-			background-color 150ms;
-	}
-
-	.button:hover {
-		background: var(
-			--button-hover-background,
-			color-mix(
-				in oklab,
-				var(--button-background, var(--sveltely-background-color)) 88%,
-				var(--button-color, var(--sveltely-primary-color))
-			)
-		);
+			border-color 150ms;
 	}
 
 	.button-icon-only {

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

@@ -1,10 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     children?: Snippet;
     label?: string;
-} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
+} & StyleProps & TooltipProps & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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(--sveltely-secondary-color);
-		--calendar-weekend-header-color: var(--sveltely-secondary-color);
-		--calendar-weekend-selected-color: var(--sveltely-background-color);
+		--calendar-weekend-color: var(--sveltely-text-secondary-color);
+		--calendar-weekend-header-color: var(--sveltely-text-secondary-color);
+		--calendar-weekend-selected-color: var(--sveltely-control-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(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 	}
 
 	.calendar-nav-button {
@@ -210,20 +210,19 @@
 		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(--sveltely-inactive-color));
+		background: color-mix(in oklab, white 92%, var(--sveltely-control-inactive-color));
 		padding: 0;
-		color: var(--sveltely-secondary-color);
-		cursor: pointer;
+		color: var(--sveltely-text-secondary-color);
 		appearance: none;
 	}
 
 	.calendar-nav-button:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-control-active-color) 24%, white);
 		outline-offset: 2px;
 	}
 
 	.calendar-nav-button:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.calendar-nav-icon {
@@ -250,7 +249,7 @@
 		font-size: var(--calendar-weekday-size);
 		line-height: 1;
 		text-align: center;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 	}
 
 	.calendar-weekday-weekend {
@@ -266,12 +265,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(--sveltely-inactive-color));
+		background: color-mix(in oklab, white 92%, var(--sveltely-control-inactive-color));
 		padding: 0;
 		font-size: calc(var(--calendar-font-size) * 0.85);
 		line-height: 1;
-		color: var(--sveltely-primary-color);
-		cursor: pointer;
+		color: var(--sveltely-text-primary-color);
 		appearance: none;
 	}
 
@@ -280,32 +278,24 @@
 	}
 
 	.calendar-day:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
+		outline: 2px solid color-mix(in oklab, var(--sveltely-control-active-color) 24%, white);
 		outline-offset: 2px;
 	}
 
-	.calendar-day:hover {
-		background: var(--sveltely-hover-color);
-	}
-
 	.calendar-day-outside {
 		border-color: transparent;
 		background: transparent;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 	}
 
 	.calendar-day-today {
-		border-color: color-mix(in oklab, var(--sveltely-active-color) 18%, white);
+		border-color: color-mix(in oklab, var(--sveltely-control-active-color) 18%, white);
 	}
 
 	.calendar-day-selected {
-		border-color: var(--sveltely-active-color);
-		background: var(--sveltely-active-color);
-		color: var(--sveltely-background-color);
-	}
-
-	.calendar-day-selected:hover {
-		background: var(--sveltely-active-hover-color);
+		border-color: var(--sveltely-control-active-color);
+		background: var(--sveltely-control-active-color);
+		color: var(--sveltely-control-background-color);
 	}
 
 	.calendar-day-selected.calendar-day-weekend {

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

@@ -7,14 +7,17 @@
 
 <script lang="ts">
 	import Checkbox from './Checkbox.svelte';
+	import Label from '../Label';
 
 	let notificationsEnabled = $state(true);
 	let weeklySummaryEnabled = $state(false);
 </script>
 
 <div class="vstack gap-3">
-	<Checkbox bind:checked={notificationsEnabled} label="Enable notifications" />
-	<Checkbox bind:checked={weeklySummaryEnabled}>
-		<span>Send weekly summary email</span>
-	</Checkbox>
+	<Label label="Enable notifications" orientation="leading" width="fit">
+		<Checkbox bind:checked={notificationsEnabled} />
+	</Label>
+	<Label label="Send weekly summary" orientation="leading" width="fit">
+		<Checkbox bind:checked={weeklySummaryEnabled} />
+	</Label>
 </div>

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

@@ -1,23 +1,17 @@
 <script lang="ts">
 	import { CheckIcon } from '@lucide/svelte';
-	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		checked?: boolean;
-		label?: string;
-		children?: Snippet;
 	} & StyleProps &
-		Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+		TooltipProps &
+		Omit<HTMLInputAttributes, 'type' | 'class' | 'style' | 'checked'>;
 
-	let {
-		checked = $bindable(false),
-		label,
-		children,
-		disabled = false,
-		...restProps
-	}: Props = $props();
+	let { checked = $bindable(false), tooltip, disabled = false, ...restProps }: Props = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
@@ -26,26 +20,15 @@
 </script>
 
 <label
-	class="checkbox inline-flex items-center"
+	class="checkbox"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
+	use:tooltipAction={tooltip}
 >
-	<span class="checkbox-control">
-		<input bind:checked type="checkbox" {disabled} {...props} />
-		<span class="checkbox-mark" aria-hidden="true">
-			<CheckIcon class="checkbox-icon" />
-		</span>
+	<input bind:checked type="checkbox" {disabled} {...props} />
+	<span class="checkbox-mark" aria-hidden="true">
+		<CheckIcon class="checkbox-icon" />
 	</span>
-
-	{#if children || label}
-		<span class="checkbox-label">
-			{#if children}
-				{@render children()}
-			{:else if label}
-				{label}
-			{/if}
-		</span>
-	{/if}
 </label>
 
 <style>
@@ -57,11 +40,12 @@
 				(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));
+		display: inline-block;
+		position: relative;
+		flex: 0 0 auto;
+		inline-size: var(--checkbox-box-size);
+		block-size: var(--checkbox-box-size);
 		font-size: var(--checkbox-font-size);
-		line-height: 1.25;
-		color: var(--checkbox-color, var(--sveltely-primary-color));
-		cursor: pointer;
 		user-select: none;
 	}
 
@@ -70,14 +54,7 @@
 		opacity: 0.5;
 	}
 
-	.checkbox-control {
-		position: relative;
-		flex: 0 0 auto;
-		inline-size: var(--checkbox-box-size);
-		block-size: var(--checkbox-box-size);
-	}
-
-	.checkbox-control input {
+	.checkbox input {
 		position: absolute;
 		inset: 0;
 		margin: 0;
@@ -90,34 +67,24 @@
 		block-size: 100%;
 		border: 1px solid var(--checkbox-border-color, var(--sveltely-border-color));
 		border-radius: var(--checkbox-border-radius, calc(var(--sveltely-border-radius) * 0.5));
-		background: var(--checkbox-background, var(--sveltely-inactive-color));
+		background: var(--checkbox-background, var(--sveltely-control-inactive-color));
 		color: transparent;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		transition:
 			color 150ms,
-			border-color 150ms,
-			background-color 150ms;
-	}
-
-	.checkbox:hover .checkbox-mark {
-		background: var(--checkbox-hover-background, var(--sveltely-inactive-hover-color));
+			border-color 150ms;
 	}
 
-	.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, var(--sveltely-background-color));
+	.checkbox input:checked + .checkbox-mark {
+		border-color: var(--checkbox-checked-border-color, var(--sveltely-control-active-color));
+		background: var(--checkbox-checked-background, var(--sveltely-control-active-color));
+		color: var(--checkbox-checked-color, var(--sveltely-control-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));
-	}
-
-	.checkbox-control input:focus-visible + .checkbox-mark {
-		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
+	.checkbox input:focus-visible + .checkbox-mark {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-control-active-color) 24%, white);
 		outline-offset: 2px;
 	}
 
@@ -126,8 +93,4 @@
 		width: var(--checkbox-icon-size);
 		height: var(--checkbox-icon-size);
 	}
-
-	.checkbox-label {
-		min-width: 0;
-	}
 </style>

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

@@ -1,11 +1,9 @@
-import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     checked?: boolean;
-    label?: string;
-    children?: Snippet;
-} & StyleProps & Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+} & StyleProps & TooltipProps & Omit<HTMLInputAttributes, 'type' | 'class' | 'style' | 'checked'>;
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'ChipInput',
+		name: 'Chip Input',
 		description: 'Editable chip list with bindable tags.'
 	};
 </script>
@@ -13,5 +13,5 @@
 
 <div class="vstack w-full max-w-sm gap-2">
 	<ChipInput bind:tags />
-	<p class="text-xs text-[var(--sveltely-secondary-color)]">Tags: {tags.join(', ')}</p>
+	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Tags: {tags.join(', ')}</p>
 </div>

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

@@ -2,7 +2,9 @@
 	import type { Snippet } from 'svelte';
 	import { tick } from 'svelte';
 	import { Plus } from '@lucide/svelte';
+	import { tooltip as tooltipAction } from '../../../actions/tooltip';
 	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		placeholder?: string;
@@ -11,6 +13,7 @@
 		disabled?: boolean;
 		action?: Snippet;
 	} & StyleProps &
+		TooltipProps &
 		Record<string, unknown>;
 
 	let {
@@ -19,6 +22,7 @@
 		selection = $bindable<string[] | undefined>(),
 		disabled = false,
 		action,
+		tooltip,
 		...restProps
 	}: Props = $props();
 
@@ -248,6 +252,7 @@
 	style={rootStyle}
 	class:chip-input-disabled={disabled}
 	aria-disabled={disabled}
+	use:tooltipAction={tooltip}
 	{...props}
 >
 	{#each tags as tag, index (tag)}
@@ -332,7 +337,7 @@
 		box-sizing: border-box;
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
-		background: var(--sveltely-inactive-color);
+		background: var(--sveltely-control-inactive-color);
 		color: black;
 		min-height: var(--chip-input-control-height);
 		padding: var(--chip-input-padding-y) var(--chip-input-padding-x);
@@ -345,13 +350,8 @@
 		border-color: var(--sveltely-border-color);
 	}
 
-	.chip:hover,
 	.chip-hovered {
-		background: var(--sveltely-hover-color);
-	}
-
-	.chip-input-field:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.chip-input-disabled {
@@ -363,10 +363,6 @@
 		opacity: 0.5;
 	}
 
-	.chip-input-disabled .chip:hover {
-		background: var(--sveltely-hover-color);
-	}
-
 	.chip-input-action {
 		padding: 0;
 		width: var(--chip-input-control-height);

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

@@ -1,12 +1,13 @@
 import type { Snippet } from 'svelte';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     placeholder?: string;
     tags: string[];
     selection?: string[];
     disabled?: boolean;
     action?: Snippet;
-} & StyleProps & Record<string, unknown>;
-declare const ChipInput: import("svelte").Component<Props, {}, "tags" | "selection">;
+} & StyleProps & TooltipProps & Record<string, unknown>;
+declare const ChipInput: import("svelte").Component<Props, {}, "selection" | "tags">;
 type ChipInput = ReturnType<typeof ChipInput>;
 export default ChipInput;

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

@@ -50,7 +50,7 @@
 	}
 
 	.dropdown-action:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.dropdown-action:disabled {

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

@@ -89,7 +89,7 @@
 
 <div class="grid w-full gap-4 md:grid-cols-2">
 	<div class="vstack gap-2">
-		<p class="text-sm font-medium text-[var(--sveltely-primary-color)]">Default trigger</p>
+		<p class="text-sm font-medium text-[var(--sveltely-text-primary-color)]">Default trigger</p>
 		<Dropdown bind:value={status} placeholder="Choose status" selectedLabel={selectedStatusLabel}>
 			<Dropdown.Section label="Publishing">
 				<Dropdown.Item value="draft">Draft</Dropdown.Item>
@@ -103,13 +103,13 @@
 				<Dropdown.Item value="private" disabled>Private</Dropdown.Item>
 			</Dropdown.Section>
 		</Dropdown>
-		<p class="text-xs text-[var(--sveltely-secondary-color)]">
+		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
 			Selected: {selectedStatusLabel ?? 'none'}
 		</p>
 	</div>
 
 	<div class="vstack gap-2">
-		<p class="text-sm font-medium text-[var(--sveltely-primary-color)]">
+		<p class="text-sm font-medium text-[var(--sveltely-text-primary-color)]">
 			Custom trigger and rich rows
 		</p>
 		<Dropdown
@@ -121,17 +121,17 @@
 				<Dropdown.Trigger>
 					{#if selectedWebsite}
 						<span class="hstack min-w-0 items-center gap-2">
-							<span class="truncate text-[var(--sveltely-primary-color)]"
+							<span class="truncate text-[var(--sveltely-text-primary-color)]"
 								>{selectedWebsite.name}</span
 							>
 							{#if selectedWebsite.domain}
-								<span class="truncate text-xs text-[var(--sveltely-secondary-color)]">
+								<span class="truncate text-xs text-[var(--sveltely-text-secondary-color)]">
 									{selectedWebsite.domain}
 								</span>
 							{/if}
 						</span>
 					{:else}
-						<span class="text-[var(--sveltely-secondary-color)]">Select website</span>
+						<span class="text-[var(--sveltely-text-secondary-color)]">Select website</span>
 					{/if}
 				</Dropdown.Trigger>
 			{/snippet}
@@ -148,7 +148,7 @@
 			</Dropdown.Item>
 			<Dropdown.Section label="Websites">
 				{#if filteredWebsites.length === 0}
-					<div class="px-2 py-1 text-sm text-[var(--sveltely-secondary-color)]">
+					<div class="px-2 py-1 text-sm text-[var(--sveltely-text-secondary-color)]">
 						No websites found.
 					</div>
 				{:else}
@@ -166,7 +166,7 @@
 											<div class="vstack min-w-0 gap-0.5">
 												<span class="truncate">{website.name}</span>
 												{#if website.domain}
-													<span class="truncate text-xs text-[var(--sveltely-secondary-color)]"
+													<span class="truncate text-xs text-[var(--sveltely-text-secondary-color)]"
 														>{website.domain}</span
 													>
 												{/if}
@@ -174,7 +174,7 @@
 											{#if selected}
 												<CheckIcon
 													size={14}
-													class="shrink-0 text-[var(--sveltely-primary-color)]"
+													class="shrink-0 text-[var(--sveltely-text-primary-color)]"
 												/>
 											{/if}
 										{/snippet}
@@ -186,6 +186,6 @@
 				{/if}
 			</Dropdown.Section>
 		</Dropdown>
-		<p class="text-xs text-[var(--sveltely-secondary-color)]">Actions clicked: {actionCount}</p>
+		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Actions clicked: {actionCount}</p>
 	</div>
 </div>

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

@@ -121,7 +121,7 @@
 				onclick={triggerState.toggle}
 			>
 				<span class="dropdown-trigger-label">{triggerState.selectedLabel}</span>
-				<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
+				<ChevronDownIcon class="size-4 text-[var(--sveltely-text-secondary-color)]" />
 			</button>
 		{/if}
 	{/snippet}
@@ -151,7 +151,7 @@
 		border: 1px solid var(--sveltely-border-color);
 		border-radius: var(--sveltely-border-radius);
 		background: var(--sveltely-background-color);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
@@ -174,10 +174,6 @@
 		flex: 0 0 auto;
 	}
 
-	.dropdown-trigger:hover {
-		background: var(--sveltely-hover-color);
-	}
-
 	.dropdown-content {
 		--dropdown-item-padding-x: calc(var(--sveltely-padding-x) * 0.67);
 		--dropdown-item-padding-y: calc(var(--sveltely-padding-y) * 0.33);

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

@@ -41,7 +41,7 @@
 		})}
 	{/if}
 	{#if resolvedShowCheck && selected}
-		<CheckIcon class="dropdown-item-check size-4 text-[var(--sveltely-primary-color)]" />
+		<CheckIcon class="dropdown-item-check size-4 text-[var(--sveltely-text-primary-color)]" />
 	{/if}
 </button>
 
@@ -58,7 +58,7 @@
 	}
 
 	.dropdown-item:hover {
-		background: var(--sveltely-hover-color);
+		background: color-mix(in oklab, var(--sveltely-control-active-color) 5%, transparent);
 	}
 
 	.dropdown-item:disabled {

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

@@ -26,7 +26,7 @@
 	.dropdown-section-label {
 		padding-inline: 0.25rem;
 		padding-top: 0.25rem;
-		color: var(--sveltely-secondary-color);
+		color: var(--sveltely-text-secondary-color);
 		font-size: 0.75rem;
 		line-height: 1rem;
 		font-weight: 500;

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

@@ -29,7 +29,7 @@
 			{dropdown.selectedLabel}
 		{/if}
 	</span>
-	<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
+	<ChevronDownIcon class="size-4 text-[var(--sveltely-text-secondary-color)]" />
 </button>
 
 <style>
@@ -40,8 +40,8 @@
 		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);
+		background: var(--sveltely-control-background-color);
+		color: var(--sveltely-text-primary-color);
 		gap: var(--sveltely-gap);
 		padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
 		font-size: 0.875rem;
@@ -64,8 +64,4 @@
 	.dropdown-trigger :global(svg) {
 		flex: 0 0 auto;
 	}
-
-	.dropdown-trigger:hover {
-		background: var(--sveltely-hover-color);
-	}
 </style>

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

@@ -1,7 +1,7 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Image',
-		description: 'Responsive image display with generated placeholder and busy states.'
+		description: 'Responsive image display with icon placeholder and busy states.'
 	};
 </script>
 
@@ -13,6 +13,6 @@
 	src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=600&q=80"
 	alt="Red sneaker"
 	fit="cover"
-	class="aspect-square"
+	aspectRatio="1 / 1"
 />
-<Image busy placeholderKey="image-demo-loading" class="aspect-square" />
+<Image busy aspectRatio="1 / 1" />