dap-design-system 0.62.4 → 0.63.0

package/dist/components/option-list/option-list.component.js

@@ -1,353 +1,440 @@
-var m = Object.defineProperty;
-var u = Object.getOwnPropertySymbols;
-var b = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
-var f = (o, e, t) => e in o ? m(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, h = (o, e) => {
-  for (var t in e || (e = {}))
-    b.call(e, t) && f(o, t, e[t]);
-  if (u)
-    for (var t of u(e))
-      x.call(e, t) && f(o, t, e[t]);
-  return o;
+var S = Object.defineProperty, w = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var T = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var y = (l, t, e) => t in l ? S(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t) => {
+  for (var e in t || (t = {}))
+    T.call(t, e) && y(l, e, t[e]);
+  if (f)
+    for (var e of f(t))
+      I.call(t, e) && y(l, e, t[e]);
+  return l;
+}, v = (l, t) => w(l, C(t));
+import { clsx as k } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as $ } from "lit";
+import { property as h, state as c } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { unsafeStatic as F, html as g } from "lit/static-html.js";
+import { scrollIntoContainer as O } from "../../common/utils.js";
+import { DdsElement as R } from "../../internal/dds-hu-element.js";
+import { SizedMixin as q } from "../../internal/mixin/sizedMixin.js";
+import D from "../option-item/option-item.component.js";
+import { TYPEAHEAD_RESET_MS as L, isAutoCompleteMode as M, filterOptions as U, reduceListbox as V } from "./listbox-state.js";
+import { toOptionItems as N, optionElementsFor as z, optionDataOf as A, optionItemsConverter as B } from "./option-data.js";
+import K from "./option-list.scss.js";
+var H = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (l, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(t, e) : t, o = l.length - 1, n; o >= 0; o--)
+    (n = l[o]) && (s = (i ? n(t, e, s) : n(s)) || s);
+  return i && s && H(t, e, s), s;
 };
-import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as p } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as O } from "../../node_modules/lit-html/directives/if-defined.js";
-import { unsafeStatic as y, html as v } from "../../node_modules/lit-html/static.js";
-import { scrollIntoContainer as I } from "../../common/utils.js";
-import { DdsElement as C } from "../../internal/dds-hu-element.js";
-import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
-import A from "../option-item/option-item.component.js";
-import E from "./option-list.scss.js";
-import { unsafeCSS as T } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var w = Object.defineProperty, n = (o, e, t, i) => {
-  for (var s = void 0, l = o.length - 1, c; l >= 0; l--)
-    (c = o[l]) && (s = c(e, t, s) || s);
-  return s && w(e, t, s), s;
-};
-const r = class r extends S(C) {
+const _ = 10, x = ["wheel", "touchstart", "pointerdown", "keydown"], P = [
+  "value",
+  "focused",
+  "selectedIndex",
+  "currentOption",
+  "availableOptions",
+  "optionEls"
+], u = class u extends q(R) {
   constructor() {
-    super(...arguments), this.filterText = "", this.focused = !1, this.search = !1, this.searchMode = "none", this.searchOnValueSet = "true", this.selectable = "true", this.disableDelaySet = !1, this.multiselectable = !1, this.queryString = "", this.firstLoad = !0, this.optionEls = [], this.availableOptions = [], this.handleOptionClick = (e) => {
-      this.focused = !0;
-      const t = e.target;
-      if (t && !t.disabled) {
-        const i = e.ctrlKey || e.metaKey, s = t.selected;
-        if (i && s) {
-          const l = this.availableOptions.find(
-            (c) => c.hasAttribute("empty")
-          );
-          l ? (this.setSelectedOption(l), this.setCurrentOption(l), this.value = l.value, this.selectedIndex = this.findIndexByValue(
-            this.availableOptions,
-            l.value
-          ), this.emit("dds-option-change", h({}, this.getEventDetails(l)))) : (this.setSelectedOption(void 0), this.setCurrentOption(null), this.value = void 0, this.selectedIndex = -1, this.emit("dds-option-deselect", {
-            option: t,
-            value: void 0,
-            index: -1,
-            text: t.optionText
-          }));
-          return;
-        }
-        this.setCurrentOption(t), this.setSelectedOption(t), this.selectionChanged(t), this.updateComplete.then(() => {
-          this.selectedIndex = this.findIndexByValue(
-            this.availableOptions,
-            this.value
-          ), this.disableDelaySet || this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption)));
-        });
-      } else
-        e.preventDefault(), e.stopPropagation();
-    }, this.getSearchString = (e) => (typeof this.queryTimeout == "number" && window.clearTimeout(this.queryTimeout), this.queryTimeout = window.setTimeout(() => {
-      this.queryString = "";
-    }, 500), this.queryString += e, this.queryString), this.buildQueryString = (e) => {
-      const t = this.getSearchString(e);
-      for (const i of this.availableOptions)
-        if (i.optionText.toLowerCase().startsWith(t.toLowerCase())) {
-          this.selectedIndex = this.findIndexByValue(
-            this.availableOptions,
-            i.value
-          ), this.setCurrentOption(i);
-          break;
-        }
+    super(...arguments), this.filterText = "", this.focused = !1, this.search = !1, this.searchMode = "none", this.searchOnValueSet = "true", this.selectable = "true", this.disableDelaySet = !1, this.multiselectable = !1, this.queryString = "", this.firstLoad = !0, this.optionEls = [], this.availableOptions = [], this.markedOption = null, this.flaggedOption = null, this.ownValue = null, this.serverRendered = !!this.shadowRoot, this.warnedChildren = !1, this.warnedLabels = !1, this.handleOptionClick = (t) => {
+      const e = t.target;
+      this.dispatch(
+        {
+          type: "click",
+          option: e,
+          selected: !!(e != null && e.selected),
+          modifier: t.ctrlKey || t.metaKey
+        },
+        t
+      );
+    }, this.getSearchString = (t) => (this.restartTypeaheadTimer(L), this.queryString += t, this.queryString), this.buildQueryString = (t) => {
+      this.dispatch({ type: "typeahead", char: t });
     };
   }
