@sveltia/ui 0.78.4 → 0.79.1

package/dist/components/slider/slider.svelte

@@ -12,6 +12,9 @@
   import { onMount } from 'svelte';
   import {
     findNearestStepIndex,
+    getNearestThumbIndex,
+    getSliderCurrentIndex,
+    getSliderKeyDirection,
     getSliderKeyTargetIndex,
     getSliderSteps,
     toLogicalX,
@@ -106,6 +109,29 @@
   let targetPointerId = $state(0);
   let targetValueIndex = $state(0);
 
+  /**
+   * Set the value of a thumb, and fire the `change` event if it’s actually changed. This is only
+   * called for user actions, so the event doesn’t fire when the slider is mounted or resized.
+   * @param {number} valueIndex Index in the {@link values} array, `0` for a single-thumb slider.
+   * @param {number} newValue New value.
+   */
+  const setValue = (valueIndex, newValue) => {
+    const _values = /** @type {[number, number]} */ (values);
+
+    if ((multiThumb ? _values[valueIndex] : value) === newValue) {
+      return;
+    }
+
+    if (multiThumb) {
+      _values[valueIndex] = newValue;
+      values = [..._values];
+      onChange?.({ values });
+    } else {
+      value = newValue;
+      onChange?.({ value });
+    }
+  };
+
   /**
    * Move a thumb with mouse.
    * @param {number} physicalX Physical X position in pixels from the left edge.
@@ -114,23 +140,17 @@
     const index = findNearestStepIndex(positionList, toLogicalX(physicalX, barWidth, isRTL()));
 
     if (
-      sliderPositions[targetValueIndex] === positionList[index] ||
-      (multiThumb &&
-        wouldCrossThumbs({
-          valueIndex: targetValueIndex,
-          targetPosition: positionList[index],
-          sliderPositions,
-        }))
+      multiThumb &&
+      wouldCrossThumbs({
+        valueIndex: targetValueIndex,
+        targetPosition: positionList[index],
+        sliderPositions,
+      })
     ) {
       return;
     }
 
-    if (multiThumb) {
-      /** @type {[number, number]} */ (values)[targetValueIndex] = valueList[index];
-      values = [.../** @type {[number, number]} */ (values)];
-    } else {
-      value = valueList[index];
-    }
+    setValue(targetValueIndex, valueList[index]);
   };
 
   /**
@@ -147,11 +167,16 @@
     }
 
     const _value = multiThumb ? /** @type {[number, number]} */ (values)[valueIndex] : value;
+    const rtl = isRTL();
 
     const index = getSliderKeyTargetIndex({
       key,
-      rtl: isRTL(),
-      currentIndex: valueList.indexOf(_value),
+      rtl,
+      currentIndex: getSliderCurrentIndex({
+        valueList,
+        value: _value,
+        decreasing: key === 'PageDown' || getSliderKeyDirection(key, rtl) === -1,
+      }),
       length: valueList.length,
     });
 
@@ -174,12 +199,7 @@
       return;
     }
 
-    if (multiThumb) {
-      /** @type {[number, number]} */ (values)[valueIndex] = valueList[index];
-      values = [.../** @type {[number, number]} */ (values)];
-    } else {
-      value = valueList[index];
-    }
+    setValue(valueIndex, valueList[index]);
   };
 
   /**
@@ -244,8 +264,9 @@
    * Handle the `pointerdown` event fired on the slider.
    * @param {PointerEvent} event `pointerdown` event.
    * @param {number} [valueIndex] Index in the {@link values} array to be used to get/set the value.
+   * Omitted when the track is pressed, so the thumb nearest to the pointer is used.
    */
