@greypan/web-ui 7.0.0 → 8.1.0

package/dist/assets/menu-portal.js

@@ -1,5 +1,5 @@
 //#region src/assets/menu-portal.css?inline
-var e = ".wui-menu-portal-overlay.wui-floating-panel{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-internal-duration-float-enter:var(--wui-duration-float-enter,.24s);--wui-internal-duration-float-exit:var(--wui-duration-float-exit,.16s);--wui-glass-corner-radius:var(--wui-radius-menu,18px);-webkit-user-select:none;user-select:none;z-index:var(--wui-layer-menu,100);box-sizing:border-box;min-width:var(--wui-overlay-min-width,200px);border-radius:var(--wui-radius-menu,18px);max-width:90vw;max-height:80vh;color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-menu,#f6f6f6d1);position:fixed;overflow:hidden}.wui-menu-portal-overlay.wui-floating-panel .wui-menu-scroll{max-height:80vh;overflow-y:auto}.wui-menu-portal-overlay.wui-floating-panel .wui-menu-content{padding:4px}.wui-menu-portal-overlay.wui-floating-panel.dropdown-overlay .wui-menu-scroll{max-height:320px}.wui-menu-portal-overlay.wui-floating-panel.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.wui-floating-panel.context-submenu{z-index:var(--wui-layer-menu-nested,110)}";
+var e = ".wui-menu-portal-overlay.wui-floating-panel{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-internal-duration-float-enter:var(--wui-duration-float-enter,.24s);--wui-internal-duration-float-exit:var(--wui-duration-float-exit,.16s);--wui-glass-corner-radius:var(--wui-radius-menu,18px);-webkit-user-select:none;user-select:none;z-index:var(--wui-layer-menu,100);box-sizing:border-box;min-width:var(--wui-overlay-min-width,200px);border-radius:var(--wui-radius-menu,18px);max-width:90vw;max-height:80vh;color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-menu,#fefefec2);position:fixed;overflow:hidden}.wui-menu-portal-overlay.wui-floating-panel .wui-menu-scroll{max-height:80vh;overflow-y:auto}.wui-menu-portal-overlay.wui-floating-panel .wui-menu-content{padding:4px}.wui-menu-portal-overlay.wui-floating-panel.dropdown-overlay .wui-menu-scroll{max-height:320px}.wui-menu-portal-overlay.wui-floating-panel.dropdown-overlay[data-level]:not([data-level=\"0\"]),.wui-menu-portal-overlay.wui-floating-panel.context-submenu{z-index:var(--wui-layer-menu-nested,110)}";
 //#endregion
 export { e as default };
 

