@sveltia/ui 0.68.3 → 0.69.1

package/dist/components/button/button.svelte

@@ -32,6 +32,7 @@
     pressed = undefined,
     keyShortcuts = undefined,
     label = '',
+    labelDir = undefined,
     lines = 1,
     variant = undefined,
     size = 'medium',
@@ -80,7 +81,7 @@
   {@render startIcon?.()}
   {#if variant === 'link'}
     {#if label}
-      <span role="none" class="label">
+      <span role="none" class="label" dir={labelDir}>
         <TruncatedText {lines}>
           {label}
         </TruncatedText>
@@ -92,7 +93,7 @@
     {/if}
   {:else}
     {#if label}
-      <span role="none" class="label">
+      <span role="none" class="label" dir={labelDir}>
         <TruncatedText {lines}>
           {label}
         </TruncatedText>

package/dist/components/emoji/emoji-suggestions.svelte

@@ -10,7 +10,7 @@
   @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
+  import { _, isRTL } from '@sveltia/i18n';
   import { onMount, untrack } from 'svelte';
   import { searchEmojis } from './emoji.js';
 
@@ -126,7 +126,7 @@
     const spaceBelow = innerHeight - anchorRect.bottom;
     const spaceAbove = anchorRect.top;
     const flipped = spaceBelow < listMaxHeight + VIEWPORT_MARGIN && spaceAbove > spaceBelow;
-    const rtl = document.dir === 'rtl';
+    const rtl = isRTL();
     const anchorLeft = rtl ? anchorRect.right - LIST_WIDTH : anchorRect.left;
 
     return {

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

@@ -35,6 +35,7 @@
     hidden = false,
     disabled = false,
     label = '',
+    labelDir = undefined,
     popupPosition = 'right-top', // @todo Make this auto detect
     children: _children,
     startIcon: _startIcon,
@@ -118,7 +119,7 @@
     {/snippet}
     <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
     {#snippet children()}
-      <div role="none" class="content" class:label={!!label}>
+      <div role="none" class="content" class:label={!!label} dir={label ? labelDir : undefined}>
         {#if label}
           {label}
         {:else}

package/dist/components/select/combobox.svelte

@@ -473,6 +473,7 @@
 }
 .combobox-inner :global(.sui.search-bar) {
   flex: none;
+  margin-bottom: calc(8px - var(--sui-focus-ring-width));
 }
 .combobox-inner :global(.sui.listbox) {
   flex: auto;

package/dist/components/select/select-tags.svelte

@@ -301,7 +301,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  margin-left: -1px;
+  margin-inline-start: -1px;
   border-radius: 1px;
   width: 4px;
   background-color: var(--sui-primary-accent-color);

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

@@ -4,10 +4,6 @@
  * guaranteed to be compatible with the matching engine.
  */
 export const SHIKI_VERSION: "4.4.3";
-/**
- * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
- */
-export const UI_VERSION: "0.68.3";
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

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

@@ -7,11 +7,6 @@
  */
 export const SHIKI_VERSION = "4.4.3";
 
-/**
- * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
- */
-export const UI_VERSION = "0.68.3";
-
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

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

@@ -1,4 +1,5 @@
-import { SHIKI_VERSION, UI_VERSION } from './generated.js';
+import { SHIKI_VERSION } from './generated.js';
+import { UI_VERSION } from './version.js';
 
 /**
  * @import { CodeHighlighterLoaders } from '../../../typedefs';

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

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

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

@@ -0,0 +1,6 @@
+// Generated by `scripts/generate-shiki-metadata.js`. DO NOT EDIT.
+
+/**
+ * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
+ */
+export const UI_VERSION = '0.69.1';

package/dist/locales/fa.yaml

@@ -0,0 +1,116 @@
+# Dialog action button labels
+ok: تأیید
+cancel: لغو
+close: بستن
+
+# Button to clear content, e.g. search input or calendar date
+clear: پاک کردن
+
+# Text editor dialog buttons for link/image insertion
+insert: درج
+update: به‌روزرسانی
+remove: حذف
+
+# Combobox dropdown toggle button aria-labels
+collapse: جمع کردن
+expand: باز کردن
+
+# Infobar/toast dismiss button label
+dismiss: بستن
+
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: پیشنهادهای ایموجی
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: سال
+  previous_decade: دهه قبل
+  next_decade: دهه بعد
+  month: ماه
+  previous_month: ماه قبل
+  next_month: ماه بعد
+  # “Today” button label in footer
+  today: امروز
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'گزینه‌های {$name}'
+  # Dropdown toggle aria-label
+  more_options: گزینه‌های بیشتر
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: یک گزینه را انتخاب کنید…
+  # Filter input aria-label
+  filter_options: فیلتر کردن گزینه‌ها
+  # Empty state message when filter has no matches
+  no_matching_options: هیچ گزینهٔ منطبقی پیدا نشد
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: افزایش
+  decrease: کاهش
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: نمایش گذرواژه
+  hide_password: پنهان کردن گذرواژه
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: نمایش عبارت محرمانه
+  hide_secret: پنهان کردن عبارت محرمانه
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: گزینه‌های انتخاب‌شده
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'حذف {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: ویرایشگر متن
+  code_editor: ویرایشگر کد
+  # Block style menu button and menu aria-labels
+  text_style_options: گزینه‌های سبک متن
+  show_text_style_options: نمایش گزینه‌های سبک متن
+  # Block style menu items
+  paragraph: پاراگراف
+  heading_1: سرتیتر ۱
+  heading_2: سرتیتر ۲
+  heading_3: سرتیتر ۳
+  heading_4: سرتیتر ۴
+  heading_5: سرتیتر ۵
+  heading_6: سرتیتر ۶
+  bulleted_list: فهرست نشانه‌دار
+  numbered_list: فهرست شماره‌دار
+  blockquote: نقل‌قول
+  code_block: بلوک کد
+  # Inline style button aria-labels
+  bold: ضخیم
+  italic: مورب
+  strikethrough: خط‌خورده
+  code: کد
+  link: پیوند
+  # Link dialog title
+  insert_link: درج پیوند
+  update_link: به‌روزرسانی پیوند
+  # Link dialog input field labels
+  text: متن
+  url: آدرس (URL)
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: ویرایش در حالت مارک‌داون
+  # Error message when rich text conversion fails
+  converter_error: امکان فعال‌سازی حالت متن غنی وجود ندارد. لطفاً در عوض از ویرایشگر متن ساده استفاده کنید.
+  # Language selector aria-label
+  language: زبان
+  # Plain text mode option in language selector
+  plain_text: متن ساده

package/dist/services/popup.svelte.js

@@ -1,3 +1,4 @@
+import { isRTL } from '@sveltia/i18n';
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { on } from 'svelte/events';
@@ -305,7 +306,23 @@ class Popup {
     intersectionRect.width = Math.max(0, intersectionRect.right - intersectionRect.left);
     intersectionRect.height = Math.max(0, intersectionRect.bottom - intersectionRect.top);
 
+    // Measure the content at its natural size, with any limit previously applied here taken off
+    // first. A popup that delegates its scrolling to a child — the combobox hands it to the option
+    // list, so the filter stays put — reports a `scrollHeight` no larger than the `max-height` it’s
+    // already capped at, and the same goes for `scrollWidth` against `max-width`. Measuring those
+    // clipped values would make the cap stick: once the popup had shrunk to fit a small viewport,
+    // it could never grow back when the viewport did. The properties are put back synchronously,
+    // before the browser can paint, so nothing flickers.
+    const { maxHeight: appliedMaxHeight, maxWidth: appliedMaxWidth } = content.style;
+
+    content.style.maxHeight = '';
+    content.style.maxWidth = '';
+
     const { scrollHeight: contentHeight, scrollWidth: contentWidth } = content;
+
+    content.style.maxHeight = appliedMaxHeight;
+    content.style.maxWidth = appliedMaxWidth;
+
     const topMargin = intersectionRect.top - 8;
     const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
     let { position } = this;
@@ -313,7 +330,7 @@ class Popup {
 
     // Normalize RTL-friendly positions to LTR for LTR documents
     // @todo Rename `PopupPosition` enums to be direction-agnostic
-    if (document.dir === 'rtl') {
+    if (isRTL()) {
       if (position.endsWith('-left')) {
         position = /** @type {PopupPosition} */ (position.replace('-left', '-right'));
       } else if (position.endsWith('-right')) {
@@ -384,7 +401,10 @@ class Popup {
       maxWidth: position.endsWith('-left')
         ? `${Math.round(rootBounds.width - intersectionRect.left - 8)}px`
         : `${Math.round(intersectionRect.right - 8)}px`,
-      height: height ? `${Math.round(height)}px` : 'auto',
+      // `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.
+      height: height ? `${Math.round(height)}px` : undefined,
     };
 
     if (

package/dist/typedefs.d.ts

@@ -58,6 +58,12 @@ export type ButtonProps = {
      * Text label displayed on the button.
      */
     label?: string | undefined;
+    /**
+     * The `dir` attribute on the label element.
+     * Use `auto` to isolate a user-authored label whose text direction is unknown, so it cannot
+     * be reordered by the surrounding UI direction.
+     */
+    labelDir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Number of lines to show the label. Overflowing text will be truncated.
      */
@@ -331,6 +337,12 @@ export type MenuItemProps = {
      * Text label displayed on the item.
      */
     label?: string | undefined;
+    /**
+     * The `dir` attribute on the label element.
+     * Use `auto` to isolate a user-authored label whose text direction is unknown, so it cannot
+     * be reordered by the surrounding UI direction.
+     */
+    labelDir?: "ltr" | "rtl" | "auto" | undefined;
     /**
      * Primary slot content.
      */

package/dist/typedefs.js

@@ -26,6 +26,9 @@
  * attribute. Accepts the special `Accel` key, which will be replaced with `Control` or `Meta`
  * depending on the user’s operating system.
  * @property {string} [label] Text label displayed on the button.
+ * @property {'ltr' | 'rtl' | 'auto'} [labelDir] The `dir` attribute on the label element.
+ * Use `auto` to isolate a user-authored label whose text direction is unknown, so it cannot
+ * be reordered by the surrounding UI direction.
  * @property {number} [lines] Number of lines to show the label. Overflowing text will be truncated.
  * @property {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link'} [variant] The style variant
  * of the button.
@@ -119,6 +122,9 @@
  * @property {boolean} [checked] Whether to check the widget. An alias of the `aria-checked`
  * attribute.
  * @property {string} [label] Text label displayed on the item.
+ * @property {'ltr' | 'rtl' | 'auto'} [labelDir] The `dir` attribute on the label element.
+ * Use `auto` to isolate a user-authored label whose text direction is unknown, so it cannot
+ * be reordered by the surrounding UI direction.
  * @property {Snippet} [children] Primary slot content.
  * @property {Snippet} [startIcon] Start icon slot content.
  * @property {Snippet} [endIcon] End icon slot content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.68.3",
+  "version": "0.69.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -57,17 +57,17 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@vitest/coverage-v8": "^4.1.11",
-    "cspell": "^10.1.1",
+    "cspell": "^10.2.0",
     "eslint": "^9.39.5",
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.2.1",
-    "eslint-plugin-package-json": "^1.7.1",
+    "eslint-plugin-jsdoc": "^64.3.3",
+    "eslint-plugin-package-json": "^1.8.0",
     "eslint-plugin-svelte": "^3.23.0",
-    "globals": "^17.11.0",
-    "happy-dom": "^20.11.8",
-    "oxlint": "^1.80.0",
+    "globals": "^17.12.0",
+    "happy-dom": "^20.12.0",
+    "oxlint": "^1.81.0",
     "postcss": "^8.5.26",
     "postcss-html": "^2.0.0",
     "prettier": "^3.9.6",
@@ -78,7 +78,7 @@
     "stylelint": "^17.14.1",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
-    "svelte": "^5.56.10",
+    "svelte": "^5.57.0",
     "svelte-check": "^4.7.6",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",