@x33025/sveltely 0.0.40 → 0.0.42

package/dist/components/ChipInput.svelte

@@ -233,8 +233,8 @@
 
 <div
 	bind:this={rootEl}
-	class="chip-row flex w-full flex-wrap items-center"
-	class:chip-disabled={disabled}
+	class="chip-input hstack w-full flex-wrap items-center"
+	class:chip-input-disabled={disabled}
 	aria-disabled={disabled}
 >
 	{#each tags as tag, index (tag)}
@@ -243,7 +243,7 @@
 				bind:this={editingEl}
 				bind:value={editingValue}
 				size={Math.max(editingValue.length, 1)}
-				class="chip-surface chip-input-field outline-none"
+				class="chip chip-input-field outline-none"
 				{disabled}
 				onblur={() => commitEdit('blur', tag)}
 				onkeydown={(event) => onEditKeydown(event, tag)}
@@ -251,7 +251,7 @@
 		{:else if selectionEnabled}
 			<button
 				type="button"
-				class="chip-surface inline-flex items-center gap-2"
+				class="chip inline-flex items-center gap-2"
 				class:chip-selected={selection?.includes(tag)}
 				class:chip-hovered={isPointerSelecting && dragHoverIndex === index}
 				onpointerdown={(event) => beginRangeSelection(event, index)}
@@ -266,7 +266,7 @@
 		{:else}
 			<button
 				type="button"
-				class="chip-surface inline-flex items-center gap-2"
+				class="chip inline-flex items-center gap-2"
 				{disabled}
 				ondblclick={() => startEditing(tag)}>{tag}</button
 			>
@@ -278,7 +278,7 @@
 			bind:this={inputEl}
 			bind:value={inputValue}
 			size={Math.max(inputValue.length, placeholder.length, 1)}
-			class="chip-surface chip-input-field outline-none"
+			class="chip chip-input-field outline-none"
 			{placeholder}
 			{disabled}
 			onkeydown={onKeydown}
@@ -287,12 +287,12 @@
 	{:else}
 		<button
 			type="button"
-			class="chip-surface chip-input-action inline-flex items-center justify-center font-semibold"
+			class="chip chip-input-action inline-flex items-center justify-center font-semibold"
 			aria-label="Add tag"
 			{disabled}
 			onclick={openInput}
 		>
-			<Plus style="width: var(--chip-input-font-size); height: var(--chip-input-font-size);" />
+			<Plus class="size-3" />
 		</button>
 	{/if}
 
@@ -300,48 +300,3 @@
 		{@render action()}
 	{/if}
 </div>
-
-<style>
-	.chip-row {
-		gap: var(--chip-input-gap);
-	}
-
-	.chip-surface {
-		background: var(--chip-input-background);
-		color: var(--chip-input-text);
-		font-size: var(--chip-input-font-size);
-		border-radius: var(--chip-input-border-radius);
-		padding: var(--chip-input-padding);
-		border: 1px solid var(--chip-input-border-color);
-		white-space: nowrap;
-	}
-
-	.chip-selected {
-		border-color: var(--chip-input-highlight);
-	}
-
-	.chip-surface:hover {
-		background: var(--chip-input-hover);
-	}
-
-	.chip-hovered {
-		background: var(--chip-input-hover);
-	}
-
-	.chip-input-field:hover {
-		background: var(--chip-input-background);
-	}
-
-	.chip-disabled .chip-surface {
-		cursor: not-allowed;
-		opacity: 0.55;
-	}
-
-	.chip-disabled {
-		pointer-events: none;
-	}
-
-	.chip-disabled .chip-surface:hover {
-		background: var(--chip-input-background);
-	}
-</style>

package/dist/components/Dropdown/Dropdown.svelte

@@ -187,7 +187,7 @@
 	function handleOutsideClick(event: MouseEvent) {
 		if (!isOpen) return;
 		const target = event.target as HTMLElement;
-		if (target.closest('.dropdown-container') || target.closest('.dropdown-menu')) return;
+		if (target.closest('[data-dropdown-root]') || target.closest('[data-dropdown]')) return;
 		close();
 	}
 
@@ -230,7 +230,7 @@
 	onmousemove={handlePointerMove}
 />
 
-<div class="dropdown-container relative inline-block text-left {className}">
+<div class="relative inline-block text-left {className}" data-dropdown-root>
 	<div bind:this={triggerEl}>
 		<button
 			type="button"
@@ -246,21 +246,16 @@
 	{#if isOpen}
 		<div
 			use:portalContent
-			class="dropdown-menu fixed z-50 border border-gray-200 focus:outline-none"
+			class="dropdown fixed z-50 overflow-auto focus:outline-none"
+			data-dropdown
 			style="top: {menuCoords.top}px; left: {menuCoords.left}px; transform: {menuTransform}; border-radius: {computedMenuRadius ??
-				'var(--dropdown-border-radius)'}; background: var(--dropdown-background); box-shadow: var(--dropdown-shadow);"
+				'0.375rem'};"
 			role="menu"
 			aria-orientation="vertical"
 			tabindex="-1"
 			bind:this={menuEl}
 		>