package/dist/assets/menu-portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":["/* 菜单面板：wui-glass 玻璃（背景/描边/阴影）由面板自身承担，随面板 opacity 与\n   backdrop-filter 插值一起过渡（单层玻璃，见 overlay-motion.css）。\n   选择器用 .wui-menu-portal-overlay.wui-floating-panel（0,2,0）压制 .wui-glass\n   （0,1,0）：面板无自有 shadow root，直接挂在宿主 shadow（overlay root 的 \\3c style>\n   或 dialog 的 adopted stylesheets）里，若只用单类选择器，dialog 场景下宿主 adopted\n   stylesheets 的 .wui-glass 会在层叠中晚于面板内联 \\3c style> 而胜出（position:relative\n   顶掉 fixed、背景/阴影变量回弱默认）。 */\n.wui-menu-portal-overlay.wui-floating-panel {\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-internal-duration-float-enter: var(--wui-duration-float-enter, 240ms);\n  --wui-internal-duration-float-exit: var(--wui-duration-float-exit, 160ms);\n  --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n  user-select: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 200px);\n  max-width: 90vw;\n  max-height: 80vh;\n  border-radius: var(--wui-radius-menu, 18px);\n\n  color: var(--wui-color-text, #1b1b1b);\n\n  /* 玻璃背景：面板自身 overflow:hidden 不裁自身的 box-shadow（box-shadow 不受\n     元素自身 overflow 影响）。 */\n  background-color: var(--wui-color-surface-menu, rgb(246 246 246 / 0.82));\n\n  & .wui-menu-scroll {\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n\n  & .wui-menu-content {\n    padding: 4px;\n  }\n\n  &.dropdown-overlay {\n    & .wui-menu-scroll {\n      max-height: 320px;\n    }\n\n    &[data-level]:not([data-level='0']) {\n      z-index: var(--wui-layer-menu-nested, 110);\n    }\n  }\n\n  &.context-submenu {\n    z-index: var(--wui-layer-menu-nested, 110);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"menu-portal.js","names":[],"sources":["../../src/assets/menu-portal.css?inline"],"sourcesContent":["/* 菜单面板：wui-glass 玻璃（背景/描边/阴影）由面板自身承担，随面板 opacity 与\n   backdrop-filter 插值一起过渡（单层玻璃，见 overlay-motion.css）。\n   选择器用 .wui-menu-portal-overlay.wui-floating-panel（0,2,0）压制 .wui-glass\n   （0,1,0）：面板无自有 shadow root，直接挂在宿主 shadow（overlay root 的 \\3c style>\n   或 dialog 的 adopted stylesheets）里，若只用单类选择器，dialog 场景下宿主 adopted\n   stylesheets 的 .wui-glass 会在层叠中晚于面板内联 \\3c style> 而胜出（position:relative\n   顶掉 fixed、背景/阴影变量回弱默认）。 */\n.wui-menu-portal-overlay.wui-floating-panel {\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-internal-duration-float-enter: var(--wui-duration-float-enter, 240ms);\n  --wui-internal-duration-float-exit: var(--wui-duration-float-exit, 160ms);\n  --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n  user-select: none;\n\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 200px);\n  max-width: 90vw;\n  max-height: 80vh;\n  border-radius: var(--wui-radius-menu, 18px);\n\n  color: var(--wui-color-text, #1b1b1b);\n\n  /* 玻璃背景：面板自身 overflow:hidden 不裁自身的 box-shadow（box-shadow 不受\n     元素自身 overflow 影响）。 */\n  background-color: var(--wui-color-surface-menu, rgb(254 254 254 / 0.76));\n\n  & .wui-menu-scroll {\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n\n  & .wui-menu-content {\n    padding: 4px;\n  }\n\n  &.dropdown-overlay {\n    & .wui-menu-scroll {\n      max-height: 320px;\n    }\n\n    &[data-level]:not([data-level='0']) {\n      z-index: var(--wui-layer-menu-nested, 110);\n    }\n  }\n\n  &.context-submenu {\n    z-index: var(--wui-layer-menu-nested, 110);\n  }\n}\n"],"mappings":""}

package/dist/assets/selection-control.js

@@ -1,5 +1,5 @@
 //#region src/assets/selection-control.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{cursor:default;vertical-align:middle;align-items:center;display:inline-flex}:host([disabled]){cursor:not-allowed}:where(.wui-radio,.wui-checkbox){cursor:inherit;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}:where(.wui-radio,.wui-checkbox):focus-visible{border-radius:var(--wui-radius-control,calc(infinity * 1px));outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}:host([data-wui-pointer-focus]) :where(.wui-radio,.wui-checkbox):focus-visible{outline-color:#0000}:where(.wui-radio.is-disabled,.wui-checkbox.is-disabled){cursor:not-allowed;color:var(--wui-color-text-secondary,#6a6a6a);opacity:.4}:where(.wui-radio-circle,.wui-checkbox-box){isolation:isolate;width:var(--wui-selection-control-size,18px);height:var(--wui-selection-control-size,18px);background-color:var(--wui-color-surface-control,#dfdfdf);transition:background-color var(--wui-duration-trigger,.16s) ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}:where(.wui-radio-circle,.wui-checkbox-box):before{content:\"\";z-index:-1;border-radius:inherit;position:absolute;inset:0}:where(.wui-radio-label,.wui-checkbox-label){pointer-events:none}@media (hover:hover) and (pointer:fine){:where(.wui-radio,.wui-checkbox):hover:not(.is-disabled,.is-checked) :where(.wui-radio-circle,.wui-checkbox-box):before{background-color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent)}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{cursor:default;vertical-align:middle;align-items:center;display:inline-flex}:host([disabled]){cursor:not-allowed}:where(.wui-radio,.wui-checkbox){cursor:inherit;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}:where(.wui-radio,.wui-checkbox):focus-visible{border-radius:var(--wui-radius-control,calc(infinity * 1px));outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}:where(.wui-radio.is-label-empty,.wui-checkbox.is-label-empty){gap:0}:host([data-wui-pointer-focus]) :where(.wui-radio,.wui-checkbox):focus-visible{outline-color:#0000}:where(.wui-radio.is-disabled,.wui-checkbox.is-disabled){cursor:not-allowed;color:var(--wui-color-text-secondary,#6a6a6a);opacity:.4}:where(.wui-radio-circle,.wui-checkbox-box){isolation:isolate;width:var(--wui-selection-control-size,18px);height:var(--wui-selection-control-size,18px);background-color:var(--wui-color-surface-control,#dfdfdf);transition:background-color var(--wui-duration-trigger,.16s) ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}:where(.wui-radio-circle,.wui-checkbox-box):before{content:\"\";z-index:-1;border-radius:inherit;position:absolute;inset:0}:where(.wui-radio-label,.wui-checkbox-label){pointer-events:none}@media (hover:hover) and (pointer:fine){:where(.wui-radio,.wui-checkbox):hover:not(.is-disabled,.is-checked) :where(.wui-radio-circle,.wui-checkbox-box):before{background-color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent)}}";
 //#endregion
 export { e as default };
 

package/dist/assets/selection-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/assets/selection-control.css?inline"],"sourcesContent":["/*\n * radio / checkbox 共享外壳。\n *\n * 指示器只有 18px。宿主一旦走 inline-block，页面行高会在宿主内生成匿名行盒，把盒子撑到\n * 行高（Tailwind preflight 下是 24px），且多出的空隙落在哪一侧取决于内部基线落点，radio 与\n * checkbox 因此一个贴顶一个贴底。改成 inline-flex 后宿主高度由内容决定，行高不再参与，\n * 与相邻文字的对齐交给 vertical-align 显式声明。\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n/* :where() 保持零特异性，组件级配置（圆角、选中色、内部图形）始终覆盖共享层。 */\n:where(.wui-radio, .wui-checkbox) {\n  cursor: inherit;\n  user-select: none;\n\n  display: inline-flex;\n  gap: 10px;\n  align-items: center;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text, #1b1b1b);\n\n  &:focus-visible {\n    border-radius: var(--wui-radius-control, calc(infinity * 1px));\n    outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n:host([data-wui-pointer-focus]) :where(.wui-radio, .wui-checkbox):focus-visible {\n  outline-color: transparent;\n}\n\n:where(.wui-radio.is-disabled, .wui-checkbox.is-disabled) {\n  cursor: not-allowed;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  opacity: 0.4;\n}\n\n/*\n * 指示器底色取控件档。surface-raised 在深色下（#2c2c2e）离页面底色（#242628）只有 8 个\n * 亮度点，未选中时几乎看不出有一个圆/方框；surface-control 才是主题里「控件自己的底」\n * 那一档（中性按钮同档），深色比页面高 22 个亮度点，浅色下也从近白的 #f2f2f7 变成可读的 #dfdfdf。\n */\n:where(.wui-radio-circle, .wui-checkbox-box) {\n  isolation: isolate;\n  position: relative;\n\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-selection-control-size, 18px);\n  height: var(--wui-selection-control-size, 18px);\n\n  background-color: var(--wui-color-surface-control, #dfdfdf);\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n}\n\n/*\n * 状态层走覆盖层，不占用指示器自己的 background-color：同一个属性没法一半过渡一半即时，\n * 而这里要的是 hover 当帧切换、选中态的 accent 按 --wui-duration-trigger 淡入淡出。\n * z-index: -1 配父级 isolation 把覆盖层夹在控件底与圆点/勾之间，半径跟着指示器走。\n */\n:where(.wui-radio-circle, .wui-checkbox-box)::before {\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n\n  border-radius: inherit;\n}\n\n:where(.wui-radio-label, .wui-checkbox-label) {\n  pointer-events: none;\n}\n\n/*\n * 未激活态的 hover 状态层。用半透明色而不是混进控件底：覆盖层本就压在不透明的控件底上，\n * 合成结果与 color-mix(text 6%, surface-control) 一致，深色档同样成立。\n * 标签文字带 pointer-events: none，命中落回 label 自身，所以整条触发区（含右侧文字）\n * 的 hover 都会作用到指示器。hover 只在真正的指针设备上生效，避免触屏留态。\n */\n@media (hover: hover) and (pointer: fine) {\n  :where(.wui-radio, .wui-checkbox):hover:not(.is-disabled, .is-checked)\n    :where(.wui-radio-circle, .wui-checkbox-box)::before {\n    background-color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"selection-control.js","names":[],"sources":["../../src/assets/selection-control.css?inline"],"sourcesContent":["/*\n * radio / checkbox 共享外壳。\n *\n * 指示器只有 18px。宿主一旦走 inline-block，页面行高会在宿主内生成匿名行盒，把盒子撑到\n * 行高（Tailwind preflight 下是 24px），且多出的空隙落在哪一侧取决于内部基线落点，radio 与\n * checkbox 因此一个贴顶一个贴底。改成 inline-flex 后宿主高度由内容决定，行高不再参与，\n * 与相邻文字的对齐交给 vertical-align 显式声明。\n */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  cursor: default;\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n/* :where() 保持零特异性，组件级配置（圆角、选中色、内部图形）始终覆盖共享层。 */\n:where(.wui-radio, .wui-checkbox) {\n  cursor: inherit;\n  user-select: none;\n\n  display: inline-flex;\n  gap: 10px;\n  align-items: center;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text, #1b1b1b);\n\n  &:focus-visible {\n    border-radius: var(--wui-radius-control, calc(infinity * 1px));\n    outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n/*\n * 标签没有可渲染内容时把间距一并收掉。gap 只认「这里有个 flex item」，不认它有没有宽度，所以空槽位\n * 或只挂了一个视觉隐藏的无障碍名时，指示器右边照样多出这一段；判据见 LabelEmptinessController。\n */\n:where(.wui-radio.is-label-empty, .wui-checkbox.is-label-empty) {\n  gap: 0;\n}\n\n:host([data-wui-pointer-focus]) :where(.wui-radio, .wui-checkbox):focus-visible {\n  outline-color: transparent;\n}\n\n:where(.wui-radio.is-disabled, .wui-checkbox.is-disabled) {\n  cursor: not-allowed;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  opacity: 0.4;\n}\n\n/*\n * 指示器底色取控件档。surface-raised 在深色下（#2c2c2e）离页面底色（#242628）只有 8 个\n * 亮度点，未选中时几乎看不出有一个圆/方框；surface-control 才是主题里「控件自己的底」\n * 那一档（中性按钮同档），深色比页面高 22 个亮度点，浅色下也从近白的 #f2f2f7 变成可读的 #dfdfdf。\n */\n:where(.wui-radio-circle, .wui-checkbox-box) {\n  isolation: isolate;\n  position: relative;\n\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-selection-control-size, 18px);\n  height: var(--wui-selection-control-size, 18px);\n\n  background-color: var(--wui-color-surface-control, #dfdfdf);\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n}\n\n/*\n * 状态层走覆盖层，不占用指示器自己的 background-color：同一个属性没法一半过渡一半即时，\n * 而这里要的是 hover 当帧切换、选中态的 accent 按 --wui-duration-trigger 淡入淡出。\n * z-index: -1 配父级 isolation 把覆盖层夹在控件底与圆点/勾之间，半径跟着指示器走。\n */\n:where(.wui-radio-circle, .wui-checkbox-box)::before {\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n\n  border-radius: inherit;\n}\n\n:where(.wui-radio-label, .wui-checkbox-label) {\n  pointer-events: none;\n}\n\n/*\n * 未激活态的 hover 状态层。用半透明色而不是混进控件底：覆盖层本就压在不透明的控件底上，\n * 合成结果与 color-mix(text 6%, surface-control) 一致，深色档同样成立。\n * 标签文字带 pointer-events: none，命中落回 label 自身，所以整条触发区（含右侧文字）\n * 的 hover 都会作用到指示器。hover 只在真正的指针设备上生效，避免触屏留态。\n */\n@media (hover: hover) and (pointer: fine) {\n  :where(.wui-radio, .wui-checkbox):hover:not(.is-disabled, .is-checked)\n    :where(.wui-radio-circle, .wui-checkbox-box)::before {\n    background-color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  }\n}\n"],"mappings":""}

package/dist/components/autocomplete/index.d.ts

@@ -373,6 +373,12 @@ declare const WebUiAutocomplete_base: {
  * 可编辑输入框：`value` 即当前输入文本（表单值），键入时按 `filter` 模式过滤候选，
  * 选择 option 时文本回填为该项 label，`selected-value` 暴露该项的 value。
  * `allow-custom-value` 开启后，Enter 可把不匹配候选的原文作为 custom value 显式提交。
+ *
+ * 触发器跟随 select 的 wrapper div 模式：`slot[name="trigger"]` 可替换默认触发器
+ * （shadow 内的 `web-ui-input`）；多行触发器（如 `web-ui-textarea`）保留 Enter 换行语义，
+ * 关闭面板用 Escape 或 blur。
+ * tab 位只属于触发器自身：默认触发器是 shadow 内 input，自定义触发器由消费者提供
+ * 可聚焦元素（README 契约）；包装 div 恒为 tabindex="-1"，不占顺序焦点，避免双 tab 位。
  */
 export declare class WebUiAutocomplete extends WebUiAutocomplete_base {
     static styles: import('lit').CSSResult[];
@@ -403,6 +409,7 @@ export declare class WebUiAutocomplete extends WebUiAutocomplete_base {
     private _isOpen;
     private _activeIndex;
     private _focused;
+    private _hasTriggerSlot;
     private static _nextInstanceId;
     private readonly _idPrefix;
     private readonly _a11yOptionIds;
@@ -412,14 +419,19 @@ export declare class WebUiAutocomplete extends WebUiAutocomplete_base {
     private _portalContent?;
     private readonly _scrollLock;
     private readonly _optionPortal;
+    private readonly _trigger;
     private readonly _overlay;
     private readonly _panel;
     get isOpen(): boolean;
     get open(): boolean;
+    focus(options?: FocusOptions): void;
+    blur(): void;
     private _onClickOutside;
     private _onFocusOut;
     private _handlePanelPointerDown;
     connectedCallback(): void;
+    private _onTriggerSlotChange;
+    private _syncTriggerSlot;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
@@ -451,11 +463,11 @@ export declare class WebUiAutocomplete extends WebUiAutocomplete_base {
     private _findExactOption;
     private _hasExactOption;
     private _selectCustomValue;
-    private _onInput;
-    private _onInnerChange;
-    private _onFocus;
-    private _onInputClick;
-    private _onBlur;
+    private _onTriggerInput;
+    private _onTriggerClick;
+    private _onTriggerFocusIn;
+    private _onTriggerFocusOut;
+    private _isSlottedFocus;
     private readonly _openController;
     private _open;
     private _close;

package/dist/components/autocomplete/index.js

@@ -1,35 +1,39 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import "../option/index.js";
 import t from "../../assets/glass.js";
-import n from "../../assets/overlay-motion.js";
-import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
-import { normalizeLiteral as o } from "../../shared/normalize/index.js";
+import { FormAssociated as n, FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
+import { normalizeLiteral as a } from "../../shared/normalize/index.js";
+import "../input/index.js";
+import "../option/index.js";
+import o from "../../assets/overlay-motion.js";
 import { dispatchOpenChangeEvent as s } from "../../shared/open-state/index.js";
-import { createComboboxOpenController as c, createOptionListenerBinding as l, handleComboboxFocusOut as u, nextWrappingIndex as d } from "../../shared/option-portal/combobox-shell.js";
-import { defineOptionPortal as f } from "../../shared/option-portal/index.js";
-import { defineAnchoredPanel as p } from "../../shared/overlay/anchored-panel.js";
-import { defineOpenOverlay as m } from "../../shared/overlay/open-overlay.js";
-import { applyOverlayVariables as h, defineOverlayPortal as g } from "../../shared/overlay/portal.js";
-import { defineScrollLockLease as _ } from "../../shared/scroll-lock/scroll-lock.js";
-import v from "./style.js";
-import { LitElement as y, html as b, nothing as x, unsafeCSS as S } from "lit";
-import { customElement as C, property as w, state as T } from "lit/decorators.js";
-import { ifDefined as E } from "lit/directives/if-defined.js";
+import { createComboboxOpenController as c, createOptionListenerBinding as l, defineComboboxTrigger as u, handleComboboxFocusOut as d, nextWrappingIndex as f } from "../../shared/option-portal/combobox-shell.js";
+import { defineOptionPortal as p } from "../../shared/option-portal/index.js";
+import { defineAnchoredPanel as m } from "../../shared/overlay/anchored-panel.js";
+import { defineOpenOverlay as h } from "../../shared/overlay/open-overlay.js";
+import { applyOverlayVariables as g, defineOverlayPortal as _ } from "../../shared/overlay/portal.js";
+import { defineScrollLockLease as v } from "../../shared/scroll-lock/scroll-lock.js";
+import y from "./style.js";
+import { LitElement as b, html as x, nothing as S, unsafeCSS as C } from "lit";
+import { customElement as w, property as T, state as E } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
 //#region src/components/autocomplete/index.ts
-var D, O = [
+var O, k = [
 	"none",
 	"prefix",
 	"contains"
 ];
-function k(e) {
+function A(e) {
 	return e instanceof Element && e.getAttribute("slot") === "empty";
 }
-var A = class extends r(y) {
+function j(e) {
+	return e instanceof Element && e.slot === "trigger";
+}
+var M = class extends n(b) {
 	static {
-		D = this;
+		O = this;
 	}
 	constructor(...e) {
-		super(...e), this.placeholder = "", this.borderless = !1, this.disabled = !1, this.readonly = !1, this.required = !1, this.portal = !1, this.noScrollLock = !1, this.allowCustomValue = !1, this.name = "", this.ariaLabel = null, this._filter = "contains", this._value = "", this._selectedValue = "", this._formAssociation = a({
+		super(...e), this.placeholder = "", this.borderless = !1, this.disabled = !1, this.readonly = !1, this.required = !1, this.portal = !1, this.noScrollLock = !1, this.allowCustomValue = !1, this.name = "", this.ariaLabel = null, this._filter = "contains", this._value = "", this._selectedValue = "", this._formAssociation = i({
 			host: this,
 			initialize: () => {
 				let e = this.getAttribute("value");
@@ -45,19 +49,33 @@ var A = class extends r(y) {
 				typeof e == "string" && (this.value = e);
 			},
 			syncValidity: () => this._syncValidity()
-		}).make(), this._formAssociationController = new i(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._idPrefix = `web-ui-autocomplete-${++D._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._scrollLock = _().make(), this._optionPortal = f().make({
+		}).make(), this._formAssociationController = new r(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._hasTriggerSlot = !1, this._idPrefix = `web-ui-autocomplete-${++O._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._scrollLock = v().make(), this._optionPortal = p().make({
 			element: this,
 			idPrefix: `${this._idPrefix}-option`,
 			getPortal: () => this._portal,
 			getPortalContent: () => this._portalContent,
 			isOpen: () => this.portal && this._isOpen,
-			getMigratableNodes: () => Array.from(this.childNodes).filter((e) => !k(e)),
+			getMigratableNodes: () => Array.from(this.childNodes).filter((e) => !A(e) && !j(e)),
 			hasUpdated: () => this.hasUpdated,
 			requestUpdate: () => this.requestUpdate(),
 			bindOption: (e) => this._bindOption(e),
 			unbindOption: (e) => this._unbindOption(e)
-		}), this._overlay = m().make({ requestClose: () => this._close() }), this._panel = p().make({
-			getAnchor: () => this.shadowRoot?.querySelector(".input-wrapper") ?? null,
+		}), this._trigger = u().make({
+			getWrapper: () => this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
+			getCustomTrigger: () => {
+				let e = this.shadowRoot?.querySelector("slot[name=\"trigger\"]")?.assignedElements()[0];
+				return e instanceof HTMLElement ? e : null;
+			},
+			getFallbackTrigger: () => this.shadowRoot?.querySelector(".autocomplete-input") ?? null,
+			onInput: (e) => this._onTriggerInput(e),
+			onClick: () => this._onTriggerClick(),
+			onFocusIn: (e) => this._onTriggerFocusIn(e),
+			onFocusOut: (e) => this._onTriggerFocusOut(e)
+		}), this._overlay = h().make({
+			requestClose: () => this._close(),
+			isConnected: () => this.isConnected
+		}), this._panel = m().make({
+			getAnchor: () => this._trigger.getTrigger() ?? this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".autocomplete-overlay") ?? null,
 			getPositioning: () => ({
 				placement: "bottom-start",
@@ -71,9 +89,11 @@ var A = class extends r(y) {
 		}), this._onClickOutside = (e) => {
 			this._isOpen && (e.composedPath().includes(this) || this._panel.getHandle()?.containsEvent(e) || this._close());
 		}, this._onFocusOut = () => {
-			u(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
+			d(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
 		}, this._handlePanelPointerDown = (e) => {
 			e.preventDefault();
+		}, this._onTriggerSlotChange = () => {
+			this._syncTriggerSlot();
 		}, this._optionListeners = l({
 			onClick: (e) => this._handleOptionClick(e),
 			onPointerOver: (e) => this._handleOptionPointerOver(e),
@@ -94,12 +114,11 @@ var A = class extends r(y) {
 		}, this._onKeydown = (e) => {
 			if (!(this._isDisabled || this.readonly)) switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), this._isOpen ? this._navigateActive(1) : this._open(!0);
-					break;
 				case "ArrowUp":
-					e.preventDefault(), this._isOpen ? this._navigateActive(-1) : this._open(!0);
+					if (this._isOpen && this._trigger.isMultilineEdit(e)) break;
+					e.preventDefault(), this._isOpen ? this._navigateActive(e.key === "ArrowDown" ? 1 : -1) : this._open(!0);
 					break;
-				case "Enter": if (this._isOpen) {
+				case "Enter": if (this._isOpen && !this._trigger.isMultilineEdit(e)) {
 					e.preventDefault();
 					let t = this._options[this._activeIndex];
 					if (t && !t.disabled && !t.hasAttribute("data-filtered")) {
@@ -114,18 +133,20 @@ var A = class extends r(y) {
 					this.allowCustomValue && this._value && !this._hasExactOption(this._value) && this._selectCustomValue();
 				}
 			}
-		}, this._onInput = (e) => {
-			if (this._isDisabled || this.readonly) return;
-			let t = e.target;
-			t.value !== this._value && (this.value = t.value, this._activeIndex = -1, this._syncActiveOption(), this._isOpen || this._open());
-		}, this._onInnerChange = (e) => {
-			e.stopPropagation();
-		}, this._onFocus = () => {
-			this._isDisabled || (this._focused = !0);
-		}, this._onInputClick = () => {
+		}, this._onTriggerInput = (e) => {
+			this._isDisabled || this.readonly || e !== this._value && (this.value = e, this._activeIndex = -1, this._syncActiveOption(), this._isOpen || this._open());
+		}, this._onTriggerClick = () => {
 			this._isDisabled || this.readonly || this._options.length > 0 && this._open();
-		}, this._onBlur = () => {
-			this._focused = !1;
+		}, this._onTriggerFocusIn = (e) => {
+			this._isDisabled || (this._focused = !0, this._isSlottedFocus(e) && this.dispatchEvent(new FocusEvent("focus", {
+				composed: !0,
+				relatedTarget: e.relatedTarget
+			})));
+		}, this._onTriggerFocusOut = (e) => {
+			this._focused = !1, this._isSlottedFocus(e) && this.dispatchEvent(new FocusEvent("blur", {
+				composed: !0,
+				relatedTarget: e.relatedTarget
+			}));
 		}, this._openController = c({
 			canOpen: () => !this._isDisabled && !this.readonly,
 			getIsOpen: () => this._isOpen,
@@ -150,9 +171,9 @@ var A = class extends r(y) {
 	}
 	static {
 		this.styles = [
-			S(t),
-			S(n),
-			S(v)
+			C(t),
+			C(o),
+			C(y)
 		];
 	}
 	get filter() {
@@ -160,7 +181,7 @@ var A = class extends r(y) {
 	}
 	set filter(e) {
 		let t = this._filter;
-		this._filter = o(e, O, "contains"), this.requestUpdate("filter", t);
+		this._filter = a(e, k, "contains"), this.requestUpdate("filter", t);
 	}
 	get value() {
 		return this._value;
@@ -188,8 +209,18 @@ var A = class extends r(y) {
 	get open() {
 		return this._isOpen;
 	}
+	focus(e) {
+		this._trigger.focusTrigger(e);
+	}
+	blur() {
+		this._trigger.blurTrigger();
+	}
 	connectedCallback() {
-		super.connectedCallback(), this._optionPortal.bindHost(), this.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), document.addEventListener("click", this._onClickOutside);
+		super.connectedCallback(), this._optionPortal.bindHost(), this._trigger.bind(), this.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), document.addEventListener("click", this._onClickOutside);
+	}
+	_syncTriggerSlot() {
+		let e = Array.from(this.children).some(j);
+		this._hasTriggerSlot !== e && (this._hasTriggerSlot = e, this.hasUpdated && this._reconfigureOverlay());
 	}
 	attributeChangedCallback(e, t, n) {
 		super.attributeChangedCallback(e, t, n), e === "selected-value" && this.isConnected && n !== this._selectedValue && queueMicrotask(() => {
@@ -197,19 +228,18 @@ var A = class extends r(y) {
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._optionPortal.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._close(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
+		super.disconnectedCallback(), this._optionPortal.dispose(), this._trigger.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._close(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
 	}
 	firstUpdated() {
-		requestAnimationFrame(() => {
+		this._trigger.bind(), requestAnimationFrame(() => {
 			this.isConnected && this._optionPortal.scheduleRefresh();
 		});
 	}
 	willUpdate() {
-		this._refreshOptions(), this._optionPortal.ensureOptionIds(this._options), this._syncSelectedValue(), this._applyFilter(), this._syncOptionA11y(), this._syncActiveOption();
+		this._syncTriggerSlot(), this._refreshOptions(), this._optionPortal.ensureOptionIds(this._options), this._syncSelectedValue(), this._applyFilter(), this._syncOptionA11y(), this._syncActiveOption();
 	}
 	updated(e) {
-		let t = this.shadowRoot?.querySelector(".autocomplete-input");
-		t && t.value !== this._value && (t.value = this._value), (e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this.toggleAttribute("focused", this._focused), this._syncOpenAttribute(), this._syncOverlayInert(), this._syncValidity(), this._syncEmptyState();
+		this._trigger.setValue(this._value), (e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this.toggleAttribute("focused", this._focused), this._syncOpenAttribute(), this._syncOverlayInert(), this._syncValidity(), this._syncEmptyState();
 	}
 	formDisabledCallback(e) {
 		this._formAssociation.setDisabled(e), e && this._isOpen && this._close();
@@ -260,7 +290,7 @@ var A = class extends r(y) {
 		let t = this._options.filter((e) => !e.disabled && !e.hasAttribute("data-filtered"));
 		if (!t.length) return;
 		let n = this._activeIndex >= 0 ? t.indexOf(this._options[this._activeIndex]) : e > 0 ? -1 : 0;
-		this._activeIndex = this._options.indexOf(t[d(t.length, n, e)]), this._syncActiveOption();
+		this._activeIndex = this._options.indexOf(t[f(t.length, n, e)]), this._syncActiveOption();
 	}
 	_setInitialActiveOption() {
 		let e = this._options.findIndex((e) => !e.disabled && !e.hasAttribute("data-filtered"));
@@ -295,6 +325,10 @@ var A = class extends r(y) {
 			composed: !0
 		}));
 	}
+	_isSlottedFocus(e) {
+		let t = e.target;
+		return t instanceof Node && !!this.shadowRoot && !this.shadowRoot.contains(t);
+	}
 	_open(e = !1) {
 		this._openController.open(e);
 	}
@@ -317,14 +351,14 @@ var A = class extends r(y) {
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	_createPortal() {
-		let e = g().make({
+		let e = _().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${n}\n${v}`,
+			style: `${t}\n${o}\n${y}`,
 			className: "wui-glass autocomplete-overlay portal wui-floating-panel",
 			onContentChange: (e) => {
 				this._optionPortal.scheduleRefresh();
-				let t = e.flatMap((e) => [...e.removedNodes]).filter(k);
+				let t = e.flatMap((e) => [...e.removedNodes]).filter(A);
 				if (t.length) {
 					this._portal?.removeContent(t);
 					let e = this._portal?.panel.querySelector(".autocomplete-empty");
@@ -332,18 +366,18 @@ var A = class extends r(y) {
 				}
 			}
 		});
-		this._portal = e, h(e.panel, this, [
+		this._portal = e, g(e.panel, this, [
 			"--wui-overlay-min-width",
 			"--wui-autocomplete-max-width",
 			"--wui-autocomplete-max-height"
 		]), e.panel.setAttribute("aria-hidden", "true"), e.panel.addEventListener("pointerdown", this._handlePanelPointerDown);
+		let n = document.createElement("div");
+		n.className = "autocomplete-scroll";
 		let r = document.createElement("div");
-		r.className = "autocomplete-scroll";
+		r.className = "autocomplete-content", this._portalContent = r;
 		let i = document.createElement("div");
-		i.className = "autocomplete-content", this._portalContent = i;
-		let a = document.createElement("div");
-		a.className = "autocomplete-empty", a.hidden = !0, a.dataset.wuiA11yEmpty = this._getEmptySlotText(), r.append(i), i.append(a), e.panel.append(r);
-		for (let t of Array.from(this.childNodes)) t instanceof Comment || (k(t) ? e.appendContent([t], a) : e.appendContent([t], i));
+		i.className = "autocomplete-empty", i.hidden = !0, i.dataset.wuiA11yEmpty = this._getEmptySlotText(), n.append(r), r.append(i), e.panel.append(n);
+		for (let t of Array.from(this.childNodes)) t instanceof Comment || j(t) || (A(t) ? e.appendContent([t], i) : e.appendContent([t], r));
 		return e;
 	}
 	_getLabelledbyText() {
@@ -358,36 +392,37 @@ var A = class extends r(y) {
 		return (this.shadowRoot?.querySelector("slot[name=\"empty\"]"))?.assignedElements().map((e) => e.textContent?.trim()).filter(Boolean).join(" ").trim() || "无匹配选项";
 	}
 	render() {
-		let e = `${this._idPrefix}-listbox`, t = `${this._idPrefix}-label`, n = this._getLabelledbyText(), r = this._options.filter((e) => !e.hasAttribute("data-filtered")), i = this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex] : void 0, a = i ? this._getA11yOptionId(i) : x;
-		return b`
+		let e = `${this._idPrefix}-listbox`, t = `${this._idPrefix}-label`, n = this._getLabelledbyText(), r = this._options.filter((e) => !e.hasAttribute("data-filtered")), i = this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex] : void 0, a = i ? this._getA11yOptionId(i) : S;
+		return x`
       <div class="wui-autocomplete-inner">
-        ${n ? b`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : x}
-        <div class="wui-glass input-wrapper">
-          <input
-            class="autocomplete-input"
-            type="text"
-            placeholder=${this.placeholder}
-            name=${this.name}
-            .value=${this._value}
-            aria-label=${E(this.ariaLabel)}
-            aria-labelledby=${n ? t : x}
-            ?disabled=${this._isDisabled}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            role="combobox"
-            aria-expanded=${this._isOpen}
-            aria-haspopup="listbox"
-            aria-autocomplete="list"
-            aria-controls=${e}
-            aria-disabled=${String(this._isDisabled)}
-            aria-readonly=${this.readonly ? "true" : x}
-            aria-activedescendant=${a}
-            @input=${this._onInput}
-            @change=${this._onInnerChange}
-            @click=${this._onInputClick}
-            @focus=${this._onFocus}
-            @blur=${this._onBlur}
-          />
+        ${n ? x`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : S}
+        <div
+          class="autocomplete-trigger"
+          ?data-custom-trigger=${this._hasTriggerSlot}
+          role="combobox"
+          aria-expanded=${this._isOpen}
+          aria-haspopup="listbox"
+          aria-autocomplete="list"
+          aria-controls=${e}
+          aria-disabled=${String(this._isDisabled)}
+          aria-readonly=${this.readonly ? "true" : S}
+          aria-label=${D(this.ariaLabel)}
+          aria-labelledby=${n ? t : S}
+          aria-activedescendant=${a}
+          tabindex="-1"
+        >
+          <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
+          ${this._hasTriggerSlot ? S : x`<web-ui-input
+                  class="autocomplete-input"
+                  .value=${this._value}
+                  placeholder=${this.placeholder}
+                  name=${this.name}
+                  ?borderless=${this.borderless}
+                  ?disabled=${this._isDisabled}
+                  ?readonly=${this.readonly}
+                  ?required=${this.required}
+                  aria-label=${D(this.ariaLabel || n || void 0)}
+                ></web-ui-input>`}
         </div>
         <div
           class="autocomplete-a11y-listbox"
@@ -396,7 +431,7 @@ var A = class extends r(y) {
           ?hidden=${!this._isOpen}
           aria-hidden=${String(!this._isOpen)}
         >
-          ${r.map((e) => b`<div
+          ${r.map((e) => x`<div
                 id=${this._getA11yOptionId(e)}
                 role="option"
                 aria-selected=${e.value === this._selectedValue ? "true" : "false"}
@@ -426,46 +461,46 @@ var A = class extends r(y) {
     `;
 	}
 };
-e([w({
+e([T({
 	type: String,
 	reflect: !0
-})], A.prototype, "placeholder", void 0), e([w({
+})], M.prototype, "placeholder", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "borderless", void 0), e([w({
+})], M.prototype, "borderless", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "disabled", void 0), e([w({
+})], M.prototype, "disabled", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "readonly", void 0), e([w({
+})], M.prototype, "readonly", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "required", void 0), e([w({
+})], M.prototype, "required", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "portal", void 0), e([w({
+})], M.prototype, "portal", void 0), e([T({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], A.prototype, "noScrollLock", void 0), e([w({
+})], M.prototype, "noScrollLock", void 0), e([T({
 	type: Boolean,
 	reflect: !0,
 	attribute: "allow-custom-value"
-})], A.prototype, "allowCustomValue", void 0), e([w({ attribute: !1 })], A.prototype, "overlayContainer", void 0), e([w({
+})], M.prototype, "allowCustomValue", void 0), e([T({ attribute: !1 })], M.prototype, "overlayContainer", void 0), e([T({
 	type: String,
 	reflect: !0
-})], A.prototype, "name", void 0), e([w({
+})], M.prototype, "name", void 0), e([T({
 	type: String,
 	attribute: "aria-label"
-})], A.prototype, "ariaLabel", void 0), e([w({
+})], M.prototype, "ariaLabel", void 0), e([T({
 	type: String,
 	attribute: "aria-labelledby"
-})], A.prototype, "ariaLabelledby", void 0), e([w({
+})], M.prototype, "ariaLabelledby", void 0), e([T({
 	type: String,
 	reflect: !0
-})], A.prototype, "filter", null), e([T()], A.prototype, "_value", void 0), e([T()], A.prototype, "_selectedValue", void 0), e([T()], A.prototype, "_isOpen", void 0), e([T()], A.prototype, "_activeIndex", void 0), e([T()], A.prototype, "_focused", void 0), A = D = e([C("web-ui-autocomplete")], A);
+})], M.prototype, "filter", null), e([E()], M.prototype, "_value", void 0), e([E()], M.prototype, "_selectedValue", void 0), e([E()], M.prototype, "_isOpen", void 0), e([E()], M.prototype, "_activeIndex", void 0), e([E()], M.prototype, "_focused", void 0), e([E()], M.prototype, "_hasTriggerSlot", void 0), M = O = e([w("web-ui-autocomplete")], M);
 //#endregion
-export { A as WebUiAutocomplete };
+export { M as WebUiAutocomplete };
 
 //# sourceMappingURL=index.js.map