@greypan/web-ui 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.CN.md +2 -2
  2. package/README.md +3 -3
  3. package/dist/assets/menu-portal.js +1 -1
  4. package/dist/assets/menu-portal.js.map +1 -1
  5. package/dist/components/badge/style.js +1 -1
  6. package/dist/components/badge/style.js.map +1 -1
  7. package/dist/components/checkbox-group/style.js +1 -1
  8. package/dist/components/checkbox-group/style.js.map +1 -1
  9. package/dist/components/context-menu/style.js +1 -1
  10. package/dist/components/context-menu/style.js.map +1 -1
  11. package/dist/components/dialog/index.js +1 -1
  12. package/dist/components/dialog/index.js.map +1 -1
  13. package/dist/components/dialog/style.js +1 -1
  14. package/dist/components/dialog/style.js.map +1 -1
  15. package/dist/components/drawer/index.js +1 -1
  16. package/dist/components/drawer/index.js.map +1 -1
  17. package/dist/components/drawer/style.js +1 -1
  18. package/dist/components/drawer/style.js.map +1 -1
  19. package/dist/components/{dropdown-menu → dropdown}/index.d.ts +2 -2
  20. package/dist/components/{dropdown-menu → dropdown}/index.js +3 -3
  21. package/dist/components/dropdown/index.js.map +1 -0
  22. package/dist/components/dropdown/style.js +6 -0
  23. package/dist/components/dropdown/style.js.map +1 -0
  24. package/dist/components/dropdown-divider/style.js +1 -1
  25. package/dist/components/dropdown-divider/style.js.map +1 -1
  26. package/dist/components/icon/style.js +1 -1
  27. package/dist/components/icon/style.js.map +1 -1
  28. package/dist/components/index.d.ts +1 -1
  29. package/dist/components/index.js +2 -2
  30. package/dist/components/layout/index.d.ts +4 -0
  31. package/dist/components/layout/index.js +40 -9
  32. package/dist/components/layout/index.js.map +1 -1
  33. package/dist/components/layout/style.js +1 -1
  34. package/dist/components/layout/style.js.map +1 -1
  35. package/dist/components/popover/style.js +1 -1
  36. package/dist/components/popover/style.js.map +1 -1
  37. package/dist/components/radio-group/style.js +1 -1
  38. package/dist/components/radio-group/style.js.map +1 -1
  39. package/dist/components/segmented/style.js +1 -1
  40. package/dist/components/segmented/style.js.map +1 -1
  41. package/dist/components/select/style.js +1 -1
  42. package/dist/components/select/style.js.map +1 -1
  43. package/dist/components/svg-draw-lines/style.js +1 -1
  44. package/dist/components/svg-draw-lines/style.js.map +1 -1
  45. package/dist/components/theme/style.js +1 -1
  46. package/dist/components/theme/style.js.map +1 -1
  47. package/dist/components/toast/manager.js.map +1 -1
  48. package/dist/components/toast/style.js +1 -1
  49. package/dist/components/toast/style.js.map +1 -1
  50. package/dist/components/tooltip/style.js +1 -1
  51. package/dist/components/tooltip/style.js.map +1 -1
  52. package/dist/icons/generated/radix-icons-panel-left-minimized.d.ts +6 -0
  53. package/dist/icons/generated/radix-icons-panel-left-minimized.js +10 -0
  54. package/dist/icons/generated/radix-icons-panel-left-minimized.js.map +1 -0
  55. package/dist/icons/index.d.ts +1 -0
  56. package/dist/icons/index.js +2 -1
  57. package/dist/types/react.d.ts +2 -2
  58. package/dist/types/vue.d.ts +2 -2
  59. package/package.json +1 -1
  60. package/dist/components/dropdown-menu/index.js.map +0 -1
  61. package/dist/components/dropdown-menu/style.js +0 -6
  62. package/dist/components/dropdown-menu/style.js.map +0 -1
