@greypan/web-ui 10.0.0 → 10.1.1

package/README.CN.md

@@ -53,6 +53,41 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue' // 或 overla
   所以宿主自身的布局一旦承重（grid、居中盒子、`ul`/`ol`）就会坏。
 - OverlayScrollbars 只改变它被初始化到的那个元素，子元素保持原生滚动条。要覆盖文档滚动条就初始化
   `document.body`——在那里 `window.scrollY` / `window.scrollTo` 保持原生语义。
+- 自带滚动容器的组件（`select`、`autocomplete`、dropdown / context-menu 面板、`dialog`、`drawer`、
+  `toast`）在各自的 shadow root 内给**组件内部**滚动条上主题。OverlayScrollbars 进不了 shadow
+  root——它的结构样式与主题类都是文档级选择器——所以组件改为在原生滚动条上读同一组继承的
+  `--wui-scrollbar-*` 颜色（`scrollbar-color` / `scrollbar-width`），并刻意不用 `::-webkit-scrollbar`：
+  声明它会让引擎放弃平台的覆盖式滚动条、固定占一条布局宽度，而组件内部滚动条正是不能占宽度。
+  导入本样式表，组件内部滚动条才会跟随外观，与整页滚动条同一机制。
+
+## Vite
+
+`@greypan/web-ui/vite` 导出 `webUiOptimizeDeps`，即需要并进应用 `optimizeDeps.include` 的 web-ui 运行时
+依赖清单。
+
+web-ui 的组件从自己的 dist 里带出 `lit`、`@lit/context`、`@floating-ui/dom`。这些包不在应用的
+dependencies 里，Vite 从应用侧解析不到，写裸名会被静默跳过；扫描器直到请求模块时才发现它们，打印
+`optimized dependencies changed. reloading`，那次模块加载随之失败，报 `Failed to fetch dynamically
+imported module`。
+
+扫描器跟不进组件图时才需要这份清单，典型场景是路由或页面由虚拟模块加载，比如 file-based routing
+（`vue-router/vite`）或 `import.meta.glob`。启动入口静态 import 到每个组件模块的应用，组件图本来就在启动
+扫描里，不必列出。
+
+```js
+import { webUiOptimizeDeps } from '@greypan/web-ui/vite'
+
+export default {
+  optimizeDeps: {
+    include: [...webUiOptimizeDeps]
+  }
+}
+```
+
+- 条目用 Vite 的 `<pkg> > <dep>` 解析写法，按 web-ui 的依赖树解析，而不是应用的。
+- 直接引用这个导出，不要抄条目，它跟随 web-ui 的运行时依赖。
+- 它只影响 dev 期的依赖预打包，构建不受影响。
+- 改过带清单的配置后清一次 `node_modules/.vite` 再启动。热缓存会把缺失的条目一直藏到 CI，而 CI 没有缓存。
 
 ## 框架集成
 
@@ -656,7 +691,7 @@ Portal 面板创建时会镜像 host 上解析后的这些变量；更新 host
 
 根据 `value` 同步子 trigger 的 `checked` 状态。`disabled` 提供继承的有效禁用状态，不改写 trigger 自身的 `disabled` 属性。直接设 `value` 不派发事件。
 
-按住当前选中项横向拖拽可滑动指示器，松手吸附到最近选项（快速抛掷按速度切换）。触摸面声明 `touch-action: none`，拖拽激活期间阻止 `touchmove` 默认滚动，避免 iOS Safari 中断手势。
+按住当前选中项横向拖拽可滑动指示器，松手吸附到最近选项（快速抛掷按速度切换）。trigger 宽度不等时，拖拽中的指示器取「离自身中心最近的那一项」的宽度——即预览松手会落到的那一项，而不是保持按下那一项的宽度。触摸面声明 `touch-action: none`，拖拽激活期间阻止 `touchmove` 默认滚动，避免 iOS Safari 中断手势。
 
 **按压态：** 轨道在所有状态下都是不透明实体面（`--wui-color-surface`，浅色即 page 同色、无 backdrop filter），1px 描边环与投影全程不变；转为玻璃的是指示器这一层。静止态指示器是 `--wui-color-surface-segmented` 实色底、玻璃输出全部关闭；按压/拖拽态获得 backdrop blur、随 80ms 过渡淡入的玻璃描边环与 1.5x 放大，底色全透明：指示器的 blur 采样面整个落在轨道之内，此前的玻璃轨道上全透明指示器在均匀深底与相邻轨道仅差 +0.5 阶，条纹底实测指示器内部灰度 std 1.89（背景渗透）；轨道实体化后同一采样 std 归零，按压态本体的可感知性由实色轨道与放大/环/投影共同承担，不再需要 tint 打底或压制轨道边缘装饰。底色不淡入——按下第一帧即落定；松开时指示器经 `--wui-duration-press` 淡回实色灰底。
 
