@sveltia/ui 0.2.3 → 0.2.5

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

@@ -1,7 +1,7 @@
 <!--
   @component
   @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';
@@ -10,21 +10,27 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {String} */
+  /** @type {string} */
   export let name = '';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
+  export let label = undefined;
+
+  /** @type {string?} */
   export let value = undefined;
 
-  /** @type {Boolean} */
+  /** @type {boolean} */
   export let selected = false;
 
+  /** @type {boolean} */
+  export let disabled = false;
+
   const id = getRandomId('checkbox');
   /** @type {Button} */
   let buttonComponent;
@@ -36,32 +42,41 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <span
-  class="sui radio-button {className}"
+  class="sui radio {className}"
   on:click={(event) => {
-    if (!event.target.matches('button')) {
+    if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonComponent.element.click();
     }
   }}
 >
   <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 +85,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(--primary-control-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/core/radio.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  RadioProps */
+/** @typedef {typeof __propDef.events}  RadioEvents */
+/** @typedef {typeof __propDef.slots}  RadioSlots */
+/**
+ * @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;
+    class?: string;
+    disabled?: boolean;
+    name?: string;
+    value?: 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;
+        class?: string;
+        disabled?: boolean;
+        name?: string;
+        value?: string | null;
+        selected?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/row-group.svelte

@@ -1,9 +1,8 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = 'tbody';
 
   export { className as class };

package/package/components/core/row.svelte

@@ -1,9 +1,8 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };

package/package/components/core/search-bar.svelte

@@ -12,13 +12,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {_SvelteComponent} */
+  /** @type {import('svelte').SvelteComponent} */
   let input;
 
   export let value = '';

package/package/components/core/select-button.svelte

@@ -1,15 +1,15 @@
 <!--
   @component
-  A variant of `<RadioButton>`, looking like a normal button.
+  A variant of `<Radio>`, looking like a normal button.
   @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 Button from './button.svelte';
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/select-button.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  SelectButtonEvents */
 /** @typedef {typeof __propDef.slots}  SelectButtonSlots */
 /**
- * A variant of `<RadioButton>`, looking like a normal button.
+ * A variant of `<Radio>`, looking like a normal button.
  * @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/
  */
 export default class SelectButton extends SvelteComponentTyped<{
     [x: string]: any;

package/package/components/core/separator.svelte

@@ -3,11 +3,12 @@
   @see https://w3c.github.io/aria/#separator
 -->
 <script>
+  /** @type {('horizontal' | 'vertical')} */
   export let orientation = 'horizontal';
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/separator.svelte.d.ts

@@ -4,7 +4,7 @@
 /** @see https://w3c.github.io/aria/#separator */
 export default class Separator extends SvelteComponentTyped<{
     class?: string;
-    orientation?: string;
+    orientation?: "horizontal" | "vertical";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,7 +16,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;
-        orientation?: string;
+        orientation?: ('horizontal' | 'vertical');
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/core/slider.svelte

@@ -10,7 +10,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -28,7 +28,7 @@
   $: multiThumb = !!values;
 
   const dispatch = createEventDispatcher();
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   let base = undefined;
   let barWidth = 0;
   let positionList = [];
@@ -39,6 +39,10 @@
   let dragging = false;
   let targetValueIndex = 0;
 
+  /**
+   *
+   * @param {number} diff
+   */
   const dragSlider = (diff) => {
     if (diff >= 0 && diff <= barWidth) {
       const fromIndex = positionList.findLastIndex((s) => s <= diff);
@@ -58,18 +62,19 @@
         return;
       }
 
-      sliderPositions[targetValueIndex] = positionList[index];
-
       if (multiThumb) {
         values[targetValueIndex] = valueList[index];
-        dispatch('change', { values });
       } else {
         value = valueList[index];
-        dispatch('change', { value });
       }
     }
   };
 
+  /**
+   *
+   * @param {KeyboardEvent} event `keydown` event.
+   * @param {number} [valueIndex]
+   */
   const onKeyDown = (event, valueIndex = 0) => {
     const { key, shiftKey, altKey, ctrlKey, metaKey } = event;
 
@@ -106,18 +111,19 @@
         return;
       }
 
-      sliderPositions[valueIndex] = positionList[index];
-
       if (multiThumb) {
         values[valueIndex] = valueList[index];
-        dispatch('change', { values });
       } else {
         value = valueList[index];
-        dispatch('change', { value });
       }
     }
   };
 
+  /**
+   *
+   * @param {MouseEvent} event `mousedown` event.
+   * @param {number} [valueIndex]
+   */
   const onMouseDown = (event, valueIndex = 0) => {
     const { clientX, screenX } = event;
 
@@ -127,15 +133,32 @@
     targetValueIndex = valueIndex;
   };
 
+  /**
+   *
+   * @param {MouseEvent} event `mousemove` event.
+   */
   const onMouseMove = (event) => {
     if (dragging) {
       dragSlider(startX + (event.screenX - startScreenX));
     }
   };
 
