dap-design-system 0.62.4 → 0.63.0

package/dist/components/select/select.component.js

@@ -1,54 +1,65 @@
-var f = (u, e, t) => new Promise((s, l) => {
-  var p = (r) => {
+var O = Object.defineProperty;
+var v = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var $ = (p, e, t) => e in p ? O(p, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[e] = t, D = (p, e) => {
+  for (var t in e || (e = {}))
+    x.call(e, t) && $(p, t, e[t]);
+  if (v)
+    for (var t of v(e))
+      I.call(e, t) && $(p, t, e[t]);
+  return p;
+};
+var f = (p, e, t) => new Promise((i, s) => {
+  var d = (c) => {
     try {
-      b(t.next(r));
+      b(t.next(c));
     } catch (y) {
-      l(y);
+      s(y);
     }
-  }, m = (r) => {
+  }, h = (c) => {
     try {
-      b(t.throw(r));
+      b(t.throw(c));
     } catch (y) {
-      l(y);
+      s(y);
     }
-  }, b = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(p, m);
-  b((t = t.apply(u, e)).next());
+  }, b = (c) => c.done ? i(c.value) : Promise.resolve(c.value).then(d, h);
+  b((t = t.apply(p, e)).next());
 });
-import { clsx as h } 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 $ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as v } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as o } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as i } from "../../node_modules/lit-html/static.js";
-import { getValidityStateObject as D, idInScope as w } from "../../common/utils.js";
-import { GenericFormElement as k } from "../../internal/mixin/genericFormElement.js";
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as k, nothing as g } from "lit";
+import { query as S, property as r, state as C } from "lit/decorators.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+import { styleMap as A } from "lit/directives/style-map.js";
+import { html as o } from "lit/static-html.js";
+import { getValidityStateObject as L, idInScope as V } from "../../common/utils.js";
+import { GenericFormElement as B } from "../../internal/mixin/genericFormElement.js";
+import { formLabelTemplate as T } from "../../internal/templates/formLabel.js";
 import "../../localization/localization.js";
-import S from "../feedback/feedback.component.js";
-import A from "../form/form-label/form-label.component.js";
-import I from "../icon/icon.component.js";
-import L from "../icon-button/icon-button.component.js";
-import C from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
-import x from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
-import V from "../option-list/option-list.component.js";
-import O from "../popup/popup.component.js";
-import T from "../tooltip/tooltip.component.js";
-import B from "../tray/tray.component.js";
-import q from "../typography/typography.component.js";
-import N from "./select.scss.js";
-import g, { t as z } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as M } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var E = Object.defineProperty, n = (u, e, t, s) => {
-  for (var l = void 0, p = u.length - 1, m; p >= 0; p--)
-    (m = u[p]) && (l = m(e, t, l) || l);
-  return l && E(e, t, l), l;
+import z from "../feedback/feedback.component.js";
+import N from "../form/form-label/form-label.component.js";
+import q from "../icon/icon.component.js";
+import E from "../icon-button/icon-button.component.js";
+import M from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
+import _ from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
+import { toOptionItems as F, optionElementsFor as P, optionDataOf as H, optionItemsConverter as j } from "../option-list/option-data.js";
+import U from "../option-list/option-list.component.js";
+import K from "../popup/popup.component.js";
+import R from "../tooltip/tooltip.component.js";
+import G from "../tray/tray.component.js";
+import J from "../typography/typography.component.js";
+import Q from "./select.scss.js";
+import w, { t as W } from "../../node_modules/i18next/dist/esm/i18next.js";
+var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, n = (p, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? Y(e, t) : e, d = p.length - 1, h; d >= 0; d--)
+    (h = p[d]) && (s = (i ? h(e, t, s) : h(s)) || s);
+  return i && s && X(e, t, s), s;
 };
