@sveltia/ui 0.6.2 → 0.6.4

package/package/components/button/button.svelte

@@ -7,6 +7,7 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { activateKeyShortcuts } from '../util/events';
   import Popup from '../util/popup.svelte';
 
   /**
@@ -71,6 +72,12 @@
    */
   export let popupPosition = 'bottom-left';
 
+  /**
+   * Keyboard shortcuts.
+   * @type {string}
+   */
+  export let keyShortcuts = '';
+
   /** @type {?Popup} */
   let popupComponent;
 </script>
@@ -95,6 +102,7 @@
   on:keydown
   on:keyup
   on:keypress
+  use:activateKeyShortcuts={keyShortcuts}
   bind:this={element}
 >
   <slot name="start-icon" />

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

@@ -12,12 +12,13 @@ export default class Button extends SvelteComponent<{
     label?: string;
     type?: "reset" | "submit" | "button";
     disabled?: boolean;
-    element?: HTMLButtonElement;
-    role?: string;
     size?: "small" | "medium" | "large";
     hidden?: boolean;
+    element?: HTMLButtonElement;
+    role?: string;
     pressed?: boolean | "true" | "false" | "mixed";
     popupPosition?: PopupPosition;
+    keyShortcuts?: string;
 }, {
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
@@ -67,6 +68,9 @@ export default class Button extends SvelteComponent<{
     /**accessor*/
     set popupPosition(arg: PopupPosition);
     get popupPosition(): PopupPosition;
+    /**accessor*/
+    set keyShortcuts(arg: string);
+    get keyShortcuts(): string;
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
@@ -79,12 +83,13 @@ declare const __propDef: {
         label?: string;
         type?: ('button' | 'submit' | 'reset');
         disabled?: boolean;
-        element?: HTMLButtonElement | null;
-        role?: string;
         size?: ('small' | 'medium' | 'large');
         hidden?: boolean;
+        element?: HTMLButtonElement | null;
+        role?: string;
         pressed?: (boolean | 'false' | 'mixed' | 'true' | undefined);
         popupPosition?: PopupPosition;
+        keyShortcuts?: string;
     };
     events: {
         mouseenter: MouseEvent;

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

@@ -57,7 +57,7 @@
 }
 .select-button-group :global(button) {
   border-radius: 0;
-  color: var(--sui-secondary-foreground-color);
+  color: var(--sui-primary-foreground-color);
 }
 .select-button-group :global(button):first-child {
   border-radius: 4px 0 0 4px;

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

@@ -12,10 +12,10 @@ export default class Checkbox extends SvelteComponent<{
     class?: string;
     name?: string;
     label?: string;
-    disabled?: boolean;
-    value?: string;
     checked?: string | boolean;
+    disabled?: boolean;
     indeterminate?: boolean;
+    value?: string;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -34,10 +34,10 @@ declare const __propDef: {
         class?: string;
         name?: string;
         label?: string | null;
-        disabled?: boolean;
-        value?: string | null;
         checked?: (boolean | string | undefined);
+        disabled?: boolean;
         indeterminate?: boolean;
+        value?: string | null;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -10,8 +10,8 @@ export default class Dialog extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     title?: string;
-    open?: boolean;
     size?: "small" | "medium" | "large" | "x-large";
+    open?: boolean;
     modal?: boolean;
     showCancel?: boolean;
     showOk?: boolean;
@@ -45,8 +45,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         title?: string;
-        open?: boolean;
         size?: ('small' | 'medium' | 'large' | 'x-large');
+        open?: boolean;
         modal?: boolean;
         showCancel?: boolean;
         showOk?: boolean;

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

@@ -11,8 +11,8 @@ export default class Drawer extends SvelteComponent<{
     class?: string;
     title?: string;
     position?: "top" | "right" | "bottom" | "left";
-    open?: boolean;
     size?: "small" | "medium" | "large" | "x-large";
+    open?: boolean;
     showClose?: false | "inside" | "outside";
     closeOnBackdropClick?: boolean;
 }, {
@@ -39,8 +39,8 @@ declare const __propDef: {
         class?: string;
         title?: string;
         position?: ('top' | 'right' | 'bottom' | 'left');
-        open?: boolean;
         size?: ('small' | 'medium' | 'large' | 'x-large');
+        open?: boolean;
         showClose?: ('inside' | 'outside' | false);
         closeOnBackdropClick?: boolean;
     };

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

@@ -10,8 +10,8 @@
 export default class Listbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    element?: HTMLElement;
     multiple?: boolean;
+    element?: HTMLElement;
 }, {
     click: MouseEvent;
     select: Event;
@@ -38,8 +38,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: HTMLElement | null;
         multiple?: boolean;
+        element?: HTMLElement | null;
     };
     events: {
         click: MouseEvent;

package/package/components/menu/menu-item.svelte.d.ts

@@ -9,8 +9,8 @@ export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
     checked?: boolean;
+    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
     iconName?: string;
     iconLabel?: string;
 }, {
@@ -30,8 +30,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         label?: string;
-        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
         checked?: boolean;
+        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
         iconName?: string;
         iconLabel?: string;
     };

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

@@ -12,8 +12,8 @@ export default class Combobox extends SvelteComponent<{
     label?: string;
     position?: PopupPosition;
     disabled?: boolean;
-    value?: string | number;
     readOnly?: boolean;
+    value?: string | number;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -36,8 +36,8 @@ declare const __propDef: {
         label?: string;
         position?: PopupPosition;
         disabled?: boolean;
-        value?: (string | number | undefined);
         readOnly?: boolean;
+        value?: (string | number | undefined);
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte.d.ts

@@ -12,13 +12,13 @@
 export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    max?: number;
+    min?: number;
+    step?: number;
     value?: number;
     sliderLabel?: string;
     values?: [number, number];
     sliderLabels?: [string, string];
-    min?: number;
-    max?: number;
-    step?: number;
     optionLabels?: string[] | number[];
 }, {
     click: MouseEvent;
@@ -35,13 +35,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        max?: number;
+        min?: number;
+        step?: number;
         value?: number;
         sliderLabel?: string;
         values?: [number, number];
         sliderLabels?: [string, string];
-        min?: number;
-        max?: number;
-        step?: number;
         optionLabels?: (string[] | number[]);
     };
     events: {

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

@@ -10,8 +10,8 @@ export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    disabled?: boolean;
     checked?: boolean;
+    disabled?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,8 +27,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         label?: string;
-        disabled?: boolean;
         checked?: boolean;
+        disabled?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/text-field/number-input.svelte.d.ts

@@ -10,10 +10,10 @@ export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     disabled?: boolean;
-    value?: string;
-    min?: any;
     max?: any;
+    min?: any;
     step?: number;
+    value?: string;
 }, {
     keypress: KeyboardEvent;
     input: Event;
@@ -30,10 +30,10 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         disabled?: boolean;
-        value?: string | null;
-        min?: any;
         max?: any;
+        min?: any;
         step?: number;
+        value?: string | null;
     };
     events: {
         keypress: KeyboardEvent;

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

@@ -7,6 +7,7 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { activateKeyShortcuts } from '../util/events';
   import { getRandomId } from '../util/util';
 
   /**
@@ -35,6 +36,12 @@
   /** @type {(string | number | undefined)} */
   export let value = undefined;
 
+  /**
+   * Keyboard shortcuts.
+   * @type {string}
+   */
+  export let keyShortcuts = '';
+
   const id = getRandomId('input');
   let ariaLabel = '';
 
@@ -66,6 +73,7 @@
     on:keyup
     on:keypress
     on:change
+    use:activateKeyShortcuts={keyShortcuts}
   />
   {#if ariaLabel}
     <span id="{id}-label" class="label" class:hidden={!!value}>

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

@@ -11,10 +11,11 @@ export default class TextInput extends SvelteComponent<{
     class?: string;
     name?: string;
     disabled?: boolean;
+    readOnly?: boolean;
     value?: string | number;
     element?: HTMLInputElement;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    readOnly?: boolean;
+    keyShortcuts?: string;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -45,6 +46,9 @@ export default class TextInput extends SvelteComponent<{
     /**accessor*/
     set value(arg: string | number);
     get value(): string | number;
+    /**accessor*/
+    set keyShortcuts(arg: string);
+    get keyShortcuts(): string;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
@@ -56,10 +60,11 @@ declare const __propDef: {
         class?: string;
         name?: string;
         disabled?: boolean;
+        readOnly?: boolean;
         value?: (string | number | undefined);
         element?: HTMLInputElement | null;
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
-        readOnly?: boolean;
+        keyShortcuts?: string;
     };
     events: {
         input: Event;

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

@@ -7,6 +7,17 @@
 <script>
   import { onMount } from 'svelte';
 
+  const stylesheets = [
+    // https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
+    'https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap',
+    // https://fonts.google.com/icons?icon.set=Material+Symbols
+    // Use `font-display: block;` @see https://stackoverflow.com/q/41710834
+    'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
+  ];
+
+  /** @type {HTMLElement} */
+  let fontLoader;
+
   onMount(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const { dataset } = document.documentElement;
@@ -28,9 +39,29 @@
     mediaQuery.onchange = () => {
       applyTheme();
     };
+
+    window.setTimeout(() => {
+      fontLoader.remove();
+    }, 1000);
   });
 </script>
 
+<svelte:head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="google" content="notranslate" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+  {#each stylesheets as href}
+    <link rel="preload" {href} as="style" />
+    <link rel="stylesheet" {href} />
+  {/each}
+</svelte:head>
+
+<!-- Preload fonts, including the icons -->
+<div class="font-loader" aria-hidden="true" bind:this={fontLoader}>
+  Sveltia UI <span class="material-symbols-outlined">favorite</span>
+</div>
+
 <div
   class="sui app-shell"
   role="none"
@@ -163,7 +194,7 @@
   );
   --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
-  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
       var(--sui-alert-border-color-lightness)
@@ -255,6 +286,7 @@
   outline-color: transparent;
   border-width: 0;
   border-style: solid;
+  vertical-align: top;
 }
 
 :global(:focus) {
@@ -285,12 +317,6 @@
   text-decoration: none;
 }
 
-:global(img),
-:global(svg),
-:global(iframe) {
-  vertical-align: top;
-}
-
 :global(p),
 :global(li) {
   line-height: var(--sui-line-height-comfortable);
@@ -329,6 +355,11 @@
   background: transparent;
 }
 
+:global(.font-loader) {
+  position: absolute;
+  left: -99999px;
+}
+
 :global(.app-shell) {
   position: fixed;
   inset: 0;

package/package/components/util/events.d.ts

@@ -0,0 +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;

package/package/components/util/events.js

@@ -0,0 +1,110 @@
+/**
+ * Check if the user agent is macOS.
+ * @returns {boolean} Result.
+ */
+export const isMac = () =>
+  /** @type {any} */ (navigator).userAgentData?.platform === 'macOS' ||
+  navigator.platform.startsWith('Mac');
+
+/**
+ * Whether the event matches the given keyboard shortcuts.
+ * @param {KeyboardEvent} event `keydown` or `keypress` event.
+ * @param {string} shortcuts Keyboard shortcuts like `A` or `Ctrl+S`.
+ * @returns {boolean} Result.
+ * @see https://w3c.github.io/aria/#aria-keyshortcuts
+ */
+export const matchShortcuts = (event, shortcuts) => {
+  const { ctrlKey, metaKey, altKey, shiftKey, key } = event;
+
+  return shortcuts.split(/\s+/).some((shortcut) => {
+    const keys = shortcut.split('+');
+
+    // Check if required modifier keys are pressed
+    if (
+      (keys.includes('Ctrl') && !ctrlKey) ||
+      (keys.includes('Meta') && !metaKey) ||
+      (keys.includes('Alt') && !altKey) ||
+      (keys.includes('Shift') && !shiftKey)
+    ) {
+      return false;
+    }
+
+    // Check if unnecessary modifier keys are not pressed
+    if (
+      (!keys.includes('Ctrl') && ctrlKey) ||
+      (!keys.includes('Meta') && metaKey) ||
+      (!keys.includes('Alt') && altKey) ||
+      (!keys.includes('Shift') && shiftKey)
+    ) {
+      return false;
+    }
+
+    return keys
+      .filter((_key) => !['Ctrl', 'Meta', 'Alt', 'Shift'].includes(_key))
+      .every((_key) => _key.toUpperCase() === key.toUpperCase());
+  });
+};
+
+/**
+ * Activate keyboard shortcuts.
+ * @param {(HTMLInputElement | HTMLButtonElement)} element Element.
+ * @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) => {
+  let platformKeyShortcuts;
+
+  /**
+   * Handle the event.
+   * @param {KeyboardEvent} event `keydown` event.
+   */
+  const handler = (event) => {
+    if (!!element.offsetParent && matchShortcuts(event, platformKeyShortcuts)) {
+      event.preventDefault();
+
+      if (!element.disabled) {
+        element.focus();
+        element.click();
+      }
+    }
+  };
+
+  /**
+   * Remove the event listener.
+   */
+  const removeListener = () => {
+    window.removeEventListener('keydown', handler);
+    element.removeAttribute('aria-keyshortcuts');
+  };
+
+  /**
+   * Add the event listener.
+   */
+  const addListener = () => {
+    platformKeyShortcuts = shortcuts
+      ? shortcuts.replace(/\bAccel\b/g, isMac() ? 'Meta' : 'Ctrl')
+      : undefined;
+
+    if (platformKeyShortcuts) {
+      window.addEventListener('keydown', handler);
+      element.setAttribute('aria-keyshortcuts', platformKeyShortcuts);
+    }
+  };
+
+  addListener();
+
+  return {
+    // eslint-disable-next-line jsdoc/require-jsdoc, no-shadow, no-unused-vars
+    update(shortcuts) {
+      removeListener();
+      addListener();
+    },
+
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    destroy() {
+      removeListener();
+    },
+  };
+};

package/package/components/util/popup.svelte

@@ -127,6 +127,7 @@
     style:z-index={$style.zIndex}
     style:min-width={$style.width}
     style:max-height={$style.height}
+    style:visibility={$style.inset ? undefined : 'hidden'}
   >
     {#if showContent}
       <slot />

package/package/styles/core.scss

@@ -24,6 +24,7 @@
   outline-color: transparent;
   border-width: 0;
   border-style: solid;
+  vertical-align: top;
 }
 
 :focus {
@@ -54,12 +55,6 @@ a {
   text-decoration: none;
 }
 
-img,
-svg,
-iframe {
-  vertical-align: top;
-}
-
 p,
 li {
   line-height: var(--sui-line-height-comfortable);

package/package/styles/variables.scss

@@ -117,7 +117,7 @@
   // Borders
   --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
-  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
       var(--sui-alert-border-color-lightness)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -291,6 +291,10 @@
       "svelte": "./package/components/util/app-shell.svelte",
       "default": "./package/components/util/app-shell.svelte"
     },
+    "./components/util/events": {
+      "types": "./package/components/util/events.d.ts",
+      "default": "./package/components/util/events.js"
+    },
     "./components/util/group": {
       "types": "./package/components/util/group.d.ts",
       "default": "./package/components/util/group.js"
@@ -485,6 +489,9 @@
       "components/util/app-shell.svelte": [
         "./package/components/util/app-shell.svelte.d.ts"
       ],
+      "components/util/events": [
+        "./package/components/util/events.d.ts"
+      ],
       "components/util/group": [
         "./package/components/util/group.d.ts"
       ],