@ibobbyts/svelte-ui-utils 0.5.2 → 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;
@@ -783,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) {

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,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,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 +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) {
@@ -1102,26 +1127,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 +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;
@@ -1163,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 {
@@ -1207,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;
@@ -1228,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.2",
+  "version": "0.5.3",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdowns, and data tables.",
   "type": "module",
   "license": "MIT",