@sveltia/ui 0.25.12 → 0.25.14

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

@@ -190,6 +190,7 @@
   class="combobox"
   {anchor}
   {position}
+  showBackdrop={true}
   touchOptimized={true}
   bind:open={isPopupOpen}
   onOpen={() => {
@@ -296,11 +297,12 @@
   border-color: var(--sui-error-border-color);
 }
 .combobox div[role=combobox] .label {
-  display: block;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
   overflow: hidden;
   width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 .combobox :global(.text-input) {
   margin: 0 !important;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.25.12",
+  "version": "0.25.14",
   "license": "MIT",
   "type": "module",
   "repository": {