@orangelogic/design-system 2.78.0 → 2.79.0

package/library/components/select.js

@@ -1,639 +1,54 @@
-import O 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 { c as k } from "../chunks/component.styles.DMSLciL5.js";
-import { f as z } from "../chunks/form-control.styles.CUGhvlfT.js";
+import w from "./line-clamp.js";
+import { C } from "../chunks/typography.DJC_UXgs.js";
+import { n as a, C as S } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as k } from "../chunks/component.styles.CRO4Odto.js";
+import { f as D } from "../chunks/form-control.styles.CaGWmeAS.js";
 import { s as x, a as y } from "../chunks/animate.El-MpOws.js";
-import { c as D } from "../chunks/custom-element.L4WJXn1j.js";
-import { d as I } from "../chunks/default-value.COZopaet.js";
+import { c as z } from "../chunks/custom-element.L4WJXn1j.js";
+import { d as L } from "../chunks/default-value.COZopaet.js";
 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 { F as $ } from "../chunks/form.DgwYWi0O.js";
+import { L as I } from "../chunks/i18n.BUW7B9hr.js";
+import { s as V } 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 { i as T } 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 { C as d } from "../chunks/option.DljDoFx4.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`
-  :host {
-    display: block;
-  }
-
-  :host([data-user-invalid])::part(combobox) {
-    border-color: var(--cx-input-invalid-border-color);
-  }
-
-  :host([data-user-invalid]:focus-within)::part(combobox) {
-    border-color: var(--cx-input-invalid-border-color);
-    box-shadow: var(--cx-input-invalid-shadow);
-  }
-
-  /** The popup */
-  .select {
-    flex: 1 1 auto;
-    display: inline-flex;
-    width: 100%;
-    position: relative;
-    vertical-align: middle;
-  }
-
-  .select::part(popup) {
-    z-index: var(--cx-z-index-dropdown);
-  }
-
-  .select[data-current-placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .select[data-current-placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  /* Combobox */
-  .select__combobox {
-    flex: 1;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: start;
-    font-family: var(--cx-input-font-family);
-    font-weight: var(--cx-input-font-weight);
-    letter-spacing: var(--cx-input-letter-spacing);
-    vertical-align: middle;
-    overflow: hidden;
-    cursor: pointer;
-    transition:
-      var(--cx-transition-fast) color,
-      var(--cx-transition-fast) border,
-      var(--cx-transition-fast) box-shadow,
-      var(--cx-transition-fast) background-color;
-    /*
-      match default width of HTMLInputElement, so that in multiselect mode,
-      when display input gets hidden, the select doesn't shrink
-    */
-    width: 20ch;
-    min-width: 0;
-  }
-
-  .select__display-input {
-    position: relative;
-    width: 100%;
-    font: inherit;
-    border: none;
-    background: none;
-    color: var(--cx-input-color);
-    cursor: inherit;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
-    -webkit-appearance: none;
-    text-overflow: ellipsis;
-    transition: padding-top 0.2s ease-in-out;
-  }
-
-  .select__tags + .select__display-input {
-    padding-top: var(--cx-spacing-2x-small);
-  }
-
-  .select__display-input--small {
-    line-height: var(--cx-line-height-small);
-  }
-  .select__display-input--medium {
-    line-height: var(--cx-line-height-medium);
-  }
-  .select__display-input--large {
-    line-height: var(--cx-line-height-large);
-  }
-
-  .select__display-input--hidden {
-    /**
-     * Use visibility instead of overflow hidden since browser force input to be overflow clip
-     * Use height 0 instead of display none for smoother transition
-     */
-    height: 0;
-    padding-top: 0 !important;
-    visibility: hidden;
-  }
-
-  .form-control--has-label .select__display-input {
-    padding-top: var(--cx-spacing-x-small);
-    padding-bottom: var(--cx-spacing-2x-small);
-  }
-
-  .select__display-input::placeholder {
-    color: var(--cx-input-placeholder-color);
-  }
-
-  .select:not(.select--disabled):hover .select__display-input {
-    color: var(--cx-input-color-hover);
-  }
-
-  .select:not(.select--disabled):hover .select__combobox {
-    border-color: var(--cx-input-border-color-hover);
-  }
-
-  .select__display-input:focus {
-    outline: none;
-  }
-
-  .select__value-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    z-index: -1;
-  }
-
-  .select__tags {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    max-width: 100%;
-  }
-
-  .form-control--has-label .select__tags {
-    margin-top: var(--cx-spacing-x-small);
-  }
-
-  /** In multiple mode, select__tags is displayed instead of display__input
-   * Make sure select__tags have the same height as a display__input of the same size
-   */
-  .select--small:not(.select--placeholder-visible) .select__tags {
-    min-height: var(--cx-line-height-medium);
-  }
-
-  .select--medium:not(.select--placeholder-visible) .select__tags {
-    min-height: var(--cx-line-height-medium);
-  }
-
-  .select--large:not(.select--placeholder-visible) .select__tags {
-    min-height: var(--cx-line-height-medium);
-  }
-
-  .select__tags::slotted(cx-tag) {
-    cursor: pointer !important;
-  }
-
-  .select--disabled .select__tags,
-  .select--disabled .select__tags::slotted(cx-tag) {
-    cursor: default !important;
-  }
-
-  .select__tag-wrapper {
-    line-height: 1;
-  }
-
-  /* Standard selects */
-  .select--standard .select__combobox {
-    background-color: var(--cx-input-background-color);
-    border: solid var(--cx-input-border-width) var(--cx-input-border-color);
-  }
-
-  .select--standard.select--disabled .select__combobox {
-    background-color: var(--cx-input-background-color-disabled);
-    border-color: var(--cx-input-border-color-disabled);
-    color: var(--cx-input-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-    outline: none;
-  }
-
-  .select--standard:not(.select--disabled).select--open .select__combobox,
-  .select--standard:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--cx-input-background-color-focus);
-    border-color: var(--cx-input-border-color-focus);
-  }
-
-  /* Filled selects */
-  .select--filled .select__combobox {
-    border: none;
-    background-color: var(--cx-input-filled-background-color);
-    color: var(--cx-input-color);
-  }
-
-  .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--cx-input-filled-background-color-hover);
-  }
-
-  .select--filled.select--disabled .select__combobox {
-    background-color: var(--cx-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .select--filled:not(.select--disabled).select--open .select__combobox,
-  .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--cx-input-filled-background-color-focus);
-    outline: var(--cx-focus-ring);
-  }
-
-  /* Sizes */
-  .select--small .select__combobox {
-    border-radius: var(--cx-input-border-radius-small);
-    font-size: var(--cx-input-font-size-small);
-    min-height: var(--cx-input-height-small);
-    padding-block: 0;
-    padding-inline: var(--cx-input-spacing-small);
-  }
-
-  .form-control:not(.form-control--has-label)
-    .select--small.select--multiple
-    .select__combobox {
-    padding-block: 2px;
-  }
-
-  .form-control:not(.form-control--has-label)
-    .select--multiple
-    .select__display-input {
-    margin-top: 0;
-  }
-
-  .form-control:not(.form-control--has-label) .input-container {
-    justify-content: center;
-  }
-
-  .form-control:not(.form-control--has-label)
-    .input-container
-    .select__display-input {
-    margin-top: 0;
-  }
-
-  .select--small .select__clear {
-    margin-inline-start: var(--cx-input-spacing-small);
-  }
-
-  .select--small .select__prefix::slotted(*) {
-    margin-inline-end: var(--cx-input-spacing-small);
-  }
-
-  .select--small .select__tags {
-    gap: 2px;
-  }
-
-  .select--medium .select__combobox {
-    border-radius: var(--cx-input-border-radius-medium);
-    font-size: var(--cx-input-font-size-small);
-    min-height: var(--cx-input-height-medium);
-    padding-block: 0;
-    padding-inline: var(--cx-input-spacing-medium);
-  }
-
-  .form-control:not(.form-control--has-label)
-    .select--medium.select--multiple
-    .select__combobox {
-    padding-block: 3px;
-  }
-
-  .select--medium .select__clear {
-    margin-inline-start: var(--cx-input-spacing-medium);
-  }
-
-  .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: var(--cx-input-spacing-medium);
-  }
-
-  .select--medium .select__tags {
-    gap: 3px;
-  }
-
-  .select--large .select__combobox {
-    border-radius: var(--cx-input-border-radius-large);
-    font-size: var(--cx-input-font-size-small);
-    min-height: var(--cx-input-height-large);
-    padding-block: 0;
-    padding-inline: var(--cx-input-spacing-large);
-  }
-
-  .form-control:not(.form-control--has-label)
-    .select--large.select--multiple
-    .select__combobox {
-    padding-block: 4px;
-  }
-
-  .select--large .select__clear {
-    margin-inline-start: var(--cx-input-spacing-large);
-  }
-
-  .select--large .select__prefix::slotted(*) {
-    margin-inline-end: var(--cx-input-spacing-large);
-  }
-
-  .select--large .select__tags {
-    gap: 4px;
-  }
-
-  /* Pills */
-  .select--pill.select--small .select__combobox {
-    border-radius: var(--cx-input-height-small);
-  }
-
-  .select--pill.select--medium .select__combobox {
-    border-radius: var(--cx-input-height-medium);
-  }
-
-  .select--pill.select--large .select__combobox {
-    border-radius: var(--cx-input-height-large);
-  }
-
-  /* Prefix */
-  .select__prefix {
-    flex: 0;
-    display: inline-flex;
-    align-items: center;
-    color: var(--cx-input-placeholder-color);
-  }
-
-  /* Suffix */
-  .select__suffix {
-    flex: 0;
-    display: inline-flex;
-    align-items: center;
-    color: var(--cx-input-placeholder-color);
-  }
-
-  /* Clear button */
-  .select__clear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: inherit;
-    color: var(--cx-input-icon-color);
-    border: none;
-    background: none;
-    padding: 0;
-    transition: var(--cx-transition-fast) color;
-    cursor: pointer;
-    z-index: 1;
-  }
-
-  .select__clear:hover {
-    color: var(--cx-input-icon-color-hover);
-  }
-
-  .select__clear:focus {
-    outline: none;
-  }
-
-  /* Expand icon */
-  .select__expand-icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    transition: var(--cx-transition-medium) rotate ease;
-    rotate: 0;
-    margin-inline-start: var(--cx-spacing-small);
-    font-size: var(--cx-font-size-large);
-  }
-
-  .select--open .select__expand-icon {
-    rotate: -180deg;
-  }
-
-  /* Listbox */
-  .select__listbox {
-    display: block;
-    position: relative;
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-medium);
-    font-weight: var(--cx-font-weight-regular);
-    box-shadow: var(--cx-shadow-large);
-    background: var(--cx-panel-background-color);
-    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
-    border-radius: var(--cx-border-radius-large);
-    padding-block: var(--cx-spacing-x-small);
-    padding-inline: 0;
-    overflow: auto;
-    overscroll-behavior: none;
-
-    /* Make sure it adheres to the popup's auto size */
-    max-width: var(--auto-size-available-width);
-    max-height: var(--auto-size-available-height);
-  }
-
-  .select__listbox ::slotted(cx-divider) {
-    --spacing: var(--cx-spacing-x-small);
-  }
-
-  .select__listbox ::slotted(small) {
-    display: block;
-    font-size: var(--cx-font-size-small);
-    color: var(--cx-color-neutral-500);
-    padding-block: var(--cx-spacing-2x-small);
-    padding-inline: var(--cx-spacing-small);
-  }
-
-  .select__no-options {
-    display: block;
-    font-size: var(--cx-font-size-small);
-    color: var(--cx-color-neutral-500);
-    padding-block: var(--cx-spacing-2x-small);
-    padding-inline: var(--cx-spacing-small);
-    text-align: left;
-    cursor: default;
-    user-select: none;
-  }
-
-  /*
-   * Adapt label to be inside select
-   */
-
-  .input-container {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    flex: 1;
-    width: 0;
-    align-self: stretch;
-  }
-
-  .input-container__display-value {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    column-gap: var(--cx-spacing-small);
-    row-gap: var(--cx-spacing-3x-small);
-    height: 100%;
-    width: 100%;
-  }
-
-  /* Center label vertically + same style as input value */
-  .form-control__label {
-    position: relative;
-    -webkit-transition: transform 0.2s ease-in-out;
-    -moz-transition: transform 0.2s ease-in-out;
-    transition: transform 0.2s ease-in-out;
-    pointer-events: none;
-    width: fit-content;
-    line-height: 1; /* use line-height: 1 for easier transform calculation */
-  }
-
-  /* when empty with no placeholder (initial state), transform label to vertical center
-    = (input height - label height) / 2
-  */
-  .select--small .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-small) +
-              1.25rem - var(--cx-input-font-size-small)
-          ) /
-          2
-      )
-    );
-    margin: 0;
-  }
-
-  .select--medium .form-control__label {
-    transform: translateY(
-      calc(
-        (
-          var(--cx-input-height-medium) / 2 +
-            1rem - var(--cx-input-font-size-medium)
-        )
-      )
-    );
-    margin: 0;
-  }
-
-  .select--large .form-control__label {
-    transform: translateY(
-      calc(
-        (
-            var(--cx-input-height-large) +
-              1rem - var(--cx-input-font-size-large)
-          ) /
-          2
-      )
-    );
-    margin: 0;
-  }
-
-  /* Increase input height if there's a label */
-  .form-control--has-label .select--small {
-    min-height: calc(var(--cx-input-height-small) + 1rem);
-  }
-  .form-control--has-label .select--medium {
-    min-height: calc(var(--cx-input-height-medium) + 1rem);
-  }
-  .form-control--has-label .select--large {
-    min-height: calc(var(--cx-input-height-large) + 1rem);
-  }
-
-  /* When focused or not empty, transform label to top
-    Instead of 0, use var(--cx-spacing-2x-small) to have a distance from top
-  */
-  .form-control--has-label .select--focused .form-control__label,
-  .form-control--has-label .select--placeholder-visible .form-control__label,
-  .form-control--has-label .select:not(.select--empty) .form-control__label {
-    transform: translateY(
-      calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small))
-    ); /* distance from top */
-  }
-
-  /* Display options in vertical direction */
-  .select__listbox slot {
-    display: flex;
-    flex-direction: column;
-  }
-
-  /*
-   * Input groups support a variety of input types (e.g. inputs with tooltips, inputs as dropdown triggers, etc.).
-   * This means inputs aren't always direct descendants of the input group, thus we can't target them with the
-   * ::slotted selector. To work around this, the input group component does some magic to add these special classes to
-   * inputs and we style them here instead.
-   */
-
-  :host(
-      [data-cx-input-group__input--first]:not(
-        [data-cx-input-group__input--last]
-      )
-    )
-    .select__combobox {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-cx-input-group__input--inner]) .select__combobox {
-    border-radius: 0;
-  }
-
-  :host(
-      [data-cx-input-group__input--last]:not(
-        [data-cx-input-group__input--first]
-      )
-    )
-    .select__combobox {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* All except the first */
-  :host([data-cx-input-group__input]:not([data-cx-input-group__input--first])) {
-    margin-inline-start: calc(-1 * var(--cx-input-border-width));
-  }
-
-  /* Bump hovered, focused, and checked inputs up so their focus ring isn't clipped */
-  :host([data-cx-input-group__input--hover]) {
-    z-index: 1;
-  }
-
-  /* Focus and checked are always on top */
-  :host([data-cx-input-group__input--focus]),
-  :host([data-cx-input-group__input][checked]) {
-    z-index: 2;
-  }
-`;
-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;
+const R = (t) => !(document.createElement(t.tagName).constructor === HTMLElement || customElements.get(t.tagName.toLowerCase())), W = B`:host{display:block}:host([data-user-invalid])::part(combobox){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid]:focus-within)::part(combobox){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.select{vertical-align:middle;flex:auto;width:100%;display:inline-flex;position:relative}.select::part(popup){z-index:var(--cx-z-index-dropdown)}.select[data-current-placement^=top]::part(popup){transform-origin:bottom}.select[data-current-placement^=bottom]::part(popup){transform-origin:top}.select__combobox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);letter-spacing:var(--cx-input-letter-spacing);vertical-align:middle;cursor:pointer;transition:var(--cx-transition-fast) color, var(--cx-transition-fast) border, var(--cx-transition-fast) box-shadow, var(--cx-transition-fast) background-color;flex:1;justify-content:start;align-items:center;width:20ch;min-width:0;display:flex;position:relative;overflow:hidden}.select__display-input{width:100%;font:inherit;color:var(--cx-input-color);cursor:inherit;-webkit-appearance:none;text-overflow:ellipsis;background:0 0;border:none;margin:0;padding:0;transition:padding-top .2s ease-in-out;position:relative;overflow:hidden}.select__tags+.select__display-input{padding-top:var(--cx-spacing-2x-small)}.select__display-input--small{line-height:var(--cx-line-height-small)}.select__display-input--medium{line-height:var(--cx-line-height-medium)}.select__display-input--large{line-height:var(--cx-line-height-large)}.select__display-input--hidden{visibility:hidden;height:0;padding-top:0!important}.form-control--has-label .select__display-input{padding-top:var(--cx-spacing-x-small);padding-bottom:var(--cx-spacing-2x-small)}.select__display-input::placeholder{color:var(--cx-input-placeholder-color)}.select:not(.select--disabled):hover .select__display-input{color:var(--cx-input-color-hover)}.select:not(.select--disabled):hover .select__combobox{border-color:var(--cx-input-border-color-hover)}.select__display-input:focus{outline:none}.select__value-input{opacity:0;z-index:-1;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.select__tags{flex-wrap:wrap;align-items:center;max-width:100%;display:flex}.form-control--has-label .select__tags{margin-top:var(--cx-spacing-x-small)}.select--small:not(.select--placeholder-visible) .select__tags,.select--medium:not(.select--placeholder-visible) .select__tags,.select--large:not(.select--placeholder-visible) .select__tags{min-height:var(--cx-line-height-medium)}.select__tags::slotted(cx-tag){cursor:pointer!important}.select--disabled .select__tags,.select--disabled .select__tags::slotted(cx-tag){cursor:default!important}.select__tag-wrapper{line-height:1}.select--standard .select__combobox{background-color:var(--cx-input-background-color);border:solid var(--cx-input-border-width) var(--cx-input-border-color)}.select--standard.select--disabled .select__combobox{background-color:var(--cx-input-background-color-disabled);border-color:var(--cx-input-border-color-disabled);color:var(--cx-input-color-disabled);opacity:.5;cursor:default;outline:none}.select--standard:not(.select--disabled).select--open .select__combobox,.select--standard:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-background-color-focus);border-color:var(--cx-input-border-color-focus)}.select--filled .select__combobox{background-color:var(--cx-input-filled-background-color);color:var(--cx-input-color);border:none}.select--filled:hover:not(.select--disabled) .select__combobox{background-color:var(--cx-input-filled-background-color-hover)}.select--filled.select--disabled .select__combobox{background-color:var(--cx-input-filled-background-color-disabled);opacity:.5;cursor:default}.select--filled:not(.select--disabled).select--open .select__combobox,.select--filled:not(.select--disabled).select--focused .select__combobox{background-color:var(--cx-input-filled-background-color-focus);outline:var(--cx-focus-ring)}.select--small .select__combobox{border-radius:var(--cx-input-border-radius-small);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-small);padding-block:0;padding-inline:var(--cx-input-spacing-small)}.form-control:not(.form-control--has-label) .select--small.select--multiple .select__combobox{padding-block:2px}.form-control:not(.form-control--has-label) .select--multiple .select__display-input{margin-top:0}.form-control:not(.form-control--has-label) .input-container{justify-content:center}.form-control:not(.form-control--has-label) .input-container .select__display-input{margin-top:0}.select--small .select__clear{margin-inline-start:var(--cx-input-spacing-small)}.select--small .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-small)}.select--small .select__tags{gap:2px}.select--medium .select__combobox{border-radius:var(--cx-input-border-radius-medium);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-medium);padding-block:0;padding-inline:var(--cx-input-spacing-medium)}.form-control:not(.form-control--has-label) .select--medium.select--multiple .select__combobox{padding-block:3px}.select--medium .select__clear{margin-inline-start:var(--cx-input-spacing-medium)}.select--medium .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-medium)}.select--medium .select__tags{gap:3px}.select--large .select__combobox{border-radius:var(--cx-input-border-radius-large);font-size:var(--cx-input-font-size-small);min-height:var(--cx-input-height-large);padding-block:0;padding-inline:var(--cx-input-spacing-large)}.form-control:not(.form-control--has-label) .select--large.select--multiple .select__combobox{padding-block:4px}.select--large .select__clear{margin-inline-start:var(--cx-input-spacing-large)}.select--large .select__prefix::slotted(*){margin-inline-end:var(--cx-input-spacing-large)}.select--large .select__tags{gap:4px}.select--pill.select--small .select__combobox{border-radius:var(--cx-input-height-small)}.select--pill.select--medium .select__combobox{border-radius:var(--cx-input-height-medium)}.select--pill.select--large .select__combobox{border-radius:var(--cx-input-height-large)}.select__prefix,.select__suffix{color:var(--cx-input-placeholder-color);flex:0;align-items:center;display:inline-flex}.select__clear{font-size:inherit;color:var(--cx-input-icon-color);transition:var(--cx-transition-fast) color;cursor:pointer;z-index:1;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.select__clear:hover{color:var(--cx-input-icon-color-hover)}.select__clear:focus{outline:none}.select__expand-icon{transition:var(--cx-transition-medium) rotate ease;rotate:0;font-size:var(--cx-font-size-large);flex:none;align-items:center;margin-inline-start:var(--cx-spacing-small);display:flex}.select--open .select__expand-icon{rotate:-180deg}.select__listbox{font-family:var(--cx-font-sans);font-size:var(--cx-font-size-medium);font-weight:var(--cx-font-weight-regular);box-shadow:var(--cx-shadow-large);background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);padding-block:var(--cx-spacing-x-small);overscroll-behavior:none;max-width:var(--auto-size-available-width);max-height:var(--auto-size-available-height);padding-inline:0;display:block;position:relative;overflow:auto}.select__listbox ::slotted(cx-divider){--spacing:var(--cx-spacing-x-small)}.select__listbox ::slotted(small){font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);display:block}.select__no-options{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:left;cursor:default;user-select:none;display:block}.input-container{flex-direction:column;flex:1;align-self:stretch;width:0;display:inline-flex;position:relative}.input-container__display-value{column-gap:var(--cx-spacing-small);row-gap:var(--cx-spacing-3x-small);flex-flow:wrap;width:100%;height:100%;display:flex}.form-control__label{pointer-events:none;width:fit-content;line-height:1;-webkit-transition:transform .2s ease-in-out;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative}.select--small .form-control__label{transform:translateY(calc(( var(--cx-input-height-small) + 1.25rem - var(--cx-input-font-size-small) ) / 2));margin:0}.select--medium .form-control__label{transform:translateY(calc(( var(--cx-input-height-medium) / 2 + 1rem - var(--cx-input-font-size-medium) )));margin:0}.select--large .form-control__label{transform:translateY(calc(( var(--cx-input-height-large) + 1rem - var(--cx-input-font-size-large) ) / 2));margin:0}.form-control--has-label .select--small{min-height:calc(var(--cx-input-height-small) + 1rem)}.form-control--has-label .select--medium{min-height:calc(var(--cx-input-height-medium) + 1rem)}.form-control--has-label .select--large{min-height:calc(var(--cx-input-height-large) + 1rem)}.form-control--has-label .select--focused .form-control__label,.form-control--has-label .select--placeholder-visible .form-control__label,.form-control--has-label .select:not(.select--empty) .form-control__label{transform:translateY(calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small)))}.select__listbox slot{flex-direction:column;display:flex}:host([data-cx-input-group__input--first]:not([data-cx-input-group__input--last])) .select__combobox{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-input-group__input--inner]) .select__combobox{border-radius:0}:host([data-cx-input-group__input--last]:not([data-cx-input-group__input--first])) .select__combobox{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-input-group__input]:not([data-cx-input-group__input--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-input-group__input--hover]){z-index:1}:host([data-cx-input-group__input--focus]),:host([data-cx-input-group__input][checked]){z-index:2}`;
+var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (t, e, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? q(e, l) : e, r = t.length - 1, c; r >= 0; r--)
+    (c = t[r]) && (s = (n ? c(e, l, s) : c(s)) || s);
+  return n && s && H(e, l, s), s;
 };
 let i = class extends S {
   constructor() {
-    super(...arguments), this.formControlController = new L(this, {
+    super(...arguments), this.formControlController = new $(this, {
       assumeInteractionOn: ["cx-input"]
     }), this.hasSlotController = new E(
       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 I(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, s = (r) => {
         this.handleTagRemove(r, t);
       };
-      return p`
-      <cx-tag
-        part="tag"
-        exportparts="
+      return u`<cx-tag part="tag" exportparts="
               base:tag__base,
               content:tag__content,
               remove-button:tag__remove-button,
               remove-button__base:tag__remove-button__base
-            "
-        ?pill=${this.pill}
-        size=${n}
-        ?removable=${this.multiple}
-        @cx-remove=${a}
-      >
-        <cx-line-clamp lines="1">
-          ${this.getOptionLabel(t)}
-        </cx-line-clamp>
-      </cx-tag>
-    `;
+            " ?pill=${this.pill} size=${n} ?removable=${this.multiple} @cx-remove=${s}><cx-line-clamp lines="1">${this.getOptionLabel(t)}</cx-line-clamp></cx-tag>`;
     }, this.inputBehavior = "filter", this.getOptionValue = (t) => !t || !(t instanceof d) ? "" : t.value, this.getOptionLabel = (t) => !t || !(t instanceof d) ? "" : t.getTextLabel(), this.getOptionSelected = (t) => {
       if (!(!t || !(t instanceof d)))
         return t.selected;
@@ -681,11 +96,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 s = this.getAllOptions().filter((h) => this.inputBehavior === "filter" ? !h.hidden : !0), r = this.currentOption ? s.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 > s.length - 1 && (c = 0)) : t.key === "ArrowUp" ? (c = r - 1, c < 0 && (c = s.length - 1)) : t.key === "Home" ? c = 0 : t.key === "End" && (c = s.length - 1), this.setCurrentOption(s[c]);
         }
       }
     }, this.handleDocumentMouseDown = (t) => {
@@ -757,7 +172,7 @@ let i = class extends S {
     super.connectedCallback(), this.stayOpenOnSelect || (this.open = !1);
   }
   runFirstUpdated() {
-    B() && (this.contentEditable = "true");
+    T() && (this.contentEditable = "true");
   }
   addOpenListeners() {
     document.addEventListener(
@@ -823,12 +238,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((s) => {
+      if (s instanceof HTMLElement && s.classList.contains("select__expand-icon")) {
         n = !0;
         return;
       }
-      a instanceof HTMLElement && a.tagName.toLowerCase() === "cx-icon-button" && (l = !0);
+      s instanceof HTMLElement && s.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 +260,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, s = 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) && !s && !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 +273,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: s } = this.getOptionsForValue(
+      e,
+      t
     );
+    this.setSelectedOptions(n, s ? this.value : void 0);
   }
   handleTagRemove(t, e) {
     t.stopPropagation(), this.disabled || (this.toggleOptionSelection(e, !1), this.updateComplete.then(() => {
@@ -898,6 +316,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 s = !1;
+    return t.forEach((r) => {
+      if (r === "")
+        return;
+      const c = e.find(
+        (h) => this.getOptionValue(h) === r
+      );
+      c ? l.push(c) : s = !0;
+    }), s && n && l.push(n), {
+      options: l,
+      preserveValue: s && !!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 +349,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((s) => this.setOptionSelected(s, !1)), n.length && n.forEach((s) => this.setOptionSelected(s, !0)), this.selectionChanged(e);
   }
   /**
    * Toggles an option's selected state
@@ -924,24 +363,23 @@ 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}
-        </cx-tag>`;
-      return A;
+    return this.selectedOptions.map((n, s) => {
+      if (s < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+        const r = this.getTag(n, s);
+        return u`${typeof r == "string" ? A(r) : r}`;
+      } else if (s === this.maxOptionsVisible)
+        return u`<cx-tag ?pill=${this.pill} size=${l}>
+          +${this.selectedOptions.length - s}</cx-tag>`;
+      return F;
     });
   }
   handleInvalid(t) {
@@ -951,10 +389,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();
@@ -969,7 +408,7 @@ let i = class extends S {
       const { keyframes: t, options: e } = _(this, "select.show", {
         dir: this.localize.dir()
       });
-      await y(this.popup.popup, t, e), this.currentOption && T(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
+      await y(this.popup.popup, t, e), this.currentOption && V(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
     } else {
       this.emit("cx-hide"), this.removeOpenListeners(), await x(this);
       const { keyframes: t, options: e } = _(this, "select.hide", {
@@ -1033,24 +472,15 @@ 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`
-      <div
-        part="form-control"
-        class=${b({
+    const t = this.hasSlotController.test("label"), e = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!t, n = this.helpText ? !0 : !!e, s = 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({
       "form-control": !0,
       "form-control--has-help-text": n,
       "form-control--has-label": l,
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--small": this.size === "small"
-    })}
-      >
-        <div part="form-control-input" class="form-control-input">
-          <cx-popup
-            .active=${this.open && this.stayOpenOnSelect}
-            .syncElement=${this.syncElement}
-            class=${b({
+    })}><div part="form-control-input" class="form-control-input"><cx-popup .active=${this.open && this.stayOpenOnSelect} .syncElement=${this.syncElement} class=${b({
       select: !0,
       "select--bottom": this.placement === "bottom",
       "select--disabled": this.disabled,
@@ -1066,374 +496,236 @@ let i = class extends S {
       "select--small": this.size === "small",
       "select--standard": !0,
       "select--top": this.placement === "top"
-    })}
-            placement=${this.placement}
-            strategy=${this.hoist ? "overlay" : "absolute"}
-            ?flip=${!this.noFlip}
-            shift
-            sync=${this.freeWidth ? void 0 : "width"}
-            auto-size="both"
-            auto-size-padding=${this.autosizePadding}
-            flip-padding="10"
-          >
-            <div
-              part="combobox"
-              class="select__combobox"
-              slot="anchor"
-              @keydown=${this.handleComboboxKeyDown}
-              @mousedown=${this.handleComboboxMouseDown}
-            >
-              <slot part="prefix" name="prefix" class="select__prefix"></slot>
-
-              <span class="input-container" @click=${this.handleFocus}>
-                <label
-                  id="label"
-                  part="form-control-label"
-                  class="form-control__label"
-                  aria-hidden=${l ? "false" : "true"}
-                >
-                  <slot name="label">${this.label}</slot>
-                </label>
-                ${m(
-      g,
-      () => p`
-                    <div
-                      part="tags"
-                      class="select__tags"
-                      @cx-remove=${this.handleTagRemove}
-                    >
-                      ${this.tags}
-                    </div>
-                  `
-    )}
-                <input
-                  part="display-input"
-                  class=${b({
+    })} placement=${this.placement} strategy=${this.hoist ? "overlay" : "absolute"} ?flip=${!this.noFlip} shift sync=${this.freeWidth ? void 0 : "width"} auto-size="both" auto-size-padding=${this.autosizePadding} flip-padding="10"><div part="combobox" class="select__combobox" slot="anchor" @keydown=${this.handleComboboxKeyDown} @mousedown=${this.handleComboboxMouseDown}><slot part="prefix" name="prefix" class="select__prefix"></slot><span class="input-container" @click=${this.handleFocus}><label id="label" part="form-control-label" class="form-control__label" aria-hidden=${l ? "false" : "true"}><slot name="label">${this.label}</slot></label>${f(
+      h,
+      () => u`<div part="tags" class="select__tags" @cx-remove=${this.handleTagRemove}>${this.tags}</div>`
+    )}<input part="display-input" class=${b({
       "select__display-input": !0,
       "select__display-input--hidden": (this.multiple || this.useTag) && !this.hasFocus && !c && !(this.open && this.inputBehavior === "filter"),
       "select__display-input--large": this.size === "large",
       "select__display-input--medium": this.size === "medium",
       "select__display-input--small": this.size === "small"
-    })}
-                  type="text"
-                  placeholder=${this.placeholder}
-                  .disabled=${this.disabled}
-                  ?readonly=${this.inputBehavior === "none" && !this.allowFreetext}
-                  .value=${this.displayLabel}
-                  autocomplete="off"
-                  spellcheck="false"
-                  autocapitalize="off"
-                  aria-controls="listbox"
-                  aria-expanded=${this.open ? "true" : "false"}
-                  aria-haspopup="listbox"
-                  aria-label=${l ? void 0 : this.dataset.label}
-                  aria-labelledby="label"
-                  aria-disabled=${this.disabled ? "true" : "false"}
-                  aria-describedby="help-text"
-                  role="combobox"
-                  tabindex="0"
-                  @input=${this.handleInput}
-                  @blur=${this.handleBlur}
-                />
-              </span>
-
-              <input
-                class="select__value-input"
-                type="text"
-                ?disabled=${this.disabled}
-                ?required=${this.required}
-                .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value}
-                tabindex="-1"
-                aria-hidden="true"
-                @focus=${this.focus}
-                @invalid=${this.handleInvalid}
-              />
-
-              ${m(
+    })} type="text" placeholder=${this.placeholder} .disabled=${this.disabled} ?readonly=${this.inputBehavior === "none" && !this.allowFreetext} .value=${this.displayLabel} autocomplete="off" spellcheck="false" autocapitalize="off" aria-controls="listbox" aria-expanded=${this.open ? "true" : "false"} aria-haspopup="listbox" aria-label=${l ? void 0 : this.dataset.label} aria-labelledby="label" aria-disabled=${this.disabled ? "true" : "false"} aria-describedby="help-text" role="combobox" tabindex="0" @input=${this.handleInput} @blur=${this.handleBlur}></span><input class="select__value-input" type="text" ?disabled=${this.disabled} ?required=${this.required} .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value} tabindex="-1" aria-hidden="true" @focus=${this.focus} @invalid=${this.handleInvalid}>${f(
       this.loading,
-      () => p`
-                  <cx-spinner
-                    part="spinner"
-                    role="status"
-                    aria-live="polite"
-                  ></cx-spinner>
-                `
-    )}
-              ${m(
-      a,
-      () => p`
-                  <button
-                    part="clear-button"
-                    class="select__clear"
-                    type="button"
-                    aria-label=${this.localize.term("clearEntry")}
-                    @mousedown=${this.handleClearMouseDown}
-                    @click=${this.handleClearClick}
-                    tabindex="-1"
-                  >
-                    <slot name="clear-icon">
-                      <cx-icon name="cancel"></cx-icon>
-                    </slot>
-                  </button>
-                `
+      () => u`<cx-spinner part="spinner" role="status" aria-live="polite"></cx-spinner>`
     )}
-
-              <slot name="suffix" part="suffix" class="select__suffix"></slot>
-
-              <slot
-                name="expand-icon"
-                part="expand-icon"
-                class="select__expand-icon"
-              >
-                <cx-icon name="arrow_drop_down"></cx-icon>
-              </slot>
-            </div>
-
-            <div
-              id="listbox"
-              role="listbox"
-              aria-expanded=${this.open ? "true" : "false"}
-              aria-multiselectable=${this.multiple ? "true" : "false"}
-              aria-labelledby="label"
-              part="listbox"
-              class="select__listbox"
-              tabindex="-1"
-              @mouseup=${this.handleOptionClick}
-              @slotchange=${this.handleDefaultSlotChange}
-            >
-              <slot></slot>
-              ${m(
+              ${f(
+      s,
+      () => u`<button part="clear-button" class="select__clear" type="button" aria-label=${this.localize.term("clearEntry")} @mousedown=${this.handleClearMouseDown} @click=${this.handleClearClick} tabindex="-1"><slot name="clear-icon"><cx-icon name="cancel"></cx-icon></slot></button>`
+    )}<slot name="suffix" part="suffix" class="select__suffix"></slot><slot name="expand-icon" part="expand-icon" class="select__expand-icon"><cx-icon name="arrow_drop_down"></cx-icon></slot></div><div id="listbox" role="listbox" aria-expanded=${this.open ? "true" : "false"} aria-multiselectable=${this.multiple ? "true" : "false"} aria-labelledby="label" part="listbox" class="select__listbox" tabindex="-1" @mouseup=${this.handleOptionClick} @slotchange=${this.handleDefaultSlotChange}><slot></slot>${f(
       this.shouldShowNoOptionsMessage,
-      () => p`
-                  <cx-typography
-                    variant="body3"
-                    class="select__no-options"
-                    role="option"
-                  >
-                    ${this.noOptionText}
-                  </cx-typography>
-                `
-    )}
-            </div>
-          </cx-popup>
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${n ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
+      () => u`<cx-typography variant="body3" class="select__no-options" role="option">${this.noOptionText}</cx-typography>`
+    )}</div></cx-popup></div><div part="form-control-help-text" id="help-text" class="form-control__help-text" aria-hidden=${n ? "false" : "true"}><slot name="help-text">${this.helpText}</slot></div></div>`;
   }
 };
 i.styles = [
   k,
-  z,
+  D,
   W
 ];
 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")
+o([
+  m(".select")
 ], i.prototype, "popup", 2);
-s([
-  u(".select__combobox")
+o([
+  m(".select__combobox")
 ], i.prototype, "combobox", 2);
-s([
-  u(".select__display-input")
+o([
+  m(".select__display-input")
 ], i.prototype, "displayInput", 2);
-s([
-  u(".select__value-input")
+o([
+  m(".select__value-input")
 ], i.prototype, "valueInput", 2);
-s([
-  u(".select__listbox")
+o([
+  m(".select__listbox")
 ], i.prototype, "listbox", 2);
-s([
-  f()
+o([
+  g()
 ], i.prototype, "hasFocus", 2);
-s([
-  f()
+o([
+  g()
 ], i.prototype, "displayLabel", 2);
-s([
-  f()
+o([
+  g()
 ], i.prototype, "currentOption", 2);
-s([
-  f()
+o([
+  g()
 ], i.prototype, "selectedOptions", 2);
-s([
-  o()
+o([
+  a()
 ], i.prototype, "name", 2);
-s([
-  o({
+o([
+  a({
     converter: {
       fromAttribute: (t) => t.split(" "),
       toAttribute: (t) => Array.isArray(t) ? t.join(" ") : t
     }
   })
 ], i.prototype, "value", 2);
-s([
-  I()
+o([
+  a({ attribute: "fallback-option-value", type: String })
+], i.prototype, "fallbackOptionValue", 2);
+o([
+  L()
 ], i.prototype, "defaultValue", 2);
-s([
-  o({ reflect: !0 })
+o([
+  a({ reflect: !0 })
 ], i.prototype, "size", 2);
-s([
-  o()
+o([
+  a()
 ], i.prototype, "placeholder", 2);
-s([
-  o({ attribute: "allow-freetext", reflect: !0, type: Boolean })
+o([
+  a({ attribute: "allow-freetext", reflect: !0, type: Boolean })
 ], i.prototype, "allowFreetext", 2);
-s([
-  o({ reflect: !0, type: Boolean })
+o([
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "multiple", 2);
-s([
-  o({ attribute: "max-options-visible", type: Number })
+o([
+  a({ attribute: "max-options-visible", type: Number })
 ], i.prototype, "maxOptionsVisible", 2);
-s([
-  o({ reflect: !0, type: Boolean })
+o([
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "disabled", 2);
-s([
-  o({ type: Boolean })
+o([
+  a({ type: Boolean })
 ], i.prototype, "clearable", 2);
-s([
-  o({ reflect: !0, type: Boolean })
+o([
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "open", 2);
-s([
-  o({ type: Boolean })
+o([
+  a({ type: Boolean })
 ], i.prototype, "hoist", 2);
-s([
-  o({ attribute: "no-flip", reflect: !0, type: Boolean })
+o([
+  a({ attribute: "no-flip", reflect: !0, type: Boolean })
 ], i.prototype, "noFlip", 2);
-s([
-  o({ attribute: "sync-element" })
+o([
+  a({ attribute: "sync-element" })
 ], i.prototype, "syncElement", 2);
-s([
-  o({ attribute: "free-width", reflect: !0, type: Boolean })
+o([
+  a({ attribute: "free-width", reflect: !0, type: Boolean })
 ], i.prototype, "freeWidth", 2);
-s([
-  o({ attribute: "auto-size-padding", type: Number })
+o([
+  a({ attribute: "auto-size-padding", type: Number })
 ], i.prototype, "autosizePadding", 2);
-s([
-  o({ reflect: !0, type: Boolean })
+o([
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "filled", 2);
-s([
-  o({ reflect: !0, type: Boolean })
+o([
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "pill", 2);
-s([
-  o()
+o([
+  a()
 ], i.prototype, "label", 2);
-s([
-  o({ reflect: !0 })
+o([
+  a({ reflect: !0 })
 ], i.prototype, "placement", 2);
-s([
-  o({ attribute: "help-text" })
+o([
+  a({ attribute: "help-text" })
 ], i.prototype, "helpText", 2);
-s([
-  o({ reflect: !1 })
+o([
+  a({ reflect: !1 })
 ], i.prototype, "form", 2);
-s([
-  o({ reflect: !0, type: Boolean })
+o([
+  a({ reflect: !0, type: Boolean })
 ], i.prototype, "required", 2);
-s([
-  o({ attribute: "use-tag", reflect: !0, type: Boolean })
+o([
+  a({ attribute: "use-tag", reflect: !0, type: Boolean })
 ], i.prototype, "useTag", 2);
-s([
-  o({
+o([
+  a({
     attribute: "no-select-on-enter",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noSelectOnEnter", 2);
-s([
-  o({
+o([
+  a({
     attribute: "no-reset-current",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noResetCurrent", 2);
-s([
-  o({
+o([
+  a({
     attribute: "no-dropdown",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "noDropdown", 2);
-s([
-  o({
+o([
+  a({
     attribute: "loading",
     reflect: !0,
     type: Boolean
   })
 ], i.prototype, "loading", 2);
-s([
-  o({ attribute: "get-tag" })
+o([
+  a({ attribute: "get-tag" })
 ], i.prototype, "getTag", 2);
-s([
-  o({ attribute: "input-behavior" })
+o([
+  a({ attribute: "input-behavior" })
 ], i.prototype, "inputBehavior", 2);
-s([
-  o({ attribute: "get-option-value" })
+o([
+  a({ attribute: "get-option-value" })
 ], i.prototype, "getOptionValue", 2);
-s([
-  o({ attribute: "get-option-label" })
+o([
+  a({ attribute: "get-option-label" })
 ], i.prototype, "getOptionLabel", 2);
-s([
-  o({ attribute: "get-option-selected" })
+o([
+  a({ attribute: "get-option-selected" })
 ], i.prototype, "getOptionSelected", 2);
-s([
-  o({ attribute: "get-option-disabled" })
+o([
+  a({ attribute: "get-option-disabled" })
 ], i.prototype, "getOptionDisabled", 2);
-s([
-  o({ attribute: "stay-open-on-select", type: Boolean })
+o([
+  a({ attribute: "stay-open-on-select", type: Boolean })
 ], i.prototype, "stayOpenOnSelect", 2);
-s([
-  o({ attribute: "force-on-change", type: Boolean })
+o([
+  a({ attribute: "force-on-change", type: Boolean })
 ], i.prototype, "forceOnChange", 2);
-s([
-  o({ attribute: "allow-default-mouse-down", type: Boolean })
+o([
+  a({ attribute: "allow-default-mouse-down", type: Boolean })
 ], i.prototype, "allowDefaultMouseDown", 2);
-s([
-  o({ attribute: "no-option-text", type: String })
+o([
+  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 })
+o([
+  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 })
+o([
+  p("disabled", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleDisabledChange", 1);
-s([
-  h("value", { waitUntilFirstUpdate: !0 })
+o([
+  p("value", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleValueChange", 1);
-s([
-  h("noDropdown", { waitUntilFirstUpdate: !0 })
+o([
+  p("noDropdown", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleNoDropdownChange", 1);
-s([
-  h("open", { waitUntilFirstUpdate: !0 })
+o([
+  p("open", { waitUntilFirstUpdate: !0 })
 ], i.prototype, "handleOpenChange", 1);
-i = s([
-  D("cx-select")
+i = o([
+  z("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 }