@x33025/sveltely 0.1.17 → 0.1.19

package/dist/components/Library/ArticleEditor/{ArticleBlockParagraph.svelte → Blocks/Paragraph.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import TextEditor from '../TextEditor';
-	import type { BlockDraft } from './types.js';
+	import TextEditor from '../../TextEditor';
+	import type { BlockDraft } from '../types.js';
 
 	let {
 		block,
@@ -26,6 +26,7 @@
 </script>
 
 <TextEditor
+	as="paragraph"
 	autosize
 	rows={1}
 	value={block.text ?? ''}
@@ -74,6 +75,5 @@
 	{shouldFocus}
 	{focusPosition}
 	{onFocused}
-	className="text-[17px] leading-8 text-zinc-700 placeholder:text-zinc-300"
 	placeholder="Type something thoughtful..."
 />

package/dist/components/Library/ArticleEditor/{ArticleBlockFallback.svelte.d.ts → Blocks/Paragraph.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { BlockDraft } from './types.js';
+import type { BlockDraft } from '../types.js';
 type $$ComponentProps = {
     block: BlockDraft;
     onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
@@ -10,6 +10,6 @@ type $$ComponentProps = {
     focusPosition?: number | null;
     onFocused?: () => void;
 };
-declare const ArticleBlockFallback: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockFallback = ReturnType<typeof ArticleBlockFallback>;
-export default ArticleBlockFallback;
+declare const Paragraph: import("svelte").Component<$$ComponentProps, {}, "">;
+type Paragraph = ReturnType<typeof Paragraph>;
+export default Paragraph;

package/dist/components/Library/ArticleEditor/{ArticleBlockTable.svelte → Blocks/Table.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Plus, Trash2 } from '@lucide/svelte';
-	import type { BlockDraft } from './types.js';
+	import type { BlockDraft } from '../types.js';
 
 	let { block, onUpdateHeader, onUpdateCell, onAddColumn, onAddRow, onRemoveColumn, onRemoveRow } =
 		$props<{

package/dist/components/Library/ArticleEditor/{ArticleBlockTable.svelte.d.ts → Blocks/Table.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { BlockDraft } from './types.js';
+import type { BlockDraft } from '../types.js';
 type $$ComponentProps = {
     block: BlockDraft;
     onUpdateHeader: (blockID: string, cellIndex: number, value: string) => void;
@@ -8,6 +8,6 @@ type $$ComponentProps = {
     onRemoveColumn: (blockID: string, columnIndex: number) => void;
     onRemoveRow: (blockID: string, rowIndex: number) => void;
 };
-declare const ArticleBlockTable: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockTable = ReturnType<typeof ArticleBlockTable>;
-export default ArticleBlockTable;
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Library/ArticleEditor/Blocks/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Code } from './Code.svelte';
+export { default as FAQ } from './FAQ.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Image } from './Image.svelte';
+export { default as List } from './List.svelte';
+export { default as Paragraph } from './Paragraph.svelte';
+export { default as Table } from './Table.svelte';

package/dist/components/Library/ArticleEditor/Blocks/index.js

@@ -0,0 +1,7 @@
+export { default as Code } from './Code.svelte';
+export { default as FAQ } from './FAQ.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Image } from './Image.svelte';
+export { default as List } from './List.svelte';
+export { default as Paragraph } from './Paragraph.svelte';
+export { default as Table } from './Table.svelte';

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

@@ -1,18 +1,10 @@
 export { default as ArticleEditor } from './ArticleEditor.svelte';
 export { default as ArticleEditorBody } from './ArticleEditorBody.svelte';
-export { default as ArticleBlockCode } from './ArticleBlockCode.svelte';
-export { default as ArticleBlockFAQ } from './ArticleBlockFAQ.svelte';
-export { default as ArticleBlockFallback } from './ArticleBlockFallback.svelte';
-export { default as ArticleBlockHeading } from './ArticleBlockHeading.svelte';
-export { default as ArticleBlockImage } from './ArticleBlockImage.svelte';
 export { default as ArticleBlockInsertControl } from './ArticleBlockInsertControl.svelte';
 export { default as ArticleBlockDragControl } from './ArticleBlockDragControl.svelte';
-export { default as ArticleBlockList } from './ArticleBlockList.svelte';
-export { default as ArticleBlockParagraph } from './ArticleBlockParagraph.svelte';
 export { default as ArticleBlockShell } from './ArticleBlockShell.svelte';
-export { default as ArticleBlockTable } from './ArticleBlockTable.svelte';
+export * as Blocks from './Blocks';
 export { default as ArticleEditorHeader } from './ArticleEditorHeader.svelte';
-export { default as ArticleImagePreview } from './ArticleImagePreview.svelte';
 export { articleBlockLabel, createArticleEditor } from './articleEditor.svelte.js';
 export type { BlockInsertKind, BlockTextFormat } from './articleEditor.svelte.js';
 export type { ArticleBlock, ArticleEditorArticle, BlockDraft } from './types.js';

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

@@ -1,16 +1,8 @@
 export { default as ArticleEditor } from './ArticleEditor.svelte';
 export { default as ArticleEditorBody } from './ArticleEditorBody.svelte';
-export { default as ArticleBlockCode } from './ArticleBlockCode.svelte';
-export { default as ArticleBlockFAQ } from './ArticleBlockFAQ.svelte';
-export { default as ArticleBlockFallback } from './ArticleBlockFallback.svelte';
-export { default as ArticleBlockHeading } from './ArticleBlockHeading.svelte';
-export { default as ArticleBlockImage } from './ArticleBlockImage.svelte';
 export { default as ArticleBlockInsertControl } from './ArticleBlockInsertControl.svelte';
 export { default as ArticleBlockDragControl } from './ArticleBlockDragControl.svelte';
-export { default as ArticleBlockList } from './ArticleBlockList.svelte';
-export { default as ArticleBlockParagraph } from './ArticleBlockParagraph.svelte';
 export { default as ArticleBlockShell } from './ArticleBlockShell.svelte';
-export { default as ArticleBlockTable } from './ArticleBlockTable.svelte';
+export * as Blocks from './Blocks';
 export { default as ArticleEditorHeader } from './ArticleEditorHeader.svelte';
-export { default as ArticleImagePreview } from './ArticleImagePreview.svelte';
 export { articleBlockLabel, createArticleEditor } from './articleEditor.svelte.js';

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	export const demo = {
-		name: 'AsyncButton',
+		name: 'Async Button',
 		description: 'Async action button with loading and error states.'
 	};
 </script>
@@ -16,8 +16,4 @@
 	};
 </script>
 
-<AsyncButton
-	icon={SaveIcon}
-	label="Run async action"
-	action={runDemo}
-/>
+<AsyncButton icon={SaveIcon} label="Run async action" action={runDemo} />

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

@@ -2,10 +2,10 @@
 	import { CircleAlertIcon } from '@lucide/svelte';
 	import type { Component } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { tooltip } from '../../../actions/tooltip';
 	import Button from '../Button';
 	import Spinner from '../Spinner';
 	import { extractStyleProps, type StyleProps } from '../../../style/surface';
+	import type { TooltipProps } from '../../../style/tooltip';
 
 	type Props = {
 		icon?: Component<{ class?: string; size?: number | string }>;
@@ -19,6 +19,7 @@
 		iconSize?: number | string;
 		labelColor?: string;
 	} & StyleProps &
+		TooltipProps &
 		Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
 
 	let {
@@ -32,6 +33,7 @@
 		iconColor,
 		iconSize,
 		labelColor,
+		tooltip,
 		disabled = false,
 		type = 'button',
 		...restProps
@@ -48,9 +50,9 @@
 	const effectiveDisabled = $derived(disabled || (disableWhileLoading && effectiveLoading));
 	const buttonStyleProps = $derived({
 		...styleProps,
-		background: styleProps.background ?? 'var(--sveltely-active-color)',
-		borderColor: styleProps.borderColor ?? 'var(--sveltely-active-color)',
-		color: styleProps.color ?? 'var(--sveltely-background-color)'
+		background: styleProps.background ?? 'var(--sveltely-control-active-color)',
+		borderColor: styleProps.borderColor ?? 'var(--sveltely-control-active-color)',
+		color: styleProps.color ?? 'var(--sveltely-control-background-color)'
 	});
 
 	const handleClick = async () => {
@@ -81,6 +83,7 @@
 		if (error instanceof Error && error.message.trim().length > 0) return error.message;
 		return 'Something went wrong';
 	});
+	const resolvedTooltip = $derived(errorLabel ? { label: errorLabel } : tooltip);
 
 	const toRem = (value: number | string | undefined) =>
 		value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
@@ -106,10 +109,11 @@
 	});
 </script>
 
-<span use:tooltip={{ label: errorLabel ?? '', disabled: !errorLabel }} class="async-button">
+<span class="async-button">
 	<Button
 		{type}
 		{...buttonStyleProps}
+		tooltip={resolvedTooltip}
 		disabled={effectiveDisabled}
 		aria-busy={effectiveLoading}
 		aria-label={variant === 'iconOnly' ? label : undefined}

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

@@ -1,6 +1,7 @@
 import type { Component } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import { type StyleProps } from '../../../style/surface';
+import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     icon?: Component<{
         class?: string;
@@ -15,7 +16,7 @@ type Props = {
     iconColor?: string;
     iconSize?: number | string;
     labelColor?: string;
-} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
+} & StyleProps & TooltipProps & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
 declare const AsyncButton: Component<Props, {}, "error">;
 type AsyncButton = ReturnType<typeof AsyncButton>;
 export default AsyncButton;

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

@@ -1,27 +1,12 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Button',
-		description: 'Token-aware button primitive with composable content.',
-		columnSpan: 2
+		description: 'Basic button component.'
 	};
 </script>
 
 <script lang="ts">
-	import { SaveIcon } from '@lucide/svelte';
 	import Button from './Button.svelte';
-	import HStack from '../HStack';
 </script>
 
-<HStack align="center" gap={7.5}>
-	<Button label="Default" />
-	<Button
-		label="Solid"
-		background="var(--sveltely-active-color)"
-		borderColor="var(--sveltely-active-color)"
-		color="var(--sveltely-background-color)"
-	/>
-	<Button>
-		<SaveIcon />
-		<span>With icon</span>
-	</Button>
-</HStack>
+<Button label="Button" />

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

@@ -1,7 +1,6 @@
 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

@@ -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>