@sveltia/ui 0.78.4 → 0.79.1

package/dist/components/text-field/masked-input.svelte.d.ts

@@ -0,0 +1,42 @@
+export default MaskedInput;
+type MaskedInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & PointerEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
+/**
+ * Internal base of `<PasswordInput>` and `<SecretInput>`: a text field whose value is masked, with a
+ * Show/Hide button.
+ */
+declare const MaskedInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
+    /**
+     * How to mask the value: `type` uses `type="password"`, while
+     * `css` uses `-webkit-text-security` so password managers don’t prompt to save the value.
+     */
+    mask: "type" | "css";
+    /**
+     * Input value.
+     */
+    value?: string | undefined;
+    /**
+     * Visibility icon slot content.
+     */
+    visibilityIcon?: Snippet<[]> | undefined;
+} & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * How to mask the value: `type` uses `type="password"`, while
+     * `css` uses `-webkit-text-security` so password managers don’t prompt to save the value.
+     */
+    mask: "type" | "css";
+    /**
+     * Input value.
+     */
+    value?: string | undefined;
+    /**
+     * Visibility icon slot content.
+     */
+    visibilityIcon?: Snippet<[]> | undefined;
+};
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
+import type { Snippet } from 'svelte';

package/dist/components/text-field/number-input.js

@@ -9,7 +9,13 @@
  * @param {number} step Step value.
  * @returns {number} Number of fraction digits, `0` for an integer step.
  */
-export const getMaximumFractionDigits = (step) => String(step).split('.')[1]?.length || 0;
+export const getMaximumFractionDigits = (step) => {
+  // A small step like `0.0000001` is stringified in exponent notation as `1e-7`
+  const [mantissa, exponent = '0'] = String(step).toLowerCase().split('e');
+  const digits = (mantissa.split('.')[1]?.length ?? 0) - Number(exponent);
+
+  return Math.max(digits, 0);
+};
 
 /**
  * Parse the text entered in the field.

package/dist/components/text-field/number-input.svelte

@@ -21,7 +21,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**
@@ -55,6 +55,8 @@
     increaseIcon,
     decreaseIcon,
     onChange,
+    onkeydown,
+    oninput,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
@@ -174,20 +176,22 @@
     {readonly}
     {required}
     {invalid}
-    aria-valuenow={Number(value || 0)}
+    aria-valuenow={Number.isFinite(value) ? value : undefined}
     aria-valuemin={min}
     aria-valuemax={max}
     inputmode={maximumFractionDigits > 0 ? 'decimal' : 'numeric'}
     onkeydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
+      // A read-only field can’t be stepped, just like the spin buttons
+      const canStep = !disabled && !readonly && !hasModifier;
 
-      if (key === 'ArrowDown' && !hasModifier) {
+      if (key === 'ArrowDown' && canStep) {
         event.preventDefault();
         decrease();
       }
 
-      if (key === 'ArrowUp' && !hasModifier) {
+      if (key === 'ArrowUp' && canStep) {
         event.preventDefault();
         increase();
       }
@@ -195,11 +199,15 @@
       if (!edited) {
         edited = true;
       }
+
+      onkeydown?.(event);
     }}
-    oninput={() => {
+    oninput={(event) => {
       if (!edited) {
         edited = true;
       }
+
+      oninput?.(event);
     }}
     {onChange}
   />

package/dist/components/text-field/number-input.svelte.d.ts

@@ -8,7 +8,7 @@ type NumberInput = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const NumberInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const NumberInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -62,6 +62,6 @@ type Props = {
      */
     decreaseIcon?: Snippet<[]> | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/text-field/password-input.svelte

