@emuanalytics/flow-rdf-ui 0.0.25 → 0.0.26

package/dist/index.mjs

@@ -7,16 +7,7 @@ import { html as html$1, literal } from 'lit/static-html.js';
 import { autoUpdate, offset, size, flip, shift, arrow, platform, computePosition } from '@floating-ui/dom';
 import { offsetParent } from 'composed-offset-position';
 import * as animations from '@shoelace-style/animations';
-import dayjs from 'dayjs';
-export { default as dayjs } from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-import localeData from 'dayjs/plugin/localeData';
-import AdvancedFormat from 'dayjs/plugin/advancedFormat';
-import QuarterOfYear from 'dayjs/plugin/quarterOfYear';
-import LocalizedFormat from 'dayjs/plugin/localizedFormat';
-import CustomParseFormat from 'dayjs/plugin/customParseFormat';
-import isoWeek from 'dayjs/plugin/isoWeek';
+import { DateTime, Info, Settings } from 'luxon';
 import { map } from 'lit/directives/map.js';
 import { range } from 'lit/directives/range.js';
 import { _adapters, DoughnutController, PolarAreaController, Scale, LinearScale, Chart, BarController, LineController, ScatterController, LineElement, PointElement, BarElement, CategoryScale, LogarithmicScale, TimeScale, TimeSeriesScale, Legend, Tooltip, Title, Interaction } from 'chart.js';
@@ -24,12 +15,14 @@ export { Chart as ChartJs } from 'chart.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
 import AnnotationPlugin from 'chartjs-plugin-annotation';
+import { isNumber as isNumber$1 } from 'chart.js/helpers';
 import { scaleSymlog } from 'd3-scale';
 import { live } from 'lit/directives/live.js';
 import { TinyColor } from '@ctrl/tinycolor';
 import { styleMap } from 'lit/directives/style-map.js';
 import { format, formatLocale } from 'd3-format';
 import { OverlayScrollbars } from 'overlayscrollbars';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { when } from 'lit/directives/when.js';
 import { choose } from 'lit/directives/choose.js';
 