package/README.CN.md CHANGED
@@ -107,7 +107,7 @@ import '@greypan/web-ui/types/vue'
107
107
  | **浮动** | [`<web-ui-popover>`](#web-ui-popover) |
108
108
  | | [`<web-ui-tooltip>`](#web-ui-tooltip) |
109
109
  | | [`<web-ui-context-menu>`](#web-ui-context-menu) |
110
- | **菜单** | [`<web-ui-dropdown-menu>`](#web-ui-dropdown-menu) |
110
+ | **菜单** | [`<web-ui-dropdown>`](#web-ui-dropdown) |
111
111
  | | [`<web-ui-dropdown-item>`](#web-ui-dropdown-item) |
112
112
  | | [`<web-ui-dropdown-divider>`](#web-ui-dropdown-divider) |
113
113
  | | [`<web-ui-dropdown-header>`](#web-ui-dropdown-header) |
@@ -490,7 +490,7 @@ Hover 模式使用 `pointerenter`/`pointerleave` 加延迟控制。Click 模式
490
490
 
491
491
  ### 菜单
492
492
 
493
- #### `<web-ui-dropdown-menu>`
493
+ #### `<web-ui-dropdown>`
494
494
 
495
495
  下拉菜单,支持多级子菜单。
496
496
 
package/README.md CHANGED
@@ -107,7 +107,7 @@ import '@greypan/web-ui/types/vue'
107
107
  | **Floating** | [`<web-ui-popover>`](#web-ui-popover) |
108
108
  | | [`<web-ui-tooltip>`](#web-ui-tooltip) |
109
109
  | | [`<web-ui-context-menu>`](#web-ui-context-menu) |
110
- | **Menu** | [`<web-ui-dropdown-menu>`](#web-ui-dropdown-menu) |
110
+ | **Menu** | [`<web-ui-dropdown>`](#web-ui-dropdown) |
111
111
  | | [`<web-ui-dropdown-item>`](#web-ui-dropdown-item) |
112
112
  | | [`<web-ui-dropdown-divider>`](#web-ui-dropdown-divider) |
113
113
  | | [`<web-ui-dropdown-header>`](#web-ui-dropdown-header) |
@@ -494,7 +494,7 @@ Opens on `contextmenu` event. Menu items: `<web-ui-dropdown-item>`, `<web-ui-dro
494
494
 
495
495
  ### Menu
496
496
 
497
- #### `<web-ui-dropdown-menu>`
497
+ #### `<web-ui-dropdown>`
498
498
 
499
499
  Dropdown menu with multi-level submenu support.
500
500
 
@@ -517,7 +517,7 @@ Items: `<web-ui-dropdown-item>`, `<web-ui-dropdown-divider>`, `<web-ui-dropdown-
517
517
 
518
518
  #### `<web-ui-dropdown-item>`
519
519
 
520
- Menu item for dropdown-menu or context-menu.
520
+ Menu item for dropdown or context-menu.
521
521
 
522
522
  | Attribute | Type | Default | Description |
523
523
  | ---------- | --------- | ------- | -------------------- |
@@ -1,5 +1,5 @@
1
1
  //#region src/assets/menu-portal.css?inline
2
- var e = ".wui-menu-portal-overlay{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);z-index:var(--wui-layer-menu,100);box-sizing:border-box;min-width:200px;max-width:90vw;max-height:80vh;color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-overlay,#f5f5f5d9);border-radius:20px;padding:4px;position:fixed;overflow-y:auto}.wui-menu-portal-overlay.dropdown-overlay .dropdown-scroll{min-width:200px;max-height:320px;overflow-y:auto}.wui-menu-portal-overlay.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.context-submenu{z-index:var(--wui-layer-menu-submenu,110)}";
2
+ var e = ".wui-menu-portal-overlay{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);z-index:var(--wui-layer-menu,100);box-sizing:border-box;min-width:200px;max-width:90vw;max-height:80vh;color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;padding:4px;position:fixed;overflow-y:auto}.wui-menu-portal-overlay.dropdown-overlay .dropdown-scroll{min-width:200px;max-height:320px;overflow-y:auto}.wui-menu-portal-overlay.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.context-submenu{z-index:var(--wui-layer-menu-submenu,110)}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":[".wui-menu-portal-overlay {\n --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n\n position: fixed;\n z-index: var(--wui-layer-menu, 100);\n\n overflow-y: auto;\n\n box-sizing: border-box;\n min-width: 200px;\n max-width: 90vw;\n max-height: 80vh;\n padding: 4px;\n border-radius: 20px;\n\n color: var(--wui-color-text, #1b1b1b);\n\n background-color: var(--wui-color-surface-overlay, rgb(245 245 245 / 0.85));\n}\n\n.wui-menu-portal-overlay.dropdown-overlay .dropdown-scroll {\n overflow-y: auto;\n min-width: 200px;\n max-height: 320px;\n}\n\n.wui-menu-portal-overlay.dropdown-overlay[data-level]:not([data-level='0']),\n.wui-menu-portal-overlay.context-submenu {\n z-index: var(--wui-layer-menu-submenu, 110);\n}\n"],"mappings":""}
1
+ {"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":[".wui-menu-portal-overlay {\n --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n\n position: fixed;\n z-index: var(--wui-layer-menu, 100);\n\n overflow-y: auto;\n\n box-sizing: border-box;\n min-width: 200px;\n max-width: 90vw;\n max-height: 80vh;\n padding: 4px;\n border-radius: 20px;\n\n color: var(--wui-color-text, #1b1b1b);\n\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n.wui-menu-portal-overlay.dropdown-overlay .dropdown-scroll {\n overflow-y: auto;\n min-width: 200px;\n max-height: 320px;\n}\n\n.wui-menu-portal-overlay.dropdown-overlay[data-level]:not([data-level='0']),\n.wui-menu-portal-overlay.context-submenu {\n z-index: var(--wui-layer-menu-submenu, 110);\n}\n"],"mappings":""}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/badge/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}.badge-wrapper{display:inline-flex}.badge-wrapper-fixed{position:relative}.badge{z-index:1;border:1px solid var(--wui-color-page,#fff);min-width:18px;height:18px;color:var(--wui-color-on-accent,#fff);white-space:nowrap;background-color:var(--wui-color-danger,#dc2626);border-radius:2147483647px;justify-content:center;align-items:center;padding:0 4px;font-size:12px;font-weight:500;line-height:1;display:inline-flex}.badge-fixed{transform:translate(calc(var(--badge-x,50%) + var(--badge-offset-x,0px)), calc(var(--badge-y,-50%) + var(--badge-offset-y,0px)));position:absolute}:host([placement=top-right]) .badge{--badge-x:50%;--badge-y:-50%;top:0;right:0}:host([placement=top-left]) .badge{--badge-x:-50%;--badge-y:-50%;top:0;left:0}:host([placement=bottom-right]) .badge{--badge-x:50%;--badge-y:50%;bottom:0;right:0}:host([placement=bottom-left]) .badge{--badge-x:-50%;--badge-y:50%;bottom:0;left:0}.badge-dot{min-width:8px;height:8px;padding:0;font-size:0}.badge-fixed.badge-dot{--badge-x:40%;--badge-y:-40%}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-block}.badge-wrapper{display:inline-flex}.badge-wrapper-fixed{position:relative}.badge{z-index:1;border:1px solid var(--wui-color-page,#fff);min-width:18px;height:18px;color:var(--wui-color-on-accent,#fff);white-space:nowrap;background-color:var(--wui-color-danger,#dc2626);border-radius:2147483647px;justify-content:center;align-items:center;padding:0 4px;font-size:12px;font-weight:500;line-height:1;display:inline-flex}.badge-fixed{transform:translate(calc(var(--badge-x,50%) + var(--badge-offset-x,0px)), calc(var(--badge-y,-50%) + var(--badge-offset-y,0px)));position:absolute}:host([placement=top-right]) .badge{--badge-x:50%;--badge-y:-50%;top:0;right:0}:host([placement=top-left]) .badge{--badge-x:-50%;--badge-y:-50%;top:0;left:0}:host([placement=bottom-right]) .badge{--badge-x:50%;--badge-y:50%;bottom:0;right:0}:host([placement=bottom-left]) .badge{--badge-x:-50%;--badge-y:50%;bottom:0;left:0}.badge-dot{min-width:8px;height:8px;padding:0;font-size:0}.badge-fixed.badge-dot{--badge-x:40%;--badge-y:-40%}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/badge/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-block;\n}\n\n.badge-wrapper {\n display: inline-flex;\n}\n\n.badge-wrapper-fixed {\n position: relative;\n}\n\n.badge {\n z-index: 1;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n min-width: 18px;\n height: 18px;\n padding: 0 4px;\n border: 1px solid var(--wui-color-page, #fff);\n border-radius: calc(infinity * 1px);\n\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n color: var(--wui-color-on-accent, #fff);\n white-space: nowrap;\n\n background-color: var(--wui-color-danger, #dc2626);\n}\n\n.badge-fixed {\n position: absolute;\n transform: translate(\n calc(var(--badge-x, 50%) + var(--badge-offset-x, 0px)),\n calc(var(--badge-y, -50%) + var(--badge-offset-y, 0px))\n );\n}\n\n/* ===== Placement ===== */\n\n:host([placement='top-right']) .badge {\n --badge-x: 50%;\n --badge-y: -50%;\n top: 0;\n right: 0;\n}\n\n:host([placement='top-left']) .badge {\n --badge-x: -50%;\n --badge-y: -50%;\n top: 0;\n left: 0;\n}\n\n:host([placement='bottom-right']) .badge {\n --badge-x: 50%;\n --badge-y: 50%;\n right: 0;\n bottom: 0;\n}\n\n:host([placement='bottom-left']) .badge {\n --badge-x: -50%;\n --badge-y: 50%;\n bottom: 0;\n left: 0;\n}\n\n/* ===== Dot ===== */\n\n.badge-dot {\n min-width: 8px;\n height: 8px;\n padding: 0;\n font-size: 0;\n}\n\n/* ===== Fixed mode (has slotted content) ===== */\n\n.badge-fixed.badge-dot {\n --badge-x: 40%;\n --badge-y: -40%;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/badge/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-block;\n}\n\n.badge-wrapper {\n display: inline-flex;\n}\n\n.badge-wrapper-fixed {\n position: relative;\n}\n\n.badge {\n z-index: 1;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n min-width: 18px;\n height: 18px;\n padding: 0 4px;\n border: 1px solid var(--wui-color-page, #fff);\n border-radius: calc(infinity * 1px);\n\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n color: var(--wui-color-on-accent, #fff);\n white-space: nowrap;\n\n background-color: var(--wui-color-danger, #dc2626);\n}\n\n.badge-fixed {\n position: absolute;\n transform: translate(\n calc(var(--badge-x, 50%) + var(--badge-offset-x, 0px)),\n calc(var(--badge-y, -50%) + var(--badge-offset-y, 0px))\n );\n}\n\n/* ===== Placement ===== */\n\n:host([placement='top-right']) .badge {\n --badge-x: 50%;\n --badge-y: -50%;\n top: 0;\n right: 0;\n}\n\n:host([placement='top-left']) .badge {\n --badge-x: -50%;\n --badge-y: -50%;\n top: 0;\n left: 0;\n}\n\n:host([placement='bottom-right']) .badge {\n --badge-x: 50%;\n --badge-y: 50%;\n right: 0;\n bottom: 0;\n}\n\n:host([placement='bottom-left']) .badge {\n --badge-x: -50%;\n --badge-y: 50%;\n bottom: 0;\n left: 0;\n}\n\n/* ===== Dot ===== */\n\n.badge-dot {\n min-width: 8px;\n height: 8px;\n padding: 0;\n font-size: 0;\n}\n\n/* ===== Fixed mode (has slotted content) ===== */\n\n.badge-fixed.badge-dot {\n --badge-x: 40%;\n --badge-y: -40%;\n}\n"],"mappings":""}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/checkbox-group/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{flex-direction:column;gap:8px;display:inline-flex}.wui-checkbox-group{gap:inherit;flex-direction:column;display:flex}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;display:inline-flex}.wui-checkbox-group{gap:inherit;flex-direction:column;display:flex}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.wui-checkbox-group {\n display: flex;\n flex-direction: column;\n gap: inherit;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.wui-checkbox-group {\n display: flex;\n flex-direction: column;\n gap: inherit;\n}\n"],"mappings":""}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/context-menu/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.context-menu-anchor{display:contents}.context-menu{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);background-color:var(--wui-color-surface-overlay,#f5f5f5d9);border-radius:20px;min-width:200px;max-width:90vw;max-height:80vh;padding:4px;position:fixed;overflow-y:auto}.context-menu:not(.is-open){display:none}.context-submenu{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);background-color:var(--wui-color-surface-overlay,#f5f5f5d9);border-radius:20px;min-width:200px;max-width:90vw;max-height:80vh;padding:4px;position:fixed;overflow-y:auto}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.context-menu-anchor{display:contents}.context-menu{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);-webkit-user-select:none;user-select:none;background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;min-width:200px;max-width:90vw;max-height:80vh;padding:4px;position:fixed;overflow-y:auto}.context-menu:not(.is-open){display:none}.context-submenu{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);-webkit-user-select:none;user-select:none;background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;min-width:200px;max-width:90vw;max-height:80vh;padding:4px;position:fixed;overflow-y:auto}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/context-menu/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.context-menu-anchor {\n display: contents;\n}\n\n.context-menu {\n --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n position: fixed;\n\n overflow-y: auto;\n\n min-width: 200px;\n max-width: 90vw;\n max-height: 80vh;\n padding: 4px;\n border-radius: 20px;\n\n background-color: var(--wui-color-surface-overlay, rgb(245 245 245 / 0.85));\n}\n\n.context-menu:not(.is-open) {\n display: none;\n}\n\n.context-submenu {\n --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n position: fixed;\n\n overflow-y: auto;\n\n min-width: 200px;\n max-width: 90vw;\n max-height: 80vh;\n padding: 4px;\n border-radius: 20px;\n\n background-color: var(--wui-color-surface-overlay, rgb(245 245 245 / 0.85));\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/context-menu/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.context-menu-anchor {\n display: contents;\n}\n\n.context-menu {\n --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n user-select: none;\n\n position: fixed;\n\n overflow-y: auto;\n\n min-width: 200px;\n max-width: 90vw;\n max-height: 80vh;\n padding: 4px;\n border-radius: 20px;\n\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n.context-menu:not(.is-open) {\n display: none;\n}\n\n.context-submenu {\n --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n user-select: none;\n\n position: fixed;\n\n overflow-y: auto;\n\n min-width: 200px;\n max-width: 90vw;\n max-height: 80vh;\n padding: 4px;\n border-radius: 20px;\n\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n"],"mappings":""}
@@ -20,7 +20,7 @@ var p = class extends s {
20
20
  this.styles = [l(t), l(o)];
21
21
  }
22
22
  get dialog() {
23
- return this.shadowRoot?.querySelector("dialog");
23
+ return this.shadowRoot?.querySelector("dialog") ?? null;
24
24
  }
25
25
  updated(e) {
26
26
  super.updated(e), this.isConnected && (e.has("open") && (this.emitOpenChange(), this.open ? this._startOpening() : this._startClosing()), (e.has("open") || e.has("lockScroll")) && this._syncScrollLock());
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\nimport { booleanWithFalseString } from '@/shared/property-converters/boolean-with-false-string'\nimport { lockScroll, unlockScroll } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-dialog')\nexport class WebUiDialog extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ reflect: true, attribute: 'lock-scroll', converter: booleanWithFalseString }) lockScroll = true\n @property({ reflect: true, attribute: 'overlay-closable', converter: booleanWithFalseString }) overlayClosable = true\n\n @state() private _hasBody = false\n\n private _hasScrollLock = false\n private _closeFallbackTimer?: ReturnType<typeof setTimeout>\n private _openFrame?: number\n private _isClosing = false\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('open')) {\n this.emitOpenChange()\n if (this.open) this._startOpening()\n else this._startClosing()\n }\n if (props.has('open') || props.has('lockScroll')) this._syncScrollLock()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._syncScrollLock(false)\n }\n\n /** 以模态方式打开对话框(命令式) */\n showModal() {\n if (this.open) return\n this.open = true\n }\n\n close() {\n this.open = false\n }\n\n private handleCancel(e: Event) {\n // 保留 top layer 直到视觉退场完成,避免原生关闭跳过退出动画。\n e.preventDefault()\n this.close()\n }\n\n private handleBackdropClick(e: MouseEvent) {\n if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n if (!this.overlayClosable) return\n this.close()\n }\n\n private emitOpenChange() {\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open: this.open },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private _startOpening() {\n const dialog = this.dialog\n if (!dialog) return\n\n this._isClosing = false\n this._clearCloseFallback()\n dialog.classList.remove('is-closing')\n if (!dialog.open) dialog.showModal?.()\n\n this._cancelOpenFrame()\n this._openFrame = requestAnimationFrame(() => {\n this._openFrame = undefined\n if (!this.isConnected || !this.open || !dialog.open) return\n dialog.classList.add('is-visible')\n })\n }\n\n private _startClosing() {\n const dialog = this.dialog\n if (!dialog?.open) return\n\n this._cancelOpenFrame()\n this._isClosing = true\n if (!dialog.classList.contains('is-visible')) {\n this._finishClosing()\n return\n }\n\n dialog.classList.add('is-closing')\n dialog.classList.remove('is-visible')\n this._clearCloseFallback()\n this._closeFallbackTimer = setTimeout(() => this._finishClosing(), getTransitionDuration(dialog) + 80)\n }\n\n private _finishClosing() {\n const dialog = this.dialog\n if (!dialog || !this._isClosing || this.open) return\n\n this._clearCloseFallback()\n this._isClosing = false\n dialog.classList.remove('is-closing', 'is-visible')\n if (dialog.open) dialog.close?.()\n }\n\n private _clearCloseFallback() {\n if (this._closeFallbackTimer === undefined) return\n clearTimeout(this._closeFallbackTimer)\n this._closeFallbackTimer = undefined\n }\n\n private _cancelOpenFrame() {\n if (this._openFrame === undefined) return\n cancelAnimationFrame(this._openFrame)\n this._openFrame = undefined\n }\n\n private _onTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.dialog || event.propertyName !== 'transform') return\n this._finishClosing()\n }\n\n private _onNativeClose = () => {\n if (!this.open) return\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._isClosing = false\n this.dialog?.classList.remove('is-closing', 'is-visible')\n this.open = false\n }\n\n private _syncScrollLock(isOpen = this.open) {\n const shouldLock = isOpen && this.lockScroll\n if (shouldLock === this._hasScrollLock) return\n\n if (shouldLock) lockScroll()\n else unlockScroll()\n this._hasScrollLock = shouldLock\n }\n\n private _onBodySlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n this._hasBody = e.target.assignedElements().length > 0\n }\n\n override render() {\n return html`\n <dialog\n @cancel=${this.handleCancel}\n @close=${this._onNativeClose}\n @click=${this.handleBackdropClick}\n @transitionend=${this._onTransitionEnd}\n >\n <div class=\"wui-dialog-body wui-glass\">\n ${this._hasBody\n ? html`<slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>`\n : html`\n <slot name=\"body\" @slotchange=${this._onBodySlotChange} hidden></slot>\n <div class=\"title\"><slot name=\"title\"></slot></div>\n <div class=\"desc\"><slot></slot></div>\n <div class=\"wui-dialog-footer\"><slot name=\"footer\"></slot></div>\n `}\n </div>\n </dialog>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dialog': WebUiDialog\n }\n}\n"],"mappings":";;;;;;;;;;AAYO,IAAM,IAAN,cAA0B,EAAW;;EAkIX,aA/HoB,KAAA,OAAA,IACoD,KAAA,aAAA,IACU,KAAA,kBAAA,IAErF,KAAA,WAAA,IAEH,KAAA,iBAAA,IAGJ,KAAA,aAAA,IAiHO,KAAA,oBAAA,MAA2B;GACjD,EAAM,WAAW,KAAK,UAAU,EAAM,iBAAiB,eAC3D,KAAK,eAAe;EACtB,GAE+B,KAAA,uBAAA;GACxB,AAKL,KAAK,UAJL,KAAK,iBAAiB,GACtB,KAAK,oBAAoB,GACzB,KAAK,aAAa,IAClB,KAAK,QAAQ,UAAU,OAAO,cAAc,YAAY,GAC5C;EACd;;;EAxIyB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAa5D,IAAY,SAAS;EACnB,OAAO,KAAK,YAAY,cAAc,QAAQ;CAChD;CAEA,QAA2B,GAAuB;EAChD,MAAM,QAAQ,CAAK,GACd,KAAK,gBAEN,EAAM,IAAI,MAAM,MAClB,KAAK,eAAe,GAChB,KAAK,OAAM,KAAK,cAAc,IAC7B,KAAK,cAAc,KAEtB,EAAM,IAAI,MAAM,KAAK,EAAM,IAAI,YAAY,MAAG,KAAK,gBAAgB;CACzE;CAEA,uBAAgC;EAI9B,AAHA,MAAM,qBAAqB,GAC3B,KAAK,iBAAiB,GACtB,KAAK,oBAAoB,GACzB,KAAK,gBAAgB,EAAK;CAC5B;CAGA,YAAY;EACN,AACJ,KAAK,SAAO;CACd;CAEA,QAAQ;EACN,KAAK,OAAO;CACd;CAEA,aAAqB,GAAU;EAG7B,AADA,EAAE,eAAe,GACjB,KAAK,MAAM;CACb;CAEA,oBAA4B,GAAe;EACrC,EAAE,WAAY,EAAE,iBACf,KAAK,mBACV,KAAK,MAAM;CACb;CAEA,iBAAyB;EACvB,KAAK,cACH,IAAI,YAAY,eAAe;GAC7B,QAAQ,EAAE,MAAM,KAAK,KAAK;GAC1B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB;EACtB,IAAM,IAAS,KAAK;EACf,MAEL,KAAK,aAAa,IAClB,KAAK,oBAAoB,GACzB,EAAO,UAAU,OAAO,YAAY,GAC/B,EAAO,QAAM,EAAO,YAAY,GAErC,KAAK,iBAAiB,GACtB,KAAK,aAAa,4BAA4B;GAC5C,KAAK,aAAa,KAAA,GACd,GAAC,KAAK,eAAe,CAAC,KAAK,QAAQ,CAAC,EAAO,SAC/C,EAAO,UAAU,IAAI,YAAY;EACnC,CAAC;CACH;CAEA,gBAAwB;EACtB,IAAM,IAAS,KAAK;EACf,OAAQ,MAIb;OAFA,KAAK,iBAAiB,GACtB,KAAK,aAAa,IACd,CAAC,EAAO,UAAU,SAAS,YAAY,GAAG;IAC5C,KAAK,eAAe;IACpB;GACF;GAKA,AAHA,EAAO,UAAU,IAAI,YAAY,GACjC,EAAO,UAAU,OAAO,YAAY,GACpC,KAAK,oBAAoB,GACzB,KAAK,sBAAsB,iBAAiB,KAAK,eAAe,GAAG,EAAsB,CAAM,IAAI,EAAE;EALrG;CAMF;CAEA,iBAAyB;EACvB,IAAM,IAAS,KAAK;EAChB,CAAC,KAAU,CAAC,KAAK,cAAc,KAAK,SAExC,KAAK,oBAAoB,GACzB,KAAK,aAAa,IAClB,EAAO,UAAU,OAAO,cAAc,YAAY,GAC9C,EAAO,QAAM,EAAO,QAAQ;CAClC;CAEA,sBAA8B;EACxB,KAAK,wBAAwB,KAAA,MACjC,aAAa,KAAK,mBAAmB,GACrC,KAAK,sBAAsB,KAAA;CAC7B;CAEA,mBAA2B;EACrB,KAAK,eAAe,KAAA,MACxB,qBAAqB,KAAK,UAAU,GACpC,KAAK,aAAa,KAAA;CACpB;CAgBA,gBAAwB,IAAS,KAAK,MAAM;EAC1C,IAAM,IAAa,KAAU,KAAK;EAC9B,MAAe,KAAK,mBAEpB,IAAY,EAAW,IACtB,EAAa,GAClB,KAAK,iBAAiB;CACxB;CAEA,kBAA0B,GAAU;EAC5B,EAAE,kBAAkB,oBAC1B,KAAK,WAAW,EAAE,OAAO,iBAAiB,CAAC,CAAC,SAAS;CACvD;CAEA,SAAkB;EAChB,OAAO,CAAI;;kBAEG,KAAK,aAAa;iBACnB,KAAK,eAAe;iBACpB,KAAK,oBAAoB;yBACjB,KAAK,iBAAiB;;;YAGnC,KAAK,WACH,CAAI,iCAAiC,KAAK,kBAAkB,YAC5D,CAAI;gDAC8B,KAAK,kBAAkB;;;;gBAIvD;;;;CAId;AAKF;AA/KG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,WAAW;CAAe,WAAW;AAAuB,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACvF,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,WAAW;AAAuB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAE5F,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GARR,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\nimport { booleanWithFalseString } from '@/shared/property-converters/boolean-with-false-string'\nimport { lockScroll, unlockScroll } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-dialog')\nexport class WebUiDialog extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ reflect: true, attribute: 'lock-scroll', converter: booleanWithFalseString }) lockScroll = true\n @property({ reflect: true, attribute: 'overlay-closable', converter: booleanWithFalseString }) overlayClosable = true\n\n @state() private _hasBody = false\n\n private _hasScrollLock = false\n private _closeFallbackTimer?: ReturnType<typeof setTimeout>\n private _openFrame?: number\n private _isClosing = false\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') ?? null\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('open')) {\n this.emitOpenChange()\n if (this.open) this._startOpening()\n else this._startClosing()\n }\n if (props.has('open') || props.has('lockScroll')) this._syncScrollLock()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._syncScrollLock(false)\n }\n\n /** 以模态方式打开对话框(命令式) */\n showModal() {\n if (this.open) return\n this.open = true\n }\n\n close() {\n this.open = false\n }\n\n private handleCancel(e: Event) {\n // 保留 top layer 直到视觉退场完成,避免原生关闭跳过退出动画。\n e.preventDefault()\n this.close()\n }\n\n private handleBackdropClick(e: MouseEvent) {\n if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n if (!this.overlayClosable) return\n this.close()\n }\n\n private emitOpenChange() {\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open: this.open },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private _startOpening() {\n const dialog = this.dialog\n if (!dialog) return\n\n this._isClosing = false\n this._clearCloseFallback()\n dialog.classList.remove('is-closing')\n if (!dialog.open) dialog.showModal?.()\n\n this._cancelOpenFrame()\n this._openFrame = requestAnimationFrame(() => {\n this._openFrame = undefined\n if (!this.isConnected || !this.open || !dialog.open) return\n dialog.classList.add('is-visible')\n })\n }\n\n private _startClosing() {\n const dialog = this.dialog\n if (!dialog?.open) return\n\n this._cancelOpenFrame()\n this._isClosing = true\n if (!dialog.classList.contains('is-visible')) {\n this._finishClosing()\n return\n }\n\n dialog.classList.add('is-closing')\n dialog.classList.remove('is-visible')\n this._clearCloseFallback()\n this._closeFallbackTimer = setTimeout(() => this._finishClosing(), getTransitionDuration(dialog) + 80)\n }\n\n private _finishClosing() {\n const dialog = this.dialog\n if (!dialog || !this._isClosing || this.open) return\n\n this._clearCloseFallback()\n this._isClosing = false\n dialog.classList.remove('is-closing', 'is-visible')\n if (dialog.open) dialog.close?.()\n }\n\n private _clearCloseFallback() {\n if (this._closeFallbackTimer === undefined) return\n clearTimeout(this._closeFallbackTimer)\n this._closeFallbackTimer = undefined\n }\n\n private _cancelOpenFrame() {\n if (this._openFrame === undefined) return\n cancelAnimationFrame(this._openFrame)\n this._openFrame = undefined\n }\n\n private _onTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.dialog || event.propertyName !== 'transform') return\n this._finishClosing()\n }\n\n private _onNativeClose = () => {\n if (!this.open) return\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._isClosing = false\n this.dialog?.classList.remove('is-closing', 'is-visible')\n this.open = false\n }\n\n private _syncScrollLock(isOpen = this.open) {\n const shouldLock = isOpen && this.lockScroll\n if (shouldLock === this._hasScrollLock) return\n\n if (shouldLock) lockScroll()\n else unlockScroll()\n this._hasScrollLock = shouldLock\n }\n\n private _onBodySlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n this._hasBody = e.target.assignedElements().length > 0\n }\n\n override render() {\n return html`\n <dialog\n @cancel=${this.handleCancel}\n @close=${this._onNativeClose}\n @click=${this.handleBackdropClick}\n @transitionend=${this._onTransitionEnd}\n >\n <div class=\"wui-dialog-body wui-glass\">\n ${this._hasBody\n ? html`<slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>`\n : html`\n <slot name=\"body\" @slotchange=${this._onBodySlotChange} hidden></slot>\n <div class=\"title\"><slot name=\"title\"></slot></div>\n <div class=\"desc\"><slot></slot></div>\n <div class=\"wui-dialog-footer\"><slot name=\"footer\"></slot></div>\n `}\n </div>\n </dialog>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dialog': WebUiDialog\n }\n}\n"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/dialog/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-scale-enter,.97));box-sizing:border-box;max-width:min(90vw, var(--wui-dialog-max-width,360px));max-height:90vh;color:var(--wui-color-text,#1b1b1b);opacity:0;transition:opacity var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;padding:0;font-family:inherit;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001a));transition:opacity var(--wui-duration-overlay-enter,.18s) ease}dialog[open].is-visible{opacity:1;transform:scale(1)}dialog.is-closing{pointer-events:none;transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:.12s;transform:none}}.wui-dialog-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f5f5f5d9);border-radius:20px;padding:24px}.title{color:var(--wui-color-text,#1b1b1b);margin:0 0 8px;padding:0;font-size:18px;font-weight:600;line-height:1.4}.desc{color:var(--wui-color-text-muted,#6a6a6a);margin:0 0 20px;padding:0;font-size:14px;line-height:1.5}.wui-dialog-footer{flex-direction:column;gap:10px;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{flex-direction:row;justify-content:center;gap:10px}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button:not([full])){width:auto}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button[full]){flex:1;min-width:0}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-scale-enter,.97));box-sizing:border-box;max-width:min(90vw, var(--wui-dialog-max-width,360px));max-height:90vh;color:var(--wui-color-text,#1b1b1b);opacity:0;transition:opacity var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;padding:0;font-family:inherit;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001a));transition:opacity var(--wui-duration-overlay-enter,.18s) ease}dialog[open].is-visible{opacity:1;transform:scale(1)}dialog.is-closing{pointer-events:none;transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:.12s;transform:none}}.wui-dialog-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;padding:24px}.title{color:var(--wui-color-text,#1b1b1b);margin:0 0 8px;padding:0;font-size:18px;font-weight:600;line-height:1.4}.desc{color:var(--wui-color-text-muted,#6a6a6a);margin:0 0 20px;padding:0;font-size:14px;line-height:1.5}.wui-dialog-footer{flex-direction:column;gap:10px;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{flex-direction:row;justify-content:center;gap:10px}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button:not([full])){width:auto}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button[full]){flex:1;min-width:0}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\ndialog {\n transform: scale(var(--wui-scale-enter, 0.97));\n\n overflow: visible;\n\n box-sizing: border-box;\n max-width: min(90vw, var(--wui-dialog-max-width, 360px));\n max-height: 90vh;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 0;\n background: transparent;\n\n transition:\n opacity var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.1)));\n transition: opacity var(--wui-duration-overlay-enter, 180ms) ease;\n }\n}\n\ndialog[open].is-visible {\n transform: scale(1);\n opacity: 1;\n}\n\ndialog.is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog.is-closing::backdrop {\n transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transform: none;\n transition-duration: 120ms;\n }\n}\n\n/* ===== 玻璃卡片主体(样式由 glass.css 提供) ===== */\n\n.wui-dialog-body {\n --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n padding: 24px;\n border-radius: 20px;\n background-color: var(--wui-color-surface-overlay, rgb(245 245 245 / 0.85));\n}\n\n/* ===== 标题 ===== */\n\n.title {\n margin: 0 0 8px;\n padding: 0;\n\n font-size: 18px;\n font-weight: 600;\n line-height: 1.4;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 描述 ===== */\n\n.desc {\n margin: 0 0 20px;\n padding: 0;\n\n font-size: 14px;\n line-height: 1.5;\n color: var(--wui-color-text-muted, #6a6a6a);\n}\n\n/* ===== 按钮区域 ===== */\n\n.wui-dialog-footer {\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n /* ===== 按钮全宽(默认垂直排列) ===== */\n\n & ::slotted(web-ui-button) {\n display: flex;\n width: 100%;\n }\n}\n\n/* ===== horizontal 模式 ===== */\n\n:host([horizontal]) .wui-dialog-footer {\n flex-direction: row;\n gap: 10px;\n justify-content: center;\n\n /* 非 full 按钮:居中,不拉伸 */\n\n & ::slotted(web-ui-button:not([full])) {\n width: auto;\n }\n\n /* full 按钮:平分剩余空间 */\n\n & ::slotted(web-ui-button[full]) {\n flex: 1;\n min-width: 0;\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\ndialog {\n transform: scale(var(--wui-scale-enter, 0.97));\n\n overflow: visible;\n\n box-sizing: border-box;\n max-width: min(90vw, var(--wui-dialog-max-width, 360px));\n max-height: 90vh;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 0;\n background: transparent;\n\n transition:\n opacity var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.1)));\n transition: opacity var(--wui-duration-overlay-enter, 180ms) ease;\n }\n}\n\ndialog[open].is-visible {\n transform: scale(1);\n opacity: 1;\n}\n\ndialog.is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog.is-closing::backdrop {\n transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transform: none;\n transition-duration: 120ms;\n }\n}\n\n/* ===== 玻璃卡片主体(样式由 glass.css 提供) ===== */\n\n.wui-dialog-body {\n --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n padding: 24px;\n border-radius: 20px;\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n/* ===== 标题 ===== */\n\n.title {\n margin: 0 0 8px;\n padding: 0;\n\n font-size: 18px;\n font-weight: 600;\n line-height: 1.4;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 描述 ===== */\n\n.desc {\n margin: 0 0 20px;\n padding: 0;\n\n font-size: 14px;\n line-height: 1.5;\n color: var(--wui-color-text-muted, #6a6a6a);\n}\n\n/* ===== 按钮区域 ===== */\n\n.wui-dialog-footer {\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n /* ===== 按钮全宽(默认垂直排列) ===== */\n\n & ::slotted(web-ui-button) {\n display: flex;\n width: 100%;\n }\n}\n\n/* ===== horizontal 模式 ===== */\n\n:host([horizontal]) .wui-dialog-footer {\n flex-direction: row;\n gap: 10px;\n justify-content: center;\n\n /* 非 full 按钮:居中,不拉伸 */\n\n & ::slotted(web-ui-button:not([full])) {\n width: auto;\n }\n\n /* full 按钮:平分剩余空间 */\n\n & ::slotted(web-ui-button[full]) {\n flex: 1;\n min-width: 0;\n }\n}\n"],"mappings":""}
@@ -31,7 +31,7 @@ var h = [
31
31
  this._placement = r(e, h, "right"), this.requestUpdate("placement", t);
32
32
  }
33
33
  get dialog() {
34
- return this.shadowRoot?.querySelector("dialog");
34
+ return this.shadowRoot?.querySelector("dialog") ?? null;
35
35
  }
36
36
  connectedCallback() {
37
37
  super.connectedCallback(), this._hasHeaderSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "header"), this._hasFooterSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "footer");
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideX } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\nimport { booleanWithFalseString } from '@/shared/property-converters/boolean-with-false-string'\nimport { lockScroll, unlockScroll } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['right', 'left', 'top', 'bottom'] as const\n\nexport type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number]\n\n@customElement('web-ui-drawer')\nexport class WebUiDrawer extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ reflect: true, attribute: 'lock-scroll', converter: booleanWithFalseString }) lockScroll = true\n @property({ reflect: true, attribute: 'overlay-closable', converter: booleanWithFalseString }) overlayClosable = true\n @property({ reflect: true })\n get placement(): DrawerPlacement {\n return this._placement\n }\n set placement(v: string) {\n const old = this._placement\n this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'right')\n this.requestUpdate('placement', old)\n }\n private _placement: DrawerPlacement = 'right'\n\n /** 标题文字(未传 header slot 时显示默认 header) */\n @property({ type: String }) heading = ''\n\n @property({ type: Boolean, reflect: true }) closable = false\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null\n }\n\n private _closeFallbackTimer: ReturnType<typeof setTimeout> | null = null\n private _openFrame: number | null = null\n private _isClosing = false\n private _hasHeaderSlot = false\n private _hasFooterSlot = false\n private _hasScrollLock = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._hasHeaderSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'header')\n this._hasFooterSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'footer')\n }\n\n override firstUpdated() {\n this._checkSlotContent('footer')\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._syncScrollLock(false)\n }\n\n private _checkSlotContent(name: string) {\n const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null\n if (!slot) return\n const has = slot.assignedNodes().length > 0\n if (name === 'footer' && has !== this._hasFooterSlot) {\n this._hasFooterSlot = has\n this.requestUpdate()\n }\n }\n\n private handleHeaderSlotChange(e: Event) {\n const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n if (has !== this._hasHeaderSlot) {\n this._hasHeaderSlot = has\n this.requestUpdate()\n }\n }\n\n private handleFooterSlotChange(e: Event) {\n const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n if (has !== this._hasFooterSlot) {\n this._hasFooterSlot = has\n this.requestUpdate()\n }\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('open')) {\n this.emitOpenChange()\n if (this.open) this._startOpening()\n else this._startClosing()\n }\n if (props.has('open') || props.has('lockScroll')) this._syncScrollLock()\n }\n\n private _startOpening() {\n const dialog = this.dialog\n if (!dialog) return\n\n this._isClosing = false\n this._clearCloseFallback()\n dialog.classList.remove('is-closing')\n if (!dialog.open) dialog.showModal?.()\n\n this._cancelOpenFrame()\n this._openFrame = requestAnimationFrame(() => {\n this._openFrame = null\n if (!this.isConnected || !this.open || !dialog.open) return\n dialog.classList.add('is-visible')\n })\n }\n\n private _startClosing() {\n const dialog = this.dialog\n if (!dialog?.open) return\n\n this._cancelOpenFrame()\n this._isClosing = true\n\n // 还未进入可见帧时没有可过渡的视觉状态,直接释放原生 dialog。\n if (!dialog.classList.contains('is-visible')) {\n this._finishClosing()\n return\n }\n\n dialog.classList.add('is-closing')\n dialog.classList.remove('is-visible')\n this._clearCloseFallback()\n this._closeFallbackTimer = setTimeout(() => this._finishClosing(), getTransitionDuration(dialog) + 80)\n }\n\n private _finishClosing() {\n const dialog = this.dialog\n if (!dialog || !this._isClosing || this.open) return\n\n this._clearCloseFallback()\n this._isClosing = false\n dialog.classList.remove('is-closing', 'is-visible')\n if (dialog.open) dialog.close?.()\n }\n\n private _clearCloseFallback() {\n if (!this._closeFallbackTimer) return\n clearTimeout(this._closeFallbackTimer)\n this._closeFallbackTimer = null\n }\n\n private _cancelOpenFrame() {\n if (this._openFrame === null) return\n cancelAnimationFrame(this._openFrame)\n this._openFrame = null\n }\n\n private handleTransitionEnd(e: TransitionEvent) {\n if (e.target !== this.dialog || e.propertyName !== 'transform') return\n this._finishClosing()\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Escape') return\n e.preventDefault()\n this.close()\n }\n\n /** 打开抽屉(命令式) */\n show() {\n if (this.open) return\n this.open = true\n }\n\n /** 关闭抽屉(带动画) */\n close() {\n if (!this.open) return\n this.open = false\n }\n\n private handleCancel(e: Event) {\n // 保留 top layer 直到 CSS 过渡结束,避免原生关闭跳过退出动画。\n e.preventDefault()\n this.close()\n }\n\n private handleNativeClose() {\n if (!this.open) return\n\n // 原生关闭可绕过 cancel;同步受控状态,避免 show() 误判为已打开。\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._isClosing = false\n this.dialog?.classList.remove('is-closing', 'is-visible')\n this.open = false\n }\n\n private handleBackdropClick(e: MouseEvent) {\n if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n if (!this.overlayClosable) return\n this.close()\n }\n\n private emitOpenChange() {\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open: this.open },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private _syncScrollLock(isOpen = this.open) {\n const shouldLock = isOpen && this.lockScroll\n if (shouldLock === this._hasScrollLock) return\n\n if (shouldLock) lockScroll()\n else unlockScroll()\n this._hasScrollLock = shouldLock\n }\n\n override render() {\n const showHeader = this._hasHeaderSlot || !!this.heading\n\n return html`\n <dialog\n @cancel=${this.handleCancel}\n @close=${this.handleNativeClose}\n @click=${this.handleBackdropClick}\n @keydown=${this.handleKeydown}\n @transitionend=${this.handleTransitionEnd}\n >\n <div class=\"wui-drawer-body wui-glass\">\n ${showHeader\n ? html`\n <div class=\"wui-drawer-header\">\n <slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}>\n ${this.heading ? html`<span class=\"wui-drawer-heading\">${this.heading}</span>` : nothing}\n </slot>\n </div>\n `\n : nothing}\n <div class=\"wui-drawer-content\">\n <slot></slot>\n </div>\n <div class=\"wui-drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n <slot name=\"footer\" @slotchange=${this.handleFooterSlotChange}></slot>\n </div>\n </div>\n ${this.closable\n ? html`\n <web-ui-button class=\"wui-drawer-close\" @click=${this.close} aria-label=\"关闭\" icon>\n <web-ui-icon .icon=${lucideX} size=\"16\"></web-ui-icon>\n </web-ui-button>\n `\n : nothing}\n </dialog>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-drawer': WebUiDrawer\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideX } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\nimport { booleanWithFalseString } from '@/shared/property-converters/boolean-with-false-string'\nimport { lockScroll, unlockScroll } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['right', 'left', 'top', 'bottom'] as const\n\nexport type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number]\n\n@customElement('web-ui-drawer')\nexport class WebUiDrawer extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ reflect: true, attribute: 'lock-scroll', converter: booleanWithFalseString }) lockScroll = true\n @property({ reflect: true, attribute: 'overlay-closable', converter: booleanWithFalseString }) overlayClosable = true\n @property({ reflect: true })\n get placement(): DrawerPlacement {\n return this._placement\n }\n set placement(v: string) {\n const old = this._placement\n this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'right')\n this.requestUpdate('placement', old)\n }\n private _placement: DrawerPlacement = 'right'\n\n /** 标题文字(未传 header slot 时显示默认 header) */\n @property({ type: String }) heading = ''\n\n @property({ type: Boolean, reflect: true }) closable = false\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') ?? null\n }\n\n private _closeFallbackTimer: ReturnType<typeof setTimeout> | null = null\n private _openFrame: number | null = null\n private _isClosing = false\n private _hasHeaderSlot = false\n private _hasFooterSlot = false\n private _hasScrollLock = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._hasHeaderSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'header')\n this._hasFooterSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'footer')\n }\n\n override firstUpdated() {\n this._checkSlotContent('footer')\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._syncScrollLock(false)\n }\n\n private _checkSlotContent(name: string) {\n const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null\n if (!slot) return\n const has = slot.assignedNodes().length > 0\n if (name === 'footer' && has !== this._hasFooterSlot) {\n this._hasFooterSlot = has\n this.requestUpdate()\n }\n }\n\n private handleHeaderSlotChange(e: Event) {\n const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n if (has !== this._hasHeaderSlot) {\n this._hasHeaderSlot = has\n this.requestUpdate()\n }\n }\n\n private handleFooterSlotChange(e: Event) {\n const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n if (has !== this._hasFooterSlot) {\n this._hasFooterSlot = has\n this.requestUpdate()\n }\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('open')) {\n this.emitOpenChange()\n if (this.open) this._startOpening()\n else this._startClosing()\n }\n if (props.has('open') || props.has('lockScroll')) this._syncScrollLock()\n }\n\n private _startOpening() {\n const dialog = this.dialog\n if (!dialog) return\n\n this._isClosing = false\n this._clearCloseFallback()\n dialog.classList.remove('is-closing')\n if (!dialog.open) dialog.showModal?.()\n\n this._cancelOpenFrame()\n this._openFrame = requestAnimationFrame(() => {\n this._openFrame = null\n if (!this.isConnected || !this.open || !dialog.open) return\n dialog.classList.add('is-visible')\n })\n }\n\n private _startClosing() {\n const dialog = this.dialog\n if (!dialog?.open) return\n\n this._cancelOpenFrame()\n this._isClosing = true\n\n // 还未进入可见帧时没有可过渡的视觉状态,直接释放原生 dialog。\n if (!dialog.classList.contains('is-visible')) {\n this._finishClosing()\n return\n }\n\n dialog.classList.add('is-closing')\n dialog.classList.remove('is-visible')\n this._clearCloseFallback()\n this._closeFallbackTimer = setTimeout(() => this._finishClosing(), getTransitionDuration(dialog) + 80)\n }\n\n private _finishClosing() {\n const dialog = this.dialog\n if (!dialog || !this._isClosing || this.open) return\n\n this._clearCloseFallback()\n this._isClosing = false\n dialog.classList.remove('is-closing', 'is-visible')\n if (dialog.open) dialog.close?.()\n }\n\n private _clearCloseFallback() {\n if (!this._closeFallbackTimer) return\n clearTimeout(this._closeFallbackTimer)\n this._closeFallbackTimer = null\n }\n\n private _cancelOpenFrame() {\n if (this._openFrame === null) return\n cancelAnimationFrame(this._openFrame)\n this._openFrame = null\n }\n\n private handleTransitionEnd(e: TransitionEvent) {\n if (e.target !== this.dialog || e.propertyName !== 'transform') return\n this._finishClosing()\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Escape') return\n e.preventDefault()\n this.close()\n }\n\n /** 打开抽屉(命令式) */\n show() {\n if (this.open) return\n this.open = true\n }\n\n /** 关闭抽屉(带动画) */\n close() {\n if (!this.open) return\n this.open = false\n }\n\n private handleCancel(e: Event) {\n // 保留 top layer 直到 CSS 过渡结束,避免原生关闭跳过退出动画。\n e.preventDefault()\n this.close()\n }\n\n private handleNativeClose() {\n if (!this.open) return\n\n // 原生关闭可绕过 cancel;同步受控状态,避免 show() 误判为已打开。\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._isClosing = false\n this.dialog?.classList.remove('is-closing', 'is-visible')\n this.open = false\n }\n\n private handleBackdropClick(e: MouseEvent) {\n if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n if (!this.overlayClosable) return\n this.close()\n }\n\n private emitOpenChange() {\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open: this.open },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private _syncScrollLock(isOpen = this.open) {\n const shouldLock = isOpen && this.lockScroll\n if (shouldLock === this._hasScrollLock) return\n\n if (shouldLock) lockScroll()\n else unlockScroll()\n this._hasScrollLock = shouldLock\n }\n\n override render() {\n const showHeader = this._hasHeaderSlot || !!this.heading\n\n return html`\n <dialog\n @cancel=${this.handleCancel}\n @close=${this.handleNativeClose}\n @click=${this.handleBackdropClick}\n @keydown=${this.handleKeydown}\n @transitionend=${this.handleTransitionEnd}\n >\n <div class=\"wui-drawer-body wui-glass\">\n ${showHeader\n ? html`\n <div class=\"wui-drawer-header\">\n <slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}>\n ${this.heading ? html`<span class=\"wui-drawer-heading\">${this.heading}</span>` : nothing}\n </slot>\n </div>\n `\n : nothing}\n <div class=\"wui-drawer-content\">\n <slot></slot>\n </div>\n <div class=\"wui-drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n <slot name=\"footer\" @slotchange=${this.handleFooterSlotChange}></slot>\n </div>\n </div>\n ${this.closable\n ? html`\n <web-ui-button class=\"wui-drawer-close\" @click=${this.close} aria-label=\"关闭\" icon>\n <web-ui-icon .icon=${lucideX} size=\"16\"></web-ui-icon>\n </web-ui-button>\n `\n : nothing}\n </dialog>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-drawer': WebUiDrawer\n }\n}\n"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/drawer/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:var(--wui-drawer-width,320px);max-width:90vw;height:100dvh;max-height:100dvh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-drawer,.28s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;margin:0;padding:0;font-family:inherit;inset:0 0 0 auto;overflow:visible;transform:translate(100%)}dialog::backdrop{opacity:0;background:var(--wui-drawer-overlay-bg,#0000001f);transition:opacity var(--wui-duration-drawer,.28s) ease}dialog[open].is-visible,:host([placement=left]) dialog[open].is-visible,:host([placement=top]) dialog[open].is-visible,:host([placement=bottom]) dialog[open].is-visible{transform:translate(0)}dialog.is-closing{pointer-events:none}dialog[open].is-visible::backdrop{opacity:1}:host([placement=left]) dialog{left:0;right:auto;transform:translate(-100%)}:host([placement=top]) dialog,:host([placement=bottom]) dialog{width:100vw;max-width:100vw;height:var(--wui-drawer-height,300px);max-height:90dvh}:host([placement=top]) dialog{inset:0 0 auto;transform:translateY(-100%)}:host([placement=bottom]) dialog{inset:auto 0 0;transform:translateY(100%)}.wui-drawer-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f5f5f5d9);flex-direction:column;height:100%;display:flex}.wui-drawer-header{border-bottom:1px solid #0000000f;justify-content:space-between;align-items:center;padding:16px 20px;font-size:18px;font-weight:600;line-height:1.4;display:flex}.wui-drawer-content{overscroll-behavior:contain;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);flex:1;padding:20px;line-height:1.5;overflow-y:auto}.wui-drawer-footer{border-top:1px solid #0000000f;flex-shrink:0;padding:16px 20px}@media (prefers-reduced-motion:reduce){dialog{transition:opacity .12s}dialog::backdrop{transition-duration:.12s}dialog[open].is-visible{transform:none}}.wui-drawer-footer[hidden]{display:none}.wui-drawer-close{z-index:3;position:absolute;top:8px;right:8px}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:var(--wui-drawer-width,320px);max-width:90vw;height:100dvh;max-height:100dvh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-drawer,.28s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;margin:0;padding:0;font-family:inherit;inset:0 0 0 auto;overflow:visible;transform:translate(100%)}dialog::backdrop{opacity:0;background:var(--wui-drawer-overlay-bg,#0000001f);transition:opacity var(--wui-duration-drawer,.28s) ease}dialog[open].is-visible,:host([placement=left]) dialog[open].is-visible,:host([placement=top]) dialog[open].is-visible,:host([placement=bottom]) dialog[open].is-visible{transform:translate(0)}dialog.is-closing{pointer-events:none}dialog[open].is-visible::backdrop{opacity:1}:host([placement=left]) dialog{left:0;right:auto;transform:translate(-100%)}:host([placement=top]) dialog,:host([placement=bottom]) dialog{width:100vw;max-width:100vw;height:var(--wui-drawer-height,300px);max-height:90dvh}:host([placement=top]) dialog{inset:0 0 auto;transform:translateY(-100%)}:host([placement=bottom]) dialog{inset:auto 0 0;transform:translateY(100%)}.wui-drawer-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);flex-direction:column;height:100%;display:flex}.wui-drawer-header{border-bottom:1px solid #0000000f;justify-content:space-between;align-items:center;padding:16px 20px;font-size:18px;font-weight:600;line-height:1.4;display:flex}.wui-drawer-content{overscroll-behavior:contain;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);flex:1;padding:20px;line-height:1.5;overflow-y:auto}.wui-drawer-footer{border-top:1px solid #0000000f;flex-shrink:0;padding:16px 20px}@media (prefers-reduced-motion:reduce){dialog{transition:opacity .12s}dialog::backdrop{transition-duration:.12s}dialog[open].is-visible{transform:none}}.wui-drawer-footer[hidden]{display:none}.wui-drawer-close{z-index:3;position:absolute;top:8px;right:8px}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/drawer/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\n/* ===== Dialog 容器 ===== */\ndialog {\n /* 默认:右侧滑出 — 需显式 left:auto 覆盖 UA dialog:modal 的 left:0 */\n top: 0;\n right: 0;\n bottom: 0;\n left: auto;\n transform: translateX(100%);\n\n /* 阴影属于抽屉主体,不能由同尺寸的原生 dialog 裁剪。内容滚动由 .wui-drawer-content 管理。 */\n overflow: visible;\n\n box-sizing: border-box;\n width: var(--wui-drawer-width, 320px);\n max-width: 90vw;\n height: 100dvh;\n max-height: 100dvh;\n margin: 0;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n\n transition: transform var(--wui-duration-drawer, 280ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-drawer-overlay-bg, rgb(0 0 0 / 0.12));\n transition: opacity var(--wui-duration-drawer, 280ms) ease;\n }\n}\n\ndialog[open].is-visible {\n transform: translate(0, 0);\n}\n\n:host([placement='left']) dialog[open].is-visible,\n:host([placement='top']) dialog[open].is-visible,\n:host([placement='bottom']) dialog[open].is-visible {\n transform: translate(0, 0);\n}\n\ndialog.is-closing {\n pointer-events: none;\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n/* ===== Placement 变体 ===== */\n\n:host([placement='left']) dialog {\n right: auto;\n left: 0;\n transform: translateX(-100%);\n}\n\n:host([placement='top']) dialog,\n:host([placement='bottom']) dialog {\n width: 100vw;\n max-width: 100vw;\n height: var(--wui-drawer-height, 300px);\n max-height: 90dvh;\n}\n\n:host([placement='top']) dialog {\n top: 0;\n right: 0;\n bottom: auto;\n left: 0;\n transform: translateY(-100%);\n}\n\n:host([placement='bottom']) dialog {\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateY(100%);\n}\n\n/* ===== 抽屉主体 ===== */\n\n.wui-drawer-body {\n --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--wui-color-surface-overlay, rgb(245 245 245 / 0.85));\n}\n\n/* ===== Header ===== */\n\n.wui-drawer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 16px 20px;\n border-bottom: 1px solid rgb(0 0 0 / 0.06);\n\n font-size: 18px;\n font-weight: 600;\n line-height: 1.4;\n}\n\n/* ===== 内容区 ===== */\n\n.wui-drawer-content {\n overflow-y: auto;\n overscroll-behavior: contain;\n flex: 1;\n\n padding: 20px;\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== Footer ===== */\n\n.wui-drawer-footer {\n flex-shrink: 0;\n padding: 16px 20px;\n border-top: 1px solid rgb(0 0 0 / 0.06);\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog {\n transition: opacity 120ms ease;\n }\n\n dialog::backdrop {\n transition-duration: 120ms;\n }\n\n dialog[open].is-visible {\n transform: none;\n }\n}\n\n.wui-drawer-footer[hidden] {\n display: none;\n}\n\n/* ===== 关闭按钮(独立定位,与 header 解耦) ===== */\n\n.wui-drawer-close {\n position: absolute;\n z-index: 3;\n top: 8px;\n right: 8px;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/drawer/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\n/* ===== Dialog 容器 ===== */\ndialog {\n /* 默认:右侧滑出 — 需显式 left:auto 覆盖 UA dialog:modal 的 left:0 */\n top: 0;\n right: 0;\n bottom: 0;\n left: auto;\n transform: translateX(100%);\n\n /* 阴影属于抽屉主体,不能由同尺寸的原生 dialog 裁剪。内容滚动由 .wui-drawer-content 管理。 */\n overflow: visible;\n\n box-sizing: border-box;\n width: var(--wui-drawer-width, 320px);\n max-width: 90vw;\n height: 100dvh;\n max-height: 100dvh;\n margin: 0;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n\n transition: transform var(--wui-duration-drawer, 280ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-drawer-overlay-bg, rgb(0 0 0 / 0.12));\n transition: opacity var(--wui-duration-drawer, 280ms) ease;\n }\n}\n\ndialog[open].is-visible {\n transform: translate(0, 0);\n}\n\n:host([placement='left']) dialog[open].is-visible,\n:host([placement='top']) dialog[open].is-visible,\n:host([placement='bottom']) dialog[open].is-visible {\n transform: translate(0, 0);\n}\n\ndialog.is-closing {\n pointer-events: none;\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n/* ===== Placement 变体 ===== */\n\n:host([placement='left']) dialog {\n right: auto;\n left: 0;\n transform: translateX(-100%);\n}\n\n:host([placement='top']) dialog,\n:host([placement='bottom']) dialog {\n width: 100vw;\n max-width: 100vw;\n height: var(--wui-drawer-height, 300px);\n max-height: 90dvh;\n}\n\n:host([placement='top']) dialog {\n top: 0;\n right: 0;\n bottom: auto;\n left: 0;\n transform: translateY(-100%);\n}\n\n:host([placement='bottom']) dialog {\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateY(100%);\n}\n\n/* ===== 抽屉主体 ===== */\n\n.wui-drawer-body {\n --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n/* ===== Header ===== */\n\n.wui-drawer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 16px 20px;\n border-bottom: 1px solid rgb(0 0 0 / 0.06);\n\n font-size: 18px;\n font-weight: 600;\n line-height: 1.4;\n}\n\n/* ===== 内容区 ===== */\n\n.wui-drawer-content {\n overflow-y: auto;\n overscroll-behavior: contain;\n flex: 1;\n\n padding: 20px;\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== Footer ===== */\n\n.wui-drawer-footer {\n flex-shrink: 0;\n padding: 16px 20px;\n border-top: 1px solid rgb(0 0 0 / 0.06);\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog {\n transition: opacity 120ms ease;\n }\n\n dialog::backdrop {\n transition-duration: 120ms;\n }\n\n dialog[open].is-visible {\n transform: none;\n }\n}\n\n.wui-drawer-footer[hidden] {\n display: none;\n}\n\n/* ===== 关闭按钮(独立定位,与 header 解耦) ===== */\n\n.wui-drawer-close {\n position: absolute;\n z-index: 3;\n top: 8px;\n right: 8px;\n}\n"],"mappings":""}
@@ -1,7 +1,7 @@
1
1
  import { Placement } from '@floating-ui/dom';
2
2
  import { LitElement } from 'lit';
3
3
  export type { Placement };
4
- export declare class WebUiDropdownMenu extends LitElement {
4
+ export declare class WebUiDropdown extends LitElement {
5
5
  static styles: import('lit').CSSResult[];
6
6
  open: boolean;
7
7
  disabled: boolean;
@@ -82,6 +82,6 @@ export declare class WebUiDropdownMenu extends LitElement {
82
82
  }
83
83
  declare global {
84
84
  interface HTMLElementTagNameMap {
85
- 'web-ui-dropdown-menu': WebUiDropdownMenu;
85
+ 'web-ui-dropdown': WebUiDropdown;
86
86
  }
87
87
  }
@@ -12,7 +12,7 @@ import { withOverlay as u } from "../../shared/overlay/overlay.js";
12
12
  import d from "./style.js";
13
13
  import { LitElement as f, html as p, unsafeCSS as m } from "lit";
14
14
  import { customElement as h, property as g, state as _ } from "lit/decorators.js";
15
- //#region src/components/dropdown-menu/index.ts
15
+ //#region src/components/dropdown/index.ts
16
16
  var v = "web-ui-menu-level-", y = [
17
17
  "top",
18
18
  "top-start",
@@ -317,8 +317,8 @@ e([g({
317
317
  })], b.prototype, "lockScroll", void 0), e([g({
318
318
  type: String,
319
319
  reflect: !0
320
- })], b.prototype, "placement", null), e([g({ type: Number })], b.prototype, "offset", null), e([_()], b.prototype, "_activePath", void 0), b = e([h("web-ui-dropdown-menu")], b);
320
+ })], b.prototype, "placement", null), e([g({ type: Number })], b.prototype, "offset", null), e([_()], b.prototype, "_activePath", void 0), b = e([h("web-ui-dropdown")], b);
321
321
  //#endregion
322
- export { b as WebUiDropdownMenu };
322
+ export { b as WebUiDropdown };
323
323
 
324
324
  //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dropdown/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/dropdown-divider'\nimport '@/components/dropdown-header'\nimport '@/components/dropdown-item'\nimport glass from '@/assets/glass.css?inline'\nimport { createMenuPortalOverlay } from '@/shared/menu-portal/menu-portal'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { withOverlay } from '@/shared/overlay/overlay'\nimport type { OverlayApi } from '@/shared/overlay/overlay'\nimport { hideOverlayPresence, showOverlayPresence } from '@/shared/overlay/presence'\nimport { booleanWithFalseString } from '@/shared/property-converters/boolean-with-false-string'\nimport { lockScroll, unlockScroll } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nexport type { Placement }\n\nconst SLOT_PREFIX = 'web-ui-menu-level-'\nconst ALLOWED_PLACEMENTS = [\n 'top',\n 'top-start',\n 'top-end',\n 'right',\n 'right-start',\n 'right-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end'\n] as const\n\ninterface MenuOverlay {\n api: OverlayApi\n overlay: HTMLElement\n}\n\n@customElement('web-ui-dropdown')\nexport class WebUiDropdown extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) matchWidth = false\n @property({ reflect: true, attribute: 'lock-scroll', converter: booleanWithFalseString }) lockScroll = true\n\n private _placement: Placement = 'bottom-start'\n\n @property({ type: String, reflect: true })\n get placement(): Placement {\n return this._placement\n }\n set placement(v: string) {\n this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'bottom-start')\n }\n\n private _offset = 4\n\n @property({ type: Number })\n get offset(): number {\n return this._offset\n }\n set offset(v: number) {\n this._offset = normalizeNumber(v, 0, 100, 4)\n }\n\n @state() private _activePath: number[] = []\n\n private readonly _overlays = new Map<number, MenuOverlay>()\n private readonly _closingSubmenuOverlays = new Map<HTMLElement, MenuOverlay>()\n private _openTimer?: ReturnType<typeof setTimeout>\n private _ignoreOutsideClick = false\n private _ignoreOutsideClickTimer?: ReturnType<typeof setTimeout>\n private _hoverCleanupFns: (() => void)[] = []\n private _hasScrollLock = false\n private _restoreFocusTarget?: HTMLElement\n private _shouldOpenInstantly = true\n\n get isOpen(): boolean {\n return this.open || this._activePath.length > 0\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.addEventListener('keydown', this._onKeydown)\n document.addEventListener('click', this._onClickOutside)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('keydown', this._onKeydown)\n document.removeEventListener('click', this._onClickOutside)\n clearTimeout(this._openTimer)\n clearTimeout(this._ignoreOutsideClickTimer)\n this._syncScrollLock(false)\n this._cleanupClosedMenu()\n this._hoverCleanupFns.forEach(fn => fn())\n }\n\n protected override updated(changed: Map<string, unknown>) {\n if (changed.has('open')) {\n if (this.open) {\n this._restoreFocusTarget ??= document.activeElement instanceof HTMLElement ? document.activeElement : undefined\n this._ignoreCurrentOutsideClick()\n this._syncScrollLock()\n this._hideAllSubmenuChildren()\n requestAnimationFrame(() => {\n if (!this.open) return\n this._ensureOverlay(0, this._shouldOpenInstantly)\n this._shouldOpenInstantly = true\n this._focusMenuItem(this._getEnabledLevelItems(0)[0])\n })\n this._bindHoversAfterUpdate()\n } else {\n this._syncScrollLock()\n void this._closeRootAfterPresence()\n }\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open: this.open },\n bubbles: true,\n composed: true\n })\n )\n }\n if (changed.has('lockScroll')) this._syncScrollLock()\n this._bindLevelHovers()\n }\n\n /**\n * 打开菜单。\n * @returns 无返回值;打开后派发 `open-change` 事件。\n */\n openMenu() {\n this._openMenu(true)\n }\n\n private _openMenu(isInstant: boolean) {\n if (this.disabled || this.open) return\n this._ignoreCurrentOutsideClick()\n this._shouldOpenInstantly = isInstant\n this.open = true\n }\n\n /**\n * 关闭所有层级。\n * @returns 无返回值;关闭后派发 `open-change` 事件。\n */\n closeAll() {\n if (!this.open) return\n this.open = false\n }\n\n /** 清理子菜单状态(不影响 open prop) */\n private _closeAllSubmenus() {\n this._closeSubmenuFrom(1, true)\n this._disposeClosingSubmenuOverlays()\n this._activePath = []\n this._syncActiveAttrs()\n }\n\n private _cleanupClosedMenu() {\n this._closeAllSubmenus()\n this._returnLevel0Items()\n this._disposeAll()\n }\n\n private async _closeRootAfterPresence() {\n const overlay = this._overlays.get(0)?.overlay\n if (overlay && !(await hideOverlayPresence(overlay))) return\n if (this.open || !this.isConnected) return\n\n this._cleanupClosedMenu()\n this._restoreFocusTarget?.focus()\n this._restoreFocusTarget = undefined\n }\n\n private _hideAllSubmenuChildren() {\n this.querySelectorAll('web-ui-dropdown-item[submenu]').forEach(item => {\n Array.from(item.children).forEach(child => {\n if (child.matches('web-ui-dropdown-item, web-ui-dropdown-divider, web-ui-dropdown-header')) {\n child.setAttribute('slot', `${SLOT_PREFIX}-hidden`)\n }\n })\n })\n }\n\n private _toggleSubmenu(level: number, itemIndex: number, isInstant = false) {\n if (this._activePath[level] === itemIndex) {\n return\n }\n\n this._closeSubmenuFrom(level + 1)\n\n this._activePath[level] = itemIndex\n this._syncActiveAttrs()\n\n const item = this._getLevelItems(level)[itemIndex]\n if (item?.hasAttribute('submenu')) {\n requestAnimationFrame(() => {\n if (!this.open || this._activePath[level] !== itemIndex) return\n const restored = this._ensureOverlay(level + 1, isInstant, item)\n if (!restored) this._populateOverlay(level + 1, item)\n })\n }\n\n this._bindHoversAfterUpdate()\n }\n\n private _closeSubmenuFrom(level: number, isInstant = false) {\n for (let lv = this._activePath.length; lv >= level; lv--) {\n const overlay = this._overlays.get(lv)\n const parentItem = this._getLevelItems(lv - 1)[this._activePath[lv - 1]]\n if (!overlay) continue\n\n if (!parentItem || isInstant) {\n this._depopulateOverlay(lv, parentItem)\n this._disposeOverlay(lv)\n } else {\n this._overlays.delete(lv)\n this._closingSubmenuOverlays.set(parentItem, overlay)\n void this._closeSubmenuAfterPresence(overlay, parentItem)\n }\n }\n this._activePath = this._activePath.slice(0, level - 1)\n this._syncActiveAttrs()\n }\n\n private _syncActiveAttrs() {\n this.querySelectorAll('web-ui-dropdown-item').forEach(item => {\n item.removeAttribute('active')\n })\n this._overlays.forEach((_, level) => {\n this._getLevelItems(level).forEach(item => item.removeAttribute('active'))\n })\n this._activePath.forEach((itemIndex, level) => {\n const item = this._getLevelItems(level)[itemIndex]\n if (item?.matches('web-ui-dropdown-item')) {\n item.setAttribute('active', '')\n }\n })\n }\n\n private _getLevelItems(level: number): HTMLElement[] {\n const scroll = this._overlays.get(level)?.overlay.querySelector<HTMLElement>('.dropdown-scroll')\n if (!scroll) return []\n return Array.from(scroll.children).filter((c): c is HTMLElement =>\n c.matches('web-ui-dropdown-item, web-ui-dropdown-divider, web-ui-dropdown-header')\n )\n }\n\n private _populateLevel0() {\n const overlay = this._overlays.get(0)?.overlay.querySelector<HTMLElement>('.dropdown-scroll')\n if (!overlay) return\n Array.from(this.children).forEach(child => {\n if (child.matches('web-ui-dropdown-item, web-ui-dropdown-divider, web-ui-dropdown-header')) {\n overlay.appendChild(child)\n }\n })\n }\n\n private _returnLevel0Items() {\n const overlay = this._overlays.get(0)?.overlay.querySelector<HTMLElement>('.dropdown-scroll')\n if (!overlay) return\n Array.from(overlay.children).forEach(child => {\n if (child.matches('web-ui-dropdown-item, web-ui-dropdown-divider, web-ui-dropdown-header')) {\n this.appendChild(child)\n }\n })\n }\n\n private _populateOverlay(level: number, submenuItem: HTMLElement) {\n const overlay = this._overlays.get(level)?.overlay.querySelector<HTMLElement>('.dropdown-scroll')\n if (!overlay) return\n for (const child of Array.from(submenuItem.children)) {\n if (child.matches('web-ui-dropdown-item, web-ui-dropdown-divider, web-ui-dropdown-header')) {\n overlay.appendChild(child)\n }\n }\n }\n\n private _depopulateOverlay(level: number, parentItem?: HTMLElement) {\n const scroll = this._overlays.get(level)?.overlay.querySelector<HTMLElement>('.dropdown-scroll')\n if (!scroll) return\n for (const child of Array.from(scroll.children)) {\n if (child.matches('web-ui-dropdown-item, web-ui-dropdown-divider, web-ui-dropdown-header')) {\n const targetLevel = level - 1\n const submenuItem = parentItem ?? this._getLevelItems(targetLevel)[this._activePath[targetLevel]]\n if (submenuItem) {\n submenuItem.appendChild(child)\n }\n }\n }\n }\n\n private _ensureOverlay(level: number, isInstant = false, submenuItem?: HTMLElement): boolean {\n const closingOverlay = submenuItem ? this._closingSubmenuOverlays.get(submenuItem) : undefined\n if (closingOverlay) {\n this._closingSubmenuOverlays.delete(submenuItem!)\n this._overlays.set(level, closingOverlay)\n closingOverlay.api.open()\n showOverlayPresence(closingOverlay.overlay, { isInstant })\n return true\n }\n const existing = this._overlays.get(level)\n if (existing) {\n existing.api.open()\n showOverlayPresence(existing.overlay, { isInstant })\n return false\n }\n this._buildOverlay(level, isInstant)\n return false\n }\n\n private _buildOverlay(level: number, isInstant = false) {\n const overlay = createMenuPortalOverlay('dropdown-overlay')\n overlay.setAttribute('role', 'menu')\n overlay.dataset.level = String(level)\n overlay.addEventListener('click', this._onMenuClick)\n overlay.addEventListener('keydown', this._onKeydown)\n\n const scroll = document.createElement('div')\n scroll.className = 'dropdown-scroll'\n overlay.appendChild(scroll)\n\n const anchor = level === 0 ? this._queryTriggerAnchor() : this._getSubmenuTriggerAnchor(level - 1)\n\n if (anchor) {\n const ctrl = withOverlay.make({\n anchor,\n overlay,\n placement: level === 0 ? this.placement : 'right-start',\n offset: level === 0 ? this.offset : 0,\n matchWidth: level === 0 ? this.matchWidth : false,\n strategy: 'fixed'\n })\n this._overlays.set(level, { api: ctrl, overlay })\n if (level === 0) this._populateLevel0()\n ctrl.open()\n showOverlayPresence(overlay, { isInstant })\n }\n }\n\n private _disposeOverlay(level: number) {\n const overlay = this._overlays.get(level)?.overlay\n overlay?.removeEventListener('click', this._onMenuClick)\n overlay?.removeEventListener('keydown', this._onKeydown)\n overlay?.remove()\n this._overlays.get(level)?.api.dispose()\n this._overlays.delete(level)\n }\n\n private _disposeAll() {\n for (const level of this._overlays.keys()) {\n this._disposeOverlay(level)\n }\n }\n\n private async _closeSubmenuAfterPresence(overlay: MenuOverlay, parentItem: HTMLElement) {\n if (!(await hideOverlayPresence(overlay.overlay))) return\n if (this._closingSubmenuOverlays.get(parentItem) !== overlay) return\n\n this._closingSubmenuOverlays.delete(parentItem)\n this._restoreSubmenuItems(overlay.overlay, parentItem)\n overlay.api.dispose()\n overlay.overlay.remove()\n }\n\n private _disposeClosingSubmenuOverlays() {\n this._closingSubmenuOverlays.forEach((overlay, parentItem) => {\n this._restoreSubmenuItems(overlay.overlay, parentItem)\n overlay.api.dispose()\n overlay.overlay.remove()\n })\n this._closingSubmenuOverlays.clear()\n }\n\n private _restoreSubmenuItems(overlay: HTMLElement, parentItem: HTMLElement) {\n const scroll = overlay.querySelector<HTMLElement>('.dropdown-scroll')\n if (!scroll) return\n Array.from(scroll.children).forEach(child => parentItem.appendChild(child))\n }\n\n private _syncScrollLock(isOpen = this.open) {\n const shouldLock = isOpen && this.lockScroll\n if (shouldLock === this._hasScrollLock) return\n\n if (shouldLock) lockScroll()\n else unlockScroll()\n this._hasScrollLock = shouldLock\n }\n\n private _queryTriggerAnchor(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n const el = slot?.assignedElements()[0]\n return el instanceof HTMLElement ? el : null\n }\n\n private _getSubmenuTriggerAnchor(level: number): HTMLElement | null {\n const idx = this._activePath[level]\n if (idx === undefined) return null\n const items = this._getLevelItems(level)\n const item = items[idx]\n if (!item) return null\n return item.shadowRoot?.querySelector('.item-inner') ?? item\n }\n\n private _onTriggerClick = (event: MouseEvent) => {\n if (this.disabled) return\n if (this.open) {\n this.closeAll()\n } else {\n this._openMenu(event.detail === 0)\n }\n }\n\n private _onClickOutside = (e: MouseEvent) => {\n if (!this.isOpen || this._ignoreOutsideClick) return\n if (this._isInsideShadowRoot(e)) return\n this.closeAll()\n }\n\n private _onMenuClick = (e: MouseEvent) => {\n const item = e\n .composedPath()\n .find((node): node is HTMLElement => node instanceof HTMLElement && node.matches('web-ui-dropdown-item'))\n if (!item || item.hasAttribute('disabled') || !item.hasAttribute('submenu')) return\n\n const level = this._getFocusedLevel(item)\n if (level === undefined) return\n const itemIndex = this._getLevelItems(level).indexOf(item)\n if (itemIndex >= 0) this._toggleSubmenu(level, itemIndex, e.detail === 0)\n }\n\n private _onKeydown = (e: KeyboardEvent) => {\n if (this.disabled || !this.open) return\n\n if (e.key === 'Escape' && e.target === this) {\n if (this._activePath.length > 0) this._closeSubmenuFrom(this._activePath.length)\n else this.closeAll()\n e.preventDefault()\n return\n }\n\n const focused = this._getFocusedItem(e)\n const level = this._getFocusedLevel(focused)\n if (level === undefined) return\n const items = this._getEnabledLevelItems(level)\n const currentIndex = focused ? items.indexOf(focused) : -1\n\n switch (e.key) {\n case 'ArrowDown':\n this._focusMenuItem(items[(currentIndex + 1 + items.length) % items.length])\n break\n case 'ArrowUp':\n this._focusMenuItem(items[(currentIndex - 1 + items.length) % items.length])\n break\n case 'Home':\n this._focusMenuItem(items[0])\n break\n case 'End':\n this._focusMenuItem(items.at(-1))\n break\n case 'ArrowRight':\n if (focused?.hasAttribute('submenu')) {\n const itemIndex = this._getLevelItems(level).indexOf(focused)\n this._toggleSubmenu(level, itemIndex, true)\n requestAnimationFrame(() =>\n requestAnimationFrame(() => this._focusMenuItem(this._getEnabledLevelItems(level + 1)[0]))\n )\n }\n break\n case 'ArrowLeft':\n if (level > 0) {\n this._closeSubmenuFrom(level)\n this._focusMenuItem(this._getLevelItems(level - 1)[this._activePath[level - 1]])\n }\n break\n case 'Enter':\n case ' ':\n focused?.click()\n break\n case 'Escape':\n if (this._activePath.length > 0) this._closeSubmenuFrom(this._activePath.length)\n else this.closeAll()\n break\n default:\n return\n }\n e.preventDefault()\n e.stopPropagation()\n }\n\n private _getEnabledLevelItems(level: number) {\n return this._getLevelItems(level).filter(item => item.matches('web-ui-dropdown-item:not([disabled])'))\n }\n\n private _getFocusedItem(event?: KeyboardEvent): HTMLElement | undefined {\n const eventItem = event\n ?.composedPath()\n .find((node): node is HTMLElement => node instanceof HTMLElement && node.matches('web-ui-dropdown-item'))\n if (eventItem) return eventItem\n\n return [...this._overlays.values()]\n .flatMap(({ overlay }) => Array.from(overlay.querySelectorAll<HTMLElement>('web-ui-dropdown-item')))\n .find(item => Boolean(item.shadowRoot?.activeElement))\n }\n\n private _getFocusedLevel(item = this._getFocusedItem()): number | undefined {\n if (!item) return undefined\n const overlay = [...this._overlays.entries()].find(([, value]) => value.overlay.contains(item))\n return overlay?.[0]\n }\n\n private _focusMenuItem(item: HTMLElement | undefined) {\n if (!item || item.hasAttribute('disabled')) return\n const focusable = item as HTMLElement & { focusItem?: () => void }\n focusable.focusItem?.()\n }\n\n private _isInsideShadowRoot(e: MouseEvent): boolean {\n for (const node of e.composedPath()) {\n if (node === this || node === this.shadowRoot) return true\n if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n if (node instanceof Node && [...this._overlays.values()].some(({ overlay }) => overlay.contains(node)))\n return true\n }\n return false\n }\n\n private _ignoreCurrentOutsideClick() {\n this._ignoreOutsideClick = true\n clearTimeout(this._ignoreOutsideClickTimer)\n this._ignoreOutsideClickTimer = setTimeout(() => {\n this._ignoreOutsideClick = false\n })\n }\n\n private _bindLevelHovers() {\n this._hoverCleanupFns.forEach(fn => fn())\n this._hoverCleanupFns.length = 0\n\n const maxLevel = this._activePath.length + 1\n for (let lv = 0; lv <= maxLevel; lv++) {\n const items = this._getLevelItems(lv)\n if (!items.length) continue\n items.forEach((item, idx) => {\n if (!item.matches('web-ui-dropdown-item') || item.hasAttribute('disabled')) return\n const handler = (event: PointerEvent) => {\n if (event.pointerType === 'touch') return\n clearTimeout(this._openTimer)\n if (item.hasAttribute('submenu')) {\n if (this._activePath[lv] !== idx) {\n this._openTimer = setTimeout(() => this._toggleSubmenu(lv, idx), 200)\n }\n } else if (this._activePath.length > lv) {\n this._closeSubmenuFrom(lv + 1)\n }\n }\n item.addEventListener('pointerenter', handler, { passive: true })\n this._hoverCleanupFns.push(() => item.removeEventListener('pointerenter', handler))\n })\n }\n }\n\n private _bindHoversAfterUpdate() {\n requestAnimationFrame(() => this._bindLevelHovers())\n }\n\n override render() {\n return html`\n <div class=\"dropdown-trigger\" @click=${this._onTriggerClick}>\n <slot name=\"trigger\"></slot>\n </div>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dropdown': WebUiDropdown\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,IAAM,IAAc,sBACd,IAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAQa,IAAN,cAA4B,EAAW;;EA4YtB,aAzY6B,KAAA,OAAA,IACI,KAAA,WAAA,IACE,KAAA,aAAA,IAC8C,KAAA,aAAA,IAEvE,KAAA,aAAA,gBAUd,KAAA,UAAA,GAUuB,KAAA,cAAA,CAAC,GAEb,KAAA,4BAAA,IAAI,IAAyB,GACf,KAAA,0CAAA,IAAI,IAA8B,GAE/C,KAAA,sBAAA,IAEa,KAAA,mBAAA,CAAC,GACnB,KAAA,iBAAA,IAEM,KAAA,uBAAA,IA2UJ,KAAA,mBAAA,MAAsB;GAC3C,KAAK,aACL,KAAK,OACP,KAAK,SAAS,IAEd,KAAK,UAAU,EAAM,WAAW,CAAC;EAErC,GAE2B,KAAA,mBAAA,MAAkB;GACvC,CAAC,KAAK,UAAU,KAAK,uBACrB,KAAK,oBAAoB,CAAC,KAC9B,KAAK,SAAS;EAChB,GAEwB,KAAA,gBAAA,MAAkB;GACxC,IAAM,IAAO,EACV,aAAa,CAAC,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,QAAQ,sBAAsB,CAAC;GAC1G,IAAI,CAAC,KAAQ,EAAK,aAAa,UAAU,KAAK,CAAC,EAAK,aAAa,SAAS,GAAG;GAE7E,IAAM,IAAQ,KAAK,iBAAiB,CAAI;GACxC,IAAI,MAAU,KAAA,GAAW;GACzB,IAAM,IAAY,KAAK,eAAe,CAAK,CAAC,CAAC,QAAQ,CAAI;GACzD,AAAI,KAAa,KAAG,KAAK,eAAe,GAAO,GAAW,EAAE,WAAW,CAAC;EAC1E,GAEsB,KAAA,cAAA,MAAqB;GACzC,IAAI,KAAK,YAAY,CAAC,KAAK,MAAM;GAEjC,IAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,MAAM;IAG3C,AAFI,KAAK,YAAY,SAAS,IAAG,KAAK,kBAAkB,KAAK,YAAY,MAAM,IAC1E,KAAK,SAAS,GACnB,EAAE,eAAe;IACjB;GACF;GAEA,IAAM,IAAU,KAAK,gBAAgB,CAAC,GAChC,IAAQ,KAAK,iBAAiB,CAAO;GAC3C,IAAI,MAAU,KAAA,GAAW;GACzB,IAAM,IAAQ,KAAK,sBAAsB,CAAK,GACxC,IAAe,IAAU,EAAM,QAAQ,CAAO,IAAI;GAExD,QAAQ,EAAE,KAAV;IACE,KAAK;KACH,KAAK,eAAe,GAAO,IAAe,IAAI,EAAM,UAAU,EAAM,OAAO;KAC3E;IACF,KAAK;KACH,KAAK,eAAe,GAAO,IAAe,IAAI,EAAM,UAAU,EAAM,OAAO;KAC3E;IACF,KAAK;KACH,KAAK,eAAe,EAAM,EAAE;KAC5B;IACF,KAAK;KACH,KAAK,eAAe,EAAM,GAAG,EAAE,CAAC;KAChC;IACF,KAAK;KACH,IAAI,GAAS,aAAa,SAAS,GAAG;MACpC,IAAM,IAAY,KAAK,eAAe,CAAK,CAAC,CAAC,QAAQ,CAAO;MAE5D,AADA,KAAK,eAAe,GAAO,GAAW,EAAI,GAC1C,4BACE,4BAA4B,KAAK,eAAe,KAAK,sBAAsB,IAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAC3F;KACF;KACA;IACF,KAAK;KACH,AAAI,IAAQ,MACV,KAAK,kBAAkB,CAAK,GAC5B,KAAK,eAAe,KAAK,eAAe,IAAQ,CAAC,CAAC,CAAC,KAAK,YAAY,IAAQ,GAAG;KAEjF;IACF,KAAK;IACL,KAAK;KACH,GAAS,MAAM;KACf;IACF,KAAK;KACH,AAAI,KAAK,YAAY,SAAS,IAAG,KAAK,kBAAkB,KAAK,YAAY,MAAM,IAC1E,KAAK,SAAS;KACnB;IACF,SACE;GACJ;GAEA,AADA,EAAE,eAAe,GACjB,EAAE,gBAAgB;EACpB;;;EApcyB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAS5D,IACI,YAAuB;EACzB,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,KAAK,aAAa,EAAiB,GAAG,GAAoB,cAAc;CAC1E;CAIA,IACI,SAAiB;EACnB,OAAO,KAAK;CACd;CACA,IAAI,OAAO,GAAW;EACpB,KAAK,UAAU,EAAgB,GAAG,GAAG,KAAK,CAAC;CAC7C;CAcA,IAAI,SAAkB;EACpB,OAAO,KAAK,QAAQ,KAAK,YAAY,SAAS;CAChD;CAEA,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB,WAAW,KAAK,UAAU,GAChD,SAAS,iBAAiB,SAAS,KAAK,eAAe;CACzD;CAEA,uBAAgC;EAQ9B,AAPA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,WAAW,KAAK,UAAU,GACnD,SAAS,oBAAoB,SAAS,KAAK,eAAe,GAC1D,aAAa,KAAK,UAAU,GAC5B,aAAa,KAAK,wBAAwB,GAC1C,KAAK,gBAAgB,EAAK,GAC1B,KAAK,mBAAmB,GACxB,KAAK,iBAAiB,SAAQ,MAAM,EAAG,CAAC;CAC1C;CAEA,QAA2B,GAA+B;EA2BxD,AA1BI,EAAQ,IAAI,MAAM,MAChB,KAAK,QACP,KAAK,wBAAwB,SAAS,yBAAyB,cAAc,SAAS,gBAAgB,KAAA,GACtG,KAAK,2BAA2B,GAChC,KAAK,gBAAgB,GACrB,KAAK,wBAAwB,GAC7B,4BAA4B;GACrB,KAAK,SACV,KAAK,eAAe,GAAG,KAAK,oBAAoB,GAChD,KAAK,uBAAuB,IAC5B,KAAK,eAAe,KAAK,sBAAsB,CAAC,CAAC,CAAC,EAAE;EACtD,CAAC,GACD,KAAK,uBAAuB,MAE5B,KAAK,gBAAgB,GACrB,KAAU,wBAAwB,IAEpC,KAAK,cACH,IAAI,YAAY,eAAe;GAC7B,QAAQ,EAAE,MAAM,KAAK,KAAK;GAC1B,SAAS;GACT,UAAU;EACZ,CAAC,CACH,IAEE,EAAQ,IAAI,YAAY,KAAG,KAAK,gBAAgB,GACpD,KAAK,iBAAiB;CACxB;CAMA,WAAW;EACT,KAAK,UAAU,EAAI;CACrB;CAEA,UAAkB,GAAoB;EAChC,KAAK,YAAY,KAAK,SAC1B,KAAK,2BAA2B,GAChC,KAAK,uBAAuB,GAC5B,KAAK,OAAO;CACd;CAMA,WAAW;EACJ,AACL,KAAK,SAAO;CACd;CAGA,oBAA4B;EAI1B,AAHA,KAAK,kBAAkB,GAAG,EAAI,GAC9B,KAAK,+BAA+B,GACpC,KAAK,cAAc,CAAC,GACpB,KAAK,iBAAiB;CACxB;CAEA,qBAA6B;EAG3B,AAFA,KAAK,kBAAkB,GACvB,KAAK,mBAAmB,GACxB,KAAK,YAAY;CACnB;CAEA,MAAc,0BAA0B;EACtC,IAAM,IAAU,KAAK,UAAU,IAAI,CAAC,CAAC,EAAE;EACnC,KAAW,CAAE,MAAM,EAAoB,CAAO,KAC9C,KAAK,QAAQ,CAAC,KAAK,gBAEvB,KAAK,mBAAmB,GACxB,KAAK,qBAAqB,MAAM,GAChC,KAAK,sBAAsB,KAAA;CAC7B;CAEA,0BAAkC;EAChC,KAAK,iBAAiB,+BAA+B,CAAC,CAAC,SAAQ,MAAQ;GACrE,MAAM,KAAK,EAAK,QAAQ,CAAC,CAAC,SAAQ,MAAS;IACzC,AAAI,EAAM,QAAQ,uEAAuE,KACvF,EAAM,aAAa,QAAQ,GAAG,EAAY,QAAQ;GAEtD,CAAC;EACH,CAAC;CACH;CAEA,eAAuB,GAAe,GAAmB,IAAY,IAAO;EAC1E,IAAI,KAAK,YAAY,OAAW,GAC9B;EAMF,AAHA,KAAK,kBAAkB,IAAQ,CAAC,GAEhC,KAAK,YAAY,KAAS,GAC1B,KAAK,iBAAiB;EAEtB,IAAM,IAAO,KAAK,eAAe,CAAK,CAAC,CAAC;EASxC,AARI,GAAM,aAAa,SAAS,KAC9B,4BAA4B;GACtB,CAAC,KAAK,QAAQ,KAAK,YAAY,OAAW,KAC7B,KAAK,eAAe,IAAQ,GAAG,GAAW,CACtD,KAAU,KAAK,iBAAiB,IAAQ,GAAG,CAAI;EACtD,CAAC,GAGH,KAAK,uBAAuB;CAC9B;CAEA,kBAA0B,GAAe,IAAY,IAAO;EAC1D,KAAK,IAAI,IAAK,KAAK,YAAY,QAAQ,KAAM,GAAO,KAAM;GACxD,IAAM,IAAU,KAAK,UAAU,IAAI,CAAE,GAC/B,IAAa,KAAK,eAAe,IAAK,CAAC,CAAC,CAAC,KAAK,YAAY,IAAK;GAChE,MAED,CAAC,KAAc,KACjB,KAAK,mBAAmB,GAAI,CAAU,GACtC,KAAK,gBAAgB,CAAE,MAEvB,KAAK,UAAU,OAAO,CAAE,GACxB,KAAK,wBAAwB,IAAI,GAAY,CAAO,GACpD,KAAU,2BAA2B,GAAS,CAAU;EAE5D;EAEA,AADA,KAAK,cAAc,KAAK,YAAY,MAAM,GAAG,IAAQ,CAAC,GACtD,KAAK,iBAAiB;CACxB;CAEA,mBAA2B;EAOzB,AANA,KAAK,iBAAiB,sBAAsB,CAAC,CAAC,SAAQ,MAAQ;GAC5D,EAAK,gBAAgB,QAAQ;EAC/B,CAAC,GACD,KAAK,UAAU,SAAS,GAAG,MAAU;GACnC,KAAK,eAAe,CAAK,CAAC,CAAC,SAAQ,MAAQ,EAAK,gBAAgB,QAAQ,CAAC;EAC3E,CAAC,GACD,KAAK,YAAY,SAAS,GAAW,MAAU;GAC7C,IAAM,IAAO,KAAK,eAAe,CAAK,CAAC,CAAC;GACxC,AAAI,GAAM,QAAQ,sBAAsB,KACtC,EAAK,aAAa,UAAU,EAAE;EAElC,CAAC;CACH;CAEA,eAAuB,GAA8B;EACnD,IAAM,IAAS,KAAK,UAAU,IAAI,CAAK,CAAC,EAAE,QAAQ,cAA2B,kBAAkB;EAE/F,OADK,IACE,MAAM,KAAK,EAAO,QAAQ,CAAC,CAAC,QAAQ,MACzC,EAAE,QAAQ,uEAAuE,CACnF,IAHoB,CAAC;CAIvB;CAEA,kBAA0B;EACxB,IAAM,IAAU,KAAK,UAAU,IAAI,CAAC,CAAC,EAAE,QAAQ,cAA2B,kBAAkB;EACvF,KACL,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,SAAQ,MAAS;GACzC,AAAI,EAAM,QAAQ,uEAAuE,KACvF,EAAQ,YAAY,CAAK;EAE7B,CAAC;CACH;CAEA,qBAA6B;EAC3B,IAAM,IAAU,KAAK,UAAU,IAAI,CAAC,CAAC,EAAE,QAAQ,cAA2B,kBAAkB;EACvF,KACL,MAAM,KAAK,EAAQ,QAAQ,CAAC,CAAC,SAAQ,MAAS;GAC5C,AAAI,EAAM,QAAQ,uEAAuE,KACvF,KAAK,YAAY,CAAK;EAE1B,CAAC;CACH;CAEA,iBAAyB,GAAe,GAA0B;EAChE,IAAM,IAAU,KAAK,UAAU,IAAI,CAAK,CAAC,EAAE,QAAQ,cAA2B,kBAAkB;EAC3F,OACL,KAAK,IAAM,KAAS,MAAM,KAAK,EAAY,QAAQ,GACjD,AAAI,EAAM,QAAQ,uEAAuE,KACvF,EAAQ,YAAY,CAAK;CAG/B;CAEA,mBAA2B,GAAe,GAA0B;EAClE,IAAM,IAAS,KAAK,UAAU,IAAI,CAAK,CAAC,EAAE,QAAQ,cAA2B,kBAAkB;EAC1F,OACL;QAAK,IAAM,KAAS,MAAM,KAAK,EAAO,QAAQ,GAC5C,IAAI,EAAM,QAAQ,uEAAuE,GAAG;IAC1F,IAAM,IAAc,IAAQ,GACtB,IAAc,KAAc,KAAK,eAAe,CAAW,CAAC,CAAC,KAAK,YAAY;IACpF,AAAI,KACF,EAAY,YAAY,CAAK;GAEjC;;CAEJ;CAEA,eAAuB,GAAe,IAAY,IAAO,GAAoC;EAC3F,IAAM,IAAiB,IAAc,KAAK,wBAAwB,IAAI,CAAW,IAAI,KAAA;EACrF,IAAI,GAKF,OAJA,KAAK,wBAAwB,OAAO,CAAY,GAChD,KAAK,UAAU,IAAI,GAAO,CAAc,GACxC,EAAe,IAAI,KAAK,GACxB,EAAoB,EAAe,SAAS,EAAE,aAAU,CAAC,GAClD;EAET,IAAM,IAAW,KAAK,UAAU,IAAI,CAAK;EAOzC,OANI,KACF,EAAS,IAAI,KAAK,GAClB,EAAoB,EAAS,SAAS,EAAE,aAAU,CAAC,GAC5C,OAET,KAAK,cAAc,GAAO,CAAS,GAC5B;CACT;CAEA,cAAsB,GAAe,IAAY,IAAO;EACtD,IAAM,IAAU,EAAwB,kBAAkB;EAI1D,AAHA,EAAQ,aAAa,QAAQ,MAAM,GACnC,EAAQ,QAAQ,QAAQ,OAAO,CAAK,GACpC,EAAQ,iBAAiB,SAAS,KAAK,YAAY,GACnD,EAAQ,iBAAiB,WAAW,KAAK,UAAU;EAEnD,IAAM,IAAS,SAAS,cAAc,KAAK;EAE3C,AADA,EAAO,YAAY,mBACnB,EAAQ,YAAY,CAAM;EAE1B,IAAM,IAAS,MAAU,IAAI,KAAK,oBAAoB,IAAI,KAAK,yBAAyB,IAAQ,CAAC;EAEjG,IAAI,GAAQ;GACV,IAAM,IAAO,EAAY,KAAK;IAC5B;IACA;IACA,WAAW,MAAU,IAAI,KAAK,YAAY;IAC1C,QAAQ,MAAU,IAAI,KAAK,SAAS;IACpC,YAAY,MAAU,KAAI,KAAK;IAC/B,UAAU;GACZ,CAAC;GAID,AAHA,KAAK,UAAU,IAAI,GAAO;IAAE,KAAK;IAAM;GAAQ,CAAC,GAC5C,MAAU,KAAG,KAAK,gBAAgB,GACtC,EAAK,KAAK,GACV,EAAoB,GAAS,EAAE,aAAU,CAAC;EAC5C;CACF;CAEA,gBAAwB,GAAe;EACrC,IAAM,IAAU,KAAK,UAAU,IAAI,CAAK,CAAC,EAAE;EAK3C,AAJA,GAAS,oBAAoB,SAAS,KAAK,YAAY,GACvD,GAAS,oBAAoB,WAAW,KAAK,UAAU,GACvD,GAAS,OAAO,GAChB,KAAK,UAAU,IAAI,CAAK,CAAC,EAAE,IAAI,QAAQ,GACvC,KAAK,UAAU,OAAO,CAAK;CAC7B;CAEA,cAAsB;EACpB,KAAK,IAAM,KAAS,KAAK,UAAU,KAAK,GACtC,KAAK,gBAAgB,CAAK;CAE9B;CAEA,MAAc,2BAA2B,GAAsB,GAAyB;EAChF,MAAM,EAAoB,EAAQ,OAAO,KAC3C,KAAK,wBAAwB,IAAI,CAAU,MAAM,MAErD,KAAK,wBAAwB,OAAO,CAAU,GAC9C,KAAK,qBAAqB,EAAQ,SAAS,CAAU,GACrD,EAAQ,IAAI,QAAQ,GACpB,EAAQ,QAAQ,OAAO;CACzB;CAEA,iCAAyC;EAMvC,AALA,KAAK,wBAAwB,SAAS,GAAS,MAAe;GAG5D,AAFA,KAAK,qBAAqB,EAAQ,SAAS,CAAU,GACrD,EAAQ,IAAI,QAAQ,GACpB,EAAQ,QAAQ,OAAO;EACzB,CAAC,GACD,KAAK,wBAAwB,MAAM;CACrC;CAEA,qBAA6B,GAAsB,GAAyB;EAC1E,IAAM,IAAS,EAAQ,cAA2B,kBAAkB;EAC/D,KACL,MAAM,KAAK,EAAO,QAAQ,CAAC,CAAC,SAAQ,MAAS,EAAW,YAAY,CAAK,CAAC;CAC5E;CAEA,gBAAwB,IAAS,KAAK,MAAM;EAC1C,IAAM,IAAa,KAAU,KAAK;EAC9B,MAAe,KAAK,mBAEpB,IAAY,EAAW,IACtB,EAAa,GAClB,KAAK,iBAAiB;CACxB;CAEA,sBAAkD;EAEhD,IAAM,KADO,KAAK,YAAY,cAA+B,wBAAsB,EAAA,EAClE,iBAAiB,CAAC,CAAC;EACpC,OAAO,aAAc,cAAc,IAAK;CAC1C;CAEA,yBAAiC,GAAmC;EAClE,IAAM,IAAM,KAAK,YAAY;EAC7B,IAAI,MAAQ,KAAA,GAAW,OAAO;EAE9B,IAAM,IADQ,KAAK,eAAe,CACrB,CAAA,CAAM;EAEnB,OADK,IACE,EAAK,YAAY,cAAc,aAAa,KAAK,IADtC;CAEpB;CAwFA,sBAA8B,GAAe;EAC3C,OAAO,KAAK,eAAe,CAAK,CAAC,CAAC,QAAO,MAAQ,EAAK,QAAQ,sCAAsC,CAAC;CACvG;CAEA,gBAAwB,GAAgD;EAMtE,OALkB,GACd,aAAa,CAAC,CACf,MAAM,MAA8B,aAAgB,eAAe,EAAK,QAAQ,sBAAsB,CAAC,KAGnG,CAAC,GAAG,KAAK,UAAU,OAAO,CAAC,CAAC,CAChC,SAAS,EAAE,iBAAc,MAAM,KAAK,EAAQ,iBAA8B,sBAAsB,CAAC,CAAC,CAAC,CACnG,MAAK,MAAQ,EAAQ,EAAK,YAAY,aAAc;CACzD;CAEA,iBAAyB,IAAO,KAAK,gBAAgB,GAAuB;EACrE,OAEL,OADgB,CAAC,GAAG,KAAK,UAAU,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG,OAAW,EAAM,QAAQ,SAAS,CAAI,CACtF,CAAA,GAAU;CACnB;CAEA,eAAuB,GAA+B;EAChD,CAAC,KAAQ,EAAK,aAAa,UAAU,KAEzC,EAAU,YAAY;CACxB;CAEA,oBAA4B,GAAwB;EAClD,KAAK,IAAM,KAAQ,EAAE,aAAa,GAGhC,IAFI,MAAS,QAAQ,MAAS,KAAK,cAC/B,aAAgB,QAAQ,EAAK,YAAY,MAAM,KAAK,cACpD,aAAgB,QAAQ,CAAC,GAAG,KAAK,UAAU,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,iBAAc,EAAQ,SAAS,CAAI,CAAC,GACnG,OAAO;EAEX,OAAO;CACT;CAEA,6BAAqC;EAGnC,AAFA,KAAK,sBAAsB,IAC3B,aAAa,KAAK,wBAAwB,GAC1C,KAAK,2BAA2B,iBAAiB;GAC/C,KAAK,sBAAsB;EAC7B,CAAC;CACH;CAEA,mBAA2B;EAEzB,AADA,KAAK,iBAAiB,SAAQ,MAAM,EAAG,CAAC,GACxC,KAAK,iBAAiB,SAAS;EAE/B,IAAM,IAAW,KAAK,YAAY,SAAS;EAC3C,KAAK,IAAI,IAAK,GAAG,KAAM,GAAU,KAAM;GACrC,IAAM,IAAQ,KAAK,eAAe,CAAE;GAC/B,EAAM,UACX,EAAM,SAAS,GAAM,MAAQ;IAC3B,IAAI,CAAC,EAAK,QAAQ,sBAAsB,KAAK,EAAK,aAAa,UAAU,GAAG;IAC5E,IAAM,KAAW,MAAwB;KACnC,EAAM,gBAAgB,YAC1B,aAAa,KAAK,UAAU,GACxB,EAAK,aAAa,SAAS,IACzB,KAAK,YAAY,OAAQ,MAC3B,KAAK,aAAa,iBAAiB,KAAK,eAAe,GAAI,CAAG,GAAG,GAAG,KAE7D,KAAK,YAAY,SAAS,KACnC,KAAK,kBAAkB,IAAK,CAAC;IAEjC;IAEA,AADA,EAAK,iBAAiB,gBAAgB,GAAS,EAAE,SAAS,GAAK,CAAC,GAChE,KAAK,iBAAiB,WAAW,EAAK,oBAAoB,gBAAgB,CAAO,CAAC;GACpF,CAAC;EACH;CACF;CAEA,yBAAiC;EAC/B,4BAA4B,KAAK,iBAAiB,CAAC;CACrD;CAEA,SAAkB;EAChB,OAAO,CAAI;6CAC8B,KAAK,gBAAgB;;;;CAIhE;AAKF;AA3hBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,WAAW;CAAe,WAAW;AAAuB,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAIvF,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAUxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,IAAA,GAQzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GA7BR,IAAA,EAAA,CAAA,EAAc,iBAAiB,CAAA,GAAA,CAAA"}
@@ -0,0 +1,6 @@
1
+ //#region src/components/dropdown/style.css?inline
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}:host([disabled]) .dropdown-trigger{cursor:not-allowed;cursor:pointer;display:inline-flex}.dropdown-overlay{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);-webkit-user-select:none;user-select:none;z-index:var(--wui-layer-menu,100);box-sizing:border-box;background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;position:fixed}.dropdown-scroll{min-width:200px;max-height:320px;padding:4px;overflow-y:auto}";
3
+ //#endregion
4
+ export { e as default };
5
+
6
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n:host([disabled]) .dropdown-trigger {\n cursor: not-allowed;\n cursor: pointer;\n display: inline-flex;\n}\n\n.dropdown-overlay {\n --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n user-select: none;\n\n position: fixed;\n z-index: var(--wui-layer-menu, 100);\n\n box-sizing: border-box;\n border-radius: 20px;\n\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n.dropdown-scroll {\n overflow-y: auto;\n min-width: 200px;\n max-height: 320px;\n padding: 4px;\n}\n"],"mappings":""}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/dropdown-divider/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.divider{background-color:var(--wui-color-border,#0000001a);height:1px;margin:4px 8px}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:block}.divider{background-color:var(--wui-color-border,#0000001a);height:1px;margin:4px 8px}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown-divider/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.divider {\n height: 1px;\n margin: 4px 8px;\n background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown-divider/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: block;\n}\n\n.divider {\n height: 1px;\n margin: 4px 8px;\n background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n"],"mappings":""}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/icon/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-flex}svg{color:var(--wui-icon-color,inherit);display:block}svg.spin{animation:.6s linear infinite wui-icon-spin}@keyframes wui-icon-spin{to{transform:rotate(360deg)}}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-flex}svg{color:var(--wui-icon-color,inherit);display:block}svg.spin{animation:.6s linear infinite wui-icon-spin}@keyframes wui-icon-spin{to{transform:rotate(360deg)}}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/icon/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n}\n\nsvg {\n display: block;\n color: var(--wui-icon-color, inherit);\n}\n\nsvg.spin {\n animation: wui-icon-spin 0.6s linear infinite;\n}\n\n@keyframes wui-icon-spin {\n to {\n transform: rotate(360deg);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/icon/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-flex;\n}\n\nsvg {\n display: block;\n color: var(--wui-icon-color, inherit);\n}\n\nsvg.spin {\n animation: wui-icon-spin 0.6s linear infinite;\n}\n\n@keyframes wui-icon-spin {\n to {\n transform: rotate(360deg);\n }\n}\n"],"mappings":""}
@@ -11,7 +11,7 @@ export * from './drawer';
11
11
  export * from './dropdown-divider';
12
12
  export * from './dropdown-header';
13
13
  export * from './dropdown-item';
14
- export * from './dropdown-menu';
14
+ export * from './dropdown';
15
15
  export * from './empty';
16
16
  export * from './icon';
17
17
  export * from './input';
@@ -12,7 +12,7 @@ import { WebUiDropdownItem as u } from "./dropdown-item/index.js";
12
12
  import { WebUiContextMenu as d } from "./context-menu/index.js";
13
13
  import { WebUiDialog as f } from "./dialog/index.js";
14
14
  import { WebUiDrawer as p } from "./drawer/index.js";
15
- import { WebUiDropdownMenu as m } from "./dropdown-menu/index.js";
15
+ import { WebUiDropdown as m } from "./dropdown/index.js";
16
16
  import { WebUiEmpty as h } from "./empty/index.js";
17
17
  import { WebUiInput as g } from "./input/index.js";
18
18
  import { WebUiInputNumber as _ } from "./input-number/index.js";
@@ -34,4 +34,4 @@ import "./toast/index.js";
34
34
  import { WebUiSvgDrawLines as N } from "./svg-draw-lines/index.js";
35
35
  import { WebUiSwitch as P } from "./switch/index.js";
36
36
  import { WebUiTooltip as F } from "./tooltip/index.js";
37
- export { t as WebUiAvatar, r as WebUiBackTop, i as WebUiBadge, n as WebUiButton, a as WebUiButtonGroup, o as WebUiCheckbox, s as WebUiCheckboxGroup, d as WebUiContextMenu, f as WebUiDialog, p as WebUiDrawer, c as WebUiDropdownDivider, l as WebUiDropdownHeader, u as WebUiDropdownItem, m as WebUiDropdownMenu, h as WebUiEmpty, e as WebUiIcon, g as WebUiInput, _ as WebUiInputNumber, v as WebUiLayout, y as WebUiOption, b as WebUiPopover, x as WebUiRadio, S as WebUiRadioGroup, C as WebUiSegmented, w as WebUiSegmentedTrigger, T as WebUiSelect, E as WebUiSlider, D as WebUiSpinner, O as WebUiSpinnerElement, N as WebUiSvgDrawLines, P as WebUiSwitch, k as WebUiTextarea, A as WebUiTheme, M as WebUiToast, F as WebUiTooltip, j as toast };
37
+ export { t as WebUiAvatar, r as WebUiBackTop, i as WebUiBadge, n as WebUiButton, a as WebUiButtonGroup, o as WebUiCheckbox, s as WebUiCheckboxGroup, d as WebUiContextMenu, f as WebUiDialog, p as WebUiDrawer, m as WebUiDropdown, c as WebUiDropdownDivider, l as WebUiDropdownHeader, u as WebUiDropdownItem, h as WebUiEmpty, e as WebUiIcon, g as WebUiInput, _ as WebUiInputNumber, v as WebUiLayout, y as WebUiOption, b as WebUiPopover, x as WebUiRadio, S as WebUiRadioGroup, C as WebUiSegmented, w as WebUiSegmentedTrigger, T as WebUiSelect, E as WebUiSlider, D as WebUiSpinner, O as WebUiSpinnerElement, N as WebUiSvgDrawLines, P as WebUiSwitch, k as WebUiTextarea, A as WebUiTheme, M as WebUiToast, F as WebUiTooltip, j as toast };
@@ -1,6 +1,10 @@
1
1
  import { LitElement } from 'lit';
2
2
  export declare class WebUiLayout extends LitElement {
3
3
  static styles: import('lit').CSSResult[];
4
+ private _sidebarOpen;
5
+ private _toggleSidebar;
6
+ private _closeSidebar;
7
+ private _onSidebarClick;
4
8
  render(): import('lit').TemplateResult<1>;
5
9
  readonly $events: Record<string, never>;
6
10
  }