@heyramzi/ui 2.23.0 → 3.0.0

package/src/components/segmented/segmented-track.svelte

@@ -64,125 +64,129 @@
 <!-- STYLES -->
 <!-- =========================== -->
 <style>
-	/* The label's colour lands with the pill, on the same fast step. */
-	.track :global(.ui-segment) {
-		transition:
-			background-color var(--duration-quick) var(--ease-smooth-out),
-			color var(--duration-fast) var(--ease-smooth-out),
-			transform var(--duration-micro) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	/* A faint wash in the well says which segment the pointer would pick. */
-	@media (hover: hover) {
-		.track
-			:global(
-				.ui-segment:hover:not(
-						[data-state="active"],
-						[aria-current="page"],
-						[aria-pressed="true"],
-						[data-state="open"]
-					)
-			) {
-			background-color: color-mix(in oklch, var(--color-foreground) 5%, transparent);
+	@layer components {
+		/* The label's colour lands with the pill, on the same fast step. */
+		.track :global(.ui-segment) {
+			transition:
+				background-color var(--duration-quick) var(--ease-smooth-out),
+				color var(--duration-fast) var(--ease-smooth-out),
+				transform var(--duration-micro) var(--ease-smooth-out);
 		}
-	}
 
-	.pill {
-		position: absolute;
-		top: 2px;
-		bottom: 2px;
-		left: 0;
-		z-index: 0;
-		width: 0;
-		opacity: 0;
-		/* The white thumb on the grey track. Concentric: the track's control radius less its
-		   2px inset. The resting button shadow lifts it; no border, so no seam to fight. */
-		border-radius: calc(var(--radius-lg) - 2px);
-		background-color: var(--color-card);
-		box-shadow: var(--elev-btn), var(--elev-hairline);
-		transform: translateX(0);
-		/* transitions-dev `16-tabs-sliding`: the fast step, 250ms. */
-		transition:
-			transform var(--duration-fast) var(--ease-smooth-out),
-			width var(--duration-fast) var(--ease-smooth-out),
-			opacity var(--duration-quick) var(--ease-smooth-out);
-		will-change: transform;
-		pointer-events: none;
-	}
+		/* A faint wash in the well says which segment the pointer would pick. */
+		@media (hover: hover) {
+			.track
+				:global(
+					.ui-segment:hover:not(
+							[data-state="active"],
+							[aria-current="page"],
+							[aria-pressed="true"],
+							[data-state="open"]
+						)
+				) {
+				background-color: color-mix(in oklch, var(--color-foreground) 5%, transparent);
+			}
+		}
 
-	/* Before the attachment measures, the active segment draws the pill itself,
-	   so a server-rendered strip is right before any JS arrives. */
-	.track:not([data-pill="on"])
-		:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
-		background-color: var(--color-card);
-		box-shadow: var(--elev-btn), var(--elev-hairline);
-	}
+		.pill {
+			position: absolute;
+			top: 2px;
+			bottom: 2px;
+			left: 0;
+			z-index: 0;
+			width: 0;
+			opacity: 0;
+			/* The white thumb on the grey track. Concentric: the track's control radius less its
+			   2px inset. The resting button shadow lifts it; no border, so no seam to fight. */
+			border-radius: calc(var(--radius-lg) - 2px);
+			background-color: var(--color-card);
+			box-shadow: var(--elev-btn), var(--elev-hairline);
+			transform: translateX(0);
+			/* transitions-dev `16-tabs-sliding`: the fast step, 250ms. */
+			transition:
+				transform var(--duration-fast) var(--ease-smooth-out),
+				width var(--duration-fast) var(--ease-smooth-out),
+				opacity var(--duration-quick) var(--ease-smooth-out);
+			will-change: transform;
+			pointer-events: none;
+		}
 
-	/* On dark the card is the darker surface, so the thumb lifts toward the text instead. */
-	:global(.dark) .pill,
-	:global(.dark)
+		/* Before the attachment measures, the active segment draws the pill itself,
+		   so a server-rendered strip is right before any JS arrives. */
 		.track:not([data-pill="on"])
-		:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
-		background-color: color-mix(in oklch, var(--color-foreground) 14%, var(--color-card));
-	}
-
-	/* The underline: no wash, and the pill becomes a 2px rule on the
-	   hairline. `--segmented-rule` lets a brand colour it from a class. */
-	@media (hover: hover) {
-		.track[data-variant="underline"]
-			:global(
-				.ui-segment:hover:not(
-						[data-state="active"],
-						[aria-current="page"],
-						[aria-pressed="true"],
-						[data-state="open"]
-					)
-			) {
-			background-color: transparent;
+			:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+			background-color: var(--color-card);
+			box-shadow: var(--elev-btn), var(--elev-hairline);
 		}
-	}
 
-	.track[data-variant="underline"] .pill {
-		top: auto;
-		bottom: -1px;
-		height: 2px;
-		border-radius: 1px;
-		background-color: var(--segmented-rule, var(--color-foreground));
-		box-shadow: none;
-	}
+		/* On dark the card is the darker surface, so the thumb lifts toward the text instead. */
+		:global(.dark) .pill,
+		:global(.dark)
+			.track:not([data-pill="on"])
+			:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+			background-color: color-mix(in oklch, var(--color-foreground) 14%, var(--color-card));
+		}
 