+  /**
+   *
+   */
+  const onMouseUp = () => {
+    if (dragging) {
+      dragging = false;
+    }
+  };
+
+  /**
+   *
+   * @param {MouseEvent} event `click` event.
+   */
   const onClick = (event) => {
     if (!multiThumb && !dragging) {
-      dragSlider(event.layerX);
+      dragSlider(/** @type {any} */ (event).layerX);
     }
 
     if (dragging) {
@@ -143,6 +166,20 @@
     }
   };
 
+  /**
+   *
+   */
+  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;
 
@@ -152,17 +189,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;
   }}
@@ -240,7 +276,7 @@
   width: var(--slider-base-width, 200px);
   height: 8px;
   border-radius: 8px;
-  background-color: var(--control-border-color);
+  background-color: var(--secondary-control-border-color);
 }
 
 .bar {

package/package/components/core/spacer.svelte

@@ -1,13 +1,13 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {Boolean} */
+  /** @type {boolean} */
   export let flex = false;
 </script>
 

package/package/components/core/switch.svelte

@@ -1,12 +1,12 @@
 <!--
   @component
   @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>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -69,7 +69,7 @@ span {
   padding: 2px;
   display: inline-block;
   border-radius: 16px;
-  background-color: var(--control-border-color);
+  background-color: var(--secondary-control-border-color);
   transition: all 200ms;
 }
 span:hover {

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  SwitchSlots */
 /**
  * @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/
  */
 export default class Switch extends SvelteComponentTyped<{
     label?: string;

package/package/components/core/tab-panel.svelte

@@ -1,14 +1,13 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#tabpanel
-  @see https://w3c.github.io/aria-practices/#tabpanel
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };

package/package/components/core/tab-panel.svelte.d.ts

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  TabPanelSlots */
 /**
  * @see https://w3c.github.io/aria/#tabpanel
- * @see https://w3c.github.io/aria-practices/#tabpanel
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export default class TabPanel extends SvelteComponentTyped<{
     [x: string]: any;

package/package/components/core/tab.svelte

@@ -1,14 +1,14 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#tab
-  @see https://w3c.github.io/aria-practices/#tabpanel
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <script>
   import Button from './button.svelte';
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/tab.svelte.d.ts

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  TabSlots */
 /**
  * @see https://w3c.github.io/aria/#tab
- * @see https://w3c.github.io/aria-practices/#tabpanel
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export default class Tab extends SvelteComponentTyped<{
     [x: string]: any;

package/package/components/core/text-area.svelte

@@ -9,26 +9,25 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLTextAreaElement|undefined)} */
+  /** @type {HTMLTextAreaElement?} */
   export let element = undefined;
 
   export let name = '';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   export let autoResize = false;
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   let height;
-  /** @type {(HTMLTextAreaElement|undefined)} */
+  /** @type {HTMLElement?} */
   let outer = undefined;
   let resizing = false;
   let lastWidth = 0;
@@ -51,6 +50,7 @@
    */
   $: {
     if (autoResize) {
+      // @ts-ignore
       resizeTextarea(value);
     }
   }
@@ -101,7 +101,7 @@ textarea {
   display: block;
   margin: 0;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   border-radius: var(--input--medium--border-radius);
   background-color: var(--control-background-color);
   padding: 8px;

package/package/components/core/text-area.svelte.d.ts

@@ -40,9 +40,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLTextAreaElement | undefined);
+        element?: HTMLTextAreaElement | null;
         name?: string;
-        value?: (string | undefined);
+        value?: string | null;
         autoResize?: boolean;
     };
     events: {

package/package/components/core/text-input.svelte

@@ -9,13 +9,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLInputElement|undefined)} */
+  /** @type {HTMLInputElement?} */
   export let element = undefined;
 
   /** @type {('textbox'|'searchbox'|'combobox'|'spinbutton')} */
@@ -30,7 +30,7 @@
 
   export let name = '';
 
-  /** @type {(String|undefined)} */
+  /** @type {(string | number | undefined)} */
   export let value = undefined;
 
   const id = getRandomId('input');
@@ -52,7 +52,7 @@
     {role}
     name={name || undefined}
     tabindex={disabled ? -1 : 0}
-    {readOnly}
+    readOnly={readOnly ? true : undefined}
     aria-readonly={readOnly ? true : undefined}
     {disabled}
     aria-disabled={disabled ? true : undefined}
@@ -84,7 +84,7 @@ input {
   display: inline-block;
   flex: auto;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   border-radius: var(--input--medium--border-radius);
   padding: 0 8px;
   min-width: 0;
@@ -101,7 +101,7 @@ input:focus {
 }
 input:read-only {
   color: var(--tertiary-foreground-color);
-  border-color: var(--control-border-color) !important;
+  border-color: var(--secondary-control-border-color) !important;
 }
 input:disabled {
   background-color: var(--disabled-background-color);
@@ -115,7 +115,7 @@ input ~ :global(button) {
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   height: var(--input--medium--height);
   aspect-ratio: 1/1;
 }