@sveltia/ui 0.69.0 → 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.69.0";
 /**
  * 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.69.0";
-
 /**
  * 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/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.69.0",
+  "version": "0.69.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",