@sveltia/ui 0.14.0 → 0.15.0

package/package/components/listbox/option.svelte

@@ -44,9 +44,14 @@
    * @type {string}
    */
   export let searchValue = label;
+  /**
+   * Whether to wrap a long label.
+   * @type {boolean}
+   */
+  export let wrap = false;
 </script>
 
-<div role="none" class="sui option {className}" hidden={hidden || undefined}>
+<div role="none" class="sui option {className}" class:wrap hidden={hidden || undefined}>
   <Button
     role="option"
     tabindex="-1"
@@ -103,9 +108,15 @@
   border-radius: var(--sui-option-border-radius);
   padding: var(--sui-option-padding);
   width: 100%;
-  height: var(--sui-option-height);
+  height: auto;
+  min-height: var(--sui-option-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
+.option.wrap :global(button) {
+  white-space: normal;
+}
 .option :global(.focused),
 .option :global(button:hover) {
   color: var(--sui-highlight-foreground-color);

package/package/components/listbox/option.svelte.d.ts

@@ -15,6 +15,7 @@ export default class Option extends SvelteComponent<{
     hidden?: boolean | undefined;
     selected?: boolean | undefined;
     searchValue?: string | undefined;
+    wrap?: boolean | undefined;
 }, {
     click: MouseEvent;
     dblclick: MouseEvent;
@@ -53,6 +54,7 @@ declare const __propDef: {
         hidden?: boolean | undefined;
         selected?: boolean | undefined;
         searchValue?: string | undefined;
+        wrap?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

package/package/components/util/app-shell.svelte

@@ -194,7 +194,7 @@
   --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
   --sui-control-font-size: var(--sui-font-size-default);
-  --sui-control-line-height: var(--sui-line-height-default);
+  --sui-control-line-height: var(--sui-line-height-compact);
   --sui-button-small-border-radius: var(--sui-control-small-border-radius);
   --sui-button-small-padding: var(--sui-control-small-padding);
   --sui-button-small-height: var(--sui-control-small-height);
@@ -211,7 +211,8 @@
   --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-checkbox-background-color: var(--sui-control-background-color);
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
-  --sui-option-padding: var(--sui-control-medium-padding);
+  --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
+    calc((var(--sui-control-medium-height) / 2));
   --sui-option-height: var(--sui-control-medium-height);
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-listbox-border-color: var(--sui-control-border-color);

package/package/components/util/popup.svelte

@@ -137,7 +137,8 @@
     class:touch
     style:inset={$style.inset}
     style:z-index={$style.zIndex}
-    style:min-width={$style.width}
+    style:width={$style.width}
+    style:min-width={$style.minWidth}
     style:max-height={$style.height}
     style:visibility={$style.inset ? undefined : 'hidden'}
     bind:this={content}

package/package/services/popup.js

@@ -26,8 +26,8 @@ class Popup {
         return;
       }
 
-      const { scrollHeight: contentHeight, scrollWidth: contentWidth } =
-        /** @type {HTMLElement} */ (this.popupElement.querySelector('.content'));
+      const content = /** @type {HTMLElement} */ (this.popupElement.querySelector('.content'));
+      const { scrollHeight: contentHeight, scrollWidth: contentWidth } = content;
       const topMargin = intersectionRect.top - 8;
       const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
       let { position } = this;
@@ -77,7 +77,8 @@ class Popup {
       const style = {
         inset: [top, right, bottom, left].join(' '),
         zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
-        width: `${Math.round(intersectionRect.width)}px`,
+        width: content.matches('.menu') ? 'auto' : `${Math.round(intersectionRect.width)}px`,
+        minWidth: `${Math.round(intersectionRect.width)}px`,
         height: height ? `${Math.round(height)}px` : 'auto',
       };
 
@@ -170,6 +171,11 @@ class Popup {
 
       this.anchorElement.setAttribute('aria-expanded', String(open));
     });
+
+    // Update the popup width when the base element is resized
+    new ResizeObserver(() => {
+      this.checkPosition();
+    }).observe(this.positionBaseElement);
   }
 
   /**

package/package/styles/variables.scss

@@ -184,7 +184,7 @@
   --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
   --sui-control-font-size: var(--sui-font-size-default);
-  --sui-control-line-height: var(--sui-line-height-default);
+  --sui-control-line-height: var(--sui-line-height-compact);
   // Button
   --sui-button-small-border-radius: var(--sui-control-small-border-radius);
   --sui-button-small-padding: var(--sui-control-small-padding);
@@ -204,7 +204,8 @@
   --sui-checkbox-background-color: var(--sui-control-background-color);
   // Option & menu item
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
-  --sui-option-padding: var(--sui-control-medium-padding);
+  --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
+    calc((var(--sui-control-medium-height) / 2));
   --sui-option-height: var(--sui-control-medium-height);
   // Listbox
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {