@heyramzi/ui 2.24.0 → 3.0.0

package/src/record/next-up.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type RecordLabels, type RecordNext } from "./types.js";
+interface Props {
+    next?: RecordNext | null;
+    /** Client mode: say which project the next step belongs to. */
+    showProject?: boolean;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    /** ISO date. Decides "late". Defaults to the viewer's today. */
+    today?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/project-list.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type RecordLabels, type RecordSummary, type StageDef } from "./types.js";
+interface Props {
+    projects: RecordSummary[];
+    /** The agency's stages: each project draws its stage's label and tone. */
+    stages: StageDef[];
+    /** A project being looked at, marked in the list. */
+    activeId?: string | null;
+    /** Money shown when a project has none of its own. */
+    currency?: string;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    /** ISO date. Decides "late". Defaults to the viewer's today. */
+    today?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-header.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { Tone } from "../lib/tone.js";
+interface Props {
+    title: string;
+    /** A mark drawn before the title: a logo, an avatar. */
+    logo?: Snippet;
+    /** The stage, in the agency's own word and the tone of its category. */
+    stage?: {
+        label: string;
+        tone: Tone;
+        detail?: string | null;
+    } | null;
+    /** What this record sits under, such as the client of a project. */
+    parent?: {
+        label: string;
+        href: string;
+    } | null;
+    /** Quiet facts after the stage: a value, dates. */
+    facts?: string[];
+    actions?: Snippet;
+    /** Under the title row, for a stat strip. */
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-rail.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+export interface RecordRailTab {
+    id: string;
+    label: string;
+    /** Drawn beside the label, such as the number of comments. Hidden at 0 or when left out. */
+    count?: number;
+    content: Snippet;
+}
+interface Props {
+    tabs: RecordRailTab[];
+    /** The open tab's id. Defaults to the first tab. */
+    value?: string;
+    /** Names the tab list for a screen reader, such as "Task sidebar". */
+    label: string;
+    class?: string;
+    /** Classes for the strip that holds the tab list. */
+    listClass?: string;
+    /** Classes for each tab's panel. */
+    contentClass?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "value">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-shell.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Snippet } from "svelte";
+import { type TabDef } from "../components/segmented/index.js";
+import { type RecordLabels } from "./types.js";
+declare function $$render<T extends string = string>(): {
+    props: {
+        header: Snippet;
+        /** Where we are, next up, stats: whatever sits between the header and the body. */
+        banner?: Snippet;
+        /** The tab row. Put each panel in a `Tabs.Content` from `@heyramzi/ui/shadcn/tabs`. */
+        tabs?: readonly TabDef<T>[];
+        tab?: T;
+        tabsLabel?: string;
+        /** The side rail. Docked at 48rem and wider, a sheet behind one row under that. */
+        rail?: Snippet;
+        /** The sheet's title, read out by screen readers. Defaults to the steps label. */
+        railTitle?: string;
+        /** Fills the narrow row's bar. Leave it out for a row with no progress. */
+        railProgress?: {
+            done: number;
+            total: number;
+        } | null;
+        railOpen?: boolean;
+        children: Snippet;
+        labels?: Partial<RecordLabels>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "tab" | "railOpen";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "tab" | "railOpen";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T extends string = string> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/src/record/record-stats.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { PanelStat } from "../panel/side-panel-types.js";
+interface Props {
+    stats: PanelStat[];
+    /** Sits flush with the record's gutter. Off inside a card. */
+    gutter?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/record-timeline.svelte

@@ -169,7 +169,9 @@
 									{:else}
 										<p class="text-sm leading-snug font-medium wrap-anywhere">
 											{#if event.href}
-												<a href={event.href} class="underline-offset-2 hover:underline"
+												<a
+													href={event.href}
+													class="-my-1 inline-block py-1 underline-offset-2 hover:underline"
 													>{event.title}</a
 												>
 											{:else}

package/src/record/record-timeline.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import { type RecordEvent, type RecordFilterDef, type RecordKindDef, type RecordLabels } from "./types.js";
+interface Props {
+    events: RecordEvent[];
+    kinds?: RecordKindDef[];
+    filters?: RecordFilterDef[];
+    /** The chip picked: `all` or a filter key. */
+    filter?: string;
+    /** Draws a kind's content in place of the default title and body. The time,
+    the project chip and the amount stay the timeline's. */
+    entry?: Record<string, Snippet<[RecordEvent]>>;
+    /** Client mode: a chip on each entry says which project it came from. */
+    showProject?: boolean;
+    /** Entries drawn before the rest fold behind one button. */
+    limit?: number;
+    /** Above the list: a note composer, a status form. */
+    composer?: Snippet;
+    loading?: boolean;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    /** IANA zone for day boundaries. Defaults to the viewer's own. */
+    timeZone?: string;
+    /** ISO date for "Today". Defaults to the viewer's today. */
+    today?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "filter">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/steps-rail.svelte

@@ -243,7 +243,7 @@
 {#snippet marker(kind: StepMarker)}
 	{#if kind === "complete"}
 		<span class="flex size-4 items-center justify-center rounded-full bg-success text-white">
-			<Check class="size-2.5" weight="bold" />
+			<Check aria-hidden="true" class="size-2.5" weight="bold" />
 		</span>
 	{:else if kind === "current"}
 		<span class="rounded-full bg-card p-0.75">
@@ -278,7 +278,7 @@
 							class="relative ml-auto text-muted-foreground"
 							aria-label={t.editSteps}
 						>
-							<DotsThreeVertical class="size-4" weight="bold" />
+							<DotsThreeVertical aria-hidden="true" class="size-4" weight="bold" />
 							{#if hiddenCount > 0}
 								<!-- Opaque, since it sits over the icon's corner. -->
 								<CountChip
@@ -306,9 +306,9 @@
 							>
 								<span class="flex size-4 shrink-0 items-center justify-center">
 									{#if step.hidden}
-										<EyeSlash class="size-3.5 text-muted-foreground" />
+										<EyeSlash aria-hidden="true" class="size-3.5 text-muted-foreground" />
 									{:else}
-										<Eye class="size-3.5" />
+										<Eye aria-hidden="true" class="size-3.5" />
 									{/if}
 								</span>
 								<span
@@ -445,29 +445,29 @@
 								<ContextMenu.Content class="w-48">
 									{#if onRename}
 										<ContextMenu.Item onclick={() => startRename(step)}>
-											<PencilSimple class="mr-2 size-3.5" />
+											<PencilSimple aria-hidden="true" class="mr-2 size-3.5" />
 											{t.rename}
 										</ContextMenu.Item>
 										{#if step.renamed}
 											<ContextMenu.Item onclick={() => onRename(step.id, "")}>
-												<ArrowCounterClockwise class="mr-2 size-3.5" />
+												<ArrowCounterClockwise aria-hidden="true" class="mr-2 size-3.5" />
 												{t.resetName}
 											</ContextMenu.Item>
 										{/if}
 									{/if}
 									{#if onReorder}
 										<ContextMenu.Item onclick={() => applyOrder(nudgeStep(ordered, step.id, -1))}>
-											<ArrowUp class="mr-2 size-3.5" />
+											<ArrowUp aria-hidden="true" class="mr-2 size-3.5" />
 											{t.moveUp}
 										</ContextMenu.Item>
 										<ContextMenu.Item onclick={() => applyOrder(nudgeStep(ordered, step.id, 1))}>
-											<ArrowDown class="mr-2 size-3.5" />
+											<ArrowDown aria-hidden="true" class="mr-2 size-3.5" />
 											{t.moveDown}
 										</ContextMenu.Item>
 									{/if}
 									{#if onToggle}
 										<ContextMenu.Item onclick={() => onToggle(step.id, false)}>
-											<EyeSlash class="mr-2 size-3.5" />
+											<EyeSlash aria-hidden="true" class="mr-2 size-3.5" />
 											{t.hide}
 										</ContextMenu.Item>
 									{/if}

package/src/record/steps-rail.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type RecordLabels, type StepDef, type StepGroupDef } from "./types.js";
+interface Props {
+    steps: StepDef[];
+    /** Group headers in the order to draw them, such as Sales then Delivery. */
+    groups?: StepGroupDef[];
+    activeId?: string | null;
+    onSelect?: (id: string) => void;
+    /** Show or hide a step. Without it the visibility menu isn't drawn. */
+    onToggle?: (id: string, visible: boolean) => void;
+    /** The whole new id order, after a drag or a keyboard move. */
+    onReorder?: (ids: string[]) => void;
+    /** An empty label resets the name. */
+    onRename?: (id: string, label: string) => void;
+    loading?: boolean;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    /** ISO date. Decides "late". Defaults to the viewer's today. */
+    today?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/record/where-we-are.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Tone } from "../lib/tone.js";
+import { type RecordLabels } from "./types.js";
+interface Props {
+    /** The status note. Nothing draws without it. */
+    note?: string | null;
+    /** ISO timestamp of the note. */
+    at?: string | null;
+    actor?: string | null;
+    health?: {
+        label: string;
+        tone: Tone;
+    } | null;
+    /** Client mode: the project this note belongs to. */
+    project?: {
+        name: string;
+        href?: string | null;
+    } | null;
+    labels?: Partial<RecordLabels>;
+    locale?: string;
+    now?: Date | number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

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

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

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

package/src/shadcn/accordion/accordion-trigger.svelte

@@ -35,7 +35,7 @@
 		{:else}
 			<!-- One caret that turns over, not two that swap. A transform and not a
 			     `d:` path morph, which is Chromium-only. -->
-			<CaretDown
+			<CaretDown aria-hidden="true"
 				data-slot="accordion-trigger-icon"
 				class="cn-accordion-trigger-icon pointer-events-none shrink-0 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-aria-expanded/accordion-trigger:rotate-180 motion-reduce:transition-none"
 			/>

package/src/shadcn/accordion/accordion-trigger.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../lib/utils.js";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps["level"];
+    /** Replaces the caret, e.g. a plus that turns into a minus. Style it off
+     * `group-aria-expanded/accordion-trigger:`. */
+    indicator?: Snippet;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

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

package/src/shadcn/alert/alert-description.svelte.d.ts

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

package/src/shadcn/alert/alert-title.svelte.d.ts

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

package/src/shadcn/alert/alert-variants.ts

@@ -6,7 +6,7 @@ export const alertVariants = tv({
     variant: {
       default: "bg-card text-card-foreground",
       destructive:
-        "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+        "text-destructive-ink bg-card *:data-[slot=alert-description]:text-destructive-ink [&>svg]:text-current",
     },
   },
   defaultVariants: {

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

@@ -0,0 +1,10 @@
+import { alertVariants, type AlertVariant } from "./alert-variants.js";
+export { alertVariants, type AlertVariant };
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../lib/utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/alert-dialog/alert-dialog-action.svelte.d.ts

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

package/src/shadcn/alert-dialog/alert-dialog-cancel.svelte.d.ts

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

package/src/shadcn/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import AlertDialogPortal from "./alert-dialog-portal.svelte";
+import { type WithoutChild, type WithoutChildrenOrChild } from "../../lib/utils.js";
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = WithoutChild<AlertDialogPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/alert-dialog/alert-dialog-description.svelte.d.ts

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

package/src/shadcn/alert-dialog/alert-dialog-footer.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /** A hairline and a quiet surface out to both edges and the bottom corners. Last child only. */
+    band?: boolean;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/alert-dialog/alert-dialog-header.svelte.d.ts

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

package/src/shadcn/alert-dialog/alert-dialog-overlay.svelte.d.ts

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

package/src/shadcn/alert-dialog/alert-dialog-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const $$Component: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/alert-dialog/alert-dialog-title.svelte.d.ts

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

package/src/shadcn/alert-dialog/alert-dialog-trigger.svelte.d.ts

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

package/src/shadcn/alert-dialog/alert-dialog.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const $$Component: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-action.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button, type ButtonProps } from "../button/index.js";
 	import { cn } from "../../lib/utils.js";
+	import { getAttachmentTitleId } from "./context.js";
 
 	let {
 		ref = $bindable(null),
@@ -8,16 +9,22 @@
 		variant = "ghost",
 		size = "sm",
 		icon = true,
+		"aria-label": ariaLabel,
 		...restProps
 	}: ButtonProps = $props();
+
+	const titleId = getAttachmentTitleId();
 </script>
 
+<!-- An unnamed icon action reads "Remove", with the card's title as its description. -->
 <Button
 	bind:ref
 	data-slot="attachment-action"
 	{variant}
 	{size}
 	{icon}
+	aria-label={ariaLabel ?? (icon ? "Remove" : undefined)}
+	aria-describedby={icon && !ariaLabel ? titleId : undefined}
 	class={cn("cn-attachment-action", className)}
 	{...restProps}
 />

package/src/shadcn/attachment/attachment-action.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from "../button/index.js";
+declare const $$Component: import("svelte").Component<ButtonProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-actions.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<HTMLDivElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-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<HTMLDivElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-description.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<HTMLSpanElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-group.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<HTMLDivElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-media.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const attachmentMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        icon: string;
+        image: string;
+    };
+}, undefined, "cn-attachment-media relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none bg-muted text-foreground w-10 rounded-lg group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5 group-data-[orientation=vertical]/attachment:w-full group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6!", undefined, undefined, undefined>;
+export type AttachmentMediaVariant = VariantProps<typeof attachmentMediaVariants>["variant"];
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AttachmentMediaVariant;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-title.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { getAttachmentTitleId } from "./context.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		id = getAttachmentTitleId(),
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
@@ -12,6 +14,7 @@
 
 <span
 	bind:this={ref}
+	{id}
 	data-slot="attachment-title"
 	class={cn(
 		"cn-attachment-title block max-w-full min-w-0 truncate group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer font-medium",

package/src/shadcn/attachment/attachment-title.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<HTMLSpanElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment-trigger.svelte

@@ -2,6 +2,7 @@
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { getAttachmentTitleId } from "./context.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,9 +14,13 @@
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
 	} = $props();
 
+	const titleId = getAttachmentTitleId();
+
+	// With no aria-label, the trigger is named by the card's title, since it has no text of its own.
 	const mergedProps = $derived({
 		class: cn("cn-attachment-trigger absolute inset-0 z-10 outline-none", className),
 		"data-slot": "attachment-trigger",
+		"aria-labelledby": restProps["aria-label"] ? undefined : titleId,
 		...restProps,
 	});
 </script>

package/src/shadcn/attachment/attachment-trigger.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/attachment/attachment.svelte

@@ -26,6 +26,7 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { setAttachmentTitleId } from "./context.js";
 
 	let {
 		ref = $bindable(null),
@@ -40,6 +41,9 @@
 		size?: AttachmentSize;
 		orientation?: AttachmentOrientation;
 	} = $props();
+
+	const uid = $props.id();
+	setAttachmentTitleId(`${uid}-title`);
 </script>
 
 <div