@ibobbyts/svelte-ui-utils 0.5.2 → 0.5.4

package/README.md

@@ -316,7 +316,11 @@ boundary (the bundled `Pagination` does this for its numeric page size). Use
 pagination bars. The expanded menu shares the trigger's left edge by default;
 use `menuAlign="right"` to align their right edges instead. `fitContent` sizes
 the menu to its longest option while keeping the selected edge aligned.
-`DataTable` uses this same component for its page-size picker.
+`DataTable` uses this same component for its page-size picker. A trigger
+stretched taller than its content (for example filling a tall table cell)
+centers its collapsed label by default; `verticalAlign="start"` or `"end"`
+pins the label and chevron to the top or bottom edge instead, keeping a
+minimal vertical padding so the content never touches the button border.
 
 Set `search={true}` with `loadOptions` to load remote options as the user
 types. The default `inputStyle="dropdown"` keeps the search field inside the
@@ -890,6 +894,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

@@ -24,7 +24,8 @@
     DropdownSearchChangeHandler,
     DropdownSelection,
     DropdownTriggerClickHandler,
-    DropdownValue
+    DropdownValue,
+    DropdownVerticalAlign
   } from './types.js';
 
   export let id: string | undefined = undefined;
@@ -50,6 +51,9 @@
   export let ariaLabel: string | undefined = undefined;
   export let placement: DropdownPlacement = 'auto';
   export let menuAlign: DropdownMenuAlign = 'left';
+  // Center is the historical layout; the modifier classes only exist for the
+  // non-default values so existing consumers never see a class change.
+  export let verticalAlign: DropdownVerticalAlign = 'center';
   export let fitViewport = true;
   export let fitContent = true;
   export let disabled = false;
@@ -65,7 +69,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;
@@ -783,12 +791,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) {
@@ -898,6 +906,7 @@
     width !== undefined || minWidth !== undefined || maxWidth !== undefined
       ? 'suu-dropdown--sized'
       : '',
+    verticalAlign !== 'center' ? `suu-dropdown--valign-${verticalAlign}` : '',
     className ?? ''
   ].filter(Boolean).join(' ')}
   style:--suu-dropdown-panel-max-height={viewportPanelMaxHeight}

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

@@ -1,5 +1,5 @@
 import { type UiLanguage } from '../i18n.js';
-import type { DropdownInputStyle, DropdownItemLabelGetter, DropdownLoadOptions, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSearchChangeHandler, DropdownSelection, DropdownTriggerClickHandler } from './types.js';
+import type { DropdownInputStyle, DropdownItemLabelGetter, DropdownLoadOptions, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSearchChangeHandler, DropdownSelection, DropdownTriggerClickHandler, DropdownVerticalAlign } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -36,6 +36,7 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;
     menuAlign?: DropdownMenuAlign;
+    verticalAlign?: DropdownVerticalAlign;
     fitViewport?: boolean;
     fitContent?: boolean;
     disabled?: boolean;

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;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"}
+{"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,EAE3B,qBAAqB,EACtB,MAAM,YAAY,CAAC;AA09BtB,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;SAXu5B,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;IAClkC,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;oBAAkB,qBAAqB;;;;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;;;;;kBAU7kC,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown/DropdownMultiSelect.svelte

@@ -9,7 +9,8 @@
     DropdownOption,
     DropdownOptionGroup,
     DropdownPlacement,
-    DropdownTriggerClickHandler
+    DropdownTriggerClickHandler,
+    DropdownVerticalAlign
   } from './types.js';
 
   export let id: string | undefined = undefined;
@@ -21,6 +22,7 @@
   export let ariaLabel: string | undefined = undefined;
   export let placement: DropdownPlacement = 'auto';
   export let menuAlign: DropdownMenuAlign = 'left';
+  export let verticalAlign: DropdownVerticalAlign = 'center';
   export let fitViewport = true;
   export let fitContent = true;
   export let disabled = false;
@@ -44,6 +46,7 @@
   {ariaLabel}
   {placement}
   {menuAlign}
+  {verticalAlign}
   {fitViewport}
   {fitContent}
   {disabled}

package/dist/dropdown/DropdownMultiSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler } from './types.js';
+import type { DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler, DropdownVerticalAlign } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -22,6 +22,7 @@ declare const DropdownMultiSelect: $$__sveltets_2_IsomorphicComponent<{
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;
     menuAlign?: DropdownMenuAlign;
+    verticalAlign?: DropdownVerticalAlign;
     fitViewport?: boolean;
     fitContent?: boolean;
     disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/DropdownMultiSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,YAAY,CAAC;AAiCtB,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,mBAAmB;SAVqc,MAAM,GAAG,SAAS;YAAU,kBAAkB;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;sBAAoB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,0BAA0B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUvgC,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DropdownMultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/DropdownMultiSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,YAAY,CAAC;AAkCtB,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,mBAAmB;SAVoe,MAAM,GAAG,SAAS;YAAU,kBAAkB;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;sBAAoB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;oBAAkB,qBAAqB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,0BAA0B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAU7kC,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}

