@sveltia/ui 0.2.4 → 0.3.0

package/package/components/{core/radio-button.svelte → radio/radio.svelte}

@@ -1,12 +1,14 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="radio">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
   @see https://w3c.github.io/aria/#radio
-  @see https://w3c.github.io/aria-practices/#radiobutton
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
-  import { getRandomId } from '../helpers/util';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.
@@ -19,12 +21,18 @@
   /** @type {string} */
   export let name = '';
 
+  /** @type {string?} */
+  export let label = undefined;
+
   /** @type {string?} */
   export let value = undefined;
 
   /** @type {boolean} */
   export let selected = false;
 
+  /** @type {boolean} */
+  export let disabled = false;
+
   const id = getRandomId('checkbox');
   /** @type {Button} */
   let buttonComponent;
@@ -36,7 +44,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <span
-  class="sui radio-button {className}"
+  class="sui radio {className}"
   on:click={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonComponent.element.click();
@@ -45,23 +53,32 @@
 >
   <Button
     {id}
+    {disabled}
+    {name}
+    {value}
     role="radio"
     aria-checked={selected}
     aria-labelledby="{id}-label"
     bind:this={buttonComponent}
     on:click={(event) => {
       event.preventDefault();
-      selected = !selected;
+      selected = true;
     }}
   >
     <Icon slot="start-icon" name="circle" />
   </Button>
-  <label id="{id}-label">
-    <slot />
-  </label>
+  {#if $$slots.default || label}
+    <label id="{id}-label">
+      {#if $$slots.default}
+        <slot />
+      {:else}
+        {label}
+      {/if}
+    </label>
+  {/if}
 </span>
 
-<style>.radio-button {
+<style>.radio {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -70,24 +87,34 @@
   -webkit-user-select: none;
   user-select: none;
 }
-.radio-button :global(button) {
+.radio.disabled {
+  cursor: default;
+}
+.radio.disabled label {
+  color: var(--disabled-foreground-color);
+}
+.radio :global(button) {
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--control-border-color);
+  border-color: var(--checkbox-border-color);
   border-radius: 24px;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   color: var(--primary-accent-color-lighter);
   transition: all 200ms;
 }
-.radio-button :global(button) :global(.icon) {
-  font-size: var(--font-size--large);
+.radio :global(button) :global(.icon) {
+  font-size: 14px;
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
 }
-.radio-button :global(button[aria-checked="true"]) {
+.radio :global(button[aria-checked="true"]) {
+  border-color: var(--primary-accent-color-lighter);
   color: var(--primary-accent-color-lighter);
 }
-.radio-button :global(button[aria-checked="false"]) {
+.radio :global(button[aria-checked="false"]) {
   color: transparent;
+}
+.radio label {
+  cursor: inherit;
 }</style>

package/package/components/radio/radio.svelte.d.ts

@@ -0,0 +1,43 @@
+/** @typedef {typeof __propDef.props}  RadioProps */
+/** @typedef {typeof __propDef.events}  RadioEvents */
+/** @typedef {typeof __propDef.slots}  RadioSlots */
+/**
+ * The equivalent of the HTML `<input type="radio">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ * @see https://w3c.github.io/aria/#radio
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export default class Radio extends SvelteComponentTyped<{
+    label?: string;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    class?: string;
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RadioProps = typeof __propDef.props;
+export type RadioEvents = typeof __propDef.events;
+export type RadioSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | null;
+        disabled?: boolean;
+        name?: string;
+        value?: string | null;
+        class?: string;
+        selected?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/{composite → select}/combobox.svelte

@@ -1,18 +1,19 @@
 <!--
   @component
+  A variant of the `<Select>` widget with an auto-complete text input field.
   @see https://w3c.github.io/aria/#combobox
-  @see https://w3c.github.io/aria-practices/#combobox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import TextInput from '../core/text-input.svelte';
-  import { getRandomId } from '../helpers/util';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import Listbox from '../listbox/listbox.svelte';
+  import TextInput from '../text-field/text-input.svelte';
   import Popup from '../util/popup.svelte';
-  import Listbox from './listbox.svelte';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.

package/package/components/{composite → select}/combobox.svelte.d.ts

@@ -2,16 +2,17 @@
 /** @typedef {typeof __propDef.events}  ComboboxEvents */
 /** @typedef {typeof __propDef.slots}  ComboboxSlots */
 /**
+ * A variant of the `<Select>` widget with an auto-complete text input field.
  * @see https://w3c.github.io/aria/#combobox
- * @see https://w3c.github.io/aria-practices/#combobox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  */
 export default class Combobox extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
     position?: PopupPosition;
-    class?: string;
     disabled?: boolean;
     value?: string | number;
+    class?: string;
     readOnly?: boolean;
 }, {
     change: CustomEvent<any>;
@@ -30,9 +31,9 @@ declare const __propDef: {
         [x: string]: any;
         label?: string;
         position?: PopupPosition;
-        class?: string;
         disabled?: boolean;
         value?: (string | number | undefined);
+        class?: string;
         readOnly?: boolean;
     };
     events: {

package/package/components/{composite → select}/select.svelte

@@ -1,6 +1,8 @@
 <!--
   @component
-  A read-only variant of `<Combobox>`.
+  A read-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+  @see https://w3c.github.io/aria/#combobox
 -->
 <script>
   import Combobox from './combobox.svelte';

package/package/components/{composite → select}/select.svelte.d.ts

@@ -1,12 +1,16 @@
 /** @typedef {typeof __propDef.props}  SelectProps */
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
-/** A read-only variant of `<Combobox>`. */
+/**
+ * A read-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+ * @see https://w3c.github.io/aria/#combobox
+ */
 export default class Select extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
-    class?: string;
     value?: string;
+    class?: string;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -23,8 +27,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
-        class?: string;
         value?: string | null;
+        class?: string;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/{core → slider}/slider.svelte

@@ -1,5 +1,7 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="range">` element, but it comes with the multi-thumb
+  support.
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
   @see https://w3c.github.io/aria/#slider
   @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
@@ -18,11 +20,14 @@
 
   export let value = 0;
   export let sliderLabel = '';
+  /** @type {[number, number]} */
   export let values = undefined;
-  export let sliderLabels = [];
+  /** @type {[string, string]} */
+  export let sliderLabels = undefined;
   export let min = 0;
   export let max = 100;
   export let step = 1;
+  /** @type {(string[] | number[])} */
   export let optionLabels = [];
 
   $: multiThumb = !!values;
@@ -40,57 +45,59 @@
   let targetValueIndex = 0;
 
   /**
-   *
-   * @param {number} diff
+   * Move a thumb with mouse.
+   * @param {number} diff Distance from the original X position in pixels.
    */
-  const dragSlider = (diff) => {
-    if (diff >= 0 && diff <= barWidth) {
-      const fromIndex = positionList.findLastIndex((s) => s <= diff);
-      const toIndex = positionList.findIndex((s) => diff <= s);
+  const moveThumb = (diff) => {
+    if (diff < 0) {
+      diff = 0;
+    } else if (diff > barWidth) {
+      diff = barWidth;
+    }
 
-      const index =
-        Math.abs(positionList[fromIndex] - diff) < Math.abs(positionList[toIndex] - diff)
-          ? fromIndex
-          : toIndex;
+    const fromIndex = positionList.findLastIndex((s) => s <= diff);
+    const toIndex = positionList.findIndex((s) => diff <= s);
 
-      if (
-        sliderPositions[targetValueIndex] === positionList[index] ||
-        (multiThumb &&
-          ((targetValueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
-            (targetValueIndex === 1 && sliderPositions[0] >= positionList[index])))
-      ) {
-        return;
-      }
+    const index =
+      Math.abs(positionList[fromIndex] - diff) < Math.abs(positionList[toIndex] - diff)
+        ? fromIndex
+        : toIndex;
 
-      sliderPositions[targetValueIndex] = positionList[index];
+    if (
+      sliderPositions[targetValueIndex] === positionList[index] ||
+      (multiThumb &&
+        ((targetValueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
+          (targetValueIndex === 1 && sliderPositions[0] >= positionList[index])))
+    ) {
+      return;
+    }
 
-      if (multiThumb) {
-        values[targetValueIndex] = valueList[index];
-        dispatch('change', { values });
-      } else {
-        value = valueList[index];
-        dispatch('change', { value });
-      }
+    if (multiThumb) {
+      values[targetValueIndex] = valueList[index];
+    } else {
+      value = valueList[index];
     }
   };
 
   /**
-   *
+   * Handle the `keydown` event fired on the slider.
    * @param {KeyboardEvent} event `keydown` event.
-   * @param {number} [valueIndex]
+   * @param {number} [valueIndex] Index in the {@link values} array to be used to get/set the value.
    */
   const onKeyDown = (event, valueIndex = 0) => {
-    const { key, shiftKey, altKey, ctrlKey, metaKey } = event;
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+    const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-    if (shiftKey || altKey || ctrlKey || metaKey) {
+    if (hasModifier) {
       return;
     }
 
+    const _value = multiThumb ? values[valueIndex] : value;
     let index = -1;
 
     if (['ArrowDown', 'ArrowLeft'].includes(key)) {
-      if (value > min) {
-        index = valueList.indexOf(value) - 1;
+      if (_value > min) {
+        index = valueList.indexOf(_value) - 1;
       }
 
       event.preventDefault();
@@ -98,8 +105,8 @@
     }
 
     if (['ArrowUp', 'ArrowRight'].includes(key)) {
-      if (value < max) {
-        index = valueList.indexOf(value) + 1;
+      if (_value < max) {
+        index = valueList.indexOf(_value) + 1;
       }
 
       event.preventDefault();
@@ -115,22 +122,18 @@
         return;
       }
 
-      sliderPositions[valueIndex] = positionList[index];
-
       if (multiThumb) {
         values[valueIndex] = valueList[index];
-        dispatch('change', { values });
       } else {
         value = valueList[index];
-        dispatch('change', { value });
       }
     }
   };
 
   /**
-   *
+   * Handle the `mousedown` event fired on the slider.
    * @param {MouseEvent} event `mousedown` event.
-   * @param {number} [valueIndex]
+   * @param {number} [valueIndex] Index in the {@link values} array to be used to get/set the value.
    */
   const onMouseDown = (event, valueIndex = 0) => {
     const { clientX, screenX } = event;
@@ -142,22 +145,31 @@
   };
 
   /**
-   *
+   * Handle the `mousemove` event fired anywhere on the page.
    * @param {MouseEvent} event `mousemove` event.
    */
   const onMouseMove = (event) => {
     if (dragging) {
-      dragSlider(startX + (event.screenX - startScreenX));
+      moveThumb(startX + (event.screenX - startScreenX));
+    }
+  };
+
+  /**
+   * Handle the `mouseup` event fired anywhere on the page.
+   */
+  const onMouseUp = () => {
+    if (dragging) {
+      dragging = false;
     }
   };
 
   /**
-   *
+   * Handle the `click` event fired on the slider.
    * @param {MouseEvent} event `click` event.
    */
   const onClick = (event) => {
     if (!multiThumb && !dragging) {
-      dragSlider(/** @type {any} */ (event).layerX);
+      moveThumb(/** @type {any} */ (event).layerX);
     }
 
     if (dragging) {
@@ -165,6 +177,20 @@
     }
   };
 
+  /**
+   * Update the thumb position and fire the `change` event when the value is changed.
+   */
+  const onValueChange = () => {
+    if (multiThumb) {
+      sliderPositions[0] = positionList[valueList.indexOf(values[0])];
+      sliderPositions[1] = positionList[valueList.indexOf(values[1])];
+      dispatch('change', { values });
+    } else {
+      sliderPositions[0] = positionList[valueList.indexOf(value)];
+      dispatch('change', { value });
+    }
+  };
+
   onMount(() => {
     barWidth = base.clientWidth;
 
@@ -174,17 +200,16 @@
     valueList = new Array(stepCount).fill(0).map((_, index) => index * step + min, 10);
     positionList = new Array(stepCount).fill(0).map((_, index) => index * stepWidth);
 
-    if (multiThumb) {
-      sliderPositions[0] = positionList[valueList.indexOf(values[0])];
-      sliderPositions[1] = positionList[valueList.indexOf(values[1])];
-    } else {
-      sliderPositions[0] = positionList[valueList.indexOf(value)];
-    }
+    onValueChange();
   });
+
+  // @ts-ignore Arguments are triggers
+  $: onValueChange(value, values);
 </script>
 
 <svelte:body
   on:mousemove={onMouseMove}
+  on:mouseup={onMouseUp}
   on:click={() => {
     dragging = false;
   }}
@@ -206,12 +231,12 @@
       style:width="{multiThumb ? sliderPositions[1] - sliderPositions[0] : sliderPositions[0]}px"
     />
     <div
-      role="slider"
       tabindex="0"
-      aria-label={multiThumb ? sliderLabels[0] || '' : sliderLabel}
+      role="slider"
+      aria-label={multiThumb ? sliderLabels?.[0] || '' : sliderLabel}
       aria-valuemin={min}
       aria-valuemax={max}
-      aria-valuenow={value}
+      aria-valuenow={multiThumb ? values[0] : value}
       style:left="{sliderPositions[0]}px"
       on:mousedown={(event) => {
         onMouseDown(event, 0);
@@ -222,12 +247,12 @@
     />
     {#if multiThumb}
       <div
-        role="slider"
         tabindex="0"
-        aria-label={sliderLabels[1] || ''}
+        role="slider"
+        aria-label={sliderLabels?.[1] || ''}
         aria-valuemin={min}
         aria-valuemax={max}
-        aria-valuenow={value}
+        aria-valuenow={values[1]}
         style:left="{sliderPositions[1]}px"
         on:mousedown={(event) => {
           onMouseDown(event, 1);

package/package/components/{core → slider}/slider.svelte.d.ts

@@ -2,21 +2,23 @@
 /** @typedef {typeof __propDef.events}  SliderEvents */
 /** @typedef {typeof __propDef.slots}  SliderSlots */
 /**
+ * The equivalent of the HTML `<input type="range">` element, but it comes with the multi-thumb
+ * support.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
  * @see https://w3c.github.io/aria/#slider
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
  */
 export default class Slider extends SvelteComponentTyped<{
-    class?: string;
     value?: number;
+    class?: string;
+    sliderLabel?: string;
+    values?: [number, number];
+    sliderLabels?: [string, string];
     min?: number;
     max?: number;
     step?: number;
-    sliderLabel?: string;
-    values?: any;
-    sliderLabels?: any[];
-    optionLabels?: any[];
+    optionLabels?: string[] | number[];
 }, {
     click: MouseEvent;
     change: CustomEvent<any>;
@@ -30,15 +32,15 @@ export type SliderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
         value?: number;
+        class?: string;
+        sliderLabel?: string;
+        values?: [number, number];
+        sliderLabels?: [string, string];
         min?: number;
         max?: number;
         step?: number;
-        sliderLabel?: string;
-        values?: any;
-        sliderLabels?: any[];
-        optionLabels?: any[];
+        optionLabels?: (string[] | number[]);
     };
     events: {
         click: MouseEvent;

package/package/components/{core → switch}/switch.svelte

@@ -1,7 +1,8 @@
 <!--
   @component
+  A variant of `<Checkbox>`, looking like a switch that can be often seen on mobile apps.
   @see https://w3c.github.io/aria/#switch
-  @see https://w3c.github.io/aria-practices/#switch
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
 -->
 <script>
   /**
@@ -19,49 +20,65 @@
   export let disabled = false;
 </script>
 
-<label class="sui switch {className}" class:disabled>
-  <input type="checkbox" role="switch" bind:checked {disabled} />
+<button
+  class="sui switch {className}"
+  {disabled}
+  role="switch"
+  aria-disabled={disabled}
+  aria-checked={checked}
+  on:click={() => {
+    checked = !checked;
+  }}
+>
   <span />
   {#if label}
     {label}
   {:else}
     <slot />
   {/if}
-</label>
+</button>
 
-<style>label {
+<style>button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  border-width: 0;
+  border-style: solid;
+  border-color: transparent;
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  box-shadow: none;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
 }
-label.disabled {
+button:disabled {
   cursor: default;
 }
-
-input {
-  position: absolute;
-  left: -99999px;
+button:disabled span {
+  opacity: 0.4;
 }
-input:focus + span {
-  background-color: var(--highlight-background-color);
+button:focus-visible {
+  outline: 0;
 }
-
-input:checked + span {
+button:focus-visible span::before {
+  outline-offset: 1px;
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: var(--primary-accent-color-lighter);
+}
+button[aria-checked=true] span {
   background-color: var(--primary-accent-color);
   border-color: transparent;
 }
-input:checked + span::before {
+button[aria-checked=true] span::before {
   transform: translateX(22px);
   background-color: var(--primary-accent-color-foreground);
 }
 
-input:disabled + span {
-  opacity: 0.4;
-}
-
 span {
   position: relative;
   width: 42px;