@x33025/sveltely 0.0.41 → 0.0.43

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

@@ -113,11 +113,8 @@
 		const itemRadius = parsePx(itemStyle.borderTopLeftRadius);
 		const effectiveItemRadius = Math.min(itemRadius, itemRect.height / 2, itemRect.width / 2);
 
-		const contentStyle = getComputedStyle(contentEl);
-		const contentPadding = Math.min(
-			parsePx(contentStyle.paddingTop),
-			parsePx(contentStyle.paddingLeft)
-		);
+		const menuStyle = getComputedStyle(menuEl);
+		const contentPadding = Math.min(parsePx(menuStyle.paddingTop), parsePx(menuStyle.paddingLeft));
 
 		const menuRect = menuEl.getBoundingClientRect();
 		const outerRadius = Math.min(
@@ -187,7 +184,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 +227,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 +243,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/Pagination.svelte

@@ -72,7 +72,7 @@
 	};
 </script>
 
-<div class={`hstack items-center ${className}`} style="gap: var(--pagination-gap);">
+<div class={`pagination hstack items-center ${className}`}>
 	{#if showFirstLast}
 		<button
 			type="button"
@@ -82,7 +82,7 @@
 			disabled={!hasPrevious()}
 		>
 			{#if styleMode === 'icon'}
-				<ChevronsLeftIcon class="size-4" />
+				<ChevronsLeftIcon class="size-4 -translate-x-px" />
 			{:else}
 				First
 			{/if}
@@ -97,7 +97,7 @@
 		disabled={!hasPrevious()}
 	>
 		{#if styleMode === 'icon'}
-			<ChevronLeftIcon class="size-4" />
+			<ChevronLeftIcon class="size-4 -translate-x-px" />
 		{:else}
 			Previous
 		{/if}
@@ -120,7 +120,7 @@
 		disabled={!hasNext()}
 	>
 		{#if styleMode === 'icon'}
-			<ChevronRightIcon class="size-4" />
+			<ChevronRightIcon class="size-4 translate-x-px" />
 		{:else}
 			Next
 		{/if}
@@ -135,7 +135,7 @@
 			disabled={!hasNext()}
 		>
 			{#if styleMode === 'icon'}
-				<ChevronsRightIcon class="size-4" />
+				<ChevronsRightIcon class="size-4 translate-x-px" />
 			{:else}
 				Last
 			{/if}

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>

package/dist/style/index.css

@@ -31,93 +31,194 @@
 	.divider {
 		@apply bg-gray-200/70;
 	}
+}
 
-	.chip-input-action {
-		width: calc(var(--chip-input-font-size) + 16px);
-		height: calc(var(--chip-input-font-size) + 16px);
-		padding: 0;
+@layer components {
+	.chip-input {
+		@apply gap-1;
 	}
 
-	.dropdown-item {
-		border-radius: var(--dropdown-item-border-radius);
+	.chip {
+		@apply rounded-full border border-transparent bg-zinc-100 px-2 py-1 text-xs whitespace-nowrap text-black;
 	}
 
-	.dropdown-item:hover {
-		background: var(--dropdown-item-highlight);
+	.chip-selected {
+		@apply border-zinc-300;
+	}
+
+	.chip:hover,
+	.chip-hovered {
+		@apply bg-zinc-200;
+	}
+
+	.chip-input-field:hover {
+		@apply bg-zinc-100;
+	}
+
+	.chip-input-disabled {
+		@apply pointer-events-none;
+	}
+
+	.chip-input-disabled .chip {
+		@apply cursor-not-allowed opacity-50;
+	}
+
+	.chip-input-disabled .chip:hover {
+		@apply bg-zinc-100;
+	}
+
+	.chip-input-action {
+		@apply h-7 w-7 p-0;
 	}
 
 	.pagination-button {
-		@apply rounded-full bg-zinc-100 p-1;
+		@apply rounded bg-zinc-100 p-2;
 	}
 
 	.pagination-button:disabled {
-		@apply cursor-not-allowed rounded-full p-1 opacity-50;
+		@apply cursor-not-allowed opacity-50;
 	}
 
 	.pagination-input {
-		@apply w-[10ch] rounded-full bg-zinc-100 px-3 py-1 outline-none;
+		@apply rounded bg-zinc-100 px-3 py-1 outline-none;
+	}
+
+	.pagination {
+		@apply gap-4;
 	}
 
 	.sidebar-toggle {
 		@apply rounded p-1.5 hover:bg-zinc-100;
 	}
-}
 
-@layer theme {
-	:root {
-		--sheet-border-radius: var(--radius-md);
-		--sheet-content-padding: calc(var(--spacing) * 4);
-
-		--sheet-background: var(--color-white);
-		--sheet-border-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
-		--sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
-		--sheet-blur: var(--blur-sm);
-		--sheet-shadow: var(--shadow-md);
-
-		--dropdown-content-padding: calc(var(--spacing));
-		--dropdown-item-border-radius: var(--radius-md);
-		--dropdown-border-radius: var(--radius-md);
-		--dropdown-background: var(--color-white);
-		--dropdown-shadow: var(--shadow-md);
-		--dropdown-item-highlight: var(--color-zinc-100);
-
-		--tooltip-border-radius: var(--radius-sm);
-		--tooltip-padding: 4px 8px;
-		--tooltip-font-size: 12px;
-		--tooltip-background: var(--color-black);
-		--tooltip-text: var(--color-white);
-
-		--slider-shadow: var(--shadow-md);
-		--slider-track: var(--color-zinc-300);
-		--slider-fill: var(--color-zinc-900);
-		--slider-thumb-inner: var(--color-zinc-900);
-		--slider-thumb-outer: var(--color-white);
+	.dropdown {
+		@apply rounded-md border border-gray-200 bg-white p-1 shadow-md;
+	}
 
-		--navigation-stack-sidebar-width: 16rem;
+	.dropdown-item {
+		@apply rounded-md;
+	}
+
+	.dropdown-item:hover {
+		@apply bg-zinc-100;
+	}
+
+	.sheet {
+		@apply rounded-md bg-white p-4 shadow-md;
+	}
+
+	.sheet-overlay {
+		@apply bg-black/20 backdrop-blur-sm;
+	}
 
-		--segmented-picker-outer-padding: calc(var(--spacing));
-		--segmented-picker-inner-padding: 4px 10px;
-		--segmented-picker-border-radius: var(--radius-md);
-		--segmented-picker-background: var(--color-zinc-100);
-		--segmented-picker-active-background: var(--color-white);
-		--segmented-picker-active-shadow: var(--shadow-xs);
-		--segmented-picker-item-gap: var(--spacing);
-		--segmented-picker-inner-border-radius: max(
-			0px,
-			calc(var(--segmented-picker-border-radius) - var(--segmented-picker-outer-padding))
+	.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(--color-zinc-900) 0%,
+			var(--color-zinc-900) var(--slider-pct),
+			var(--color-zinc-300) var(--slider-pct),
+			var(--color-zinc-300) 100%
 		);
+	}
+
+	.slider::-webkit-slider-thumb {
+		appearance: none;
+		width: 16px;
+		height: 16px;
+		border-radius: 9999px;
+		border: 2px solid var(--color-white);
+		background: var(--color-zinc-900);
+		box-shadow: var(--shadow-md);
+		margin-top: -5px;
+	}
+
+	.slider::-moz-range-track {
+		height: 6px;
+		border: none;
+		border-radius: 9999px;
+		background: var(--color-zinc-300);
+	}
+
+	.slider::-moz-range-progress {
+		height: 6px;
+		border: none;
+		border-radius: 9999px;
+		background: var(--color-zinc-900);
+	}
+
+	.slider::-moz-range-thumb {
+		width: 16px;
+		height: 16px;
+		border-radius: 9999px;
+		border: 2px solid var(--color-white);
+		background: var(--color-zinc-900);
+		box-shadow: var(--shadow-md);
+	}
+
+	.tooltip {
+		@apply pointer-events-none absolute bottom-[calc(100%+6px)] left-1/2 z-10 -translate-x-1/2 rounded-sm bg-black px-2 py-1 text-xs whitespace-nowrap text-white opacity-0;
+	}
 
-		--chip-input-gap: var(--spacing);
-		--chip-input-padding: 4px 8px;
-		--chip-input-background: var(--color-zinc-100);
-		--chip-input-hover: var(--color-zinc-200);
-		--chip-input-text: var(--color-black);
-		--chip-input-font-size: 12px;
-		--chip-input-border-radius: 9999px;
-		--chip-input-border-color: transparent;
-		--chip-input-highlight: var(--color-zinc-300);
-
-		--pagination-gap: calc(var(--spacing) * 4);
+	.tooltip-trigger:hover .tooltip,
+	.tooltip-trigger:focus-within .tooltip {
+		@apply opacity-100;
+	}
+
+	.tooltip::before {
+		content: '';
+		position: absolute;
+		top: calc(100% - 5px);
+		left: 50%;
+		width: 10px;
+		height: 10px;
+		transform: translateX(-50%) rotate(45deg);
+		background: #000;
+		border-radius: 0;
+		border-bottom-right-radius: 0.125rem;
+		z-index: -1;
+	}
+
+	.segmented-picker {
+		@apply gap-1 rounded-md bg-zinc-100 p-1;
+	}
+
+	.segmented-picker-disabled {
+		@apply opacity-50 grayscale;
+	}
+
+	.segmented-picker-button {
+		@apply rounded-sm px-2.5 py-1;
+	}
+
+	.segmented-picker-button-active {
+		@apply bg-white shadow-xs;
+	}
+}
+
+@layer theme {
+	:root {
+		--navigation-stack-sidebar-width: 16rem;
 	}
 }
 

package/dist/style.css

@@ -18,10 +18,11 @@
     --color-zinc-500: oklch(55.2% 0.016 285.938);
     --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-900: oklch(21% 0.006 285.885);
-    --color-zinc-950: oklch(14.1% 0.005 285.823);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-medium: 500;
@@ -29,7 +30,6 @@
     --tracking-wide: 0.025em;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -242,6 +242,10 @@
   .inline-flex {
     display: inline-flex;
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -280,6 +284,14 @@
   .flex-1 {
     flex: 1;
   }
+  .-translate-x-px {
+    --tw-translate-x: -1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -323,9 +335,6 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-\[var\(--chip-input-border-radius\)\] {
-    border-radius: var(--chip-input-border-radius);
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -345,12 +354,6 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .border-\[var\(--chip-input-border-color\)\] {
-    border-color: var(--chip-input-border-color);
-  }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
-  }
   .border-gray-200\/70 {
     border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -360,12 +363,6 @@
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
-  .bg-\[var\(--chip-input-background\)\] {
-    background-color: var(--chip-input-background);
-  }
-  .bg-\[var\(--sheet-background\)\] {
-    background-color: var(--sheet-background);
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -419,9 +416,6 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .text-\[var\(--chip-input-text\)\] {
-    color: var(--chip-input-text);
-  }
   .text-gray-700 {
     color: var(--color-gray-700);
   }
@@ -441,17 +435,6 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .ring-1 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring-\[var\(--sheet-border-color\)\] {
-    --tw-ring-color: var(--sheet-border-color);
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -484,13 +467,6 @@
     --tw-blur: blur(var(--blur-xs));
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -508,13 +484,6 @@
     --tw-outline-style: none;
     outline-style: none;
   }
-  .hover\:bg-\[var\(--chip-input-hover\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--chip-input-hover);
-      }
-    }
-  }
   .hover\:bg-zinc-100 {
     &:hover {
       @media (hover: hover) {
@@ -588,37 +557,68 @@
       background-color: color-mix(in oklab, var(--color-gray-200) 70%, transparent);
     }
   }
-  .chip-input-action {
-    width: calc(var(--chip-input-font-size) + 16px);
-    height: calc(var(--chip-input-font-size) + 16px);
-    padding: 0;
+}
+@layer components {
+  .chip-input {
+    gap: calc(var(--spacing) * 1);
   }
-  .dropdown-item {
-    border-radius: var(--dropdown-item-border-radius);
+  .chip {
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: transparent;
+    background-color: var(--color-zinc-100);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    white-space: nowrap;
+    color: var(--color-black);
   }
-  .dropdown-item:hover {
-    background: var(--dropdown-item-highlight);
+  .chip-selected {
+    border-color: var(--color-zinc-300);
+  }
+  .chip:hover,	.chip-hovered {
+    background-color: var(--color-zinc-200);
+  }
+  .chip-input-field:hover {
+    background-color: var(--color-zinc-100);
+  }
+  .chip-input-disabled {
+    pointer-events: none;
+  }
+  .chip-input-disabled .chip {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
+  .chip-input-disabled .chip:hover {
+    background-color: var(--color-zinc-100);
+  }
+  .chip-input-action {
+    height: calc(var(--spacing) * 7);
+    width: calc(var(--spacing) * 7);
+    padding: calc(var(--spacing) * 0);
   }
   .pagination-button {
-    border-radius: calc(infinity * 1px);
+    border-radius: 0.25rem;
     background-color: var(--color-zinc-100);
-    padding: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 2);
   }
   .pagination-button:disabled {
     cursor: not-allowed;
-    border-radius: calc(infinity * 1px);
-    padding: calc(var(--spacing) * 1);
     opacity: 50%;
   }
   .pagination-input {
-    width: 10ch;
-    border-radius: calc(infinity * 1px);
+    border-radius: 0.25rem;
     background-color: var(--color-zinc-100);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 1);
     --tw-outline-style: none;
     outline-style: none;
   }
+  .pagination {
+    gap: calc(var(--spacing) * 4);
+  }
   .sidebar-toggle {
     border-radius: 0.25rem;
     padding: calc(var(--spacing) * 1.5);
@@ -628,60 +628,151 @@
       }
     }
   }
-}
-@layer theme {
-  :root {
-    --sheet-border-radius: var(--radius-md);
-    --sheet-content-padding: calc(var(--spacing) * 4);
-    --sheet-background: var(--color-white);
-    --sheet-border-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 10%, transparent);
+  .dropdown {
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-gray-200);
+    background-color: var(--color-white);
+    padding: calc(var(--spacing) * 1);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .dropdown-item {
+    border-radius: var(--radius-md);
+  }
+  .dropdown-item:hover {
+    background-color: var(--color-zinc-100);
+  }
+  .sheet {
+    border-radius: var(--radius-md);
+    background-color: var(--color-white);
+    padding: calc(var(--spacing) * 4);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .sheet-overlay {
+    background-color: color-mix(in srgb, #000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      --sheet-border-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
+      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
     }
-    --sheet-overlay: color-mix(in srgb, #000 20%, transparent);
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .slider {
+    appearance: none;
+    height: 6px;
+    border-radius: 9999px;
+    background: transparent;
+    outline: none;
+    cursor: pointer;
+  }
+  .slider:focus-visible {
+    outline: 2px solid color-mix(in srgb, oklch(21% 0.034 264.665) 35%, white);
     @supports (color: color-mix(in lab, red, red)) {
-      --sheet-overlay: color-mix(in oklab, var(--color-black) 20%, transparent);
+      outline: 2px solid color-mix(in oklab, var(--color-gray-900) 35%, white);
     }
-    --sheet-blur: var(--blur-sm);
-    --sheet-shadow: var(--shadow-md);
-    --dropdown-content-padding: calc(var(--spacing));
-    --dropdown-item-border-radius: var(--radius-md);
-    --dropdown-border-radius: var(--radius-md);
-    --dropdown-background: var(--color-white);
-    --dropdown-shadow: var(--shadow-md);
-    --dropdown-item-highlight: var(--color-zinc-100);
-    --tooltip-border-radius: var(--radius-sm);
-    --tooltip-padding: 4px 8px;
-    --tooltip-font-size: 12px;
-    --tooltip-background: var(--color-black);
-    --tooltip-text: var(--color-white);
-    --slider-shadow: var(--shadow-md);
-    --slider-track: var(--color-zinc-300);
-    --slider-fill: var(--color-zinc-900);
-    --slider-thumb-inner: var(--color-zinc-900);
-    --slider-thumb-outer: var(--color-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(--color-zinc-900) 0%,	var(--color-zinc-900) var(--slider-pct),	var(--color-zinc-300) var(--slider-pct),	var(--color-zinc-300) 100%	);
+  }
+  .slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 9999px;
+    border: 2px solid var(--color-white);
+    background: var(--color-zinc-900);
+    box-shadow: var(--shadow-md);
+    margin-top: -5px;
+  }
+  .slider::-moz-range-track {
+    height: 6px;
+    border: none;
+    border-radius: 9999px;
+    background: var(--color-zinc-300);
+  }
+  .slider::-moz-range-progress {
+    height: 6px;
+    border: none;
+    border-radius: 9999px;
+    background: var(--color-zinc-900);
+  }
+  .slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 9999px;
+    border: 2px solid var(--color-white);
+    background: var(--color-zinc-900);
+    box-shadow: var(--shadow-md);
+  }
+  .tooltip {
+    pointer-events: none;
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: calc(1/2 * 100%);
+    z-index: 10;
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    border-radius: var(--radius-sm);
+    background-color: var(--color-black);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    white-space: nowrap;
+    color: var(--color-white);
+    opacity: 0%;
+  }
+  .tooltip-trigger:hover .tooltip,	.tooltip-trigger:focus-within .tooltip {
+    opacity: 100%;
+  }
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    top: calc(100% - 5px);
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    transform: translateX(-50%) rotate(45deg);
+    background: #000;
+    border-radius: 0;
+    border-bottom-right-radius: 0.125rem;
+    z-index: -1;
+  }
+  .segmented-picker {
+    gap: calc(var(--spacing) * 1);
+    border-radius: var(--radius-md);
+    background-color: var(--color-zinc-100);
+    padding: calc(var(--spacing) * 1);
+  }
+  .segmented-picker-disabled {
+    opacity: 50%;
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .segmented-picker-button {
+    border-radius: var(--radius-sm);
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .segmented-picker-button-active {
+    background-color: var(--color-white);
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+}
+@layer theme {
+  :root {
     --navigation-stack-sidebar-width: 16rem;
-    --segmented-picker-outer-padding: calc(var(--spacing));
-    --segmented-picker-inner-padding: 4px 10px;
-    --segmented-picker-border-radius: var(--radius-md);
-    --segmented-picker-background: var(--color-zinc-100);
-    --segmented-picker-active-background: var(--color-white);
-    --segmented-picker-active-shadow: var(--shadow-xs);
-    --segmented-picker-item-gap: var(--spacing);
-    --segmented-picker-inner-border-radius: max(
-			0px,
-			calc(var(--segmented-picker-border-radius) - var(--segmented-picker-outer-padding))
-		);
-    --chip-input-gap: var(--spacing);
-    --chip-input-padding: 4px 8px;
-    --chip-input-background: var(--color-zinc-100);
-    --chip-input-hover: var(--color-zinc-200);
-    --chip-input-text: var(--color-black);
-    --chip-input-font-size: 12px;
-    --chip-input-border-radius: 9999px;
-    --chip-input-border-color: transparent;
-    --chip-input-highlight: var(--color-zinc-300);
-    --pagination-gap: calc(var(--spacing) * 4);
   }
 }
 .hstack > .divider {
@@ -695,6 +786,21 @@
 .overflow-auto > .vstack, .overflow-auto > .hstack {
   flex-shrink: 0;
 }
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -757,128 +863,131 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-shadow {
+@property --tw-blur {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-shadow-color {
+@property --tw-brightness {
   syntax: "*";
   inherits: false;
 }
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
+@property --tw-contrast {
+  syntax: "*";
   inherits: false;
-  initial-value: 100%;
 }
-@property --tw-inset-shadow {
+@property --tw-grayscale {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-inset-shadow-color {
+@property --tw-hue-rotate {
   syntax: "*";
   inherits: false;
 }
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
+@property --tw-invert {
+  syntax: "*";
   inherits: false;
-  initial-value: 100%;
 }
-@property --tw-ring-color {
+@property --tw-opacity {
   syntax: "*";
   inherits: false;
 }
-@property --tw-ring-shadow {
+@property --tw-saturate {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-inset-ring-color {
+@property --tw-sepia {
   syntax: "*";
   inherits: false;
 }
-@property --tw-inset-ring-shadow {
+@property --tw-drop-shadow {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-ring-inset {
+@property --tw-drop-shadow-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-ring-offset-width {
-  syntax: "<length>";
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
   inherits: false;
-  initial-value: 0px;
+  initial-value: 100%;
 }
-@property --tw-ring-offset-color {
+@property --tw-drop-shadow-size {
   syntax: "*";
   inherits: false;
-  initial-value: #fff;
 }
-@property --tw-ring-offset-shadow {
+@property --tw-duration {
   syntax: "*";
   inherits: false;
-  initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
+@property --tw-ease {
   syntax: "*";
   inherits: false;
-  initial-value: solid;
 }
-@property --tw-blur {
+@property --tw-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-brightness {
+@property --tw-shadow-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-contrast {
-  syntax: "*";
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
   inherits: false;
+  initial-value: 100%;
 }
-@property --tw-grayscale {
+@property --tw-inset-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-hue-rotate {
+@property --tw-inset-shadow-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-invert {
-  syntax: "*";
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
   inherits: false;
+  initial-value: 100%;
 }
-@property --tw-opacity {
+@property --tw-ring-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-saturate {
+@property --tw-ring-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-sepia {
+@property --tw-inset-ring-color {
   syntax: "*";
   inherits: false;
 }
-@property --tw-drop-shadow {
+@property --tw-inset-ring-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
-@property --tw-drop-shadow-color {
+@property --tw-ring-inset {
   syntax: "*";
   inherits: false;
 }
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
+@property --tw-ring-offset-width {
+  syntax: "<length>";
   inherits: false;
-  initial-value: 100%;
+  initial-value: 0px;
 }
-@property --tw-drop-shadow-size {
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
   syntax: "*";
   inherits: false;
+  initial-value: 0 0 #0000;
 }
 @property --tw-backdrop-blur {
   syntax: "*";
@@ -916,14 +1025,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -932,6 +1033,9 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -947,6 +1051,21 @@
       --tw-numeric-figure: initial;
       --tw-numeric-spacing: initial;
       --tw-numeric-fraction: initial;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -961,20 +1080,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;
@@ -984,8 +1089,6 @@
       --tw-backdrop-opacity: initial;
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
-      --tw-duration: initial;
-      --tw-ease: initial;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.41",
+	"version": "0.0.43",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",