@sveltia/ui 0.2.5 → 0.3.1

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,53 +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;
 
-      if (multiThumb) {
-        values[targetValueIndex] = valueList[index];
-      } else {
-        value = valueList[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];
+    } 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();
@@ -94,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();
@@ -120,9 +131,9 @@
   };
 
   /**
-   *
+   * 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;
@@ -134,17 +145,17 @@
   };
 
   /**
-   *
+   * 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) {
@@ -153,12 +164,12 @@
   };
 
   /**
-   *
+   * 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) {
@@ -167,7 +178,7 @@
   };
 
   /**
-   *
+   * Update the thumb position and fire the `change` event when the value is changed.
    */
   const onValueChange = () => {
     if (multiThumb) {
@@ -220,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);
@@ -236,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);
@@ -276,7 +287,7 @@
   width: var(--slider-base-width, 200px);
   height: 8px;
   border-radius: 8px;
-  background-color: var(--secondary-control-border-color);
+  background-color: var(--control-border-color);
 }
 
 .bar {

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,5 +1,6 @@
 <!--
   @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://www.w3.org/WAI/ARIA/apg/patterns/switch/
 -->
@@ -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;
@@ -69,7 +86,7 @@ span {
   padding: 2px;
   display: inline-block;
   border-radius: 16px;
-  background-color: var(--secondary-control-border-color);
+  background-color: var(--control-border-color);
   transition: all 200ms;
 }
 span:hover {

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

@@ -2,13 +2,14 @@
 /** @typedef {typeof __propDef.events}  SwitchEvents */
 /** @typedef {typeof __propDef.slots}  SwitchSlots */
 /**
+ * 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://www.w3.org/WAI/ARIA/apg/patterns/switch/
  */
 export default class Switch extends SvelteComponentTyped<{
     label?: string;
-    class?: string;
     disabled?: boolean;
+    class?: string;
     checked?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -23,8 +24,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string;
-        class?: string;
         disabled?: boolean;
+        class?: string;
         checked?: boolean;
     };
     events: {

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

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<tbody>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui table-body {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-body {
+  display: table-row-group;
+}</style>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableBodyProps */
+/** @typedef {typeof __propDef.events}  TableBodyEvents */
+/** @typedef {typeof __propDef.slots}  TableBodySlots */
+/**
+ * The equivalent of the HTML `<tbody>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class TableBody extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableBodyProps = typeof __propDef.props;
+export type TableBodyEvents = typeof __propDef.events;
+export type TableBodySlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<td>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+  @see https://w3c.github.io/aria/#gridcell
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="gridcell" class="sui table-cell {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-cell {
+  display: table-cell;
+}</style>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableCellProps */
+/** @typedef {typeof __propDef.events}  TableCellEvents */
+/** @typedef {typeof __propDef.slots}  TableCellSlots */
+/**
+ * The equivalent of the HTML `<td>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+ * @see https://w3c.github.io/aria/#gridcell
+ */
+export default class TableCell extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableCellProps = typeof __propDef.props;
+export type TableCellEvents = typeof __propDef.events;
+export type TableCellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<th scope="col">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+  @see https://w3c.github.io/aria/#columnheader
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="columnheader" class="sui table-col-header {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-col-header {
+  display: table-cell;
+}</style>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableColHeaderProps */
+/** @typedef {typeof __propDef.events}  TableColHeaderEvents */
+/** @typedef {typeof __propDef.slots}  TableColHeaderSlots */
+/**
+ * The equivalent of the HTML `<th scope="col">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ * @see https://w3c.github.io/aria/#columnheader
+ */
+export default class TableColHeader extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableColHeaderProps = typeof __propDef.props;
+export type TableColHeaderEvents = typeof __propDef.events;
+export type TableColHeaderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<tfoot>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui table-foot {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-foot {
+  display: table-footer-group;
+}</style>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableFootProps */
+/** @typedef {typeof __propDef.events}  TableFootEvents */
+/** @typedef {typeof __propDef.slots}  TableFootSlots */
+/**
+ * The equivalent of the HTML `<tfoot>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class TableFoot extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableFootProps = typeof __propDef.props;
+export type TableFootEvents = typeof __propDef.events;
+export type TableFootSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<thead>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui table-head {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-head {
+  display: table-header-group;
+}</style>