@emuanalytics/flow-rdf-ui 0.0.25 → 0.0.26

package/dist/index.cjs

@@ -9,27 +9,21 @@ const staticHtml_js = require('lit/static-html.js');
 const dom = require('@floating-ui/dom');
 const composedOffsetPosition = require('composed-offset-position');
 const animations = require('@shoelace-style/animations');
-const dayjs = require('dayjs');
-const utc = require('dayjs/plugin/utc');
-const timezone = require('dayjs/plugin/timezone');
-const localeData = require('dayjs/plugin/localeData');
-const AdvancedFormat = require('dayjs/plugin/advancedFormat');
-const QuarterOfYear = require('dayjs/plugin/quarterOfYear');
-const LocalizedFormat = require('dayjs/plugin/localizedFormat');
-const CustomParseFormat = require('dayjs/plugin/customParseFormat');
-const isoWeek = require('dayjs/plugin/isoWeek');
+const luxon = require('luxon');
 const map_js = require('lit/directives/map.js');
 const range_js = require('lit/directives/range.js');
 const chart_js = require('chart.js');
 const ref_js = require('lit/directives/ref.js');
 const chartjsChartMatrix = require('chartjs-chart-matrix');
 const AnnotationPlugin = require('chartjs-plugin-annotation');
+const helpers = require('chart.js/helpers');
 const d3Scale = require('d3-scale');
 const live_js = require('lit/directives/live.js');
 const tinycolor = require('@ctrl/tinycolor');
 const styleMap_js = require('lit/directives/style-map.js');
 const d3Format$1 = require('d3-format');
 const overlayscrollbars = require('overlayscrollbars');
+const unsafeHtml_js = require('lit/directives/unsafe-html.js');
 const when_js = require('lit/directives/when.js');
 const choose_js = require('lit/directives/choose.js');
 
@@ -48,15 +42,6 @@ function _interopNamespaceCompat(e) {
 }
 
 const animations__namespace = /*#__PURE__*/_interopNamespaceCompat(animations);
