@sveltia/ui 0.9.0 → 0.10.1

package/package/components/select/combobox.svelte

@@ -66,17 +66,17 @@
   const id = getRandomId('combobox');
   /** @type {HTMLElement} */
   let comboboxElement;
-  /** @type {TextInput?} */
+  /** @type {TextInput | undefined} */
   let inputComponent;
-  /** @type {Popup?} */
+  /** @type {Popup | undefined} */
   let popupComponent;
   let isPopupOpen = writable(false);
   /** @type {string} */
   let label = '';
 
   /**
-   * Update the `value` and `label` whenever an option is selected
-   * @param {HTMLButtonElement} target Selected option.
+   * Update the `value` and `label` whenever an option is selected.
+   * @param {HTMLButtonElement} target - Selected option.
    */
   const onSelect = (target) => {
     // @todo support more types
@@ -88,12 +88,12 @@
   $: {
     if (popupComponent?.content) {
       window.requestAnimationFrame(() => {
-        const selected = popupComponent.content.querySelector(
+        const selected = popupComponent?.content?.querySelector(
           '[role="option"][aria-selected="true"]',
         );
 
         if (selected) {
-          onSelect(/** @type {HTMLButtonElement?} */ (selected));
+          onSelect(/** @type {HTMLButtonElement} */ (selected));
         }
       });
     }
@@ -157,7 +157,9 @@
       }
     }}
   >
-    <Icon slot="start-icon" name="expand_more" />
+    <slot name="chevron-icon" slot="start-icon">
+      <Icon name="expand_more" />
+    </slot>
   </Button>
 </div>
 <Popup
@@ -172,7 +174,7 @@
   <Listbox
     on:click={(event) => {
       if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
-        onSelect(/** @type {HTMLButtonElement?} */ (event.target));
+        onSelect(/** @type {HTMLButtonElement} */ (event.target));
       }
     }}
   >

package/package/components/select/combobox.svelte.d.ts

@@ -9,20 +9,23 @@
  */
 export default class Combobox extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string | number;
-    position?: PopupPosition;
-    hidden?: boolean;
-    readonly?: boolean;
-    editable?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | number | undefined;
+    position?: PopupPosition | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    editable?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'chevron-icon': {
+        slot: string;
+    };
     default: {};
 }> {
 }
@@ -33,15 +36,15 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: (string | number | undefined);
-        position?: PopupPosition;
+        position?: PopupPosition | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        editable?: boolean;
+        readonly?: boolean | undefined;
+        editable?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -49,6 +52,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'chevron-icon': {
+            slot: string;
+        };
         default: {};
     };
 };

package/package/components/select/select.svelte.d.ts

@@ -9,13 +9,13 @@
  */
 export default class Select extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    value?: string | number;
-    hidden?: boolean;
-    readonly?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | number | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -31,13 +31,13 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: (string | number | undefined);
         hidden?: boolean | undefined;
-        readonly?: boolean;
+        readonly?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte

@@ -38,26 +38,26 @@
   export let invalid = false;
   /**
    * Minimum allowed value. An alias of the `aria-valuemin` attribute.
-   * @type {number | undefined}
+   * @type {number}
    */
   export let min = 0;
   /**
    * Maximum allowed value. An alias of the `aria-valuemax` attribute.
-   * @type {number | undefined}
+   * @type {number}
    */
   export let max = 100;
 
   export let value = 0;
   export let sliderLabel = '';
-  /** @type {[number, number]} */
+  /** @type {[number, number] | undefined} */
   export let values = undefined;
-  /** @type {[string, string]} */
+  /** @type {[string, string] | undefined} */
   export let sliderLabels = undefined;
   export let step = 1;
   /** @type {(string[] | number[])} */
   export let optionLabels = [];
 
-  $: multiThumb = !!values;
+  $: multiThumb = Array.isArray(values);
 
   const dispatch = createEventDispatcher();
   /** @type {HTMLElement | undefined} */