+  get items() {
+    return this._items;
+  }
+  set items(t) {
+    this._items = N(t);
+  }
   get isAutoComplete() {
-    return this.searchMode === "autocomplete" || this.searchMode === "manual";
+    return M(this.searchMode);
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.setAttribute("role", "listbox");
+  firstUpdated(t) {
+    if (super.firstUpdated(t), this.setAttribute("role", "listbox"), this.serverRendered && !this.items) {
+      const e = this.getSlottedOptions();
+      e.length > 0 && this.dispatch({ type: "slotChanged", options: e });
+    }
   }
   getAllOptions() {
+    return this.items ? z(this.items) : this.getSlottedOptions();
+  }
+  getSlottedOptions() {
     var s;
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), t = e == null ? void 0 : e.assignedElements()[0], i = (t == null ? void 0 : t.nodeName) === "SLOT" ? (e == null ? void 0 : e.assignedElements()[0]).assignedElements() : e == null ? void 0 : e.assignedElements();
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), e = t == null ? void 0 : t.assignedElements()[0], i = (e == null ? void 0 : e.nodeName) === "SLOT" ? (t == null ? void 0 : t.assignedElements()[0]).assignedElements() : t == null ? void 0 : t.assignedElements();
     return i ? [...i] : [...this.querySelectorAll("dap-ds-option-item")];
   }
   getAllRenderedOptions() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("dap-ds-option-item");
-    return e ? [...e] : [];
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("dap-ds-option-item");
+    return t ? [...t] : [];
   }
   getAllAvailabeOptions() {
     return this.availableOptions;
   }
   getActiveOption() {
     return this.currentOption ? this.getAllRenderedOptions().find(
-      (t) => t.value === this.currentOption.value
+      (e) => e.value === this.currentOption.value
     ) : null;
   }
