@sveltia/ui 0.25.11 → 0.25.13

package/dist/components/dialog/dialog.svelte

@@ -234,10 +234,20 @@
 .footer {
   margin: var(--sui-dialog-footer-margin, 0 24px 24px);
 }
+@media (width < 768px) {
+  .footer {
+    margin: var(--sui-dialog-footer-margin, 0 16px 16px);
+  }
+}
 
 .body {
   overflow: auto;
   margin: var(--sui-dialog-body-margin, 24px 24px);
   white-space: normal;
   line-height: var(--sui-line-height-compact);
+}
+@media (width < 768px) {
+  .body {
+    margin: var(--sui-dialog-body-margin, 16px 16px);
+  }
 }</style>

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

@@ -11,11 +11,21 @@
   import Menu from './menu.svelte';
 
   /**
-   * @import { ButtonProps, CommonEventHandlers, MenuItemProps } from '../../typedefs';
+   * @import {
+   * ButtonProps,
+   * CommonEventHandlers,
+   * MenuItemProps,
+   * PopupPosition,
+   * } from '../../typedefs';
    */
 
   /**
-   * @type {ButtonProps & MenuItemProps & CommonEventHandlers & Record<string, any>}
+   * @typedef {object} Props
+   * @property {PopupPosition} [popupPosition] Where to show the dropdown menu.
+   */
+
+  /**
+   * @type {ButtonProps & MenuItemProps & CommonEventHandlers & Props & Record<string, any>}
    */
   let {
     /* eslint-disable prefer-const */
@@ -24,6 +34,7 @@
     hidden = false,
     disabled = false,
     label = '',
+    popupPosition = 'right-top', // @todo Make this auto detect
     children: _children,
     startIcon: _startIcon,
     endIcon: _endIcon,
@@ -130,7 +141,7 @@
     <Popup
       anchor={buttonElement}
       parentDialogElement={dialogElement}
-      position="right-top"
+      position={popupPosition}
       bind:open={isPopupOpen}
       bind:hovered={isPopupHovered}
     >

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

@@ -1,12 +1,24 @@
 export default MenuItem;
 type MenuItem = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>>): void;
+    $set?(props: Partial<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
 };
 /**
  * A menu item widget.
  * @see https://w3c.github.io/aria/#menuitem
  */
-declare const MenuItem: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & Record<string, any>, {}, "">;
+declare const MenuItem: import("svelte").Component<ButtonProps & MenuItemProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+    /**
+     * Where to show the dropdown menu.
+     */
+    popupPosition?: PopupPosition | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * Where to show the dropdown menu.
+     */
+    popupPosition?: PopupPosition | undefined;
+};
 import type { ButtonProps } from '../../typedefs';
 import type { MenuItemProps } from '../../typedefs';
+import type { PopupPosition } from '../../typedefs';

package/dist/components/select/combobox.svelte

@@ -89,7 +89,15 @@
     // @ts-ignore
     value = target.dataset.type === 'number' ? Number(target.value) : target.value;
     _onChange();
-    onChange?.(new CustomEvent('Change', { detail: { target: inputElement, value } }));
+    onChange?.(
+      new CustomEvent('Change', {
+        detail: {
+          target: inputElement,
+          name: target.name,
+          value,
+        },
+      }),
+    );
   };
 
   $effect(() => {

package/dist/components/switch/switch.svelte

@@ -89,6 +89,7 @@
   font-family: var(--sui-control-font-family);
   font-size: var(--sui-control-font-size);
   line-height: var(--sui-control-line-height);
+  font-weight: var(--sui-font-weight-normal, normal);
   text-align: start;
   cursor: pointer;
   -webkit-user-select: none;

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

@@ -50,6 +50,12 @@
   padding: 8px;
   background-color: var(--sui-tertiary-background-color);
 }
+@media (width < 768px) {
+  .wrapper :global([role="toolbar"]) {
+    flex-wrap: wrap;
+    height: auto;
+  }
+}
 .wrapper :global(.sui.menu-button) {
   padding: 0 4px;
 }

package/dist/components/toolbar/toolbar.svelte

@@ -79,10 +79,13 @@
   align-items: center;
   gap: 8px;
   margin: 0;
-  padding: 0 12px;
+  padding-inline-end: 12px;
   min-width: 0;
   font-size: var(--sui-font-size-x-large);
 }
+[role=toolbar] :global(h2):first-child {
+  padding-inline-start: 12px;
+}
 [role=toolbar] :global(h2) :global(strong) {
   display: block;
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.25.11",
+  "version": "0.25.13",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -47,11 +47,11 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.51.1",
-    "@sveltejs/adapter-auto": "^5.0.0",
-    "@sveltejs/kit": "^2.20.2",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.20.4",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "cspell": "^8.17.5",
+    "cspell": "^8.18.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.1",
@@ -62,17 +62,17 @@
     "postcss-html": "^1.8.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "sass": "^1.86.0",
-    "stylelint": "^16.16.0",
+    "sass": "^1.86.3",
+    "stylelint": "^16.17.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-scss": "^6.11.1",
-    "svelte": "5.25.3",
+    "svelte": "5.25.7",
     "svelte-check": "^4.1.5",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.2.3",
-    "vitest": "^3.0.9"
+    "vite": "^6.2.5",
+    "vitest": "^3.1.1"
   },
   "exports": {
     ".": {