@viniaraujo68/plinth 0.0.0-stage → 0.2.0

package/dist/components/Select.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
+  import OptionPanel from "./OptionPanel.svelte";
+  import {
+    isTypedKey,
+    nextSelectableIndex,
+    Typeahead,
+    typeaheadMatch,
+    type SelectOption,
+  } from "./select.js";
+
+  type Props = Omit<
+    HTMLButtonAttributes,
+    "children" | "class" | "disabled" | "name" | "onchange" | "value"
+  > & {
+    /** The rows, in the order they are shown. `value` is the key, so it has to be unique. */
+    options: readonly SelectOption[];
+    /** The selected `value`, or `null`. Bindable, and also reported through {@link Props.onchange}. */
+    value?: string | null;
+    /** Shown on the trigger while nothing is selected, and as the closed control's accessible text. */
+    placeholder?: string;
+    /** Whether the selection can be taken back to `null`, through a ✕ on the trigger. */
+    clearable?: boolean;
+    disabled?: boolean;
+    /** Custom rendering for a row. The default is the label. */
+    option?: Snippet<[SelectOption]>;
+    /** Accessible name of the clear button. A prop because the library ships no translations. */
+    clearLabel?: string;
+    /**
+     * Shows a spinner while the options load, and `loadingLabel` in an empty list. A `value` the
+     * options do not hold yet shows as nothing rather than as itself.
+     */
+    loading?: boolean;
+    loadingLabel?: string;
+    /** Classes for the control — width, margins. The trigger is where every other attribute goes. */
+    class?: ClassValue;
+    /** Submits the selection with a surrounding `<form>`. A form reset does not reach it. */
+    name?: string;
+    /** Holds the surrounding form back while nothing is selected, and focuses the trigger. */
+    required?: boolean;
+    onchange?: (value: string | null) => void;
+  };
+
+  let {
+    options,
+    value = $bindable(null),
+    placeholder = "Select…",
+    clearable = false,
+    disabled = false,
+    option,
+    clearLabel = "Clear selection",
+    loading = false,
+    loadingLabel = "Loading…",
+    class: className,
+    name,
+    required = false,
+    onchange,
+    ...rest
+  }: Props = $props();
+
+  // `popovertarget` and `aria-activedescendant` both need document-unique ids, and `$props.id()`
+  // is the only source of one that is stable across server render and hydration.
+  const uid = $props.id();
+  const panelId = `plinth-select-${uid}`;
+  const listboxId = `${panelId}-listbox`;
+  const anchorName = `--${panelId}`;
+  const optionId = (index: number) => `${panelId}-option-${index}`;
+
+  let isOpen = $state(false);
+  let highlightedValue = $state<string | null>(null);
+  let trigger = $state<HTMLButtonElement>();
+  let panel = $state<OptionPanel>();
+
+  // The listbox is named by the trigger, so whatever the consumer labelled the trigger with names
+  // both. That needs the trigger's real id, which is the consumer's when they gave it one.
+  const triggerId = $derived(rest.id ?? `${panelId}-trigger`);
+
+  const selected = $derived(options.find((candidate) => candidate.value === value) ?? null);
+  const unset = $derived(value === null || value === undefined || value === "");
+  const shown = $derived.by(() => {
+    if (selected) return selected.label;
+    if (unset) return placeholder;
+    return loading ? "" : value;
+  });
+  const showClear = $derived(clearable && !disabled && value !== null && value !== undefined);
+
+  // The highlight is held as a value rather than an index so that an option list that changes
+  // under it cannot silently move it onto a different row.
+  const highlighted = $derived.by(() => {
+    const index = options.findIndex((candidate) => candidate.value === highlightedValue);
+
+    return index >= 0 && !options[index]?.disabled ? index : nextSelectableIndex(options, 0, 1);
+  });
+
+  const activeOptionId = $derived(isOpen && highlighted >= 0 ? optionId(highlighted) : undefined);
+
+  const commit = (next: string | null) => {
+    if (next === value) return;
+
+    value = next;
+    onchange?.(next);
+  };
+
+  const choose = (candidate: SelectOption) => {
+    if (candidate.disabled) return;
+
+    commit(candidate.value);
+    trigger?.focus();
+    panel?.hide();
+  };
+
+  const clear = () => {
+    commit(null);
+    trigger?.focus();
+  };
+
+  const typeahead = new Typeahead();
+
+  const jumpTo = (char: string) => {
+    if (isOpen) {
+      const match = typeaheadMatch(options, highlighted, typeahead.add(char));
+      if (match >= 0) highlightedValue = options[match].value;
+      return;
+    }
+    const current = options.findIndex((candidate) => candidate.value === value);
+    const match = typeaheadMatch(options, current, typeahead.add(char));
+    if (match >= 0) commit(options[match].value);
+  };
+
+  const move = (delta: number) => {
+    const next = nextSelectableIndex(options, highlighted + delta, delta);
+    if (next !== -1) highlightedValue = options[next]?.value ?? null;
+  };
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if (disabled) return;
+
+    // Enter and Space on the closed trigger are the button's own activation, which `popovertarget`
+    // already turns into an open. Only the arrows have to ask for it.
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+        event.preventDefault();
+        if (!isOpen) trigger?.click();
+        else move(event.key === "ArrowDown" ? 1 : -1);
+        break;
+
+      case "Home":
+      case "End": {
+        if (!isOpen) return;
+        event.preventDefault();
+
+        const forwards = event.key === "Home";
+        const edge = nextSelectableIndex(
+          options,
+          forwards ? 0 : options.length - 1,
+          forwards ? 1 : -1,
+        );
+        if (edge !== -1) highlightedValue = options[edge]?.value ?? null;
+        break;
+      }
+
+      case "Enter":
+      case " ": {
+        if (event.key === " " && typeahead.typing) {
+          event.preventDefault();
+          jumpTo(" ");
+          break;
+        }
+        if (!isOpen) return;
+        // Ahead of the button's own activation, which would otherwise toggle the panel back open
+        // in the same keystroke that picked a row.
+        event.preventDefault();
+
+        const candidate = options[highlighted];
+        if (candidate) choose(candidate);
+        break;
+      }
+
+      case "Tab":
+        // The panel holds no focusable content, so the default Tab already continues from the
+        // trigger; all that is left is to take the list off the screen with it.
+        if (isOpen) panel?.hide();
+        break;
+
+      default:
+        if (!isTypedKey(event)) return;
+        event.preventDefault();
+        jumpTo(event.key);
+    }
+  };
+
+  const onOpenChange = (open: boolean) => {
+    isOpen = open;
+    if (open) highlightedValue = value;
+  };
+</script>
+
+<!--
+@component
+A single-select listbox: a trigger showing the current selection, and a top-layer panel listing
+the options. For a list long enough that scrolling it stops being reasonable, `Combobox` is the
+one to reach for — it types into the control bar itself.
+
+It is built on the native popover API, so re-clicking the trigger, clicking outside and pressing
+Escape all dismiss it without a listener of our own, and the panel sits in the top layer — above a
+`Modal`, and out of every overflow and stacking context on the page — with no z-index anywhere.
+
+Clearing is a ✕ on the trigger rather than a blank row in the list, so an empty selection can
+never be mistaken for a real option.
+
+The trigger carries `role="combobox"` and every attribute passed in, which is where an
+`aria-labelledby` pointing at the consumer's own `<label>` goes. Focus never leaves it: the rows
+are pointed at by `aria-activedescendant` instead of being focused. `class` styles the control —
+the width belongs to the wrapper, since the panel matches it.
+
+Typing the first letters of a label works as in a native select: on the closed trigger it picks the
+row, with the list open it moves the highlight, and the same letter again cycles through the rows
+it starts. `required` holds a surrounding form back while nothing is selected, and `loading` shows a
+spinner while the options are on their way.
+
+```svelte
+<span id="size-label">Size</span>
+<Select
+  bind:value={size}
+  options={SIZES}
+  aria-labelledby="size-label"
+  placeholder="Any size"
+  clearable
+  class="max-w-xs"
+/>
+```
+-->
+
+<div class={["plinth-select relative flex", className]}>
+  <button
+    {...rest}
+    bind:this={trigger}
+    id={triggerId}
+    type="button"
+    class={[
+      "select min-h-11 w-full justify-start text-start",
+      showClear && "pe-16",
+      // One class and not two: daisyUI dims the text of a disabled `<select>` through a rule that
+      // only reaches a real `select` element, and two Tailwind opacities on the same property
+      // would be settled by their order in the stylesheet rather than by the order written here.
+      disabled ? "text-base-content/40" : unset && "text-base-content/50",
+    ]}
+    role="combobox"
+    {disabled}
+    popovertarget={panelId}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-controls={isOpen ? listboxId : undefined}
+    aria-activedescendant={activeOptionId}
+    aria-busy={loading || undefined}
+    style:anchor-name={anchorName}
+    onkeydown={onKeydown}
+  >
+    <span class="truncate">{shown}</span>
+    {#if loading}
+      <span class="loading ms-auto loading-xs loading-spinner" aria-hidden="true"></span>
+    {/if}
+  </button>
+
+  {#if showClear}
+    <!-- Outside the trigger, because `.select` clips its overflow and a button may not nest in a
+         button. The end padding above is what keeps the label from running under it. -->
+    <button
+      type="button"
+      class="btn absolute inset-y-0 end-7 my-auto btn-circle size-8 btn-ghost text-xs"
+      aria-label={clearLabel}
+      onclick={clear}
+    >
+      ✕
+    </button>
+  {/if}
+
+  {#if name || required}
+    <input
+      class="sr-only"
+      tabindex="-1"
+      aria-hidden="true"
+      autocomplete="off"
+      {name}
+      {disabled}
+      {required}
+      value={value ?? ""}
+      onfocus={() => trigger?.focus()}
+    />
+  {/if}
+</div>
+
+<OptionPanel
+  bind:this={panel}
+  id={panelId}
+  {anchorName}
+  {listboxId}
+  anchor={trigger}
+  {options}
+  {value}
+  {highlighted}
+  {optionId}
+  {option}
+  emptyLabel={loading ? loadingLabel : undefined}
+  labelledBy={triggerId}
+  class="plinth-select-panel"
+  onopenchange={onOpenChange}
+  onhighlight={(candidate) => (highlightedValue = candidate)}
+  onchoose={choose}
+/>

package/dist/components/Select.svelte.d.ts

@@ -0,0 +1,68 @@
+import type { Snippet } from "svelte";
+import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
+import { type SelectOption } from "./select.js";
+type Props = Omit<HTMLButtonAttributes, "children" | "class" | "disabled" | "name" | "onchange" | "value"> & {
+    /** The rows, in the order they are shown. `value` is the key, so it has to be unique. */
+    options: readonly SelectOption[];
+    /** The selected `value`, or `null`. Bindable, and also reported through {@link Props.onchange}. */
+    value?: string | null;
+    /** Shown on the trigger while nothing is selected, and as the closed control's accessible text. */
+    placeholder?: string;
+    /** Whether the selection can be taken back to `null`, through a ✕ on the trigger. */
+    clearable?: boolean;
+    disabled?: boolean;
+    /** Custom rendering for a row. The default is the label. */
+    option?: Snippet<[SelectOption]>;
+    /** Accessible name of the clear button. A prop because the library ships no translations. */
+    clearLabel?: string;
+    /**
+     * Shows a spinner while the options load, and `loadingLabel` in an empty list. A `value` the
+     * options do not hold yet shows as nothing rather than as itself.
+     */
+    loading?: boolean;
+    loadingLabel?: string;
+    /** Classes for the control — width, margins. The trigger is where every other attribute goes. */
+    class?: ClassValue;
+    /** Submits the selection with a surrounding `<form>`. A form reset does not reach it. */
+    name?: string;
+    /** Holds the surrounding form back while nothing is selected, and focuses the trigger. */
+    required?: boolean;
+    onchange?: (value: string | null) => void;
+};
+/**
+ * A single-select listbox: a trigger showing the current selection, and a top-layer panel listing
+ * the options. For a list long enough that scrolling it stops being reasonable, `Combobox` is the
+ * one to reach for — it types into the control bar itself.
+ *
+ * It is built on the native popover API, so re-clicking the trigger, clicking outside and pressing
+ * Escape all dismiss it without a listener of our own, and the panel sits in the top layer — above a
+ * `Modal`, and out of every overflow and stacking context on the page — with no z-index anywhere.
+ *
+ * Clearing is a ✕ on the trigger rather than a blank row in the list, so an empty selection can
+ * never be mistaken for a real option.
+ *
+ * The trigger carries `role="combobox"` and every attribute passed in, which is where an
+ * `aria-labelledby` pointing at the consumer's own `<label>` goes. Focus never leaves it: the rows
+ * are pointed at by `aria-activedescendant` instead of being focused. `class` styles the control —
+ * the width belongs to the wrapper, since the panel matches it.
+ *
+ * Typing the first letters of a label works as in a native select: on the closed trigger it picks the
+ * row, with the list open it moves the highlight, and the same letter again cycles through the rows
+ * it starts. `required` holds a surrounding form back while nothing is selected, and `loading` shows a
+ * spinner while the options are on their way.
+ *
+ * ```svelte
+ * <span id="size-label">Size</span>
+ * <Select
+ * bind:value={size}
+ * options={SIZES}
+ * aria-labelledby="size-label"
+ * placeholder="Any size"
+ * clearable
+ * class="max-w-xs"
+ * />
+ * ```
+ */
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Skeleton.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Corner shape. A prop and not a class because an unlayered component rule beats a Tailwind
+     * utility whatever the source order, so `rounded-full` from the outside could never win.
+     * `"none"` is for a caller clipping the block to a silhouette of its own.
+     */
+    rounded?: "field" | "full" | "none";
+  };
+
+  let { class: className, rounded = "field", ...rest }: Props = $props();
+</script>
+
+<!--
+@component
+The block that stands in for content that has not arrived: a resting wash with a band of the brand
+colour sweeping across it, left to right, on the same calm 1.7s linear cycle the `Logo` orbits on.
+
+It sets no width and no height, so **give it a size** — `class="h-4 w-40"` — and it takes any shape
+you clip it to, because the sweep is painted on the element itself rather than on a pseudo-element.
+Corner shape is the one piece of geometry it does own, as the `rounded` prop; everything else is
+yours.
+
+Like the logo it renders no text and carries no role, which keeps it silent to assistive
+technology: the container that knows what is loading is the one that should say so.
+
+```svelte
+<div role="status" aria-label="Loading releases" class="flex flex-col gap-2">
+  <Skeleton class="h-4 w-48" />
+  <Skeleton class="h-4 w-64" />
+  <Skeleton class="size-10" rounded="full" />
+</div>
+```
+-->
+
+<div {...rest} class={["plinth-skeleton", className]} data-rounded={rounded}></div>
+
+<style>
+  @keyframes sweep {
+    /* Past both edges at either end: at 200% background-size the lit band is half a box wide, and
+       these two stops are what carry it fully off screen instead of parking it at the rim. */
+    from {
+      background-position: 150% 0;
+    }
+    to {
+      background-position: -50% 0;
+    }
+  }
+
+  .plinth-skeleton {
+    /* Tinted, not grey: the sweep is the brand's, mixed into the same ink wash the library uses
+       for a resting surface everywhere else. Both stay transparent mixes so the block reads on
+       whatever surface it is dropped onto, in either theme. */
+    --skeleton-base: color-mix(in oklch, var(--color-base-content) 11%, transparent);
+    --skeleton-sheen: color-mix(in oklch, var(--color-primary) 26%, transparent);
+
+    display: block;
+    background-color: var(--skeleton-base);
+
+    /* On the element rather than on an `::after`: a pseudo-element would need its own overflow
+       clip and would ignore a `clip-path` the caller hands the block, which is exactly how the
+       pick-shaped placeholder in the showcase is built. */
+    background-image: linear-gradient(
+      90deg,
+      transparent 20%,
+      var(--skeleton-sheen) 50%,
+      transparent 80%
+    );
+    background-repeat: no-repeat;
+    background-size: 200% 100%;
+
+    /* The logo's tempo, deliberately: two loading states on one screen beating at different
+       speeds is what makes a page look nervous. */
+    animation: sweep 1.7s linear infinite;
+
+    &[data-rounded="field"] {
+      border-radius: var(--radius-field, 0.5rem);
+    }
+
+    &[data-rounded="full"] {
+      border-radius: 9999px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      /* Where `Logo` degrades its orbit to a pulse rather than to nothing — an outline that stops
+         moving has stopped saying anything at all — this one stops outright. A skeleton's
+         affordance is that it holds the space its content will take, and that survives standing
+         still, so all the motion is doing here is decorating. It settles on the tone the sweep
+         averages to, which is what it looks like mid-pass. */
+      background-image: none;
+      background-color: color-mix(in oklch, var(--skeleton-sheen) 45%, var(--skeleton-base));
+      animation: none;
+    }
+  }
+</style>

package/dist/components/Skeleton.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from "svelte/elements";
+type Props = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Corner shape. A prop and not a class because an unlayered component rule beats a Tailwind
+     * utility whatever the source order, so `rounded-full` from the outside could never win.
+     * `"none"` is for a caller clipping the block to a silhouette of its own.
+     */
+    rounded?: "field" | "full" | "none";
+};
+/**
+ * The block that stands in for content that has not arrived: a resting wash with a band of the brand
+ * colour sweeping across it, left to right, on the same calm 1.7s linear cycle the `Logo` orbits on.
+ *
+ * It sets no width and no height, so **give it a size** — `class="h-4 w-40"` — and it takes any shape
+ * you clip it to, because the sweep is painted on the element itself rather than on a pseudo-element.
+ * Corner shape is the one piece of geometry it does own, as the `rounded` prop; everything else is
+ * yours.
+ *
+ * Like the logo it renders no text and carries no role, which keeps it silent to assistive
+ * technology: the container that knows what is loading is the one that should say so.
+ *
+ * ```svelte
+ * <div role="status" aria-label="Loading releases" class="flex flex-col gap-2">
+ * <Skeleton class="h-4 w-48" />
+ * <Skeleton class="h-4 w-64" />
+ * <Skeleton class="size-10" rounded="full" />
+ * </div>
+ * ```
+ */
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" generics="T extends keyof SvelteHTMLElements = 'span'">
+  import type { Snippet } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+  import { tooltipPanel } from "../attachments/tooltip.js";
+
+  type Props = SvelteHTMLElements[T] & {
+    /** Tag rendered as the host. It is this component's root, so classes, event handlers and
+        aria attributes land on the real element rather than on a wrapper. */
+    as?: T;
+    children: Snippet;
+    tooltip: Snippet;
+    /** Suppresses the panel while keeping the host and the wiring identical. */
+    tooltipDisabled?: boolean | null;
+  };
+
+  // Deliberately not defaulted here: `"span"` is not assignable to `T`, since a caller may
+  // instantiate `T` as something narrower without ever passing `as`. The fallback lives on
+  // `svelte:element`, whose `this` takes any tag name.
+  let { as, children, tooltip, tooltipDisabled, ...rest }: Props = $props();
+
+  let panel = $state<HTMLDivElement>();
+</script>
+
+<!--
+@component
+Renders the host element itself — `as`, a span by default — carrying a tooltip whose content is a
+snippet. Everything else you pass lands on the host, so it stays a normal element in its parent's
+layout. The panel is written declaratively so the snippet keeps its component context and any
+scoped styles the caller relies on.
+
+The host is focusable by default (`tabindex={0}`) because the show/hide wiring listens for
+focusin/focusout, and a bare span never receives either — the tooltip would silently be
+mouse-only. Pass your own `tabindex` to override that.
+
+For plain text on an element you already render, the `tooltip` attachment is lighter: it creates
+its panel on first hover, while this component's panel is in the DOM from the start (hidden by
+`popover`, so it neither lays out nor paints). At table scale that is a fine trade; for hundreds
+of instances or expensive content, prefer the attachment or a `Dropdown`, which mounts on demand.
+
+```svelte
+<Tooltip as="button" class="btn" onclick={save}>
+  {#snippet tooltip()}
+    Saves <strong>every</strong> pending change
+  {/snippet}
+  Save
+</Tooltip>
+```
+-->
+
+<svelte:element
+  this={as ?? "span"}
+  tabindex={0}
+  {...rest}
+  {@attach tooltipPanel(panel, { disabled: tooltipDisabled ?? false })}
+>
+  {@render children()}
+</svelte:element>
+<div bind:this={panel} popover="manual" role="tooltip">
+  {@render tooltip()}
+</div>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { Snippet } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+declare function $$render<T extends keyof SvelteHTMLElements = 'span'>(): {
+    props: SvelteHTMLElements[T] & {
+        /** Tag rendered as the host. It is this component's root, so classes, event handlers and
+            aria attributes land on the real element rather than on a wrapper. */
+        as?: T;
+        children: Snippet;
+        tooltip: Snippet;
+        /** Suppresses the panel while keeping the host and the wiring identical. */
+        tooltipDisabled?: boolean | null;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements = 'span'> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends keyof SvelteHTMLElements = 'span'>(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 keyof SvelteHTMLElements = 'span'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Renders the host element itself — `as`, a span by default — carrying a tooltip whose content is a
+ * snippet. Everything else you pass lands on the host, so it stays a normal element in its parent's
+ * layout. The panel is written declaratively so the snippet keeps its component context and any
+ * scoped styles the caller relies on.
+ *
+ * The host is focusable by default (`tabindex={0}`) because the show/hide wiring listens for
+ * focusin/focusout, and a bare span never receives either — the tooltip would silently be
+ * mouse-only. Pass your own `tabindex` to override that.
+ *
+ * For plain text on an element you already render, the `tooltip` attachment is lighter: it creates
+ * its panel on first hover, while this component's panel is in the DOM from the start (hidden by
+ * `popover`, so it neither lays out nor paints). At table scale that is a fine trade; for hundreds
+ * of instances or expensive content, prefer the attachment or a `Dropdown`, which mounts on demand.
+ *
+ * ```svelte
+ * <Tooltip as="button" class="btn" onclick={save}>
+ * {#snippet tooltip()}
+ *   Saves <strong>every</strong> pending change
+ * {/snippet}
+ * Save
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: $$IsomorphicComponent;
+type Tooltip<T extends keyof SvelteHTMLElements = 'span'> = InstanceType<typeof Tooltip<T>>;
+export default Tooltip;