@sveltia/ui 0.26.1 → 0.26.3

package/dist/components/util/modal.svelte

@@ -36,12 +36,15 @@
     /* eslint-enable prefer-const */
   } = $props();
 
+  let opening = false;
+  let closing = false;
+
   /**
    * Close the modal.
    * @param {string} returnValue Return value to be used for `<dialog>`.
    */
   export const close = (returnValue) => {
-    if (!dialog) {
+    if (!dialog || !dialog.open || opening || closing) {
       return;
     }
 
@@ -77,10 +80,15 @@
    * Show the modal.
    */
   const openDialog = async () => {
-    if (!dialog || dialog?.open) {
+    if (!dialog || dialog?.open || opening || closing) {
+      if (closing) {
+        open = false;
+      }
+
       return;
     }
 
+    opening = true;
     onOpening?.(new CustomEvent('Opening'));
     showContent = true;
     dialog.showModal();
@@ -89,18 +97,24 @@
     setOpenClass = true;
     await waitForTransition();
     setActiveClass = true;
+    opening = false;
   };
 
   /**
    * Hide the modal.
    */
   const closeDialog = async () => {
-    if (!dialog || !dialog.open) {
+    if (!dialog || !dialog.open || opening || closing) {
+      if (opening) {
+        open = false;
+      }
+
       return;
     }
 
     const { returnValue } = dialog;
 
+    closing = true;
     onClosing?.(new CustomEvent('Closing'));
     // Prevent a button behind the `<dialog>` from being clicked erroneously (Svelte bug)
     document.body.inert = true;
@@ -121,6 +135,7 @@
 
     onClose?.(new CustomEvent('Close', { detail: { returnValue } }));
     dialog.returnValue = '';
+    closing = false;
   };
 
   $effect(() => {
@@ -162,8 +177,7 @@
         lightDismiss &&
         /** @type {HTMLElement | undefined} */ (target)?.matches('dialog')
       ) {
-        dialog.returnValue = 'cancel';
-        open = false;
+        close('cancel');
       }
     }}
     oncancel={(event) => {
@@ -171,8 +185,7 @@
 
       // Escape key is pressed
       if (dialog && escapeDismiss) {
-        dialog.returnValue = 'cancel';
-        open = false;
+        close('cancel');
       }
     }}
   >

package/dist/components/util/popup.svelte

@@ -44,7 +44,7 @@
     hovered = $bindable(false),
     content = $bindable(undefined),
     class: className,
-    showBackdrop = false,
+    showBackdrop = undefined,
     anchor,
     position = 'bottom-left',
     positionBaseElement = undefined,

package/dist/styles/core.scss

@@ -48,12 +48,7 @@
     z-index: 2;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :is(h1, h2, h3, h4, h5, h6) {
     margin: 0;
     font-weight: var(--sui-font-weight-bold, bold);
     line-height: var(--sui-line-height-default);
@@ -92,33 +87,25 @@
     text-decoration: none;
     text-underline-offset: 2px;
 
-    &:hover,
-    &:focus,
-    &:active {
+    &:is(:hover, :focus, :active) {
       text-decoration: underline;
     }
 
-    :global(:root[data-underline-links="true"]) &,
-    :global(:host[data-underline-links="true"]) & {
+    :is(:root, :host)[data-underline-links="true"] & {
       text-decoration: underline;
     }
   }
 
-  p,
-  ul,
-  ol,
-  dl {
+  :is(p, ul, ol, dl) {
     margin: var(--sui-paragraph-margin) 0;
     line-height: var(--sui-line-height-comfortable);
   }
 
-  ul,
-  ol {
+  :is(ul, ol) {
     padding-inline: 2em;
   }
 
-  code,
-  pre {
+  :is(code, pre) {
     border-radius: 4px;
     background-color: var(--sui-code-background-color);
     font-family: var(--sui-font-family-monospace);
@@ -141,8 +128,7 @@
     border-collapse: collapse;
   }
 
-  th,
-  td {
+  :is(th, td) {
     border: 1px solid var(--sui-textbox-border-color);
     padding: 8px;
   }
@@ -153,30 +139,24 @@
     padding-inline-start: 12px;
   }
 
-  .disabled,
-  .readonly,
-  [aria-disabled="true"],
-  [aria-readonly="true"],
-  [inert]:not(body) {
+  :is(.disabled, .readonly, [aria-disabled="true"], [aria-readonly="true"], [inert]):not(body) {
     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 *,
-  .readonly *,
-  [aria-disabled="true"] *,
-  [aria-readonly="true"] *,
-  [inert] * {
-    cursor: default;
-    pointer-events: none;
-    -webkit-user-select: none;
-    user-select: none;
+  :is(.disabled, .readonly, [aria-disabled="true"], [aria-readonly="true"], [inert]) {
+    * {
+      cursor: default;
+      pointer-events: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
   }
 }

package/dist/styles/variables.scss

@@ -243,9 +243,9 @@
 
     // Make controls larger on touch devices, e.g. mobile & tablet
     @media (pointer: coarse) {
-      --sui-control-small-height: 40px;
-      --sui-control-medium-height: 48px;
-      --sui-control-large-height: 56px;
+      --sui-control-small-height: 32px;
+      --sui-control-medium-height: 40px;
+      --sui-control-large-height: 48px;
       --sui-checkbox-height: 24px;
       --sui-secondary-row-height: 48px;
     }

package/dist/typedefs.d.ts

@@ -370,6 +370,11 @@ export type ComboboxProps = {
      * Where to show the dropdown menu.
      */
     position?: PopupPosition | undefined;
+    /**
+     * Number of items to start showing the filter. Default: `5`.
+     * Use `-1` to always hide the filter.
+     */
+    filterThreshold?: number | undefined;
     /**
      * Primary slot content.
      */

package/dist/typedefs.js

@@ -127,6 +127,8 @@
  * @property {string} [value] Selected option’s value.
  * @property {boolean} [editable] Whether to make the `combobox` editable.
  * @property {PopupPosition} [position] Where to show the dropdown menu.
+ * @property {number} [filterThreshold] Number of items to start showing the filter. Default: `5`.
+ * Use `-1` to always hide the filter.
  * @property {Snippet} [children] Primary slot content.
  * @property {Snippet} [chevronIcon] Chevron icon slot content.
  * @property {(event: CustomEvent) => void} [onChange] Custom `change` event handler.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.26.1",
+  "version": "0.26.3",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -46,12 +46,12 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.51.1",
+    "@playwright/test": "^1.52.0",
     "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/kit": "^2.20.5",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "cspell": "^8.18.1",
+    "cspell": "^8.19.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.2",
@@ -66,12 +66,12 @@
     "stylelint": "^16.18.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.11.1",
-    "svelte": "5.26.2",
-    "svelte-check": "^4.1.5",
+    "svelte": "5.28.1",
+    "svelte-check": "^4.1.6",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.2.6",
+    "vite": "^6.3.2",
     "vitest": "^3.1.1"
   },
   "exports": {