-			<div
-				class="overflow-auto"
-				style="padding: var(--dropdown-content-padding);"
-				role="none"
-				onclick={handleSelect}
-				bind:this={contentEl}
-			>
+			<div role="none" onclick={handleSelect} bind:this={contentEl}>
 				{@render children()}
 			</div>
 		</div>

package/dist/components/NavigationStack/SidebarToggle.svelte

@@ -25,11 +25,7 @@
 	}
 </script>
 
-<button
-	onclick={handleClick}
-	class="rounded p-1.5 hover:bg-zinc-100 {className}"
-	title="Toggle {side} sidebar"
->
+<button onclick={handleClick} class="sidebar-toggle {className}" title="Toggle {side} sidebar">
 	{#if children}
 		{@render children()}
 	{:else if side === 'left'}

package/dist/components/Pagination.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import {
-		ArrowLeftIcon,
-		ArrowRightIcon,
+		ChevronLeftIcon,
+		ChevronRightIcon,
 		ChevronsLeftIcon,
 		ChevronsRightIcon
 	} from '@lucide/svelte';
@@ -41,6 +41,11 @@
 	const maxPage = () => Math.max(1, data.totalPages);
 	const safePage = () => Math.min(Math.max(data.page, 1), maxPage());
 	const hasNext = () => (typeof data.hasNext === 'boolean' ? data.hasNext : safePage() < maxPage());
+	const hasPrevious = () => safePage() > 1;
+	const buttonClass = () =>
+		`pagination-button action disabled:bg-zinc-200 disabled:text-zinc-500 inline-flex items-center justify-center leading-none ${
+			styleMode === 'icon' ? 'h-8 w-8 p-0' : 'padding-sm'
+		}`;
 
 	const goToPage = (targetPage: number) => {
 		const clamped = clampedPage(targetPage);
@@ -67,55 +72,37 @@
 	};
 </script>
 
-<div class={`hstack items-center ${className}`} style="gap: var(--pagination-gap);">
+<div class={`pagination hstack items-center ${className}`}>
 	{#if showFirstLast}
-		{#if safePage() > 1}
-			<button
-				type="button"
-				class="pagination-button action padding-sm"
-				onclick={() => goToPage(1)}
-				aria-label="First page"
-			>
-				{#if styleMode === 'icon'}
-					<ChevronsLeftIcon class="size-4" />
-				{:else}
-					First
-				{/if}
-			</button>
-		{:else}
-			<span class="pagination-button action padding-sm bg-zinc-400">
-				{#if styleMode === 'icon'}
-					<ChevronsLeftIcon class="size-4" />
-				{:else}
-					First
-				{/if}
-			</span>
-		{/if}
-	{/if}
-
-	{#if safePage() > 1}
 		<button
 			type="button"
-			class="pagination-button action padding-sm"
-			onclick={() => goToPage(safePage() - 1)}
-			aria-label="Previous page"
+			class={buttonClass()}
+			onclick={() => goToPage(1)}
+			aria-label="First page"
+			disabled={!hasPrevious()}
 		>
 			{#if styleMode === 'icon'}
-				<ArrowLeftIcon class="size-4" />
+				<ChevronsLeftIcon class="size-4 -translate-x-px" />
 			{:else}
-				Previous
+				First
 			{/if}
 		</button>
-	{:else}
-		<span class="pagination-button action padding-sm bg-zinc-400">
-			{#if styleMode === 'icon'}
-				<ArrowLeftIcon class="size-4" />
-			{:else}
-				Previous
-			{/if}
-		</span>
 	{/if}
 
+	<button
+		type="button"
+		class={buttonClass()}
+		onclick={() => goToPage(safePage() - 1)}
+		aria-label="Previous page"
+		disabled={!hasPrevious()}
+	>
+		{#if styleMode === 'icon'}
+			<ChevronLeftIcon class="size-4 -translate-x-px" />
+		{:else}
+			Previous
+		{/if}
+	</button>
+
 	<span>Page</span>
 
 	<form method="GET" style="display: inline;" novalidate onsubmit={handleSubmit}>
@@ -125,51 +112,33 @@
 
 	<span>of {maxPage()}</span>
 
-	{#if hasNext()}
+	<button
+		type="button"
+		class={buttonClass()}
+		onclick={() => goToPage(safePage() + 1)}
+		aria-label="Next page"
+		disabled={!hasNext()}
+	>
+		{#if styleMode === 'icon'}
+			<ChevronRightIcon class="size-4 translate-x-px" />
+		{:else}
+			Next
+		{/if}
+	</button>
+
+	{#if showFirstLast}
 		<button
 			type="button"
-			class="pagination-button action padding-sm"
-			onclick={() => goToPage(safePage() + 1)}
-			aria-label="Next page"
+			class={buttonClass()}
+			onclick={() => goToPage(maxPage())}
+			aria-label="Last page"
+			disabled={!hasNext()}
 		>
 			{#if styleMode === 'icon'}
-				<ArrowRightIcon class="size-4" />
+				<ChevronsRightIcon class="size-4 translate-x-px" />
 			{:else}
-				Next
+				Last
 			{/if}
 		</button>
-	{:else}
-		<span class="pagination-button action padding-sm bg-zinc-400">
-			{#if styleMode === 'icon'}
-				<ArrowRightIcon class="size-4" />
-			{:else}
-				Next
-			{/if}
-		</span>
-	{/if}
-
-	{#if showFirstLast}
-		{#if hasNext()}
-			<button
-				type="button"
-				class="pagination-button action padding-sm"
-				onclick={() => goToPage(maxPage())}
-				aria-label="Last page"
-			>
-				{#if styleMode === 'icon'}
-					<ChevronsRightIcon class="size-4" />
-				{:else}
-					Last
-				{/if}
-			</button>
-		{:else}
-			<span class="pagination-button action padding-sm bg-zinc-400">
-				{#if styleMode === 'icon'}
-					<ChevronsRightIcon class="size-4" />
-				{:else}
-					Last
-				{/if}
-			</span>
-		{/if}
 	{/if}
 </div>

package/dist/components/SegmentedPicker.svelte

@@ -18,35 +18,17 @@
 </script>
 
 <div
-	class={`hstack w-fit ${className}`}
-	style="
-		padding: var(--segmented-picker-outer-padding);
-		border-radius: var(--segmented-picker-border-radius);
-		background: var(--segmented-picker-background);
-		gap: var(--segmented-picker-item-gap);
-		opacity: {disabled ? '0.5' : '1'};
-		filter: {disabled ? 'grayscale(1)' : 'none'};
-	"
+	class={`segmented-picker hstack w-fit ${className}`}
+	class:segmented-picker-disabled={disabled}
 >
 	{#each options as option}
 		{#if option.value === value}
-			<span
-				class=""
-				style="
-					padding: var(--segmented-picker-inner-padding);
-					border-radius: var(--segmented-picker-inner-border-radius);
-					background: var(--segmented-picker-active-background);
-					box-shadow: var(--segmented-picker-active-shadow);
-				">{option.label}</span
-			>
+			<span class="segmented-picker-button segmented-picker-button-active">{option.label}</span>
 		{:else}
 			<button
 				type="button"
 				{disabled}
-				style="
-					padding: var(--segmented-picker-inner-padding);
-					border-radius: var(--segmented-picker-inner-border-radius);
-				"
+				class="segmented-picker-button"
 				onclick={() => {
 					if (disabled) return;
 					value = option.value;

package/dist/components/Sheet/Sheet.svelte

@@ -40,18 +40,17 @@
 		<button
 			type="button"
 			aria-label="Close dialog"
-			class="absolute inset-0"
-			style="background: var(--sheet-overlay); backdrop-filter: blur(var(--sheet-blur));"
+			class="sheet-overlay absolute inset-0"
 			onclick={close}
 		></button>
 		<div
 			role="dialog"
 			aria-modal="true"
 			aria-label={label}
-			style={`border-radius: var(--sheet-border-radius); box-shadow: var(--sheet-shadow); max-width: ${maxWidth};`}
-			class="relative z-10 flex max-h-full w-full flex-col overflow-hidden bg-[var(--sheet-background)] ring-1 ring-[var(--sheet-border-color)] {className}"
+			style={`max-width: ${maxWidth};`}
+			class="sheet relative z-10 flex max-h-full w-full flex-col overflow-auto {className}"
 		>
-			<div class="flex-1 overflow-auto" style="padding: var(--sheet-content-padding);">
+			<div class="flex-1">
 				{#if children}
 					{@render children()}
 				{/if}

package/dist/components/Slider.svelte

@@ -45,70 +45,3 @@
 	style={sliderStyle}
 	{...props}
 />
-
-<style>
-	.slider {
-		appearance: none;
-		height: 6px;
-		border-radius: 9999px;
-		background: transparent;
-		outline: none;
-		cursor: pointer;
-	}
-
-	.slider:focus-visible {
-		outline: 2px solid color-mix(in oklab, var(--color-gray-900) 35%, white);
-		outline-offset: 4px;
-	}
-
-	.slider:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.slider::-webkit-slider-runnable-track {
-		height: 6px;
-		border-radius: 9999px;
-		background: linear-gradient(
-			to right,
-			var(--slider-fill) 0%,
-			var(--slider-fill) var(--slider-pct),
-			var(--slider-track) var(--slider-pct),
-			var(--slider-track) 100%
-		);
-	}
-
-	.slider::-webkit-slider-thumb {
-		appearance: none;
-		width: 16px;
-		height: 16px;
-		border-radius: 9999px;
-		border: 2px solid var(--slider-thumb-outer);
-		background: var(--slider-thumb-inner);
-		box-shadow: var(--slider-shadow);
-		margin-top: -5px;
-	}
-
-	.slider::-moz-range-track {
-		height: 6px;
-		border: none;
-		border-radius: 9999px;
-		background: var(--slider-track);
-	}
-
-	.slider::-moz-range-progress {
-		height: 6px;
-		border: none;
-		border-radius: 9999px;
-		background: var(--slider-fill);
-	}
-
-	.slider::-moz-range-thumb {
-		width: 16px;
-		height: 16px;
-		border-radius: 9999px;
-		border: 2px solid var(--slider-thumb-outer);
-		background: var(--slider-thumb-inner);
-		box-shadow: var(--slider-shadow);
-	}
-</style>

package/dist/components/Tooltip.svelte

@@ -13,51 +13,15 @@
 	> = $props();
 </script>
 
-<span class="tooltip {className}" aria-label={!disabled ? label : undefined} {...props}>
+<span
+	class="tooltip-trigger relative inline-flex items-center {className}"
+	aria-label={!disabled ? label : undefined}
+	{...props}
+>
 	{@render children()}
 	{#if !disabled}
-		<span class="tooltip-content" role="tooltip">{label}</span>
+		<span class="tooltip" role="tooltip">
+			{label}
+		</span>
 	{/if}
 </span>
-
-<style>
-	.tooltip {
-		position: relative;
-		display: inline-flex;
-		align-items: center;
-	}
-
-	.tooltip-content {
-		position: absolute;
-		left: 50%;
-		bottom: calc(100% + 6px);
-		transform: translateX(-50%);
-		padding: var(--tooltip-padding);
-		border-radius: var(--tooltip-border-radius);
-		background: var(--tooltip-background);
-		color: var(--tooltip-text);
-		font-size: var(--tooltip-font-size);
-		white-space: nowrap;
-		opacity: 0;
-		pointer-events: none;
-		z-index: 10;
-	}
-
-	.tooltip-content::after {
-		content: '';
-		position: absolute;
-		top: calc(100% - 5px);
-		left: 50%;
-		width: 10px;
-		height: 10px;
-		transform: translateX(-50%) rotate(45deg);
-		background: var(--tooltip-background);
-		border-radius: 0;
-		border-bottom-right-radius: calc(var(--tooltip-border-radius) / 2);
-	}
-
-	.tooltip:hover .tooltip-content,
-	.tooltip:focus-within .tooltip-content {
-		opacity: 1;
-	}
-</style>