-  const onPointerDown = (event, valueIndex = 0) => {
+  const onPointerDown = (event, valueIndex) => {
     if (disabled || readonly) {
       return;
     }
@@ -263,7 +284,11 @@
     startX = clientX - rect.left;
     startScreenX = screenX;
     targetPointerId = pointerId;
-    targetValueIndex = valueIndex;
+    targetValueIndex =
+      valueIndex ??
+      (multiThumb
+        ? getNearestThumbIndex(sliderPositions, toLogicalX(startX, barWidth, isRTL()))
+        : 0);
     slider.setPointerCapture(pointerId);
 
     document.addEventListener('pointermove', onPointerMove);
@@ -272,18 +297,24 @@
   };
 
   /**
-   * Update the thumb position and fire the `change` event when the value is changed.
+   * Get the thumb position for a value. A value that doesn’t sit on a step, such as `55` with a
+   * step of `10`, is kept as is until the user moves the thumb, but drawn at the nearest step.
+   * @param {number} _value Value.
+   * @returns {number} Position in pixels.
+   */
+  const getPosition = (_value) => positionList[findNearestStepIndex(valueList, _value)] ?? 0;
+
+  /**
+   * Update the thumb positions when the value or the track is changed.
    */
-  const onValueChange = () => {
+  const updatePositions = () => {
     if (multiThumb) {
       const [value0, value1] = /** @type {[number, number]} */ (values);
 
-      sliderPositions[0] = positionList[valueList.indexOf(value0)];
-      sliderPositions[1] = positionList[valueList.indexOf(value1)];
-      onChange?.({ values });
+      sliderPositions[0] = getPosition(value0);
+      sliderPositions[1] = getPosition(value1);
     } else {
-      sliderPositions[0] = positionList[valueList.indexOf(value)];
-      onChange?.({ value });
+      sliderPositions[0] = getPosition(value);
     }
   };
 
@@ -299,7 +330,7 @@
 
     barWidth = base.clientWidth;
     ({ valueList, positionList } = getSliderSteps({ min, max, step, barWidth }));
-    onValueChange();
+    updatePositions();
   };
 
   onMount(() => {
@@ -323,7 +354,7 @@
   $effect(() => {
     void value;
     void values;
-    onValueChange();
+    updatePositions();
   });
 </script>
 

package/dist/components/table/table-cell.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#cell
 -->
 <script>
+  import TablePart from './table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -20,17 +22,9 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="cell" class="sui table-cell {className}">
-  {@render children?.()}
-</div>
-
-<style>.table-cell {
-  display: table-cell;
-}</style>
+<TablePart {...restProps} role="cell" kind="table-cell" />

package/dist/components/table/table-col-header.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#columnheader
 -->
 <script>
+  import TablePart from './table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -20,17 +22,9 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="columnheader" class="sui table-col-header {className}">
-  {@render children?.()}
-</div>
-
-<style>.table-col-header {
-  display: table-cell;
-}</style>
+<TablePart {...restProps} role="columnheader" kind="table-col-header" />

package/dist/components/table/table-foot.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
+  import TablePart from './table-part.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -22,22 +23,14 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div
+<TablePart
   {...restProps}
   role="rowgroup"
-  class="sui table-foot {className}"
+  kind="table-foot"
   aria-roledescription={_('_sui.role_descriptions.table_foot')}
->
-  {@render children?.()}
-</div>
-
-<style>.table-foot {
-  display: table-footer-group;
-}</style>
+/>

package/dist/components/table/table-head.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { _ } from '@sveltia/i18n';
+  import TablePart from './table-part.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -22,22 +23,14 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div
+<TablePart
   {...restProps}
   role="rowgroup"
-  class="sui table-head {className}"
+  kind="table-head"
   aria-roledescription={_('_sui.role_descriptions.table_head')}
->
-  {@render children?.()}
-</div>
-
-<style>.table-head {
-  display: table-header-group;
-}</style>
+/>

package/dist/components/table/table-part.svelte

@@ -0,0 +1,69 @@
+<!--
+  @component
+  The row group, row or cell behind the leaf components of `<Table>` and `<Grid>`, which only differ
+  in their role, class name and `display`. Internal; not exported.
+-->
+<script>
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {'head' | 'foot' | 'row' | 'col-header' | 'row-header' | 'cell'} PartName
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {string} role The `role` attribute on the wrapper element.
+   * @property {`table-${PartName}` | `grid-${PartName}`} kind The component class name, which also
+   * determines the `display` style.
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {Snippet} [children] Primary slot content.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    role,
+    kind,
+    class: className,
+    children,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<div {...restProps} {role} class="sui {kind} {className}">
+  {@render children?.()}
+</div>
+
+<style>.table-head,
+.grid-head {
+  display: table-header-group;
+}
+
+.table-foot,
+.grid-foot {
+  display: table-footer-group;
+}
+
+.table-row,
+.grid-row {
+  display: table-row;
+  height: var(--sui-primary-row-height);
+}
+
+.table-col-header,
+.grid-col-header,
+.table-cell,
+.grid-cell {
+  display: table-cell;
+}
+
+.table-row-header,
+.grid-row-header {
+  display: table-cell;
+  height: var(--sui-secondary-row-height);
+}</style>

package/dist/components/table/table-part.svelte.d.ts

@@ -0,0 +1,48 @@
+export default TablePart;
+type TablePart = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+/**
+ * The row group, row or cell behind the leaf components of `<Table>` and `<Grid>`, which only differ
+ * in their role, class name and `display`. Internal; not exported.
+ */
+declare const TablePart: import("svelte").Component<{
+    /**
+     * The `role` attribute on the wrapper element.
+     */
+    role: string;
+    /**
+     * The component class name, which also
+     * determines the `display` style.
+     */
+    kind: `table-${"head" | "row" | "foot" | "col-header" | "row-header" | "cell"}` | `grid-${"head" | "row" | "foot" | "col-header" | "row-header" | "cell"}`;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * The `role` attribute on the wrapper element.
+     */
+    role: string;
+    /**
+     * The component class name, which also
+     * determines the `display` style.
+     */
+    kind: `table-${"head" | "row" | "foot" | "col-header" | "row-header" | "cell"}` | `grid-${"head" | "row" | "foot" | "col-header" | "row-header" | "cell"}`;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+};
+import type { Snippet } from 'svelte';

package/dist/components/table/table-row-header.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowheader
 -->
 <script>
+  import TablePart from './table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -20,18 +22,9 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="rowheader" class="sui table-row-header {className}">
-  {@render children?.()}
-</div>
-
-<style>.table-row-header {
-  display: table-cell;
-  height: var(--sui-secondary-row-height);
-}</style>
+<TablePart {...restProps} role="rowheader" kind="table-row-header" />

package/dist/components/table/table-row.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#row
 -->
 <script>
+  import TablePart from './table-part.svelte';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -20,18 +22,9 @@
    */
   let {
     /* eslint-disable prefer-const */
-    class: className,
-    children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="row" class="sui table-row {className}">
-  {@render children?.()}
-</div>
-
-<style>.table-row {
-  display: table-row;
-  height: var(--sui-primary-row-height);
-}</style>
+<TablePart {...restProps} role="row" kind="table-row" />

package/dist/components/tabs/tab-list.svelte

@@ -73,10 +73,22 @@
       updateIndicator();
     });
 
+    // A tab can also be selected from code through its `selected` prop, which doesn’t go through
+    // the `Change` event below
+    const selectionObserver = new MutationObserver(() => {
+      updateIndicator();
+    });
+
     observer.observe(/** @type {HTMLElement} */ (wrapper));
+    selectionObserver.observe(/** @type {HTMLElement} */ (wrapper), {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-selected'],
+    });
 
     return () => {
       observer.disconnect();
+      selectionObserver.disconnect();
     };
   });
 </script>

