@heyramzi/ui 3.1.0 → 3.2.0

package/src/shadcn/native-select/native-select.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import { CaretDown } from "phosphor-svelte";
+
+	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes, HTMLSelectElement>, "size"> & {
+		size?: "sm" | "default";
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		children,
+		...restProps
+	}: NativeSelectProps = $props();
+</script>
+
+<div
+	class={cn(
+		"group/native-select relative w-fit has-[select:disabled]:opacity-50",
+		className,
+	)}
+	data-slot="native-select-wrapper"
+	data-size={size}
+>
+	<!-- The kit's Select trigger sizes: 32px, 28px small, so the two read as one control. -->
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		data-size={size}
+		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] select-none aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:text-[0.8rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<CaretDown
+		size={16}
+		aria-hidden="true"
+		data-slot="native-select-icon"
+		class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+	/>
+</div>

package/src/shadcn/native-select/native-select.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLSelectAttributes } from "svelte/elements";
+type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes, HTMLSelectElement>, "size"> & {
+    size?: "sm" | "default";
+};
+declare const $$Component: import("svelte").Component<NativeSelectProps, {}, "value" | "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/index.ts

@@ -0,0 +1,31 @@
+import Content from "./pagination-content.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Next from "./pagination-next.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import Previous from "./pagination-previous.svelte";
+import Root from "./pagination.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton, // old
+	NextButton, // old
+	Ellipsis,
+	Previous,
+	Next,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton, // old
+	NextButton as PaginationNextButton, // old
+	Ellipsis as PaginationEllipsis,
+	Previous as PaginationPrevious,
+	Next as PaginationNext,
+};

package/src/shadcn/pagination/pagination-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn("gap-1 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>

package/src/shadcn/pagination/pagination-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLUListElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DotsThree } from "phosphor-svelte";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	aria-hidden="true"
+	data-slot="pagination-ellipsis"
+	class={cn("size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
+	{...restProps}
+>
+	<DotsThree aria-hidden="true" />
+	<span class="sr-only">More pages</span>
+</span>

package/src/shadcn/pagination/pagination-ellipsis.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { WithElementRef } from "../../lib/utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+	{@render children?.()}
+</li>

package/src/shadcn/pagination/pagination-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../lib/utils.js";
+import type { HTMLLiAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLLiAttributes>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-link.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { buttonVariants, type ButtonSize } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		isActive,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps & {
+		size?: ButtonSize;
+		isActive: boolean;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	{page}
+	aria-current={isActive ? "page" : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
+	data-size={size}
+	class={cn(
+		buttonVariants({ size, icon: true, variant: isActive ? "outline" : "ghost" }),
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.Page>

package/src/shadcn/pagination/pagination-link.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+import { type ButtonSize } from "../button/index.js";
+type $$ComponentProps = PaginationPrimitive.PageProps & {
+    size?: ButtonSize;
+    isActive: boolean;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-next-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretRight } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<span>Next</span>
+	<CaretRight
+		aria-hidden="true"
+		class={cn("cn-rtl-flip size-4", className)}
+	/>
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pr-2!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.NextButton>

package/src/shadcn/pagination/pagination-next-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.NextButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-next.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretRight } from "phosphor-svelte";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: "ghost", size: "default" }), "pr-2!", className)}
+	{...restProps}
+>
+	<span class="hidden sm:block">Next</span>
+	<CaretRight
+		aria-hidden="true"
+		data-icon="inline-end"
+		class="cn-rtl-flip"
+	/>
+</PaginationPrimitive.NextButton>

package/src/shadcn/pagination/pagination-next.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.NextButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-prev-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretLeft } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<CaretLeft
+		aria-hidden="true"
+		class={cn("cn-rtl-flip size-4", className)}
+	/>
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pl-2!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-prev-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-previous.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretLeft } from "phosphor-svelte";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(
+		buttonVariants({ variant: "ghost", size: "default" }),
+		"pl-2!",
+		className
+	)}
+	{...restProps}
+>
+	<CaretLeft
+		aria-hidden="true"
+		data-icon="inline-start"
+		class="cn-rtl-flip"
+	/>
+	<span class="hidden sm:block">Previous</span>
+</PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-previous.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
+</script>
+
+<PaginationPrimitive.Root
+	bind:ref
+	bind:page
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	{count}
+	{perPage}
+	{siblingCount}
+	class={cn("mx-auto flex w-full justify-center", className)}
+	{...restProps}
+/>

