@sveltia/ui 0.6.6 → 0.7.0

package/package/components/slider/slider.svelte

@@ -11,12 +11,41 @@
   import { createEventDispatcher, onMount } from 'svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * Minimum allowed value. An alias of the `aria-valuemin` attribute.
+   * @type {number | undefined}
+   */
+  export let min = 0;
+  /**
+   * Maximum allowed value. An alias of the `aria-valuemax` attribute.
+   * @type {number | undefined}
+   */
+  export let max = 100;
 
   export let value = 0;
   export let sliderLabel = '';
@@ -24,8 +53,6 @@
   export let values = undefined;
   /** @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 = [];
@@ -33,15 +60,18 @@
   $: multiThumb = !!values;
 
   const dispatch = createEventDispatcher();
-  /** @type {HTMLElement?} */
+  /** @type {HTMLElement | undefined} */
   let base = undefined;
   let barWidth = 0;
+  /** @type {number[]} */
   let positionList = [];
+  /** @type {number[]} */
   let valueList = [];
   let startX = 0;
   let startScreenX = 0;
   const sliderPositions = [0, 0];
   let dragging = false;
+  let targetPointerId = 0;
   let targetValueIndex = 0;
 
   /**
@@ -88,7 +118,7 @@
     const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
     const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-    if (hasModifier) {
+    if (disabled || readonly || hasModifier) {
       return;
     }
 
@@ -116,8 +146,8 @@
     if (index > -1) {
       if (
         multiThumb &&
-        ((targetValueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
-          (targetValueIndex === 1 && sliderPositions[0] >= positionList[index]))
+        ((valueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
+          (valueIndex === 1 && sliderPositions[0] >= positionList[index]))
       ) {
         return;
       }
@@ -131,36 +161,63 @@
   };
 
   /**
-   * Handle the `mousedown` event fired on the slider.
-   * @param {MouseEvent} event `mousedown` event.
-   * @param {number} [valueIndex] Index in the {@link values} array to be used to get/set the value.
+   * Handle the `pointermove` event fired anywhere on the page.
+   * @param {PointerEvent} event `pointermove` event.
    */
