@sveltia/ui 0.10.4 → 0.10.6

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

@@ -231,11 +231,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 +247,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 +267,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/dialog/dialog.svelte

@@ -110,6 +110,7 @@
   on:closing
   on:close
 >
+  <slot name="extra-content" slot="extra-content" />
   <div role="none" class="content {className} {size}">
     {#if title || showClose || $$slots.header || $$slots['header-extra']}
       <div role="none" class="header">
@@ -183,6 +184,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   border-radius: var(--sui-dialog-content-border-radius, 4px);
   max-width: calc(100dvw - var(--sui-dialog-content-margin, 16px) * 2);
   background-color: var(--sui-dialog-content-background-color, var(--sui-secondary-background-color-translucent));
@@ -200,8 +202,8 @@
   transform: scale(90%);
 }
 .content.small {
-  width: var(--sui-dialog-small-content-width, 400px);
-  max-height: var(--sui-dialog-small-content-max-height, 400px);
+  width: var(--sui-dialog-small-content-width, var(--sui-dialog-content-width, 400px));
+  max-height: var(--sui-dialog-small-content-max-height, var(--sui-dialog-content-max-height, 400px));
 }
 @media (max-height: 400px) {
   .content.small {
@@ -209,8 +211,8 @@
   }
 }
 .content.medium {
-  width: var(--sui-dialog-medium-content-width, 600px);
-  max-height: var(--sui-dialog-medium-content-max-height, 600px);
+  width: var(--sui-dialog-medium-content-width, var(--sui-dialog-content-width, 600px));
+  max-height: var(--sui-dialog-medium-content-max-height, var(--sui-dialog-content-max-height, 600px));
 }
 @media (max-height: 600px) {
   .content.medium {
@@ -218,8 +220,8 @@
   }
 }
 .content.large {
-  width: var(--sui-dialog-large-content-width, 800px);
-  max-height: var(--sui-dialog-large-content-max-height, 800px);
+  width: var(--sui-dialog-large-content-width, var(--sui-dialog-content-width, 800px));
+  max-height: var(--sui-dialog-large-content-max-height, var(--sui-dialog-content-max-height, 800px));
 }
 @media (max-height: 800px) {
   .content.large {
@@ -227,8 +229,8 @@
   }
 }
 .content.x-large {
-  width: var(--sui-dialog-x-large-content-width, 1000px);
-  max-height: var(--sui-dialog-x-large-content-max-height, 1000px);
+  width: var(--sui-dialog-x-large-content-width, var(--sui-dialog-content-width, 1000px));
+  max-height: var(--sui-dialog-x-large-content-max-height, var(--sui-dialog-content-max-height, 1000px));
 }
 @media (max-height: 1000px) {
   .content.x-large {

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

@@ -31,6 +31,9 @@ export default class Dialog extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'extra-content': {
+        slot: string;
+    };
     header: {};
     'header-extra': {};
     'close-icon': {
@@ -73,6 +76,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'extra-content': {
+            slot: string;
+        };
         header: {};
         'header-extra': {};
         'close-icon': {

package/package/components/drawer/drawer.svelte

@@ -84,6 +84,7 @@
   on:closing
   on:close
 >
+  <slot name="extra-content" slot="extra-content" />
   <div role="none" class="content {className} {size} {position} {orientation}">
     <div role="none" class="extra-control">
       {#if showClose === 'outside'}
@@ -149,6 +150,7 @@
   position: absolute;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   max-width: 100dvw;
   max-height: 100dvh;
   background-color: var(--sui-secondary-background-color-translucent);
@@ -171,11 +173,11 @@
   transition-duration: 300ms;
 }
 .content.right {
-  inset: 0 0 0 auto;
+  inset: var(--sui-drawer-right-content-inset, 0 0 0 auto);
   border-radius: var(--sui-drawer-right-content-border-radius, var(--sui-drawer-content-border-radius, 4px 0 0 4px));
 }
 .content.right.full {
-  border-radius: var(--sui-drawer-right-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-right-full-content-border-radius, var(--sui-drawer-right-content-border-radius, 0));
 }
 .content.right .extra-control {
   inset: 0 100% auto auto;
@@ -184,11 +186,11 @@
   transform: translateX(105%);
 }
 .content.left {
-  inset: 0 auto 0 0;
+  inset: var(--sui-drawer-left-content-inset, 0 auto 0 0);
   border-radius: var(--sui-drawer-left-content-border-radius, var(--sui-drawer-content-border-radius, 0 4px 4px 0));
 }
 .content.left.full {
-  border-radius: var(--sui-drawer-left-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-left-full-content-border-radius, var(--sui-drawer-left-content-border-radius, 0));
 }
 .content.left .extra-control {
   inset: 0 auto auto 100%;
@@ -196,24 +198,28 @@
 :global(dialog:not(.open)) .content.left {
   transform: translateX(-105%);
 }
-.content.vertical {
-  max-width: var(--sui-drawer-vertical-max-width, calc(100dvw - 56px));
-  height: var(--sui-drawer-vertical-height, 100dvh);
-}
 :global(dialog.open) .content.vertical {
   transform: translateX(0%);
 }
 .content.vertical.small {
-  width: var(--sui-drawer-vertical-small-width, 400px);
+  width: var(--sui-drawer-vertical-small-width, var(--sui-drawer-vertical-width, 400px));
+  max-width: var(--sui-drawer-vertical-small-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-small-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.medium {
-  width: var(--sui-drawer-vertical-medium-width, 600px);
+  width: var(--sui-drawer-vertical-medium-width, var(--sui-drawer-vertical-width, 600px));
+  max-width: var(--sui-drawer-vertical-medium-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-medium-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.large {
-  width: var(--sui-drawer-vertical-large-width, 800px);
+  width: var(--sui-drawer-vertical-large-width, var(--sui-drawer-vertical-width, 800px));
+  max-width: var(--sui-drawer-vertical-large-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-large-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.x-large {
-  width: var(--sui-drawer-vertical-x-large-width, 1000px);
+  width: var(--sui-drawer-vertical-x-large-width, var(--sui-drawer-vertical-width, 1000px));
+  max-width: var(--sui-drawer-vertical-x-large-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-x-large-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.full {
   width: 100dvw;
@@ -221,11 +227,11 @@
   height: 100dvh;
 }
 .content.top {
-  inset: 0 0 auto 0;
+  inset: var(--sui-drawer-top-content-inset, 0 0 auto 0);
   border-radius: var(--sui-drawer-top-content-border-radius, var(--sui-drawer-content-border-radius, 0 0 4px 4px));
 }
 .content.top.full {
-  border-radius: var(--sui-drawer-top-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-top-full-content-border-radius, var(--sui-drawer-top-content-border-radius, 0));
 }
 .content.top .extra-control {
   inset: 100% 0 auto auto;
@@ -234,11 +240,11 @@
   transform: translateY(-105%);
 }
 .content.bottom {
-  inset: auto 0 0 0;
+  inset: var(--sui-drawer-bottom-content-inset, auto 0 0 0);
   border-radius: var(--sui-drawer-bottom-content-border-radius, var(--sui-drawer-content-border-radius, 4px 4px 0 0));
 }
 .content.bottom.full {
-  border-radius: var(--sui-drawer-bottom-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-bottom-full-content-border-radius, var(--sui-drawer-bottom-content-border-radius, 0));
 }
 .content.bottom .extra-control {
   inset: auto 0 100% auto;
@@ -246,24 +252,28 @@
 :global(dialog:not(.open)) .content.bottom {
   transform: translateY(105%);
 }
-.content.horizontal {
-  width: var(--sui-drawer-horizontal-width, 100dvw);
-  max-height: var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px));
-}
 :global(dialog.open) .content.horizontal {
   transform: translateY(0%);
 }
 .content.horizontal.small {
-  height: var(--sui-drawer-horizontal-small-height, 400px);
+  width: var(--sui-drawer-horizontal-small-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-small-height, var(--sui-drawer-horizontal-height, 400px));
+  max-height: var(--sui-drawer-horizontal-small-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.medium {
-  height: var(--sui-drawer-horizontal-medium-height, 600px);
+  width: var(--sui-drawer-horizontal-medium-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-medium-height, var(--sui-drawer-horizontal-height, 600px));
+  max-height: var(--sui-drawer-horizontal-medium-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.large {
-  height: var(--sui-drawer-horizontal-large-height, 800px);
+  width: var(--sui-drawer-horizontal-large-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-large-height, var(--sui-drawer-horizontal-height, 800px));
+  max-height: var(--sui-drawer-horizontal-large-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.x-large {
-  height: var(--sui-drawer-horizontal-x-large-height, 1000px);
+  width: var(--sui-drawer-horizontal-x-large-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-x-large-height, var(--sui-drawer-horizontal-height, 1000px));
+  max-height: var(--sui-drawer-horizontal-x-large-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.full {
   width: 100dvw;

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

@@ -26,6 +26,9 @@ export default class Drawer extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'extra-content': {
+        slot: string;
+    };
     'close-button': {
         slot: string;
     };
@@ -62,6 +65,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'extra-content': {
+            slot: string;
+        };
         'close-button': {
             slot: string;
         };

package/package/components/select/combobox.svelte

@@ -100,7 +100,13 @@
   }
 </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 +212,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/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/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));

package/package/components/util/modal.svelte

@@ -6,6 +6,7 @@
 
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
+  import { sleep } from '../../services/util';
 
   /**
    * The `class` attribute on the `<dialog>` element.
@@ -98,13 +99,11 @@
     (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
     dialog.showModal();
-
-    window.requestAnimationFrame(async () => {
-      dispatch('open');
-      setOpenClass = true;
-      await waitForTransition();
-      setActiveClass = true;
-    });
+    dispatch('open');
+    await sleep(100);
+    setOpenClass = true;
+    await waitForTransition();
+    setActiveClass = true;
   };
 
   /**
@@ -186,7 +185,7 @@
     }
   }}
 >
-  <slot name="always-show" />
+  <slot name="extra-content" />
   {#if showContent || keepContent}
     <slot />
   {/if}

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

@@ -21,7 +21,7 @@ export default class Modal extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
-    'always-show': {};
+    'extra-content': {};
     default: {};
 }> {
     get close(): (returnValue: string) => void;
@@ -76,7 +76,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        'always-show': {};
+        'extra-content': {};
         default: {};
     };
 };

package/package/components/util/popup.svelte

@@ -130,6 +130,7 @@
     }
   }}
 >
+  <slot name="extra-content" slot="extra-content" />
   <div
     role="none"
     class="content {className} {contentType}"

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

@@ -22,6 +22,9 @@ export default class Popup extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'extra-content': {
+        slot: string;
+    };
     default: {};
 }> {
     /**accessor*/
@@ -76,6 +79,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'extra-content': {
+            slot: string;
+        };
         default: {};
     };
 };

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,11 +246,14 @@ 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();
+          }
+        });
       } else {
         element.classList.toggle('focused', isTarget);
       }
@@ -299,7 +307,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/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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "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.3",
+    "@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.71.1",
+    "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.6",
     "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.5",
+    "vitest": "^1.3.1"
   },
   "exports": {
     "./package.json": "./package.json",