@sveltia/ui 0.70.2 → 0.71.0

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

@@ -36,7 +36,8 @@
     disabled = false,
     label = '',
     labelDir = undefined,
-    popupPosition = 'right-top', // @todo Make this auto detect
+    // The popup flips to the other side by itself when the submenu wouldn’t fit on this one
+    popupPosition = 'right-top',
     children: _children,
     startIcon: _startIcon,
     endIcon: _endIcon,

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.70.2";
+export const UI_VERSION: "0.71.0";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.70.2';
+export const UI_VERSION = '0.71.0';

package/dist/locales/it.yaml

@@ -0,0 +1,116 @@
+# Dialog action button labels
+ok: OK
+cancel: Annulla
+close: Chiudi
+
+# Button to clear content, e.g. search input or calendar date
+clear: Cancella
+
+# Text editor dialog buttons for link/image insertion
+insert: Inserisci
+update: Aggiorna
+remove: Rimuovi
+
+# Combobox dropdown toggle button aria-labels
+collapse: Comprimi
+expand: Espandi
+
+# Infobar/toast dismiss button label
+dismiss: Ignora
+
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: Suggerimenti Emoji
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Anno
+  previous_decade: Decennio Precedente
+  next_decade: Decennio Successivo
+  month: Mese
+  previous_month: Mese Precedente
+  next_month: Mese Successivo
+  # “Today” button label in footer
+  today: Oggi
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'Opzioni {$name}'
+  # Dropdown toggle aria-label
+  more_options: Altre Opzioni
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Seleziona un’opzione…
+  # Filter input aria-label
+  filter_options: Filtra Opzioni
+  # Empty state message when filter has no matches
+  no_matching_options: Nessuna opzione corrispondente trovata
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Aumenta
+  decrease: Diminuisci
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Mostra Password
+  hide_password: Nascondi Password
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Mostra Segreto
+  hide_secret: Nascondi Segreto
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Opzioni Selezionate
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'Rimuovi {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Editor di Testo
+  code_editor: Editor di Codice
+  # Block style menu button and menu aria-labels
+  text_style_options: Opzioni Stile Testo
+  show_text_style_options: Mostra Opzioni Stile Testo
+  # Block style menu items
+  paragraph: Paragrafo
+  heading_1: Titolo 1
+  heading_2: Titolo 2
+  heading_3: Titolo 3
+  heading_4: Titolo 4
+  heading_5: Titolo 5
+  heading_6: Titolo 6
+  bulleted_list: Elenco Puntato
+  numbered_list: Elenco Numerato
+  blockquote: Citazione
+  code_block: Blocco di Codice
+  # Inline style button aria-labels
+  bold: Grassetto
+  italic: Corsivo
+  strikethrough: Barrato
+  code: Codice
+  link: Link
+  # Link dialog title
+  insert_link: Inserisci Link
+  update_link: Aggiorna Link
+  # Link dialog input field labels
+  text: Testo
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Modifica in Markdown
+  # Error message when rich text conversion fails
+  converter_error: Impossibile abilitare la modalità rich text. Usa l’editor di testo semplice.
+  # Language selector aria-label
+  language: Lingua
+  # Plain text mode option in language selector
+  plain_text: Testo Semplice

package/dist/services/popup.svelte.js

@@ -325,6 +325,13 @@ class Popup {
 
     const topMargin = intersectionRect.top - 8;
     const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
+    // A popup that opens beside its anchor is aligned with one of the anchor’s edges and extends
+    // across it, so its room is measured from that edge, not from the opposite one a dropdown
+    // hangs off
+    const leftMargin = intersectionRect.left - 8;
+    const rightMargin = rootBounds.width - intersectionRect.right - 8;
+    const downwardMargin = rootBounds.height - intersectionRect.top - 8;
+    const upwardMargin = intersectionRect.bottom - 8;
     let { position } = this;
     let height;
 
@@ -345,7 +352,6 @@ class Popup {
     }
 
     // Alter the position if the space is limited
-    // @todo Handle more overflow cases
     if (position.startsWith('bottom-')) {
       if (contentHeight > bottomMargin) {
         if (topMargin > bottomMargin) {
@@ -357,6 +363,31 @@ class Popup {
       }
     }
 
+    // Only a popup that opens beside its anchor carries a `-top`/`-bottom` suffix, and it grows
+    // away from the edge it’s aligned with: down from the anchor’s top, or up from its bottom. It
+    // gets the same treatment as the dropdown above — align with the other edge when the content
+    // doesn’t fit and that edge has more room, and cap it either way, so a long submenu scrolls
+    // instead of running past the viewport
+    if (position.endsWith('-top')) {
+      if (contentHeight > downwardMargin) {
+        if (upwardMargin > downwardMargin) {
+          position = /** @type {PopupPosition} */ (position.replace('-top', '-bottom'));
+          height = upwardMargin;
+        } else {
+          height = downwardMargin;
+        }
+      }
+    } else if (position.endsWith('-bottom')) {
+      if (contentHeight > upwardMargin) {
+        if (downwardMargin > upwardMargin) {
+          position = /** @type {PopupPosition} */ (position.replace('-bottom', '-top'));
+          height = downwardMargin;
+        } else {
+          height = upwardMargin;
+        }
+      }
+    }
+
     // If the popup overflows the viewport, change the position
     if (position.endsWith('-left')) {
       if (intersectionRect.left + contentWidth > rootBounds.width - 8) {
@@ -370,6 +401,20 @@ class Popup {
       }
     }
 
+    // The two checks above align a dropdown that opens below or above its anchor, so neither
+    // covers a popup that opens beside one — a submenu — running off the edge it opens towards.
+    // That gets the same treatment as the vertical flip above: switch to the other side, but only
+    // when it has more room, so a submenu with nowhere to go stays where the caller put it
+    if (position.startsWith('right-')) {
+      if (contentWidth > rightMargin && leftMargin > rightMargin) {
+        position = /** @type {PopupPosition} */ (position.replace('right-', 'left-'));
+      }
+    } else if (position.startsWith('left-')) {
+      if (contentWidth > leftMargin && rightMargin > leftMargin) {
+        position = /** @type {PopupPosition} */ (position.replace('left-', 'right-'));
+      }
+    }
+
     const top = position.startsWith('bottom-')
       ? `${Math.round(intersectionRect.bottom)}px`
       : position.endsWith('-top')
@@ -398,9 +443,15 @@ class Popup {
       inset: [top, right, bottom, left].join(' '),
       zIndex: 1000,
       minWidth: `${Math.round(intersectionRect.width)}px`,
-      maxWidth: position.endsWith('-left')
-        ? `${Math.round(rootBounds.width - intersectionRect.left - 8)}px`
-        : `${Math.round(intersectionRect.right - 8)}px`,
+      // A popup opening beside the anchor is capped by the room on that side, not by the width the
+      // anchor’s own edges leave, which is what the two dropdown cases below measure
+      maxWidth: position.startsWith('right-')
+        ? `${Math.round(rightMargin)}px`
+        : position.startsWith('left-')
+          ? `${Math.round(leftMargin)}px`
+          : position.endsWith('-left')
+            ? `${Math.round(rootBounds.width - intersectionRect.left - 8)}px`
+            : `${Math.round(intersectionRect.right - 8)}px`,
       // `undefined` removes the `max-height` the popup is given, letting it take its natural size
       // again. `auto` would look equivalent but isn’t a valid `max-height`, so the browser would
       // drop it and leave whatever limit was applied last in place.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.70.2",
+  "version": "0.71.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",