@orangelogic/design-system 2.77.0 → 2.78.0-ci.5

package/library/components/select.js

@@ -1,6 +1,6 @@
-import O from "./line-clamp.js";
+import w from "./line-clamp.js";
 import { C } from "../chunks/typography.oDzoLbZS.js";
-import { n as o, C as S } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { n as a, C as S } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as k } from "../chunks/component.styles.DMSLciL5.js";
 import { f as z } from "../chunks/form-control.styles.CUGhvlfT.js";
 import { s as x, a as y } from "../chunks/animate.El-MpOws.js";
@@ -10,22 +10,22 @@ import { w as v } from "../chunks/event.mFzZi4sr.js";
 import { F as L } from "../chunks/form.DgwYWi0O.js";
 import { L as $ } from "../chunks/i18n.BUW7B9hr.js";
 import { s as T } from "../chunks/scroll.xtO5yojm.js";
-import { H as E } from "../chunks/slot.j5oheLJC.js";
-import { i as B } from "../chunks/user-agent.D9aPuOyL.js";
-import { w as h } from "../chunks/watch.BCJD77bD.js";
-import { i as F, x as p, E as A } from "../chunks/lit-element.jLBm65_O.js";
-import { r as f } from "../chunks/state.CSDxrqLd.js";
-import { e as u } from "../chunks/query.BBf1UFkC.js";
+import { H as V } from "../chunks/slot.j5oheLJC.js";
+import { i as E } from "../chunks/user-agent.D9aPuOyL.js";
+import { w as p } from "../chunks/watch.BCJD77bD.js";
+import { i as B, x as u, E as F } from "../chunks/lit-element.jLBm65_O.js";
+import { r as g } from "../chunks/state.CSDxrqLd.js";
+import { e as m } from "../chunks/query.BBf1UFkC.js";
 import { e as b } from "../chunks/class-map.BiVq-cVR.js";
-import { o as V } from "../chunks/unsafe-html.Dff7-rCx.js";
-import { n as m } from "../chunks/when.Dr1es41R.js";
-import { s as w, g as _ } from "../chunks/animation-registry.HmpwNuGH.js";
+import { o as A } from "../chunks/unsafe-html.Dff7-rCx.js";
+import { n as f } from "../chunks/when.Dr1es41R.js";
+import { s as O, g as _ } from "../chunks/animation-registry.HmpwNuGH.js";
 import P from "./icon.js";
 import { C as d } from "../chunks/option.Csqefux_.js";
-import M from "./popup.js";
-import U from "./spinner.js";
+import U from "./popup.js";
+import M from "./spinner.js";
 import N from "./tag.js";
-const R = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), W = F`
+const R = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), W = B`
   :host {
     display: block;
   }