-  updated(e) {
-    if (super.updated(e), e.has("multiselectable") && (this.multiselectable ? this.setAttribute("aria-multiselectable", "true") : this.removeAttribute("aria-multiselectable")), e.has("value") && !e.has("currentOption") && this.searchOnValueSet === "true") {
-      const t = this.availableOptions.find(
-        (i) => i.value === this.value
-      );
-      t && (this.changeOption(t, e.get("value")), this.selectedIndex = this.findIndexByValue(
-        this.availableOptions,
-        this.value
-      ), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
-    }
-    (e.has("options") || e.has("optionEls")) && (this.availableOptions = this.options || this.optionEls, this.emit("dds-list-changed", { elements: this.availableOptions }));
+  updated(t) {
+    super.updated(t), t.has("multiselectable") && (this.multiselectable ? this.setAttribute("aria-multiselectable", "true") : this.removeAttribute("aria-multiselectable")), t.has("value") && !t.has("currentOption") && this.dispatch({
+      type: "valueUpdated",
+      previous: t.get("value")
+    }), (t.has("options") || t.has("optionEls")) && this.dispatch({ type: "optionsUpdated" }), t.has("items") && (this.items || t.get("items")) && (this.dispatch({ type: "slotChanged", options: this.getAllOptions() }), this.warnIgnoredChildren()), this.items && this.renderOption && this.warnMissingLabels();
+  }
+  warnIgnoredChildren() {
+    !this.warnedChildren && this.items && this.getSlottedOptions().length > 0 && (this.warnedChildren = !0, console.warn(
+      `${this.localName}: both \`items\` and dap-ds-option-item children are given; the children are ignored.`
+    ));
+  }
+  /** The visible text is the option's accessible name, so it should contain the label. */
+  warnMissingLabels() {
+    if (this.warnedLabels) return;
+    const t = this.getAllRenderedOptions().find((e) => {
+      var s, o;
+      const i = (s = e.getAttribute("label")) != null ? s : "";
+      return i && !((o = e.textContent) != null ? o : "").includes(i);
+    });
+    t && (this.warnedLabels = !0, console.warn(
+      `${this.localName}: renderOption output for "${t.getAttribute("label")}" does not contain its label; the visible text is the option's accessible name.`
+    ));
   }
-  shouldUpdate(e) {
-    return e.has("filterText") && (this.filterText && this.searchMode !== "none" && this.searchMode !== "manual" ? (this.filterAvailableOptions(), this.selectedIndex = 0, this.setCurrentOption(this.availableOptions[0], !1), this.emit("dds-list-changed", { elements: this.availableOptions })) : this.filterText && this.searchMode === "manual" ? this.selectedIndex === -1 && this.availableOptions.length > 0 && (this.selectedIndex = 0, this.setCurrentOption(this.availableOptions[0], !1)) : this.filterText && this.searchMode === "none" ? (this.filterAvailableOptions(), this.selectedIndex = -1, this.setCurrentOption(null, !1), this.setSelectedOption(), this.emit("dds-list-changed", { elements: this.availableOptions })) : (this.availableOptions = this.options || this.optionEls, this.selectedIndex = -1, this.setCurrentOption(null, !1), this.emit("dds-list-changed", { elements: this.availableOptions }))), super.shouldUpdate(e);
+  shouldUpdate(t) {
+    return t.has("filterText") && this.dispatch({ type: "filterChanged" }), super.shouldUpdate(t);
   }
   filterAvailableOptions() {
-    const e = this.filterText.toLowerCase();
-    this.availableOptions = (this.options || this.optionEls).filter((t) => {
-      if (!t.disabled)
-        return t.optionText.toLowerCase().startsWith(e);
-    });
+    this.availableOptions = U(
+      this.options || this.optionEls,
+      this.filterText
+    );
   }
-  attributeChangedCallback(e, t, i) {
-    if (super.attributeChangedCallback(e, t, i), e === "value" && t !== i && this.searchOnValueSet === "true")
-      if (i) {
-        const s = this.availableOptions.find((l) => l.value === i);
-        this.setSelectedOption(s), this.selectionChanged(s), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption)));
-      } else
-        this.setSelectedOption(), this.selectionChanged();
+  attributeChangedCallback(t, e, i) {
+    super.attributeChangedCallback(t, e, i), t === "value" && e !== i && this.searchOnValueSet === "true" && this.dispatch({ type: "valueAttributeChanged", value: i });
   }
   setOptionsFromSlottedItems() {
-    const e = this.getAllOptions();
-    this.availableOptions = e, this.optionEls = e;
+    const t = this.getAllOptions();
+    this.availableOptions = t, this.optionEls = t;
   }
-  handleKeydown(e) {
-    if (this.focused = !0, e.key === "Tab" || e.key === "Escape") {
-      e.key === "Escape" && (e.preventDefault(), this.emit("dds-cancel")), this.emit("dds-keydown", { key: e.key, code: e.code });
-      return;
-    }
-    e.preventDefault(), this.handleKeyCodes(e.key, e.code);
+  handleKeydown(t) {
+    this.dispatch({ type: "keydown", key: t.key, code: t.code }, t);
   }
-  scrollToActiveOption() {
-    if (!this.currentOption)
+  scrollToActiveOption(t = this.currentOption) {
+    if (!t)
       return;
     const e = this.getAllRenderedOptions().find(
-      (t) => t.value === this.currentOption.value
+      (i) => i.value === t.value
     );
-    e && I(e);
-  }
-  handleNavigationKey(e) {
-    var t;
-    if (e === "ArrowDown")
-      this.selectedIndex = this.findNearestEnabled(
-        this.availableOptions,
-        this.selectedIndex,
-        1
-      );
-    else if (e === "ArrowUp") {
-      const i = this.findNearestEnabled(
-        this.availableOptions,
-        this.selectedIndex,
-        this.selectedIndex === -1 ? 1 : -1
-      );
-      this.selectedIndex = i === this.availableOptions.length ? -1 : i;
-    } else if (e === "Home")
-      this.selectedIndex = (t = this.availableOptions[0]) != null && t.disabled ? this.findNearestEnabled(this.availableOptions, -1, 1) : 0;
-    else if (e === "End") {
-      const i = this.findNearestEnabled(
-        this.availableOptions,
-        this.availableOptions.length,
-        -1
-      );
-      this.selectedIndex = i === this.availableOptions.length ? -1 : i;
-    }
-  }
-  handleActionKey(e) {
-    e === "Enter" && (this.setSelectedOption(this.availableOptions[this.selectedIndex]), this.selectionChanged(this.availableOptions[this.selectedIndex]), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
+    e && O(e);
   }
-  handleTypeheadKey(e) {
-    this.searchMode === "typehead" && ((e == null ? void 0 : e.length) === 1 || e === "Backspace") && this.buildQueryString(e);
-  }
-  handleKeyCodes(e, t) {
-    if (this.focused && (this.handleNavigationKey(e), this.handleActionKey(e), this.handleTypeheadKey(e), this.selectedIndex >= 0)) {
-      const i = this.availableOptions[this.selectedIndex];
-      this.setCurrentOption(i), this.emit("dds-keydown", h({
-        code: t,
-        key: e
-      }, this.getEventDetails(i)));
-    }
+  getEventDetails(t, e = this.selectedIndex) {
+    if (!t)
+      return;
+    let i = t;
+    return t.tagName !== "DAP-DS-OPTION-ITEM" && (i = t.closest("dap-ds-option-item")), p({
+      opt: i,
+      value: i == null ? void 0 : i.value,
+      text: i == null ? void 0 : i.optionText,
+      index: e
+    }, this.itemDetail(i));
+  }
+  /** `{ item }` for an option that came from `items`, else nothing (child payloads stay as they were). */
+  itemDetail(t) {
+    var s;
+    if (!this.items || !t) return {};
+    const e = t.value, i = (s = A(t)) != null ? s : this.items.find((o) => o.value === e);
+    return i ? { item: i } : {};
   }
-  getEventDetails(e) {
-    if (!e)
+  setFocusedOption(t) {
+    const e = this.getAllRenderedOptions().find(
+      (i) => i.value === t.value
+    );
+    e && (e.focus({ preventScroll: !0 }), O(e));
+  }
+  /**
+   * The popup constrains its scroll container's max-height asynchronously
+   * (floating-ui, re-run when the content changes), so there is no single
+   * frame after which the container is final. Keep the active option in view
+   * for a few frames, and stop as soon as the user scrolls, touches or types.
+   */
+  revealOverFrames(t = _) {
+    var o;
+    if (typeof requestAnimationFrame != "function")
       return;
-    let t = e;
-    return e.tagName !== "DAP-DS-OPTION-ITEM" && (t = e.closest("dap-ds-option-item")), {
-      opt: t,
-      value: t == null ? void 0 : t.value,
-      text: t == null ? void 0 : t.optionText,
-      index: this.selectedIndex
+    (o = this.revealAbort) == null || o.call(this);
+    let e = !1;
+    const i = () => {
+      e = !0;
+      for (const n of x)
+        this.removeEventListener(n, i, !0);
+      this.revealAbort === i && (this.revealAbort = void 0);
     };
-  }
-  findNearestEnabled(e, t, i) {
-    let s = t, l;
-    do
-      if (s += i, l = e[s], l === void 0)
-        break;
-    while (l != null && l.disabled);
-    return l ? s : t;
-  }
-  findIndexByValue(e, t) {
-    return e.findIndex((i) => i.value === t);
-  }
-  clearItemFocusStates() {
-    this.availableOptions.forEach((e) => {
-      e.focused = !1, e.tabIndex = -1;
+    for (const n of x)
+      this.addEventListener(n, i, { capture: !0, passive: !0 });
+    this.revealAbort = i;
+    const s = (n) => requestAnimationFrame(() => {
+      e || (this.scrollToActiveOption(), n > 1 ? s(n - 1) : i());
     });
+    s(t);
   }
-  // Only set the current option without selecting it, eg: focus
-  setCurrentOption(e, t = !0) {
-    this.clearItemFocusStates(), e ? (this.currentOption = e, e.focused = !0, e.tabIndex = 0, this.emit("dds-current-change", h({}, this.getEventDetails(e))), t ? this.setFocusedOption(e) : this.scrollToActiveOption()) : (this.currentOption = null, this.emit("dds-current-change", null));
-  }
-  setFocusedOption(e) {
-    const t = this.getAllRenderedOptions().find(
-      (i) => i.value === e.value
-    );
-    t && t.focus({ preventScroll: !0 });
-  }
-  setSelectedOption(e) {
-    this.availableOptions.forEach((t) => t.selected = !1), e && (this.currentOption = e, e.selected = !0);
-  }
-  selectionChanged(e, t) {
-    const i = t || this.value;
-    e && e.value !== i && (this.value = e.value);
-  }
-  changeOption(e, t) {
-    e && !e.disabled && (this.selectedIndex = this.findIndexByValue(
-      this.availableOptions,
-      e.value
-    ), this.setSelectedOption(e), this.setCurrentOption(e), this.selectionChanged(e, t));
-  }
-  handleInitialFocus() {
-    if (!this.value && this.selectedIndex < 0)
-      this.selectedIndex = 0;
-    else {
-      const e = this.value ? this.findIndexByValue(this.availableOptions, this.value) : this.selectedIndex;
-      e !== -1 && !this.isAutoComplete && (this.selectedIndex = e, this.setCurrentOption(this.availableOptions[this.selectedIndex]), this.setSelectedOption(this.availableOptions[this.selectedIndex]), this.value && this.selectionChanged(this.availableOptions[this.selectedIndex]));
-    }
-    this.selectedIndex || (this.setCurrentOption(this.availableOptions[0]), this.setSelectedOption(this.availableOptions[0]));
+  /**
+   * Scroll the active option into view once the popup has laid out. For hosts
+   * that open the list without moving focus into it.
+   * @internal
+   */
+  revealActiveOption() {
+    this.runEffect({ type: "scrollActiveNextFrame" });
   }
-  handleKeyFocus(e) {
-    (this.isAutoComplete || this.searchMode === "none") && (this.handleKeyCodes(e), this.setCurrentOption(this.availableOptions[this.selectedIndex], !1), this.setSelectedOption(this.availableOptions[this.selectedIndex])), this.searchMode === "typehead" && this.buildQueryString(e);
+  /** (Re)start the timer that clears the typeahead query. */
+  restartTypeaheadTimer(t) {
+    typeof this.queryTimeout == "number" && window.clearTimeout(this.queryTimeout), this.queryTimeout = window.setTimeout(() => {
+      this.dispatch({ type: "typeaheadElapsed" });
+    }, t);
   }
-  captureFocus(e) {
-    this.focused = !0, this.focus(), e ? this.handleKeyFocus(e) : this.handleInitialFocus(), typeof requestAnimationFrame == "function" && requestAnimationFrame(() => this.scrollToActiveOption());
+  captureFocus(t) {
+    this.dispatch({ type: "open", key: t });
   }
   removeFocus() {
-    this.focused = !1, this.clearItemFocusStates();
+    this.dispatch({ type: "close" });
   }
   handleSlotChange() {
-    const e = this.getAllOptions();
-    if (this.setOptionsFromSlottedItems(), e.length > 0 && this.searchOnValueSet === "true") {
-      const t = e.find((i) => i.value === this.value);
-      this.setSelectedOption(t), this.selectionChanged(t), this.currentOption && (this.selectedIndex = this.findIndexByValue(e, this.value), this.emit("dds-option-change", h({}, this.getEventDetails(this.currentOption))));
-    } else if (e.length > 0 && !this.search && !this.isAutoComplete) {
-      const t = e.find((i) => !i.disabled);
-      this.selectedIndex = 0, this.setCurrentOption(t, !1), this.emit("dds-current-change", h({}, this.getEventDetails(t)));
-    } else if (e.length > 0 && (this.search || this.isAutoComplete)) {
-      const t = e.find((i) => !i.disabled);
-      (!this.currentOption || this.currentOption.value !== (t == null ? void 0 : t.value)) && (this.selectedIndex = 0, this.setCurrentOption(t, !1));
+    if (this.items) {
+      this.warnIgnoredChildren();
+      return;
+    }
+    this.dispatch({ type: "slotChanged", options: this.getAllOptions() });
+  }
+  // ---------------------------------------------------------------------------
+  // Listbox state wiring
+  // ---------------------------------------------------------------------------
+  toListboxState() {
+    return {
+      value: this.value,
+      filterText: this.filterText,
+      searchMode: this.searchMode,
+      search: this.search,
+      searchOnValueSet: this.searchOnValueSet,
+      disableDelaySet: this.disableDelaySet,
+      focused: this.focused,
+      options: this.options,
+      optionEls: this.optionEls,
+      availableOptions: this.availableOptions,
+      selectedIndex: this.selectedIndex,
+      currentOption: this.currentOption,
+      marked: this.markedOption,
+      flagged: this.flaggedOption,
+      query: this.queryString,
+      ownValue: this.ownValue
+    };
+  }
+  /**
+   * Reduce, apply the new state, then run the effects in order. Fields that
+   * changed and changed back within one reduction are still reported to Lit,
+   * exactly as the former sequence of assignments did.
+   */
+  dispatch(t, e) {
+    const { state: i, effects: s, changed: o, flags: n } = V(
+      this.toListboxState(),
+      t
+    );
+    for (const d of P) {
+      if (!o.includes(d)) continue;
+      const m = this;
+      if (m[d] !== i[d])
+        m[d] = i[d];
+      else {
+        const E = this.constructor.getPropertyOptions(d);
+        this.requestUpdate(d, m[d], v(p({}, E), {
+          hasChanged: () => !0
+        }));
+      }
     }
+    this.applyOptionFlags(n, i), this.markedOption = i.marked, this.flaggedOption = i.flagged, this.queryString = i.query, this.ownValue = i.ownValue;
+    for (const d of s)
+      this.runEffect(d, e);
+  }
+  /**
+   * Option flags follow Listbox state. On the caller's option items (the
+   * source of truth for what is selected / focusable) the marked option is
+   * `selected`, the flagged option is `focused` with tabindex 0, and every
+   * other item is cleared. A rendered clone (a click passes the clone) is only
+   * ever set, never cleared: its flags otherwise come from its render bindings.
+   */
+  applyOptionFlags(t, e) {
+    var s;
+    if (!t.selected && !t.focus) return;
+    const i = /* @__PURE__ */ new Set([
+      ...this.optionEls,
+      ...(s = this.options) != null ? s : []
+    ]);
+    t.selected && (i.forEach((o) => o.selected = o === e.marked), e.marked && (e.marked.selected = !0)), t.focus && (i.forEach((o) => {
+      const n = o === e.flagged;
+      o.focused = n, o.tabIndex = n ? 0 : -1;
+    }), e.flagged && (e.flagged.focused = !0, e.flagged.tabIndex = 0));
+  }
+  runEffect(t, e) {
+    switch (t.type) {
+      case "emit":
+        return this.emitListboxEvent(t);
+      case "focusOption":
+        return this.setFocusedOption(t.option);
+      case "scrollActive":
+        return this.scrollToActiveOption(t.option);
+      case "scrollActiveNextFrame":
+        return this.revealOverFrames();
+      case "focusHost":
+        return this.focus();
+      case "preventDefault":
+        return e == null ? void 0 : e.preventDefault();
+      case "stopPropagation":
+        return e == null ? void 0 : e.stopPropagation();
+      case "scheduleTypeaheadReset":
+        return this.restartTypeaheadTimer(t.ms);
+      case "afterUpdate":
+        this.updateComplete.then(() => this.dispatch(t.action));
+        return;
+    }
+  }
+  emitListboxEvent(t) {
+    const e = t.detail;
+    switch (e.kind) {
+      case "details":
+        return this.emit(t.name, p({}, this.getEventDetails(e.option, e.index)));
+      case "null":
+        return this.emit(t.name, null);
+      case "key":
+        return this.emit(t.name, { key: e.key, code: e.code });
+      case "keyDetails":
+        return this.emit(t.name, p({
+          code: e.code,
+          key: e.key
+        }, this.getEventDetails(e.option, e.index)));
+      case "none":
+        return this.emit(t.name);
+      case "elements":
+        return this.emit(t.name, { elements: e.elements });
+      case "deselect":
+        return this.emit(t.name, p({
+          option: e.option,
+          value: void 0,
+          index: -1,
+          text: e.option.optionText
+        }, this.itemDetail(e.option)));
+    }
+  }
+  renderOptionContent(t, e) {
+    const i = this.items ? A(t) : void 0;
+    return i ? this.renderOption ? this.renderOption(i, {
+      index: e,
+      selected: this.value === t.value,
+      active: e === this.selectedIndex,
+      disabled: !!i.disabled
+    }) : i.label : F(t.innerHTML);
   }
   render() {
-    return v`<div
+    return g`<div
       part="base"
-      class=${g("option-list", {
+      class=${k("option-list", {
       "option-list--sm": this.size === "sm",
       "option-list--lg": this.size === "lg"
     })}
       @keydown=${this.handleKeydown}
       @focus=${this.captureFocus}>
-      ${this.availableOptions.map(
-      (e, t) => v`
-          <dap-ds-option-item
-            size=${this.size}
-            part="option-item"
-            exportparts="base: option-item-base, label: option-item-label, prefix: option-item-prefix, suffix: option-item-suffix"
-            ?disabled=${e.disabled}
-            ?selected=${this.value === e.value}
-            ?focused=${t === this.selectedIndex}
-            label=${O(e.label)}
-            role="option"
-            value=${e.value}
-            tabIndex=${e.tabIndex}
-            id=${e.id || `dap-ds-option-${e.value}`}
-            data-testid=${O(e.dataset.testid || void 0)}
-            selectable=${this.selectable}
-            @click=${this.handleOptionClick}>
-            ${y(e.innerHTML)}
-          </dap-ds-option-item>
-        `
+      ${// No copied options before the first update: the server render and the
+    // client's hydration render then match (both empty). Options always
+    // arrive after it anyway (slotchange / items).
+    (this.hasUpdated ? this.availableOptions : []).map(
+      (t, e) => g`
+            <dap-ds-option-item
+              size=${this.size}
+              part="option-item"
+              exportparts="base: option-item-base, label: option-item-label, prefix: option-item-prefix, suffix: option-item-suffix"
+              ?disabled=${t.disabled}
+              ?selected=${this.value === t.value}
+              ?focused=${e === this.selectedIndex}
+              label=${b(t.label)}
+              role="option"
+              value=${t.value}
+              tabIndex=${t.tabIndex}
+              id=${t.id || `dap-ds-option-${t.value}`}
+              data-testid=${b(t.dataset.testid || void 0)}
+              selectable=${this.selectable}
+              @click=${this.handleOptionClick}>
+              ${this.renderOptionContent(t, e)}
+            </dap-ds-option-item>
+          `
     )}
-      <slot hidden @slotchange=${this.handleSlotChange}></slot>
+      <!-- The caller's options are only the data source (the copies above
+        are what is shown), so keep them out of the accessibility tree. -->
+      <div hidden aria-hidden="true">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
     </div> `;
   }
 };
-r.tagName = "dap-ds-option-list", r.dependencies = {
-  "dap-ds-option-item": A
-}, r.styles = T(E);
-let a = r;
-n([
-  d()
-], a.prototype, "filterText");
-n([
-  d({ type: String, reflect: !0 })
-], a.prototype, "value");
-n([
-  d({ type: Boolean })
-], a.prototype, "focused");
-n([
-  d({ type: Boolean })
-], a.prototype, "search");
-n([
-  d()
-], a.prototype, "searchMode");
-n([
-  d({ type: String })
-], a.prototype, "searchOnValueSet");
-n([
-  d({ type: String })
-], a.prototype, "selectable");
-n([
-  d({ type: Array })
-], a.prototype, "options");
-n([
-  d({ type: Boolean })
-], a.prototype, "disableDelaySet");
-n([
-  d({ type: Boolean })
-], a.prototype, "multiselectable");
-n([
-  p()
-], a.prototype, "currentOption");
-n([
-  p()
-], a.prototype, "selectedIndex");
-n([
-  p()
-], a.prototype, "optionEls");
-n([
-  p()
-], a.prototype, "availableOptions");
+u.tagName = "dap-ds-option-list", u.dependencies = {
+  "dap-ds-option-item": D
+}, u.styles = $(K);
+let r = u;
+a([
+  h()
+], r.prototype, "filterText", 2);
+a([
+  h({ type: String, reflect: !0 })
+], r.prototype, "value", 2);
+a([
+  h({ type: Boolean })
+], r.prototype, "focused", 2);
+a([
+  h({ type: Boolean })
+], r.prototype, "search", 2);
+a([
+  h()
+], r.prototype, "searchMode", 2);
+a([
+  h({ type: String })
+], r.prototype, "searchOnValueSet", 2);
+a([
+  h({ type: String })
+], r.prototype, "selectable", 2);
+a([
+  h({ type: Array })
+], r.prototype, "options", 2);
+a([
+  h({ type: Boolean })
+], r.prototype, "disableDelaySet", 2);
+a([
+  h({ converter: B })
+], r.prototype, "items", 1);
+a([
+  h({ attribute: !1 })
+], r.prototype, "renderOption", 2);
+a([
+  h({ type: Boolean })
+], r.prototype, "multiselectable", 2);
+a([
+  c()
+], r.prototype, "currentOption", 2);
+a([
+  c()
+], r.prototype, "selectedIndex", 2);
+a([
+  c()
+], r.prototype, "optionEls", 2);
+a([
+  c()
+], r.prototype, "availableOptions", 2);
 export {
-  a as default
+  r as default
 };
 //# sourceMappingURL=option-list.component.js.map