@sveltia/ui 0.10.6 → 0.10.7

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);
   }}

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,6 +117,11 @@
       });
     }
   }
+
+  $: {
+    void value;
+    onChange();
+  }
 </script>
 
 <div

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

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

@@ -252,10 +252,15 @@ class Group {
 
           if (isTarget) {
             element.focus();
+            element.dispatchEvent(new CustomEvent('focus'));
           }
         });
       } else {
         element.classList.toggle('focused', isTarget);
+
+        if (isTarget) {
+          element.dispatchEvent(new CustomEvent('focus'));
+        }
       }
 
       if (controlTarget) {

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

@@ -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.6",
+  "version": "0.10.7",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@playwright/test": "^1.42.1",
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.3",
+    "@sveltejs/kit": "^2.5.4",
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "cspell": "^8.6.0",
@@ -43,16 +43,16 @@
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "stylelint": "^16.2.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.2.1",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^3.6.7",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^5.1.5",
-    "vitest": "^1.3.1"
+    "vite": "^5.1.6",
+    "vitest": "^1.4.0"
   },
   "exports": {
     "./package.json": "./package.json",