-const dayjs__default = /*#__PURE__*/_interopDefaultCompat(dayjs);
-const utc__default = /*#__PURE__*/_interopDefaultCompat(utc);
-const timezone__default = /*#__PURE__*/_interopDefaultCompat(timezone);
-const localeData__default = /*#__PURE__*/_interopDefaultCompat(localeData);
-const AdvancedFormat__default = /*#__PURE__*/_interopDefaultCompat(AdvancedFormat);
-const QuarterOfYear__default = /*#__PURE__*/_interopDefaultCompat(QuarterOfYear);
-const LocalizedFormat__default = /*#__PURE__*/_interopDefaultCompat(LocalizedFormat);
-const CustomParseFormat__default = /*#__PURE__*/_interopDefaultCompat(CustomParseFormat);
-const isoWeek__default = /*#__PURE__*/_interopDefaultCompat(isoWeek);
 const AnnotationPlugin__default = /*#__PURE__*/_interopDefaultCompat(AnnotationPlugin);
 
 function animateTo(el, keyframes, options) {
@@ -677,10 +662,8 @@ __decorateClass$$([
 let FlowIcon = _FlowIcon;
 
 const styles$Z = lit.css`
-  ${componentStyles}
-
   :host {
-    --arrow-color: var(--flow-ui-color-neutral-1000);
+    --arrow-color: var(--sl-color-neutral-1000);
     --arrow-size: 6px;
 
     /*
@@ -716,6 +699,26 @@ const styles$Z = lit.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;
@@ -729,7 +732,10 @@ var __decorateClass$_ = (decorators, target, key, kind) => {
     __defProp$_(target, key, result);
   return result;
 };
-exports.FlowPopup = class FlowPopup 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;
@@ -747,6 +753,71 @@ exports.FlowPopup = class FlowPopup 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();
@@ -754,6 +825,7 @@ exports.FlowPopup = class FlowPopup extends FlowRdfElement {
     this.start();
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.stop();
   }
   async updated(changedProps) {
@@ -778,7 +850,7 @@ exports.FlowPopup = class FlowPopup 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"]');
@@ -786,12 +858,9 @@ exports.FlowPopup = class FlowPopup 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) {
@@ -899,7 +968,7 @@ exports.FlowPopup = class FlowPopup 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, {
@@ -939,12 +1008,21 @@ exports.FlowPopup = class FlowPopup extends FlowRdfElement {
         });
       }
     });
+    requestAnimationFrame(() => this.updateHoverBridge());
     this.emit("flow-ui-reposition");
   }
   render() {
     return lit.html`
       <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
 
+      <span
+        part="hover-bridge"
+        class=${classMap_js.classMap({
+      "popup-hover-bridge": true,
+      "popup-hover-bridge--visible": this.hoverBridge && this.active
+    })}
+      ></span>
+
       <div
         part="popup"
         class=${classMap_js.classMap({
@@ -955,48 +1033,50 @@ exports.FlowPopup = class FlowPopup extends FlowRdfElement {
     })}
       >
         <slot></slot>
-        ${this.arrow ? lit.html`<div part="arrow" class="popup__arrow" role="presentation"></div>` : ""}
+        ${this.arrow ? lit.html`
+              <div part="arrow" class="popup__arrow" role="presentation"></div>
+            ` : ""}
       </div>
     `;
   }
-};
-exports.FlowPopup.styles = styles$Z;
+}
+SlPopup.styles = [componentStyles, styles$Z];
 __decorateClass$_([
   decorators_js.query(".popup")
-], exports.FlowPopup.prototype, "popup", 2);
+], SlPopup.prototype, "popup", 2);
 __decorateClass$_([
   decorators_js.query(".popup__arrow")
-], exports.FlowPopup.prototype, "arrowEl", 2);
+], SlPopup.prototype, "arrowEl", 2);
 __decorateClass$_([
   decorators_js.property()
-], exports.FlowPopup.prototype, "anchor", 2);
+], SlPopup.prototype, "anchor", 2);
 __decorateClass$_([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowPopup.prototype, "active", 2);
+], SlPopup.prototype, "active", 2);
 __decorateClass$_([
   decorators_js.property({ reflect: true })
-], exports.FlowPopup.prototype, "placement", 2);
+], SlPopup.prototype, "placement", 2);
 __decorateClass$_([
   decorators_js.property({ reflect: true })
-], exports.FlowPopup.prototype, "strategy", 2);
+], SlPopup.prototype, "strategy", 2);
 __decorateClass$_([
   decorators_js.property({ type: Number })
-], exports.FlowPopup.prototype, "distance", 2);
+], SlPopup.prototype, "distance", 2);
 __decorateClass$_([
   decorators_js.property({ type: Number })
-], exports.FlowPopup.prototype, "skidding", 2);
+], SlPopup.prototype, "skidding", 2);
 __decorateClass$_([
   decorators_js.property({ type: Boolean })
-], exports.FlowPopup.prototype, "arrow", 2);
+], SlPopup.prototype, "arrow", 2);
 __decorateClass$_([
   decorators_js.property({ attribute: "arrow-placement" })
-], exports.FlowPopup.prototype, "arrowPlacement", 2);
+], SlPopup.prototype, "arrowPlacement", 2);
 __decorateClass$_([
   decorators_js.property({ attribute: "arrow-padding", type: Number })
-], exports.FlowPopup.prototype, "arrowPadding", 2);
+], SlPopup.prototype, "arrowPadding", 2);
 __decorateClass$_([
   decorators_js.property({ type: Boolean })
-], exports.FlowPopup.prototype, "flip", 2);
+], SlPopup.prototype, "flip", 2);
 __decorateClass$_([
   decorators_js.property({
     attribute: "flip-fallback-placements",
@@ -1009,40 +1089,42 @@ __decorateClass$_([
       }
     }
   })
-], exports.FlowPopup.prototype, "flipFallbackPlacements", 2);
+], SlPopup.prototype, "flipFallbackPlacements", 2);
 __decorateClass$_([
   decorators_js.property({ attribute: "flip-fallback-strategy" })
-], exports.FlowPopup.prototype, "flipFallbackStrategy", 2);
+], SlPopup.prototype, "flipFallbackStrategy", 2);
 __decorateClass$_([
   decorators_js.property({ type: Object })
-], exports.FlowPopup.prototype, "flipBoundary", 2);
+], SlPopup.prototype, "flipBoundary", 2);
 __decorateClass$_([
   decorators_js.property({ attribute: "flip-padding", type: Number })
-], exports.FlowPopup.prototype, "flipPadding", 2);
+], SlPopup.prototype, "flipPadding", 2);
 __decorateClass$_([
   decorators_js.property({ type: Boolean })
-], exports.FlowPopup.prototype, "shift", 2);
+], SlPopup.prototype, "shift", 2);
 __decorateClass$_([
   decorators_js.property({ type: Object })
-], exports.FlowPopup.prototype, "shiftBoundary", 2);
+], SlPopup.prototype, "shiftBoundary", 2);
 __decorateClass$_([
   decorators_js.property({ attribute: "shift-padding", type: Number })
-], exports.FlowPopup.prototype, "shiftPadding", 2);
+], SlPopup.prototype, "shiftPadding", 2);
 __decorateClass$_([
   decorators_js.property({ attribute: "auto-size" })
-], exports.FlowPopup.prototype, "autoSize", 2);
+], SlPopup.prototype, "autoSize", 2);
 __decorateClass$_([
   decorators_js.property()
-], exports.FlowPopup.prototype, "sync", 2);
+], SlPopup.prototype, "sync", 2);
 __decorateClass$_([
   decorators_js.property({ type: Object })
-], exports.FlowPopup.prototype, "autoSizeBoundary", 2);
+], SlPopup.prototype, "autoSizeBoundary", 2);
 __decorateClass$_([
   decorators_js.property({ attribute: "auto-size-padding", type: Number })
-], exports.FlowPopup.prototype, "autoSizePadding", 2);
-exports.FlowPopup = __decorateClass$_([
-  decorators_js.customElement("flow-ui-popup")
-], exports.FlowPopup);
+], SlPopup.prototype, "autoSizePadding", 2);
+__decorateClass$_([
+  decorators_js.property({ attribute: "hover-bridge", type: Boolean })
+], SlPopup.prototype, "hoverBridge", 2);
+
+SlPopup.define("flow-ui-popup");
 
 const styles$Y = lit.css`
   ${componentStyles}
@@ -4073,15 +4155,6 @@ exports.FlowButton = __decorateClass$P([
   decorators_js.customElement("flow-ui-button")
 ], exports.FlowButton);
 
-dayjs__default.extend(utc__default);
-dayjs__default.extend(timezone__default);
-dayjs__default.extend(localeData__default);
-dayjs__default.extend(AdvancedFormat__default);
-dayjs__default.extend(QuarterOfYear__default);
-dayjs__default.extend(LocalizedFormat__default);
-dayjs__default.extend(CustomParseFormat__default);
-dayjs__default.extend(isoWeek__default);
-
 const isUndefined = (val) => typeof val === "undefined";
 const isNull = (val) => val === null;
 const isNil = (val) => isUndefined(val) || isNull(val);
@@ -4241,12 +4314,10 @@ var __decorateClass$O = (decorators, target, key, kind) => {
     __defProp$O(target, key, result);
   return result;
 };
-dayjs__default.locale("en");
 class FlowCalendar extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.displayMode = "date";
-    this.timezone = "";
     this.size = "medium";
   }
   connectedCallback() {
@@ -4257,7 +4328,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");
@@ -4267,44 +4338,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__default(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 = luxon.DateTime.fromISO(d, { zone, locale });
+      } else {
+        date = luxon.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();
@@ -4313,34 +4405,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 = luxon.Info.months("short", { locale });
     return lit.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__default.monthsShort().map(
+          ${monthsShort.map(
       (month, index) => lit.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__default()).map(
+          ${this.yearOptionsForDate(luxon.DateTime.now()).map(
       (year) => lit.html`
               <flow-ui-option value=${year}>${year}</flow-ui-option>
             `
@@ -4349,13 +4443,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__default.weekdaysMin(true);
+    const locale = isStringFull(this.locale) ? this.locale : void 0;
+    const days = luxon.Info.weekdays("narrow", { locale });
     return lit.html`
       ${days.map(
       (day) => lit.html`
@@ -4370,34 +4465,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 lit.html`
@@ -4429,7 +4524,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>
@@ -4440,7 +4535,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>
@@ -4451,7 +4546,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>
@@ -4493,7 +4588,7 @@ __decorateClass$O([
   decorators_js.state()
 ], FlowCalendar.prototype, "_selectedDate", 2);
 __decorateClass$O([
-  decorators_js.property()
+  decorators_js.property({ reflect: true })
 ], FlowCalendar.prototype, "value", 2);
 __decorateClass$O([
   decorators_js.property({ attribute: "display-mode" })
@@ -4501,12 +4596,18 @@ __decorateClass$O([
 __decorateClass$O([
   decorators_js.property()
 ], FlowCalendar.prototype, "timezone", 2);
+__decorateClass$O([
+  decorators_js.property()
+], FlowCalendar.prototype, "locale", 2);
 __decorateClass$O([
   decorators_js.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");
 
@@ -5515,62 +5616,73 @@ const styles$K = lit.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: luxon.DateTime.DATETIME_MED_WITH_SECONDS,
+  millisecond: "h:mm:ss.SSS a",
+  second: luxon.DateTime.TIME_WITH_SECONDS,
+  minute: luxon.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__default.utc(value, format);
-  }
-  return dayjs__default(value, format);
+function create(time, options) {
+  return luxon.DateTime.fromMillis(time, options);
 }
 chart_js._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__default)) {
-      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 = luxon.DateTime.fromFormat(value, format, options);
+      } else {
+        value = luxon.DateTime.fromISO(value, options);
+      }
+    } else if (value instanceof Date) {
+      value = luxon.DateTime.fromJSDate(value, options);
+    } else if (typeof value === "object" && !(value instanceof luxon.DateTime)) {
+      value = luxon.DateTime.fromObject(value, options);
     }
-    return null;
+    return value instanceof luxon.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" && helpers.isNumber(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();
   }
 });
 
@@ -8969,7 +9081,7 @@ var __decorateClass$D = (decorators, target, key, kind) => {
     __defProp$D(target, key, result);
   return result;
 };
-exports.FlowTag = class FlowTag extends FlowRdfElement {
+class FlowTag extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
@@ -9020,23 +9132,23 @@ exports.FlowTag = class FlowTag extends FlowRdfElement {
       </span>
     `;
   }
-};
-exports.FlowTag.styles = styles$E;
+}
+FlowTag.styles = styles$E;
+FlowTag.dependencies = { "flow-icon-button": FlowIconButton };
 __decorateClass$D([
   decorators_js.property({ reflect: true })
-], exports.FlowTag.prototype, "variant", 2);
+], FlowTag.prototype, "variant", 2);
 __decorateClass$D([
   decorators_js.property({ reflect: true })
-], exports.FlowTag.prototype, "size", 2);
+], FlowTag.prototype, "size", 2);
 __decorateClass$D([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowTag.prototype, "pill", 2);
+], FlowTag.prototype, "pill", 2);
 __decorateClass$D([
   decorators_js.property({ type: Boolean })
-], exports.FlowTag.prototype, "removable", 2);
-exports.FlowTag = __decorateClass$D([
-  decorators_js.customElement("flow-ui-tag")
-], exports.FlowTag);
+], FlowTag.prototype, "removable", 2);
+
+FlowTag.define("flow-ui-tag");
 
 const styles$D = lit.css`
   ${componentStyles}
@@ -9322,8 +9434,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 = "";
@@ -9367,7 +9478,9 @@ class FlowDatetimePicker extends FlowRdfElement {
   updateDisplayLabel() {
     try {
       if (isStringFull(this.value)) {
-        this.displayLabel = dayjs__default(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 = luxon.DateTime.fromISO(this.value, { zone, locale }).toFormat(this.format);
       } else {
         this.displayLabel = "";
       }
@@ -9671,7 +9784,8 @@ class FlowDatetimePicker extends FlowRdfElement {
                       value=${this.value}
                       display-mode=${this.displayMode}
                       size=${this.size}
-                      timezone=${this.timezone}
+                      timezone=${ifDefined_js.ifDefined(this.timezone)}
+                      locale=${ifDefined_js.ifDefined(this.locale)}
                       @flow-ui-change=${this.handleCalendarChange}
                     ></flow-ui-calendar>
                   ` : lit.nothing}