package/dist/components/tabs/tab.svelte

@@ -8,7 +8,7 @@
   import Button from '../button/button.svelte';
 
   /**
-   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

package/dist/components/tabs/tab.svelte.d.ts

@@ -8,7 +8,7 @@ type Tab = {
  * @see https://w3c.github.io/aria/#tab
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-declare const Tab: import("svelte").Component<ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const Tab: import("svelte").Component<ButtonProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * Whether to select the widget. An alias of the `aria-selected`
      * attribute.
@@ -22,4 +22,4 @@ type Props = {
      */
     selected?: boolean | undefined;
 };
-import type { ButtonProps } from '../../typedefs';
+import type { ButtonProps } from '../../typedefs.js';

package/dist/components/text-editor/constants.d.ts

@@ -6,7 +6,7 @@
  * TextEditorFormatType,
  * TextEditorInlineType,
  * TextEditorNodeType,
- * } from '../../typedefs';
+ * } from '../../typedefs.js';
  */
 /**
  * @type {EditorThemeClasses}
@@ -62,8 +62,8 @@ export const DISABLED_MARKDOWN_TAGS: string[];
  */
 export const IMPORT_UPDATE_TAG: "sui-import";
 import type { EditorThemeClasses } from 'lexical';
-import type { TextEditorFormatType } from '../../typedefs';
-import type { TextEditorInlineType } from '../../typedefs';
-import type { TextEditorBlockType } from '../../typedefs';
-import type { TextEditorNodeType } from '../../typedefs';
+import type { TextEditorFormatType } from '../../typedefs.js';
+import type { TextEditorInlineType } from '../../typedefs.js';
+import type { TextEditorBlockType } from '../../typedefs.js';
+import type { TextEditorNodeType } from '../../typedefs.js';
 import type { Transformer } from '@lexical/markdown';