@@ -1058,6 +1093,9 @@ await preview.closed
 | `--wui-collapse-peek-edge-max`   | `112px`       | 长度上限，避免大 `peek` 算出过长的虚化带       |
 | `--wui-collapse-peek-edge`       | —             | 显式指定长度，优先于推导值                     |
 | `--wui-collapse-peek-edge-color` | `transparent` | 渐变末端颜色（需带 alpha，mask 按 alpha 解析） |
+| `--wui-collapse-peek-edge-blur`  | `4px`         | 同一条渐变带上背景模糊的半径                   |
+
+渐变带由两层组成，配对方式与 layout header 的晕染一致：上面那条 alpha 渐隐之外，同一条带上再叠一层真实的 `backdrop-filter` 模糊，被裁掉的内容因此是被**糊掉**的，而不只是被调成半透明。模糊强度由本盒自己的 `mask-image` 调制——从带子起点为 0 升到后半段满强度、再在裁剪边缘前回到 0：起点不为 0 会在「突然开始模糊」处留一条接缝，末端不为 0 则会一路糊到裁剪边界。展开态活动长度为 0，各色标塌缩到 100% 而末位色标是全透明，于是这一层什么都不画。
 
 比例设为 `0` 即关闭渐隐。推导是纯 CSS 的 `calc(peek * ratio)`：`peek` 用 rem 时渐变长度自动跟随根字号缩放，JS 侧不需要做任何单位解析。已知限制：`peek` 取百分比时推导结果不是长度、无法被注册属性插值，会静默回落为「无渐隐」，此时请用 `--wui-collapse-peek-edge` 显式指定长度。
 

package/README.md

@@ -55,6 +55,45 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react' // or overl
 - OverlayScrollbars only changes the element it is initialized on; children keep their native scrollbars. To cover
   the document scroller, initialize `document.body` — `window.scrollY` / `window.scrollTo` keep their native
   semantics there.
+- Components that own a scroll container (`select`, `autocomplete`, the dropdown / context-menu panels,
+  `dialog`, `drawer`, `toast`) theme that container's **internal** scrollbar inside their own shadow root.
+  OverlayScrollbars cannot reach a shadow root — its structural styles and theme classes are document-level
+  selectors — so the components read the same inherited `--wui-scrollbar-*` colours through `scrollbar-color`
+  / `scrollbar-width` on the native scrollbar instead. `::-webkit-scrollbar` is deliberately not used: styling
+  it opts out of the platform's overlay scrollbar and reserves a layout gutter, which these scrollbars must
+  not do. Import this stylesheet for the internal scrollbars to follow the appearance, just like the
+  page-level ones.
+
+## Vite
+
+`@greypan/web-ui/vite` exports `webUiOptimizeDeps`, the list of web-ui runtime dependencies an app has to merge
+into `optimizeDeps.include`.
+
+web-ui components pull `lit`, `@lit/context` and `@floating-ui/dom` out of web-ui's own dist. Those packages are
+not in the app's dependencies, so Vite cannot resolve them from the app, and a bare name is skipped in silence.
+The scanner then finds them mid-request, prints `optimized dependencies changed. reloading`, and that module load
+fails with `Failed to fetch dynamically imported module`.
+
+The list is needed when the scanner cannot follow the component graph: routes or pages loaded through a virtual
+module, such as file-based routing (`vue-router/vite`) or `import.meta.glob`. An app whose entry statically
+imports every component module already pulls the graph into the startup scan and does not need it.
+
+```js
+import { webUiOptimizeDeps } from '@greypan/web-ui/vite'
+
+export default {
+  optimizeDeps: {
+    include: [...webUiOptimizeDeps]
+  }
+}
+```
+
+- The entries use Vite's `<pkg> > <dep>` resolution form, so they resolve through web-ui's dependency tree
+  rather than the app's.
+- Reference the export instead of copying entries. It tracks web-ui's runtime dependencies.
+- It only affects dev-time pre-bundling. Builds are unaffected.
+- After changing a config that carries the list, remove `node_modules/.vite` once and restart. A warm cache
+  hides a missing entry until CI, which has no cache.
 
 ## Framework Setup
 