@@ -9718,7 +9832,7 @@ __decorateClass$C([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "name", 2);
 __decorateClass$C([
-  decorators_js.property()
+  decorators_js.property({ reflect: true })
 ], FlowDatetimePicker.prototype, "value", 2);
 __decorateClass$C([
   decorators_js.property({ attribute: "display-mode" })
@@ -9729,6 +9843,9 @@ __decorateClass$C([
 __decorateClass$C([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "timezone", 2);
+__decorateClass$C([
+  decorators_js.property()
+], FlowDatetimePicker.prototype, "locale", 2);
 __decorateClass$C([
   defaultValue()
 ], FlowDatetimePicker.prototype, "defaultValue", 2);
@@ -9772,7 +9889,7 @@ __decorateClass$C([
   decorators_js.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 })
@@ -12174,7 +12291,7 @@ var __decorateClass$r = (decorators, target, key, kind) => {
     __defProp$r(target, key, result);
   return result;
 };
-exports.FlowOption = class FlowOption extends FlowRdfElement {
+class FlowOption extends FlowRdfElement {
   constructor() {
     super(...arguments);
     // @ts-expect-error - Controller is currently unused
@@ -12224,7 +12341,19 @@ exports.FlowOption = class FlowOption 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 lit.html`
@@ -12253,38 +12382,38 @@ exports.FlowOption = class FlowOption extends FlowRdfElement {
       </div>
     `;
   }
-};
-exports.FlowOption.styles = styles$s;
+}
+FlowOption.styles = styles$s;
+FlowOption.dependencies = { "flow-ui-icon": FlowIcon };
 __decorateClass$r([
   decorators_js.query(".option__label")
-], exports.FlowOption.prototype, "defaultSlot", 2);
+], FlowOption.prototype, "defaultSlot", 2);
 __decorateClass$r([
   decorators_js.state()
-], exports.FlowOption.prototype, "current", 2);
+], FlowOption.prototype, "current", 2);
 __decorateClass$r([
   decorators_js.state()
-], exports.FlowOption.prototype, "selected", 2);
+], FlowOption.prototype, "selected", 2);
 __decorateClass$r([
   decorators_js.state()
-], exports.FlowOption.prototype, "hasHover", 2);
+], FlowOption.prototype, "hasHover", 2);
 __decorateClass$r([
   decorators_js.property({ reflect: true })
-], exports.FlowOption.prototype, "value", 2);
+], FlowOption.prototype, "value", 2);
 __decorateClass$r([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowOption.prototype, "disabled", 2);
+], FlowOption.prototype, "disabled", 2);
 __decorateClass$r([
   watch("disabled")
-], exports.FlowOption.prototype, "handleDisabledChange", 1);
+], FlowOption.prototype, "handleDisabledChange", 1);
 __decorateClass$r([
   watch("selected")
-], exports.FlowOption.prototype, "handleSelectedChange", 1);
+], FlowOption.prototype, "handleSelectedChange", 1);
 __decorateClass$r([
   watch("value")
-], exports.FlowOption.prototype, "handleValueChange", 1);
-exports.FlowOption = __decorateClass$r([
-  decorators_js.customElement("flow-ui-option")
-], exports.FlowOption);
+], FlowOption.prototype, "handleValueChange", 1);
+
+FlowOption.define("flow-ui-option");
 
 const styles$r = lit.css`
   ${componentStyles}
@@ -14904,9 +15033,6 @@ __decorateClass$i([
 FlowScrollView.define("flow-ui-scroll-view");
 
 const styles$i = lit.css`