package/dist/components/text-editor/constants.js

@@ -27,7 +27,7 @@ import { HeadingNode, QuoteNode } from '@lexical/rich-text';
  * TextEditorFormatType,
  * TextEditorInlineType,
  * TextEditorNodeType,
- * } from '../../typedefs';
+ * } from '../../typedefs.js';
  */
 
 /**

package/dist/components/text-editor/core.d.ts

@@ -1,5 +1,4 @@
 export function isStaticDecoratorContent(target: EventTarget | null): boolean;
-export function $moveCaretIntoBlock(): boolean;
 export function handleEditorMouseDown(editor: LexicalEditor, event: MouseEvent): boolean;
 export function isSafeLinkURL(url: string): boolean;
 export function getSelectionTypes(): TextEditorSelectionState;
@@ -8,7 +7,7 @@ export function onEditorUpdate(editor: LexicalEditor, enabledTransformers: Trans
 export function getComponentMarkdown({ node, createNode, transformer, createMarkdown }: TextEditorComponent): string;
 export function initEditor({ enabledButtons, components, useMarkdownShortcuts, isCodeEditor, defaultLanguage, }: TextEditorConfig): InitEditorResult;
 export function loadCodeHighlighter(lang: string): Promise<void>;
-export function convertMarkdownToLexical(editor: LexicalEditor, value: string, enabledTransformers: Transformer[]): Promise<string>;
+export function convertMarkdownToLexical(editor: LexicalEditor, value: string, enabledTransformers: Transformer[]): Promise<string | undefined>;
 export function focusEditor(editor: LexicalEditor): Promise<void>;
 export type InitEditorResult = {
     /**
@@ -25,7 +24,7 @@ export type InitEditorResult = {
     dispose: () => void;
 };
 import type { LexicalEditor } from 'lexical';
-import type { TextEditorSelectionState } from '../../typedefs';
+import type { TextEditorSelectionState } from '../../typedefs.js';
 import type { Transformer } from '@lexical/markdown';
-import type { TextEditorComponent } from '../../typedefs';
-import type { TextEditorConfig } from '../../typedefs';
+import type { TextEditorComponent } from '../../typedefs.js';
+import type { TextEditorConfig } from '../../typedefs.js';