@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/components/segmented/segmented.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vite-plus/test";
+import { segmentedTrackClass } from "./segmented.js";
+
+describe("segmentedTrackClass", () => {
+  // Every segmented control shares one height, whatever its look.
+  it("holds one height across variants", () => {
+    for (const variant of ["pill", "underline"] as const) {
+      const classes = segmentedTrackClass({ variant }).split(" ");
+      expect(classes).toContain("h-7");
+      expect(classes).toContain("any-pointer-coarse:h-10");
+    }
+  });
+
+  it("draws the pill as a bordered well and the underline as a hairline", () => {
+    expect(segmentedTrackClass({ variant: "pill" })).toContain("rounded-lg");
+    const underline = segmentedTrackClass({ variant: "underline" });
+    expect(underline).toContain("border-b");
+    expect(underline).not.toContain("rounded-lg");
+  });
+});

package/src/components/segmented/segmented.ts

@@ -0,0 +1,80 @@
+import { tv } from "tailwind-variants";
+import { pageGutterClass } from "../../lib/layout.js";
+
+/**
+ * The one look for a segmented control: the track and trigger here, what a
+ * segment says in `segment.svelte`.
+ */
+
+// WHY a recipe, not one component: tabs are a `tablist`, filters a `group` of
+// `aria-pressed` toggles, page links a `nav`. Only the ARIA shape may differ.
+
+// The look used to drift three ways, one with an at-rest shadow. All three read from here now.
+export const segmentedTrackClass = tv({
+  // WHY the height lives on the track: it carries the inset, so an `h-7` trigger
+  // drew 30px beside a 28px button. One toolbar row came out at five heights.
+
+  // WHY no size variant: `sm` drew 24px, and every tab control must share one height.
+  base: "h-7 any-pointer-coarse:h-10 shrink-0 items-stretch",
+  variants: {
+    // `pill`: a bordered well with a travelling highlight. `underline`: bare
+    // labels over one hairline, the active one marked by a rule that travels.
+    variant: {
+      pill: "overflow-hidden rounded-lg border border-border p-0.5",
+      underline: "gap-5 border-b border-border",
+    },
+    // Fill the row rather than sit at its natural width. For a narrow rail.
+    fill: { true: "flex w-full", false: "inline-flex w-fit" },
+  },
+  defaultVariants: { variant: "pill", fill: false },
+});
+
+export type SegmentedVariant = "pill" | "underline";
+
+export const segmentedTriggerClass = tv({
+  base: [
+    // `t-press` is the kit's one press: colour, shadow and a pixel of travel.
+
+    // `relative z-[1]` keeps the label above the travelling pill, or the pill
+    // paints over the word it highlights.
+
+    // `ui-segment` isn't a style. `segmented-track.svelte` matches on it to time
+    // the label colour with the pill.
+    "ui-segment group/segment t-press relative z-[1] inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium select-none",
+    "text-muted-foreground hover:text-foreground",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    // WHY an inset focus ring: the track clips to its rounded corners, so an
+    // outside ring was cut in half on the end segments.
+    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none",
+    // WHY no height on the trigger: an icon makes a segment taller than a word.
+    // `h-full` against the track's `items-stretch` keeps every segment the same box.
+    "h-full text-xs",
+  ],
+  variants: {
+    // The pill is concentric with the track's border and its 2px inset. The
+    // underline has no well to be concentric with, so no padding either: the
+    // rule under a label is as wide as the label.
+    variant: {
+      pill: "rounded-[calc(var(--radius-lg)-3px)] px-2.5 any-pointer-coarse:px-3.5",
+      underline: "rounded-sm px-0",
+    },
+    // WHY `min-w-fit flex-auto`, not equal fractions: fractions cut "Approved" to
+    // "Appro…" in a 280px rail. Each segment claims its label and shares the slack.
+    fill: { true: "min-w-fit flex-auto", false: "" },
+    active: { true: "text-foreground", false: "" },
+  },
+  defaultVariants: { variant: "pill", fill: false, active: false },
+});
+
+/**
+ * The row a segmented strip sits in, and the one recipe for a navigation row
+ * under the app header. Written per caller it produced two different left
+ * edges.
+ */
+// WHY no bottom hairline: with a section strip and a page toolbar stacked it
+// drew two rules for one boundary. The gap is the boundary.
+export const segmentedRowClass = `flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2 py-2 ${pageGutterClass}`;
+
+/** The active style, for a strip whose state lives in a `data-active` attribute. */
+export const segmentedActiveClass = "data-active:text-foreground";

package/src/components/star-rating-input/index.ts