-  ${componentStyles}
-  ${formControlStyles}
-
   :host {
     display: block;
   }
@@ -14947,8 +15073,11 @@ const styles$i = lit.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 {
@@ -14965,6 +15094,10 @@ const styles$i = lit.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);
   }
@@ -15155,6 +15288,14 @@ const styles$i = lit.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;
@@ -15217,10 +15358,11 @@ const styles$i = lit.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);
   }
 `;
@@ -15236,7 +15378,7 @@ var __decorateClass$h = (decorators, target, key, kind) => {
     __defProp$h(target, key, result);
   return result;
 };
-exports.FlowSelect = class FlowSelect extends FlowRdfElement {
+class FlowSelect extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -15245,7 +15387,6 @@ exports.FlowSelect = class FlowSelect 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 = [];
@@ -15267,6 +15408,129 @@ exports.FlowSelect = class FlowSelect extends FlowRdfElement {
     this.helpText = "";
     this.form = "";
     this.required = false;
+    this.getTag = (option) => {
+      return lit.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() {
@@ -15278,20 +15542,49 @@ exports.FlowSelect = class FlowSelect 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;
@@ -15302,110 +15595,6 @@ exports.FlowSelect = class FlowSelect 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();
   }
@@ -15420,6 +15609,9 @@ exports.FlowSelect = class FlowSelect extends FlowRdfElement {
     this.open = !this.open;
   }
   handleComboboxKeyDown(event) {
+    if (event.key === "Tab") {
+      return;
+    }
     event.stopPropagation();
     this.handleDocumentKeyDown(event);
   }
@@ -15464,13 +15656,7 @@ exports.FlowSelect = class FlowSelect 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));
@@ -15550,6 +15736,23 @@ exports.FlowSelect = class FlowSelect 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 lit.html`
+          <div @flow-ui-remove=${(e) => this.handleTagRemove(e, option)}>
+            ${typeof tag === "string" ? unsafeHtml_js.unsafeHTML(tag) : tag}
+          </div>
+        `;
+      } else if (index === this.maxOptionsVisible) {
+        return lit.html`
+          <flow-ui-tag size=${this.size}>+${this.selectedOptions.length - index}</flow-ui-tag>
+        `;
+      }
+      return lit.html``;
+    });
+  }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
@@ -15563,9 +15766,6 @@ exports.FlowSelect = class FlowSelect 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() {
@@ -15727,35 +15927,7 @@ exports.FlowSelect = class FlowSelect extends FlowRdfElement {
               />
 
               ${this.multiple ? lit.html`
