@sveltia/ui 0.2.3 → 0.2.5

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

@@ -9,7 +9,7 @@ export default class TextInput extends SvelteComponentTyped<{
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     disabled?: boolean;
     name?: string;
-    value?: string;
+    value?: string | number;
     readOnly?: boolean;
 }, {
     input: Event;
@@ -39,8 +39,8 @@ export default class TextInput extends SvelteComponentTyped<{
     set name(arg: string);
     get name(): string;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: string | number);
+    get value(): string | number;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -50,11 +50,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLInputElement | undefined);
+        element?: HTMLInputElement | null;
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         disabled?: boolean;
         name?: string;
-        value?: (string | undefined);
+        value?: (string | number | undefined);
         readOnly?: boolean;
     };
     events: {

package/package/components/core/toolbar.svelte

@@ -1,14 +1,13 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#toolbar
-  @see https://w3c.github.io/aria-practices/#toolbar
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
 -->
 <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/toolbar.svelte.d.ts

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

package/package/components/editor/markdown.svelte

@@ -6,7 +6,7 @@
   import TextArea from '../core/text-area.svelte';
   import Toolbar from '../core/toolbar.svelte';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   export let disabled = false;

package/package/components/editor/markdown.svelte.d.ts

@@ -15,7 +15,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         disabled?: boolean;
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/helpers/group.d.ts

@@ -1,37 +1 @@
-export function activateGroup(...args: any[]): Promise<Group>;
-/**
- * Implement keyboard and mouse interactions for a grouping composite widget.
- */
-declare class Group {
-    /**
-     *
-     * @param {HTMLElement} parent
-     * @todo Check for added elements probably with `MutationObserver`.
-     */
-    constructor(parent: HTMLElement);
-    parent: HTMLElement;
-    role: string;
-    grid: boolean;
-    multi: boolean;
-    id: string;
-    parentGroupSelector: string;
-    orientation: any;
-    childSelectedAttr: any;
-    /** @type {string} */
-    get selector(): string;
-    /** @type {HTMLElement[]} */
-    get allMembers(): HTMLElement[];
-    /** @type {HTMLElement[]} */
-    get activeMembers(): HTMLElement[];
-    /**
-     *
-     * @param {KeyboardEvent}
-     */
-    onClick(event: any): void;
-    /**
-     *
-     * @param {KeyboardEvent}
-     */
-    onKeyDown(event: any): void;
-}
-export {};
+export function activateGroup(...args: any[]): void;

package/package/components/helpers/group.js

@@ -1,6 +1,3 @@
-/* eslint-disable no-plusplus */
-/* eslint-disable no-param-reassign */
-
 import { sleep } from '../util/misc';
 import { getRandomId } from './util';
 
@@ -43,7 +40,7 @@ const config = {
 class Group {
   /**
    *
-   * @param {HTMLElement} parent
+   * @param {HTMLElement} parent Parent element.
    * @todo Check for added elements probably with `MutationObserver`.
    */
   constructor(parent) {
@@ -73,13 +70,15 @@ class Group {
 
       element.id ||= `${this.id}-item-${index}`;
       element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
-      element.setAttribute(this.childSelectedAttr, isSelected);
+      element.setAttribute(this.childSelectedAttr, String(isSelected));
       controls?.setAttribute('aria-labelledby', element.id);
-      controls?.setAttribute('aria-hidden', !isSelected);
+      controls?.setAttribute('aria-hidden', String(!isSelected));
     });
 
     parent.addEventListener('click', (event) => {
-      this.onClick(event);
+      if (/** @type {HTMLElement} */ (event.target).matches(this.selector)) {
+        this.onClick(event);
+      }
     });
 
     parent.addEventListener('keydown', (event) => {
@@ -96,6 +95,7 @@ class Group {
 
   /** @type {HTMLElement[]} */
   get allMembers() {
+    // @ts-ignore
     return [...this.parent.querySelectorAll(this.selector)];
   }
 
@@ -106,10 +106,11 @@ class Group {
 
   /**
    *
-   * @param {KeyboardEvent}
+   * @param {MouseEvent} event `click` event.
    */
   onClick(event) {
-    const { target } = event;
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLButtonElement} */ (event.target);
 
     if (!target.matches(this.selector)) {
       return;
@@ -129,13 +130,13 @@ class Group {
           (element.matches('[role="row"], [role="option"], [role="tab"]') && !this.multi)) &&
         element.closest(this.parentGroupSelector) === targetParentGroup
       ) {
-        element.setAttribute(this.childSelectedAttr, isTarget);
+        element.setAttribute(this.childSelectedAttr, String(isTarget));
       }
 
       const controls = element.getAttribute('aria-controls');
 
       if (controls) {
-        document.getElementById(controls)?.setAttribute('aria-hidden', !isTarget);
+        document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
       }
     });
 
@@ -151,10 +152,12 @@ class Group {
 
   /**
    *
-   * @param {KeyboardEvent}
+   * @param {KeyboardEvent} event `keydown` event.
    */
   onKeyDown(event) {
-    const { target, key, ctrlKey, metaKey, shiftKey, altKey } = event;
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLElement} */ (event.target);
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
 
     if (target.matches(this.selector) && !ctrlKey && !metaKey && !shiftKey && !altKey) {
       if ([' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
@@ -236,11 +239,15 @@ class Group {
 }
 
 /**
- *
+ * Activate a new group.
+ * @param {...any} args Arguments.
  */
-export const activateGroup = async (...args) => {
-  // Wait a bit before the relevant components, including the `aria-controls` target are mounted
-  await sleep(100);
-
-  return new Group(...args);
+export const activateGroup = (...args) => {
+  (async () => {
+    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
+    await sleep(100);
+
+    // @ts-ignore
+    return new Group(...args);
+  })();
 };

package/package/components/helpers/popup.d.ts

@@ -1,7 +1,6 @@
 export function activatePopup(...args: any[]): Popup;
-export type PopupPosition = ('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom');
 /**
- * @typedef {('top-left'|'top-right'|'right-top'|'right-bottom'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom')} PopupPosition
+ *
  */
 declare class Popup {
     /**

package/package/components/helpers/popup.js

@@ -1,13 +1,11 @@
-/* eslint-disable max-len */
 /* eslint-disable no-nested-ternary */
 
 import { get, writable } from 'svelte/store';
 import { getRandomId } from './util';
 
 /**
- * @typedef {('top-left'|'top-right'|'right-top'|'right-bottom'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom')} PopupPosition
+ *
  */
-
 class Popup {
   open = writable(false);
 
@@ -30,7 +28,7 @@ class Popup {
       if (position.startsWith('bottom-')) {
         if (contentHeight > bottomMargin) {
           if (topMargin > bottomMargin) {
-            position = position.replace('bottom-', 'top-');
+            position = /** @type {PopupPosition} */ (position.replace('bottom-', 'top-'));
             height = topMargin;
           } else {
             height = bottomMargin;
@@ -62,7 +60,7 @@ class Popup {
         ? `${Math.round(intersectionRect.left)}px`
         : 'auto';
 
-      const anchorPopup = this.anchorElement.closest('.popup');
+      const anchorPopup = /** @type {HTMLElement} */ (this.anchorElement.closest('.popup'));
 
       const style = {
         inset: [top, right, bottom, left].join(' '),
@@ -109,8 +107,17 @@ class Popup {
       }
     });
 
+    // Close the popup when the backdrop, a menu item or an option is clicked
     this.popupElement.addEventListener('click', (event) => {
-      if (get(this.open) && event.target !== this.anchorElement) {
+      event.stopPropagation();
+
+      // eslint-disable-next-line prefer-destructuring
+      const target = /** @type {HTMLElement} */ (event.target);
+
+      if (
+        get(this.open) &&
+        (target === this.popupElement || target.matches('[role^="menuitem"], [role="option"]'))
+      ) {
         this.open.set(false);
       }
     });
@@ -139,7 +146,7 @@ class Popup {
         this.anchorElement.focus();
       }
 
-      this.anchorElement.setAttribute('aria-expanded', open);
+      this.anchorElement.setAttribute('aria-expanded', String(open));
     });
   }
 
@@ -160,6 +167,9 @@ class Popup {
 }
 
 /**
- *
+ * Activate a new popup.
+ * @param {...any} args Arguments.
+ * @returns {Popup} New popup.
  */
+// @ts-ignore
 export const activatePopup = (...args) => new Popup(...args);

package/package/components/helpers/util.js

@@ -1,3 +1,9 @@
+/**
+ * Get a random ID that can be used for elements.
+ * @param {string} [prefix] Prefix to be added to the ID, e.g. `popup`.
+ * @param {number} [length] Number of characters to be used in the ID.
+ * @returns {string} Generated ID.
+ */
 export const getRandomId = (prefix = '', length = 7) =>
   [
     prefix,

package/package/components/util/app-shell.svelte

@@ -11,6 +11,9 @@
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const { dataset } = document.documentElement;
 
+    /**
+     *
+     */
     const applyTheme = () => {
       if (dataset.autoTheming !== 'false') {
         dataset.theme = mediaQuery.matches ? 'dark' : 'light';
@@ -19,6 +22,9 @@
 
     applyTheme();
 
+    /**
+     *
+     */
     mediaQuery.onchange = () => {
       applyTheme();
     };
@@ -31,7 +37,7 @@
   on:drop|preventDefault
   on:contextmenu={(event) => {
     // Disable the native context menu
-    if (!event.target?.matches('input[type="text"], textarea')) {
+    if (!(/** @type {HTMLElement} */ (event.target)?.matches('input[type="text"], textarea'))) {
       event.preventDefault();
     }
   }}
@@ -46,8 +52,9 @@
   --foreground-color-2-hsl: var(--base-hue) 5% 20%;
   --foreground-color-3-hsl: var(--base-hue) 5% 40%;
   --foreground-color-4-hsl: var(--base-hue) 5% 60%;
-  --border-color-1-hsl: var(--base-hue) 5% 75%;
-  --border-color-2-hsl: var(--base-hue) 5% 80%;
+  --border-color-1-hsl: var(--base-hue) 5% 30%;
+  --border-color-2-hsl: var(--base-hue) 5% 50%;
+  --border-color-3-hsl: var(--base-hue) 5% 70%;
   --background-color-1-hsl: var(--base-hue) 5% 100%;
   --background-color-2-hsl: var(--base-hue) 5% 98%;
   --background-color-3-hsl: var(--base-hue) 5% 94%;
@@ -75,8 +82,9 @@
   --foreground-color-2-hsl: var(--base-hue) 10% 80%;
   --foreground-color-3-hsl: var(--base-hue) 10% 60%;
   --foreground-color-4-hsl: var(--base-hue) 10% 40%;
-  --border-color-1-hsl: var(--base-hue) 10% 28%;
-  --border-color-2-hsl: var(--base-hue) 10% 24%;
+  --border-color-1-hsl: var(--base-hue) 10% 70%;
+  --border-color-2-hsl: var(--base-hue) 10% 50%;
+  --border-color-3-hsl: var(--base-hue) 10% 30%;
   --background-color-1-hsl: var(--base-hue) 10% 10%;
   --background-color-2-hsl: var(--base-hue) 10% 12%;
   --background-color-3-hsl: var(--base-hue) 10% 16%;
@@ -150,7 +158,8 @@
   );
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-hsl));
-  --control-border-color: hsl(var(--border-color-2-hsl));
+  --primary-control-border-color: hsl(var(--border-color-2-hsl));
+  --secondary-control-border-color: hsl(var(--border-color-3-hsl));
   --danger-border-color: hsl(
     var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
   );

package/package/components/util/misc.js

@@ -1,6 +1,5 @@
 /**
  * Check if the given input is a simple object.
- *
  * @param {*} input Input, probably an object.
  * @returns {boolean} Result.
  */
@@ -10,7 +9,6 @@ export const isObject = (input) =>
 /**
  * Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
  * code, particularly while making sequential HTTP requests.
- *
  * @param {number} [ms] Milliseconds to wait.
  * @returns {Promise} Nothing.
  */

package/package/components/util/popup.svelte

@@ -9,18 +9,18 @@
   import { writable } from 'svelte/store';
   import { activatePopup } from '../helpers/popup';
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let anchor = undefined;
 
   /**
    * Reference to the popup element.
-   * @type {(HTMLElement|undefined)}
+   * @type {HTMLDialogElement?}
    */
   export let dialog = undefined;
 
   /**
    * Reference to the content element.
-   * @type {(HTMLElement|undefined)}
+   * @type {HTMLElement?}
    */
   export let content = undefined;
 
@@ -50,6 +50,9 @@
     }
   }
 
+  /**
+   *
+   */
   const openDialog = () => {
     (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
     showContent = true;
@@ -59,11 +62,14 @@
       showDialog = true;
 
       window.requestAnimationFrame(() => {
-        (dialog.querySelector('[tabindex]') || dialog).focus();
+        /** @type {HTMLElement} */ (dialog.querySelector('[tabindex]') || dialog).focus();
       });
     });
   };
 
+  /**
+   *
+   */
   const closeDialog = async () => {
     showDialog = false;
 
@@ -76,6 +82,9 @@
     dialog?.remove();
   };
 
+  /**
+   *
+   */
   const toggleDialog = () => {
     if (dialog) {
       if ($open) {
@@ -87,6 +96,7 @@
   };
 
   // Call the function only when the `$open` prop is changed
+  // @ts-ignore
   $: toggleDialog($open);
 
   onMount(() => {

package/package/components/util/popup.svelte.d.ts

@@ -4,8 +4,8 @@
 /** Generic popup helper. */
 export default class Popup extends SvelteComponentTyped<{
     [x: string]: any;
-    dialog?: HTMLElement;
-    position?: any;
+    dialog?: HTMLDialogElement;
+    position?: PopupPosition;
     anchor?: HTMLElement;
     content?: HTMLElement;
     open?: import("svelte/store").Writable<boolean>;
@@ -18,14 +18,14 @@ export default class Popup extends SvelteComponentTyped<{
     set anchor(arg: HTMLElement);
     get anchor(): HTMLElement;
     /**accessor*/
-    set dialog(arg: HTMLElement);
-    get dialog(): HTMLElement;
+    set dialog(arg: HTMLDialogElement);
+    get dialog(): HTMLDialogElement;
     /**accessor*/
     set content(arg: HTMLElement);
     get content(): HTMLElement;
     /**accessor*/
-    set position(arg: any);
-    get position(): any;
+    set position(arg: PopupPosition);
+    get position(): PopupPosition;
     /**accessor*/
     set open(arg: import("svelte/store").Writable<boolean>);
     get open(): import("svelte/store").Writable<boolean>;
@@ -37,10 +37,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        dialog?: (HTMLElement | undefined);
-        position?: any;
-        anchor?: (HTMLElement | undefined);
-        content?: (HTMLElement | undefined);
+        dialog?: HTMLDialogElement | null;
+        position?: PopupPosition;
+        anchor?: HTMLElement | null;
+        content?: HTMLElement | null;
         open?: import("svelte/store").Writable<boolean>;
     };
     events: {

package/package/components/util/portal.svelte

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

package/package/index.d.ts

@@ -1,4 +1,7 @@
-export function initLocales({ fallbackLocale, initialLocale }?: object): void;
+export function initLocales({ fallbackLocale, initialLocale }?: {
+    fallbackLocale?: string;
+    initialLocale?: string;
+}): void;
 export { default as Calendar } from "./components/composite/calendar.svelte";
 export { default as CheckboxGroup } from "./components/composite/checkbox-group.svelte";
 export { default as Combobox } from "./components/composite/combobox.svelte";
@@ -7,7 +10,7 @@ export { default as Grid } from "./components/composite/grid.svelte";
 export { default as Listbox } from "./components/composite/listbox.svelte";
 export { default as MenuItemGroup } from "./components/composite/menu-item-group.svelte";
 export { default as Menu } from "./components/composite/menu.svelte";
-export { default as RadioButtonGroup } from "./components/composite/radio-button-group.svelte";
+export { default as RadioGroup } from "./components/composite/radio-group.svelte";
 export { default as SelectButtonGroup } from "./components/composite/select-button-group.svelte";
 export { default as Select } from "./components/composite/select.svelte";
 export { default as TabList } from "./components/composite/tab-list.svelte";
@@ -25,7 +28,7 @@ export { default as MenuItem } from "./components/core/menu-item.svelte";
 export { default as NumberInput } from "./components/core/number-input.svelte";
 export { default as Option } from "./components/core/option.svelte";
 export { default as PasswordInput } from "./components/core/password-input.svelte";
-export { default as RadioButton } from "./components/core/radio-button.svelte";
+export { default as Radio } from "./components/core/radio.svelte";
 export { default as RowGroup } from "./components/core/row-group.svelte";
 export { default as Row } from "./components/core/row.svelte";
 export { default as SearchBar } from "./components/core/search-bar.svelte";

package/package/index.js

@@ -3,10 +3,13 @@ import { addMessages, init } from 'svelte-i18n';
 /**
  * Load strings and initialize the locales.
  * @param {object} [init] Initialize options.
+ * @param {string} [init.fallbackLocale] Fallback locale.
+ * @param {string} [init.initialLocale] Initial locale.
  * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
+  /** @type {{ [key: string]: { strings: object }}} */
   const modules = import.meta.glob('./locales/*.js', { eager: true });
 
   Object.entries(modules).forEach(([path, { strings }]) => {
@@ -24,45 +27,87 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 
 initLocales();
 
+// @ts-ignore
 export { default as Calendar } from './components/composite/calendar.svelte';
+// @ts-ignore
 export { default as CheckboxGroup } from './components/composite/checkbox-group.svelte';
+// @ts-ignore
 export { default as Combobox } from './components/composite/combobox.svelte';
+// @ts-ignore
 export { default as Disclosure } from './components/composite/disclosure.svelte';
+// @ts-ignore
 export { default as Grid } from './components/composite/grid.svelte';
+// @ts-ignore
 export { default as Listbox } from './components/composite/listbox.svelte';
+// @ts-ignore
 export { default as MenuItemGroup } from './components/composite/menu-item-group.svelte';
+// @ts-ignore
 export { default as Menu } from './components/composite/menu.svelte';
-export { default as RadioButtonGroup } from './components/composite/radio-button-group.svelte';
+// @ts-ignore
+export { default as RadioGroup } from './components/composite/radio-group.svelte';
+// @ts-ignore
 export { default as SelectButtonGroup } from './components/composite/select-button-group.svelte';
+// @ts-ignore
 export { default as Select } from './components/composite/select.svelte';
+// @ts-ignore
 export { default as TabList } from './components/composite/tab-list.svelte';
+// @ts-ignore
 export { default as Button } from './components/core/button.svelte';
+// @ts-ignore
 export { default as Checkbox } from './components/core/checkbox.svelte';
+// @ts-ignore
 export { default as Dialog } from './components/core/dialog.svelte';
+// @ts-ignore
 export { default as Drawer } from './components/core/drawer.svelte';
+// @ts-ignore
 export { default as GridCell } from './components/core/grid-cell.svelte';
+// @ts-ignore
 export { default as Group } from './components/core/group.svelte';
+// @ts-ignore
 export { default as Icon } from './components/core/icon.svelte';
+// @ts-ignore
 export { default as MenuButton } from './components/core/menu-button.svelte';
+// @ts-ignore
 export { default as MenuItemCheckbox } from './components/core/menu-item-checkbox.svelte';
+// @ts-ignore
 export { default as MenuItemRadio } from './components/core/menu-item-radio.svelte';
+// @ts-ignore
 export { default as MenuItem } from './components/core/menu-item.svelte';
+// @ts-ignore
 export { default as NumberInput } from './components/core/number-input.svelte';
+// @ts-ignore
 export { default as Option } from './components/core/option.svelte';
+// @ts-ignore
 export { default as PasswordInput } from './components/core/password-input.svelte';
-export { default as RadioButton } from './components/core/radio-button.svelte';
+// @ts-ignore
+export { default as Radio } from './components/core/radio.svelte';
+// @ts-ignore
 export { default as RowGroup } from './components/core/row-group.svelte';
+// @ts-ignore
 export { default as Row } from './components/core/row.svelte';
+// @ts-ignore
 export { default as SearchBar } from './components/core/search-bar.svelte';
+// @ts-ignore
 export { default as SelectButton } from './components/core/select-button.svelte';
+// @ts-ignore
 export { default as Separator } from './components/core/separator.svelte';
+// @ts-ignore
 export { default as Slider } from './components/core/slider.svelte';
+// @ts-ignore
 export { default as Spacer } from './components/core/spacer.svelte';
+// @ts-ignore
 export { default as Switch } from './components/core/switch.svelte';
+// @ts-ignore
 export { default as TabPanel } from './components/core/tab-panel.svelte';
+// @ts-ignore
 export { default as Tab } from './components/core/tab.svelte';
+// @ts-ignore
 export { default as TextArea } from './components/core/text-area.svelte';
+// @ts-ignore
 export { default as TextInput } from './components/core/text-input.svelte';
+// @ts-ignore
 export { default as Toolbar } from './components/core/toolbar.svelte';
+// @ts-ignore
 export { default as MarkdownEditor } from './components/editor/markdown.svelte';
+// @ts-ignore
 export { default as AppShell } from './components/util/app-shell.svelte';