package/dist/dropdown/index.d.ts

@@ -3,5 +3,5 @@ export { default as DropdownMultiSelect } from './DropdownMultiSelect.svelte';
 export { createFetchLoadOptions, createLocalLoadOptions } from './load-options.js';
 export type { FetchLoadOptionsConfig, LocalLoadOptionsConfig, LocalLoadOptionsSource } from './load-options.js';
 export { toMultiSelection, toSingleSelection } from './selection.js';
-export type { DropdownChangeHandler, DropdownInputStyle, DropdownItemLabelGetter, DropdownLoadContext, DropdownLoadOptions, DropdownLoadOptionsResult, DropdownLoadStatus, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSearchChangeHandler, DropdownSelection, DropdownTriggerClickHandler, DropdownValue } from './types.js';
+export type { DropdownChangeHandler, DropdownInputStyle, DropdownItemLabelGetter, DropdownLoadContext, DropdownLoadOptions, DropdownLoadOptionsResult, DropdownLoadStatus, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSearchChangeHandler, DropdownSelection, DropdownTriggerClickHandler, DropdownValue, DropdownVerticalAlign } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AACnF,YAAY,EACV,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACrE,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,2BAA2B,EAC3B,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AACnF,YAAY,EACV,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACrE,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,2BAA2B,EAC3B,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACb,qBAAqB,EACtB,MAAM,YAAY,CAAC"}

package/dist/dropdown/types.d.ts

@@ -8,6 +8,12 @@ export type DropdownMultiValue = string[];
 export type DropdownSelection = DropdownValue | DropdownMultiValue;
 export type DropdownPlacement = 'auto' | 'up' | 'down';
 export type DropdownMenuAlign = 'left' | 'right';
+/**
+ * Vertical alignment of the collapsed trigger's content (label and chevron).
+ * Only visible when the trigger is taller than its content, e.g. when the
+ * host layout stretches it to fill a table cell.
+ */
+export type DropdownVerticalAlign = 'start' | 'center' | 'end';
 export interface DropdownOption {
     label: string;
     /** Optional text used for keyboard typeahead matching instead of (or in addition to) the label. */

package/dist/dropdown/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AAEnC,MAAM,MAAM,kBAAkB,GAAG,MAAM,EAAE,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7F,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC,gBAAgB,CAAC,CAAC;AAEpB,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAEtE,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAElF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,EAAE,cAAc,KAAK,MAAM,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACtC;AAED,MAAM,MAAM,mBAAmB,GAAG,CAChC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,mBAAmB,KACzB,OAAO,CAAC,yBAAyB,CAAC,GAAG,yBAAyB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AAEnC,MAAM,MAAM,kBAAkB,GAAG,MAAM,EAAE,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7F,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC,gBAAgB,CAAC,CAAC;AAEpB,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAEtE,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAElF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,EAAE,cAAc,KAAK,MAAM,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACtC;AAED,MAAM,MAAM,mBAAmB,GAAG,CAChC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,mBAAmB,KACzB,OAAO,CAAC,yBAAyB,CAAC,GAAG,yBAAyB,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;
@@ -945,6 +964,31 @@
   width: 100%;
 }
 
+/* A trigger stretched taller than its content (e.g. filling a tall table
+   cell) would float its collapsed label mid-button; the valign modifiers pin
+   the label near an edge while keeping a minimal vertical padding so the
+   text never touches the button border, and the chevron keeps station
+   beside the first or last text line. The doubled class raises specificity
+   above host overrides of the base button padding, because the edge gap is
+   part of the alignment contract, not a restyle. */
+.suu-dropdown.suu-dropdown--valign-start .suu-dropdown__button {
+  align-items: flex-start;
+  padding-top: 10px;
+}
+
+.suu-dropdown.suu-dropdown--valign-start .suu-dropdown__button .suu-dropdown__chevron {
+  margin-top: 0.3em;
+}
+
+.suu-dropdown.suu-dropdown--valign-end .suu-dropdown__button {
+  align-items: flex-end;
+  padding-bottom: 10px;
+}
+
+.suu-dropdown.suu-dropdown--valign-end .suu-dropdown__button .suu-dropdown__chevron {
+  margin-bottom: 0.3em;
+}
+
 .suu-dropdown__button:hover,
 .suu-dropdown__button:focus-visible {
   border-color: var(--suu-color-accent);
@@ -1018,18 +1062,24 @@
   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. */
@@ -1057,17 +1107,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) {
@@ -1102,26 +1152,31 @@
   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;
@@ -1150,12 +1205,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;
@@ -1163,14 +1221,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 {
@@ -1207,15 +1264,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;
@@ -1228,8 +1294,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.2",
+  "version": "0.5.4",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdowns, and data tables.",
   "type": "module",
   "license": "MIT",