@sveltia/ui 0.10.5 → 0.10.7

package/LICENSE.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Kohei Yoshino.
+Copyright (c) 2024 Kohei Yoshino.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package/components/button/button.svelte

@@ -137,6 +137,7 @@
   on:mouseenter
   on:mouseleave
   on:click
+  on:dblclick
   on:dragover
   on:dragleave
   on:dragend
@@ -144,6 +145,8 @@
   on:keydown
   on:keyup
   on:keypress
+  on:focus
+  on:blur
   on:select={(/** @type {CustomEvent} */ event) => {
     dispatch('select', event.detail);
   }}
@@ -231,11 +234,11 @@ button:global(.primary) {
   font-weight: var(--sui-button-primary-font-weight, normal);
 }
 button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
-  color: var(--sui-button-primary-foreground-color-focus);
+  color: var(--sui-button-primary-foreground-color-focus, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
   background-color: var(--sui-button-primary-background-color-focus, var(--sui-primary-accent-color-light));
 }
 button:global(.primary):active {
-  color: var(--sui-button-primary-foreground-color-active);
+  color: var(--sui-button-primary-foreground-color-active, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
   background-color: var(--sui-button-primary-background-color-active, var(--sui-primary-accent-color-dark));
 }
 button:global(.secondary) {
@@ -247,11 +250,11 @@ button:global(.secondary) {
   font-weight: var(--sui-button-secondary-font-weight, normal);
 }
 button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
-  color: var(--sui-button-secondary-foreground-color-focus);
+  color: var(--sui-button-secondary-foreground-color-focus, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
   background-color: var(--sui-button-secondary-background-color-focus, var(--sui-hover-background-color));
 }
 button:global(.secondary):active {
-  color: var(--sui-button-secondary-foreground-color-active);
+  color: var(--sui-button-secondary-foreground-color-active, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
   background-color: var(--sui-button-secondary-background-color-active, var(--sui-active-background-color));
 }
 button:global(.secondary)[aria-pressed=true] {
@@ -267,11 +270,11 @@ button:global(.tertiary) {
   font-weight: var(--sui-button-tertiary-font-weight, normal);
 }
 button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
-  color: var(--sui-button-tertiary-foreground-color-focus);
+  color: var(--sui-button-tertiary-foreground-color-focus, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
   background-color: var(--sui-button-tertiary-background-color-focus, var(--sui-hover-background-color));
 }
 button:global(.tertiary):active {
-  color: var(--sui-button-tertiary-foreground-color-active);
+  color: var(--sui-button-tertiary-foreground-color-active, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
   background-color: var(--sui-button-tertiary-background-color-active, var(--sui-active-background-color));
 }
 button:global(.tertiary)[aria-pressed=true] {

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

@@ -31,6 +31,7 @@ export default class Button extends SvelteComponent<{
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
     click: MouseEvent;
+    dblclick: MouseEvent;
     dragover: DragEvent;
     dragleave: DragEvent;
     dragend: DragEvent;
@@ -38,6 +39,8 @@ export default class Button extends SvelteComponent<{
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -137,6 +140,7 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         click: MouseEvent;
+        dblclick: MouseEvent;
         dragover: DragEvent;
         dragleave: DragEvent;
         dragend: DragEvent;
@@ -144,6 +148,8 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

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

@@ -69,6 +69,7 @@
   aria-checked={selected}
   {...$$restProps}
   on:click
+  on:dblclick
   on:select
   on:change
   on:change={(event) => {

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

@@ -19,6 +19,7 @@ export default class SelectButton extends SvelteComponent<{
     selected?: boolean | undefined;
 }, {
     click: MouseEvent;
+    dblclick: MouseEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -52,6 +53,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        dblclick: MouseEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/grid/grid-row.svelte

@@ -29,6 +29,9 @@
   aria-selected={selected}
   {...$$restProps}
   on:click
+  on:dblclick
+  on:focus
+  on:blur
   on:select={(/** @type {any} */ event) => {
     dispatch('select', /** @type {CustomEvent} */ (event).detail);
   }}

package/package/components/grid/grid-row.svelte.d.ts

@@ -12,6 +12,9 @@ export default class GridRow extends SvelteComponent<{
     selected?: boolean | undefined;
 }, {
     click: MouseEvent;
+    dblclick: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -32,6 +35,9 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/listbox/option.svelte

@@ -53,6 +53,9 @@
     data-type={typeof value}
     {...$$restProps}
     on:click
+    on:dblclick
+    on:focus
+    on:blur
     on:dragover
     on:dragleave
     on:dragend

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

@@ -16,6 +16,9 @@ export default class Option extends SvelteComponent<{
     selected?: boolean | undefined;
 }, {
     click: MouseEvent;
+    dblclick: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     dragover: DragEvent;
     dragleave: DragEvent;
     dragend: DragEvent;
@@ -51,6 +54,9 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         dragover: DragEvent;
         dragleave: DragEvent;
         dragend: DragEvent;

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

@@ -72,6 +72,8 @@
         $isPopupOpen = false;
       }
     }}
+    on:focus
+    on:blur
     on:select
     on:change
   >

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

@@ -16,6 +16,8 @@ export default class MenuItem extends SvelteComponent<{
     iconLabel?: string | undefined;
 }, {
     click: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -49,6 +51,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/radio/radio.svelte

@@ -81,6 +81,8 @@
       event.preventDefault();
       checked = true;
     }}
+    on:focus
+    on:blur
     on:select
     on:change
   />

package/package/components/radio/radio.svelte.d.ts

@@ -17,6 +17,8 @@ export default class Radio extends SvelteComponent<{
     value?: string | undefined;
     hidden?: boolean | undefined;
 }, {
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -41,6 +43,8 @@ declare const __propDef: {
         hidden?: boolean | undefined;
     };
     events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/select/combobox.svelte

@@ -64,6 +64,7 @@
 
   const dispatch = createEventDispatcher();
   const id = getRandomId('combobox');
+  const selectedSelector = '[role="option"][aria-selected="true"]';
   /** @type {HTMLElement} */
   let comboboxElement;
   /** @type {TextInput | undefined} */
@@ -75,22 +76,40 @@
   let label = '';
 
   /**
-   * Update the `value` and `label` whenever an option is selected.
+   * Update the {@link label} and selected option when the {@link value} is changed.
+   */
+  const onChange = () => {
+    const selected = popupComponent?.content?.querySelector(selectedSelector);
+
+    const target = /** @type {HTMLButtonElement} */ (
+      popupComponent?.content?.querySelector(`[role="option"][value="${value}"]`)
+    );
+
+    if (target) {
+      label = target.querySelector('.label')?.textContent || target.textContent || target.value;
+
+      if (selected !== target) {
+        selected?.setAttribute('aria-selected', 'false');
+        target.setAttribute('aria-selected', 'true');
+      }
+    }
+  };
+
+  /**
+   * Update the {@link value} whenever an option is selected.
    * @param {HTMLButtonElement} target - Selected option.
    */
   const onSelect = (target) => {
     // @todo support more types
     value = target.dataset.type === 'number' ? Number(target.value) : target.value;
-    label = target.querySelector('.label')?.textContent || target.value;
+    onChange();
     dispatch('change', { target: inputComponent?.element, value });
   };
 
   $: {
     if (popupComponent?.content) {
       window.requestAnimationFrame(() => {
-        const selected = popupComponent?.content?.querySelector(
-          '[role="option"][aria-selected="true"]',
-        );
+        const selected = popupComponent?.content?.querySelector(selectedSelector);
 
         if (selected) {
           onSelect(/** @type {HTMLButtonElement} */ (selected));
@@ -98,9 +117,20 @@
       });
     }
   }
+
+  $: {
+    void value;
+    onChange();
+  }
 </script>
 
-<div role="none" class="sui combobox {className}" hidden={hidden || undefined} {...$$restProps}>
+<div
+  role="none"
+  class="sui combobox {className}"
+  class:editable
+  hidden={hidden || undefined}
+  {...$$restProps}
+>
   {#if !editable}
     <div
       role="combobox"
@@ -206,7 +236,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.combobox.readonly > :global(button) {
+.combobox:not(.editable) > :global(button) {
   background-color: transparent !important;
 }
 .combobox > :global(button[tabindex="-1"]) {

package/package/components/tabs/tab.svelte

@@ -37,6 +37,8 @@
   {disabled}
   aria-selected={selected}
   {...$$restProps}
+  on:focus
+  on:blur
   on:select
   on:change
 >

package/package/components/tabs/tab.svelte.d.ts

@@ -13,6 +13,8 @@ export default class Tab extends SvelteComponent<{
     hidden?: boolean | undefined;
     selected?: boolean | undefined;
 }, {
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -40,6 +42,8 @@ declare const __propDef: {
         selected?: boolean | undefined;
     };
     events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/text-field/search-bar.svelte

@@ -163,7 +163,7 @@
   height: var(--sui-button-medium-height);
 }
 .search-bar :global(.label) {
-  inset: 0 36px;
+  --sui-textbox-padding: 0 36px;
 }
 .search-bar :global(.text-input) {
   flex: auto;

package/package/components/toolbar/toolbar.svelte

@@ -78,13 +78,21 @@
   background-color: var(--sui-selected-background-color);
 }
 [role=toolbar] :global(h2) {
+  flex: auto;
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   padding: 0 8px;
+  min-width: 0;
   font-size: var(--sui-font-size-large);
 }
+[role=toolbar] :global(h2) :global(strong) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 [role=toolbar] :global(h2) :global(span) {
   font-size: var(--sui-font-size-small);
   font-weight: normal;

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

@@ -112,7 +112,7 @@
     var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
       var(--sui-alert-foreground-color-lightness)
   );
-  --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 50%);
+  --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
   --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
   --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
   --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
@@ -171,7 +171,7 @@
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 13px;
+  --sui-font-size-monospace: 12.5px;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;
@@ -424,6 +424,10 @@
   }
 }
 
+:global(::selection) {
+  background-color: var(--sui-primary-accent-color-translucent);
+}
+
 :global(*) {
   -webkit-tap-highlight-color: transparent;
 }
@@ -465,6 +469,7 @@
 :global(code),
 :global(pre) {
   font-family: var(--sui-font-family-monospace);
+  font-size: var(--sui-font-size-monospace);
 }
 
 :global(pre) {

package/package/services/group.js

@@ -61,7 +61,6 @@ class Group {
 
     this.parent = parent;
     this.role = /** @type {string} */ (parent.getAttribute('role'));
-    this.grid = this.role === 'listbox' && parent.matches('.grid');
     this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
     this.id = getRandomId(this.role);
     this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
@@ -112,9 +111,7 @@ class Group {
     });
 
     parent.addEventListener('click', (event) => {
-      if (/** @type {HTMLElement} */ (event.target).matches(this.selector)) {
-        this.onClick(event);
-      }
+      this.onClick(event);
     });
 
     parent.addEventListener('keydown', (event) => {
@@ -176,6 +173,14 @@ class Group {
     return this.parent.matches('[aria-readonly="true"]');
   }
 
+  /**
+   * Whether the widget is displayed in grid mode.
+   * @type {boolean}
+   */
+  get grid() {
+    return this.role === 'grid' || (this.role === 'listbox' && this.parent.matches('.grid'));
+  }
+
   /**
    * Select (and move focus to) the given target.
    * @param {(MouseEvent | KeyboardEvent)} event - Triggered event.
@@ -241,13 +246,21 @@ class Group {
       }
 
       if (this.focusChild) {
-        element.tabIndex = isTarget ? 0 : -1;
+        // Wait a bit before the element is rerendered
+        window.requestAnimationFrame(() => {
+          element.tabIndex = isTarget ? 0 : -1;
 
-        if (isTarget) {
-          element.focus();
-        }
+          if (isTarget) {
+            element.focus();
+            element.dispatchEvent(new CustomEvent('focus'));
+          }
+        });
       } else {
         element.classList.toggle('focused', isTarget);
+
+        if (isTarget) {
+          element.dispatchEvent(new CustomEvent('focus'));
+        }
       }
 
       if (controlTarget) {
@@ -299,7 +312,10 @@ class Group {
   onClick(event) {
     // eslint-disable-next-line prefer-destructuring
     const target = /** @type {HTMLElement} */ (event.target);
-    const newTarget = target.matches(this.selector) ? target : undefined;
+
+    const newTarget = target.matches(this.selector)
+      ? target
+      : /** @type {HTMLElement | null} */ (target.closest(this.selector));
 
     if (!newTarget || event.button !== 0) {
       return;

package/package/styles/core.scss

@@ -35,6 +35,10 @@
   }
 }
 
+::selection {
+  background-color: var(--sui-primary-accent-color-translucent);
+}
+
 * {
   -webkit-tap-highlight-color: transparent;
 }
@@ -76,6 +80,7 @@ li {
 code,
 pre {
   font-family: var(--sui-font-family-monospace);
+  font-size: var(--sui-font-size-monospace);
 }
 
 pre {

package/package/styles/variables.scss

@@ -97,7 +97,7 @@
       var(--sui-alert-foreground-color-lightness)
   );
   // Background
-  --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 50%);
+  --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
   --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
   --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
   --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
@@ -160,7 +160,7 @@
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 13px;
+  --sui-font-size-monospace: 12.5px;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,36 +23,36 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.9"
+    "svelte": "^4.2.12"
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.1",
+    "@playwright/test": "^1.42.1",
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.4.1",
-    "@sveltejs/package": "^2.2.6",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "cspell": "^8.3.2",
-    "eslint": "^8.56.0",
+    "@sveltejs/kit": "^2.5.4",
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "cspell": "^8.6.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.0.2",
+    "eslint-plugin-jsdoc": "^48.2.1",
     "eslint-plugin-svelte": "^2.35.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-html": "^1.6.0",
-    "prettier": "^3.2.4",
-    "prettier-plugin-svelte": "^3.1.2",
-    "sass": "^1.70.0",
-    "stylelint": "^16.2.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "sass": "^1.72.0",
+    "stylelint": "^16.2.1",
     "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-scss": "^6.0.0",
-    "svelte-check": "^3.6.3",
+    "stylelint-scss": "^6.2.1",
+    "svelte-check": "^3.6.7",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.1"
+    "vite": "^5.1.6",
+    "vitest": "^1.4.0"
   },
   "exports": {
     "./package.json": "./package.json",