@sveltia/ui 0.6.6 → 0.7.1

package/package/components/util/popup.svelte

@@ -7,21 +7,28 @@
 <script>
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
-  import { activatePopup } from './popup';
-  import { sleep } from './util';
+  import { activatePopup } from '../../services/popup';
+  import { sleep } from '../../services/util';
 
-  /** @type {HTMLElement?} */
+  /**
+   * The `class` attribute on the `<button>` element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  /** @type {HTMLElement | undefined} */
   export let anchor = undefined;
 
   /**
    * Reference to the popup element.
-   * @type {HTMLDialogElement?}
+   * @type {HTMLDialogElement | undefined}
    */
   export let dialog = undefined;
 
   /**
    * Reference to the content element.
-   * @type {HTMLElement?}
+   * @type {HTMLElement | undefined}
    */
   export let content = undefined;
 
@@ -31,10 +38,19 @@
    */
   export let position = 'bottom-left';
 
+  /**
+   * Whether to show the popup at the center of the screen on mobile/tablet and ignore the defined
+   * dropdown `position`.
+   * @type {boolean}
+   */
+  export let touchOptimized = false;
+
   export let open = writable(false);
 
   let showDialog = false;
   let showContent = false;
+  let touchEnabled = false;
+  /** @type {string | undefined} */
   let contentType;
 
   let style = writable({
@@ -55,7 +71,7 @@
    *
    */
   const openDialog = () => {
-    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
     dialog.showModal();
 
@@ -104,13 +120,16 @@
     }
   };
 
-  // Call the function only when the `$open` prop is changed
-  // @ts-ignore
-  $: toggleDialog($open);
+  $: {
+    void $open;
+    toggleDialog();
+  }
 
   onMount(() => {
     dialog.remove();
 
+    touchEnabled = window.matchMedia('(pointer: coarse)').matches;
+
     // onUnmount
     return () => {
       dialog?.close();
@@ -119,7 +138,14 @@
   });
 </script>
 
-<dialog class="sui popup" bind:this={dialog} class:open={showDialog} {...$$restProps}>
+<dialog
+  class="sui popup {className}"
+  role="none"
+  bind:this={dialog}
+  class:touch={touchOptimized && touchEnabled}
+  class:open={showDialog}
+  {...$$restProps}
+>
   <div
     bind:this={content}
     class="content {contentType}"
@@ -135,7 +161,32 @@
   </div>
 </dialog>
 
-<style>.popup.open .content {
+<style>.popup.touch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--sui-popup-backdrop-color);
+}
+.popup.touch .content {
+  position: static;
+  border-width: 0 !important;
+  border-radius: 4px !important;
+  padding: 8px;
+  min-width: 320px !important;
+  max-width: calc(100vw - 32px) !important;
+  max-height: calc(100vh - 32px) !important;
+}
+.popup.touch.open .content {
+  transform: scale(100%) !important;
+}
+.popup.touch:not(.open) .content {
+  transform: scale(90%);
+}
+.popup.touch.combobox :global(.sui.listbox) {
+  gap: 4px;
+  padding: 8px 4px !important;
+}
+.popup.open .content {
   opacity: 1;
   transform: translateY(2px);
   transition-duration: 100ms;
@@ -173,4 +224,5 @@
 .content.menu :global(.sui.menu) {
   border-width: 0;
   border-radius: 0;
+  background-color: transparent;
 }</style>

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

@@ -4,16 +4,21 @@
 /** Generic popup helper. */
 export default class Popup extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     dialog?: HTMLDialogElement;
     position?: PopupPosition;
     anchor?: HTMLElement;
     content?: HTMLElement;
+    touchOptimized?: boolean;
     open?: import("svelte/store").Writable<boolean>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
 }> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
     set anchor(arg: HTMLElement);
     get anchor(): HTMLElement;
@@ -27,6 +32,9 @@ export default class Popup extends SvelteComponent<{
     set position(arg: PopupPosition);
     get position(): PopupPosition;
     /**accessor*/
+    set touchOptimized(arg: boolean);
+    get touchOptimized(): boolean;
+    /**accessor*/
     set open(arg: import("svelte/store").Writable<boolean>);
     get open(): import("svelte/store").Writable<boolean>;
 }
@@ -37,10 +45,12 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        dialog?: HTMLDialogElement | null;
+        class?: string;
+        dialog?: HTMLDialogElement | undefined;
         position?: PopupPosition;
-        anchor?: HTMLElement | null;
-        content?: HTMLElement | null;
+        anchor?: HTMLElement | undefined;
+        content?: HTMLElement | undefined;
+        touchOptimized?: boolean;
         open?: import("svelte/store").Writable<boolean>;
     };
     events: {

package/package/components/util/portal.svelte

@@ -25,7 +25,7 @@
   });
 </script>
 
