@heyramzi/ui 2.24.0 → 3.0.0

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

@@ -0,0 +1,17 @@
+import type { SegmentContent } from "./segment.svelte";
+/** One destination. See `SegmentContent` for everything a segment can say. */
+export type SegmentedNavItem = SegmentContent & {
+    href: string;
+};
+interface Props {
+    items: readonly SegmentedNavItem[];
+    /** The href that is current. Compared after trailing slashes are dropped. */
+    current: string;
+    ariaLabel: string;
+    /** Fill the row rather than sit at its natural width. */
+    block?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -79,6 +79,7 @@
 	{#snippet trigger()}
 		{label}
 		<CaretDown
+			aria-hidden="true"
 			class={cn(
 				"shrink-0 transition-transform duration-150 group-data-[state=open]/segment:rotate-180",
 				"size-3.5",

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

@@ -0,0 +1,37 @@
+import { type SegmentedVariant } from "./segmented.js";
+import type { SegmentContent } from "./segment.svelte";
+declare function $$render<V extends string>(): {
+    props: {
+        items: readonly (SegmentContent & {
+            value: V;
+        })[];
+        onSelect: (value: V) => void;
+        /** What the segment says. Translate at the call site. */
+        label?: string;
+        fill?: boolean;
+        variant?: SegmentedVariant;
+        searchPlaceholder?: string;
+        emptyLabel?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<V extends string> = InstanceType<typeof $$Component<V>>;
+export default $$Component;

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;