@@ -76,7 +76,7 @@
 
   /**
    * Move a thumb with mouse.
-   * @param {number} diff Distance from the original X position in pixels.
+   * @param {number} diff - Distance from the original X position in pixels.
    */
   const moveThumb = (diff) => {
     if (diff < 0) {
@@ -103,7 +103,7 @@
     }
 
     if (multiThumb) {
-      values[targetValueIndex] = valueList[index];
+      /** @type {[number, number]} */ (values)[targetValueIndex] = valueList[index];
     } else {
       value = valueList[index];
     }
@@ -111,8 +111,9 @@
 
   /**
    * Handle the `keydown` event fired on the slider.
-   * @param {KeyboardEvent} event `keydown` event.
-   * @param {number} [valueIndex] Index in the {@link values} array to be used to get/set the value.
+   * @param {KeyboardEvent} event - `keydown` event.
+   * @param {number} [valueIndex] - Index in the {@link values} array to be used to get/set the
+   * value.
    */
   const onKeyDown = (event, valueIndex = 0) => {
     const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
@@ -122,7 +123,7 @@
       return;
     }
 
-    const _value = multiThumb ? values[valueIndex] : value;
+    const _value = multiThumb ? /** @type {[number, number]} */ (values)[valueIndex] : value;
     let index = -1;
 
     if (['ArrowDown', 'ArrowLeft'].includes(key)) {
@@ -153,7 +154,7 @@
       }
 
       if (multiThumb) {
-        values[valueIndex] = valueList[index];
+        /** @type {[number, number]} */ (values)[valueIndex] = valueList[index];
       } else {
         value = valueList[index];
       }
@@ -162,7 +163,7 @@
 
   /**
    * Handle the `pointermove` event fired anywhere on the page.
-   * @param {PointerEvent} event `pointermove` event.
+   * @param {PointerEvent} event - `pointermove` event.
    */
   const onPointerMove = (event) => {
     const { screenX, pointerId } = event;
@@ -176,7 +177,7 @@
 
   /**
    * Handle the `pointerup` and `pointercancel` events fired anywhere on the page.
-   * @param {PointerEvent} event `pointerup` or `pointercancel` event.
+   * @param {PointerEvent} event - `pointerup` or `pointercancel` event.
    */
   const onPointerUp = (event) => {
     const { pointerId } = event;
@@ -199,8 +200,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.
+   * @param {PointerEvent} event - `pointerdown` event.
+   * @param {number} [valueIndex] - Index in the {@link values} array to be used to get/set the
+   * value.
    */
   const onPointerDown = (event, valueIndex = 0) => {
     const { clientX, screenX, pointerId } = event;
@@ -210,7 +212,7 @@
     }
 
     dragging = true;
-    startX = clientX - base.getBoundingClientRect().x;
+    startX = clientX - /** @type {HTMLElement} */ (base).getBoundingClientRect().x;
     startScreenX = screenX;
     targetPointerId = pointerId;
     targetValueIndex = valueIndex;
@@ -222,7 +224,7 @@
 
   /**
    * Handle the `click` event fired on the slider.
-   * @param {MouseEvent} event `click` event.
+   * @param {MouseEvent} event - `click` event.
    */
   const onClick = (event) => {
     if (disabled || readonly || multiThumb || dragging) {
@@ -237,8 +239,10 @@
    */
   const onValueChange = () => {
     if (multiThumb) {
-      sliderPositions[0] = positionList[valueList.indexOf(values[0])];
-      sliderPositions[1] = positionList[valueList.indexOf(values[1])];
+      const [value0, value1] = /** @type {[number, number]} */ (values);
+
+      sliderPositions[0] = positionList[valueList.indexOf(value0)];
+      sliderPositions[1] = positionList[valueList.indexOf(value1)];
       dispatch('change', { values });
     } else {
       sliderPositions[0] = positionList[valueList.indexOf(value)];
@@ -269,7 +273,7 @@
     const observer = new ResizeObserver(() => init());
     const query = window.matchMedia('(pointer: coarse)');
 
-    observer.observe(base);
+    observer.observe(/** @type {HTMLElement} */ (base));
     query.addEventListener('change', init);
     init();
 
@@ -323,7 +327,7 @@
       aria-invalid={invalid}
       aria-valuemin={min}
       aria-valuemax={max}
-      aria-valuenow={multiThumb ? values[0] : value}
+      aria-valuenow={multiThumb ? values?.[0] : value}
       style:left="{sliderPositions[0]}px"
       on:pointerdown={(event) => onPointerDown(event, 0)}
       on:keydown={(event) => onKeyDown(event, 0)}
@@ -339,7 +343,7 @@
         aria-invalid={invalid}
         aria-valuemin={min}
         aria-valuemax={max}
-        aria-valuenow={values[1]}
+        aria-valuenow={values?.[1]}
         style:left="{sliderPositions[1]}px"
         on:pointerdown={(event) => onPointerDown(event, 1)}
         on:keydown={(event) => onKeyDown(event, 1)}

package/package/components/slider/slider.svelte.d.ts

@@ -11,19 +11,19 @@
  */
 export default class Slider extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    max?: number;
-    min?: number;
-    step?: number;
-    value?: number;
-    hidden?: boolean;
-    readonly?: boolean;
-    values?: [number, number];
-    sliderLabel?: string;
-    sliderLabels?: [string, string];
-    optionLabels?: string[] | number[];
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    max?: number | undefined;
+    min?: number | undefined;
+    step?: number | undefined;
+    value?: number | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    values?: [number, number] | undefined;
+    sliderLabel?: string | undefined;
+    sliderLabels?: [string, string] | undefined;
+    optionLabels?: string[] | number[] | undefined;
 }, {
     click: MouseEvent;
     change: CustomEvent<any>;
@@ -38,19 +38,19 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
         max?: number | undefined;
         min?: number | undefined;
-        step?: number;
-        value?: number;
+        step?: number | undefined;
+        value?: number | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        values?: [number, number];
-        sliderLabel?: string;
-        sliderLabels?: [string, string];
-        optionLabels?: (string[] | number[]);
+        readonly?: boolean | undefined;
+        values?: [number, number] | undefined;
+        sliderLabel?: string | undefined;
+        sliderLabels?: [string, string] | undefined;
+        optionLabels?: string[] | number[] | undefined;
     };
     events: {
         click: MouseEvent;

package/package/components/switch/switch.svelte

@@ -5,6 +5,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
 -->
 <script>
+  import { createEventDispatcher } from 'svelte';
+
   /**
    * The `class` attribute on the wrapper element.
    * @type {string}
@@ -46,6 +48,8 @@
    * @type {string | undefined}
    */
   export let label = undefined;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <button
@@ -64,6 +68,7 @@
   on:click={() => {
     if (!disabled && !readonly) {
       checked = !checked;
+      dispatch('change', { checked });
     }
   }}
 >

package/package/components/switch/switch.svelte.d.ts

@@ -8,15 +8,17 @@
  */
 export default class Switch extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    label?: string;
-    checked?: boolean | "mixed";
-    disabled?: boolean;
-    required?: boolean;
-    hidden?: boolean;
-    readonly?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    label?: string | undefined;
+    checked?: boolean | "mixed" | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
 }, {
+    change: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -29,16 +31,18 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
         label?: string | undefined;
-        checked?: boolean | 'mixed';
-        disabled?: boolean;
-        required?: boolean;
+        checked?: boolean | "mixed" | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
+        readonly?: boolean | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package/components/table/table-body.svelte.d.ts

@@ -8,8 +8,8 @@
  */
 export default class TableBody extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
+    class?: string | undefined;
+    label?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,8 +23,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        label?: string;
+        class?: string | undefined;
+        label?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table-cell.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class TableCell extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table-col-header.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class TableColHeader extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table-foot.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class TableFoot extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table-head.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class TableHead extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table-row-header.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class TableRowHeader extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table-row.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class TableRow extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/table/table.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class Table extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/tabs/tab-box.svelte

@@ -0,0 +1,30 @@
+<!--
+  @component
+  The container of `<TabList>` and `<TabPanels>`. The component name derives from XUL. This can be
+  omitted if not using vertical tabs.
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  /**
+   * Orientation of the widget. This is typically contrary to `<TabList>`’s `orientation`.
+   * @type {'horizontal' | 'vertical'}
+   */
+  export let orientation = 'vertical';
+</script>
+
+<div role="none" class="sui tab-box {orientation} {className}">
+  <slot />
+</div>
+
+<style>.tab-box {
+  display: flex;
+}
+.tab-box.vertical {
+  flex-direction: column;
+}</style>

package/package/components/tabs/tab-box.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  TabBoxProps */
+/** @typedef {typeof __propDef.events}  TabBoxEvents */
+/** @typedef {typeof __propDef.slots}  TabBoxSlots */
+/**
+ * The container of `<TabList>` and `<TabPanels>`. The component name derives from XUL. This can be
+ * omitted if not using vertical tabs.
+ */
+export default class TabBox extends SvelteComponent<{
+    class?: string | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TabBoxProps = typeof __propDef.props;
+export type TabBoxEvents = typeof __propDef.events;
+export type TabBoxSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        orientation?: "vertical" | "horizontal" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};