-	.track[data-variant="underline"]:not([data-pill="on"])
-		:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
-		background-color: transparent;
-		box-shadow: inset 0 -2px 0 var(--segmented-rule, var(--color-foreground));
-	}
+		/* The underline: no wash, and the pill becomes a 2px rule on the
+		   hairline. `--segmented-rule` lets a brand colour it from a class. */
+		@media (hover: hover) {
+			.track[data-variant="underline"]
+				:global(
+					.ui-segment:hover:not(
+							[data-state="active"],
+							[aria-current="page"],
+							[aria-pressed="true"],
+							[data-state="open"]
+						)
+				) {
+				background-color: transparent;
+			}
+		}
 
-	/* On a coarse pointer the well grows to 44px and its segments are the hit area, since a
-	   clipped well can't hold one hanging outside it. */
-	@media (any-pointer: coarse) {
-		.track[data-variant="pill"]::after {
-			content: "";
-			position: absolute;
-			inset: 0;
-			z-index: 2;
-			border: 1px solid var(--color-border);
-			border-radius: inherit;
-			pointer-events: none;
+		.track[data-variant="underline"] .pill {
+			top: auto;
+			bottom: -1px;
+			height: 2px;
+			border-radius: 1px;
+			background-color: var(--segmented-rule, var(--color-foreground));
+			box-shadow: none;
 		}
 
-		.track[data-variant="pill"] .pill {
-			top: 3px;
-			bottom: 3px;
+		.track[data-variant="underline"]:not([data-pill="on"])
+			:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+			background-color: transparent;
+			box-shadow: inset 0 -2px 0 var(--segmented-rule, var(--color-foreground));
 		}
-	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.pill {
-			transition: opacity var(--duration-quick) var(--ease-smooth-out);
+		/* On a coarse pointer the well grows to 44px and its segments are the hit area, since a
+		   clipped well can't hold one hanging outside it. */
+		@media (any-pointer: coarse) {
+			.track[data-variant="pill"]::after {
+				content: "";
+				position: absolute;
+				inset: 0;
+				z-index: 2;
+				border: 1px solid var(--color-border);
+				border-radius: inherit;
+				pointer-events: none;
+			}
+
+			.track[data-variant="pill"] .pill {
+				top: 3px;
+				bottom: 3px;
+			}
 		}
 
-		.track :global(.ui-segment) {
-			transition: none;
+		@media (prefers-reduced-motion: reduce) {
+			.pill {
+				transition: opacity var(--duration-quick) var(--ease-smooth-out);
+			}
+
+			.track :global(.ui-segment) {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/components/segmented/segmented-track.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import { type SegmentedVariant } from "./segmented.js";
+interface Props {
+    /** Fill the row rather than sit at its natural width. */
+    fill?: boolean;
+    /** `pill`, a grey track with a white thumb that slides, or `underline`, a travelling rule. */
+    variant?: SegmentedVariant;
+    class?: string;
+    children: Snippet;
+    /**
+     * A last segment that isn't an item: today the overflow trigger. It's inside
+     * the track but outside the ARIA container, so a `tablist` owns only tabs.
+     */
+    after?: Snippet;
+    [key: string]: unknown;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/star-rating-input/star-rating-input.svelte

@@ -12,8 +12,9 @@
 		lg: "size-7",
 	};
 
+	// Side by side stars can't overlap, so a 24px target (WCAG 2.5.8) means a 24px pitch.
 	const HIT_SIZE: Record<StarRatingSize, string> = {
-		sm: "p-0.5",
+		sm: "p-1",
 		lg: "p-1",
 	};
 
@@ -22,6 +23,7 @@
 </script>
 
 <script lang="ts">
+	import { RatingGroup } from "bits-ui";
 	import { Star } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 
@@ -38,14 +40,15 @@
 		disabled?: boolean;
 		/** Form field name for native submission. When set, a hidden input is rendered. */
 		name?: string;
-		/** ARIA label for the radiogroup. */
+		/** What is rated, like "Rate the delivery". The value is added for a screen reader. */
 		ariaLabel?: string;
 		/** Per-step descriptive labels (length must equal max). */
 		labels?: readonly string[];
 		/** Show the label of the currently hovered/selected step beside the stars. */
 		showLabel?: boolean;
 		class?: string;
-		onchange?: (value: number) => void;
+		/** Called with the new rating after a pick. */
+		onValueChange?: (value: number) => void;
 	}
 
 	let {
@@ -59,31 +62,24 @@
 		labels,
 		showLabel = false,
 		class: className,
-		onchange,
+		onValueChange,
 	}: Props = $props();
 
-	let hover = $state(0);
 	/** Held for the length of the pop, then dropped so the next pick can replay it. */
 	let popping = $state(false);
 	let popTimer: ReturnType<typeof setTimeout> | undefined;
-	let displayed = $derived(hover || value);
 	let starSize = $derived(STAR_SIZE[size]);
 	let hitSize = $derived(HIT_SIZE[size]);
-	let groupAriaLabel = $derived(ariaLabel ?? `Rating, ${max} stars`);
-	let labelText = $derived(
-		displayed > 0 && labels && labels.length >= displayed ? labels[displayed - 1] : "",
-	);
-
-	function buttonAriaLabel(step: number): string {
-		const stepLabel = labels?.[step - 1];
-		const base = `${step} of ${max}`;
-		return stepLabel ? `${base} (${stepLabel})` : base;
+	let subject = $derived(ariaLabel ?? "Rating");
+
+	function valueText(rating: number): string {
+		if (rating <= 0) return "No rating";
+		const label = labels?.[rating - 1];
+		return `${rating} of ${max} stars${label ? `, ${label}` : ""}`;
 	}
 
-	function setRating(step: number) {
-		if (readonly || disabled) return;
-		value = step;
-		onchange?.(step);
+	function picked(next: number) {
+		onValueChange?.(next);
 
 		// Drop the class before re-adding it, or a second pick inside the animation
 		// window finds it already set and nothing replays.
@@ -94,134 +90,168 @@
 			popTimer = setTimeout(() => (popping = false), POP_WINDOW_MS);
 		});
 	}
-
-	function handleEnter(step: number) {
-		if (readonly || disabled) return;
-		hover = step;
-	}
-
-	function handleLeave() {
-		if (readonly || disabled) return;
-		hover = 0;
-	}
 </script>
 
 <!-- One star, drawn once. It used to be written twice, once per branch, and the
      two copies had already drifted apart on the glow. -->
-{#snippet star(step: number)}
+{#snippet star(filled: boolean)}
 	<Star
-		class={cn("star", starSize, step <= displayed && "is-filled")}
-		weight={step <= displayed ? "fill" : "regular"}
+		aria-hidden="true"
+		class={cn("star", starSize, filled && "is-filled")}
+		weight={filled ? "fill" : "regular"}
 	/>
 {/snippet}
 
-<div class={cn("rating", `rating-${size}`, className)}>
-	<div
-		class={cn("stars", popping && "is-popping")}
-		role={readonly ? "img" : "radiogroup"}
-		aria-label={groupAriaLabel}
-		onmouseleave={handleLeave}
-	>
-		{#each Array(max) as _, i (i)}
-			{@const step = i + 1}
-			{#if readonly}
-				<span class={cn("hit", hitSize)}>{@render star(step)}</span>
-			{:else}
-				<button
-					type="button"
-					role="radio"
-					aria-checked={value === step}
-					aria-label={buttonAriaLabel(step)}
-					{disabled}
-					data-on={step <= value}
-					onclick={() => setRating(step)}
-					onmouseenter={() => handleEnter(step)}
-					onfocus={() => handleEnter(step)}
-					onblur={handleLeave}
-					style:--pop-delay="{i * 40}ms"
-					class={cn("hit hit-button", hitSize, disabled && "is-disabled")}
-				>
-					{@render star(step)}
-				</button>
-			{/if}
-		{/each}
-	</div>
-
-	{#if showLabel && labelText}
-		<span class="rating-caption">{labelText}</span>
+{#snippet caption(shown: number)}
+	{#if showLabel && shown > 0 && labels?.[shown - 1]}
+		<span class="rating-caption">{labels[shown - 1]}</span>
 	{/if}
+{/snippet}
 
-	{#if name}
-		<input type="hidden" {name} {value} />
+<!-- Bits UI's RatingGroup is the WAI-ARIA rating slider: one Tab stop, arrows, Home to clear, End, digits. -->
+<div class={cn("rating", `rating-${size}`, className)}>
+	{#if readonly}
+		<div class="stars" role="img" aria-label="{subject}, {valueText(value)}">
+			{#each Array(max) as _, i (i)}
+				<span class={cn("hit", hitSize)}>{@render star(i < value)}</span>
+			{/each}
+		</div>
+		{@render caption(value)}
+		{#if name}
+			<input type="hidden" {name} {value} />
+		{/if}
+	{:else}
+		<RatingGroup.Root
+			bind:value
+			{max}
+			{disabled}
+			{name}
+			aria-label={subject}
+			aria-valuetext={valueText}
+			onValueChange={picked}
+			class={cn("stars stars-input", popping && "is-popping", disabled && "is-disabled")}
+		>
+			{#snippet children({ items })}
+				{#each items as item (item.index)}
+					<RatingGroup.Item
+						index={item.index}
+						data-on={item.index < value}
+						style="--pop-delay: {item.index * 40}ms"
+						class={cn("hit hit-button", hitSize)}
+					>
+						{@render star(item.state === "active")}
+					</RatingGroup.Item>
+				{/each}
+				{@render caption(items.filter((item) => item.state === "active").length)}
+			{/snippet}
+		</RatingGroup.Root>
 	{/if}
 </div>
 
 <style>
-	.rating {
-		--like-pop: var(--duration-medium);
-		--like-pop-ease: var(--ease-smooth-out);
-		--like-fill: var(--duration-quick);
-		--like-ease: var(--ease-smooth-out);
-
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.rating {
+			--like-pop: var(--duration-medium);
+			--like-pop-ease: var(--ease-smooth-out);
+			--like-fill: var(--duration-quick);
+			--like-ease: var(--ease-smooth-out);
+
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+		}
 
-	.stars {
-		display: flex;
-		align-items: center;
-	}
+		.rating :global(.stars) {
+			display: flex;
+			align-items: center;
+		}
 
-	.hit {
-		display: inline-flex;
-		border-radius: var(--radius-sm);
-	}
+		.rating :global(.hit) {
+			display: inline-flex;
+			border-radius: var(--radius-sm);
+		}
 
-	.hit-button {
-		transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
-	}
+		.rating :global(.hit-button) {
+			transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
+		}
 
-	.hit-button:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--color-ring);
-	}
+		.rating :global(.stars-input) {
+			border-radius: var(--radius-sm);
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.hit-button:not(.is-disabled):hover {
-			transform: scale(1.1);
+		.rating :global(.stars-input:focus-visible) {
+			outline: none;
+			box-shadow: 0 0 0 2px var(--color-ring);
 		}
-	}
 
-	.hit-button:not(.is-disabled):active {
-		transform: scale(0.95);
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.rating :global(.stars-input:not(.is-disabled) .hit-button:hover) {
+				transform: scale(1.1);
+			}
+		}
 
-	.is-disabled {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
+		.rating :global(.stars-input:not(.is-disabled) .hit-button:active) {
+			transform: scale(0.95);
+		}
 
-	.rating :global(.star) {
-		color: var(--color-border);
-		transition: color var(--like-fill) var(--like-ease);
-	}
+		.rating :global(.is-disabled) {
+			cursor: not-allowed;
+			opacity: 0.6;
+		}
 
-	.rating :global(.star.is-filled) {
-		color: var(--color-warning-400);
-	}
+		.rating :global(.star) {
+			color: var(--color-border);
+			transition: color var(--like-fill) var(--like-ease);
+		}
 
-	/* The glow is the size's business, not a prop: it belongs to the ask, where
-	   the stars are large enough to carry it, and it turned to mud at 16px. */
-	.rating-lg :global(.star.is-filled) {
-		filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color-warning-400) 45%, transparent));
-	}
+		.rating :global(.star.is-filled) {
+			color: var(--color-warning-400);
+		}
+
+		/* The glow is the size's business, not a prop: it belongs to the ask, where
+		   the stars are large enough to carry it, and it turned to mud at 16px. */
+		.rating-lg :global(.star.is-filled) {
+			filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color-warning-400) 45%, transparent));
+		}
+
+		/* transitions.dev like-button pop. Every selected star pops, left to right,
+		   as one gesture. A class on the group drives it, since rebuilding the row
+		   would drop keyboard focus. */
+		.rating :global(.is-popping .hit-button[data-on="true"]) {
+			animation: t-like-pop var(--like-pop) var(--like-pop-ease) var(--pop-delay, 0ms);
+		}
+
+		/* Inside the slider the caption sits in the stars' row, so it keeps the outer gap itself. */
+		.rating :global(.stars-input .rating-caption) {
+			margin-inline-start: 0.25rem;
+		}
+
+		.rating-caption {
+			font-size: 0.75rem;
+			font-weight: 500;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-muted-foreground);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.rating :global(.hit-button),
+			.rating :global(.is-popping .hit-button[data-on="true"]) {
+				animation: none;
+				transition: none;
+			}
+
+			.rating :global(.stars-input:not(.is-disabled) .hit-button:active) {
+				transform: none;
+			}
 
-	/* transitions.dev like-button pop. Every selected star pops, left to right,
-	   as one gesture. A class on the group drives it, since rebuilding the row
-	   would drop keyboard focus. */
-	.is-popping .hit-button[data-on="true"] {
-		animation: t-like-pop var(--like-pop) var(--like-pop-ease) var(--pop-delay, 0ms);
+			@media (hover: hover) and (pointer: fine) {
+				.rating :global(.stars-input:not(.is-disabled) .hit-button:hover) {
+					transform: none;
+				}
+			}
+		}
 	}
 
 	@keyframes t-like-pop {
@@ -235,29 +265,4 @@
 			transform: scale(1);
 		}
 	}
-
-	.rating-caption {
-		font-size: 0.75rem;
-		font-weight: 500;
-		font-variant-numeric: tabular-nums;
-		color: var(--color-muted-foreground);
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.hit-button,
-		.is-popping .hit-button[data-on="true"] {
-			animation: none;
-			transition: none;
-		}
-
-		.hit-button:not(.is-disabled):active {
-			transform: none;
-		}
-
-		@media (hover: hover) and (pointer: fine) {
-			.hit-button:not(.is-disabled):hover {
-				transform: none;
-			}
-		}
-	}
 </style>

package/src/components/star-rating-input/star-rating-input.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Two sizes, picked by the job: `sm` reads a value back in a row or cell,
+ * `lg` is the ask.
+ */
+export type StarRatingSize = "sm" | "lg";
+interface Props {
+    /** Current rating value (0 = unrated). */
+    value: number;
+    /** Maximum rating. Defaults to 5. */
+    max?: number;
+    /** Visual size of each star. `sm` reads back, `lg` asks. */
+    size?: StarRatingSize;
+    /** Render as static display, no hover or click. */
+    readonly?: boolean;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Form field name for native submission. When set, a hidden input is rendered. */
+    name?: string;
+    /** What is rated, like "Rate the delivery". The value is added for a screen reader. */
+    ariaLabel?: string;
+    /** Per-step descriptive labels (length must equal max). */
+    labels?: readonly string[];
+    /** Show the label of the currently hovered/selected step beside the stars. */
+    showLabel?: boolean;
+    class?: string;
+    /** Called with the new rating after a pick. */
+    onValueChange?: (value: number) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "value">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;