@@ -651,10 +644,8 @@ __decorateClass$$([
 let FlowIcon = _FlowIcon;
 
 const styles$Z = css`
-  ${componentStyles}
-
   :host {
-    --arrow-color: var(--flow-ui-color-neutral-1000);
+    --arrow-color: var(--sl-color-neutral-1000);
     --arrow-size: 6px;
 
     /*
@@ -690,6 +681,26 @@ const styles$Z = css`
     background: var(--arrow-color);
     z-index: -1;
   }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
+    display: none;
+  }
+
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: calc(var(--sl-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
 `;
 
 var __defProp$_ = Object.defineProperty;
@@ -703,7 +714,10 @@ var __decorateClass$_ = (decorators, target, key, kind) => {
     __defProp$_(target, key, result);
   return result;
 };
-let FlowPopup = class extends FlowRdfElement {
+function isVirtualElement(e) {
+  return e !== null && typeof e === "object" && "getBoundingClientRect" in e && ("contextElement" in e ? e instanceof Element : true);
+}
+class SlPopup extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.active = false;
@@ -721,6 +735,71 @@ let FlowPopup = class extends FlowRdfElement {
     this.shift = false;
     this.shiftPadding = 0;
     this.autoSizePadding = 0;
+    this.hoverBridge = false;
+    this.updateHoverBridge = () => {
+      if (this.hoverBridge && this.anchorEl) {
+        const anchorRect = this.anchorEl.getBoundingClientRect();
+        const popupRect = this.popup.getBoundingClientRect();
+        const isVertical = this.placement.includes("top") || this.placement.includes("bottom");
+        let topLeftX = 0;
+        let topLeftY = 0;
+        let topRightX = 0;
+        let topRightY = 0;
+        let bottomLeftX = 0;
+        let bottomLeftY = 0;
+        let bottomRightX = 0;
+        let bottomRightY = 0;
+        if (isVertical) {
+          if (anchorRect.top < popupRect.top) {
+            topLeftX = anchorRect.left;
+            topLeftY = anchorRect.bottom;
+            topRightX = anchorRect.right;
+            topRightY = anchorRect.bottom;
+            bottomLeftX = popupRect.left;
+            bottomLeftY = popupRect.top;
+            bottomRightX = popupRect.right;
+            bottomRightY = popupRect.top;
+          } else {
+            topLeftX = popupRect.left;
+            topLeftY = popupRect.bottom;
+            topRightX = popupRect.right;
+            topRightY = popupRect.bottom;
+            bottomLeftX = anchorRect.left;
+            bottomLeftY = anchorRect.top;
+            bottomRightX = anchorRect.right;
+            bottomRightY = anchorRect.top;
+          }
+        } else {
+          if (anchorRect.left < popupRect.left) {
+            topLeftX = anchorRect.right;
+            topLeftY = anchorRect.top;
+            topRightX = popupRect.left;
+            topRightY = popupRect.top;
+            bottomLeftX = anchorRect.right;
+            bottomLeftY = anchorRect.bottom;
+            bottomRightX = popupRect.left;
+            bottomRightY = popupRect.bottom;
+          } else {
+            topLeftX = popupRect.right;
+            topLeftY = popupRect.top;
+            topRightX = anchorRect.left;
+            topRightY = anchorRect.top;
+            bottomLeftX = popupRect.right;
+            bottomLeftY = popupRect.bottom;
+            bottomRightX = anchorRect.left;
+            bottomRightY = anchorRect.bottom;
+          }
+        }
+        this.style.setProperty("--hover-bridge-top-left-x", `${topLeftX}px`);
+        this.style.setProperty("--hover-bridge-top-left-y", `${topLeftY}px`);
+        this.style.setProperty("--hover-bridge-top-right-x", `${topRightX}px`);
+        this.style.setProperty("--hover-bridge-top-right-y", `${topRightY}px`);
+        this.style.setProperty("--hover-bridge-bottom-left-x", `${bottomLeftX}px`);
+        this.style.setProperty("--hover-bridge-bottom-left-y", `${bottomLeftY}px`);
+        this.style.setProperty("--hover-bridge-bottom-right-x", `${bottomRightX}px`);
+        this.style.setProperty("--hover-bridge-bottom-right-y", `${bottomRightY}px`);
+      }
+    };
   }
   async connectedCallback() {
     super.connectedCallback();
@@ -728,6 +807,7 @@ let FlowPopup = class extends FlowRdfElement {
     this.start();
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.stop();
   }
   async updated(changedProps) {
@@ -752,7 +832,7 @@ let FlowPopup = class extends FlowRdfElement {
     if (this.anchor && typeof this.anchor === "string") {
       const root = this.getRootNode();
       this.anchorEl = root.getElementById(this.anchor);
-    } else if (this.anchor instanceof Element) {
+    } else if (this.anchor instanceof Element || isVirtualElement(this.anchor)) {
       this.anchorEl = this.anchor;
     } else {
       this.anchorEl = this.querySelector('[slot="anchor"]');
@@ -760,12 +840,9 @@ let FlowPopup = class extends FlowRdfElement {
     if (this.anchorEl instanceof HTMLSlotElement) {
       this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0];
     }
-    if (!this.anchorEl) {
-      throw new Error(
-        "Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute."
-      );
+    if (this.anchorEl) {
+      this.start();
     }
-    this.start();
   }
   start() {
     if (!this.anchorEl) {
@@ -873,7 +950,7 @@ let FlowPopup = class extends FlowRdfElement {
         getOffsetParent
       }
     }).then(({ x, y, middlewareData, placement }) => {
-      const isRtl = getComputedStyle(this).direction === "rtl";
+      const isRtl = this.matches(":dir(rtl)");
       const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
       this.setAttribute("data-current-placement", placement);
       Object.assign(this.popup.style, {
@@ -913,12 +990,21 @@ let FlowPopup = class extends FlowRdfElement {
         });
       }
     });
+    requestAnimationFrame(() => this.updateHoverBridge());
     this.emit("flow-ui-reposition");
   }
   render() {
     return html`
       <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
 
+      <span
+        part="hover-bridge"
+        class=${classMap({
+      "popup-hover-bridge": true,
+      "popup-hover-bridge--visible": this.hoverBridge && this.active
+    })}
+      ></span>
+
       <div
         part="popup"
         class=${classMap({
@@ -929,48 +1015,50 @@ let FlowPopup = class extends FlowRdfElement {
     })}
       >
         <slot></slot>
-        ${this.arrow ? html`<div part="arrow" class="popup__arrow" role="presentation"></div>` : ""}
+        ${this.arrow ? html`
+              <div part="arrow" class="popup__arrow" role="presentation"></div>
+            ` : ""}
       </div>
     `;
   }
-};
-FlowPopup.styles = styles$Z;
+}
+SlPopup.styles = [componentStyles, styles$Z];
 __decorateClass$_([
   query(".popup")
-], FlowPopup.prototype, "popup", 2);
+], SlPopup.prototype, "popup", 2);
 __decorateClass$_([
   query(".popup__arrow")
-], FlowPopup.prototype, "arrowEl", 2);
+], SlPopup.prototype, "arrowEl", 2);
 __decorateClass$_([
   property()
-], FlowPopup.prototype, "anchor", 2);
+], SlPopup.prototype, "anchor", 2);
 __decorateClass$_([
   property({ type: Boolean, reflect: true })
-], FlowPopup.prototype, "active", 2);
+], SlPopup.prototype, "active", 2);
 __decorateClass$_([
   property({ reflect: true })
-], FlowPopup.prototype, "placement", 2);
+], SlPopup.prototype, "placement", 2);
 __decorateClass$_([
   property({ reflect: true })
-], FlowPopup.prototype, "strategy", 2);
+], SlPopup.prototype, "strategy", 2);
 __decorateClass$_([
   property({ type: Number })
-], FlowPopup.prototype, "distance", 2);
+], SlPopup.prototype, "distance", 2);
 __decorateClass$_([
   property({ type: Number })
-], FlowPopup.prototype, "skidding", 2);
+], SlPopup.prototype, "skidding", 2);
 __decorateClass$_([
   property({ type: Boolean })
-], FlowPopup.prototype, "arrow", 2);
+], SlPopup.prototype, "arrow", 2);
 __decorateClass$_([
   property({ attribute: "arrow-placement" })
-], FlowPopup.prototype, "arrowPlacement", 2);
+], SlPopup.prototype, "arrowPlacement", 2);
 __decorateClass$_([
   property({ attribute: "arrow-padding", type: Number })
-], FlowPopup.prototype, "arrowPadding", 2);
+], SlPopup.prototype, "arrowPadding", 2);
 __decorateClass$_([
   property({ type: Boolean })
-], FlowPopup.prototype, "flip", 2);
+], SlPopup.prototype, "flip", 2);
 __decorateClass$_([
   property({
     attribute: "flip-fallback-placements",
@@ -983,40 +1071,42 @@ __decorateClass$_([
       }
     }
   })
-], FlowPopup.prototype, "flipFallbackPlacements", 2);
+], SlPopup.prototype, "flipFallbackPlacements", 2);
 __decorateClass$_([
   property({ attribute: "flip-fallback-strategy" })
-], FlowPopup.prototype, "flipFallbackStrategy", 2);
+], SlPopup.prototype, "flipFallbackStrategy", 2);
 __decorateClass$_([
   property({ type: Object })
-], FlowPopup.prototype, "flipBoundary", 2);
+], SlPopup.prototype, "flipBoundary", 2);
 __decorateClass$_([
   property({ attribute: "flip-padding", type: Number })
-], FlowPopup.prototype, "flipPadding", 2);
+], SlPopup.prototype, "flipPadding", 2);
 __decorateClass$_([
   property({ type: Boolean })
-], FlowPopup.prototype, "shift", 2);
+], SlPopup.prototype, "shift", 2);
 __decorateClass$_([
   property({ type: Object })
-], FlowPopup.prototype, "shiftBoundary", 2);
+], SlPopup.prototype, "shiftBoundary", 2);
 __decorateClass$_([
   property({ attribute: "shift-padding", type: Number })
-], FlowPopup.prototype, "shiftPadding", 2);
+], SlPopup.prototype, "shiftPadding", 2);
 __decorateClass$_([
   property({ attribute: "auto-size" })
-], FlowPopup.prototype, "autoSize", 2);
+], SlPopup.prototype, "autoSize", 2);
 __decorateClass$_([
   property()
-], FlowPopup.prototype, "sync", 2);
+], SlPopup.prototype, "sync", 2);
 __decorateClass$_([
   property({ type: Object })
-], FlowPopup.prototype, "autoSizeBoundary", 2);
+], SlPopup.prototype, "autoSizeBoundary", 2);
 __decorateClass$_([
   property({ attribute: "auto-size-padding", type: Number })
-], FlowPopup.prototype, "autoSizePadding", 2);
-FlowPopup = __decorateClass$_([
-  customElement("flow-ui-popup")
-], FlowPopup);
+], SlPopup.prototype, "autoSizePadding", 2);
+__decorateClass$_([
+  property({ attribute: "hover-bridge", type: Boolean })
+], SlPopup.prototype, "hoverBridge", 2);
+
+SlPopup.define("flow-ui-popup");
 
 const styles$Y = css`
   ${componentStyles}
@@ -4047,15 +4137,6 @@ FlowButton = __decorateClass$P([
   customElement("flow-ui-button")
 ], FlowButton);
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(localeData);
-dayjs.extend(AdvancedFormat);
-dayjs.extend(QuarterOfYear);
-dayjs.extend(LocalizedFormat);
-dayjs.extend(CustomParseFormat);
-dayjs.extend(isoWeek);
-
 const isUndefined = (val) => typeof val === "undefined";
 const isNull = (val) => val === null;
 const isNil = (val) => isUndefined(val) || isNull(val);
@@ -4215,12 +4296,10 @@ var __decorateClass$O = (decorators, target, key, kind) => {
     __defProp$O(target, key, result);
   return result;
 };
-dayjs.locale("en");
 class FlowCalendar extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.displayMode = "date";
-    this.timezone = "";
     this.size = "medium";
   }
   connectedCallback() {
@@ -4231,7 +4310,7 @@ class FlowCalendar extends FlowRdfElement {
     super.disconnectedCallback();
   }
   handleValueChange() {
-    this._selectedDate = this.makeDate(this.value)?.millisecond(0);
+    this._selectedDate = this.makeDate(this.value)?.set({ millisecond: 0 });
     if (this._selectedDate) {
       if (this.displayMode === "date") {
         this._selectedDate = this._selectedDate.startOf("day");
@@ -4241,44 +4320,65 @@ class FlowCalendar extends FlowRdfElement {
       this._displayDate = this.makeDate().startOf("month");
     }
   }
+  handleTimezoneChange() {
+    this.handleValueChange();
+    this.updateValue();
+  }
   dateClicked(val) {
     const date = this.makeDate(val);
-    if (date) {
-      if (this._selectedDate) {
-        this._selectedDate = this._selectedDate.year(date.year()).month(date.month()).date(date.date());
-      } else {
-        this._selectedDate = date;
-      }
-      this.updateValue();
+    if (this._selectedDate) {
+      this._selectedDate = date.set({
+        hour: this._selectedDate.hour,
+        minute: this._selectedDate.minute,
+        second: this._selectedDate.second
+      });
+    } else {
+      this._selectedDate = date;
     }
+    this.updateValue();
   }
-  stepDisplayDate(value, unit) {
-    this._displayDate = this._displayDate.add(value, unit);
+  stepDisplayDate(duration) {
+    this._displayDate = this._displayDate.plus(duration);
   }
+  /**
+   * Generate a list of years for the year select dropdown
+   */
   yearOptionsForDate(date) {
     const years = [];
-    for (let y = date.year() + 1; y >= date.year() - 6; y--) {
+    for (let y = date.year + 1; y >= date.year - 6; y--) {
       years.push(y);
     }
     return years;
   }
   makeDate(d) {
     try {
-      const date = dayjs(d).tz(isStringFull(this.timezone) ? this.timezone : void 0);
-      return date.isValid() ? date : void 0;
+      let date;
+      const zone = isStringFull(this.timezone) ? this.timezone : void 0;
+      const locale = isStringFull(this.locale) ? this.locale : void 0;
+      if (isStringFull(d)) {
+        date = DateTime.fromISO(d, { zone, locale });
+      } else {
+        date = DateTime.local({ zone, locale });
+      }
+      return date.isValid ? date : void 0;
     } catch (e) {
+      console.error(`Invalid date in makeDate: ${d} (${this.timezone})`);
       return void 0;
     }
   }
   updateValue(emitEvents = true) {
-    this.value = this._selectedDate ? this._selectedDate.toISOString() : "";
+    const iso = this._selectedDate?.toISO();
+    this.value = isDefined(iso) ? iso : "";
     if (emitEvents) {
       this.emit("flow-ui-change");
     }
   }
   handleHeaderSelectChange(ev) {
     ev.stopPropagation();
-    this._displayDate = this.makeDate().year(+this._yearSelect.value).month(+this._monthSelect.value).startOf("month");
+    this._displayDate = this.makeDate().set({
+      year: +this._yearSelect.value,
+      month: +this._monthSelect.value
+    }).startOf("month");
   }
   handleTimeChange(ev) {
     ev.stopPropagation();
@@ -4287,34 +4387,36 @@ class FlowCalendar extends FlowRdfElement {
     }
     const target = ev.target;
     const unit = target.getAttribute("name");
-    this._selectedDate = this._selectedDate.set(unit, +target.value);
+    this._selectedDate = this._selectedDate.set({ [unit]: +target.value });
     this.updateValue();
   }
   calendarHeaderTemplate() {
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    const monthsShort = Info.months("short", { locale });
     return html`
       <div class="calendar__header">
         <flow-ui-icon-button
           name="chevron-left"
           library="system"
-          @click=${() => this.stepDisplayDate(-1, "month")}
+          @click=${() => this.stepDisplayDate({ month: -1 })}
         ></flow-ui-icon-button>
         <flow-ui-select
           class="calendar__month-select calendar__header-select"
-          value=${this._displayDate.month()}
+          value=${this._displayDate.month}
           @flow-ui-change=${this.handleHeaderSelectChange}
         >
-          ${dayjs.monthsShort().map(
+          ${monthsShort.map(
       (month, index) => html`
-              <flow-ui-option value=${index}>${month}</flow-ui-option>
+              <flow-ui-option value=${index + 1}>${month}</flow-ui-option>
             `
     )}
         </flow-ui-select>
         <flow-ui-select
           class="calendar__year-select calendar__header-select"
-          value=${this._displayDate.year()}
+          value=${this._displayDate.year}
           @flow-ui-change=${this.handleHeaderSelectChange}
         >
-          ${this.yearOptionsForDate(dayjs()).map(
+          ${this.yearOptionsForDate(DateTime.now()).map(
       (year) => html`
               <flow-ui-option value=${year}>${year}</flow-ui-option>
             `
@@ -4323,13 +4425,14 @@ class FlowCalendar extends FlowRdfElement {
         <flow-ui-icon-button
           name="chevron-right"
           library="system"
-          @click=${() => this.stepDisplayDate(1, "month")}
+          @click=${() => this.stepDisplayDate({ month: 1 })}
         ></flow-ui-icon-button>
       </div>
     `;
   }
   dayOfWeekGridTemplate() {
-    const days = dayjs.weekdaysMin(true);
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    const days = Info.weekdays("narrow", { locale });
     return html`
       ${days.map(
       (day) => html`
@@ -4344,34 +4447,34 @@ class FlowCalendar extends FlowRdfElement {
     const endOfMonth = this._displayDate.endOf("month");
     const calendarStart = startOfMonth.startOf("week");
     const calendarEnd = endOfMonth.endOf("week");
-    const daysInMonth = this._displayDate.daysInMonth();
+    const daysInMonth = this._displayDate.daysInMonth;
     const days = [];
-    for (let date = calendarStart; date.isBefore(startOfMonth); date = date.add(1, "day")) {
+    for (let date = calendarStart; date < startOfMonth; date = date.plus({ day: 1 })) {
       days.push({
-        day: date.date(),
-        date: date.toISOString(),
+        day: date.toFormat("d"),
+        date: date.toISO(),
         isFiller: true,
-        today: date.isSame(today, "day"),
-        selected: !!this._selectedDate && date.isSame(this._selectedDate, "day")
+        today: date === today,
+        selected: !!this._selectedDate && date.startOf("day").equals(this._selectedDate.startOf("day"))
       });
     }
     for (let day = 1; day <= daysInMonth; day++) {
-      const date = startOfMonth.add(day - 1, "day");
+      const date = startOfMonth.plus({ days: day - 1 }).startOf("day");
       days.push({
-        day,
-        date: date.toISOString(),
+        day: date.toFormat("d"),
+        date: date.toISO(),
         isFiller: false,
-        today: date.isSame(today, "day"),
-        selected: !!this._selectedDate && date.isSame(this._selectedDate, "day")
+        today: date.startOf("day").equals(today.startOf("day")),
+        selected: !!this._selectedDate && date.startOf("day").equals(this._selectedDate.startOf("day"))
       });
     }
-    for (let date = endOfMonth.add(1, "day"); !date.isAfter(calendarEnd); date = date.add(1, "day")) {
+    for (let date = endOfMonth.plus({ day: 1 }).startOf("day"); date < calendarEnd; date = date.plus({ day: 1 })) {
       days.push({
-        day: date.date(),
-        date: date.toISOString(),
+        day: date.toFormat("d"),
+        date: date.toISO(),
         isFiller: true,
-        today: date.isSame(today, "day"),
-        selected: !!this._selectedDate && date.isSame(this._selectedDate, "day")
+        today: date.startOf("day").equals(today.startOf("day")),
+        selected: !!this._selectedDate && date.startOf("day").equals(this._selectedDate.startOf("day"))
       });
     }
     return html`
@@ -4403,7 +4506,7 @@ class FlowCalendar extends FlowRdfElement {
           max="23"
           format="02"
           class="calendar__time-input"
-          value=${this._selectedDate ? this._selectedDate.hour() : 0}
+          value=${this._selectedDate ? this._selectedDate.hour : 0}
           @flow-ui-change=${this.handleTimeChange}
         ></flow-ui-number-stepper>
         <span class="calendar__time-separator">:</span>
@@ -4414,7 +4517,7 @@ class FlowCalendar extends FlowRdfElement {
           max="59"
           format="02"
           class="calendar__time-input"
-          value=${this._selectedDate ? this._selectedDate.minute() : 0}
+          value=${this._selectedDate ? this._selectedDate.minute : 0}
           @flow-ui-change=${this.handleTimeChange}
         ></flow-ui-number-stepper>
         <span class="calendar__time-separator">:</span>
@@ -4425,7 +4528,7 @@ class FlowCalendar extends FlowRdfElement {
           max="59"
           format="02"
           class="calendar__time-input"
-          value=${this._selectedDate ? this._selectedDate.second() : 0}
+          value=${this._selectedDate ? this._selectedDate.second : 0}
           @flow-ui-change=${this.handleTimeChange}
         ></flow-ui-number-stepper>
       </div>
@@ -4467,7 +4570,7 @@ __decorateClass$O([
   state()
 ], FlowCalendar.prototype, "_selectedDate", 2);
 __decorateClass$O([
-  property()
+  property({ reflect: true })
 ], FlowCalendar.prototype, "value", 2);
 __decorateClass$O([
   property({ attribute: "display-mode" })
@@ -4475,12 +4578,18 @@ __decorateClass$O([
 __decorateClass$O([
   property()
 ], FlowCalendar.prototype, "timezone", 2);
+__decorateClass$O([
+  property()
+], FlowCalendar.prototype, "locale", 2);
 __decorateClass$O([
   property()
 ], FlowCalendar.prototype, "size", 2);
 __decorateClass$O([
-  watch(["value", "timezone"])
+  watch("value")
 ], FlowCalendar.prototype, "handleValueChange", 1);
+__decorateClass$O([
+  watch(["timezone"])
+], FlowCalendar.prototype, "handleTimezoneChange", 1);
 
 FlowCalendar.define("flow-ui-calendar");
 
@@ -5489,62 +5598,73 @@ const styles$K = css`
 `;
 
 const FORMATS = {
-  datetime: "MMM D, YYYY, HH:mm:ss",
-  millisecond: "HH:mm:ss.SSS",
-  second: "HH:mm:ss",
-  minute: "HH:mm",
-  hour: "HH",
-  day: "MMM D",
-  week: "ll",
-  month: "MMM YYYY",
-  quarter: "[Q]Q - YYYY",
-  year: "YYYY"
+  datetime: DateTime.DATETIME_MED_WITH_SECONDS,
+  millisecond: "h:mm:ss.SSS a",
+  second: DateTime.TIME_WITH_SECONDS,
+  minute: DateTime.TIME_SIMPLE,
+  hour: { hour: "numeric" },
+  day: { day: "numeric", month: "short" },
+  week: "DD",
+  month: { month: "short", year: "numeric" },
+  quarter: "'Q'q - yyyy",
+  year: { year: "numeric" }
 };
-function createDate(value, format, options) {
-  if (isUndefined(options)) {
-    options = format;
-    format = void 0;
-  }
-  if (options.utc) {
-    return dayjs.utc(value, format);
-  }
-  return dayjs(value, format);
+function create(time, options) {
+  return DateTime.fromMillis(time, options);
 }
 _adapters._date.override({
-  // _id: 'dayjs', // DEBUG
+  // _id: 'luxon', // DEBUG
+  init(chartOptions) {
+    if (!this.options.locale) {
+      this.options.locale = chartOptions.locale;
+    }
+  },
   formats: function() {
     return FORMATS;
   },
   parse: function(value, format) {
-    const valueType = typeof value;
-    if (value === null || valueType === "undefined") {
+    const options = this.options;
+    const type = typeof value;
+    if (value === null || type === "undefined") {
       return null;
     }
-    if (valueType === "string" && typeof format === "string") {
-      return createDate(value, format, this.options).isValid() ? createDate(value, format, this.options).valueOf() : null;
-    } else if (!(value instanceof dayjs)) {
-      return createDate(value, this.options).isValid() ? createDate(value, this.options).valueOf() : null;
+    if (typeof value === "number") {
+      value = create(value);
+    } else if (typeof value === "string") {
+      if (typeof format === "string") {
+        value = DateTime.fromFormat(value, format, options);
+      } else {
+        value = DateTime.fromISO(value, options);
+      }
+    } else if (value instanceof Date) {
+      value = DateTime.fromJSDate(value, options);
+    } else if (typeof value === "object" && !(value instanceof DateTime)) {
+      value = DateTime.fromObject(value, options);
     }
-    return null;
+    return value instanceof DateTime && value.isValid ? value.valueOf() : null;
   },
   format: function(time, format) {
-    return createDate(time, this.options).format(format);
+    const datetime = create(time, this.options);
+    return typeof format === "string" ? datetime.toFormat(format) : datetime.toLocaleString(format);
   },
   add: function(time, amount, unit) {
-    return createDate(time, this.options).add(amount, unit).valueOf();
+    const args = {};
+    args[unit] = amount;
+    return create(time).plus(args).valueOf();
   },
   diff: function(max, min, unit) {
-    return createDate(max, this.options).diff(createDate(min, this.options), unit);
+    return create(max).diff(create(min)).as(unit).valueOf();
   },
   startOf: function(time, unit, weekday) {
-    if (unit === "isoWeek") {
-      const validatedWeekday = typeof weekday === "number" && weekday > 0 && weekday < 7 ? weekday : 1;
-      return createDate(time, this.options).isoWeekday(validatedWeekday).startOf("day").valueOf();
+    if (unit === "isoWeek" && isNumber$1(weekday)) {
+      weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
+      const dateTime = create(time);
+      return dateTime.minus({ days: (dateTime.weekday - weekday + 7) % 7 }).startOf("day").valueOf();
     }
-    return createDate(time, this.options).startOf(unit).valueOf();
+    return unit ? create(time).startOf(unit).valueOf() : time;
   },
   endOf: function(time, unit) {
-    return createDate(time, this.options).endOf(unit).valueOf();
+    return create(time).endOf(unit).valueOf();
   }
 });
 
@@ -8943,7 +9063,7 @@ var __decorateClass$D = (decorators, target, key, kind) => {
     __defProp$D(target, key, result);
   return result;
 };
-let FlowTag = class extends FlowRdfElement {
+class FlowTag extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
@@ -8994,8 +9114,9 @@ let FlowTag = class extends FlowRdfElement {
       </span>
     `;
   }
-};
+}
 FlowTag.styles = styles$E;
+FlowTag.dependencies = { "flow-icon-button": FlowIconButton };
 __decorateClass$D([
   property({ reflect: true })
 ], FlowTag.prototype, "variant", 2);
@@ -9008,9 +9129,8 @@ __decorateClass$D([
 __decorateClass$D([
   property({ type: Boolean })
 ], FlowTag.prototype, "removable", 2);
-FlowTag = __decorateClass$D([
-  customElement("flow-ui-tag")
-], FlowTag);
+
+FlowTag.define("flow-ui-tag");
 
 const styles$D = css`
   ${componentStyles}
@@ -9296,8 +9416,7 @@ class FlowDatetimePicker extends FlowRdfElement {
     this.name = "";
     this.value = "";
     this.displayMode = "datetime";
-    this.format = "LLL";
-    this.timezone = "";
+    this.format = "FFF";
     this.defaultValue = "";
     this.size = "medium";
     this.placeholder = "";
@@ -9341,7 +9460,9 @@ class FlowDatetimePicker extends FlowRdfElement {
   updateDisplayLabel() {
     try {
       if (isStringFull(this.value)) {
-        this.displayLabel = dayjs(this.value).tz(isStringFull(this.timezone) ? this.timezone : void 0).format(this.format);
+        const zone = isStringFull(this.timezone) ? this.timezone : void 0;
+        const locale = isStringFull(this.locale) ? this.locale : void 0;
+        this.displayLabel = DateTime.fromISO(this.value, { zone, locale }).toFormat(this.format);
       } else {
         this.displayLabel = "";
       }
@@ -9645,7 +9766,8 @@ class FlowDatetimePicker extends FlowRdfElement {
                       value=${this.value}
                       display-mode=${this.displayMode}
                       size=${this.size}
-                      timezone=${this.timezone}
+                      timezone=${ifDefined(this.timezone)}
+                      locale=${ifDefined(this.locale)}
                       @flow-ui-change=${this.handleCalendarChange}
                     ></flow-ui-calendar>
                   ` : nothing}
@@ -9692,7 +9814,7 @@ __decorateClass$C([
   property()
 ], FlowDatetimePicker.prototype, "name", 2);
 __decorateClass$C([
-  property()
+  property({ reflect: true })
 ], FlowDatetimePicker.prototype, "value", 2);
 __decorateClass$C([
   property({ attribute: "display-mode" })
@@ -9703,6 +9825,9 @@ __decorateClass$C([
 __decorateClass$C([
   property()
 ], FlowDatetimePicker.prototype, "timezone", 2);
+__decorateClass$C([
+  property()
+], FlowDatetimePicker.prototype, "locale", 2);
 __decorateClass$C([
   defaultValue()
 ], FlowDatetimePicker.prototype, "defaultValue", 2);
@@ -9746,7 +9871,7 @@ __decorateClass$C([
   property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "required", 2);
 __decorateClass$C([
-  watch(["value", "format", "timezone"])
+  watch(["value", "format", "timezone", "locale"])
 ], FlowDatetimePicker.prototype, "updateDisplayLabel", 1);
 __decorateClass$C([
   watch("disabled", { waitUntilFirstUpdate: true })
@@ -12148,7 +12273,7 @@ var __decorateClass$r = (decorators, target, key, kind) => {
     __defProp$r(target, key, result);
   return result;
 };
-let FlowOption = class extends FlowRdfElement {
+class FlowOption extends FlowRdfElement {
   constructor() {
     super(...arguments);
     // @ts-expect-error - Controller is currently unused
@@ -12198,7 +12323,19 @@ let FlowOption = class extends FlowRdfElement {
   }
   /** Returns a plain text label based on the option's content. */
   getTextLabel() {
-    return (this.textContent ?? "").trim();
+    const nodes = this.childNodes;
+    let label = "";
+    [...nodes].forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!node.hasAttribute("slot")) {
+          label += node.textContent;
+        }
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+    return label.trim();
   }
   render() {
     return html`
@@ -12227,8 +12364,9 @@ let FlowOption = class extends FlowRdfElement {
       </div>
     `;
   }
-};
+}
 FlowOption.styles = styles$s;
+FlowOption.dependencies = { "flow-ui-icon": FlowIcon };
 __decorateClass$r([
   query(".option__label")
 ], FlowOption.prototype, "defaultSlot", 2);
@@ -12256,9 +12394,8 @@ __decorateClass$r([
 __decorateClass$r([
   watch("value")
 ], FlowOption.prototype, "handleValueChange", 1);
-FlowOption = __decorateClass$r([
-  customElement("flow-ui-option")
-], FlowOption);
+
+FlowOption.define("flow-ui-option");
 
 const styles$r = css`
   ${componentStyles}
@@ -14878,9 +15015,6 @@ __decorateClass$i([
 FlowScrollView.define("flow-ui-scroll-view");
 
 const styles$i = css`
-  ${componentStyles}
-  ${formControlStyles}
-
   :host {
     display: block;
   }
@@ -14921,8 +15055,11 @@ const styles$i = css`
     vertical-align: middle;
     overflow: hidden;
     cursor: pointer;
-    transition: var(--flow-ui-transition-fast) color, var(--flow-ui-transition-fast) border,
-      var(--flow-ui-transition-fast) box-shadow, var(--flow-ui-transition-fast) background-color;
+    transition:
+      var(--flow-ui-transition-fast) color,
+      var(--flow-ui-transition-fast) border,
+      var(--flow-ui-transition-fast) box-shadow,
+      var(--flow-ui-transition-fast) background-color;
   }
 
   .select__display-input {
@@ -14939,6 +15076,10 @@ const styles$i = css`
     -webkit-appearance: none;
   }
 
+  .select__display-input::placeholder {
+    color: var(--flow-ui-input-placeholder-color);
+  }
+
   .select:not(.select--disabled):hover .select__display-input {
     color: var(--flow-ui-input-color-hover);
   }
@@ -15129,6 +15270,14 @@ const styles$i = css`
     color: var(--flow-ui-input-placeholder-color);
   }
 
+  /* Suffix */
+  .select__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--flow-ui-input-placeholder-color);
+  }
+
   /* Clear button */
   .select__clear {
     display: inline-flex;
@@ -15191,10 +15340,11 @@ const styles$i = css`
   }
 
   .select__listbox ::slotted(small) {
+    display: block;
     font-size: var(--flow-ui-font-size-small);
     font-weight: var(--flow-ui-font-weight-semibold);
     color: var(--flow-ui-color-neutral-500);
-    padding-block: var(--flow-ui-spacing-x-small);
+    padding-block: var(--flow-ui-spacing-2x-small);
     padding-inline: var(--flow-ui-spacing-x-large);
   }
 `;
@@ -15210,7 +15360,7 @@ var __decorateClass$h = (decorators, target, key, kind) => {
     __defProp$h(target, key, result);
   return result;
 };
-let FlowSelect = class extends FlowRdfElement {
+class FlowSelect extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -15219,7 +15369,6 @@ let FlowSelect = class extends FlowRdfElement {
     this.hasSlotController = new HasSlotController(this, "help-text", "label");
     this.localize = new LocalizeController(this);
     this.typeToSelectString = "";
-    this.pendingValue = null;
     this.hasFocus = false;
     this.displayLabel = "";
     this.selectedOptions = [];
@@ -15241,6 +15390,129 @@ let FlowSelect = class extends FlowRdfElement {
     this.helpText = "";
     this.form = "";
     this.required = false;
+    this.getTag = (option) => {
+      return html`
+      <flow-ui-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=${this.size}
+        removable
+        @flow-ui-remove=${(event) => this.handleTagRemove(event, option)}
+      >
+        ${option.getTextLabel()}
+      </flow-ui-tag>
+    `;
+    };
+    this.handleDocumentFocusIn = (event) => {
+      const path = event.composedPath();
+      if (this && !path.includes(this)) {
+        this.hide();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      const target = event.target;
+      const isClearButton = target.closest(".select__clear") !== null;
+      const isIconButton = target.closest("flow-ui-icon-button") !== null;
+      if (isClearButton || isIconButton) {
+        return;
+      }
+      if (event.key === "Escape" && this.open && !this.closeWatcher) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.hide();
+        this.displayInput.focus({ preventScroll: true });
+      }
+      if (event.key === "Enter" || event.key === " " && this.typeToSelectString === "") {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (!this.open) {
+          this.show();
+          return;
+        }
+        if (this.currentOption && !this.currentOption.disabled) {
+          if (this.multiple) {
+            this.toggleOptionSelection(this.currentOption);
+          } else {
+            this.setSelectedOptions(this.currentOption);
+          }
+          this.updateComplete.then(() => {
+            this.emit("flow-ui-input");
+            this.emit("flow-ui-change");
+          });
+          if (!this.multiple) {
+            this.hide();
+            this.displayInput.focus({ preventScroll: true });
+          }
+        }
+        return;
+      }
+      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+        const allOptions = this.getAllOptions();
+        const currentIndex = allOptions.indexOf(this.currentOption);
+        let newIndex = Math.max(0, currentIndex);
+        event.preventDefault();
+        if (!this.open) {
+          this.show();
+          if (this.currentOption) {
+            return;
+          }
+        }
+        if (event.key === "ArrowDown") {
+          newIndex = currentIndex + 1;
+          if (newIndex > allOptions.length - 1)
+            newIndex = 0;
+        } else if (event.key === "ArrowUp") {
+          newIndex = currentIndex - 1;
+          if (newIndex < 0)
+            newIndex = allOptions.length - 1;
+        } else if (event.key === "Home") {
+          newIndex = 0;
+        } else if (event.key === "End") {
+          newIndex = allOptions.length - 1;
+        }
+        this.setCurrentOption(allOptions[newIndex]);
+      }
+      if (event.key.length === 1 || event.key === "Backspace") {
+        const allOptions = this.getAllOptions();
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+          return;
+        }
+        if (!this.open) {
+          if (event.key === "Backspace") {
+            return;
+          }
+          this.show();
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        clearTimeout(this.typeToSelectTimeout);
+        this.typeToSelectTimeout = window.setTimeout(() => this.typeToSelectString = "", 1e3);
+        if (event.key === "Backspace") {
+          this.typeToSelectString = this.typeToSelectString.slice(0, -1);
+        } else {
+          this.typeToSelectString += event.key.toLowerCase();
+        }
+        for (const option of allOptions) {
+          const label = option.getTextLabel().toLowerCase();
+          if (label.startsWith(this.typeToSelectString)) {
+            this.setCurrentOption(option);
+            break;
+          }
+        }
+      }
+    };
+    this.handleDocumentMouseDown = (event) => {
+      const path = event.composedPath();
+      if (this && !path.includes(this)) {
+        this.hide();
+      }
+    };
   }
   /** Gets the validity state object */
   get validity() {
@@ -15252,20 +15524,49 @@ let FlowSelect = class extends FlowRdfElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.open = false;
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateComplete.then(() => {
+        this.selectionChanged();
+      });
+    });
+    this.mutationObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ["value"],
+      characterData: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
   }
   addOpenListeners() {
     document.addEventListener("focusin", this.handleDocumentFocusIn);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
+    if (this.getRootNode() !== document) {
+      this.getRootNode().addEventListener("focusin", this.handleDocumentFocusIn);
+    }
+    if ("CloseWatcher" in window) {
+      this.closeWatcher?.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        if (this.open) {
+          this.hide();
+          this.displayInput.focus({ preventScroll: true });
+        }
+      };
+    }
   }
   removeOpenListeners() {
     document.removeEventListener("focusin", this.handleDocumentFocusIn);
     document.removeEventListener("keydown", this.handleDocumentKeyDown);
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    if (this.getRootNode() !== document) {
+      this.getRootNode().removeEventListener("focusin", this.handleDocumentFocusIn);
+    }
+    this.closeWatcher?.destroy();
   }
   handleFocus() {
     this.hasFocus = true;
@@ -15276,110 +15577,6 @@ let FlowSelect = class extends FlowRdfElement {
     this.hasFocus = false;
     this.emit("flow-ui-blur");
   }
-  handleDocumentFocusIn(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hide();
-    }
-  }
-  handleDocumentKeyDown(event) {
-    const target = event.target;
-    const isClearButton = target.closest(".select__clear") !== null;
-    const isIconButton = target.closest("flow-ui-icon-button") !== null;
-    if (isClearButton || isIconButton) {
-      return;
-    }
-    if (event.key === "Escape" && this.open) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.hide();
-      this.displayInput.focus({ preventScroll: true });
-    }
-    if (event.key === "Enter" || event.key === " " && this.typeToSelectString === "") {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      if (!this.open) {
-        this.show();
-        return;
-      }
-      if (this.currentOption && !this.currentOption.disabled) {
-        if (this.multiple) {
-          this.toggleOptionSelection(this.currentOption);
-        } else {
-          this.setSelectedOptions(this.currentOption);
-        }
-        this.updateComplete.then(() => {
-          this.emit("flow-ui-input");
-          this.emit("flow-ui-change");
-        });
-        if (!this.multiple) {
-          this.hide();
-          this.displayInput.focus({ preventScroll: true });
-        }
-      }
-      return;
-    }
-    if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
-      const allOptions = this.getAllOptions();
-      const currentIndex = allOptions.indexOf(this.currentOption);
-      let newIndex = Math.max(0, currentIndex);
-      event.preventDefault();
-      if (!this.open) {
-        this.show();
-        if (this.currentOption) {
-          return;
-        }
-      }
-      if (event.key === "ArrowDown") {
-        newIndex = currentIndex + 1;
-        if (newIndex > allOptions.length - 1)
-          newIndex = 0;
-      } else if (event.key === "ArrowUp") {
-        newIndex = currentIndex - 1;
-        if (newIndex < 0)
-          newIndex = allOptions.length - 1;
-      } else if (event.key === "Home") {
-        newIndex = 0;
-      } else if (event.key === "End") {
-        newIndex = allOptions.length - 1;
-      }
-      this.setCurrentOption(allOptions[newIndex]);
-    }
-    if (event.key.length === 1 || event.key === "Backspace") {
-      const allOptions = this.getAllOptions();
-      if (event.metaKey || event.ctrlKey || event.altKey) {
-        return;
-      }
-      if (!this.open) {
-        if (event.key === "Backspace") {
-          return;
-        }
-        this.show();
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      clearTimeout(this.typeToSelectTimeout);
-      this.typeToSelectTimeout = window.setTimeout(() => this.typeToSelectString = "", 1e3);
-      if (event.key === "Backspace") {
-        this.typeToSelectString = this.typeToSelectString.slice(0, -1);
-      } else {
-        this.typeToSelectString += event.key.toLowerCase();
-      }
-      for (const option of allOptions) {
-        const label = option.getTextLabel().toLowerCase();
-        if (label.startsWith(this.typeToSelectString)) {
-          this.setCurrentOption(option);
-          break;
-        }
-      }
-    }
-  }
-  handleDocumentMouseDown(event) {
-    const path = event.composedPath();
-    if (this && !path.includes(this)) {
-      this.hide();
-    }
-  }
   handleLabelClick() {
     this.displayInput.focus();
   }
@@ -15394,6 +15591,9 @@ let FlowSelect = class extends FlowRdfElement {
     this.open = !this.open;
   }
   handleComboboxKeyDown(event) {
+    if (event.key === "Tab") {
+      return;
+    }
     event.stopPropagation();
     this.handleDocumentKeyDown(event);
   }
@@ -15438,13 +15638,7 @@ let FlowSelect = class extends FlowRdfElement {
   }
   handleDefaultSlotChange() {
     const allOptions = this.getAllOptions();
-    let value;
-    if (allOptions.length && this.pendingValue) {
-      value = this.pendingValue;
-      this.pendingValue = null;
-    } else {
-      value = Array.isArray(this.value) ? this.value : [this.value];
-    }
+    const value = Array.isArray(this.value) ? this.value : [this.value];
     const values = [];
     if (customElements.get("flow-ui-option")) {
       allOptions.forEach((option) => values.push(option.value));
@@ -15524,6 +15718,23 @@ let FlowSelect = class extends FlowRdfElement {
       this.formControlController.updateValidity();
     });
   }
+  get tags() {
+    return this.selectedOptions.map((option, index) => {
+      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+        const tag = this.getTag(option, index);
+        return html`
+          <div @flow-ui-remove=${(e) => this.handleTagRemove(e, option)}>
+            ${typeof tag === "string" ? unsafeHTML(tag) : tag}
+          </div>
+        `;
+      } else if (index === this.maxOptionsVisible) {
+        return html`
+          <flow-ui-tag size=${this.size}>+${this.selectedOptions.length - index}</flow-ui-tag>
+        `;
+      }
+      return html``;
+    });
+  }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
@@ -15537,9 +15748,6 @@ let FlowSelect = class extends FlowRdfElement {
   handleValueChange() {
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
-    if (allOptions.length === 0) {
-      this.pendingValue = value;
-    }
     this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
   }
   async handleOpenChange() {
@@ -15701,35 +15909,7 @@ let FlowSelect = class extends FlowRdfElement {
               />
 
               ${this.multiple ? html`
-                    <div part="tags" class="select__tags">
-                      ${this.selectedOptions.map((option, index) => {
-      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
-        return html`
-                            <flow-ui-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=${this.size}
-                              removable
-                              @flow-ui-remove=${(event) => this.handleTagRemove(event, option)}
-                            >
-                              ${option.getTextLabel()}
-                            </flow-ui-tag>
-                          `;
-      } else if (index === this.maxOptionsVisible) {
-        return html`
-                            <flow-ui-tag size=${this.size}>+${this.selectedOptions.length - index}</flow-ui-tag>
-                          `;
-      } else {
-        return null;
-      }
-    })}
-                    </div>
+                    <div part="tags" class="select__tags">${this.tags}</div>
                   ` : ""}
 
               <input
@@ -15760,6 +15940,8 @@ let FlowSelect = class extends FlowRdfElement {
                     </button>
                   ` : ""}
 
+              <slot name="suffix" part="suffix" class="select__suffix"></slot>
+
               <slot name="expand-icon" part="expand-icon" class="select__expand-icon">
                 <flow-ui-icon library="system" name="chevron-down"></flow-ui-icon>
               </slot>
@@ -15782,20 +15964,24 @@ let FlowSelect = class extends FlowRdfElement {
           </flow-ui-popup>
         </div>
 
-        <slot
-          name="help-text"
+        <div
           part="form-control-help-text"
           id="help-text"
           class="form-control__help-text"
           aria-hidden=${hasHelpText ? "false" : "true"}
         >
-          ${this.helpText}
-        </slot>
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
       </div>
     `;
   }
+}
+FlowSelect.styles = [componentStyles, formControlStyles, styles$i];
+FlowSelect.dependencies = {
+  "flow-icon": FlowIcon,
+  "flow-popup": SlPopup,
+  "flow-tag": FlowTag
 };
-FlowSelect.styles = styles$i;
 __decorateClass$h([
   query(".select")
 ], FlowSelect.prototype, "popup", 2);
@@ -15882,6 +16068,9 @@ __decorateClass$h([
 __decorateClass$h([
   property({ type: Boolean, reflect: true })
 ], FlowSelect.prototype, "required", 2);
+__decorateClass$h([
+  property()
+], FlowSelect.prototype, "getTag", 2);
 __decorateClass$h([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowSelect.prototype, "handleDisabledChange", 1);
@@ -15891,9 +16080,6 @@ __decorateClass$h([
 __decorateClass$h([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowSelect.prototype, "handleOpenChange", 1);
-FlowSelect = __decorateClass$h([
-  customElement("flow-ui-select")
-], FlowSelect);
 setDefaultAnimation("select.show", {
   keyframes: [
     { opacity: 0, scale: 0.9 },
@@ -15909,6 +16095,8 @@ setDefaultAnimation("select.hide", {
   options: { duration: 100, easing: "ease" }
 });
 
+FlowSelect.define("flow-ui-select");
+
 const styles$h = css`
   ${componentStyles}
 
@@ -19176,7 +19364,6 @@ const styles$6 = css`
   }
 `;
 
-dayjs.locale("en");
 class FlowTimer extends FlowRdfElement {
   connectedCallback() {
     super.connectedCallback();
@@ -21552,6 +21739,13 @@ function getBasePath(subpath = "") {
   return basePath.replace(/\/$/, "") + (subpath ? `/${subpath.replace(/^\//, "")}` : ``);
 }
 
+function setDefaultLocale(locale) {
+  Settings.defaultLocale = locale;
+}
+function setDefaultTimeZone(timeZone) {
+  Settings.defaultZone = timeZone;
+}
+
 const translation = {
   $code: "en",
   $name: "English",
@@ -21585,7 +21779,7 @@ const translation = {
 };
 registerTranslation(translation);
 
-const version = "0.0.25";
+const version = "0.0.26";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
@@ -21598,4 +21792,4 @@ function announce() {
 
 announce();
 
-export { FlowAlert, FlowAnimation, FlowAvatar, FlowBadge, FlowBreadcrumb, FlowBreadcrumbItem, FlowButton, FlowButtonGroup, FlowCalendar, FlowCard, FlowCarousel, FlowCarouselItem, FlowChart, FlowCheckbox, FlowColorMapper, FlowColorPicker, FlowColorStopComponent as FlowColorStop, FlowDatetimePicker as FlowDateTimePicker, FlowDetails, FlowDialog, FlowDivider, FlowDrawer, FlowDropdown, FlowGauge, FlowIcon, FlowIconButton, FlowInput, FlowMenu, FlowMenuItem, FlowMenuLabel, FlowMutationObserver, FlowNumberStepper, FlowOption, FlowSplitViewPanel as FlowPanel, FlowPanelHeader, FlowPopup, FlowProgressBar, FlowProgressRing, FlowRadio, FlowRadioGroup, FlowRange, FlowResizeObserver, FlowScrollView, FlowSelect, FlowSpinner, FlowSplitView, FlowPanelDivider as FlowSplitViewDivider, FlowSplitViewPane, FlowSplitViewToggleButton, FlowStepper, FlowStepperPanel, FlowSwitch, FlowTab, FlowTabGroup, FlowTabPanel, FlowTag, FlowTextarea, FlowTimer, FlowToolButton, FlowToolButtonGroup, FlowTooltip, FlowTree, FlowTreeItem, FlowVisuallyHidden, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, getAnimationNames, getBasePath, getEasingNames, initializeChartJs, registerChartComponent, registerIconLibrary, setBasePath, unregisterIconLibrary };
+export { FlowAlert, FlowAnimation, FlowAvatar, FlowBadge, FlowBreadcrumb, FlowBreadcrumbItem, FlowButton, FlowButtonGroup, FlowCalendar, FlowCard, FlowCarousel, FlowCarouselItem, FlowChart, FlowCheckbox, FlowColorMapper, FlowColorPicker, FlowColorStopComponent as FlowColorStop, FlowDatetimePicker as FlowDateTimePicker, FlowDetails, FlowDialog, FlowDivider, FlowDrawer, FlowDropdown, FlowGauge, FlowIcon, FlowIconButton, FlowInput, FlowMenu, FlowMenuItem, FlowMenuLabel, FlowMutationObserver, FlowNumberStepper, FlowOption, FlowSplitViewPanel as FlowPanel, FlowPanelHeader, SlPopup as FlowPopup, FlowProgressBar, FlowProgressRing, FlowRadio, FlowRadioGroup, FlowRange, FlowResizeObserver, FlowScrollView, FlowSelect, FlowSpinner, FlowSplitView, FlowPanelDivider as FlowSplitViewDivider, FlowSplitViewPane, FlowSplitViewToggleButton, FlowStepper, FlowStepperPanel, FlowSwitch, FlowTab, FlowTabGroup, FlowTabPanel, FlowTag, FlowTextarea, FlowTimer, FlowToolButton, FlowToolButtonGroup, FlowTooltip, FlowTree, FlowTreeItem, FlowVisuallyHidden, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, getAnimationNames, getBasePath, getEasingNames, initializeChartJs, registerChartComponent, registerIconLibrary, setBasePath, setDefaultLocale, setDefaultTimeZone, unregisterIconLibrary };