@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/fields/NumberField.svelte.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+import { type NumberLocales } from './number-format.ts';
+interface Props extends Omit<HTMLInputAttributes, 'value' | 'type' | 'size' | 'min' | 'max' | 'step' | 'inputmode' | 'children'> {
+    /** The number, or `undefined` while the field is empty. Bindable. */
+    value?: number | undefined;
+    /** The lowest value; also what Home goes to. */
+    min?: number | undefined;
+    /** The highest value; also what End goes to. */
+    max?: number | undefined;
+    /**
+     * Increment for the buttons and the arrow keys.
+     * @defaultValue `1`
+     */
+    step?: number | undefined;
+    /**
+     * Increment for Page Up / Page Down.
+     * @defaultValue `step * 10`
+     */
+    largeStep?: number | undefined;
+    /** How the value is displayed and parsed, e.g. `{ style: 'unit', unit: 'centimeter' }`, `{ style: 'percent' }`, `{ style: 'currency', currency: 'AUD' }`. */
+    formatOptions?: Intl.NumberFormatOptions | undefined;
+    /** BCP 47 locale(s) to format and parse in; falls back to the context's `locale()`. */
+    locales?: NumberLocales;
+    /**
+     * Show the − / + buttons.
+     * @defaultValue `true`
+     */
+    showStepper?: boolean | undefined;
+    /**
+     * Accessible name of the − button.
+     * @defaultValue `'Decrease'`
+     */
+    decrementLabel?: string | undefined;
+    /**
+     * Accessible name of the + button.
+     * @defaultValue `'Increase'`
+     */
+    incrementLabel?: string | undefined;
+    /** Called with the committed number on blur, Enter or a step — not on every keystroke. */
+    onCommit?: ((value: number | undefined) => void) | undefined;
+    /** Posts the raw number (not the formatted text) under this name, through a hidden input. */
+    name?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /**
+     * Disables the input and both buttons.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** `FieldControl`: the input's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the input is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and `input-error`.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+}
+/** An exact number the reader types or nudges, shown locale-formatted (units, percent, currency) with − / + stepper buttons: the APG spinbutton. */
+declare const NumberField: import("svelte").Component<Props, {}, "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/fields/PasswordInput.svelte

@@ -0,0 +1,95 @@
+<!-- @component
+A password field with a "Show password" toggle and the `autocomplete` a password manager needs to fill or generate it.
+-->
+<!--
+  PasswordInput — a `TextInput`-styled password field inside a daisyUI
+  `input` composite, with a trailing toggle that flips the input between
+  `type="password"` and `type="text"`, and a `purpose` prop that sets
+  `autocomplete` to `current-password` or `new-password`, which is what makes
+  a password manager fill (sign-in) or offer to generate (sign-up).
+
+  Why not a `revealable` prop on `TextInput`: `TextInput` IS a bare `<input>`,
+  and a toggle needs a wrapper and a button, which would move where `class`
+  and `...rest` land for every existing caller. So this follows `SearchInput`,
+  the composite-input precedent: a `<div class="input">` (not a `<label>`,
+  which would fold the toggle's name into the input's accessible name when
+  the field sits inside `FormField`), the native input inside it, a trailing
+  button. `...rest` (`id`, `name`, `minlength`, `aria-*`, `data-*`) goes on
+  the inner input, the element a label, a test and a form need; `class` goes
+  on the wrapper and `inputClass` on the input. `passwordrules` is passed
+  through when given, never defaulted.
+
+  ARIA contract: the toggle is an APG button with `aria-pressed` — a real
+  `<button type="button">` (so it never submits the form) with a CONSTANT
+  name, `showLabel`, and a pressed state ("Show password, toggle button,
+  pressed"), rather than a name that swaps between "Show" and "Hide", which
+  some screen readers do not re-announce. It `aria-controls` the input; its
+  icon is `aria-hidden`. Activating it leaves focus on the toggle and keeps
+  the input's selection range across the type flip. The input keeps native
+  semantics plus `FieldControl`'s `aria-describedby`, `aria-invalid` and
+  `required`.
+
+  The field is hidden again when its form submits, so a revealed password
+  does not survive into the browser's form-restore cache.
+-->
+<script lang="ts">import { Eye, EyeOff } from "@lucide/svelte";
+import { inputButtonSize, inputSize } from "./field-types.js";
+let { value = $bindable(""), purpose = "current", revealed = $bindable(false), revealable = true, showLabel = "Show password", size = "md", inputClass, id: idProp, describedBy = "", labelId: _labelId, invalid = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const id = $derived(idProp ?? uid);
+let input = $state(null);
+/**
+* Flip `revealed`, keeping the caret / selection where it was. Chromium
+* rebuilds a text field's inner editor when its `type` changes and drops the
+* selection at the next rendering step, so the range is put back in the
+* following animation frame.
+*/
+function toggle() {
+	const start = input?.selectionStart ?? null;
+	const end = input?.selectionEnd ?? null;
+	revealed = !revealed;
+	if (start === null || end === null) return;
+	requestAnimationFrame(() => input?.setSelectionRange(start, end));
+}
+// Hide again on submit, so a revealed password is not restored with the form.
+$effect(() => {
+	const form = input?.form;
+	if (form === null || form === undefined) return;
+	const hide = () => {
+		revealed = false;
+	};
+	form.addEventListener("submit", hide);
+	return () => form.removeEventListener("submit", hide);
+});
+</script>
+
+<div class={['input w-full', inputSize[size], invalid && 'input-error', revealable && 'pe-1', className]}>
+  <input
+    {...rest}
+    bind:this={input}
+    {id}
+    type={revealed ? 'text' : 'password'}
+    autocomplete={purpose === 'new' ? 'new-password' : 'current-password'}
+    bind:value
+    aria-invalid={invalid ? 'true' : undefined}
+    aria-describedby={describedBy === '' ? undefined : describedBy}
+    class={inputClass}
+  />
+  {#if revealable}
+    <button
+      type="button"
+      aria-pressed={revealed}
+      aria-controls={id}
+      disabled={rest.disabled === true}
+      class={['btn btn-square btn-ghost', inputButtonSize[size]]}
+      onclick={toggle}
+    >
+      {#if revealed}
+        <EyeOff class="size-4" aria-hidden="true" />
+      {:else}
+        <Eye class="size-4" aria-hidden="true" />
+      {/if}
+      <span class="sr-only">{showLabel}</span>
+    </button>
+  {/if}
+</div>

package/dist/fields/PasswordInput.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'size' | 'autocomplete'> {
+    /**
+     * The password. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * Which password: sets `autocomplete` to `current-password` (sign-in) or `new-password` (sign-up, change password).
+     * @defaultValue `'current'`
+     */
+    purpose?: 'current' | 'new' | undefined;
+    /**
+     * Whether the text is currently shown. Bindable.
+     * @defaultValue `false`
+     */
+    revealed?: boolean | undefined;
+    /**
+     * Render the show/hide toggle; without it the field is a styled `type="password"`.
+     * @defaultValue `true`
+     */
+    revealable?: boolean | undefined;
+    /**
+     * The toggle's accessible name; its `aria-pressed` state says whether it is on.
+     * @defaultValue `'Show password'`
+     */
+    showLabel?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** Extra classes on the inner `<input>`; `class` goes on the wrapper. */
+    inputClass?: string | undefined;
+    /** `FieldControl`: the input's `id`, which `FormField`'s label points at. Minted when omitted. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the input is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and `input-error`.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+}
+/** A password field with a "Show password" toggle and the `autocomplete` a password manager needs to fill or generate it. */
+declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "revealed">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/fields/PickerPopover.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+The trigger and calendar popover `DatePicker` and `DateRangePicker` share; internal, not exported.
+-->
+<!--
+  PickerPopover — the calendar button that sits in a picker's shell, and
+  the popover it opens. `parts` is `DatePicker` or `DateRangePicker`; both
+  expose `Trigger`, `Portal`, `Content` and `Calendar` with the same props,
+  and their calendar body is `CalendarMonths`, the same one `Calendar`
+  renders inline.
+
+  The trigger is icon-only, so it is named by `triggerLabel` ("Choose
+  date"), the glyph `aria-hidden`; bits-ui gives it `aria-haspopup="dialog"`
+  and `aria-expanded`. The popover is a `role="dialog"` named by
+  `calendarLabel`; bits-ui moves focus into the grid, closes on Escape and
+  returns focus to the trigger.
+-->
+<script lang="ts">import { Calendar as CalendarIcon } from "@lucide/svelte";
+import { Portal } from "bits-ui";
+import CalendarMonths from "./CalendarMonths.svelte";
+let { parts, triggerLabel, calendarLabel, months, disabled } = $props();
+// SAFETY: both namespaces' Trigger / Content / Calendar are the same
+// bits-ui popover and calendar parts under two names. (`DateRangePicker`
+// exports no `Portal`, so the shared utility is used for both.)
+const P = $derived(parts);
+</script>
+
+<P.Trigger {disabled}>
+  {#snippet child({ props })}
+    <button {...props} type="button" class="btn btn-ghost btn-xs btn-square ms-1" aria-label={triggerLabel}>
+      <CalendarIcon class="size-4" aria-hidden="true" />
+    </button>
+  {/snippet}
+</P.Trigger>
+<Portal>
+  <P.Content
+    sideOffset={6}
+    role="dialog"
+    aria-label={calendarLabel}
+    class="card card-border bg-base-100 rounded-box z-50 p-3 shadow-md"
+  >
+    <P.Calendar>
+      {#snippet children({ months: grid, weekdays })}
+        <CalendarMonths {parts} {...months} months={grid} {weekdays} />
+      {/snippet}
+    </P.Calendar>
+  </P.Content>
+</Portal>

package/dist/fields/PickerPopover.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type DatePicker, type DateRangePicker } from 'bits-ui';
+interface Props {
+    parts: typeof DatePicker | typeof DateRangePicker;
+    triggerLabel: string;
+    calendarLabel: string;
+    months: {
+        readonly locale: string;
+        readonly previousLabel: string;
+        readonly nextLabel: string;
+    };
+    disabled: boolean;
+}
+/** The trigger and calendar popover `DatePicker` and `DateRangePicker` share; internal, not exported. */
+declare const PickerPopover: import("svelte").Component<Props, {}, "">;
+type PickerPopover = ReturnType<typeof PickerPopover>;
+export default PickerPopover;

package/dist/fields/PinInput.svelte

@@ -0,0 +1,83 @@
+<!-- @component
+A fixed-length code — a sign-in code, a TOTP, an invite code — typed one character per visible cell into one real input, on bits-ui's `PinInput`.
+-->
+<!--
+  PinInput — one real `<input>` (bits-ui `PinInput`) drawn as a row of
+  cells. Being one input is the whole point: paste, SMS autofill
+  (`autocomplete="one-time-code"`), password managers and form posting all
+  treat it as one field, and a screen reader hears one text field rather
+  than six unlabelled one-character edits — the failure mode of the
+  hand-rolled six-`<input maxlength=1>` pattern.
+
+  ARIA contract: there is no APG pattern for segmented code entry; the
+  contract is "a single text input". The input carries the `FieldControl` id
+  (bits-ui `inputId`), so `FormField`'s `<label for>` names it, plus
+  `aria-describedby`, `aria-invalid`, `required`, `inputmode`,
+  `autocomplete` and `maxlength`. The cells are `aria-hidden` presentation
+  and nothing in them is focusable. The keyboard is the platform's: typing
+  advances, Backspace deletes, arrows move the caret, paste fills the code;
+  bits-ui draws the fake caret in the active cell.
+
+  `charset` maps to `inputmode` and to bits-ui's own patterns
+  (`REGEXP_ONLY_DIGITS` / `REGEXP_ONLY_DIGITS_AND_CHARS`), which both reject
+  a keystroke that does not match and become the input's `pattern`.
+  `pasteTransformer` defaults to stripping whitespace and hyphens, so a code
+  pasted from an email as "123 456" or "123-456" lands as "123456".
+
+  Styling decision (the issue asked for one to be recorded): bits-ui's
+  explicit `PinInput.Cell` elements, styled with `input`-like utilities and
+  the literal `pinCellSize` table, rather than daisyUI `otp` on the hidden
+  input. bits-ui renders the real input transparent over the cells, so
+  `otp`'s CSS-drawn cells would sit on an invisible element, and bits-ui's
+  fake caret and its password-manager badge offset
+  (`pushPasswordManagerStrategy`) are positioned against the cells.
+
+  `masked` renders `•` in each filled cell in place of the character (bits-ui
+  2.20 has no masking prop). The input itself is unchanged — it keeps
+  `autocomplete` so a password manager can still fill it, and it is
+  transparent, so the characters are never drawn.
+-->
+<script lang="ts">import { PinInput, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "bits-ui";
+import { pinCellSize } from "./field-types.js";
+let { value = $bindable(""), length = 6, charset = "numeric", masked = false, onComplete, pasteTransformer = (text) => text.replace(/[\s-]/g, ""), autocomplete = "one-time-code", size = "md", disabled = false, id, describedBy = "", labelId: _labelId, invalid = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const inputId = $derived(id ?? uid);
+</script>
+
+<PinInput.Root
+  {...rest}
+  bind:value
+  {inputId}
+  maxlength={length}
+  pattern={charset === 'numeric' ? REGEXP_ONLY_DIGITS : REGEXP_ONLY_DIGITS_AND_CHARS}
+  inputmode={charset === 'numeric' ? 'numeric' : 'text'}
+  {autocomplete}
+  {disabled}
+  {pasteTransformer}
+  onComplete={(code: string) => onComplete?.(code)}
+  aria-describedby={describedBy === '' ? undefined : describedBy}
+  aria-invalid={invalid ? 'true' : undefined}
+  class={['flex items-center gap-2 has-disabled:opacity-50', className]}
+>
+  {#snippet children({ cells })}
+    {#each cells as cell, index (index)}
+      <PinInput.Cell
+        {cell}
+        aria-hidden="true"
+        class={[
+          'relative flex items-center justify-center rounded-field border bg-base-100 font-mono',
+          'data-active:outline-2 data-active:outline-offset-2',
+          invalid ? 'border-error data-active:outline-error' : 'border-base-content/20 data-active:outline-primary',
+          pinCellSize[size],
+        ]}
+      >
+        {#if cell.char !== null && cell.char !== undefined}
+          {masked ? '•' : cell.char}
+        {/if}
+        {#if cell.hasFakeCaret}
+          <span class="h-1/2 w-px animate-pulse bg-base-content motion-reduce:animate-none"></span>
+        {/if}
+      </PinInput.Cell>
+    {/each}
+  {/snippet}
+</PinInput.Root>

package/dist/fields/PinInput.svelte.d.ts

@@ -0,0 +1,66 @@
+import { PinInput } from 'bits-ui';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'value' | 'size' | 'type' | 'maxlength' | 'pattern' | 'children' | 'inputmode'> {
+    /**
+     * The code typed so far. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * Number of cells, and the input's `maxlength`.
+     * @defaultValue `6`
+     */
+    length?: number | undefined;
+    /**
+     * Which characters are accepted; sets `inputmode` and the input's pattern.
+     * @defaultValue `'numeric'`
+     */
+    charset?: 'numeric' | 'alphanumeric' | undefined;
+    /**
+     * Show `•` in the cells instead of the characters (a PIN rather than a code).
+     * @defaultValue `false`
+     */
+    masked?: boolean | undefined;
+    /** Called once every cell is filled, with the full code — typically to submit. */
+    onComplete?: ((code: string) => void) | undefined;
+    /** Normalise pasted text before it is applied. Defaults to stripping whitespace and hyphens. */
+    pasteTransformer?: ((text: string) => string) | undefined;
+    /**
+     * The input's `autocomplete`.
+     * @defaultValue `'one-time-code'`
+     */
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    /**
+     * Size step of the cells.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /**
+     * Disables the input.
+     * @defaultValue `false`
+     */
+    disabled?: boolean | undefined;
+    /** `FieldControl`: the real input's `id`, which `FormField`'s label points at. */
+    id?: string | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+    /**
+     * `FieldControl`: the visible label's id. Not used — the real input is
+     * labelable, so the `FormField`'s `<label for>` already names it; taken
+     * here so a spread `FieldControl` does not leak it as an attribute.
+     */
+    labelId?: string | undefined;
+    /**
+     * `FieldControl`: the field is in error — sets `aria-invalid` and the error border.
+     * @defaultValue `false`
+     */
+    invalid?: boolean | undefined;
+}
+/** A fixed-length code — a sign-in code, a TOTP, an invite code — typed one character per visible cell into one real input, on bits-ui's `PinInput`. */
+declare const PinInput: import("svelte").Component<Props, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/fields/PushToggle.svelte

@@ -0,0 +1,93 @@
+<!-- @component
+A `Toggle` that subscribes this browser to Web Push, or unsubscribes it, through the caller’s `enable` / `disable`.
+-->
+<!--
+  PushToggle — the browser half of Web Push behind one `Toggle`: it reads
+  whether THIS browser is subscribed, and turns the subscription on or off
+  through the caller's `enable` / `disable`.
+
+  The switch reflects this browser's registration, not the account's
+  preference — two different questions, and a settings page asks both.
+  `enable` / `disable` are props rather than imports because the network calls
+  (subscribing with the VAPID key, registering the endpoint with the app's
+  API) belong to the app's own client; injecting them keeps this package free
+  of it.
+
+  Every failure of `enable` is a different thing to tell the reader — the
+  browser cannot, the site cannot, or they said no — so `enable` RESOLVES with
+  an outcome instead of throwing, and each reason renders its own message.
+  The switch writes back what actually happened (see `Toggle`), so a denied
+  permission never reads as "on".
+
+  The subscription state is read on mount, from the browser, rather than
+  trusted from a prop: the page may be cached, and the reader may have revoked
+  the permission in browser settings since it rendered. `supported` and
+  `readSubscribed` default to the real browser checks and exist so a caller
+  (or a test) can supply its own.
+
+  ARIA contract: `Toggle`'s — a native checkbox with `role="switch"`, named by
+  `label`. The notice under it is a polite live region, so a refusal is
+  announced when it appears.
+-->
+<script lang="ts">import Toggle from "./Toggle.svelte";
+let { available, enable, disable, supported = typeof navigator !== "undefined" && "serviceWorker" in navigator && "PushManager" in globalThis, readSubscribed = async () => {
+	const registration = await navigator.serviceWorker.ready;
+	return await registration.pushManager.getSubscription() !== null;
+}, label = "Send push notifications to this browser", description, unavailableMessage = "Push notifications aren't available on this site yet.", unsupportedMessage = "This browser can't receive push notifications.", deniedMessage = "This browser is blocking notifications. Allow them in your browser settings to turn this on.", class: className } = $props();
+let subscribed = $state(false);
+let notice = $state(undefined);
+// Aborted on unmount, so a request in flight when the reader navigates away
+// is cancelled rather than resolving into a destroyed component.
+const controller = new AbortController();
+$effect(() => () => controller.abort());
+$effect(() => {
+	if (!available) return;
+	if (!supported) {
+		notice = "unsupported";
+		return;
+	}
+	void readSubscribed(controller.signal).then((value) => {
+		subscribed = value;
+	}, () => {
+		// Unreadable is reported as off; the switch still works.
+	});
+});
+const apply = async (next) => {
+	notice = undefined;
+	if (!next) {
+		await disable(controller.signal);
+		return false;
+	}
+	const result = await enable(controller.signal);
+	if (result._tag === "enabled") return true;
+	notice = result._tag;
+	return false;
+};
+const messages = $derived({
+	unsupported: unsupportedMessage,
+	unavailable: unavailableMessage,
+	denied: deniedMessage
+});
+const noticeTone = {
+	unsupported: "text-base-content/70",
+	unavailable: "text-base-content/70",
+	denied: "text-warning"
+};
+</script>
+
+{#if !available}
+  <p class={['text-base-content/70 text-sm', className]}>{unavailableMessage}</p>
+{:else}
+  <div class={['flex flex-col gap-2', className]}>
+    <Toggle
+      {label}
+      {description}
+      checked={subscribed}
+      disabled={!supported}
+      onChange={apply}
+    />
+    <p class={['text-sm', notice === undefined ? '' : noticeTone[notice]]} aria-live="polite">
+      {notice === undefined ? '' : messages[notice]}
+    </p>
+  </div>
+{/if}

package/dist/fields/PushToggle.svelte.d.ts

@@ -0,0 +1,55 @@
+/** Why `enable` did not subscribe this browser. */
+export type PushDeclineReason = 'unsupported' | 'unavailable' | 'denied';
+/**
+ * What `enable` resolves with: it worked, or why not. The `_tag` shape
+ * matches a tagged-union result an Effect client already returns.
+ */
+export interface PushEnableResult {
+    readonly _tag: 'enabled' | PushDeclineReason;
+}
+interface Props {
+    /** False when the site has no push configuration (no VAPID key pair): the switch is not offered. */
+    available: boolean;
+    /** Subscribe this browser and register it. Resolves with the outcome rather than throwing. */
+    enable: (signal: AbortSignal) => Promise<PushEnableResult>;
+    /** Unsubscribe this browser. Its resolved value is ignored. */
+    disable: (signal: AbortSignal) => Promise<unknown>;
+    /**
+     * Whether this browser can do Web Push at all.
+     * @defaultValue feature detection (`serviceWorker` and `PushManager`)
+     */
+    supported?: boolean | undefined;
+    /**
+     * Whether this browser is subscribed now.
+     * @defaultValue asks the service worker's `PushManager`
+     */
+    readSubscribed?: ((signal: AbortSignal) => Promise<boolean>) | undefined;
+    /**
+     * Text beside the switch; its accessible name.
+     * @defaultValue `'Send push notifications to this browser'`
+     */
+    label?: string | undefined;
+    /** A sentence under the switch. */
+    description?: string | undefined;
+    /**
+     * Shown instead of the switch when `available` is false.
+     * @defaultValue `"Push notifications aren't available on this site yet."`
+     */
+    unavailableMessage?: string | undefined;
+    /**
+     * Shown instead of the switch when the browser cannot do Web Push.
+     * @defaultValue `"This browser can't receive push notifications."`
+     */
+    unsupportedMessage?: string | undefined;
+    /**
+     * Shown when the browser’s notification permission is denied.
+     * @defaultValue `'This browser is blocking notifications. Allow them in your browser settings to turn this on.'`
+     */
+    deniedMessage?: string | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A `Toggle` that subscribes this browser to Web Push, or unsubscribes it, through the caller’s `enable` / `disable`. */
+declare const PushToggle: import("svelte").Component<Props, {}, "">;
+type PushToggle = ReturnType<typeof PushToggle>;
+export default PushToggle;