@ibobbyts/svelte-ui-utils 0.5.1 → 0.5.2

package/dist/dropdown/Dropdown.svelte

@@ -715,6 +715,26 @@
     resolvedPlacement = availableBelow >= availableAbove ? 'down' : 'up';
   }
 
+  // The panel is only part of the menu: the search box and the menu borders
+  // also consume viewport budget. When the whole budget goes to the panel, the
+  // total menu grows taller than the available space and an upward portal menu
+  // computes a negative top that escapes the viewport. The difference between
+  // the rendered menu and its panel is exactly that non-panel chrome, whatever
+  // the current max-height is.
+  function measureMenuChromeHeight(): number {
+    if (!menuElement || typeof window === 'undefined') {
+      return 0;
+    }
+    const panelElement = menuElement.querySelector<HTMLElement>('.suu-dropdown__panel');
+    if (!panelElement) {
+      return 0;
+    }
+    return Math.max(
+      0,
+      menuElement.getBoundingClientRect().height - panelElement.getBoundingClientRect().height
+    );
+  }
+
   async function updateViewportPanelMaxHeight() {
     await tick();
 
@@ -742,7 +762,8 @@
       resolvedPlacement === 'up'
         ? rect.top - viewportMargin - menuGap
         : window.innerHeight - rect.bottom - viewportMargin - menuGap;
-    viewportPanelMaxHeight = `${Math.max(0, Math.floor(available))}px`;
+    const availablePanelHeight = available - measureMenuChromeHeight();
+    viewportPanelMaxHeight = `${Math.max(0, Math.floor(availablePanelHeight))}px`;
     // Apply the value directly before measuring: the reactive style binding on
     // this node only lands in the next flush, so the first upward open would
     // otherwise measure the fallback 100vh height and place the menu above the
@@ -1053,7 +1074,7 @@
                   aria-expanded={!collapsedGroupIndexes.has(groupIndex)}
                   on:click|stopPropagation={() => toggleGroup(groupIndex)}
                 >
-                  <span>{group.label}</span>
+                  <span class="suu-dropdown__group-title">{group.label}</span>
                   <span class="suu-dropdown__group-chevron" aria-hidden="true"></span>
                 </button>
               {/if}

package/dist/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAER,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EAGnB,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,2BAA2B,EAC3B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA67BtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAXw3B,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;IACniC,sFAAsF,mBAAkB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;;iBAAuC,kBAAkB;mBAAiB,uBAAuB;kBAAgB,mBAAmB,GAAG,SAAS;;;wBAAoG,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;eAAa,UAAU;kBAAgB,MAAM,GAAG,SAAS;oBAAkB,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;;;kBAUtiC,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAER,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EAGnB,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,2BAA2B,EAC3B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AAk9BtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAXw3B,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;IACniC,sFAAsF,mBAAkB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;;iBAAuC,kBAAkB;mBAAiB,uBAAuB;kBAAgB,mBAAmB,GAAG,SAAS;;;wBAAoG,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;eAAa,UAAU;kBAAgB,MAAM,GAAG,SAAS;oBAAkB,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;;;kBAUtiC,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/style.css

@@ -1030,6 +1030,10 @@
   border-radius: var(--suu-radius);
   background: var(--suu-color-bg);
   box-shadow: 0 18px 42px rgb(15 23 42 / 0.16);
+  /* Reset inherited host whitespace (e.g. a nowrap table cell) so every menu
+     text — group titles, status labels — wraps by default; the single-line
+     fit-content rules set nowrap explicitly where needed. */
+  white-space: normal;
 }
 
 .suu-dropdown__menu--portal {
@@ -1074,13 +1078,17 @@
   min-width: max-content;
 }
 
-.suu-dropdown__menu--fit-content .suu-dropdown__option {
+/* The single-line rules assume the menu stretches to its longest option, which
+   only a non-portal menu does; a portal menu keeps the trigger's fixed width,
+   so its options fall back to the base two-line wrapping label instead of
+   being clipped at the menu edge. */
+.suu-dropdown__menu--fit-content:not(.suu-dropdown__menu--portal) .suu-dropdown__option {
   width: auto;
   min-width: 100%;
   white-space: nowrap;
 }
 
-.suu-dropdown__menu--fit-content .suu-dropdown__option .suu-dropdown__label {
+.suu-dropdown__menu--fit-content:not(.suu-dropdown__menu--portal) .suu-dropdown__option .suu-dropdown__label {
   overflow: visible;
   text-overflow: clip;
   display: block;
@@ -1119,7 +1127,17 @@
   justify-content: space-between;
 }
 
+/* A long group title must wrap inside a narrow menu: a flex item keeps its
+   min-content width by default, which pushes unbroken names (IDs, hashes)
+   past the menu edge instead of folding them. */
+.suu-dropdown__group-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
 .suu-dropdown__group-chevron {
+  flex-shrink: 0;
   width: 7px;
   height: 7px;
   border-right: 2px solid currentColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdowns, and data tables.",
   "type": "module",
   "license": "MIT",