-<div class="sui portal {className}" bind:this={ref}>
+<div class="sui portal {className}" {...$$restProps} bind:this={ref}>
   <slot />
 </div>
 

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

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  PortalSlots */
 /** @see https://github.com/sveltejs/svelte/issues/3088 */
 export default class Portal extends SvelteComponent<{
+    [x: string]: any;
     class?: string;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -16,6 +17,7 @@ export type PortalSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         class?: string;
     };
     events: {

package/package/index.d.ts

@@ -47,6 +47,8 @@ export { default as PasswordInput } from "./components/text-field/password-input
 export { default as SearchBar } from "./components/text-field/search-bar.svelte";
 export { default as TextArea } from "./components/text-field/text-area.svelte";
 export { default as TextInput } from "./components/text-field/text-input.svelte";
+export { default as Toast } from "./components/toast/toast.svelte";
 export { default as Toolbar } from "./components/toolbar/toolbar.svelte";
 export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as Group } from "./components/util/group.svelte";
+export * from "./services/util";

package/package/index.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 import { addMessages, init } from 'svelte-i18n';
 
 /**
@@ -18,7 +16,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
     const [, locale] = path.match(/([a-zA-Z-]+)\.js/);
 
     // Add `_sui` suffix to avoid collision with app localization
-    addMessages(locale, { _sui: strings });
+    addMessages(locale, /** @type {any} */ ({ _sui: strings }));
   });
 
   init({
@@ -74,6 +72,9 @@ export { default as PasswordInput } from './components/text-field/password-input
 export { default as SearchBar } from './components/text-field/search-bar.svelte';
 export { default as TextArea } from './components/text-field/text-area.svelte';
 export { default as TextInput } from './components/text-field/text-input.svelte';
+export { default as Toast } from './components/toast/toast.svelte';
 export { default as Toolbar } from './components/toolbar/toolbar.svelte';
 export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as Group } from './components/util/group.svelte';
+
+export * from './services/util';

package/package/{components/util → services}/events.d.ts

@@ -1,3 +1,3 @@
 export function isMac(): boolean;
 export function matchShortcuts(event: KeyboardEvent, shortcuts: string): boolean;
-export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts: string): import('svelte/action').ActionReturn;
+export function activateKeyShortcuts(element: (HTMLInputElement | HTMLButtonElement), shortcuts?: string): import('svelte/action').ActionReturn;

package/package/{components/util → services}/events.js

@@ -48,12 +48,13 @@ export const matchShortcuts = (event, shortcuts) => {
 /**
  * Activate keyboard shortcuts.
  * @param {(HTMLInputElement | HTMLButtonElement)} element Element.
- * @param {string} shortcuts Keyboard shortcuts like `A` or `Accel+S` to focus and click the text
+ * @param {string} [shortcuts] Keyboard shortcuts like `A` or `Accel+S` to focus and click the text
  * field or button. Multiple shortcuts can be defined space-separated. The `Accel` modifier will be
  * replaced with `Ctrl` on Windows/Linux and `Command` on macOS.
  * @returns {import('svelte/action').ActionReturn} Actions.
  */
-export const activateKeyShortcuts = (element, shortcuts) => {
+export const activateKeyShortcuts = (element, shortcuts = '') => {
+  /** @type {string | undefined} */
   let platformKeyShortcuts;
 
   /**

package/package/services/group.d.ts

@@ -0,0 +1 @@
+export function activateGroup(parent: HTMLElement): void;

package/package/{components/util → services}/group.js

@@ -68,7 +68,7 @@ class Group {
 
     this.orientation = this.grid
       ? 'horizontal'
-      : this.parent.getAttribute('aria-orientation') || orientation;
+      : this.parent.getAttribute('aria-orientation') ?? orientation;
     this.childRoles = childRoles;
     this.childSelectedAttr = childSelectedAttr;
     this.focusChild = focusChild;
@@ -108,13 +108,14 @@ class Group {
 
   /** @type {HTMLElement[]} */
   get allMembers() {
-    // @ts-ignore
-    return [...this.parent.querySelectorAll(this.selector)];
+    return /** @type {HTMLElement[]} */ ([...this.parent.querySelectorAll(this.selector)]);
   }
 
   /** @type {HTMLElement[]} */
   get activeMembers() {
-    return this.allMembers.filter((element) => !element.matches('[aria-disabled="true"]'));
+    return this.allMembers.filter(
+      (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
+    );
   }
 
   /**
@@ -157,15 +158,17 @@ class Group {
       if (controls) {
         document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
       }
+
+      if (isTarget) {
+        element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+      }
     });
 
     this.parent.dispatchEvent(
-      new CustomEvent('select', {
+      new CustomEvent('change', {
         detail: {
-          // @ts-ignore
-          value: newTarget.value,
-          // @ts-ignore
-          name: newTarget.name,
+          value: /** @type {any} */ (newTarget).value,
+          name: /** @type {any} */ (newTarget).name,
         },
       }),
     );
