@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/ui/Heading.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from './tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> {
+    /** The heading level (`h1`–`h6`); choose it from the outline, not the size. */
+    level: HeadingLevel;
+    /** Explicit anchor id; derived from `children` when it is a string. */
+    id?: string | undefined;
+    /** Render a permalink beside the heading. Needs an id. */
+    anchor?: boolean | undefined;
+    /**
+     * Accessible name of the permalink.
+     * @defaultValue `'Link to this section'`
+     */
+    anchorLabel?: string | undefined;
+    /** The heading text, as a string or a snippet. */
+    children: Snippet<[]> | string;
+}
+/** A heading at any level with a stable `id`, optionally with a copyable anchor link. */
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/ui/Link.svelte

@@ -0,0 +1,34 @@
+<!-- @component
+An in-text anchor in one of three weights; the plain link of the library.
+-->
+<!--
+  Link — an in-text anchor in one of three weights. The plain `<a>` of the
+  library: everything that is a link and not an action goes through it, so
+  that "what a link looks like" is one decision.
+
+  ARIA contract: a native `<a href>`, so role, focus and activation are the
+  platform's. `external` adds `target="_blank"` and `rel="noreferrer"`
+  (which implies `noopener`) — the two always travel together here, because a
+  new tab handed the referrer is the leak. An external link that must also
+  announce the new tab wants `ExternalLink`, which carries the visually
+  hidden warning; this one stays silent so it can be used mid-sentence.
+
+  `href` resolves through the components context unless `external`: an
+  absolute off-site URL is not the app's to rewrite.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { linkVariant } from "./tones.js";
+let { href, variant = "primary", external = false, children, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const resolved = $derived(external ? href : context.href(href));
+</script>
+
+<a
+  {...rest}
+  href={resolved}
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noreferrer' : undefined}
+  class={[linkVariant[variant], className]}
+>
+  {@render children()}
+</a>

package/dist/ui/Link.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type LinkVariant } from './tones.ts';
+interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+    /** The target; an app path is resolved through the components context. */
+    href: string;
+    /**
+     * The link weight.
+     * @defaultValue `'primary'`
+     */
+    variant?: LinkVariant | undefined;
+    /** Open in a new tab with the safe `rel`. */
+    external?: boolean | undefined;
+    /** The link text; the anchor's accessible name. */
+    children: Snippet<[]>;
+}
+/** An in-text anchor in one of three weights; the plain link of the library. */
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/ui/LinkButton.svelte

@@ -0,0 +1,51 @@
+<!-- @component
+An `<a>` styled as a daisyUI `btn`, for navigation that reads as an action; it keeps every link behaviour.
+-->
+<!--
+  LinkButton — an `<a>` wearing the daisyUI `btn`, for navigation that reads
+  as an action ("View results", "Edit"). It is a link, not a button: it
+  navigates, so it must be an anchor and must keep Ctrl-click, middle-click
+  and "copy link address".
+
+  ARIA contract: a disabled link keeps its text but drops its `href`, takes
+  `role="button"` + `aria-disabled="true"` and leaves the tab order with
+  `tabindex="-1"` — an `<a>` without `href` is not focusable and has no role,
+  so both have to be restored by hand for the disabled state to be announced
+  at all. `external` opens a new tab with `rel="noreferrer"`, which implies
+  `noopener`; the pairing is not something a call site should be able to
+  forget.
+
+  `href` resolves through the components context (base path, locale prefix)
+  unless the link is `external`, where the destination is an absolute URL the
+  app has no business rewriting.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { buttonSize, buttonTone, buttonVariant } from "./tones.js";
+let { href, tone, variant = "solid", size = "md", disabled = false, block = false, external = false, icon, children, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const resolved = $derived(external ? href : context.href(href));
+</script>
+
+<a
+  {...rest}
+  href={disabled ? undefined : resolved}
+  role={disabled ? 'button' : undefined}
+  aria-disabled={disabled ? 'true' : undefined}
+  tabindex={disabled ? -1 : undefined}
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noreferrer' : undefined}
+  class={[
+    'btn',
+    tone !== undefined && buttonTone[tone],
+    buttonVariant[variant],
+    buttonSize[size],
+    block && 'btn-block',
+    disabled && 'btn-disabled',
+    className,
+  ]}
+>
+  {#if icon}
+    {@render icon()}
+  {/if}
+  {@render children()}
+</a>

package/dist/ui/LinkButton.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type ButtonVariant, type Size, type Tone } from './tones.ts';
+interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+    /** The target; an app path is resolved through the components context. */
+    href: string;
+    /** Semantic colour. */
+    tone?: Tone | undefined;
+    /**
+     * daisyUI button style.
+     * @defaultValue `'solid'`
+     */
+    variant?: ButtonVariant | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: Size | undefined;
+    /** Renders the button as unavailable without removing its text. */
+    disabled?: boolean | undefined;
+    /** Full-width. */
+    block?: boolean | undefined;
+    /** Open in a new tab with the safe `rel`. */
+    external?: boolean | undefined;
+    /** Leading icon. */
+    icon?: Snippet<[]> | undefined;
+    /** The button text; the anchor's accessible name. */
+    children: Snippet<[]>;
+}
+/** An `<a>` styled as a daisyUI `btn`, for navigation that reads as an action; it keeps every link behaviour. */
+declare const LinkButton: import("svelte").Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

package/dist/ui/Menu.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+A labelled navigation list: a `<nav>` landmark around a daisyUI `menu` of `MenuItem` links.
+-->
+<!--
+  Menu — site navigation: a `<nav>` landmark around a `<ul class="menu">` of
+  links, where the current page marks itself with `aria-current="page"`.
+  Links, list, landmark — no widget, no roving focus, no Escape. Everything
+  stays reachable with nothing but Tab, which is the correct behaviour for
+  navigation and the wrong behaviour for a menu.
+
+  An application menu behind a trigger is `DropdownMenu`, which takes the
+  same `MenuItem`s. The two are separate components so this one imports
+  nothing from bits-ui: a page that only navigates (`Sidebar` included) never
+  loads the dropdown runtime (#129).
+-->
+<script lang="ts">let { label, class: className, children } = $props();
+export {};
+</script>
+
+<nav aria-label={label}>
+  <ul class={['menu w-full gap-1 p-0', className]}>
+    {@render children()}
+  </ul>
+</nav>

package/dist/ui/Menu.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Accessible name of the navigation landmark. */
+    label: string;
+    /** Extra classes on the `<ul class="menu">`. */
+    class?: string | undefined;
+    /** The `MenuItem`s. */
+    children: Snippet<[]>;
+}
+/** A labelled navigation list: a `<nav>` landmark around a daisyUI `menu` of `MenuItem` links. */
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/ui/MenuCheckboxItem.svelte

@@ -0,0 +1,33 @@
+<!-- @component
+An on/off entry of a `DropdownMenu` or `ContextMenu` (`role="menuitemcheckbox"`).
+-->
+<!--
+  MenuCheckboxItem — a setting toggled from a menu ("Show archived"). It
+  renders the checkbox item part its enclosing `DropdownMenu` or
+  `ContextMenu` lends it through context (`menu-parts/CheckboxItemPart.svelte`),
+  so this file imports nothing from bits-ui and costs a navigation-only page
+  nothing (#129).
+
+  ARIA contract: `role="menuitemcheckbox"` with `aria-checked` from bits-ui;
+  the check mark is `aria-hidden`. A checkbox item belongs to an application
+  menu, not a navigation list, so outside a `DropdownMenu` / `ContextMenu` it
+  renders nothing.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { checked = $bindable(false), onCheckedChange, disabled = false, class: className, children } = $props();
+const parts = getMenuParts();
+const change = (next) => {
+	checked = next;
+	onCheckedChange?.(next);
+};
+</script>
+
+{#if parts}
+  <parts.checkboxItem
+    {checked}
+    onCheckedChange={change}
+    {disabled}
+    class={className}
+    label={children}
+  />
+{/if}

package/dist/ui/MenuCheckboxItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * Whether the item is checked. Bindable.
+     * @defaultValue `false`
+     */
+    checked?: boolean | undefined;
+    /** Called with the next state when the reader toggles it. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The item's label. */
+    children: Snippet<[]>;
+}
+/** An on/off entry of a `DropdownMenu` or `ContextMenu` (`role="menuitemcheckbox"`). */
+declare const MenuCheckboxItem: import("svelte").Component<Props, {}, "checked">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;

package/dist/ui/MenuItem.svelte

@@ -0,0 +1,73 @@
+<!-- @component
+One entry of a `Menu` (a navigation link), or of a `DropdownMenu` or `ContextMenu` (a bits-ui menu item).
+-->
+<!--
+  MenuItem — one entry of a `Menu`, `DropdownMenu` or `ContextMenu`; which
+  one is decided by the enclosing menu, never by a prop.
+
+  In `nav` mode it is a plain `<li><a>`: the current page takes daisyUI's
+  `menu-active` AND `aria-current="page"`, because the highlight is a
+  colour and the attribute is what says so out loud. `current` overrides the
+  context's `isCurrent(href)`, which is what an app without a router-aware
+  context uses.
+
+  Inside a `DropdownMenu` or `ContextMenu` it renders the item part that menu lends it
+  (`menu-parts/ItemPart.svelte`, through context), which goes through
+  bits-ui's `DropdownMenu.Item` `child` snippet, so the element is still the
+  caller's own `<a>` or `<button>` — carrying bits-ui's `role="menuitem"`, its
+  focus management and its selection handling — rather than a `<div>`
+  pretending to be one. This file imports nothing from bits-ui, so a
+  navigation-only page never loads the dropdown runtime (#129). An item with
+  an `href` is a link and must stay a link (middle-click, "open in new tab");
+  an item without one is a button.
+
+  ARIA contract: inside a `DropdownMenu` the `<li>` wrapper is `role="none"`
+  so it does not sit between `role="menu"` and `role="menuitem"`, and
+  `disabled` is bits-ui's (skipped by arrow keys, not activatable). In a
+  navigation list `disabled` is `aria-disabled` + no `href`, where there is
+  no widget to skip.
+  The `icon` snippet is decorative — the label carries the meaning.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { href, onSelect, current, disabled = false, icon, class: className, children } = $props();
+const context = getComponentsContext();
+const parts = getMenuParts();
+const resolved = $derived(href === undefined ? undefined : context.href(href));
+// bits-ui's `onSelect` is not optional-friendly under
+// `exactOptionalPropertyTypes`; a stable wrapper is simpler than a spread.
+const select = () => onSelect?.();
+const isCurrent = $derived(current ?? (resolved === undefined ? false : context.isCurrent(resolved)));
+</script>
+
+{#snippet label()}
+  {#if icon}<span class="size-5 shrink-0" aria-hidden="true">{@render icon()}</span>{/if}
+  {@render children()}
+{/snippet}
+
+{#if parts}
+  <parts.item
+    href={resolved}
+    current={isCurrent}
+    {disabled}
+    onSelect={select}
+    class={className}
+    {label}
+  />
+{:else}
+  <li class={className}>
+    {#if resolved === undefined}
+      <button type="button" {disabled} onclick={select}>{@render label()}</button>
+    {:else}
+      <a
+        href={disabled ? undefined : resolved}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-current={isCurrent ? 'page' : undefined}
+        class:menu-active={isCurrent}
+        onclick={select}
+      >
+        {@render label()}
+      </a>
+    {/if}
+  </li>
+{/if}

package/dist/ui/MenuItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Where the item navigates. Omitted, the item is a button. */
+    href?: string | undefined;
+    /** Called when the item is chosen. */
+    onSelect?: (() => void) | undefined;
+    /** Whether this item is the current page; defaults to the context's answer. */
+    current?: boolean | undefined;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Leading icon. Decorative. */
+    icon?: Snippet<[]> | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The item's label. */
+    children: Snippet<[]>;
+}
+/** One entry of a `Menu` (a navigation link), or of a `DropdownMenu` or `ContextMenu` (a bits-ui menu item). */
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/ui/MenuRadioGroup.svelte

@@ -0,0 +1,25 @@
+<!-- @component
+A set of mutually exclusive `MenuRadioItem`s in a `DropdownMenu` or `ContextMenu`.
+-->
+<!--
+  MenuRadioGroup — one choice from a few, made in a menu ("Sort by: name,
+  date, size"). It renders the radio group part its enclosing `DropdownMenu`
+  or `ContextMenu` lends it through context (`menu-parts/RadioGroupPart.svelte`),
+  so this file imports nothing from bits-ui (#129).
+
+  ARIA contract: a `role="group"` named by its visible `label` heading, around
+  `role="menuitemradio"` items, exactly one `aria-checked`. Outside a
+  `DropdownMenu` / `ContextMenu` it renders nothing.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { value = $bindable(""), onValueChange, label, class: className, children } = $props();
+const parts = getMenuParts();
+const change = (next) => {
+	value = next;
+	onValueChange?.(next);
+};
+</script>
+
+{#if parts}
+  <parts.radioGroup {value} onValueChange={change} {label} class={className} {children} />
+{/if}

package/dist/ui/MenuRadioGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /**
+     * The chosen item's value; empty string when none is chosen. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /** Called with the chosen value. */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Visible group heading; also its accessible name. */
+    label?: string | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The `MenuRadioItem`s. */
+    children: Snippet<[]>;
+}
+/** A set of mutually exclusive `MenuRadioItem`s in a `DropdownMenu` or `ContextMenu`. */
+declare const MenuRadioGroup: import("svelte").Component<Props, {}, "value">;
+type MenuRadioGroup = ReturnType<typeof MenuRadioGroup>;
+export default MenuRadioGroup;

package/dist/ui/MenuRadioItem.svelte

@@ -0,0 +1,20 @@
+<!-- @component
+One option of a `MenuRadioGroup` (`role="menuitemradio"`).
+-->
+<!--
+  MenuRadioItem — one option of a `MenuRadioGroup`. It renders the radio
+  item part its enclosing `DropdownMenu` or `ContextMenu` lends it through
+  context (`menu-parts/RadioItemPart.svelte`), so this file imports nothing
+  from bits-ui (#129).
+
+  ARIA contract: `role="menuitemradio"` with `aria-checked`; the dot is
+  `aria-hidden`. Outside a `DropdownMenu` / `ContextMenu` it renders nothing.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { value, disabled = false, class: className, children } = $props();
+const parts = getMenuParts();
+</script>
+
+{#if parts}
+  <parts.radioItem {value} {disabled} class={className} label={children} />
+{/if}

package/dist/ui/MenuRadioItem.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** The value this item chooses in its `MenuRadioGroup`. */
+    value: string;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The item's label. */
+    children: Snippet<[]>;
+}
+/** One option of a `MenuRadioGroup` (`role="menuitemradio"`). */
+declare const MenuRadioItem: import("svelte").Component<Props, {}, "">;
+type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
+export default MenuRadioItem;

package/dist/ui/MenuSeparator.svelte

@@ -0,0 +1,27 @@
+<!-- @component
+A rule between groups of `MenuItem`s.
+-->
+<!--
+  MenuSeparator — a rule between groups of `MenuItem`s.
+
+  ARIA contract: a real `role="separator"`, which is what tells a screen
+  reader the grouping exists at all; a bare styled `<li>` is a line sighted
+  readers can see and nobody else can. Inside a `DropdownMenu` or `ContextMenu` it renders the
+  separator part that menu lends it through context: bits-ui's own separator
+  (which also marks it non-focusable for the menu's arrow-key navigation),
+  wrapped in a `role="none"` `<li>` so the presentational list item stays out
+  of the accessibility tree. This file imports nothing from bits-ui (#129).
+
+  Outside a menu, use `Divider`: it is the free-standing rule, and this one
+  must stay an `<li>` inside the menu's list.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { class: className } = $props();
+const parts = getMenuParts();
+</script>
+
+{#if parts}
+  <parts.separator class={className} />
+{:else}
+  <li role="separator" class={['divider my-1 h-px', className]}></li>
+{/if}

package/dist/ui/MenuSeparator.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A rule between groups of `MenuItem`s. */
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/ui/MenuSub.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+A submenu of a `DropdownMenu` or `ContextMenu`: an item that opens a further menu.
+-->
+<!--
+  MenuSub — an item that opens a further menu ("Move to ▸"). It renders the
+  submenu part its enclosing `DropdownMenu` or `ContextMenu` lends it through
+  context (`menu-parts/SubPart.svelte`), so this file imports nothing from
+  bits-ui (#129). The children are the same `MenuItem`s, separators and
+  checkbox / radio items the parent menu takes.
+
+  ARIA contract: the opener is a `role="menuitem"` with
+  `aria-haspopup="menu"` and `aria-expanded`; → opens the submenu and focuses
+  its first item, ← closes it and returns focus to the opener. Outside a
+  `DropdownMenu` / `ContextMenu` it renders nothing: a navigation list has no
+  submenus to open.
+-->
+<script lang="ts">import { getMenuParts } from "./menu-parts/menu-parts.js";
+let { label, disabled = false, class: className, children } = $props();
+const parts = getMenuParts();
+</script>
+
+{#if parts}
+  <parts.sub {label} {disabled} class={className} {children} />
+{/if}

package/dist/ui/MenuSub.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Text of the item that opens the submenu. */
+    label: string;
+    /** Shown but not activatable. */
+    disabled?: boolean | undefined;
+    /** Extra classes on the `<li>`. */
+    class?: string | undefined;
+    /** The submenu's items. */
+    children: Snippet<[]>;
+}
+/** A submenu of a `DropdownMenu` or `ContextMenu`: an item that opens a further menu. */
+declare const MenuSub: import("svelte").Component<Props, {}, "">;
+type MenuSub = ReturnType<typeof MenuSub>;
+export default MenuSub;

package/dist/ui/Popover.svelte

@@ -0,0 +1,63 @@
+<!-- @component
+A small floating panel anchored to a trigger, on bits-ui’s `Popover`.
+-->
+<!--
+  Popover — a small floating panel anchored to a trigger, on bits-ui's
+  `Popover`.
+
+  Unlike a tooltip, a popover holds INTERACTIVE content: it takes focus, it
+  closes on Escape and on an outside click, and it returns focus to the
+  trigger. All of that is bits-ui's — it is precisely the hand-rolled part
+  that is always subtly wrong.
+
+  ARIA contract: bits-ui gives the trigger `aria-haspopup="dialog"` and
+  `aria-expanded` and wires `aria-controls` to the panel, but it leaves the
+  panel's own role to the caller — so `role="dialog"` is set here, where the
+  focus trap and the Escape handler that make the role true already are. When
+  `title` is set the panel is `aria-labelledby` that heading, so it announces
+  what it is on open; without a title, label it from the call site. The close button is
+  a labelled control, not a bare glyph.
+
+  Both snippets take the caller's own element: `trigger` receives the props
+  to spread, so an existing `Button` keeps its own markup.
+-->
+<script lang="ts">import { X } from "@lucide/svelte";
+import { Popover } from "bits-ui";
+import Button from "./Button.svelte";
+import VisuallyHidden from "./VisuallyHidden.svelte";
+let { open = $bindable(false), side = "bottom", align = "center", sideOffset = 8, title, closeLabel = "Close", class: className, trigger, children } = $props();
+const titleId = $props.id();
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      {@render trigger({ props })}
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Portal>
+    <Popover.Content
+      {side}
+      {align}
+      {sideOffset}
+      role="dialog"
+      aria-labelledby={title === undefined ? undefined : titleId}
+      class={['card card-border bg-base-100 rounded-box z-50 w-72 p-4 shadow-md', className]}
+    >
+      {#if closeLabel !== undefined}
+        <Popover.Close>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="sm" class="absolute top-2 right-2 btn-square">
+              <X class="size-4" aria-hidden="true" />
+              <VisuallyHidden>{closeLabel}</VisuallyHidden>
+            </Button>
+          {/snippet}
+        </Popover.Close>
+      {/if}
+      {#if title !== undefined}
+        <p id={titleId} class="mb-2 pr-8 font-semibold">{title}</p>
+      {/if}
+      {@render children()}
+    </Popover.Content>
+  </Popover.Portal>
+</Popover.Root>

package/dist/ui/Popover.svelte.d.ts

@@ -0,0 +1,40 @@
+import { Popover } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the panel is open. Bindable. */
+    open?: boolean | undefined;
+    /**
+     * Which side of the trigger the panel opens on.
+     * @defaultValue `'bottom'`
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Alignment against the trigger along that side.
+     * @defaultValue `'center'`
+     */
+    align?: 'start' | 'center' | 'end' | undefined;
+    /**
+     * Distance in pixels from the trigger.
+     * @defaultValue `8`
+     */
+    sideOffset?: number | undefined;
+    /** Heading for the panel; becomes its accessible name. */
+    title?: string | undefined;
+    /**
+     * Accessible name of the close button. Omit to hide the button.
+     * @defaultValue `'Close'`
+     */
+    closeLabel?: string | undefined;
+    /** Extra classes on the panel. */
+    class?: string | undefined;
+    /** The trigger — the caller's own element, spreading `props` onto it. */
+    trigger: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /** The panel body, under `title` when one is given. */
+    children: Snippet<[]>;
+}
+/** A small floating panel anchored to a trigger, on bits-ui’s `Popover`. */
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;