@ibobbyts/svelte-ui-utils 0.5.1 → 0.5.3

package/README.md

@@ -890,6 +890,27 @@ inside a theme root:
 }
 ```
 
+### Overlay surface tokens
+
+Dropdown menus render as floating overlays: they step the page background up
+(`--suu-color-elevated`, derived from the surface/bg palette) and lift off the
+page with `--suu-shadow-overlay` (a deep shadow plus a hairline ring so the
+outline stays readable over host grid lines). Both resolve against the current
+theme palette automatically.
+
+Inside the menu, row semantics come from `--suu-dropdown-*` tokens declared on
+`.suu-dropdown`: `--suu-dropdown-option-separator` (faint line between
+options), `--suu-dropdown-group-border` / `--suu-dropdown-group-bg` /
+`--suu-dropdown-group-text` (the section header band), and
+`--suu-dropdown-option-hover-bg` / `--suu-dropdown-option-selected-bg` /
+`--suu-dropdown-option-selected-hover-bg`. They are palette-derived color
+mixes, so light and dark themes keep the same hierarchy: panel frame > group
+band boundary > option separator, and selected > hover. Only override them for
+a deliberately different overlay treatment.
+
+下拉选项默认最小行高为 36px，分组标题为 32px；长文本仍可撑高。
+分组通过中性底色、加粗标题和组内选项缩进区分，未分组的选项不缩进。
+
 ### Corner-radius tokens
 
 All non-zero component corner radii come from the token definitions in

package/dist/dropdown/Dropdown.svelte

@@ -65,7 +65,11 @@
   export let onTriggerClick: DropdownTriggerClickHandler | undefined = undefined;
 
   const viewportMargin = 20;
-  const menuGap = 6;
+  const menuGap = 4;
+  // The menu overhangs the trigger horizontally so its edges break from the
+  // host layout's lines (table column borders, adjacent inputs) and read as an
+  // independent floating layer instead of a continuation of the grid.
+  const menuOutset = 4;
   const instanceId = ++dropdownInstanceCount;
 
   let open = false;
@@ -715,6 +719,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 +766,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
@@ -762,12 +787,12 @@
     )}px`;
     if (menuAlign === 'right') {
       portalMenuLeft = undefined;
-      portalMenuRight = `${Math.round(window.innerWidth - rect.right)}px`;
+      portalMenuRight = `${Math.max(0, Math.round(window.innerWidth - rect.right - menuOutset))}px`;
     } else {
-      portalMenuLeft = `${Math.round(rect.left)}px`;
+      portalMenuLeft = `${Math.max(0, Math.round(rect.left - menuOutset))}px`;
       portalMenuRight = undefined;
     }
