@sveltia/ui 0.2.2 → 0.2.4

package/package/components/composite/calendar.svelte

@@ -5,7 +5,7 @@
   import Separator from '../core/separator.svelte';
   import Spacer from '../core/spacer.svelte';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   const dayList = [];
@@ -16,6 +16,9 @@
   $: firstDayOfMonth = new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
   $: firstDay = new Date(firstDayOfMonth);
 
+  /**
+   *
+   */
   const getWeeks = () => {
     const cursor = new Date(firstDay);
 

package/package/components/composite/calendar.svelte.d.ts

@@ -15,7 +15,7 @@ export type CalendarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         click: MouseEvent;

package/package/components/composite/checkbox-group.svelte

@@ -5,16 +5,15 @@
 <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 };
 
   /**
    * The `aria-label` attribute on the button element.
-   * @type {String}
+   * @type {string}
    */
   export let ariaLabel = '';
 

package/package/components/composite/combobox.svelte

@@ -16,7 +16,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -39,16 +39,16 @@
 
   /**
    * Selected option’s value.
-   * @type {(String|undefined)}
+   * @type {(string | number | undefined)}
    */
   export let value = undefined;
 
   const dispatch = createEventDispatcher();
   const id = getRandomId('combobox');
   let comboboxElement;
-  /** @type {(TextInput| undefined)} */
+  /** @type {TextInput?} */
   let inputComponent;
-  /** @type {(Popup| undefined)} */
+  /** @type {Popup?} */
   let popupComponent;
   let isPopupOpen = writable(false);
 </script>
@@ -117,8 +117,11 @@
   bind:this={popupComponent}
 >
   <Listbox
-    on:click={({ target }) => {
-      if (target.matches('[role="option"]')) {
+    on:click={(event) => {
+      if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
+        // eslint-disable-next-line prefer-destructuring
+        const target = /** @type {HTMLButtonElement?} */ (event.target);
+
         // @todo support more types
         value = target.dataset.type === 'number' ? Number(target.value) : target.value;
         label = target.querySelector('.label')?.textContent || target.value;

package/package/components/composite/combobox.svelte.d.ts

@@ -8,10 +8,10 @@
 export default class Combobox extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
-    position?: any;
+    position?: PopupPosition;
     class?: string;
     disabled?: boolean;
-    value?: string;
+    value?: string | number;
     readOnly?: boolean;
 }, {
     change: CustomEvent<any>;
@@ -29,10 +29,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
-        position?: any;
+        position?: PopupPosition;
         class?: string;
         disabled?: boolean;
-        value?: (string | undefined);
+        value?: (string | number | undefined);
         readOnly?: boolean;
     };
     events: {

package/package/components/composite/disclosure.svelte

@@ -10,7 +10,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -36,7 +36,7 @@
     <Icon name="expand_more" />
     {label}
   </Button>
-  <div class="content" id="{id}-content" hidden={!expanded ? 'hidden' : undefined}>
+  <div class="content" id="{id}-content" hidden={!expanded ? true : undefined}>
     <slot />
   </div>
 </div>

package/package/components/composite/grid.svelte

@@ -3,13 +3,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 </script>
 

package/package/components/composite/grid.svelte.d.ts

@@ -19,7 +19,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/composite/listbox.svelte

@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 
   export let multiple = false;

package/package/components/composite/listbox.svelte.d.ts

@@ -36,7 +36,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
         multiple?: boolean;
     };
     events: {

package/package/components/composite/menu-item-group.svelte

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

package/package/components/composite/menu.svelte

@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 </script>
 

package/package/components/composite/menu.svelte.d.ts

@@ -29,7 +29,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/composite/radio-button-group.svelte

@@ -9,7 +9,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -18,7 +18,7 @@
   /** @type {('horizontal'|'vertical')} */
   export let orientation = 'horizontal';
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 </script>
 

package/package/components/composite/radio-button-group.svelte.d.ts

@@ -23,7 +23,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
         orientation?: ('horizontal' | 'vertical');
     };
     events: {

package/package/components/composite/select-button-group.svelte

@@ -10,7 +10,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -22,7 +22,7 @@
 
   const dispatch = createEventDispatcher();
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 
   $: {

package/package/components/composite/select-button-group.svelte.d.ts

@@ -27,7 +27,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
         disabled?: boolean;
         value?: string;
         ariaLabel?: string;

package/package/components/composite/select.svelte

@@ -7,7 +7,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -17,7 +17,7 @@
 
   /**
    * Selected option’s value.
-   * @type {(String|undefined)}
+   * @type {string?}
    */
   export let value = undefined;
 </script>

package/package/components/composite/select.svelte.d.ts

@@ -24,7 +24,7 @@ declare const __propDef: {
         [x: string]: any;
         label?: string;
         class?: string;
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/composite/tab-list.svelte

@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 
   /** @type {('horizontal'|'vertical')} */

package/package/components/composite/tab-list.svelte.d.ts

@@ -39,7 +39,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
         name?: string;
         orientation?: ('horizontal' | 'vertical');
     };

package/package/components/core/button.svelte

@@ -10,16 +10,15 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };
 
   /**
    * Reference to the button element.
-   * @type {(HTMLButtonElement|undefined)}
+   * @type {HTMLButtonElement?}
    */
   export let element = undefined;
 
@@ -31,7 +30,7 @@
 
   /**
    * The `role` attribute on the button element.
-   * @type {String}
+   * @type {string}
    */
   export let role = 'button';
 
@@ -43,25 +42,25 @@
 
   /**
    * Whether the button is hidden.
-   * @type {Boolean}
+   * @type {boolean}
    */
   export let hidden = false;
 
   /**
    * Whether the button is disabled.
-   * @type {Boolean}
+   * @type {boolean}
    */
   export let disabled = false;
 
   /**
    * The `aria-pressed` attribute on the button element.
-   * @type {(Boolean|String|undefined)}
+   * @type {(boolean | 'false' | 'mixed' | 'true' | undefined)}
    */
   export let pressed = undefined;
 
   /**
    * Text label displayed on the button.
-   * @type {String}
+   * @type {string}
    */
   export let label = '';
 
@@ -78,8 +77,8 @@
 <button
   {type}
   {role}
-  hidden={hidden ? 'hidden' : undefined}
-  disabled={disabled ? 'disabled' : undefined}
+  hidden={hidden ? true : undefined}
+  disabled={disabled ? true : undefined}
   class="sui button {size} {className}"
   aria-hidden={hidden ? true : undefined}
   aria-disabled={disabled ? true : undefined}

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

@@ -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

@@ -11,25 +11,25 @@
 
   /**
    * 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 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();
@@ -49,7 +49,7 @@
   class:indeterminate
   class:disabled
   on:click|preventDefault|stopPropagation={(event) => {
-    if (!event.target.matches('button')) {
+    if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       button.element.click();
     }
   }}

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

@@ -29,7 +29,7 @@ declare const __propDef: {
         class?: string;
         disabled?: boolean;
         name?: string;
-        value?: (string | undefined);
+        value?: string | null;
         checked?: (boolean | string | undefined);
         indeterminate?: boolean;
     };

package/package/components/core/dialog.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

@@ -9,7 +9,7 @@ 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

@@ -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/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 = '';