-                    <div part="tags" class="select__tags">
-                      ${this.selectedOptions.map((option, index) => {
-      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
-        return lit.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 lit.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
@@ -15786,6 +15958,8 @@ exports.FlowSelect = class FlowSelect 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>
@@ -15808,50 +15982,54 @@ exports.FlowSelect = class FlowSelect 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
 };
-exports.FlowSelect.styles = styles$i;
 __decorateClass$h([
   decorators_js.query(".select")
-], exports.FlowSelect.prototype, "popup", 2);
+], FlowSelect.prototype, "popup", 2);
 __decorateClass$h([
   decorators_js.query(".select__combobox")
-], exports.FlowSelect.prototype, "combobox", 2);
+], FlowSelect.prototype, "combobox", 2);
 __decorateClass$h([
   decorators_js.query(".select__display-input")
-], exports.FlowSelect.prototype, "displayInput", 2);
+], FlowSelect.prototype, "displayInput", 2);
 __decorateClass$h([
   decorators_js.query(".select__value-input")
-], exports.FlowSelect.prototype, "valueInput", 2);
+], FlowSelect.prototype, "valueInput", 2);
 __decorateClass$h([
   decorators_js.query(".select__listbox")
-], exports.FlowSelect.prototype, "listbox", 2);
+], FlowSelect.prototype, "listbox", 2);
 __decorateClass$h([
   decorators_js.state()
-], exports.FlowSelect.prototype, "hasFocus", 2);
+], FlowSelect.prototype, "hasFocus", 2);
 __decorateClass$h([
   decorators_js.state()
-], exports.FlowSelect.prototype, "displayLabel", 2);
+], FlowSelect.prototype, "displayLabel", 2);
 __decorateClass$h([
   decorators_js.state()
-], exports.FlowSelect.prototype, "currentOption", 2);
+], FlowSelect.prototype, "currentOption", 2);
 __decorateClass$h([
   decorators_js.state()
-], exports.FlowSelect.prototype, "selectedOptions", 2);
+], FlowSelect.prototype, "selectedOptions", 2);
 __decorateClass$h([
   decorators_js.property()
-], exports.FlowSelect.prototype, "name", 2);
+], FlowSelect.prototype, "name", 2);
 __decorateClass$h([
   decorators_js.property({
     converter: {
@@ -15859,67 +16037,67 @@ __decorateClass$h([
       toAttribute: (value) => value.join(" ")
     }
   })
-], exports.FlowSelect.prototype, "value", 2);
+], FlowSelect.prototype, "value", 2);
 __decorateClass$h([
   defaultValue()
-], exports.FlowSelect.prototype, "defaultValue", 2);
+], FlowSelect.prototype, "defaultValue", 2);
 __decorateClass$h([
   decorators_js.property({ reflect: true })
-], exports.FlowSelect.prototype, "size", 2);
+], FlowSelect.prototype, "size", 2);
 __decorateClass$h([
   decorators_js.property()
-], exports.FlowSelect.prototype, "placeholder", 2);
+], FlowSelect.prototype, "placeholder", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowSelect.prototype, "multiple", 2);
+], FlowSelect.prototype, "multiple", 2);
 __decorateClass$h([
   decorators_js.property({ attribute: "max-options-visible", type: Number })
-], exports.FlowSelect.prototype, "maxOptionsVisible", 2);
+], FlowSelect.prototype, "maxOptionsVisible", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowSelect.prototype, "disabled", 2);
+], FlowSelect.prototype, "disabled", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean })
-], exports.FlowSelect.prototype, "clearable", 2);
+], FlowSelect.prototype, "clearable", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowSelect.prototype, "open", 2);
+], FlowSelect.prototype, "open", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean })
-], exports.FlowSelect.prototype, "hoist", 2);
+], FlowSelect.prototype, "hoist", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowSelect.prototype, "filled", 2);
+], FlowSelect.prototype, "filled", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowSelect.prototype, "pill", 2);
+], FlowSelect.prototype, "pill", 2);
 __decorateClass$h([
   decorators_js.property()
-], exports.FlowSelect.prototype, "label", 2);
+], FlowSelect.prototype, "label", 2);
 __decorateClass$h([
   decorators_js.property({ reflect: true })
-], exports.FlowSelect.prototype, "placement", 2);
+], FlowSelect.prototype, "placement", 2);
 __decorateClass$h([
   decorators_js.property({ attribute: "help-text" })
-], exports.FlowSelect.prototype, "helpText", 2);
+], FlowSelect.prototype, "helpText", 2);
 __decorateClass$h([
   decorators_js.property({ reflect: true })
-], exports.FlowSelect.prototype, "form", 2);
+], FlowSelect.prototype, "form", 2);
 __decorateClass$h([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.FlowSelect.prototype, "required", 2);
+], FlowSelect.prototype, "required", 2);
+__decorateClass$h([
+  decorators_js.property()
+], FlowSelect.prototype, "getTag", 2);
 __decorateClass$h([
   watch("disabled", { waitUntilFirstUpdate: true })
-], exports.FlowSelect.prototype, "handleDisabledChange", 1);
+], FlowSelect.prototype, "handleDisabledChange", 1);
 __decorateClass$h([
   watch("value", { waitUntilFirstUpdate: true })
-], exports.FlowSelect.prototype, "handleValueChange", 1);
+], FlowSelect.prototype, "handleValueChange", 1);
 __decorateClass$h([
   watch("open", { waitUntilFirstUpdate: true })
-], exports.FlowSelect.prototype, "handleOpenChange", 1);
-exports.FlowSelect = __decorateClass$h([
-  decorators_js.customElement("flow-ui-select")
-], exports.FlowSelect);
+], FlowSelect.prototype, "handleOpenChange", 1);
 setDefaultAnimation("select.show", {
   keyframes: [
     { opacity: 0, scale: 0.9 },
@@ -15935,6 +16113,8 @@ setDefaultAnimation("select.hide", {
   options: { duration: 100, easing: "ease" }
 });
 
+FlowSelect.define("flow-ui-select");
+
 const styles$h = lit.css`
   ${componentStyles}
 
@@ -19202,7 +19382,6 @@ const styles$6 = lit.css`
   }
 `;
 
-dayjs__default.locale("en");
 class FlowTimer extends FlowRdfElement {
   connectedCallback() {
     super.connectedCallback();
@@ -21578,6 +21757,13 @@ function getBasePath(subpath = "") {
   return basePath.replace(/\/$/, "") + (subpath ? `/${subpath.replace(/^\//, "")}` : ``);
 }
 
+function setDefaultLocale(locale) {
+  luxon.Settings.defaultLocale = locale;
+}
+function setDefaultTimeZone(timeZone) {
+  luxon.Settings.defaultZone = timeZone;
+}
+
 const translation = {
   $code: "en",
   $name: "English",
@@ -21611,7 +21797,7 @@ const translation = {
 };
 localize.registerTranslation(translation);
 
-const version = "0.0.25";
+const version = "0.0.26";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
@@ -21624,7 +21810,6 @@ function announce() {
 
 announce();
 
-exports.dayjs = dayjs__default;
 exports.ChartJs = chart_js.Chart;
 exports.FlowCalendar = FlowCalendar;
 exports.FlowChart = FlowChart;
@@ -21634,15 +21819,19 @@ exports.FlowGauge = FlowGauge;
 exports.FlowIcon = FlowIcon;
 exports.FlowIconButton = FlowIconButton;
 exports.FlowNumberStepper = FlowNumberStepper;
+exports.FlowOption = FlowOption;
 exports.FlowPanel = FlowSplitViewPanel;
 exports.FlowPanelHeader = FlowPanelHeader;
+exports.FlowPopup = SlPopup;
 exports.FlowScrollView = FlowScrollView;
+exports.FlowSelect = FlowSelect;
 exports.FlowSplitView = FlowSplitView;
 exports.FlowSplitViewDivider = FlowPanelDivider;
 exports.FlowSplitViewPane = FlowSplitViewPane;
 exports.FlowSplitViewToggleButton = FlowSplitViewToggleButton;
 exports.FlowStepper = FlowStepper;
 exports.FlowStepperPanel = FlowStepperPanel;
+exports.FlowTag = FlowTag;
 exports.FlowTimer = FlowTimer;
 exports.FlowToolButton = FlowToolButton;
 exports.FlowToolButtonGroup = FlowToolButtonGroup;
@@ -21656,4 +21845,6 @@ exports.initializeChartJs = initializeChartJs;
 exports.registerChartComponent = registerChartComponent;
 exports.registerIconLibrary = registerIconLibrary;
 exports.setBasePath = setBasePath;
+exports.setDefaultLocale = setDefaultLocale;
+exports.setDefaultTimeZone = setDefaultTimeZone;
 exports.unregisterIconLibrary = unregisterIconLibrary;