package/src/shadcn/pagination/pagination.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.RootProps, {}, "ref" | "page">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/Controls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Toolbar } from "bits-ui";
 	import type { DeckController } from "./deck-controller.svelte.js";
 
 	interface Props {
@@ -26,44 +27,46 @@
 	disabled = false,
 	pressed?: boolean,
 )}
-	<button
-		type="button"
-		class="deck__button"
-		{onclick}
-		{disabled}
-		aria-label={label}
-		aria-pressed={pressed}
-	>
-		<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
-			<path
-				d={icons[icon]}
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.75"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-		</svg>
-	</button>
+	<Toolbar.Button {onclick} {disabled} aria-label={label} aria-pressed={pressed}>
+		{#snippet child({ props })}
+			<button {...props} class="deck__button">
+				<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+					<path
+						d={icons[icon]}
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.75"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		{/snippet}
+	</Toolbar.Button>
 {/snippet}
 
-<div class="deck__controls deck__chrome">
-	{@render button("prev", deck.labels.previous, () => deck.prev(), deck.atStart)}
-	<span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
-	{@render button("next", deck.labels.next, () => deck.next(), deck.atEnd)}
-	<span class="deck__divider" aria-hidden="true"></span>
-	{@render button(
-		"overview",
-		deck.labels.overview,
-		() => deck.toggleOverview(),
-		false,
-		deck.overview,
-	)}
-	{#if onPresenter}
-		{@render button("presenter", deck.labels.presenter, onPresenter)}
-	{/if}
-	{@render button("fullscreen", deck.labels.fullscreen, onFullscreen)}
-</div>
+<!-- The arrows are the toolbar's while a control has focus, so they move along it, not the deck. -->
+<Toolbar.Root>
+	{#snippet child({ props })}
+		<div {...props} class="deck__controls deck__chrome">
+			{@render button("prev", deck.labels.previous, () => deck.prev(), deck.atStart)}
+			<span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
+			{@render button("next", deck.labels.next, () => deck.next(), deck.atEnd)}
+			<span class="deck__divider" aria-hidden="true"></span>
+			{@render button(
+				"overview",
+				deck.labels.overview,
+				() => deck.toggleOverview(),
+				false,
+				deck.overview,
+			)}
+			{#if onPresenter}
+				{@render button("presenter", deck.labels.presenter, onPresenter)}
+			{/if}
+			{@render button("fullscreen", deck.labels.fullscreen, onFullscreen)}
+		</div>
+	{/snippet}
+</Toolbar.Root>
 
 <style>
 	@layer theme, base, components, utilities;

package/src/slides/Deck.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import "./theme.css";
+	import { Progress } from "bits-ui";
 	import { flushSync, onMount, setContext, untrack } from "svelte";
 	import { attachBridge, attachChannel, attachUrlSync } from "./bridges.js";
 	import Controls from "./Controls.svelte";
@@ -205,17 +206,19 @@
 	</div>
 
 	{#if progress}
-		<div
-			class="deck__progress deck__chrome"
-			role="progressbar"
+		<Progress.Root
+			min={1}
+			max={deck.ordinal.of}
+			value={deck.ordinal.n}
 			aria-label={deck.labels.progress}
-			aria-valuemin="1"
-			aria-valuemax={deck.ordinal.of}
-			aria-valuenow={deck.ordinal.n}
 			aria-valuetext={deck.labels.slide(deck.ordinal.n, deck.ordinal.of)}
 		>
-			<div class="deck__progress-fill" style:transform="scaleX({deck.progress})"></div>
-		</div>
+			{#snippet child({ props })}
+				<div {...props} class="deck__progress deck__chrome">
+					<div class="deck__progress-fill" style:transform="scaleX({deck.progress})"></div>
+				</div>
+			{/snippet}
+		</Progress.Root>
 	{/if}
 
 	{#if controls}

package/src/thread/thread.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import { Toggle } from "bits-ui";
 	import { ArrowBendDownRight, Check, MapPin, PencilSimple, Trash } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
 	import { focusAfterRender } from "../lib/focus.js";
@@ -338,14 +339,20 @@
 			{labels.title}
 		</h2>
 		{#if resolved > 0}
-			<Button
-				variant="ghost"
-				size="sm"
-				aria-expanded={showResolved}
-				onclick={() => (showResolved = !showResolved)}
-			>
-				{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
-			</Button>
+			<!-- A filter on the list, so it reports pressed, not expanded. The wash it had as an
+			     expanded ghost button moves to aria-pressed. -->
+			<Toggle.Root bind:pressed={showResolved}>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="ghost"
+						size="sm"
+						class="aria-pressed:bg-foreground/6 aria-pressed:text-foreground"
+					>
+						{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
+					</Button>
+				{/snippet}
+			</Toggle.Root>
 		{/if}
 	</div>
 

package/src/work/detail/task-detail.svelte

@@ -159,7 +159,7 @@
 								variant="text"
 								onclick={startTitle}
 								disabled={!onTitleChange}
-								aria-label={labels.editTitle}
+								aria-label="{labels.editTitle}: {title}"
 								class={cn(
 									"group -mx-2 -my-1 px-2 py-1 text-2xl leading-tight font-semibold tracking-tight disabled:opacity-100",
 									!onTitleChange && "hover:bg-transparent",

package/src/work/gantt/gantt-task-row.svelte

@@ -140,9 +140,8 @@
 			</button>
 		{:else if !row.own}
 			<!-- A parent with no dates of its own: the span of what is below it. Not draggable. -->
-			<div
-				role="button"
-				tabindex="0"
+			<button
+				type="button"
 				aria-label="{title}, {describe(span)}"
 				title="{title}, {describe(span)}"
 				class={cn(
@@ -155,11 +154,9 @@
 				style:width="{barWidth(span, layout)}px"
 				style:height="{Math.max(layout.rowHeight - 24, 10)}px"
 				onclick={() => onSelect?.(row.id)}
-				onkeydown={(e) =>
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), onSelect?.(row.id))}
 				onpointerenter={() => onHover(row.id, true)}
 				onpointerleave={() => onHover(row.id, false)}
-			></div>
+			></button>
 		{:else}
 			<GanttBar
 				id={row.id}

package/src/work/inbox/inbox-card.svelte

@@ -28,6 +28,7 @@
 	import InboxTraceView from "./inbox-trace.svelte";
 	import { TagChip } from "../../components/chip/index.js";
 	import { workLooks } from "../../components/work-parts/looks.js";
+	import { measureClamp } from "../../record/measure-clamp.js";
 	import { FolderSimple } from "phosphor-svelte";
 	import { Copied } from "../../components/copy/copied.svelte.js";
 	import type { InboxDraftEdits, InboxItem, InboxVerdict } from "./inbox-types.js";
@@ -68,10 +69,7 @@
 	// for a link the host already shows.
 	let hasTrace = $derived(item.trace.evidence.length > 0 || !!why);
 	let expanded = $state(false);
-	let longCommand = $derived(
-		!!facts.command &&
-			(facts.command.text.length > 240 || facts.command.text.split("\n").length > 3),
-	);
+	let commandCut = $state(false);
 
 	let pickedDraft = $state<string>();
 	let edits = $state<InboxDraftEdits>({});
@@ -210,13 +208,17 @@
 						<!-- The padding sits on a wrapper: on the clamped box itself, the 4th line showed through it. -->
 						<div class={cn(workLooks.inset, "w-full px-2.5 py-2")}>
 							<pre
+								{@attach measureClamp(
+									() => expanded,
+									(cut) => (commandCut = cut),
+								)}
 								class={cn(
 									"text-foreground font-mono text-xs leading-5 break-words whitespace-pre-wrap",
 									!expanded && "line-clamp-3",
 								)}><span class="text-muted-foreground select-none"
 									>{facts.command.tool} </span>{facts.command.text}</pre>
 						</div>
-						{#if longCommand}
+						{#if commandCut || expanded}
 							<button
 								type="button"
 								class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline"