@thomasfosterau/components 0.0.0 → 0.1.0

package/dist/ui/Chip.svelte

@@ -0,0 +1,58 @@
+<!-- @component
+A colour swatch beside a short code, for legends, result rows and filter lists.
+-->
+<!--
+  Chip — a colour swatch beside a short code: the unit that appears in a
+  legend, a result row, a filter list. Denser than a `Badge` and always
+  paired with a colour, where a badge is usually paired with a tone.
+
+  ARIA contract: when `title` is given the code is wrapped in `<abbr title>`,
+  so the expansion is available to hover AND to assistive technology — which
+  is the whole reason a three-letter code is acceptable here at all. The
+  swatch is `aria-hidden`: it repeats the colour, which conveys nothing on
+  its own. With `href` the chip is a real link and the code is its accessible
+  name.
+
+  The colour arrives as a token name, never a value — see `colour-token.ts`.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { CHIP_COLOUR_PROPERTY, colourTokenStyle } from "./colour-token.js";
+import { chipSize, chipSwatchSize } from "./tones.js";
+let { label, title, href, colourToken, size = "md", class: className, ...rest } = $props();
+const context = getComponentsContext();
+const style = $derived(colourTokenStyle(CHIP_COLOUR_PROPERTY, colourToken));
+</script>
+
+{#snippet body()}
+  <span
+    aria-hidden="true"
+    class={[
+      'ring-base-content/20 inline-block shrink-0 rounded-full bg-(--chip-colour) ring-1',
+      chipSwatchSize[size],
+    ]}
+  ></span>
+  {#if title !== undefined}
+    <abbr {title} class="no-underline">{label}</abbr>
+  {:else}
+    <span>{label}</span>
+  {/if}
+{/snippet}
+
+{#if href !== undefined}
+  <a
+    {...rest}
+    href={context.href(href)}
+    {style}
+    class={['link link-hover inline-flex items-center font-medium', chipSize[size], className]}
+  >
+    {@render body()}
+  </a>
+{:else}
+  <span
+    {...rest}
+    {style}
+    class={['inline-flex items-center font-medium', chipSize[size], className]}
+  >
+    {@render body()}
+  </span>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ChipSize } from './tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The short code shown in the chip. */
+    label: string;
+    /** The expansion, rendered as the `<abbr>` title. */
+    title?: string | undefined;
+    /** When set, the chip is a link to the subject's page. */
+    href?: string | undefined;
+    /** A CSS custom-property name the app's theme declares (`--party-alp`). */
+    colourToken?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: ChipSize | undefined;
+}
+/** A colour swatch beside a short code, for legends, result rows and filter lists. */
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/ui/ConfirmButton.svelte

@@ -0,0 +1,75 @@
+<!-- @component
+A destructive action behind a two-step inline confirmation.
+-->
+<!--
+  ConfirmButton — a destructive action behind a two-step inline confirm.
+
+  Inline rather than a dialog, deliberately: the confirmation replaces the
+  button in place, so nothing is torn out of the reading order, focus is not
+  trapped, and the page behind it does not need an overlay. Use
+  `ConfirmDialog` instead when the confirmation itself needs to carry content
+  (a form, a list of what will be destroyed).
+
+  ARIA contract: the failure surface is an `Alert` with `live="assertive"` —
+  the reader pressed a button and nothing visible happened, so the reason has
+  to interrupt. Both buttons are `disabled` while the action is in flight, and
+  the confirm button swaps its text to `pendingLabel` rather than emptying
+  itself, so its accessible name never disappears mid-press.
+
+  `action` is a plain promise-returning prop — no Effect in this library. A
+  rejection with an `Error` shows that error's message (the caller's own
+  wording, usually from the server); anything else shows `failureMessage`.
+  On success, `redirectTo` navigates through the components context, so an
+  app gets client-side routing and this component stays ignorant of it.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import Alert from "./Alert.svelte";
+import Button from "./Button.svelte";
+let { action, idleLabel = "Delete", confirmLabel = "Confirm", cancelLabel = "Cancel", pendingLabel = "Working…", confirmMessage = "Are you sure? This cannot be undone.", failureMessage = "That didn’t work. Try again.", tone = "error", redirectTo, class: className } = $props();
+const context = getComponentsContext();
+let confirming = $state(false);
+let pending = $state(false);
+let errorMessage = $state(undefined);
+const beginConfirmation = () => {
+	errorMessage = undefined;
+	confirming = true;
+};
+const cancelConfirmation = () => {
+	if (pending) return;
+	errorMessage = undefined;
+	confirming = false;
+};
+const confirmAction = async () => {
+	pending = true;
+	errorMessage = undefined;
+	try {
+		await action();
+		confirming = false;
+		if (redirectTo !== undefined) await context.navigate(context.href(redirectTo));
+	} catch (error) {
+		errorMessage = error instanceof Error ? error.message : failureMessage;
+	} finally {
+		pending = false;
+	}
+};
+</script>
+
+<div class={['space-y-2', className]}>
+  {#if confirming}
+    <div class="flex flex-wrap items-center gap-2">
+      <p class="text-sm">{confirmMessage}</p>
+      <Button {tone} disabled={pending} loading={pending} onclick={confirmAction}>
+        {pending ? pendingLabel : confirmLabel}
+      </Button>
+      <Button variant="ghost" disabled={pending} onclick={cancelConfirmation}>
+        {cancelLabel}
+      </Button>
+    </div>
+  {:else}
+    <Button {tone} onclick={beginConfirmation}>{idleLabel}</Button>
+  {/if}
+
+  {#if errorMessage !== undefined}
+    <Alert tone="error" live="assertive">{errorMessage}</Alert>
+  {/if}
+</div>

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

@@ -0,0 +1,48 @@
+import type { Tone } from './tones.ts';
+interface Props {
+    /** The destructive action itself. */
+    action: () => Promise<unknown>;
+    /**
+     * The resting button's text.
+     * @defaultValue `'Delete'`
+     */
+    idleLabel?: string | undefined;
+    /**
+     * The confirm button's text.
+     * @defaultValue `'Confirm'`
+     */
+    confirmLabel?: string | undefined;
+    /**
+     * The cancel button's text.
+     * @defaultValue `'Cancel'`
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * The confirm button's text while the action is in flight.
+     * @defaultValue `'Working…'`
+     */
+    pendingLabel?: string | undefined;
+    /**
+     * The question shown beside the confirm and cancel buttons.
+     * @defaultValue `'Are you sure? This cannot be undone.'`
+     */
+    confirmMessage?: string | undefined;
+    /**
+     * Shown when the action rejects with something that is not an `Error`.
+     * @defaultValue `'That didn’t work. Try again.'`
+     */
+    failureMessage?: string | undefined;
+    /**
+     * Tone of the idle and confirm buttons.
+     * @defaultValue `'error'`
+     */
+    tone?: Tone | undefined;
+    /** Navigated to through the components context once `action` resolves. */
+    redirectTo?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A destructive action behind a two-step inline confirmation. */
+declare const ConfirmButton: import("svelte").Component<Props, {}, "">;
+type ConfirmButton = ReturnType<typeof ConfirmButton>;
+export default ConfirmButton;

package/dist/ui/Disclosure.svelte

@@ -0,0 +1,39 @@
+<!-- @component
+A native `<details>` wearing daisyUI’s `collapse`.
+-->
+<!--
+  Disclosure — a native `<details>` wearing daisyUI's `collapse`.
+
+  Hand-rolled disclosure is one of the most commonly broken widgets on the
+  web, and it does not need to be built: `<details>`/`<summary>` already give
+  a focusable trigger, the expanded/collapsed state, keyboard activation and
+  — on a modern browser — find-in-page inside the collapsed content, which no
+  JavaScript implementation matches. So this is NOT on bits-ui: there is
+  nothing for a primitive to add.
+
+  ARIA contract: the platform's. `<summary>` is the button, `open` is the
+  state, and no `aria-expanded` is written by hand (the browser maps it, and
+  a second copy can only be wrong). `open` is bindable, so a caller can drive
+  the state, and the four apps' "open this section because its form failed"
+  case is a one-line binding.
+-->
+<script lang="ts">import { collapseVariant } from "./tones.js";
+let { open = $bindable(false), title, variant = "arrow", contentClass, children, class: className, ...rest } = $props();
+</script>
+
+<details
+  {...rest}
+  bind:open
+  class={['collapse border-base-300 bg-base-100 border', collapseVariant[variant], className]}
+>
+  <summary class="collapse-title font-medium">
+    {#if typeof title === 'string'}
+      {title}
+    {:else}
+      {@render title()}
+    {/if}
+  </summary>
+  <div class={['collapse-content', contentClass]}>
+    {@render children()}
+  </div>
+</details>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type DisclosureVariant } from './tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDetailsElement>, 'title'> {
+    /** Whether the section is expanded. Bindable. */
+    open?: boolean | undefined;
+    /** The summary — its own text, or a snippet for richer markup. */
+    title: string | Snippet<[]>;
+    /**
+     * The expand indicator: an arrow, a plus, or none.
+     * @defaultValue `'arrow'`
+     */
+    variant?: DisclosureVariant | undefined;
+    /** Extra classes on the `collapse-content` wrapper. */
+    contentClass?: string | undefined;
+    /** The content revealed when open. */
+    children: Snippet<[]>;
+}
+/** A native `<details>` wearing daisyUI’s `collapse`. */
+declare const Disclosure: import("svelte").Component<Props, {}, "open">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;

package/dist/ui/EmptyState.svelte

@@ -0,0 +1,37 @@
+<!-- @component
+The quiet card an index or result list shows instead of a bare empty list: a heading, optional copy, icon and call to action.
+-->
+<!--
+  EmptyState — the quiet card an index or a result list shows instead of a
+  bare empty `<ul>`: a heading, optional supporting copy, an optional icon
+  above and an optional call to action below.
+
+  Content-first, not a hero. "Nothing here" is a normal state of a healthy
+  page, and the surface it is drawn on is the same `Card` every other block
+  on the page uses, so an empty list does not look like a failure.
+
+  ARIA contract: `title` is a real heading at `headingLevel` (`h2` by
+  default), so a reader navigating by headings finds out the section is empty
+  instead of finding nothing at all. The icon is decorative and hidden.
+-->
+<script lang="ts">import Card from "./Card.svelte";
+let { title, description, headingLevel = 2, icon, action, class: className, ...rest } = $props();
+</script>
+
+<Card
+  {...rest}
+  as="div"
+  class={className}
+  bodyClass="items-center gap-2 p-8 text-center sm:p-10"
+>
+  {#if icon}
+    <div class="text-base-content/50 mb-2" aria-hidden="true">{@render icon()}</div>
+  {/if}
+  <svelte:element this={`h${headingLevel}`} class="text-2xl font-semibold">{title}</svelte:element>
+  {#if description !== undefined}
+    <p class="text-base-content/70 max-w-prose leading-7">{description}</p>
+  {/if}
+  {#if action}
+    <div class="mt-2">{@render action()}</div>
+  {/if}
+</Card>

package/dist/ui/EmptyState.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 HTMLAttributes<HTMLElement> {
+    /** Short, direct heading for the empty surface ("No results yet"). */
+    title: string;
+    /** Supporting copy explaining the state or the next step. */
+    description?: string | undefined;
+    /**
+     * The heading level, so the page outline stays intact.
+     * @defaultValue `2`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /** Decorative icon rendered above the heading. */
+    icon?: Snippet<[]> | undefined;
+    /** Call to action — a button or a link — rendered under the copy. */
+    action?: Snippet<[]> | undefined;
+}
+/** The quiet card an index or result list shows instead of a bare empty list: a heading, optional copy, icon and call to action. */
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/ui/ExternalLink.svelte

@@ -0,0 +1,38 @@
+<!-- @component
+A link off the site that opens in a new tab with the right `rel`, and says so to assistive technology.
+-->
+<!--
+  ExternalLink — a link off the site, with the `rel` decision made for the
+  call site.
+
+  The `rel` is the reason this is a component and not four lines of markup.
+  An address a member typed into their own profile is untrusted outbound
+  linkage and carries `nofollow`; a resolver URL the site itself composed
+  from a recorded identifier (an ORCID, a DOI) is not, and carries only
+  `noreferrer`. The distinction is invisible when it is wrong, which is
+  exactly the kind of thing that should not be retyped per page. Hence
+  `untrusted` defaults to `true`: the safe answer is the one you get by not
+  thinking about it.
+
+  ARIA contract: `target="_blank"` always pairs with `noreferrer`, and the
+  new tab is ANNOUNCED — a visually hidden "(opens in a new tab)" after the
+  text, so a screen-reader user learns what a sighted user learns from the
+  icon. The icon itself is `aria-hidden`; it says nothing the text does not.
+-->
+<script lang="ts">import { ExternalLink as ExternalLinkIcon } from "@lucide/svelte";
+import { linkVariant } from "./tones.js";
+import VisuallyHidden from "./VisuallyHidden.svelte";
+let { href, variant = "muted", untrusted = true, showIcon = true, newTabLabel = "(opens in a new tab)", children, class: className, ...rest } = $props();
+</script>
+
+<a
+  {...rest}
+  {href}
+  target="_blank"
+  rel={untrusted ? 'noreferrer nofollow' : 'noreferrer'}
+  class={['inline-flex items-center gap-1', linkVariant[variant], className]}
+>
+  {@render children()}
+  <VisuallyHidden>{newTabLabel}</VisuallyHidden>
+  {#if showIcon}<ExternalLinkIcon class="size-3.5 shrink-0" aria-hidden="true" />{/if}
+</a>

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

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type LinkVariant } from './tones.ts';
+interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+    /** The absolute URL. */
+    href: string;
+    /**
+     * The link weight.
+     * @defaultValue `'muted'`
+     */
+    variant?: LinkVariant | undefined;
+    /**
+     * Whether the destination is user-supplied. `true` (the default) adds
+     * `nofollow`; pass `false` only for an address this site composed itself.
+     * @defaultValue `true`
+     */
+    untrusted?: boolean | undefined;
+    /**
+     * Show the trailing new-tab icon.
+     * @defaultValue `true`
+     */
+    showIcon?: boolean | undefined;
+    /**
+     * The announcement appended to the link text, for assistive technology.
+     * @defaultValue `'(opens in a new tab)'`
+     */
+    newTabLabel?: string | undefined;
+    /** The link text; the new-tab notice is appended for assistive technology. */
+    children: Snippet<[]>;
+}
+/** A link off the site that opens in a new tab with the right `rel`, and says so to assistive technology. */
+declare const ExternalLink: import("svelte").Component<Props, {}, "">;
+type ExternalLink = ReturnType<typeof ExternalLink>;
+export default ExternalLink;

package/dist/ui/Heading.svelte

@@ -0,0 +1,58 @@
+<!-- @component
+A heading at any level with a stable `id`, optionally with a copyable anchor link.
+-->
+<!--
+  Heading — a section heading at any level, with a stable `id` so the section
+  is addressable: a table of contents, a "copy link to this section" anchor,
+  a URL fragment someone pasted into a message.
+
+  ARIA contract: a real `<h1>`–`<h6>` at the level the caller names. The level
+  is a PROP and not a consequence of the styling, because the outline is a
+  document structure and the type scale is a visual one; `class` overrides the
+  latter without touching the former. `scroll-mt` keeps a hash target clear of
+  a sticky header. The anchor link, when shown, has a real accessible name
+  (`anchorLabel`); the `#` glyph beside it is decorative.
+
+  The id is derived from `children` AT RENDER when `children` is a string —
+  not measured from the mounted element in an `$effect`, which is how the
+  original did it and which means the server renders a heading with
+  no id at all and every in-page link is dead until hydration. A snippet's
+  text is not knowable before render, so a snippet heading that wants an
+  anchor must be given an explicit `id`; without one the anchor is omitted
+  rather than pointing at nothing.
+-->
+<script lang="ts">import { slugify } from "./slug.js";
+import VisuallyHidden from "./VisuallyHidden.svelte";
+let { level, id, anchor = false, anchorLabel = "Link to this section", children, class: className, ...rest } = $props();
+const headingId = $derived(id ?? (typeof children === "string" ? slugify(children) : undefined));
+const levelClasses = {
+	1: "mt-8 mb-6 text-3xl sm:text-4xl",
+	2: "mt-6 mb-4 text-2xl sm:text-3xl",
+	3: "mt-5 mb-3 text-xl sm:text-2xl",
+	4: "mt-4 mb-3 text-lg sm:text-xl",
+	5: "mt-4 mb-2 text-base sm:text-lg",
+	6: "mt-3 mb-2 text-sm sm:text-base"
+};
+</script>
+
+<svelte:element
+  this={`h${level}`}
+  {...rest}
+  id={headingId}
+  class={['group scroll-mt-16 font-bold', levelClasses[level], className]}
+>
+  {#if typeof children === 'string'}
+    {children}
+  {:else}
+    {@render children()}
+  {/if}
+  {#if anchor && headingId !== undefined}
+    <a
+      href={`#${headingId}`}
+      class="link link-hover text-base-content/40 ml-2 opacity-0 transition-opacity focus:opacity-100 group-hover:opacity-100"
+    >
+      <span aria-hidden="true">#</span>
+      <VisuallyHidden>{anchorLabel}</VisuallyHidden>
+    </a>
+  {/if}
+</svelte:element>

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;