@sveltia/ui 0.2.3 → 0.2.5

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 /**
  * @see https://w3c.github.io/aria/#button
- * @see https://w3c.github.io/aria-practices/#button
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
 export default class Button extends SvelteComponentTyped<{
     [x: string]: any;
@@ -15,8 +15,8 @@ export default class Button extends SvelteComponentTyped<{
     size?: "small" | "medium" | "large";
     hidden?: boolean;
     disabled?: boolean;
-    pressed?: string | boolean;
-    popupPosition?: any;
+    pressed?: boolean | "true" | "false" | "mixed";
+    popupPosition?: PopupPosition;
 }, {
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
@@ -58,14 +58,14 @@ export default class Button extends SvelteComponentTyped<{
     set disabled(arg: boolean);
     get disabled(): boolean;
     /**accessor*/
-    set pressed(arg: string | boolean);
-    get pressed(): string | boolean;
+    set pressed(arg: boolean | "true" | "false" | "mixed");
+    get pressed(): boolean | "true" | "false" | "mixed";
     /**accessor*/
     set label(arg: string);
     get label(): string;
     /**accessor*/
-    set popupPosition(arg: any);
-    get popupPosition(): any;
+    set popupPosition(arg: PopupPosition);
+    get popupPosition(): PopupPosition;
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
@@ -76,14 +76,14 @@ declare const __propDef: {
         [x: string]: any;
         label?: string;
         class?: string;
-        element?: (HTMLButtonElement | undefined);
+        element?: HTMLButtonElement | null;
         type?: ('button' | 'submit' | 'reset');
         role?: string;
         size?: ('small' | 'medium' | 'large');
         hidden?: boolean;
         disabled?: boolean;
-        pressed?: (boolean | string | undefined);
-        popupPosition?: any;
+        pressed?: (boolean | 'false' | 'mixed' | 'true' | undefined);
+        popupPosition?: PopupPosition;
     };
     events: {
         mouseenter: MouseEvent;

package/package/components/core/checkbox.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#checkbox
-  @see https://w3c.github.io/aria-practices/#checkbox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
@@ -11,31 +11,34 @@
 
   /**
    * 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|String|undefined)} */
+  /** @type {(boolean | string | undefined)} */
   export let checked = false;
 
-  /** @type {Boolean} */
+  /** @type {boolean} */
   export let indeterminate = false;
 
-  /** @type {Boolean} */
+  /** @type {boolean} */
   export let disabled = false;
 
   const dispatch = createEventDispatcher();
   const id = getRandomId('checkbox');
   /** @type {Button} */
-  let button;
+  let buttonComponent;
 </script>
 
 {#if name && value && checked && !indeterminate}
@@ -43,24 +46,26 @@
 {/if}
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<label
+<span
   class="sui checkbox {className}"
   class:checked
   class:indeterminate
   class:disabled
   on:click|preventDefault|stopPropagation={(event) => {
-    if (!event.target.matches('button')) {
-      button.element.click();
+    if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
+      buttonComponent.element.click();
     }
   }}
 >
   <Button
     {id}
     {disabled}
+    {name}
+    {value}
     role="checkbox"
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-labelledby="{id}-label"
-    bind:this={button}
+    bind:this={buttonComponent}
     on:click={(event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -71,12 +76,16 @@
   >
     <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
   </Button>
-  {#if $$slots.default}
+  {#if $$slots.default || label}
     <label id="{id}-label">
-      <slot />
+      {#if $$slots.default}
+        <slot />
+      {:else}
+        {label}
+      {/if}
     </label>
   {/if}
-</label>
+</span>
 
 <style>.checkbox {
   display: inline-flex;
@@ -90,25 +99,35 @@
 .checkbox.disabled {
   cursor: default;
 }
+.checkbox.disabled label {
+  color: var(--disabled-foreground-color);
+}
 .checkbox :global(button) {
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--control-border-color);
+  border-color: var(--primary-control-border-color);
   border-radius: 4px;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   color: var(--primary-accent-color-lighter);
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: 20px;
+}
+.checkbox :global(button[aria-checked="true"]) {
+  border-color: var(--primary-accent-color-lighter);
+  color: var(--control-background-color);
+  background-color: var(--primary-accent-color-lighter);
 }
-.checkbox :global(button[aria-checked="true"]),
 .checkbox :global(button[aria-checked="mixed"]) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--primary-control-border-color);
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;
+}
+.checkbox label {
+  cursor: inherit;
 }</style>

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

@@ -3,9 +3,10 @@
 /** @typedef {typeof __propDef.slots}  CheckboxSlots */
 /**
  * @see https://w3c.github.io/aria/#checkbox
- * @see https://w3c.github.io/aria-practices/#checkbox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
 export default class Checkbox extends SvelteComponentTyped<{
+    label?: string;
     class?: string;
     disabled?: boolean;
     name?: string;
@@ -26,10 +27,11 @@ export type CheckboxSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        label?: string | null;
         class?: string;
         disabled?: boolean;
         name?: string;
-        value?: (string | undefined);
+        value?: string | null;
         checked?: (boolean | string | undefined);
         indeterminate?: boolean;
     };

package/package/components/core/dialog.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#dialog
-  @see https://w3c.github.io/aria-practices/#dialog_modal
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
@@ -12,7 +12,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -24,7 +24,7 @@
 
   /**
    * Width of the dialog.
-   * @type {('small'|'medium'|'large')}
+   * @type {('small' | 'medium' | 'large' | 'x-large')}
    */
   export let size = 'medium';
 
@@ -54,6 +54,9 @@
   let showDialog = false;
   let showContent = false;
 
+  /**
+   *
+   */
   const openDialog = async () => {
     (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
     showContent = true;
@@ -69,6 +72,9 @@
     });
   };
 
+  /**
+   *
+   */
   const closeDialog = async () => {
     showDialog = false;
 
@@ -91,6 +97,9 @@
     dialog?.remove();
   };
 
+  /**
+   *
+   */
   const toggleDialog = () => {
     if (dialog) {
       if (open) {
@@ -102,6 +111,7 @@
   };
 
   // Call the function only when the `open` prop is changed
+  // @ts-ignore
   $: toggleDialog(open);
 
   onMount(() => {
@@ -121,7 +131,7 @@
   class="sui dialog {className} {size}"
   class:open={showDialog}
   on:click={({ target }) => {
-    if (closeOnBackdropClick && target?.matches('dialog')) {
+    if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
       dialog.returnValue = 'cancel';
       open = false;
     }

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

@@ -3,13 +3,13 @@
 /** @typedef {typeof __propDef.slots}  DialogSlots */
 /**
  * @see https://w3c.github.io/aria/#dialog
- * @see https://w3c.github.io/aria-practices/#dialog_modal
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
 export default class Dialog extends SvelteComponentTyped<{
     title?: string;
     open?: boolean;
     class?: string;
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | "x-large";
     modal?: boolean;
     showCancel?: boolean;
     showOk?: boolean;
@@ -43,7 +43,7 @@ declare const __propDef: {
         title?: string;
         open?: boolean;
         class?: string;
-        size?: ('small' | 'medium' | 'large');
+        size?: ('small' | 'medium' | 'large' | 'x-large');
         modal?: boolean;
         showCancel?: boolean;
         showOk?: boolean;

package/package/components/core/drawer.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#dialog
-  @see https://w3c.github.io/aria-practices/#dialog_modal
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
@@ -12,7 +12,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -61,6 +61,9 @@
 
   $: orientation = position === 'right' || position === 'left' ? 'vertical' : 'horizontal';
 
+  /**
+   *
+   */
   const openDialog = async () => {
     (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
     showContent = true;
@@ -71,6 +74,9 @@
     });
   };
 
+  /**
+   *
+   */
   const closeDialog = async () => {
     showDialog = false;
 
@@ -93,6 +99,9 @@
     dialog?.remove();
   };
 
+  /**
+   *
+   */
   const toggleDialog = () => {
     if (dialog) {
       if (open) {
@@ -104,6 +113,7 @@
   };
 
   // Call the function only when the `open` prop is changed
+  // @ts-ignore
   $: toggleDialog(open);
 
   onMount(() => {
@@ -123,7 +133,7 @@
   class="sui dialog {className} {size} {position} {orientation}"
   class:open={showDialog}
   on:click={({ target }) => {
-    if (closeOnBackdropClick && target?.matches('dialog')) {
+    if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
       dialog.returnValue = 'cancel';
       open = false;
     }

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  DrawerSlots */
 /**
  * @see https://w3c.github.io/aria/#dialog
- * @see https://w3c.github.io/aria-practices/#dialog_modal
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
 export default class Drawer extends SvelteComponentTyped<{
     title?: string;

package/package/components/core/grid-cell.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/group.svelte

@@ -3,7 +3,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/icon.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

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

@@ -1,6 +1,6 @@
 <!--
   @component
-  @see https://w3c.github.io/aria-practices/#menubutton
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 -->
 <script>
   import Popup from '../util/popup.svelte';
@@ -8,7 +8,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -42,7 +42,7 @@
       ];
 
       if (members.length) {
-        (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
+        /** @type {HTMLElement} */ (key === 'ArrowUp' ? members.pop() : members.shift()).focus();
       }
     }
   }}

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

@@ -1,11 +1,11 @@
 /** @typedef {typeof __propDef.props}  MenuButtonProps */
 /** @typedef {typeof __propDef.events}  MenuButtonEvents */
 /** @typedef {typeof __propDef.slots}  MenuButtonSlots */
-/** @see https://w3c.github.io/aria-practices/#menubutton */
+/** @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */
 export default class MenuButton extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;
-    popupPosition?: any;
+    popupPosition?: PopupPosition;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,7 +27,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        popupPosition?: any;
+        popupPosition?: PopupPosition;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/core/menu-item-checkbox.svelte

@@ -7,7 +7,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/core/menu-item-radio.svelte

@@ -7,7 +7,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

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

@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   export let disabled = false;
@@ -24,22 +24,32 @@
   export let max = undefined;
   export let step = 1;
 
+  $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;
+  $: isMin = typeof min === 'number' && Number(value || 0) <= min;
+  $: isMax = typeof max === 'number' && Number(value || 0) >= max;
+
   let component;
 
+  /**
+   *
+   */
   const decrease = () => {
-    if (typeof min === 'number' && Number(value || 0) === min) {
+    if (isMin) {
       return;
     }
 
-    value = String(Number(value || 0) - step);
+    value = Number(Number(value || 0) - step).toFixed(maximumFractionDigits);
   };
 
+  /**
+   *
+   */
   const increase = () => {
-    if (typeof min === 'number' && Number(value || 0) === max) {
+    if (isMax) {
       return;
     }
 
-    value = String(Number(value || 0) + step);
+    value = Number(Number(value || 0) + step).toFixed(maximumFractionDigits);
   };
 </script>
 
@@ -70,7 +80,7 @@
   />
   <Button
     class="iconic"
-    disabled={disabled || Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value)) || isMin}
     on:click={() => {
       decrease();
     }}
@@ -79,7 +89,7 @@
   </Button>
   <Button
     class="iconic"
-    disabled={disabled || Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value)) || isMax}
     on:click={() => {
       increase();
     }}
@@ -100,7 +110,7 @@
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   width: 32px;
   height: var(--input--medium--height);
 }

package/package/components/core/number-input.svelte.d.ts

@@ -26,7 +26,7 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         disabled?: boolean;
-        value?: (string | undefined);
+        value?: string | null;
         min?: any;
         max?: any;
         step?: number;

package/package/components/core/option.svelte

@@ -8,7 +8,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

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

@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   /**
@@ -69,7 +69,7 @@
   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;
 }

package/package/components/core/password-input.svelte.d.ts

@@ -22,7 +22,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         input: Event;