@@ -599,23 +599,23 @@ const R = (t) => !(document.createElement(t.tagName).constructor === HTMLElement
   }
 `;
 var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (t, e, l, n) => {
-  for (var a = n > 1 ? void 0 : n ? q(e, l) : e, r = t.length - 1, c; r >= 0; r--)
-    (c = t[r]) && (a = (n ? c(e, l, a) : c(a)) || a);
-  return n && a && H(e, l, a), a;
+  for (var o = n > 1 ? void 0 : n ? q(e, l) : e, r = t.length - 1, c; r >= 0; r--)
+    (c = t[r]) && (o = (n ? c(e, l, o) : c(o)) || o);
+  return n && o && H(e, l, o), o;
 };
 let i = class extends S {
   constructor() {
     super(...arguments), this.formControlController = new L(this, {
       assumeInteractionOn: ["cx-input"]
-    }), this.hasSlotController = new E(
+    }), this.hasSlotController = new V(
       this,
       "help-text",
       "label"
-    ), this.localize = new $(this), this.typeToSelectString = "", this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.defaultValue = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (t) => {
-      const e = this.hasSlotController.test("label"), n = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size, a = (r) => {
+    ), this.localize = new $(this), this.typeToSelectString = "", this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.fallbackOptionValue = "", this.defaultValue = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (t) => {
+      const e = this.hasSlotController.test("label"), n = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size, o = (r) => {
         this.handleTagRemove(r, t);
       };
-      return p`
+      return u`
       <cx-tag
         part="tag"
         exportparts="
@@ -627,7 +627,7 @@ let i = class extends S {
         ?pill=${this.pill}
         size=${n}
         ?removable=${this.multiple}
-        @cx-remove=${a}
+        @cx-remove=${o}
       >
         <cx-line-clamp lines="1">
           ${this.getOptionLabel(t)}
@@ -681,11 +681,11 @@ let i = class extends S {
           return;
         }
         if (["ArrowUp", "ArrowDown", "Home", "End"].includes(t.key)) {
-          const a = this.getAllOptions().filter((g) => this.inputBehavior === "filter" ? !g.hidden : !0), r = this.currentOption ? a.indexOf(this.currentOption) : -1;
+          const o = this.getAllOptions().filter((h) => this.inputBehavior === "filter" ? !h.hidden : !0), r = this.currentOption ? o.indexOf(this.currentOption) : -1;
           let c = Math.max(0, r);
           if (t.preventDefault(), !this.open && (this.show(), this.currentOption))
             return;
-          t.key === "ArrowDown" ? (c = r + 1, c > a.length - 1 && (c = 0)) : t.key === "ArrowUp" ? (c = r - 1, c < 0 && (c = a.length - 1)) : t.key === "Home" ? c = 0 : t.key === "End" && (c = a.length - 1), this.setCurrentOption(a[c]);
+          t.key === "ArrowDown" ? (c = r + 1, c > o.length - 1 && (c = 0)) : t.key === "ArrowUp" ? (c = r - 1, c < 0 && (c = o.length - 1)) : t.key === "Home" ? c = 0 : t.key === "End" && (c = o.length - 1), this.setCurrentOption(o[c]);
         }
       }
     }, this.handleDocumentMouseDown = (t) => {
@@ -757,7 +757,7 @@ let i = class extends S {
     super.connectedCallback(), this.stayOpenOnSelect || (this.open = !1);
   }
   runFirstUpdated() {
-    B() && (this.contentEditable = "true");
+    E() && (this.contentEditable = "true");
   }
   addOpenListeners() {
     document.addEventListener(
@@ -823,12 +823,12 @@ let i = class extends S {
   handleComboboxMouseDown(t) {
     const e = t.composedPath();
     let l = !1, n = !1;
-    e.forEach((a) => {
-      if (a instanceof HTMLElement && a.classList.contains("select__expand-icon")) {
+    e.forEach((o) => {
+      if (o instanceof HTMLElement && o.classList.contains("select__expand-icon")) {
         n = !0;
         return;
       }
-      a instanceof HTMLElement && a.tagName.toLowerCase() === "cx-icon-button" && (l = !0);
+      o instanceof HTMLElement && o.tagName.toLowerCase() === "cx-icon-button" && (l = !0);
     }), !(this.disabled || l) && (n || this.inputBehavior !== "filter" || !this.open || !this.multiple && !this.useTag ? (this.allowDefaultMouseDown ? requestAnimationFrame(() => {
       this.displayInput.focus({ preventScroll: !0 });
     }) : (t.preventDefault(), this.displayInput.focus({ preventScroll: !0 })), this.open = !this.open) : (t.preventDefault(), this.displayInput.focus({ preventScroll: !0 })));
@@ -845,12 +845,12 @@ let i = class extends S {
     t.stopPropagation(), t.preventDefault();
   }
   handleOptionClick(t) {
-    const l = t.target.closest('[role="option"], cx-option'), n = this.value, a = t.composedPath().some(
+    const l = t.target.closest('[role="option"], cx-option'), n = this.value, o = t.composedPath().some(
       (c) => c?.classList?.contains("tree-item__expand-button")
     ), r = t.composedPath().some(
       (c) => c?.classList?.contains("tree-item__actions")
     );
-    l && !this.getOptionDisabled(l) && !a && !r && (this.multiple ? this.toggleOptionSelection(l) : this.setSelectedOptions(l), this.updateComplete.then(
+    l && !this.getOptionDisabled(l) && !o && !r && (this.multiple ? this.toggleOptionSelection(l) : this.setSelectedOptions(l), this.updateComplete.then(
       () => this.displayInput.focus({ preventScroll: !0 })
     ), (this.value !== n || this.forceOnChange) && this.updateComplete.then(() => {
       this.emit("cx-input"), this.emit("cx-change");
@@ -858,20 +858,23 @@ let i = class extends S {
   }
   handleDefaultSlotChange() {
     const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], l = [];
-    for (const n of t) {
-      const a = this.getOptionValue(n);
-      if (!a && !(n instanceof d))
+    for (const r of t) {
+      const c = this.getOptionValue(r);
+      if (!c && !(r instanceof d))
         return;
-      l.push(a);
-      const r = n.tagName.toLowerCase();
-      if (!R(n) && !customElements.get(r)) {
-        customElements.whenDefined(r).then(() => this.handleDefaultSlotChange());
+      l.push(c);
+      const h = r.tagName.toLowerCase();
+      if (!R(r) && !customElements.get(h)) {
+        customElements.whenDefined(h).then(() => this.handleDefaultSlotChange());
         return;
       }
     }
-    t.forEach((n) => l.push(this.getOptionValue(n))), this.setSelectedOptions(
-      t.filter((n) => e.includes(this.getOptionValue(n)))
+    t.forEach((r) => l.push(this.getOptionValue(r)));
+    const { options: n, preserveValue: o } = this.getOptionsForValue(
+      e,
+      t
     );
+    this.setSelectedOptions(n, o ? this.value : void 0);
   }
   handleTagRemove(t, e) {
     t.stopPropagation(), this.disabled || (this.toggleOptionSelection(e, !1), this.updateComplete.then(() => {
@@ -898,6 +901,27 @@ let i = class extends S {
   getVisibleOptions() {
     return this.getAllOptions().filter((t) => !t.hidden);
   }
+  /**
+   * Resolves selected options for the current value and applies fallback selection
+   * when unmatched values exist and `fallbackOptionValue` is configured.
+   */
+  getOptionsForValue(t, e = this.getAllOptions()) {
+    const l = [], n = this.fallbackOptionValue ? e.find(
+      (r) => this.getOptionValue(r) === this.fallbackOptionValue
+    ) : void 0;
+    let o = !1;
+    return t.forEach((r) => {
+      if (r === "")
+        return;
+      const c = e.find(
+        (h) => this.getOptionValue(h) === r
+      );
+      c ? l.push(c) : o = !0;
+    }), o && n && l.push(n), {
+      options: l,
+      preserveValue: o && !!n
+    };
+  }
   /**
    * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
    * option may be "current" at a time.
@@ -910,9 +934,9 @@ let i = class extends S {
   /**
    * Sets the selected option(s)
    */
-  setSelectedOptions(t) {
-    const e = this.getAllOptions(), l = Array.isArray(t) ? t : [t];
-    e.forEach((n) => this.setOptionSelected(n, !1)), l.length && l.forEach((n) => this.setOptionSelected(n, !0)), this.selectionChanged();
+  setSelectedOptions(t, e) {
+    const l = this.getAllOptions(), n = Array.isArray(t) ? t : [t];
+    l.forEach((o) => this.setOptionSelected(o, !1)), n.length && n.forEach((o) => this.setOptionSelected(o, !0)), this.selectionChanged(e);
   }
   /**
    * Toggles an option's selected state
@@ -924,24 +948,24 @@ let i = class extends S {
    * This method must be called whenever the selection changes. It will update the selected options cache, the current
    * value, and the display value
    */
-  selectionChanged() {
+  selectionChanged(t) {
     this.selectedOptions = this.getAllOptions().filter(
-      (t) => this.getOptionSelected(t)
-    ), this.multiple ? (this.value = this.selectedOptions.map((t) => this.getOptionValue(t)), this.displayLabel = "") : (this.value = this.getOptionValue(this.selectedOptions[0]) ?? "", this.displayLabel = this.getOptionLabel(this.selectedOptions[0]) ?? ""), this.updateComplete.then(() => {
+      (e) => this.getOptionSelected(e)
+    ), this.multiple ? (this.value = t ?? this.selectedOptions.map((e) => this.getOptionValue(e)), this.displayLabel = "") : (this.value = t ?? this.getOptionValue(this.selectedOptions[0]) ?? "", this.displayLabel = this.getOptionLabel(this.selectedOptions[0]) ?? ""), this.updateComplete.then(() => {
       this.formControlController.updateValidity();
     });
   }
   get tags() {
     const t = this.hasSlotController.test("label"), l = (this.label ? !0 : !!t) ? this.size === "large" ? "medium" : "small" : this.size;
-    return this.selectedOptions.map((n, a) => {
-      if (a < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
-        const r = this.getTag(n, a);
-        return p`${typeof r == "string" ? V(r) : r}`;
-      } else if (a === this.maxOptionsVisible)
-        return p`<cx-tag ?pill=${this.pill} size=${l}>
-          +${this.selectedOptions.length - a}
+    return this.selectedOptions.map((n, o) => {
+      if (o < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+        const r = this.getTag(n, o);
+        return u`${typeof r == "string" ? A(r) : r}`;
+      } else if (o === this.maxOptionsVisible)
+        return u`<cx-tag ?pill=${this.pill} size=${l}>
+          +${this.selectedOptions.length - o}
         </cx-tag>`;
-      return A;
+      return F;
     });
   }
   handleInvalid(t) {
@@ -951,10 +975,11 @@ let i = class extends S {
     this.disabled && (this.open = !1, this.handleOpenChange());
   }
   handleValueChange() {
-    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value];
-    this.setSelectedOptions(
-      t.filter((l) => e.includes(this.getOptionValue(l)))
+    const t = this.getAllOptions(), e = Array.isArray(this.value) ? this.value : [this.value], { options: l, preserveValue: n } = this.getOptionsForValue(
+      e,
+      t
     );
+    this.setSelectedOptions(l, n ? this.value : void 0);
   }
   async handleNoDropdownChange() {
     await this.updateComplete, this.noDropdown ? this.open = !1 : this.handleOpenChange();
@@ -1033,8 +1058,8 @@ let i = class extends S {
     this.displayInput.blur();
   }
   render() {
-    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, a = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0, g = (this.multiple || this.useTag) && this.selectedOptions.length > 0;
-    return p`
+    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, o = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0, h = (this.multiple || this.useTag) && this.selectedOptions.length > 0;
+    return u`
       <div
         part="form-control"
         class=${b({
@@ -1094,9 +1119,9 @@ let i = class extends S {
                 >
                   <slot name="label">${this.label}</slot>
                 </label>
-                ${m(
-      g,
-      () => p`
+                ${f(
+      h,
+      () => u`
                     <div
                       part="tags"
                       class="select__tags"
@@ -1149,9 +1174,9 @@ let i = class extends S {
                 @invalid=${this.handleInvalid}
               />
 
-              ${m(
+              ${f(
       this.loading,
-      () => p`
+      () => u`
                   <cx-spinner
                     part="spinner"
                     role="status"
@@ -1159,9 +1184,9 @@ let i = class extends S {
                   ></cx-spinner>
                 `
     )}
-              ${m(
-      a,
-      () => p`
+              ${f(
+      o,
+      () => u`
                   <button
                     part="clear-button"
                     class="select__clear"
@@ -1202,9 +1227,9 @@ let i = class extends S {
               @slotchange=${this.handleDefaultSlotChange}
             >
               <slot></slot>
-              ${m(
+              ${f(
       this.shouldShowNoOptionsMessage,
-      () => p`
+      () => u`
                   <cx-typography
                     variant="body3"
                     class="select__no-options"
@@ -1237,203 +1262,207 @@ i.styles = [
 ];
 i.dependencies = {
   "cx-icon": P,
-  "cx-line-clamp": O,
-  "cx-popup": M,
-  "cx-spinner": U,
+  "cx-line-clamp": w,
+  "cx-popup": U,
+  "cx-spinner": M,
   "cx-tag": N,
   "cx-typography": C
 };
 s([
-  u(".select")
+  m(".select")
 ], i.prototype, "popup", 2);
 s([
-  u(".select__combobox")
+  m(".select__combobox")
 ], i.prototype, "combobox", 2);
 s([
-  u(".select__display-input")
+  m(".select__display-input")
 ], i.prototype, "displayInput", 2);
 s([
-  u(".select__value-input")
+  m(".select__value-input")
 ], i.prototype, "valueInput", 2);
 s([
-  u(".select__listbox")
+  m(".select__listbox")
 ], i.prototype, "listbox", 2);
 s([
-  f()
+  g()
 ], i.prototype, "hasFocus", 2);
 s([
-  f()
+  g()
 ], i.prototype, "displayLabel", 2);
 s([
-  f()
+  g()
 ], i.prototype, "currentOption", 2);
 s([
-  f()
+  g()
 ], i.prototype, "selectedOptions", 2);
 s([
-  o()
+  a()
 ], i.prototype, "name", 2);
 s([
-  o({
+  a({
     converter: {
       fromAttribute: (t) => t.split(" "),
       toAttribute: (t) => Array.isArray(t) ? t.join(" ") : t
     }
   })
 ], i.prototype, "value", 2);
+s([
+  a({ attribute: "fallback-option-value", type: String })
+], i.prototype, "fallbackOptionValue", 2);
 s([
   I()
 ], i.prototype, "defaultValue", 2);
 s([
-  o({ reflect: !0 })
+  a({ reflect: !0 })
 ], i.prototype, "size", 2);
 s([
-  o()
+  a()
 ], i.prototype, "placeholder", 2);
 s([
-  o({ attribute: "allow-freetext", reflect: !0, type: Boolean })
+  a({ attribute: "allow-freetext", reflect: !0, type: Boolean })
 ], i.prototype, "allowFreetext", 2);
 s([
-  o({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "multiple", 2);
 s([
-  o({ attribute: "max-options-visible", type: Number })
+  a({ attribute: "max-options-visible", type: Number })
 ], i.prototype, "maxOptionsVisible", 2);
 s([
-  o({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "disabled", 2);
 s([
-  o({ type: Boolean })
+  a({ type: Boolean })
 ], i.prototype, "clearable", 2);
 s([
-  o({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "open", 2);
 s([
-  o({ type: Boolean })
+  a({ type: Boolean })
 ], i.prototype, "hoist", 2);
 s([
-  o({ attribute: "no-flip", reflect: !0, type: Boolean })
+  a({ attribute: "no-flip", reflect: !0, type: Boolean })
 ], i.prototype, "noFlip", 2);
 s([
-  o({ attribute: "sync-element" })
+  a({ attribute: "sync-element" })
 ], i.prototype, "syncElement", 2);
 s([
-  o({ attribute: "free-width", reflect: !0, type: Boolean })
+  a({ attribute: "free-width", reflect: !0, type: Boolean })
 ], i.prototype, "freeWidth", 2);
 s([
-  o({ attribute: "auto-size-padding", type: Number })
+  a({ attribute: "auto-size-padding", type: Number })
 ], i.prototype, "autosizePadding", 2);
 s([
-  o({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "filled", 2);
 s([
-  o({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "pill", 2);
 s([
-  o()
+  a()
 ], i.prototype, "label", 2);
 s([
-  o({ reflect: !0 })
+  a({ reflect: !0 })
 ], i.prototype, "placement", 2);
 s([
-  o({ attribute: "help-text" })
+  a({ attribute: "help-text" })
 ], i.prototype, "helpText", 2);
 s([
-  o({ reflect: !1 })
+  a({ reflect: !1 })
 ], i.prototype, "form", 2);
 s([
-  o({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "required", 2);
 s([
-  o({ attribute: "use-tag", reflect: !0, type: Boolean })
+  a({ attribute: "use-tag", reflect: !0, type: Boolean })
 ], i.prototype, "useTag", 2);
 s([
-  o({
+  a({
     attribute: "no-select-on-enter",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noSelectOnEnter", 2);
 s([
-  o({
+  a({
     attribute: "no-reset-current",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noResetCurrent", 2);
 s([
-  o({
+  a({
     attribute: "no-dropdown",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noDropdown", 2);
 s([
-  o({
+  a({
     attribute: "loading",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "loading", 2);
 s([
-  o({ attribute: "get-tag" })
+  a({ attribute: "get-tag" })
 ], i.prototype, "getTag", 2);
 s([
-  o({ attribute: "input-behavior" })
+  a({ attribute: "input-behavior" })
 ], i.prototype, "inputBehavior", 2);
 s([
-  o({ attribute: "get-option-value" })
+  a({ attribute: "get-option-value" })
 ], i.prototype, "getOptionValue", 2);
 s([
-  o({ attribute: "get-option-label" })
+  a({ attribute: "get-option-label" })
 ], i.prototype, "getOptionLabel", 2);
 s([
-  o({ attribute: "get-option-selected" })
+  a({ attribute: "get-option-selected" })
 ], i.prototype, "getOptionSelected", 2);
 s([
-  o({ attribute: "get-option-disabled" })
+  a({ attribute: "get-option-disabled" })
 ], i.prototype, "getOptionDisabled", 2);
 s([
-  o({ attribute: "stay-open-on-select", type: Boolean })
+  a({ attribute: "stay-open-on-select", type: Boolean })
 ], i.prototype, "stayOpenOnSelect", 2);
 s([
-  o({ attribute: "force-on-change", type: Boolean })
+  a({ attribute: "force-on-change", type: Boolean })
 ], i.prototype, "forceOnChange", 2);
 s([
-  o({ attribute: "allow-default-mouse-down", type: Boolean })
+  a({ attribute: "allow-default-mouse-down", type: Boolean })
 ], i.prototype, "allowDefaultMouseDown", 2);
 s([
-  o({ attribute: "no-option-text", type: String })
+  a({ attribute: "no-option-text", type: String })
 ], i.prototype, "noOptionText", 2);
 s([
-  h("getOptionValue", { waitUntilFirstUpdate: !0 }),
-  h("getOptionLabel", { waitUntilFirstUpdate: !0 }),
-  h("getOptionSelected", { waitUntilFirstUpdate: !0 }),
-  h("getOptionDisabled", { waitUntilFirstUpdate: !0 })
+  p("getOptionValue", { waitUntilFirstUpdate: !0 }),
+  p("getOptionLabel", { waitUntilFirstUpdate: !0 }),
+  p("getOptionSelected", { waitUntilFirstUpdate: !0 }),
+  p("getOptionDisabled", { waitUntilFirstUpdate: !0 }),
+  p("fallbackOptionValue", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleDefaultSlotChange", 1);
 s([
-  h("disabled", { waitUntilFirstUpdate: !0 })
+  p("disabled", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleDisabledChange", 1);
 s([
-  h("value", { waitUntilFirstUpdate: !0 })
+  p("value", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleValueChange", 1);
 s([
-  h("noDropdown", { waitUntilFirstUpdate: !0 })
+  p("noDropdown", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleNoDropdownChange", 1);
 s([
-  h("open", { waitUntilFirstUpdate: !0 })
+  p("open", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleOpenChange", 1);
 i = s([
   D("cx-select")
 ], i);
-w("select.show", {
+O("select.show", {
   keyframes: [
     { opacity: 0, scale: 0.9 },
     { opacity: 1, scale: 1 }
   ],
   options: { duration: 100, easing: "ease" }
 });
-w("select.hide", {
+O("select.hide", {
   keyframes: [
     { opacity: 1, scale: 1 },
     { opacity: 0, scale: 0.9 }

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.DMSLciL5.js";
-import { C as A } from "../chunks/tab-group.G24wrely.js";
+import { C as A } from "../chunks/tab-group.Dg6a82ei.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/scroll.xtO5yojm.js";
@@ -18,7 +18,7 @@ import "../chunks/guard.D4axKaMo.js";
 import "../chunks/map.D8heArFD.js";
 import "../chunks/style-map.llVFPd__.js";
 import "../chunks/when.Dr1es41R.js";
-import "../chunks/button.csCRiZzY.js";
+import "../chunks/button.DS64Tr8Z.js";
 import "./dropdown.js";
 import "../chunks/icon-button.C3eqeQl9.js";
 import "./menu.js";

package/library/components/table.js

@@ -1,4 +1,4 @@
-import "../chunks/button.csCRiZzY.js";
+import "../chunks/button.DS64Tr8Z.js";
 import "./checkbox.js";
 import "./divider.js";
 import "./format-number.js";
@@ -9,8 +9,8 @@ import "./spinner.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.DMSLciL5.js";
 import "../chunks/overlayscrollbars.XhGWx9Zk.js";
-import "../chunks/pagination.BXCr_5om.js";
-import { A as F, i as P, j as S, d as g, g as v, b as y, k as A, l as D, c as I, a0 as f, a1 as h, D as E, m as G, E as j, n as H, F as K, o as L, p as V, q as k, G as q, r as B, s as J, t as N, I as O, u as Q, K as U, v as W, M as X, w as Y, x as Z, y as _, z as $, B as oo, J as eo, L as ao, P as so, e as lo, N as to, h as uo, O as ro, Q as Mo, U as io, V as po, f as mo, R as no, X as Co, W as Ro, S as co, Y as bo, Z as wo, T as To, a as xo, _ as zo, $ as Fo, C as Po } from "../chunks/table.34yySlt-.js";
+import "../chunks/pagination.DZq0IZjI.js";
+import { A as F, i as P, j as S, d as g, g as v, b as y, k as A, l as D, c as I, a0 as f, a1 as h, D as E, m as G, E as j, n as H, F as K, o as L, p as V, q as k, G as q, r as B, s as J, t as N, I as O, u as Q, K as U, v as W, M as X, w as Y, x as Z, y as _, z as $, B as oo, J as eo, L as ao, P as so, e as lo, N as to, h as uo, O as ro, Q as Mo, U as io, V as po, f as mo, R as no, X as Co, W as Ro, S as co, Y as bo, Z as wo, T as To, a as xo, _ as zo, $ as Fo, C as Po } from "../chunks/table.COCT3Fsb.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BUW7B9hr.js";
 import "../chunks/watch.BCJD77bD.js";