@@ -692,7 +731,7 @@ Form-associated: integrates with native `<form>` via `ElementInternals`.
 
 Manages child trigger `checked` state based on `value`. `disabled` supplies inherited effective disabled state without changing a trigger's own `disabled` property. Setting `value` directly does not dispatch `input`/`change`.
 
-Press the selected segment and drag horizontally to slide the indicator; on release it snaps to the nearest option (a fast flick switches by velocity). Touch surfaces declare `touch-action: none` and suppress `touchmove` defaulting during an active drag, so iOS Safari does not interrupt the gesture.
+Press the selected segment and drag horizontally to slide the indicator; on release it snaps to the nearest option (a fast flick switches by velocity). While dragging with triggers of unequal width, the indicator takes the width of the option its center is nearest to, so it previews the option it will snap to instead of keeping the pressed segment's width. Touch surfaces declare `touch-action: none` and suppress `touchmove` defaulting during an active drag, so iOS Safari does not interrupt the gesture.
 
 **Pressed state:** the track is an opaque surface (`--wui-color-surface`, page-colored in light appearance) with no backdrop filter in every state. Its 1px ring and drop shadow never change. The indicator is the layer that turns to glass. At rest it is a solid `--wui-color-surface-segmented` surface with all glass output off. While pressed or dragging it gains backdrop blur, the glass ring fading in over 80ms, and a 1.5x scale over a fully transparent background: the indicator samples its blur entirely from inside the track, and against the previous glass track a fully transparent indicator measured only +0.5 gray levels on a uniform dark backdrop while striped backdrops showed through the sample (std 1.89 gray levels inside the indicator). The opaque track makes that sample uniform (std 0), which is what gives the pressed thumb a perceptible body. No tint and no edge-decoration suppression are needed. The background never fades in. It lands on the first pressed frame. And on release the indicator eases back to the solid gray rest surface over `--wui-duration-press`.
 
@@ -1097,6 +1136,9 @@ The initial `open` attribute settles instantly without playing the animation. Ne
 | `--wui-collapse-peek-edge-max`   | `112px`       | Upper bound, so a large `peek` cannot produce an oversized fade band  |
 | `--wui-collapse-peek-edge`       | —             | Explicit fade length; wins over the derived value                     |
 | `--wui-collapse-peek-edge-color` | `transparent` | Fade-stop color (must carry alpha - `mask-image` reads alpha channel) |
+| `--wui-collapse-peek-edge-blur`  | `4px`         | Blur radius of the frost layer over the same band                     |
+
+The band carries two layers, the same pairing the layout header's glow uses: the alpha fade above, plus a real `backdrop-filter` blur over the same band, so the clipped content is blurred out rather than merely made translucent. The blur is modulated by the band's own `mask-image`, ramping from 0 at the band's start to full in its second half and back to 0 at the cut edge - a non-zero start would draw a visible seam where the blur abruptly begins, and a non-zero end would blur right up to the clip boundary. When `open`, the band length is `0`, every mask stop collapses onto 100% and the last stop is fully transparent, so the layer paints nothing.
 
 Set the ratio to `0` to turn the fade off. The derivation is pure CSS `calc(peek * ratio)`, so a `rem`-based `peek` scales the fade with the root font size and nothing has to be measured in JS. Known limitation: a percentage `peek` does not derive to a length, so the fade silently falls back to "none". Set `--wui-collapse-peek-edge` explicitly in that case.
 

package/dist/components/autocomplete/index.js

@@ -4,32 +4,33 @@ import { FormAssociated as n, FormAssociationController as r, defineFormAssociat
 import { normalizeLiteral as a } from "../../shared/normalize/index.js";
 import "../input/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, 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";
+import s from "../../scrollbars/internal.js";
+import { dispatchOpenChangeEvent as c } from "../../shared/open-state/index.js";
+import { createComboboxOpenController as l, createOptionListenerBinding as u, defineComboboxTrigger as d, handleComboboxFocusOut as f, nextWrappingIndex as p } from "../../shared/option-portal/combobox-shell.js";
+import { defineOptionPortal as m } from "../../shared/option-portal/index.js";
+import { defineAnchoredPanel as h } from "../../shared/overlay/anchored-panel.js";
+import { defineOpenOverlay as g } from "../../shared/overlay/open-overlay.js";
+import { applyOverlayVariables as _, defineOverlayPortal as v } from "../../shared/overlay/portal.js";
+import { defineScrollLockLease as y } from "../../shared/scroll-lock/scroll-lock.js";
+import b from "./style.js";
+import { LitElement as x, html as S, nothing as C, unsafeCSS as w } from "lit";
+import { customElement as T, property as E, state as D } from "lit/decorators.js";
+import { ifDefined as O } from "lit/directives/if-defined.js";
 //#region src/components/autocomplete/index.ts
-var O, k = [
+var k, A = [
 	"none",
 	"prefix",
 	"contains"
 ];
-function A(e) {
+function j(e) {
 	return e instanceof Element && e.slot === "trigger";
 }
-function j(e) {
+function M(e) {
 	return e instanceof Element && e.slot === "empty";
 }
-var M = class extends n(b) {
+var N = class extends n(x) {
 	static {
-		O = this;
+		k = 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 = i({
@@ -48,18 +49,18 @@ var M = class extends n(b) {
 				typeof e == "string" && (this.value = e);
 			},
 			syncValidity: () => this._syncValidity()
-		}).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({
+		}).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-${++k._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._scrollLock = y().make(), this._optionPortal = m().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) => !A(e) && !j(e)),
+			getMigratableNodes: () => Array.from(this.childNodes).filter((e) => !j(e) && !M(e)),
 			hasUpdated: () => this.hasUpdated,
 			requestUpdate: () => this.requestUpdate(),
 			bindOption: (e) => this._bindOption(e),
 			unbindOption: (e) => this._unbindOption(e)
-		}), this._trigger = u().make({
+		}), this._trigger = d().make({
 			getWrapper: () => this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
 			getCustomTrigger: () => {
 				let e = this.shadowRoot?.querySelector("slot[name=\"trigger\"]")?.assignedElements()[0];
@@ -70,10 +71,10 @@ var M = class extends n(b) {
 			onClick: () => this._onTriggerClick(),
 			onFocusIn: (e) => this._onTriggerFocusIn(e),
 			onFocusOut: (e) => this._onTriggerFocusOut(e)
-		}), this._overlay = h().make({
+		}), this._overlay = g().make({
 			requestClose: () => this._close(),
 			isConnected: () => this.isConnected
-		}), this._panel = m().make({
+		}), this._panel = h().make({
 			getAnchor: () => this._trigger.getTrigger() ?? this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".autocomplete-overlay") ?? null,
 			getPositioning: () => ({
@@ -88,12 +89,12 @@ var M = class extends n(b) {
 		}), this._onClickOutside = (e) => {
 			this._isOpen && (e.composedPath().includes(this) || this._panel.getHandle()?.containsEvent(e) || this._close());
 		}, this._onFocusOut = () => {
-			d(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
+			f(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
 		}, this._handlePanelPointerDown = (e) => {
 			e.preventDefault();
 		}, this._onTriggerSlotChange = () => {
 			this._syncTriggerSlot();
-		}, this._optionListeners = l({
+		}, this._optionListeners = u({
 			onClick: (e) => this._handleOptionClick(e),
 			onPointerOver: (e) => this._handleOptionPointerOver(e),
 			onPointerDown: (e) => this._handleOptionPointerDown(e),
@@ -151,7 +152,7 @@ var M = class extends n(b) {
 				composed: !0,
 				relatedTarget: e.relatedTarget
 			}));
-		}, this._openController = c({
+		}, this._openController = l({
 			canOpen: () => !this._isDisabled && !this.readonly,
 			getIsOpen: () => this._isOpen,
 			setIsOpen: (e) => {
@@ -175,9 +176,10 @@ var M = class extends n(b) {
 	}
 	static {
 		this.styles = [
-			C(t),
-			C(o),
-			C(y)
+			w(t),
+			w(o),
+			w(s),
+			w(b)
 		];
 	}
 	get filter() {
@@ -185,7 +187,7 @@ var M = class extends n(b) {
 	}
 	set filter(e) {
 		let t = this._filter;
-		this._filter = a(e, k, "contains"), this.requestUpdate("filter", t);
+		this._filter = a(e, A, "contains"), this.requestUpdate("filter", t);
 	}
 	get value() {
 		return this._value;
@@ -223,7 +225,7 @@ var M = class extends n(b) {
 		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(A);
+		let e = Array.from(this.children).some(j);
 		this._hasTriggerSlot !== e && (this._hasTriggerSlot = e, this.hasUpdated && this._reconfigureOverlay());
 	}
 	attributeChangedCallback(e, t, n) {
@@ -294,7 +296,7 @@ var M = class extends n(b) {
 		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[f(t.length, n, e)]), this._syncActiveOption();
+		this._activeIndex = this._options.indexOf(t[p(t.length, n, e)]), this._syncActiveOption();
 	}
 	_setInitialActiveOption() {
 		let e = this._options.findIndex((e) => !e.disabled && !e.hasAttribute("data-filtered"));
@@ -347,7 +349,7 @@ var M = class extends n(b) {
 		this._openController.close();
 	}
 	_dispatchOpenChange() {
-		s(this, this._isOpen);
+		c(this, this._isOpen);
 	}
 	_openOverlay(e = !1) {
 		this._panel.open(e), this._syncOverlayInert();
@@ -362,25 +364,25 @@ var M = class extends n(b) {
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	_createPortal() {
-		let e = _().make({
+		let e = v().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${o}\n${y}`,
+			style: `${t}\n${o}\n${b}`,
 			className: "wui-glass autocomplete-overlay portal wui-floating-panel",
 			onContentChange: () => {
 				this._optionPortal.scheduleRefresh();
 			}
 		});
-		this._portal = e, g(e.panel, this, [
+		this._portal = e, _(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";
+		n.className = "autocomplete-scroll wui-scroll";
 		let r = document.createElement("div");
 		r.className = "autocomplete-content", this._portalContent = r, n.append(r), e.panel.append(n);
-		for (let t of Array.from(this.childNodes)) t instanceof Comment || A(t) || j(t) || e.appendContent([t], r);
+		for (let t of Array.from(this.childNodes)) t instanceof Comment || j(t) || M(t) || e.appendContent([t], r);
 		return e;
 	}
 	_getLabelledbyText() {
@@ -392,10 +394,10 @@ var M = class extends n(b) {
 		}).filter(Boolean).join(" ") : "";
 	}
 	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) : S;
-		return x`
+		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) : C;
+		return S`
       <div class="wui-autocomplete-inner">
-        ${n ? x`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : S}
+        ${n ? S`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : C}
         <div
           class="autocomplete-trigger"
           ?data-custom-trigger=${this._hasTriggerSlot}
@@ -405,14 +407,14 @@ var M = class extends n(b) {
           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-readonly=${this.readonly ? "true" : C}
+          aria-label=${O(this.ariaLabel)}
+          aria-labelledby=${n ? t : C}
           aria-activedescendant=${a}
           tabindex="-1"
         >
           <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
-          ${this._hasTriggerSlot ? S : x`<web-ui-input
+          ${this._hasTriggerSlot ? C : S`<web-ui-input
                   class="autocomplete-input"
                   .value=${this._value}
                   placeholder=${this.placeholder}
@@ -421,7 +423,7 @@ var M = class extends n(b) {
                   ?disabled=${this._isDisabled}
                   ?readonly=${this.readonly}
                   ?required=${this.required}
-                  aria-label=${D(this.ariaLabel || n || void 0)}
+                  aria-label=${O(this.ariaLabel || n || void 0)}
                 ></web-ui-input>`}
         </div>
         <div
@@ -431,7 +433,7 @@ var M = class extends n(b) {
           ?hidden=${!this._isOpen}
           aria-hidden=${String(!this._isOpen)}
         >
-          ${r.map((e) => x`<div
+          ${r.map((e) => S`<div
                 id=${this._getA11yOptionId(e)}
                 role="option"
                 aria-selected=${e.value === this._selectedValue ? "true" : "false"}
@@ -447,7 +449,7 @@ var M = class extends n(b) {
           aria-hidden="true"
           @pointerdown=${this._handlePanelPointerDown}
         >
-          <div class="autocomplete-scroll">
+          <div class="autocomplete-scroll wui-scroll">
             <div class="autocomplete-content">
               <slot @slotchange=${this._onSlotChange}></slot>
             </div>
@@ -457,46 +459,46 @@ var M = class extends n(b) {
     `;
 	}
 };
-e([T({
+e([E({
 	type: String,
 	reflect: !0
-})], M.prototype, "placeholder", void 0), e([T({
+})], N.prototype, "placeholder", void 0), e([E({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "borderless", void 0), e([T({
+})], N.prototype, "borderless", void 0), e([E({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "disabled", void 0), e([T({
+})], N.prototype, "disabled", void 0), e([E({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "readonly", void 0), e([T({
+})], N.prototype, "readonly", void 0), e([E({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "required", void 0), e([T({
+})], N.prototype, "required", void 0), e([E({
 	type: Boolean,
 	reflect: !0
-})], M.prototype, "portal", void 0), e([T({
+})], N.prototype, "portal", void 0), e([E({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], M.prototype, "noScrollLock", void 0), e([T({
+})], N.prototype, "noScrollLock", void 0), e([E({
 	type: Boolean,
 	reflect: !0,
 	attribute: "allow-custom-value"
-})], M.prototype, "allowCustomValue", void 0), e([T({ attribute: !1 })], M.prototype, "overlayContainer", void 0), e([T({
+})], N.prototype, "allowCustomValue", void 0), e([E({ attribute: !1 })], N.prototype, "overlayContainer", void 0), e([E({
 	type: String,
 	reflect: !0
-})], M.prototype, "name", void 0), e([T({
+})], N.prototype, "name", void 0), e([E({
 	type: String,
 	attribute: "aria-label"
-})], M.prototype, "ariaLabel", void 0), e([T({
+})], N.prototype, "ariaLabel", void 0), e([E({
 	type: String,
 	attribute: "aria-labelledby"
-})], M.prototype, "ariaLabelledby", void 0), e([T({
+})], N.prototype, "ariaLabelledby", void 0), e([E({
 	type: String,
 	reflect: !0
-})], 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);
+})], N.prototype, "filter", null), e([D()], N.prototype, "_value", void 0), e([D()], N.prototype, "_selectedValue", void 0), e([D()], N.prototype, "_isOpen", void 0), e([D()], N.prototype, "_activeIndex", void 0), e([D()], N.prototype, "_focused", void 0), e([D()], N.prototype, "_hasTriggerSlot", void 0), N = k = e([T("web-ui-autocomplete")], N);
 //#endregion
-export { M as WebUiAutocomplete };
+export { N as WebUiAutocomplete };
 
 //# sourceMappingURL=index.js.map