-  const onMouseDown = (event, valueIndex = 0) => {
-    const { clientX, screenX } = event;
+  const onPointerMove = (event) => {
+    const { screenX, pointerId } = event;
 
-    dragging = true;
-    startX = clientX - base.getBoundingClientRect().x;
-    startScreenX = screenX;
-    targetValueIndex = valueIndex;
+    if (disabled || readonly || !dragging || pointerId !== targetPointerId) {
+      return;
+    }
+
+    moveThumb(startX + (screenX - startScreenX));
   };
 
   /**
-   * Handle the `mousemove` event fired anywhere on the page.
-   * @param {MouseEvent} event `mousemove` event.
+   * Handle the `pointerup` and `pointercancel` events fired anywhere on the page.
+   * @param {PointerEvent} event `pointerup` or `pointercancel` event.
    */
-  const onMouseMove = (event) => {
-    if (dragging) {
-      moveThumb(startX + (event.screenX - startScreenX));
+  const onPointerUp = (event) => {
+    const { pointerId } = event;
+
+    if (disabled || readonly || !dragging || pointerId !== targetPointerId) {
+      return;
     }
+
+    // Reset everything
+    dragging = false;
+    startX = 0;
+    startScreenX = 0;
+    targetPointerId = 0;
+    targetValueIndex = 0;
+
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+    document.removeEventListener('pointercancel', onPointerUp);
   };
 
   /**
-   * Handle the `mouseup` event fired anywhere on the page.
+   * 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.
    */
-  const onMouseUp = () => {
-    if (dragging) {
-      dragging = false;
+  const onPointerDown = (event, valueIndex = 0) => {
+    const { clientX, screenX, pointerId } = event;
+
+    if (disabled || readonly) {
+      return;
     }
+
+    dragging = true;
+    startX = clientX - base.getBoundingClientRect().x;
+    startScreenX = screenX;
+    targetPointerId = pointerId;
+    targetValueIndex = valueIndex;
+
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
   };
 
   /**
@@ -168,13 +225,11 @@
    * @param {MouseEvent} event `click` event.
    */
   const onClick = (event) => {
-    if (!multiThumb && !dragging) {
-      moveThumb(/** @type {any} */ (event).layerX);
+    if (disabled || readonly || multiThumb || dragging) {
+      return;
     }
 
-    if (dragging) {
-      dragging = false;
-    }
+    moveThumb(/** @type {any} */ (event).layerX);
   };
 
   /**
@@ -191,7 +246,10 @@
     }
   };
 
-  onMount(() => {
+  /**
+   * Initialize the variables.
+   */
+  const init = () => {
     barWidth = base.clientWidth;
 
     const stepCount = (max - min) / step + 1;
@@ -201,15 +259,27 @@
     positionList = new Array(stepCount).fill(0).map((_, index) => index * stepWidth);
 
     onValueChange();
+  };
+
+  onMount(() => {
+    const query = window.matchMedia('(pointer: coarse)');
+
+    query.addEventListener('change', init);
+    init();
+
+    return () => {
+      query.removeEventListener('change', init);
+    };
   });
 
-  // @ts-ignore Arguments are triggers
-  $: onValueChange(value, values);
+  $: {
+    void value;
+    void values;
+    onValueChange();
+  }
 </script>
 
 <svelte:body
-  on:mousemove={onMouseMove}
-  on:mouseup={onMouseUp}
   on:click={() => {
     dragging = false;
   }}
@@ -217,7 +287,9 @@
 
 <div
   class="sui slider {className}"
+  class:disabled
   role="none"
+  hidden={hidden || undefined}
   {...$$restProps}
   on:click|preventDefault|stopPropagation
 >
@@ -225,45 +297,44 @@
     class="base"
     role="none"
     bind:this={base}
-    on:click|preventDefault|stopPropagation={(event) => {
-      onClick(event);
-    }}
+    on:click|preventDefault|stopPropagation={(event) => onClick(event)}
   >
+    <div class="base-bar" />
     <div
-      class="bar"
+      class="slider-bar"
       style:left="{multiThumb ? sliderPositions[0] : 0}px"
       style:width="{multiThumb ? sliderPositions[1] - sliderPositions[0] : sliderPositions[0]}px"
     />
     <div
-      tabindex="0"
       role="slider"
+      tabindex={disabled ? -1 : 0}
       aria-label={multiThumb ? sliderLabels?.[0] || '' : sliderLabel}
+      aria-hidden={hidden}
+      aria-disabled={disabled}
+      aria-readonly={readonly}
+      aria-invalid={invalid}
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={multiThumb ? values[0] : value}
       style:left="{sliderPositions[0]}px"
-      on:mousedown={(event) => {
-        onMouseDown(event, 0);
-      }}
-      on:keydown={(event) => {
-        onKeyDown(event, 0);
-      }}
+      on:pointerdown={(event) => onPointerDown(event, 0)}
+      on:keydown={(event) => onKeyDown(event, 0)}
     />
     {#if multiThumb}
       <div
-        tabindex="0"
         role="slider"
+        tabindex={disabled ? -1 : 0}
         aria-label={sliderLabels?.[1] || ''}
+        aria-hidden={hidden}
+        aria-disabled={disabled}
+        aria-readonly={readonly}
+        aria-invalid={invalid}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={values[1]}
         style:left="{sliderPositions[1]}px"
-        on:mousedown={(event) => {
-          onMouseDown(event, 1);
-        }}
-        on:keydown={(event) => {
-          onKeyDown(event, 1);
-        }}
+        on:pointerdown={(event) => onPointerDown(event, 1)}
+        on:keydown={(event) => onKeyDown(event, 1)}
       />
     {/if}
     {#if optionLabels.length}
@@ -283,40 +354,57 @@
 <style>.slider {
   position: relative;
   display: inline-block;
-  padding: 16px;
+  padding: var(--sui-checkbox-height) calc(var(--sui-checkbox-height) / 2);
+  touch-action: none;
+}
+.slider:hover .base-bar {
+  background-color: var(--sui-hover-background-color);
+}
+.slider:active .base-bar {
+  background-color: var(--sui-active-background-color);
 }
 
 .base {
   position: relative;
-  width: var(--sui-slider-base-width, 200px);
-  height: 8px;
-  border-radius: 8px;
-  background-color: var(--sui-control-border-color);
+  width: var(--sui-slider-base-width, calc(var(--sui-checkbox-height) * 10));
+  height: calc(var(--sui-checkbox-height) / 2);
+  cursor: pointer;
+}
+
+.base-bar {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--sui-control-border-color);
+  border-radius: var(--sui-checkbox-height);
+  background-color: var(--sui-button-background-color);
+  transition: all 200ms;
+  width: 100%;
+  height: 100%;
 }
 
-.bar {
+.slider-bar {
   position: absolute;
   top: 0;
-  height: 8px;
-  border-radius: 8px;
-  background-color: var(--sui-primary-accent-color-lighter);
+  height: calc(var(--sui-checkbox-height) / 2);
+  border-radius: var(--sui-checkbox-height);
+  background-color: var(--sui-primary-accent-color-light);
 }
 
 [role=slider] {
   position: absolute;
   top: 0;
-  border: 2px solid var(--sui-primary-accent-color-lighter);
-  border-radius: 8px;
-  width: 16px;
-  height: 16px;
-  background-color: var(--sui-primary-accent-color-foreground);
+  border: 3px solid var(--sui-primary-accent-color-light);
+  border-radius: var(--sui-checkbox-height);
+  width: calc(var(--sui-checkbox-height) - 2px);
+  height: calc(var(--sui-checkbox-height) - 2px);
+  background-color: var(--sui-primary-accent-color-inverted);
   cursor: pointer;
-  transform: translate(-8px, -4px);
+  transform: translate(calc((var(--sui-checkbox-height) / 2 - 1px) * -1), calc((var(--sui-checkbox-height) / 4 - 1px) * -1));
 }
 
 .label {
   position: absolute;
-  top: 12px;
+  top: calc(var(--sui-checkbox-height) / 2 + 8px);
   transform: translateX(-50%);
   font-size: var(--sui-font-size-x-small);
 }</style>

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

@@ -12,12 +12,16 @@
 export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    invalid?: boolean;
+    disabled?: boolean;
     max?: number;
     min?: number;
     step?: number;
     value?: number;
-    sliderLabel?: string;
+    hidden?: boolean;
+    readonly?: boolean;
     values?: [number, number];
+    sliderLabel?: string;
     sliderLabels?: [string, string];
     optionLabels?: string[] | number[];
 }, {
@@ -35,12 +39,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        max?: number;
-        min?: number;
+        invalid?: boolean;
+        disabled?: boolean;
+        max?: number | undefined;
+        min?: number | undefined;
         step?: number;
         value?: number;
-        sliderLabel?: string;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
         values?: [number, number];
+        sliderLabel?: string;
         sliderLabels?: [string, string];
         optionLabels?: (string[] | number[]);
     };

package/package/components/switch/switch.svelte

@@ -6,26 +6,60 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  export let label = '';
-
-  export let checked = false;
-
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
   export let disabled = false;
+  /**
+   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * @type {boolean}
+   */
+  export let required = false;
+  /**
+   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * Whether to check the widget. An alias of the `aria-checked` attribute.
+   * @type {boolean | 'mixed'}
+   */
+  export let checked = false;
+  /**
+   * Text label displayed next to the switch.
+   * @type {string | undefined}
+   */
+  export let label = undefined;
 </script>
 
 <button
   class="sui switch {className}"
-  {disabled}
+  type="button"
   role="switch"
-  aria-disabled={disabled}
+  hidden={hidden || undefined}
+  disabled={disabled || undefined}
   aria-checked={checked}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
+  aria-readonly={readonly}
+  aria-required={required}
+  aria-invalid={invalid}
   {...$$restProps}
   on:click={() => {
     checked = !checked;
@@ -58,11 +92,17 @@
   -webkit-user-select: none;
   user-select: none;
 }
-button:disabled {
-  cursor: default;
+button:hover[aria-checked=false] span {
+  background-color: var(--sui-hover-background-color);
+}
+button:hover[aria-checked=true] span {
+  background-color: var(--sui-primary-accent-color-light);
+}
+button:active[aria-checked=false] span {
+  background-color: var(--sui-active-background-color);
 }
-button:disabled span {
-  opacity: 0.4;
+button:active[aria-checked=true] span {
+  background-color: var(--sui-primary-accent-color-dark);
 }
 button:focus-visible {
   outline: 0;
@@ -71,36 +111,38 @@ button:focus-visible span::before {
   outline-offset: 1px;
   outline-width: 2px;
   outline-style: solid;
-  outline-color: var(--sui-primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-light);
 }
 button[aria-checked=true] span {
   background-color: var(--sui-primary-accent-color);
   border-color: transparent;
 }
 button[aria-checked=true] span::before {
-  transform: translateX(22px);
-  background-color: var(--sui-primary-accent-color-foreground);
+  transform: translateX(calc(var(--sui-checkbox-height) * 2 - var(--sui-checkbox-height)));
+  border-color: var(--sui-primary-accent-color);
+  background-color: var(--sui-primary-accent-color-inverted);
 }
 
 span {
   position: relative;
-  width: 42px;
-  height: 20px;
-  padding: 2px;
-  display: inline-block;
-  border-radius: 16px;
-  background-color: var(--sui-control-border-color);
+  width: calc(var(--sui-checkbox-height) * 2);
+  height: var(--sui-checkbox-height);
+  padding: 0 2px;
+  display: inline-flex;
+  align-items: center;
+  border-width: 1.5px;
+  border-style: solid;
+  border-color: var(--sui-control-border-color);
+  border-radius: var(--sui-checkbox-height);
+  background-color: var(--sui-control-background-color);
   transition: all 200ms;
 }
-span:hover {
-  background-color: var(--sui-highlight-background-color);
-}
 span::before {
   display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 16px;
-  background-color: var(--sui-primary-accent-color-foreground);
+  width: calc(var(--sui-checkbox-height) - 6px);
+  height: calc(var(--sui-checkbox-height) - 6px);
+  border-radius: var(--sui-checkbox-height);
+  background-color: var(--sui-control-border-color);
   transition: all 200ms;
   content: "";
 }</style>

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

@@ -10,8 +10,12 @@ export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    checked?: boolean;
+    invalid?: boolean;
+    checked?: boolean | "mixed";
     disabled?: boolean;
+    required?: boolean;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -26,9 +30,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
-        checked?: boolean;
+        label?: string | undefined;
+        invalid?: boolean;
+        checked?: boolean | 'mixed';
         disabled?: boolean;
+        required?: boolean;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -20,4 +20,5 @@
 
 <style>.table-row-header {
   display: table-cell;
+  height: var(--sui-secondary-row-height);
 }</style>

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

@@ -6,18 +6,31 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
+  /**
+   * Whether to select the widget. An alias of the `aria-selected` attribute.
+   * @type {boolean}
+   */
+  export let selected = false;
 </script>
 
-<div role="row" tabindex="0" class="sui table-row {className}" {...$$restProps} on:click>
+<div
+  class="sui table-row {className}"
+  role="row"
+  tabindex="0"
+  aria-selected={selected}
+  {...$$restProps}
+  on:click
+  on:select
+>
   <slot />
 </div>
 
 <style>.table-row {
   display: table-row;
+  height: var(--sui-primary-row-height);
 }</style>

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

@@ -9,8 +9,10 @@
 export default class TableRow extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    selected?: boolean;
 }, {
     click: MouseEvent;
+    select: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -25,9 +27,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        selected?: boolean;
     };
     events: {
         click: MouseEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/table/table.svelte

@@ -5,7 +5,7 @@
   @see https://w3c.github.io/aria/#grid
 -->
 <script>
-  import { activateGroup } from '../util/group';
+  import { activateGroup } from '../../services/group';
 
   /**
    * CSS class name on the button.
@@ -25,6 +25,7 @@
   {...$$restProps}
   bind:this={element}
   use:activateGroup
+  on:change
 >
   <slot />
 </div>

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

@@ -11,6 +11,8 @@ export default class Table extends SvelteComponent<{
     class?: string;
     element?: HTMLElement;
 }, {
+    change: Event;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -27,6 +29,8 @@ declare const __propDef: {
         element?: HTMLElement | null;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {