@sveltia/ui 0.17.2 → 0.18.1

package/package/components/menu/menu-button.svelte

@@ -5,6 +5,7 @@
 -->
 <script>
   import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import Popup from '../util/popup.svelte';
 
   /**
@@ -71,7 +72,13 @@
       {@render _children?.()}
     {/snippet}
     {#snippet endIcon()}
-      {@render _endIcon?.()}
+      {#if _endIcon}
+        {@render _endIcon()}
+      {:else if iconic}
+        <Icon name="more_vert" />
+      {:else}
+        <Icon name="arrow_drop_down" class="small-arrow" />
+      {/if}
     {/snippet}
   </Button>
 </div>

package/package/components/select/combobox.svelte

@@ -152,7 +152,7 @@
     iconic
     {hidden}
     {disabled}
-    tabindex={readonly || disabled ? -1 : 0}
+    tabindex={!editable || readonly || disabled ? -1 : 0}
     aria-label={isPopupOpen ? $_('_sui.collapse') : $_('_sui.expand')}
     aria-controls="{id}-popup"
     aria-expanded={isPopupOpen}

package/package/components/switch/switch.svelte

@@ -105,11 +105,8 @@ button:active[aria-checked=true] span {
 button:focus-visible {
   outline: 0;
 }
-button:focus-visible span::before {
-  outline-offset: 1px;
-  outline-width: 2px;
-  outline-style: solid;
-  outline-color: var(--sui-primary-accent-color-light);
+button:focus-visible span {
+  outline-color: var(--sui-primary-accent-color-translucent);
 }
 button[aria-checked=true] span {
   background-color: var(--sui-primary-accent-color);

package/package/components/text-editor/toolbar/editor-toolbar.svelte

@@ -80,9 +80,6 @@
       {#snippet startIcon()}
         <Icon name={availableButtons[$selectionBlockType]?.icon ?? 'format_paragraph'} />
       {/snippet}
-      {#snippet endIcon()}
-        <Icon name="arrow_drop_down" class="small-arrow" />
-      {/snippet}
       {#snippet popup()}
         <Menu aria-label={$_('_sui.text_editor.text_style_options')}>
           {#each blockLevelButtons as type (type)}

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

@@ -174,13 +174,13 @@
   --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
   --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
   --sui-font-family-default: "Merriweather Sans", sans-serif;
-  --sui-font-size-xxx-large: 24px;
-  --sui-font-size-xx-large: 20px;
-  --sui-font-size-x-large: 18px;
-  --sui-font-size-large: 16px;
-  --sui-font-size-default: 14px;
-  --sui-font-size-small: 12px;
-  --sui-font-size-x-small: 10px;
+  --sui-font-size-xxx-large: 23px;
+  --sui-font-size-xx-large: 19px;
+  --sui-font-size-x-large: 17px;
+  --sui-font-size-large: 15px;
+  --sui-font-size-default: 13px;
+  --sui-font-size-small: 11px;
+  --sui-font-size-x-small: 9px;
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
@@ -224,7 +224,7 @@
   --sui-checkbox-background-color: var(--sui-control-background-color);
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
   --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
-    calc((var(--sui-control-medium-height) / 2));
+    calc((var(--sui-control-medium-height) / 5));
   --sui-option-height: var(--sui-control-medium-height);
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-listbox-border-color: var(--sui-control-border-color);

package/package/components/util/modal.svelte

@@ -81,7 +81,7 @@
     showContent = true;
     dialog.showModal();
     onOpen?.(new CustomEvent('Open'));
-    await sleep(100);
+    await sleep(0);
     setOpenClass = true;
     await waitForTransition();
     setActiveClass = true;
@@ -96,11 +96,11 @@
     }
 
     onClosing?.(new CustomEvent('Closing'));
+    dialog.close();
     setActiveClass = false;
     setOpenClass = false;
     await waitForTransition();
     showContent = false;
-    dialog.close();
 
     if (dialog.returnValue === 'ok') {
       onOk?.(new CustomEvent('Ok'));
@@ -142,6 +142,7 @@
   <dialog
     bind:this={dialog}
     {...restProps}
+    inert={!setOpenClass}
     {role}
     class="sui modal {className}"
     class:backdrop={showBackdrop}

package/package/styles/variables.scss

@@ -151,13 +151,13 @@
   --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
   // Fonts
   --sui-font-family-default: "Merriweather Sans", sans-serif;
-  --sui-font-size-xxx-large: 24px;
-  --sui-font-size-xx-large: 20px;
-  --sui-font-size-x-large: 18px;
-  --sui-font-size-large: 16px;
-  --sui-font-size-default: 14px;
-  --sui-font-size-small: 12px;
-  --sui-font-size-x-small: 10px;
+  --sui-font-size-xxx-large: 23px;
+  --sui-font-size-xx-large: 19px;
+  --sui-font-size-x-large: 17px;
+  --sui-font-size-large: 15px;
+  --sui-font-size-default: 13px;
+  --sui-font-size-small: 11px;
+  --sui-font-size-x-small: 9px;
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
@@ -205,7 +205,7 @@
   // Option & menu item
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
   --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
-    calc((var(--sui-control-medium-height) / 2));
+    calc((var(--sui-control-medium-height) / 5));
   --sui-option-height: var(--sui-control-medium-height);
   // Listbox
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.17.2",
+  "version": "0.18.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -45,33 +45,33 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.47.2",
+    "@playwright/test": "^1.48.0",
     "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.6.1",
+    "@sveltejs/kit": "^2.7.0",
     "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
-    "cspell": "^8.14.4",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.8",
+    "cspell": "^8.15.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsdoc": "^50.3.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^50.3.2",
     "eslint-plugin-svelte": "^2.44.1",
     "postcss": "^8.4.47",
     "postcss-html": "^1.7.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
-    "sass": "^1.79.4",
-    "stylelint": "^16.9.0",
+    "sass": "^1.79.5",
+    "stylelint": "^16.10.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.7.0",
-    "svelte": "5.0.0-next.260",
-    "svelte-check": "^4.0.4",
+    "svelte": "5.0.0-next.264",
+    "svelte-check": "^4.0.5",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.7.0",
     "vite": "^5.4.8",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.2"
   },
   "exports": {
     ".": {
@@ -90,5 +90,10 @@
         "./package/index.d.ts"
       ]
     }
+  },
+  "pnpm": {
+    "overrides": {
+      "cookie@<0.7.0": ">=0.7.0"
+    }
   }
 }