@@ -0,0 +1,9 @@
+import Root from "./star-rating-input.svelte";
+
+export type { StarRatingSize } from "./star-rating-input.svelte";
+
+export {
+  Root,
+  //
+  Root as StarRatingInput,
+};

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

@@ -0,0 +1,256 @@
+<script lang="ts" module>
+/**
+ * Two sizes, picked by the job: `sm` reads a value back in a row or cell,
+ * `lg` is the ask.
+ */
+// A middle `md` step used to exist. Nobody could place it, so the same question
+// ended up asked at three sizes.
+export type StarRatingSize = "sm" | "lg";
+
+const STAR_SIZE: Record<StarRatingSize, string> = {
+	sm: "size-4",
+	lg: "size-7",
+};
+
+const HIT_SIZE: Record<StarRatingSize, string> = {
+	sm: "p-0.5",
+	lg: "p-1",
+};
+
+/** Pop duration plus the longest stagger, after which the class can come off. */
+const POP_WINDOW_MS = 350 + 4 * 40;
+</script>
+
+<script lang="ts">
+import { Star } from "phosphor-svelte";
+import { cn } from "@heyramzi/utils";
+
+type 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;
+	/** ARIA label for the radiogroup. */
+	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;
+};
+
+let {
+	value = $bindable(0),
+	max = 5,
+	size = "sm",
+	readonly = false,
+	disabled = false,
+	name,
+	ariaLabel,
+	labels,
+	showLabel = false,
+	class: className,
+	onchange,
+}: 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;
+}
+
+function setRating(step: number) {
+	if (readonly || disabled) return;
+	value = step;
+	onchange?.(step);
+
+	// Drop the class before re-adding it, or a second pick inside the animation
+	// window finds it already set and nothing replays.
+	popping = false;
+	clearTimeout(popTimer);
+	requestAnimationFrame(() => {
+		popping = true;
+		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)}
+	<Star
+		class={cn("star", starSize, step <= displayed && "is-filled")}
+		weight={step <= displayed ? "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>
+	{/if}
+
+	{#if name}
+		<input type="hidden" {name} value={value} />
+	{/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;
+	}
+
+	.stars {
+		display: flex;
+		align-items: center;
+	}
+
+	.hit {
+		display: inline-flex;
+		border-radius: var(--radius-sm);
+	}
+
+	.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);
+	}
+
+	.hit-button:not(.is-disabled):hover {
+		transform: scale(1.1);
+	}
+
+	.hit-button:not(.is-disabled):active {
+		transform: scale(0.95);
+	}
+
+	.is-disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.rating :global(.star) {
+		color: var(--color-border);
+		transition: color var(--like-fill) var(--like-ease);
+	}
+
+	.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. */
+	.is-popping .hit-button[data-on="true"] {
+		animation: t-like-pop var(--like-pop) var(--like-pop-ease) var(--pop-delay, 0ms);
+	}
+
+	@keyframes t-like-pop {
+		0% {
+			transform: scale(1);
+		}
+		30% {
+			transform: scale(0.82);
+		}
+		100% {
+			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):hover,
+		.hit-button:not(.is-disabled):active {
+			transform: none;
+		}
+	}
+</style>

package/src/components/svg/index.ts

@@ -0,0 +1 @@
+export { default as Svg } from "./svg.svelte";

package/src/components/svg/svg.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+// Renders a drawing kept in its own .svg file, imported with `?raw`.
+// The markup is ours and static, so rendering it as HTML is safe.
+let { src, class: className = "" }: { src: string; class?: string } = $props();
+
+const markup = $derived(className ? src.replace("<svg", `<svg class="${className}"`) : src);
+</script>
+
+{@html markup}

package/src/design/index.css

@@ -0,0 +1,270 @@
+/* The craft layer, the opinionated half of a design system.
+ *
+ * A palette says which colours a product uses. This file says how a surface
+ * lifts off the page, how round a control is against a card, and how long an
+ * overlay takes to arrive. Those three answers are what separate a kit that
+ * looks assembled from one that looks made, and they were the part every app
+ * here was re-deciding per component.
+ *
+ * WHY it ships beside the palette rather than inside it: the palette is the
+ * brand and differs per app; elevation, radius and motion are craft and should
+ * not. An app imports this, then tints it with `--elev-tint` and nothing else.
+ *
+ * Studied from beautifului.dev and rareui.com, which both build the same three
+ * ladders: a hairline that is a shadow rather than a border, a radius that
+ * steps by the role of the box, and a close that is faster than its open.
+ *
+ * Import once, after Tailwind:
+ *   @import "@heyramzi/ui/design";
+ */
+
+@import "./polish.css";
+
+/* ── Radius, by role not by size ─────────────────────────────
+   A chip inside a control inside a card has to read as nested, which needs
+   three radii that step, not one radius reused. The Tailwind names are the
+   home so `rounded-lg` on a button already resolves to the control radius and
+   no component has to learn a new class. */
+@theme {
+  --radius-xs: 4px; /* tag, dot, inline code */
+  --radius-sm: 6px; /* chip, badge, small pill */
+  --radius-md: 7px; /* between a chip and a control */
+  --radius-lg: 8px; /* control: button, input, select, menu item */
+  --radius-xl: 10px; /* card, panel, stage */
+  --radius-2xl: 14px; /* overlay: dialog, sheet, command palette */
+  --radius-3xl: 20px; /* hero surface, full-bleed panel */
+}
+
+/* ── Elevation ───────────────────────────────────────────────
+   Four steps of lift, plus the two edges that are not lift.
+
+   WHY the steps are shadow-only and the hairline is its own token: most boxes
+   in a kit already draw a border, and an elevation that bakes a `0 0 0 1px`
+   ring into every step gives those boxes two edges a pixel apart. Compose them
+   where a component drops its border:
+
+     box-shadow: var(--elev-hairline), var(--elev-card);
+
+   WHY each step is stacked rather than one blurred drop: a single shadow reads
+   as a sticker. Depth is several offsets falling off together, which is what
+   the eye reads as distance. They cost nothing extra because every stop is the
+   same colour at a different alpha.
+
+   WHY the blur radii are large and the alphas small: a 4px blur at 20% draws a
+   visible grey edge, which the eye reads as a second border. A 28px blur at 7%
+   is barely a colour anywhere and reads as height. Reach for more blur before
+   more alpha, every time.
+
+   `--elev-tint` is the one knob an app turns. Pure black greys a warm palette
+   out; the hue of the app's own darkest surface keeps the shadow in the
+   family. */
+:root {
+  --elev-tint: oklch(0 0 0);
+
+  /* Resting on the page. A button, a chip, a row. */
+  --elev-btn:
+    0 1px 1px -0.5px color-mix(in oklab, var(--elev-tint) 7%, transparent),
+    0 2px 5px -2px color-mix(in oklab, var(--elev-tint) 6%, transparent);
+
+  /* Sitting on the page. A card, a stage, a panel. */
+  --elev-card:
+    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 7%, transparent),
+    0 4px 9px -3px color-mix(in oklab, var(--elev-tint) 6%, transparent),
+    0 14px 28px -10px color-mix(in oklab, var(--elev-tint) 7%, transparent);
+
+  /* Lifted off the page. A hovered card, a popover, a menu. */
+  --elev-raised:
+    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
+    0 6px 13px -4px color-mix(in oklab, var(--elev-tint) 9%, transparent),
+    0 20px 40px -12px color-mix(in oklab, var(--elev-tint) 12%, transparent);
+
+  /* Floating over a dimmed page. A dialog, a sheet, a command palette. */
+  --elev-overlay:
+    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
+    0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
+    0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
+
+  /* The two edges. A hairline separates a surface from what is behind it; a rim
+     is the light catching its top edge, which is what makes a filled control
+     read as a physical key rather than a coloured rectangle. */
+  --elev-hairline: 0 0 0 1px var(--color-border, var(--border));
+  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 16%, transparent);
+
+  /* A field is the one box that goes in rather than up. */
+  --elev-field: inset 0 1px 2px color-mix(in oklab, var(--elev-tint) 7%, transparent);
+}
+
+/* A dark surface cannot cast a darker shadow than the page it sits on, so the
+   hairline does the separating and the shadow only sinks what is behind it. On
+   dark the hairline is white at a low alpha, which is what reads as a lit edge
+   rather than as a drawn border. */
+.dark {
+  --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
+  --elev-card:
+    0 1px 2px color-mix(in oklab, black 24%, transparent),
+    0 4px 12px -4px color-mix(in oklab, black 30%, transparent);
+  --elev-raised:
+    0 2px 6px color-mix(in oklab, black 30%, transparent),
+    0 10px 24px -6px color-mix(in oklab, black 38%, transparent);
+  --elev-overlay:
+    0 4px 10px color-mix(in oklab, black 34%, transparent),
+    0 24px 56px -12px color-mix(in oklab, black 50%, transparent);
+
+  --elev-hairline: 0 0 0 1px color-mix(in oklab, white 10%, transparent);
+  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
+  --elev-field: inset 0 1px 2px color-mix(in oklab, black 40%, transparent);
+}
+
+/* ── Focus ───────────────────────────────────────────────────
+   One ring, two parts: a solid edge that redraws the control's own outline in
+   the accent, and a soft halo that carries it off the surface. Written as a
+   variable so a component spends one line on it and every control focuses the
+   same way. */
+:root {
+  --ring-color: var(--color-ring, var(--ring));
+  --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
+  /* A solid pixel redrawing the control's own edge, then a wide soft band. At a
+     higher alpha the band reads as a second border rather than as a glow, which
+     is why it is 16% over 4px and not 30% over 2px. */
+  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
+}
+
+/* ── Motion ──────────────────────────────────────────────────
+   The transitions-dev scale, verbatim, so a snippet pasted from that skill and
+   a component written here read from the same names.
+
+   The doctrine in one line: an open is an invitation and a close should get out
+   of the way, so every close is shorter than its open and no close bounces. */
+:root {
+  --duration-stagger: 40ms;
+  --duration-micro: 80ms;
+  --duration-quick: 150ms; /* every close, text swap, tooltip in */
+  --duration-fast: 250ms; /* every open, tabs, icon swap, page slide */
+  --duration-medium: 350ms; /* panel close, toast close */
+  --duration-slow: 400ms; /* panel open, skeleton reveal */
+  --duration-very-slow: 500ms; /* emphasis: badge, text reveal, success check */
+
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); /* all surface motion */
+  --ease-in-out: ease-in-out; /* swaps and cross-fades */
+  --ease-out: ease-out; /* tooltips */
+  --ease-linear: linear; /* shimmer, pulse, spinner */
+
+  --distance-micro: 4px;
+  --distance-small: 6px;
+  --distance-base: 8px;
+  --distance-medium: 12px;
+  --distance-large: 30px;
+
+  --scale-large: 0.96; /* modal */
+  --scale-medium: 0.97; /* dropdown, popover open */
+  --scale-small: 0.98; /* tooltip */
+  --scale-tiny: 0.99; /* dropdown close */
+
+  --blur-small: 2px;
+  --blur-medium: 3px;
+  --blur-large: 8px;
+}
+
+/* Tailwind utility aliases, so `shadow-card`, `duration-fast` and
+   `ease-smooth-out` exist as classes and a component can stay in utilities
+   instead of dropping into a style block for one shadow. */
+@theme inline {
+  --shadow-hairline: var(--elev-hairline);
+  --shadow-btn: var(--elev-btn);
+  --shadow-card: var(--elev-card);
+  --shadow-raised: var(--elev-raised);
+  --shadow-overlay: var(--elev-overlay);
+  --shadow-field: var(--elev-field);
+  --shadow-rim: var(--elev-rim);
+  /* A filled control: the lit top edge and the resting lift, in one class,
+     because the two never appear apart and utilities cannot be stacked. */
+  --shadow-key: var(--elev-rim), var(--elev-btn);
+  /* The composed pair, for a surface that draws no border of its own. */
+  --shadow-edge-card: var(--elev-hairline), var(--elev-card);
+  --shadow-edge-raised: var(--elev-hairline), var(--elev-raised);
+  --shadow-edge-overlay: var(--elev-hairline), var(--elev-overlay);
+
+  --ease-smooth-out: var(--ease-smooth-out);
+
+  /* WHY the durations are re-declared under a second name: Tailwind's
+     `duration-*` utility reads `--transition-duration-*`, not `--duration-*`, so
+     the six names above generated no class at all. `duration-fast` therefore
+     compiled to nothing and the element ended up at `transition-duration: 0s`:
+     no error, no warning, and a component that simply does not animate. The
+     comment at the top of this block had claimed `duration-fast` was a class
+     since the block was written. Found 31 Aug 2026 by probing a live page. */
+  --transition-duration-micro: var(--duration-micro);
+  --transition-duration-quick: var(--duration-quick);
+  --transition-duration-fast: var(--duration-fast);
+  --transition-duration-medium: var(--duration-medium);
+  --transition-duration-slow: var(--duration-slow);
+  --transition-duration-very-slow: var(--duration-very-slow);
+}
+
+/* The bits-ui state variants every primitive in `./shadcn` is written against.
+ *
+ * bits-ui v2 writes `data-checked` / `data-open` and v1 wrote
+ * `data-state="checked"`, so each variant matches both and a component does not
+ * have to know which it is talking to. They live here rather than in a
+ * consumer's stylesheet because the classes that need them ship in this
+ * package: an app that defines only the palette rendered a switch that never
+ * moved. Moved out of upsys `tokens.css` on 14 Sep 2026, with the kit. */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}