-    portalMenuWidth = `${Math.round(rect.width)}px`;
+    portalMenuWidth = `${Math.round(rect.width + menuOutset * 2)}px`;
   }
 
   function portalMenu(node: HTMLDivElement, enabled: boolean) {
@@ -1053,7 +1078,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;AAs9BtB,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

@@ -12,6 +12,14 @@
   --suu-color-warning: #d97706;
   --suu-color-info: #2563eb;
   --suu-shadow: 0 12px 30px rgb(15 23 42 / 0.14);
+  /* Overlay surfaces (dropdown menus) float above the page: they step the page
+     background up toward the surface color instead of reusing it and get a
+     deep shadow plus a hairline ring so their outline stays readable even
+     where host grid lines (table borders, adjacent inputs) run under them.
+     The elevated token references the base palette lazily, so theme and
+     consumer-side remaps of surface/border apply automatically. */
+  --suu-color-elevated: color-mix(in srgb, var(--suu-color-surface) 45%, var(--suu-color-bg));
+  --suu-shadow-overlay: 0 12px 32px rgb(15 23 42 / 0.2), 0 0 0 1px rgb(15 23 42 / 0.06);
   --suu-radius-xs: 4px;
   --suu-radius-sm: 6px;
   --suu-radius-md: 8px;
@@ -37,6 +45,7 @@
   --suu-color-warning: #fbbf24;
   --suu-color-info: #60a5fa;
   --suu-shadow: 0 16px 34px rgb(0 0 0 / 0.32);
+  --suu-shadow-overlay: 0 12px 32px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.025);
 }
 
 .suu-visually-hidden {
@@ -895,6 +904,16 @@
 
 .suu-dropdown {
   --suu-dropdown-space: 14px;
+  /* Menu row semantics, all derived from the theme palette so light and dark
+     keep the same ladder: panel frame > group band boundary > option
+     separator, and selected > hover. */
+  --suu-dropdown-option-separator: color-mix(in srgb, var(--suu-color-border) 24%, transparent);
+  --suu-dropdown-group-border: color-mix(in srgb, var(--suu-color-border) 80%, transparent);
+  --suu-dropdown-group-bg: color-mix(in srgb, var(--suu-color-muted) 18%, var(--suu-color-elevated));
+  --suu-dropdown-group-text: var(--suu-color-text);
+  --suu-dropdown-option-hover-bg: color-mix(in srgb, var(--suu-color-muted) 7%, var(--suu-color-elevated));
+  --suu-dropdown-option-selected-bg: color-mix(in srgb, var(--suu-color-accent) 12%, var(--suu-color-elevated));
+  --suu-dropdown-option-selected-hover-bg: color-mix(in srgb, var(--suu-color-accent) 18%, var(--suu-color-elevated));
 
   position: relative;
   display: inline-flex;
@@ -1018,18 +1037,28 @@
   transform: translateY(-20%) rotate(45deg);
 }
 
+/* The menu is a floating overlay, not a table that grew downward: its
+   background steps above the page, the shadow ring keeps the outline readable
+   where host grid lines run under it, and it overhangs the trigger by 4px on
+   each side so its edges never sit on the same lines as the surrounding
+   layout. Internal lines follow the --suu-dropdown-* row tokens so the
+   ladder stays: panel frame > group band boundary > option separator. */
 .suu-dropdown__menu {
   position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
+  top: calc(100% + 4px);
+  right: -4px;
   left: auto;
   z-index: 100;
-  min-width: 100%;
+  min-width: calc(100% + 8px);
   overflow: hidden;
   border: 1px solid var(--suu-color-border);
   border-radius: var(--suu-radius);
-  background: var(--suu-color-bg);
-  box-shadow: 0 18px 42px rgb(15 23 42 / 0.16);
+  background: var(--suu-color-elevated);
+  box-shadow: var(--suu-shadow-overlay);
+  /* 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 {
@@ -1053,17 +1082,17 @@
 
 .suu-dropdown__menu--left:not(.suu-dropdown__menu--portal) {
   right: auto;
-  left: 0;
+  left: -4px;
 }
 
 .suu-dropdown__menu--right:not(.suu-dropdown__menu--portal) {
-  right: 0;
+  right: -4px;
   left: auto;
 }
 
 .suu-dropdown__menu--up:not(.suu-dropdown__menu--portal) {
   top: auto;
-  bottom: calc(100% + 6px);
+  bottom: calc(100% + 4px);
 }
 
 .suu-dropdown__menu--fit-content:not(.suu-dropdown__menu--portal) {
@@ -1074,13 +1103,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;
@@ -1094,32 +1127,47 @@
   max-height: var(--suu-dropdown-panel-max-height, 100vh);
   overflow-y: auto;
   overflow-x: hidden;
-  background: var(--suu-color-bg);
+  background: var(--suu-color-elevated);
   overscroll-behavior: contain;
 }
 
 .suu-dropdown__group + .suu-dropdown__group {
-  border-top: 1px solid var(--suu-color-border);
+  border-top: 1px solid var(--suu-dropdown-group-border);
 }
 
+/* 分组用中性底色和粗体形成标题带，避免与蓝色选中态混淆。
+   font 简写必须位于字号和字重之前，防止覆盖标题层级。 */
 .suu-dropdown__group-label {
   display: flex;
   width: 100%;
   border: 0;
-  padding: 8px 14px 6px;
-  background: var(--suu-color-surface);
-  color: var(--suu-color-muted);
+  border-bottom: 1px solid var(--suu-dropdown-group-border);
+  min-height: 32px;
+  padding: 6px 14px;
+  background: var(--suu-dropdown-group-bg);
+  color: var(--suu-dropdown-group-text);
   cursor: pointer;
-  font-size: 0.75em;
+  font: inherit;
+  font-size: 0.8125em;
   font-weight: 700;
+  line-height: 1.3;
   letter-spacing: 0.02em;
-  font: inherit;
   text-align: left;
   align-items: center;
   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;
@@ -1132,12 +1180,15 @@
   transform: rotate(45deg);
 }
 
+/* 收紧单行选项的留白，长名称仍由内容撑高；分隔线保持弱于分组边界。 */
 .suu-dropdown__option {
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
-  padding: 9px 14px;
+  min-height: 36px;
+  padding: 6px 14px;
   border: 0;
-  border-bottom: 1px solid var(--suu-color-border);
+  border-bottom: 1px solid var(--suu-dropdown-option-separator);
   background: transparent;
   color: var(--suu-color-text);
   cursor: pointer;
@@ -1145,14 +1196,13 @@
   text-align: left;
 }
 
-.suu-dropdown__option--group-first {
-  border-top: 1px solid var(--suu-color-border);
+/* 仅有标题的组选项缩进，未分组的「未选择」等操作保持原始对齐。 */
+.suu-dropdown__group-label ~ .suu-dropdown__option {
+  padding-inline-start: 24px;
 }
 
 .suu-dropdown--multiselect .suu-dropdown__option {
-  display: flex;
   gap: 10px;
-  align-items: center;
 }
 
 .suu-dropdown__checkbox {
@@ -1189,15 +1239,24 @@
 .suu-dropdown__option:hover,
 .suu-dropdown__option:focus-visible,
 .suu-dropdown__option--active {
-  background: var(--suu-color-surface);
+  background: var(--suu-dropdown-option-hover-bg);
   outline: none;
 }
 
+/* The selected row is a clear area, not just colored text; hover on top of it
+   deepens the tint one step so the two states stay distinguishable. */
 .suu-dropdown__option[aria-selected='true'] {
+  background: var(--suu-dropdown-option-selected-bg);
   color: var(--suu-color-accent);
   font-weight: 700;
 }
 
+.suu-dropdown__option[aria-selected='true']:hover,
+.suu-dropdown__option[aria-selected='true']:focus-visible,
+.suu-dropdown__option[aria-selected='true'].suu-dropdown__option--active {
+  background: var(--suu-dropdown-option-selected-hover-bg);
+}
+
 .suu-dropdown__option--disabled,
 .suu-dropdown__option:disabled {
   cursor: not-allowed;
@@ -1210,8 +1269,8 @@
   gap: 8px;
   align-items: center;
   padding: 8px 14px;
-  border-bottom: 1px solid var(--suu-color-border);
-  background: var(--suu-color-bg);
+  border-bottom: 1px solid var(--suu-dropdown-group-border);
+  background: var(--suu-color-surface);
 }
 
 .suu-dropdown__search-icon {

package/package.json

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