-const c = class c extends k {
+const Z = () => typeof CSS != "undefined" && typeof CSS.supports == "function" && CSS.supports("appearance", "base-select"), u = class u extends B {
   constructor() {
-    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.isMobile = !1, this.native = !1, this.loading = !1, this.noAnimation = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this.languageChangeHandler = () => {
+    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.isMobile = !1, this.native = !1, this.customizable = !1, this.loading = !1, this.noAnimation = !1, this.floatingStrategy = "absolute", this.disableViewportAutoClose = !1, this.baseSelectSupported = !1, this.languageChangeHandler = () => {
       this.requestUpdate();
+    }, this.handleSlotChange = () => {
+      this.syncSelectedItem();
     }, this.handleClick = () => {
       this.readonly || this.disabled || (this.opened ? this.hideDropDown() : this.showDropDown());
     }, this.handleKeyDown = (e) => f(this, null, function* () {
@@ -62,12 +73,12 @@ const c = class c extends k {
         this.emit("dds-keydown", e), this.showDropDown(e.key);
       }
     }), this.handleListKeyDown = (e) => {
-      var t, s;
+      var t, i;
       if (((t = e.detail) == null ? void 0 : t.key) === "Tab") {
         this.hideDropDown({ skipFocus: !0 }), this.focus();
         return;
       }
-      ((s = e.detail) == null ? void 0 : s.key) === "Escape" && this.hideDropDown();
+      ((i = e.detail) == null ? void 0 : i.key) === "Escape" && this.hideDropDown();
     }, this.handleDocumentMouseDown = (e) => {
       const t = e.composedPath();
       this && !t.includes(this) && this.hideDropDown();
@@ -78,22 +89,63 @@ const c = class c extends k {
     }, this.handleBlur = () => {
       this.emit("dds-blur");
     }, this.handleSelectedChange = (e) => {
-      const t = Object.keys(e.detail).length ? e.detail : null, s = t == null ? void 0 : t.value, l = s !== this.value;
-      this.selectedItem = t, this.hideDropDown(), this.value = s, l && this.emit("dds-change", this.selectedItem), this.setValidity();
+      var h;
+      const t = Object.keys(e.detail).length ? e.detail : null, i = t == null ? void 0 : t.value, s = ((h = e.target) == null ? void 0 : h.value) !== void 0 && e.target.value !== i, d = i !== this.value && !s;
+      this.selectedItem = t, this.hideDropDown(), this.value = i, d && this.emit("dds-change", this.selectedItem), this.setValidity();
     }, this.handleOptionDeselect = () => {
       this.selectedItem = null, this.value = void 0, this.emit("dds-change", null), this.setValidity();
     }, this.handleNativeChange = (e) => {
-      const s = e.target.value, l = this.querySelector(
-        `dap-ds-option-item[value="${s}"]`
-      );
-      this.value = s, this.selectedItem = l ? { value: s, text: l.optionText } : { value: s, text: s }, this.emit("dds-change", this.selectedItem), this.setValidity();
+      var d;
+      const i = e.target.value, s = (d = this.getOptions().find((h) => h.value === i)) != null ? d : null;
+      this.value = i, this.selectedItem = s ? { value: i, text: s.optionText } : { value: i, text: i }, this.emit("dds-change", this.selectedItem), this.setValidity();
     };
   }
+  get items() {
+    return this._items;
+  }
+  set items(e) {
+    this._items = F(e);
+  }
   connectedCallback() {
-    super.connectedCallback(), g.on("languageChanged", this.languageChangeHandler), this.addEventListener("invalid", this.handleInvalid);
+    super.connectedCallback(), this.baseSelectSupported = Z(), w.on("languageChanged", this.languageChangeHandler), this.addEventListener("invalid", this.handleInvalid);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), g.off("languageChanged", this.languageChangeHandler), this.removeEventListener("invalid", this.handleInvalid);
+    super.disconnectedCallback(), w.off("languageChanged", this.languageChangeHandler), this.removeEventListener("invalid", this.handleInvalid);
+  }
+  /** The select's options, in the order (and so with the index) the list uses. */
+  getOptions() {
+    var e, t;
+    return this.items ? P(this.items) : typeof this.querySelectorAll != "function" ? [] : (t = (e = this.optionList) == null ? void 0 : e.getAllOptions()) != null ? t : [
+      ...this.querySelectorAll("dap-ds-option-item")
+    ];
+  }
+  /** The selected item for `value`, shaped like the list's option-change detail. */
+  findSelectedItem(e) {
+    if (e == null)
+      return null;
+    const t = this.getOptions(), i = t.findIndex((h) => h.value === e);
+    if (i < 0)
+      return null;
+    const s = t[i], d = H(s);
+    return D({
+      opt: s,
+      value: s.value,
+      text: s.optionText,
+      index: i
+    }, d ? { item: d } : {});
+  }
+  /**
+   * Derive `selectedItem` from `value` and the options, so the trigger text
+   * and validity never depend on the list echoing the value back. An unknown
+   * value leaves it alone; the list answers that one (revert).
+   */
+  syncSelectedItem() {
+    var t, i;
+    const e = this.findSelectedItem(this.value);
+    e && (e.opt !== ((t = this.selectedItem) == null ? void 0 : t.opt) || e.value !== ((i = this.selectedItem) == null ? void 0 : i.value)) && (this.selectedItem = e);
+  }
+  willUpdate(e) {
+    super.willUpdate(e), (e.has("value") || e.has("items")) && this.syncSelectedItem();
   }
   /**
    * Lifecycle method to handle property changes
@@ -105,7 +157,7 @@ const c = class c extends k {
     }
   }
   formResetCallback() {
-    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.selectedItem = this.defaultValue;
+    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.selectedItem = this.findSelectedItem(this.defaultValue);
   }
   showDropDown(e) {
     return f(this, null, function* () {
@@ -137,24 +189,20 @@ const c = class c extends k {
   }
   // custom validation
   get validity() {
-    return this.internals.validity ? this.internals.validity : D({
+    return this.internals.validity ? this.internals.validity : L({
       valueMissing: this.required && (!this.selectedItem || this.selectedItem.value === "" || this.value === "" || this.value === void 0 || this.value === null)
     });
   }
   get validationMessage() {
-    return z("form.validationMessage.select");
+    return W("form.validationMessage.select");
   }
   /** Get the current display text for the selected item, dynamically fetching from the option */
   get selectedDisplayText() {
     if (!this.selectedItem) return null;
-    if (this.optionList) {
-      const e = Array.from(
-        this.optionList.querySelectorAll("dap-ds-option-item")
-      ).find((t) => t.value === this.selectedItem.value);
-      if (e)
-        return e.optionText;
-    }
-    return this.selectedItem.text;
+    const e = this.getOptions().find(
+      (t) => t.value === this.selectedItem.value
+    );
+    return e ? e.optionText : this.selectedItem.text;
   }
   checkValidity() {
     const e = !!this.selectedItem && this.selectedItem.value !== "" && this.value !== "" && this.value !== void 0 && this.value !== null;
@@ -175,8 +223,39 @@ const c = class c extends k {
   handleInvalid(e) {
     e.preventDefault(), this.focus();
   }
+  /** Clone the option item's slotted prefix/suffix content for the customizable picker */
+  cloneSlotContent(e, t) {
+    return Array.from(e.querySelectorAll(`:scope > [slot="${t}"]`)).map(
+      (i) => {
+        const s = i.cloneNode(!0);
+        return s.removeAttribute("slot"), s;
+      }
+    );
+  }
+  /** The option label without the text of slotted prefix/suffix content */
+  getOptionLabel(e) {
+    return e.label ? e.label : Array.from(e.childNodes).filter((t) => !(t instanceof Element && t.hasAttribute("slot"))).map((t) => t.textContent).join("").trim();
+  }
+  renderBaseSelectOption(e) {
+    const t = this.cloneSlotContent(e, "prefix"), i = this.cloneSlotContent(e, "suffix");
+    return o`
+      <option
+        part="native-option"
+        value=${e.value || ""}
+        ?disabled=${e.disabled}
+        ?selected=${e.value === this.value}>
+        ${t.length ? o`<span class="option__prefix" aria-hidden="true"
+              >${t}</span
+            >` : g}
+        <span class="option__label">${this.getOptionLabel(e)}</span>
+        ${i.length ? o`<span class="option__suffix" aria-hidden="true"
+              >${i}</span
+            >` : g}
+      </option>
+    `;
+  }
   renderNativeOption(e) {
-    return i`
+    return this.useBaseSelect ? this.renderBaseSelectOption(e) : o`
       <option
         value=${e.value || ""}
         ?disabled=${e.disabled}
@@ -189,20 +268,29 @@ const c = class c extends k {
     const t = Array.from(
       e.querySelectorAll("dap-ds-option-item")
     );
-    return i`
+    return o`
       <optgroup label=${e.label || ""} ?disabled=${e.disabled}>
-        ${t.map((s) => this.renderNativeOption(s))}
+        ${t.map((i) => this.renderNativeOption(i))}
       </optgroup>
     `;
   }
   renderNativeOptions() {
-    return Array.from(this.children).map((t) => t.tagName === "DAP-DS-OPTION-GROUP" ? this.renderNativeOptgroup(t) : t.tagName === "DAP-DS-OPTION-ITEM" ? this.renderNativeOption(t) : "");
+    return this.items ? this.getOptions().map((t) => this.renderNativeOption(t)) : Array.from(this.children).map((t) => t.tagName === "DAP-DS-OPTION-GROUP" ? this.renderNativeOptgroup(t) : t.tagName === "DAP-DS-OPTION-ITEM" ? this.renderNativeOption(t) : "");
+  }
+  /** True when the customizable select is requested and supported by the browser */
+  get useBaseSelect() {
+    return !!this.customizable && this.baseSelectSupported;
   }
   renderNativeSelect() {
-    return i`
+    const e = this.useBaseSelect;
+    return o`
       <div class="select-wrapper--native">
         <select
-          class="${h("select", `select--${this.effectiveSize}`, {
+          style=${A(
+      e && this.maxHeight ? { "--dds-select-picker-max-height": `${this.maxHeight}px` } : {}
+    )}
+          class="${m("select", `select--${this.effectiveSize}`, {
+      "select--base": e,
       "select--disabled": this.disabled,
       "select--readonly": this.readonly,
       "select--success": this.status === "success",
@@ -210,20 +298,32 @@ const c = class c extends k {
       "select--loading": this.loading
     })}"
           part="trigger"
-          aria-labelledby=${o(this.label ? "label" : void 0)}
-          aria-describedby=${o(this.getAriaDescribedBy())}
+          aria-labelledby=${l(this.label ? "label" : void 0)}
+          aria-describedby=${l(this.getAriaDescribedBy())}
           ?disabled=${this.disabled}
           ?required=${this.required}
           @change=${this.handleNativeChange}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}>
-          ${this.placeholder ? i`<option value="" disabled ?selected=${!this.value}>
+          ${e ? (
+      // Rendered as a nested template so the HTML parser never sees a
+      // <button> inside <select> (the legacy parser would drop it and
+      // desync Lit's template parts); DOM insertion is always allowed.
+      o`<button class="select__button" part="native-button">
+                <selectedcontent></selectedcontent>
+              </button>`
+    ) : g}
+          ${this.placeholder ? o`<option
+                class="option--placeholder"
+                value=""
+                disabled
+                ?selected=${!this.value}>
                 ${this.placeholder}
               </option>` : ""}
           ${this.renderNativeOptions()}
         </select>
         <div class="icon" part="indicator-icon">
-          ${this.loading ? i`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : i`<slot name="indicator-icon"
+          ${this.loading ? o`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : o`<slot name="indicator-icon"
                 ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line
               ></slot>`}
         </div>
@@ -231,11 +331,11 @@ const c = class c extends k {
     `;
   }
   renderTriggerElement() {
-    return i` <button
+    return o` <button
       slot="trigger"
       part="trigger"
       role="combobox"
-      class="${h("select", `select--${this.effectiveSize}`, {
+      class="${m("select", `select--${this.effectiveSize}`, {
       "select--disabled": this.disabled,
       "select--readonly": this.readonly,
       "select--opened": this.opened,
@@ -246,20 +346,20 @@ const c = class c extends k {
       "select--optional": this.optional
     })}"
       aria-expanded=${this.readonly || this.disabled ? "false" : this.opened ? "true" : "false"}
-      aria-haspopup=${o(
+      aria-haspopup=${l(
       this.readonly || this.disabled ? void 0 : "listbox"
     )}
-      aria-labelledby=${o(this.label ? "label" : void 0)}
-      aria-label=${o(
+      aria-labelledby=${l(this.label ? "label" : void 0)}
+      aria-label=${l(
       this.label ? void 0 : this.ariaLabel || this.selectedDisplayText || this.placeholder || void 0
     )}
-      aria-describedby=${o(this.getAriaDescribedBy())}
+      aria-describedby=${l(this.getAriaDescribedBy())}
       aria-disabled=${this.disabled}
       aria-controls="option-list"
-      aria-activedescendant=${o(
+      aria-activedescendant=${l(
       // Options render in option-list's shadow root, out of this scope; a
       // cross-scope IDREF is ignored by browsers, so only same-scope ids are set
-      w(this.shadowRoot, this.getActiveDescendant())
+      V(this.shadowRoot, this.getActiveDescendant())
     )}
       ?required=${this.required}
       ?readonly=${this.readonly}
@@ -270,55 +370,57 @@ const c = class c extends k {
       @focus=${this.handleFocus}
       @keydown=${this.handleKeyDown}
       @click=${this.handleClick}>
-      <span class="text">${this.selectedDisplayText || this.placeholder}</span>
+      <span
+        class="text"
+        .textContent=${this.selectedDisplayText || this.placeholder || ""}></span>
       <div
-        class="${h("icon", {
+        class="${m("icon", {
       "icon--opened": this.opened,
       "icon--no-animation": this.noAnimation
     })}"
         part="indicator-icon">
-        ${this.loading ? i`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : i`<slot name="indicator-icon"
+        ${this.loading ? o`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : o`<slot name="indicator-icon"
               ><dap-ds-icon-arrow-down-s-line></dap-ds-icon-arrow-down-s-line
             ></slot>`}
       </div>
     </button>`;
   }
   renderOptionList() {
-    return i` <dap-ds-option-list
+    return o` <dap-ds-option-list
       class="option-list"
       part="option-list"
       exportparts="option-item, option-item-base, option-item-label, option-item-prefix, option-item-suffix"
       id="option-list"
-      aria-labelledby=${o(this.label ? "label" : void 0)}
+      aria-labelledby=${l(this.label ? "label" : void 0)}
       searchMode="typehead"
-      size=${o(this.effectiveSize)}
+      size=${l(this.effectiveSize)}
       value=${this.value}
       disableDelaySet
+      .items=${this.items}
+      .renderOption=${this.renderOption}
       @dds-option-change=${this.handleSelectedChange}
       @dds-keydown=${this.handleListKeyDown}
       @dds-option-deselect=${this.handleOptionDeselect}>
-      <slot></slot>
+      <slot @slotchange=${this.handleSlotChange}></slot>
     </dap-ds-option-list>`;
   }
   render() {
-    return i` <div class="label-container">
-        ${this.label && i`<dap-ds-form-label
-          part="label"
-          id="label"
-          .size=${this.effectiveSize}
-          .required=${this.required}
-          .requiredLabel=${this.requiredLabel}
-          .optional=${this.optional}
-          .optionalLabel=${this.optionalLabel}
-          .subtle=${this.subtle}
-          .disabled=${this.disabled}
-          class=${h("label")}
-          .noMargin=${!!this.description}
-          for="input"
-          .hideLabel=${this.hideLabel}
-          label=${o(this.label)}>
-        </dap-ds-form-label>`}
-        ${this.tooltip && i` <dap-ds-tooltip
+    return o` <div class="label-container">
+        ${T({
+      label: this.label,
+      id: "label",
+      htmlFor: "input",
+      size: this.effectiveSize,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      subtle: this.subtle,
+      disabled: this.disabled,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+        ${this.tooltip && o` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
           mode="toggle"
@@ -336,18 +438,18 @@ const c = class c extends k {
           </dap-ds-icon-button>
         </dap-ds-tooltip>`}
       </div>
-      ${this.description && i`
+      ${this.description && o`
         <dap-ds-typography
           part="description"
           variant="description"
-          class=${h("input-description")}
-          size=${o(this.effectiveSize)}
+          class=${m("input-description")}
+          size=${l(this.effectiveSize)}
           id="description">
           ${this.description}
         </dap-ds-typography>
       `}
       <div>
-        ${this.native ? this.renderNativeSelect() : this.isMobile ? i`
+        ${this.native || this.customizable ? this.renderNativeSelect() : this.isMobile ? o`
                 ${this.renderTriggerElement()}
                 <dap-ds-tray
                   part="mobile-tray"
@@ -357,8 +459,8 @@ const c = class c extends k {
                   header="false"
                   >${this.renderOptionList()}</dap-ds-tray
                 >
-              ` : i`<dap-ds-popup
-                floatingStrategy=${o(this.floatingStrategy)}
+              ` : o`<dap-ds-popup
+                floatingStrategy=${l(this.floatingStrategy)}
                 part="base"
                 exportparts="popup:popup-base"
                 class="select-popup"
@@ -366,17 +468,17 @@ const c = class c extends k {
                 ?hasArrow=${!1}
                 overflow
                 placement=${this.placement}
-                maxHeight=${o(this.maxHeight)}
+                maxHeight=${l(this.maxHeight)}
                 ?sync=${this.sync}
                 ?disableViewportAutoClose=${this.disableViewportAutoClose}
                 @dds-close=${this.handlePopupAutoClose}
-                size=${o(this.effectiveSize)}>
+                size=${l(this.effectiveSize)}>
                 ${this.renderTriggerElement()} ${this.renderOptionList()}
               </dap-ds-popup>`}
-        ${this.feedback && i`<dap-ds-feedback
+        ${this.feedback && o`<dap-ds-feedback
           part="feedback"
-          feedbackType=${o(this.feedbackType)}
-          feedbackSize="${o(this.effectiveSize)}"
+          feedbackType=${l(this.feedbackType)}
+          feedbackSize="${l(this.effectiveSize)}"
           id="feedback"
           .subtle=${this.subtle}>
           ${this.feedback}
@@ -384,62 +486,71 @@ const c = class c extends k {
       </div>`;
   }
 };
-c.tagName = "dap-ds-select", c.dependencies = {
-  "dap-ds-icon-loading-spinner": x,
-  "dap-ds-icon-arrow-down-s-line": C,
-  "dap-ds-option-list": V,
-  "dap-ds-form-label": A,
-  "dap-ds-tooltip": T,
-  "dap-ds-icon-button": L,
-  "dap-ds-icon": I,
-  "dap-ds-typography": q,
-  "dap-ds-popup": O,
-  "dap-ds-tray": B,
-  "dap-ds-feedback": S
-}, c.styles = M(N);
-let a = c;
+u.tagName = "dap-ds-select", u.dependencies = {
+  "dap-ds-icon-loading-spinner": _,
+  "dap-ds-icon-arrow-down-s-line": M,
+  "dap-ds-option-list": U,
+  "dap-ds-form-label": N,
+  "dap-ds-tooltip": R,
+  "dap-ds-icon-button": E,
+  "dap-ds-icon": q,
+  "dap-ds-typography": J,
+  "dap-ds-popup": K,
+  "dap-ds-tray": G,
+  "dap-ds-feedback": z
+}, u.styles = k(Q);
+let a = u;
+n([
+  S("button")
+], a.prototype, "triggerButton", 2);
+n([
+  S("dap-ds-option-list")
+], a.prototype, "optionList", 2);
+n([
+  r({ reflect: !0 })
+], a.prototype, "placement", 2);
 n([
-  v("button")
-], a.prototype, "triggerButton");
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "opened", 2);
 n([
-  v("dap-ds-option-list")
-], a.prototype, "optionList");
+  r()
+], a.prototype, "placeholder", 2);
 n([
-  d({ reflect: !0 })
-], a.prototype, "placement");
+  r({ type: Boolean })
+], a.prototype, "sync", 2);
 n([
-  d({ type: Boolean, reflect: !0 })
-], a.prototype, "opened");
+  r({ type: Boolean })
+], a.prototype, "isMobile", 2);
 n([
-  d()
-], a.prototype, "placeholder");
+  r({ type: Boolean })
+], a.prototype, "native", 2);
 n([
-  d({ type: Boolean })
-], a.prototype, "sync");
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "customizable", 2);
 n([
-  d({ type: Boolean })
-], a.prototype, "isMobile");
+  r({ type: Boolean })
+], a.prototype, "loading", 2);
 n([
-  d({ type: Boolean })
-], a.prototype, "native");
+  r({ type: Number })
+], a.prototype, "maxHeight", 2);
 n([
-  d({ type: Boolean })
-], a.prototype, "loading");
+  r({ type: Boolean })
+], a.prototype, "noAnimation", 2);
 n([
-  d({ type: Number })
-], a.prototype, "maxHeight");
+  r({ reflect: !0 })
+], a.prototype, "floatingStrategy", 2);
 n([
-  d({ type: Boolean })
-], a.prototype, "noAnimation");
+  r({ type: Boolean })
+], a.prototype, "disableViewportAutoClose", 2);
 n([
-  d({ reflect: !0 })
-], a.prototype, "floatingStrategy");
+  r({ converter: j })
+], a.prototype, "items", 1);
 n([
-  d({ type: Boolean })
-], a.prototype, "disableViewportAutoClose");
+  r({ attribute: !1 })
+], a.prototype, "renderOption", 2);
 n([
-  $()
-], a.prototype, "selectedItem");
+  C()
+], a.prototype, "selectedItem", 2);
 export {
   a as default
 };