@@ -6,14 +6,11 @@
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
-  import Button from '../button/button.svelte';
-  import Icon from '../icon/icon.svelte';
-  import TextInput from './text-input.svelte';
+  import MaskedInput from './masked-input.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**
@@ -28,119 +25,9 @@
   let {
     /* eslint-disable prefer-const */
     value = $bindable(),
-    flex = false,
-    monospace = true,
-    class: className,
-    hidden = false,
-    disabled = false,
-    readonly = false,
-    required = false,
-    invalid = false,
-    children,
-    visibilityIcon,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
-
-  const id = $props.id();
-
-  /**
-   * Reference to the `<input>` element.
-   * @type {HTMLInputElement | undefined}
-   */
-  let inputElement = $state();
-  let passwordVisible = $state(false);
-
-  $effect(() => {
-    inputElement?.setAttribute('type', passwordVisible ? 'text' : 'password');
-  });
 </script>
 
-<div
-  role="none"
-  class="sui password-input {className}"
-  class:flex
-  class:disabled
-  class:readonly
-  {hidden}
->
-  <TextInput
-    dir="ltr"
-    bind:element={inputElement}
-    {...restProps}
-    {id}
-    bind:value
-    type="password"
-    spellcheck="false"
-    {flex}
-    {monospace}
-    {hidden}
-    {disabled}
-    {readonly}
-    {required}
-    {invalid}
-  />
-  <Button
-    iconic
-    disabled={disabled || readonly}
-    pressed={passwordVisible}
-    aria-label={_(
-      passwordVisible ? '_sui.password_input.hide_password' : '_sui.password_input.show_password',
-    )}
-    aria-controls={id}
-    onclick={() => {
-      passwordVisible = !passwordVisible;
-    }}
-  >
-    {#snippet startIcon()}
-      {#if visibilityIcon}
-        {@render visibilityIcon()}
-      {:else}
-        <Icon name={passwordVisible ? 'visibility_off' : 'visibility'} />
-      {/if}
-    {/snippet}
-  </Button>
-</div>
-
-<style>.password-input {
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.password-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.password-input :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
-.password-input :global(input) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-.password-input :global(button) {
-  flex: none;
-  margin-block: 0;
-  margin-inline-start: -1px;
-  margin-inline-end: 0;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-  aspect-ratio: 1/1;
-}
-.password-input :global(button:last-child) {
-  border-start-start-radius: 0;
-  border-start-end-radius: 4px;
-  border-end-end-radius: 4px;
-  border-end-start-radius: 0;
-}
-.password-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-}</style>
+<MaskedInput bind:value {...restProps} mask="type" />

package/dist/components/text-field/password-input.svelte.d.ts

@@ -9,7 +9,7 @@ type PasswordInput = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const PasswordInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const PasswordInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -29,6 +29,6 @@ type Props = {
      */
     visibilityIcon?: Snippet<[]> | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/text-field/search-bar.svelte

@@ -14,7 +14,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**

package/dist/components/text-field/search-bar.svelte.d.ts

@@ -11,7 +11,7 @@ type SearchBar = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
  * @see https://w3c.github.io/aria/#search
  */
-declare const SearchBar: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const SearchBar: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -49,6 +49,6 @@ type Props = {
      */
     onClear?: (() => void) | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/text-field/secret-input.svelte

@@ -6,14 +6,11 @@
   @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
-  import Button from '../button/button.svelte';
-  import Icon from '../icon/icon.svelte';
-  import TextInput from './text-input.svelte';
+  import MaskedInput from './masked-input.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**
@@ -28,122 +25,9 @@
   let {
     /* eslint-disable prefer-const */
     value = $bindable(),
-    flex = false,
-    monospace = true,
-    class: className,
-    hidden = false,
-    disabled = false,
-    readonly = false,
-    required = false,
-    invalid = false,
-    children,
-    visibilityIcon,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
-
-  const id = $props.id();
-
-  /**
-   * Reference to the `<input>` element.
-   * @type {HTMLInputElement | undefined}
-   */
-  let inputElement = $state();
-  let show = $state(false);
 </script>
 
-<div
-  role="none"
-  class="sui secret-input {className}"
-  class:flex
-  class:disabled
-  class:readonly
-  class:show
-  {hidden}
->
-  <!-- The field is masked with CSS rather than `type="password"`, so opt out of the features that
-  would remember the secret, like autofill history and the keyboard’s learned words -->
-  <TextInput
-    dir="ltr"
-    autocomplete="off"
-    autocapitalize="off"
-    autocorrect="off"
-    bind:element={inputElement}
-    {...restProps}
-    {id}
-    bind:value
-    spellcheck="false"
-    {flex}
-    {monospace}
-    {hidden}
-    {disabled}
-    {readonly}
-    {required}
-    {invalid}
-  />
-  <Button
-    iconic
-    disabled={disabled || readonly}
-    pressed={show}
-    aria-label={_(show ? '_sui.secret_input.hide_secret' : '_sui.secret_input.show_secret')}
-    aria-controls={id}
-    onclick={() => {
-      show = !show;
-    }}
-  >
-    {#snippet startIcon()}
-      {#if visibilityIcon}
-        {@render visibilityIcon()}
-      {:else}
-        <Icon name={show ? 'visibility_off' : 'visibility'} />
-      {/if}
-    {/snippet}
-  </Button>
-</div>
-
-<style>.secret-input {
-  display: inline-flex;
-  align-items: center;
-  margin: var(--sui-focus-ring-width);
-  min-width: var(--sui-textbox-singleline-min-width);
-}
-.secret-input.flex:not([hidden]) {
-  display: inline-flex;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  width: stretch;
-  min-width: 0;
-}
-.secret-input.show :global(input) {
-  -webkit-text-security: none;
-}
-.secret-input :global(.text-input) {
-  flex: auto;
-  margin: 0 !important;
-  width: 0;
-  min-width: 0 !important;
-}
-.secret-input :global(input) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  -webkit-text-security: disc;
-}
-.secret-input :global(button) {
-  flex: none;
-  margin-block: 0;
-  margin-inline-start: -1px;
-  margin-inline-end: 0;
-  border-width: 1px;
-  border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-  aspect-ratio: 1/1;
-}
-.secret-input :global(button:last-child) {
-  border-start-start-radius: 0;
-  border-start-end-radius: 4px;
-  border-end-end-radius: 4px;
-  border-end-start-radius: 0;
-}
-.secret-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
-}</style>
+<MaskedInput bind:value {...restProps} mask="css" />

package/dist/components/text-field/secret-input.svelte.d.ts

@@ -9,7 +9,7 @@ type SecretInput = {
  * the password.
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
  */
-declare const SecretInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const SecretInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -29,6 +29,6 @@ type Props = {
      */
     visibilityIcon?: Snippet<[]> | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/text-field/text-area.svelte

@@ -10,7 +10,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers, HighlightedToken, InputEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers, HighlightedToken, InputEventHandlers } from '../../typedefs.js';
    */
 
   /**

package/dist/components/text-field/text-area.svelte.d.ts

@@ -9,7 +9,7 @@ type TextArea = {
  * @see https://w3c.github.io/aria/#textbox
  * @see https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
  */
-declare const TextArea: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const TextArea: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -153,6 +153,6 @@ type Props = {
      */
     children?: Snippet<[]> | undefined;
 };
-import type { InputEventHandlers } from '../../typedefs';
-import type { HighlightedToken } from '../../typedefs';
+import type { InputEventHandlers } from '../../typedefs.js';
+import type { HighlightedToken } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/text-field/text-input.svelte

@@ -10,7 +10,7 @@
   import EmojiAutocomplete from './emoji-autocomplete.svelte';
 
   /**
-   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs.js';
    */
 
   /**

package/dist/components/text-field/text-input.svelte.d.ts

@@ -8,7 +8,7 @@ type TextInput = {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
  * @see https://w3c.github.io/aria/#textbox
  */
-declare const TextInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+declare const TextInput: import("svelte").Component<TextInputProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & InputEventHandlers & {
     /**
      * Input value.
      */
@@ -30,5 +30,5 @@ type Props = {
      */
     useEmojiAutocomplete?: boolean | undefined;
 };
-import type { TextInputProps } from '../../typedefs';
-import type { InputEventHandlers } from '../../typedefs';
+import type { TextInputProps } from '../../typedefs.js';
+import type { InputEventHandlers } from '../../typedefs.js';

package/dist/components/toast/toast.svelte

@@ -179,11 +179,11 @@
 </script>
 
 <script>
-  import { onMount, untrack } from 'svelte';
+  import { onMount } from 'svelte';
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { ToastPosition } from '../../typedefs';
+   * @import { ToastPosition } from '../../typedefs.js';
    */
 
   /**
@@ -220,10 +220,6 @@
    * @type {HTMLElement | undefined}
    */
   let toast = $state();
-  /**
-   * @type {number}
-   */
-  let timerId = $state(0);
   /**
    * Whether the pointer is over the toast or the focus is inside it. The auto-hide countdown is
    * held while it is, so a toast with a control in it can’t vanish from under the user (WCAG
@@ -323,23 +319,18 @@
     void duration;
     void held;
 
-    untrack(() => {
-      globalThis.clearTimeout(timerId);
-    });
-
-    if (show && duration && !held) {
-      timerId = /** @type {number} */ (
-        /** @type {unknown} */ (
-          globalThis.setTimeout(() => {
-            show = false;
-          }, duration)
-        )
-      );
+    if (!show || !duration || held) {
+      return undefined;
     }
 
-    // Stop the countdown when the toast is destroyed, or it would still hide the toast later
+    const timer = globalThis.setTimeout(() => {
+      show = false;
+    }, duration);
+
+    // Stop the countdown when any of the above changes, so the previous timer can’t fire, or when
+    // the toast is destroyed, or it would still hide the toast later
     return () => {
-      globalThis.clearTimeout(timerId);
+      globalThis.clearTimeout(timer);
     };
   });
 </script>

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

@@ -59,5 +59,5 @@ type Props = {
      */
     children?: Snippet<[]> | undefined;
 };
-import type { ToastPosition } from '../../typedefs';
+import type { ToastPosition } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

package/dist/components/tree/tree-item.svelte

@@ -14,7 +14,7 @@
   /**
    * @import { Snippet } from 'svelte';
    * @import { Attachment } from 'svelte/attachments';
-   * @import { CommonEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

package/dist/components/tree/tree-item.svelte.d.ts

@@ -9,7 +9,7 @@ type TreeItem = {
  * @see https://w3c.github.io/aria/#treeitem
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
  */
-declare const TreeItem: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const TreeItem: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * The `class` attribute on the wrapper element.
      */

package/dist/components/tree/tree.svelte

@@ -10,7 +10,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { CommonEventHandlers } from '../../typedefs';
+   * @import { CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

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

@@ -9,7 +9,7 @@ type Tree = {
  * @see https://w3c.github.io/aria/#tree
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
  */
-declare const Tree: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const Tree: import("svelte").Component<import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * A reference to the wrapper element.
      */

package/dist/components/util/font-links.svelte

@@ -60,4 +60,5 @@
     -moz-font-feature-settings: 'liga';
     font-feature-settings: 'liga';
   }
+
 </style>