@@ -205,7 +208,7 @@ class Group {
 
     const currentTarget = (() => {
       if (!this.focusChild) {
-        return activeMembers.find((member) => member.matches('.focused')) || activeMembers[0];
+        return activeMembers.find((member) => member.matches('.focused')) ?? activeMembers[0];
       }
 
       if (target.matches(this.selector)) {
@@ -253,7 +256,7 @@ class Group {
         newTarget = allMembers[index + 1];
       }
 
-      if (newTarget?.getAttribute('aria-disabled') === 'true') {
+      if (newTarget?.matches('[aria-disabled="true"], [aria-hidden="true"]')) {
         newTarget = undefined;
       }
     } else {
@@ -292,14 +295,13 @@ class Group {
 
 /**
  * Activate a new group.
- * @param {...any} args Arguments.
+ * @param {HTMLElement} parent Parent element.
  */
-export const activateGroup = (...args) => {
+export const activateGroup = (parent) => {
   (async () => {
     // Wait a bit before the relevant components, including the `aria-controls` target are mounted
     await sleep(100);
 
-    // @ts-ignore
-    return new Group(...args);
+    return new Group(parent);
   })();
 };

package/package/{components/util → services}/util.d.ts

@@ -1,3 +1,3 @@
 export function getRandomId(prefix?: string, length?: number): string;
 export function isObject(input: any): boolean;
-export function sleep(ms?: number): Promise<any>;
+export function sleep(ms?: number): Promise<void>;

package/package/{components/util → services}/util.js

@@ -4,7 +4,7 @@
  * @param {number} [length] Number of characters to be used in the ID.
  * @returns {string} Generated ID.
  */
-export const getRandomId = (prefix = '', length = 7) =>
+export const getRandomId = (prefix = 'e', length = 7) =>
   [
     prefix,
     new Array(length)
@@ -25,7 +25,7 @@ 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.
+ * @returns {Promise<void>} Nothing.
  */
 export const sleep = (ms = 1000) =>
   new Promise((resolve) => {

package/package/styles/core.scss

@@ -14,7 +14,9 @@
     "opsz" 24;
 }
 
-* {
+*,
+::before,
+::after {
   overflow-anchor: none;
   scroll-behavior: smooth;
   box-sizing: border-box;
@@ -27,13 +29,17 @@
   vertical-align: top;
 }
 
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
 :focus {
   z-index: 1;
   outline-width: 0;
 }
 
 :focus-visible {
-  outline-color: var(--sui-primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-light);
 }
 
 h1,
@@ -51,7 +57,7 @@ strong {
 }
 
 a {
-  color: var(--sui-primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-text);
   text-decoration: none;
 }
 
@@ -78,10 +84,10 @@ dialog {
   margin: 0;
   border: 0;
   padding: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
   color: var(--sui-primary-foreground-color);
   background: transparent;
   -webkit-user-select: none;
@@ -93,3 +99,26 @@ dialog {
     background: transparent;
   }
 }
+
+.disabled,
+[aria-disabled="true"],
+[inert] {
+  cursor: default;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  filter: grayscale(1) opacity(0.35);
+
+  :global(*) {
+    filter: grayscale(0) opacity(1); // Maintain the opacity on child nodes
+  }
+}
+
+.disabled *,
+[aria-disabled="true"] *,
+[inert] * {
+  cursor: default;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+}