@emuanalytics/flow-rdf-ui 0.0.38 → 0.0.40

package/dist/index.cjs

@@ -22,6 +22,7 @@ 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 flowRdfCore = require('@emuanalytics/flow-rdf-core');
 const cloneDeep = require('clone-deep');
 const overlayscrollbars = require('overlayscrollbars');
 const unsafeHtml_js = require('lit/directives/unsafe-html.js');
@@ -104,15 +105,15 @@ function waitForEvent(el, eventName) {
   });
 }
 
-var __defProp$12 = Object.defineProperty;
-var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
-var __decorateClass$12 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
+var __defProp$13 = Object.defineProperty;
+var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
+var __decorateClass$13 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$12(target, key, result);
+    __defProp$13(target, key, result);
   return result;
 };
 class FlowRdfElement extends lit.LitElement {
@@ -136,10 +137,10 @@ class FlowRdfElement extends lit.LitElement {
     }
   }
 }
-__decorateClass$12([
+__decorateClass$13([
   decorators_js.property()
 ], FlowRdfElement.prototype, "dir", 2);
-__decorateClass$12([
+__decorateClass$13([
   decorators_js.property()
 ], FlowRdfElement.prototype, "lang", 2);
 
@@ -278,7 +279,7 @@ const componentStyles = lit.css`
   }
 `;
 
-const styles$$ = lit.css`
+const styles$10 = lit.css`
   ${componentStyles}
 
   :host {
@@ -533,15 +534,15 @@ function unregisterIconLibrary(name) {
   registry = registry.filter((lib) => lib.name !== name);
 }
 
-var __defProp$11 = Object.defineProperty;
-var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
-var __decorateClass$11 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
+var __defProp$12 = Object.defineProperty;
+var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
+var __decorateClass$12 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$11(target, key, result);
+    __defProp$12(target, key, result);
   return result;
 };
 const CACHEABLE_ERROR = Symbol();
@@ -648,31 +649,31 @@ const _FlowIcon = class _FlowIcon extends FlowRdfElement {
     return this.svg;
   }
 };
-_FlowIcon.styles = styles$$;
-__decorateClass$11([
+_FlowIcon.styles = styles$10;
+__decorateClass$12([
   decorators_js.state()
 ], _FlowIcon.prototype, "svg", 2);
-__decorateClass$11([
+__decorateClass$12([
   decorators_js.property({ reflect: true })
 ], _FlowIcon.prototype, "name", 2);
-__decorateClass$11([
+__decorateClass$12([
   decorators_js.property()
 ], _FlowIcon.prototype, "src", 2);
-__decorateClass$11([
+__decorateClass$12([
   decorators_js.property()
 ], _FlowIcon.prototype, "label", 2);
-__decorateClass$11([
+__decorateClass$12([
   decorators_js.property({ reflect: true })
 ], _FlowIcon.prototype, "library", 2);
-__decorateClass$11([
+__decorateClass$12([
   watch("label")
 ], _FlowIcon.prototype, "handleLabelChange", 1);
-__decorateClass$11([
+__decorateClass$12([
   watch(["name", "src", "library"])
 ], _FlowIcon.prototype, "setIcon", 1);
 let FlowIcon = _FlowIcon;
 
-const styles$_ = lit.css`
+const styles$$ = lit.css`
   :host {
     --arrow-color: var(--sl-color-neutral-1000);
     --arrow-size: 6px;
@@ -732,15 +733,15 @@ const styles$_ = lit.css`
   }
 `;
 
-var __defProp$10 = Object.defineProperty;
-var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
-var __decorateClass$10 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
+var __defProp$11 = Object.defineProperty;
+var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
+var __decorateClass$11 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$10(target, key, result);
+    __defProp$11(target, key, result);
   return result;
 };
 function isVirtualElement(e) {
@@ -1051,44 +1052,44 @@ class SlPopup extends FlowRdfElement {
     `;
   }
 }
-SlPopup.styles = [componentStyles, styles$_];
-__decorateClass$10([
+SlPopup.styles = [componentStyles, styles$$];
+__decorateClass$11([
   decorators_js.query(".popup")
 ], SlPopup.prototype, "popup", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.query(".popup__arrow")
 ], SlPopup.prototype, "arrowEl", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property()
 ], SlPopup.prototype, "anchor", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Boolean, reflect: true })
 ], SlPopup.prototype, "active", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ reflect: true })
 ], SlPopup.prototype, "placement", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ reflect: true })
 ], SlPopup.prototype, "strategy", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Number })
 ], SlPopup.prototype, "distance", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Number })
 ], SlPopup.prototype, "skidding", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Boolean })
 ], SlPopup.prototype, "arrow", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "arrow-placement" })
 ], SlPopup.prototype, "arrowPlacement", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "arrow-padding", type: Number })
 ], SlPopup.prototype, "arrowPadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Boolean })
 ], SlPopup.prototype, "flip", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({
     attribute: "flip-fallback-placements",
     converter: {
@@ -1101,43 +1102,43 @@ __decorateClass$10([
     }
   })
 ], SlPopup.prototype, "flipFallbackPlacements", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "flip-fallback-strategy" })
 ], SlPopup.prototype, "flipFallbackStrategy", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Object })
 ], SlPopup.prototype, "flipBoundary", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "flip-padding", type: Number })
 ], SlPopup.prototype, "flipPadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Boolean })
 ], SlPopup.prototype, "shift", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Object })
 ], SlPopup.prototype, "shiftBoundary", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "shift-padding", type: Number })
 ], SlPopup.prototype, "shiftPadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "auto-size" })
 ], SlPopup.prototype, "autoSize", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property()
 ], SlPopup.prototype, "sync", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ type: Object })
 ], SlPopup.prototype, "autoSizeBoundary", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "auto-size-padding", type: Number })
 ], SlPopup.prototype, "autoSizePadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   decorators_js.property({ attribute: "hover-bridge", type: Boolean })
 ], SlPopup.prototype, "hoverBridge", 2);
 
 SlPopup.define("flow-ui-popup");
 
-const styles$Z = lit.css`
+const styles$_ = lit.css`
   ${componentStyles}
 
   :host {
@@ -1190,15 +1191,15 @@ const styles$Z = lit.css`
   }
 `;
 
-var __defProp$$ = Object.defineProperty;
-var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
-var __decorateClass$$ = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
+var __defProp$10 = Object.defineProperty;
+var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
+var __decorateClass$10 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$$(target, key, result);
+    __defProp$10(target, key, result);
   return result;
 };
 exports.FlowTooltip = class FlowTooltip extends FlowRdfElement {
@@ -1375,50 +1376,50 @@ exports.FlowTooltip = class FlowTooltip extends FlowRdfElement {
     `;
   }
 };
-exports.FlowTooltip.styles = styles$Z;
-__decorateClass$$([
+exports.FlowTooltip.styles = styles$_;
+__decorateClass$10([
   decorators_js.query("slot:not([name])")
 ], exports.FlowTooltip.prototype, "defaultSlot", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.query(".tooltip__body")
 ], exports.FlowTooltip.prototype, "body", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.query("flow-ui-popup")
 ], exports.FlowTooltip.prototype, "popup", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property()
 ], exports.FlowTooltip.prototype, "content", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property()
 ], exports.FlowTooltip.prototype, "placement", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowTooltip.prototype, "disabled", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property({ type: Number })
 ], exports.FlowTooltip.prototype, "distance", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowTooltip.prototype, "open", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property({ type: Number })
 ], exports.FlowTooltip.prototype, "skidding", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property()
 ], exports.FlowTooltip.prototype, "trigger", 2);
-__decorateClass$$([
+__decorateClass$10([
   decorators_js.property({ type: Boolean })
 ], exports.FlowTooltip.prototype, "hoist", 2);
-__decorateClass$$([
+__decorateClass$10([
   watch("open", { waitUntilFirstUpdate: true })
 ], exports.FlowTooltip.prototype, "handleOpenChange", 1);
-__decorateClass$$([
+__decorateClass$10([
   watch(["content", "distance", "hoist", "placement", "skidding"])
 ], exports.FlowTooltip.prototype, "handleOptionsChange", 1);
-__decorateClass$$([
+__decorateClass$10([
   watch("disabled")
 ], exports.FlowTooltip.prototype, "handleDisabledChange", 1);
-exports.FlowTooltip = __decorateClass$$([
+exports.FlowTooltip = __decorateClass$10([
   decorators_js.customElement("flow-ui-tooltip")
 ], exports.FlowTooltip);
 setDefaultAnimation("tooltip.show", {
@@ -1436,7 +1437,7 @@ setDefaultAnimation("tooltip.hide", {
   options: { duration: 150, easing: "ease" }
 });
 
-const styles$Y = lit.css`
+const styles$Z = lit.css`
   ${componentStyles}
 
   :host {
@@ -1512,15 +1513,15 @@ const styles$Y = lit.css`
 
 `;
 
-var __defProp$_ = Object.defineProperty;
-var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
-var __decorateClass$_ = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
+var __defProp$$ = Object.defineProperty;
+var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
+var __decorateClass$$ = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$_(target, key, result);
+    __defProp$$(target, key, result);
   return result;
 };
 class FlowIconButton extends FlowRdfElement {
@@ -1683,60 +1684,60 @@ class FlowIconButton extends FlowRdfElement {
     }
   }
 }
-FlowIconButton.styles = styles$Y;
-__decorateClass$_([
+FlowIconButton.styles = styles$Z;
+__decorateClass$$([
   decorators_js.query(".icon-button")
 ], FlowIconButton.prototype, "button", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.query(".icon-button__tooltip")
 ], FlowIconButton.prototype, "tooltipElem", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.query(".icon-button__confirm_button")
 ], FlowIconButton.prototype, "confirmButton", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.state()
 ], FlowIconButton.prototype, "hasFocus", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "name", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "library", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "src", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "href", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "target", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "download", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "label", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "tooltip", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property({ attribute: "tooltip-placement" })
 ], FlowIconButton.prototype, "tooltipPlacement", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property({ attribute: "tooltip-distance", type: Number })
 ], FlowIconButton.prototype, "tooltipDistance", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property({ attribute: "tooltip-skidding", type: Number })
 ], FlowIconButton.prototype, "tooltipSkidding", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowIconButton.prototype, "disabled", 2);
-__decorateClass$_([
+__decorateClass$$([
   decorators_js.property()
 ], FlowIconButton.prototype, "confirm", 2);
 
-const styles$X = lit.css`
+const styles$Y = lit.css`
   ${componentStyles}
 
   :host {
@@ -1831,15 +1832,15 @@ const styles$X = lit.css`
   }
 `;
 
-var __defProp$Z = Object.defineProperty;
-var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
-var __decorateClass$Z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
+var __defProp$_ = Object.defineProperty;
+var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
+var __decorateClass$_ = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$Z(target, key, result);
+    __defProp$_(target, key, result);
   return result;
 };
 const toastStack = Object.assign(document.createElement("div"), { className: "flow-ui-toast-stack" });
@@ -1974,26 +1975,26 @@ class FlowAlert extends FlowRdfElement {
     `;
   }
 }
-FlowAlert.styles = styles$X;
-__decorateClass$Z([
+FlowAlert.styles = styles$Y;
+__decorateClass$_([
   decorators_js.query('[part~="base"]')
 ], FlowAlert.prototype, "base", 2);
-__decorateClass$Z([
+__decorateClass$_([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowAlert.prototype, "open", 2);
-__decorateClass$Z([
+__decorateClass$_([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowAlert.prototype, "closable", 2);
-__decorateClass$Z([
+__decorateClass$_([
   decorators_js.property({ reflect: true })
 ], FlowAlert.prototype, "variant", 2);
-__decorateClass$Z([
+__decorateClass$_([
   decorators_js.property({ type: Number })
 ], FlowAlert.prototype, "duration", 2);
-__decorateClass$Z([
+__decorateClass$_([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowAlert.prototype, "handleOpenChange", 1);
-__decorateClass$Z([
+__decorateClass$_([
   watch("duration")
 ], FlowAlert.prototype, "handleDurationChange", 1);
 setDefaultAnimation("alert.show", {
@@ -2013,7 +2014,7 @@ setDefaultAnimation("alert.hide", {
 
 FlowAlert.define("flow-ui-alert");
 
-const styles$W = lit.css`
+const styles$X = lit.css`
   ${componentStyles}
 
   :host {
@@ -2028,15 +2029,15 @@ function getEasingNames() {
   return Object.entries(animations__namespace.easings).map(([name]) => name);
 }
 
-var __defProp$Y = Object.defineProperty;
-var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
-var __decorateClass$Y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
+var __defProp$Z = Object.defineProperty;
+var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
+var __decorateClass$Z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$Y(target, key, result);
+    __defProp$Z(target, key, result);
   return result;
 };
 class SlAnimation extends FlowRdfElement {
@@ -2164,47 +2165,47 @@ class SlAnimation extends FlowRdfElement {
     `;
   }
 }
-SlAnimation.styles = [componentStyles, styles$W];
-__decorateClass$Y([
+SlAnimation.styles = [componentStyles, styles$X];
+__decorateClass$Z([
   decorators_js.queryAsync("slot")
 ], SlAnimation.prototype, "defaultSlot", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property()
 ], SlAnimation.prototype, "name", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ type: Boolean, reflect: true })
 ], SlAnimation.prototype, "play", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ type: Number })
 ], SlAnimation.prototype, "delay", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property()
 ], SlAnimation.prototype, "direction", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ type: Number })
 ], SlAnimation.prototype, "duration", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property()
 ], SlAnimation.prototype, "easing", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ attribute: "end-delay", type: Number })
 ], SlAnimation.prototype, "endDelay", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property()
 ], SlAnimation.prototype, "fill", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ type: Number })
 ], SlAnimation.prototype, "iterations", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ attribute: "iteration-start", type: Number })
 ], SlAnimation.prototype, "iterationStart", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ attribute: false })
 ], SlAnimation.prototype, "keyframes", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   decorators_js.property({ attribute: "playback-rate", type: Number })
 ], SlAnimation.prototype, "playbackRate", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   watch([
     "name",
     "delay",
@@ -2218,16 +2219,16 @@ __decorateClass$Y([
     "keyframes"
   ])
 ], SlAnimation.prototype, "handleAnimationChange", 1);
-__decorateClass$Y([
+__decorateClass$Z([
   watch("play")
 ], SlAnimation.prototype, "handlePlayChange", 1);
-__decorateClass$Y([
+__decorateClass$Z([
   watch("playbackRate")
 ], SlAnimation.prototype, "handlePlaybackRateChange", 1);
 
 SlAnimation.define("flow-ui-animation");
 
-const styles$V = lit.css`
+const styles$W = lit.css`
   ${componentStyles}
 
   :host {
@@ -2293,15 +2294,15 @@ const styles$V = lit.css`
   }
 `;
 
-var __defProp$X = Object.defineProperty;
-var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
-var __decorateClass$X = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+var __defProp$Y = Object.defineProperty;
+var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
+var __decorateClass$Y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$X(target, key, result);
+    __defProp$Y(target, key, result);
   return result;
 };
 exports.FlowAvatar = class FlowAvatar extends FlowRdfElement {
@@ -2357,33 +2358,33 @@ exports.FlowAvatar = class FlowAvatar extends FlowRdfElement {
     `;
   }
 };
-exports.FlowAvatar.styles = styles$V;
-__decorateClass$X([
+exports.FlowAvatar.styles = styles$W;
+__decorateClass$Y([
   decorators_js.state()
 ], exports.FlowAvatar.prototype, "hasError", 2);
-__decorateClass$X([
+__decorateClass$Y([
   decorators_js.property()
 ], exports.FlowAvatar.prototype, "image", 2);
-__decorateClass$X([
+__decorateClass$Y([
   decorators_js.property()
 ], exports.FlowAvatar.prototype, "label", 2);
-__decorateClass$X([
+__decorateClass$Y([
   decorators_js.property()
 ], exports.FlowAvatar.prototype, "initials", 2);
-__decorateClass$X([
+__decorateClass$Y([
   decorators_js.property()
 ], exports.FlowAvatar.prototype, "loading", 2);
-__decorateClass$X([
+__decorateClass$Y([
   decorators_js.property({ reflect: true, type: String })
 ], exports.FlowAvatar.prototype, "shape", 2);
-__decorateClass$X([
+__decorateClass$Y([
   watch("image")
 ], exports.FlowAvatar.prototype, "handleImageChange", 1);
-exports.FlowAvatar = __decorateClass$X([
+exports.FlowAvatar = __decorateClass$Y([
   decorators_js.customElement("flow-ui-avatar")
 ], exports.FlowAvatar);
 
-const styles$U = lit.css`
+const styles$V = lit.css`
   ${componentStyles}
 
   :host {
@@ -2475,15 +2476,15 @@ const styles$U = lit.css`
   }
 `;
 
-var __defProp$W = Object.defineProperty;
-var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
-var __decorateClass$W = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
+var __defProp$X = Object.defineProperty;
+var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
+var __decorateClass$X = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$W(target, key, result);
+    __defProp$X(target, key, result);
   return result;
 };
 exports.FlowBadge = class FlowBadge extends FlowRdfElement {
@@ -2512,21 +2513,21 @@ exports.FlowBadge = class FlowBadge extends FlowRdfElement {
     `;
   }
 };
-exports.FlowBadge.styles = styles$U;
-__decorateClass$W([
+exports.FlowBadge.styles = styles$V;
+__decorateClass$X([
   decorators_js.property({ reflect: true })
 ], exports.FlowBadge.prototype, "variant", 2);
-__decorateClass$W([
+__decorateClass$X([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowBadge.prototype, "pill", 2);
-__decorateClass$W([
+__decorateClass$X([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowBadge.prototype, "pulse", 2);
-exports.FlowBadge = __decorateClass$W([
+exports.FlowBadge = __decorateClass$X([
   decorators_js.customElement("flow-ui-badge")
 ], exports.FlowBadge);
 
-const styles$T = lit.css`
+const styles$U = lit.css`
   ${componentStyles}
 
   :host {
@@ -2612,15 +2613,15 @@ const styles$T = lit.css`
   }
 `;
 
-var __defProp$V = Object.defineProperty;
-var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
-var __decorateClass$V = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
+var __defProp$W = Object.defineProperty;
+var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
+var __decorateClass$W = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$V(target, key, result);
+    __defProp$W(target, key, result);
   return result;
 };
 exports.FlowBreadcrumbItem = class FlowBreadcrumbItem extends FlowRdfElement {
@@ -2665,21 +2666,21 @@ exports.FlowBreadcrumbItem = class FlowBreadcrumbItem extends FlowRdfElement {
     `;
   }
 };
-exports.FlowBreadcrumbItem.styles = styles$T;
-__decorateClass$V([
+exports.FlowBreadcrumbItem.styles = styles$U;
+__decorateClass$W([
   decorators_js.property()
 ], exports.FlowBreadcrumbItem.prototype, "href", 2);
-__decorateClass$V([
+__decorateClass$W([
   decorators_js.property()
 ], exports.FlowBreadcrumbItem.prototype, "target", 2);
-__decorateClass$V([
+__decorateClass$W([
   decorators_js.property()
 ], exports.FlowBreadcrumbItem.prototype, "rel", 2);
-exports.FlowBreadcrumbItem = __decorateClass$V([
+exports.FlowBreadcrumbItem = __decorateClass$W([
   decorators_js.customElement("flow-ui-breadcrumb-item")
 ], exports.FlowBreadcrumbItem);
 
-const styles$S = lit.css`
+const styles$T = lit.css`
   ${componentStyles}
 
   .breadcrumb {
@@ -2689,15 +2690,15 @@ const styles$S = lit.css`
   }
 `;
 
-var __defProp$U = Object.defineProperty;
-var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
-var __decorateClass$U = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(target, key) : target;
+var __defProp$V = Object.defineProperty;
+var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
+var __decorateClass$V = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$U(target, key, result);
+    __defProp$V(target, key, result);
   return result;
 };
 exports.FlowBreadcrumb = class FlowBreadcrumb extends FlowRdfElement {
@@ -2753,21 +2754,21 @@ exports.FlowBreadcrumb = class FlowBreadcrumb extends FlowRdfElement {
     `;
   }
 };
-exports.FlowBreadcrumb.styles = styles$S;
-__decorateClass$U([
+exports.FlowBreadcrumb.styles = styles$T;
+__decorateClass$V([
   decorators_js.query("slot")
 ], exports.FlowBreadcrumb.prototype, "defaultSlot", 2);
-__decorateClass$U([
+__decorateClass$V([
   decorators_js.query('slot[name="separator"]')
 ], exports.FlowBreadcrumb.prototype, "separatorSlot", 2);
-__decorateClass$U([
+__decorateClass$V([
   decorators_js.property()
 ], exports.FlowBreadcrumb.prototype, "label", 2);
-exports.FlowBreadcrumb = __decorateClass$U([
+exports.FlowBreadcrumb = __decorateClass$V([
   decorators_js.customElement("flow-ui-breadcrumb")
 ], exports.FlowBreadcrumb);
 
-const styles$R = lit.css`
+const styles$S = lit.css`
   ${componentStyles}
 
   :host {
@@ -2784,15 +2785,15 @@ const styles$R = lit.css`
   }
 `;
 
-var __defProp$T = Object.defineProperty;
-var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
-var __decorateClass$T = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(target, key) : target;
+var __defProp$U = Object.defineProperty;
+var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
+var __decorateClass$U = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$T(target, key, result);
+    __defProp$U(target, key, result);
   return result;
 };
 exports.FlowButtonGroup = class FlowButtonGroup extends FlowRdfElement {
@@ -2855,23 +2856,23 @@ exports.FlowButtonGroup = class FlowButtonGroup extends FlowRdfElement {
     `;
   }
 };
-exports.FlowButtonGroup.styles = styles$R;
-__decorateClass$T([
+exports.FlowButtonGroup.styles = styles$S;
+__decorateClass$U([
   decorators_js.query("slot")
 ], exports.FlowButtonGroup.prototype, "defaultSlot", 2);
-__decorateClass$T([
+__decorateClass$U([
   decorators_js.state()
 ], exports.FlowButtonGroup.prototype, "disableRole", 2);
-__decorateClass$T([
+__decorateClass$U([
   decorators_js.property()
 ], exports.FlowButtonGroup.prototype, "label", 2);
-__decorateClass$T([
+__decorateClass$U([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowButtonGroup.prototype, "vertical", 2);
-__decorateClass$T([
+__decorateClass$U([
   watch("vertical", { waitUntilFirstUpdate: true })
 ], exports.FlowButtonGroup.prototype, "handleVerticalChange", 1);
-exports.FlowButtonGroup = __decorateClass$T([
+exports.FlowButtonGroup = __decorateClass$U([
   decorators_js.customElement("flow-ui-button-group")
 ], exports.FlowButtonGroup);
 function findButton(el) {
@@ -3142,7 +3143,7 @@ const customErrorValidityState = Object.freeze({
   customError: true
 });
 
-const styles$Q = lit.css`
+const styles$R = lit.css`
   ${componentStyles}
 
   :host {
@@ -3202,15 +3203,15 @@ const styles$Q = lit.css`
   }
 `;
 
-var __defProp$S = Object.defineProperty;
-var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
-var __decorateClass$S = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
+var __defProp$T = Object.defineProperty;
+var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
+var __decorateClass$T = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$S(target, key, result);
+    __defProp$T(target, key, result);
   return result;
 };
 exports.FlowSpinner = class FlowSpinner extends FlowRdfElement {
@@ -3227,8 +3228,8 @@ exports.FlowSpinner = class FlowSpinner extends FlowRdfElement {
     `;
   }
 };
-exports.FlowSpinner.styles = styles$Q;
-exports.FlowSpinner = __decorateClass$S([
+exports.FlowSpinner.styles = styles$R;
+exports.FlowSpinner = __decorateClass$T([
   decorators_js.customElement("flow-ui-spinner")
 ], exports.FlowSpinner);
 
@@ -3909,15 +3910,15 @@ const buttonStyles = lit.css`
   }
 `;
 
-var __defProp$R = Object.defineProperty;
-var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
+var __defProp$S = Object.defineProperty;
+var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
+var __decorateClass$S = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$R(target, key, result);
+    __defProp$S(target, key, result);
   return result;
 };
 let FlowButton$1 = class FlowButton extends FlowRdfElement {
@@ -4121,88 +4122,88 @@ let FlowButton$1 = class FlowButton extends FlowRdfElement {
   }
 };
 FlowButton$1.styles = buttonStyles;
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.query(".button")
 ], FlowButton$1.prototype, "button", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.state()
 ], FlowButton$1.prototype, "hasFocus", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.state()
 ], FlowButton$1.prototype, "invalid", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "title", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ reflect: true })
 ], FlowButton$1.prototype, "variant", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ reflect: true })
 ], FlowButton$1.prototype, "size", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "caret", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "disabled", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "loading", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "outline", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "pill", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ type: Boolean, reflect: true, attribute: "fab-circle" })
 ], FlowButton$1.prototype, "fabCircle", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ type: Boolean, reflect: true, attribute: "fab-square" })
 ], FlowButton$1.prototype, "fabSquare", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "type", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "name", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "value", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "href", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "target", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "rel", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "download", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property()
 ], FlowButton$1.prototype, "form", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ attribute: "formaction" })
 ], FlowButton$1.prototype, "formAction", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ attribute: "formenctype" })
 ], FlowButton$1.prototype, "formEnctype", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ attribute: "formmethod" })
 ], FlowButton$1.prototype, "formMethod", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ attribute: "formnovalidate", type: Boolean })
 ], FlowButton$1.prototype, "formNoValidate", 2);
-__decorateClass$R([
+__decorateClass$S([
   decorators_js.property({ attribute: "formtarget" })
 ], FlowButton$1.prototype, "formTarget", 2);
-__decorateClass$R([
+__decorateClass$S([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowButton$1.prototype, "handleDisabledChange", 1);
-FlowButton$1 = __decorateClass$R([
+FlowButton$1 = __decorateClass$S([
   decorators_js.customElement("flow-ui-button")
 ], FlowButton$1);
 
@@ -4223,7 +4224,7 @@ const isNumber = (val) => typeof val === "number" && !Number.isNaN(val) && Numbe
 const isNumeric = (val) => isString(val) && /^[+-]?([0-9]*[.])?[0-9]+$/.test(val);
 const isFunction = (val) => typeof val === "function";
 
-const styles$P = lit.css`
+const styles$Q = lit.css`
   ${componentStyles}
 
   :host {
@@ -4360,15 +4361,15 @@ const styles$P = lit.css`
   }
 `;
 
-var __defProp$Q = Object.defineProperty;
-var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
+var __defProp$R = Object.defineProperty;
+var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
+var __decorateClass$R = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$Q(target, key, result);
+    __defProp$R(target, key, result);
   return result;
 };
 class FlowCalendar extends FlowRdfElement {
@@ -4632,44 +4633,44 @@ class FlowCalendar extends FlowRdfElement {
     `;
   }
 }
-FlowCalendar.styles = styles$P;
-__decorateClass$Q([
+FlowCalendar.styles = styles$Q;
+__decorateClass$R([
   decorators_js.query(".calendar__month-select")
 ], FlowCalendar.prototype, "_monthSelect", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.query(".calendar__year-select")
 ], FlowCalendar.prototype, "_yearSelect", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.state()
 ], FlowCalendar.prototype, "_displayDate", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.state()
 ], FlowCalendar.prototype, "_selectedDate", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.property({ reflect: true })
 ], FlowCalendar.prototype, "value", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.property({ attribute: "display-mode" })
 ], FlowCalendar.prototype, "displayMode", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.property()
 ], FlowCalendar.prototype, "timezone", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.property()
 ], FlowCalendar.prototype, "locale", 2);
-__decorateClass$Q([
+__decorateClass$R([
   decorators_js.property()
 ], FlowCalendar.prototype, "size", 2);
-__decorateClass$Q([
+__decorateClass$R([
   watch("value")
 ], FlowCalendar.prototype, "handleValueChange", 1);
-__decorateClass$Q([
+__decorateClass$R([
   watch(["timezone"])
 ], FlowCalendar.prototype, "handleTimezoneChange", 1);
 
 FlowCalendar.define("flow-ui-calendar");
 
-const styles$O = lit.css`
+const styles$P = lit.css`
   ${componentStyles}
 
   :host {
@@ -4738,15 +4739,15 @@ const styles$O = lit.css`
   }
 `;
 
-var __defProp$P = Object.defineProperty;
-var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
+var __defProp$Q = Object.defineProperty;
+var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
+var __decorateClass$Q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$P(target, key, result);
+    __defProp$Q(target, key, result);
   return result;
 };
 exports.FlowCard = class FlowCard extends FlowRdfElement {
@@ -4773,12 +4774,12 @@ exports.FlowCard = class FlowCard extends FlowRdfElement {
     `;
   }
 };
-exports.FlowCard.styles = styles$O;
-exports.FlowCard = __decorateClass$P([
+exports.FlowCard.styles = styles$P;
+exports.FlowCard = __decorateClass$Q([
   decorators_js.customElement("flow-ui-card")
 ], exports.FlowCard);
 
-const styles$N = lit.css`
+const styles$O = lit.css`
   ${componentStyles}
 
   :host {
@@ -4802,15 +4803,15 @@ const styles$N = lit.css`
   }
 `;
 
-var __defProp$O = Object.defineProperty;
-var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
+var __defProp$P = Object.defineProperty;
+var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$O(target, key, result);
+    __defProp$P(target, key, result);
   return result;
 };
 exports.FlowCarouselItem = class FlowCarouselItem extends FlowRdfElement {
@@ -4825,8 +4826,8 @@ exports.FlowCarouselItem = class FlowCarouselItem extends FlowRdfElement {
     return lit.html` <slot></slot> `;
   }
 };
-exports.FlowCarouselItem.styles = styles$N;
-exports.FlowCarouselItem = __decorateClass$O([
+exports.FlowCarouselItem.styles = styles$O;
+exports.FlowCarouselItem = __decorateClass$P([
   decorators_js.customElement("flow-ui-carousel-item")
 ], exports.FlowCarouselItem);
 
@@ -4896,7 +4897,7 @@ class AutoplayController {
   }
 }
 
-const styles$M = lit.css`
+const styles$N = lit.css`
   ${componentStyles}
 
   :host {
@@ -5067,15 +5068,15 @@ const debounce = (delay) => {
   };
 };
 
-var __defProp$N = Object.defineProperty;
-var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
+var __defProp$O = Object.defineProperty;
+var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
+var __decorateClass$O = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$N(target, key, result);
+    __defProp$O(target, key, result);
   return result;
 };
 class ScrollController {
@@ -5206,19 +5207,19 @@ class ScrollController {
     host.requestUpdate();
   }
 }
-__decorateClass$N([
+__decorateClass$O([
   debounce(100)
 ], ScrollController.prototype, "handleScrollEnd", 1);
 
-var __defProp$M = Object.defineProperty;
-var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
-var __decorateClass$M = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
+var __defProp$N = Object.defineProperty;
+var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
+var __decorateClass$N = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$M(target, key, result);
+    __defProp$N(target, key, result);
   return result;
 };
 exports.FlowCarousel = class FlowCarousel extends FlowRdfElement {
@@ -5537,67 +5538,67 @@ exports.FlowCarousel = class FlowCarousel extends FlowRdfElement {
     `;
   }
 };
-exports.FlowCarousel.styles = styles$M;
-__decorateClass$M([
+exports.FlowCarousel.styles = styles$N;
+__decorateClass$N([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCarousel.prototype, "loop", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCarousel.prototype, "navigation", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCarousel.prototype, "pagination", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCarousel.prototype, "autoplay", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property({ type: Number, attribute: "autoplay-interval" })
 ], exports.FlowCarousel.prototype, "autoplayInterval", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property({ type: Number, attribute: "slides-per-page" })
 ], exports.FlowCarousel.prototype, "slidesPerPage", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property({ type: Number, attribute: "slides-per-move" })
 ], exports.FlowCarousel.prototype, "slidesPerMove", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property()
 ], exports.FlowCarousel.prototype, "orientation", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.property({ type: Boolean, reflect: true, attribute: "mouse-dragging" })
 ], exports.FlowCarousel.prototype, "mouseDragging", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.query("slot:not([name])")
 ], exports.FlowCarousel.prototype, "defaultSlot", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.query(".carousel__slides")
 ], exports.FlowCarousel.prototype, "scrollContainer", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.query(".carousel__pagination")
 ], exports.FlowCarousel.prototype, "paginationContainer", 2);
-__decorateClass$M([
+__decorateClass$N([
   decorators_js.state()
 ], exports.FlowCarousel.prototype, "activeSlide", 2);
-__decorateClass$M([
+__decorateClass$N([
   watch("loop", { waitUntilFirstUpdate: true }),
   watch("slidesPerPage", { waitUntilFirstUpdate: true })
 ], exports.FlowCarousel.prototype, "initializeSlides", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("activeSlide")
 ], exports.FlowCarousel.prototype, "handelSlideChange", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("slidesPerMove")
 ], exports.FlowCarousel.prototype, "handleSlidesPerMoveChange", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("autoplay")
 ], exports.FlowCarousel.prototype, "handleAutoplayChange", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("mouseDragging")
 ], exports.FlowCarousel.prototype, "handleMouseDraggingChange", 1);
-exports.FlowCarousel = __decorateClass$M([
+exports.FlowCarousel = __decorateClass$N([
   decorators_js.customElement("flow-ui-carousel")
 ], exports.FlowCarousel);
 
-const styles$L = lit.css`
+const styles$M = lit.css`
   ${componentStyles}
 
   :host {
@@ -6052,15 +6053,15 @@ function registerChartComponent(...components) {
   chart_js.Chart.register(...components);
 }
 
-var __defProp$L = Object.defineProperty;
-var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+var __defProp$M = Object.defineProperty;
+var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
+var __decorateClass$M = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$L(target, key, result);
+    __defProp$M(target, key, result);
   return result;
 };
 class FlowChart extends FlowRdfElement {
@@ -6107,20 +6108,20 @@ class FlowChart extends FlowRdfElement {
     `;
   }
 }
-FlowChart.styles = styles$L;
-__decorateClass$L([
+FlowChart.styles = styles$M;
+__decorateClass$M([
   decorators_js.property()
 ], FlowChart.prototype, "type", 2);
-__decorateClass$L([
+__decorateClass$M([
   decorators_js.property({ type: Object })
 ], FlowChart.prototype, "options", 2);
-__decorateClass$L([
+__decorateClass$M([
   decorators_js.property({ type: Object })
 ], FlowChart.prototype, "data", 2);
-__decorateClass$L([
+__decorateClass$M([
   decorators_js.property({ type: Array })
 ], FlowChart.prototype, "plugins", 2);
-__decorateClass$L([
+__decorateClass$M([
   watch(["options", "data"], { waitUntilFirstUpdate: true })
 ], FlowChart.prototype, "repaint", 1);
 
@@ -6144,7 +6145,7 @@ const defaultValue = (propertyName = "value") => (proto, key) => {
   };
 };
 
-const styles$K = lit.css`
+const styles$L = lit.css`
   ${componentStyles}
 
   :host {
@@ -6261,15 +6262,15 @@ const styles$K = lit.css`
   }
 `;
 
-var __defProp$K = Object.defineProperty;
-var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
+var __defProp$L = Object.defineProperty;
+var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
+var __decorateClass$L = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$K(target, key, result);
+    __defProp$L(target, key, result);
   return result;
 };
 exports.FlowCheckbox = class FlowCheckbox extends FlowRdfElement {
@@ -6427,50 +6428,50 @@ exports.FlowCheckbox = class FlowCheckbox extends FlowRdfElement {
     `;
   }
 };
-exports.FlowCheckbox.styles = styles$K;
-__decorateClass$K([
+exports.FlowCheckbox.styles = styles$L;
+__decorateClass$L([
   decorators_js.query('input[type="checkbox"]')
 ], exports.FlowCheckbox.prototype, "input", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.state()
 ], exports.FlowCheckbox.prototype, "hasFocus", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property()
 ], exports.FlowCheckbox.prototype, "title", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property()
 ], exports.FlowCheckbox.prototype, "name", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property()
 ], exports.FlowCheckbox.prototype, "value", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property({ reflect: true })
 ], exports.FlowCheckbox.prototype, "size", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCheckbox.prototype, "disabled", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCheckbox.prototype, "checked", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCheckbox.prototype, "indeterminate", 2);
-__decorateClass$K([
+__decorateClass$L([
   defaultValue("checked")
 ], exports.FlowCheckbox.prototype, "defaultChecked", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property({ reflect: true })
 ], exports.FlowCheckbox.prototype, "form", 2);
-__decorateClass$K([
+__decorateClass$L([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowCheckbox.prototype, "required", 2);
-__decorateClass$K([
+__decorateClass$L([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], exports.FlowCheckbox.prototype, "handleDisabledChange", 1);
-__decorateClass$K([
+__decorateClass$L([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], exports.FlowCheckbox.prototype, "handleStateChange", 1);
-exports.FlowCheckbox = __decorateClass$K([
+exports.FlowCheckbox = __decorateClass$L([
   decorators_js.customElement("flow-ui-checkbox")
 ], exports.FlowCheckbox);
 
@@ -6551,7 +6552,7 @@ function getTabbableBoundary(root) {
   return { start, end };
 }
 
-const styles$J = lit.css`
+const styles$K = lit.css`
   ${componentStyles}
 
   :host {
@@ -6603,15 +6604,15 @@ const styles$J = lit.css`
   }
 `;
 
-var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+var __defProp$K = Object.defineProperty;
+var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$J(target, key, result);
+    __defProp$K(target, key, result);
   return result;
 };
 class SlDropdown extends FlowRdfElement {
@@ -6882,45 +6883,45 @@ class SlDropdown extends FlowRdfElement {
     `;
   }
 }
-SlDropdown.styles = [componentStyles, styles$J];
+SlDropdown.styles = [componentStyles, styles$K];
 SlDropdown.dependencies = { "flow-ui-popup": SlPopup };
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.query(".dropdown")
 ], SlDropdown.prototype, "popup", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.query(".dropdown__trigger")
 ], SlDropdown.prototype, "trigger", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.query(".dropdown__panel")
 ], SlDropdown.prototype, "panel", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ type: Boolean, reflect: true })
 ], SlDropdown.prototype, "open", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ reflect: true })
 ], SlDropdown.prototype, "placement", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ type: Boolean, reflect: true })
 ], SlDropdown.prototype, "disabled", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
 ], SlDropdown.prototype, "stayOpenOnSelect", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ attribute: false })
 ], SlDropdown.prototype, "containingElement", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ type: Number })
 ], SlDropdown.prototype, "distance", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ type: Number })
 ], SlDropdown.prototype, "skidding", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ type: Boolean })
 ], SlDropdown.prototype, "hoist", 2);
-__decorateClass$J([
+__decorateClass$K([
   decorators_js.property({ reflect: true })
 ], SlDropdown.prototype, "sync", 2);
-__decorateClass$J([
+__decorateClass$K([
   watch("open", { waitUntilFirstUpdate: true })
 ], SlDropdown.prototype, "handleOpenChange", 1);
 setDefaultAnimation("dropdown.show", {
@@ -7000,7 +7001,7 @@ const formControlStyles = lit.css`
   }
 `;
 
-const styles$I = lit.css`
+const styles$J = lit.css`
   ${componentStyles}
   ${formControlStyles}
 
@@ -7305,15 +7306,15 @@ const styles$I = lit.css`
   }
 `;
 
-var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+var __defProp$J = Object.defineProperty;
+var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$I(target, key, result);
+    __defProp$J(target, key, result);
   return result;
 };
 class FlowInput extends FlowRdfElement {
@@ -7660,104 +7661,104 @@ class FlowInput extends FlowRdfElement {
     `;
   }
 }
-FlowInput.styles = styles$I;
-__decorateClass$I([
+FlowInput.styles = styles$J;
+__decorateClass$J([
   decorators_js.query(".input__control")
 ], FlowInput.prototype, "input", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.state()
 ], FlowInput.prototype, "hasFocus", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "title", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ reflect: true })
 ], FlowInput.prototype, "type", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "name", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "value", 2);
-__decorateClass$I([
+__decorateClass$J([
   defaultValue()
 ], FlowInput.prototype, "defaultValue", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ reflect: true })
 ], FlowInput.prototype, "size", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "filled", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "pill", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "label", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ attribute: "help-text" })
 ], FlowInput.prototype, "helpText", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Boolean })
 ], FlowInput.prototype, "clearable", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "disabled", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "placeholder", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "readonly", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ attribute: "password-toggle", type: Boolean })
 ], FlowInput.prototype, "passwordToggle", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ attribute: "password-visible", type: Boolean })
 ], FlowInput.prototype, "passwordVisible", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ attribute: "no-spin-buttons", type: Boolean })
 ], FlowInput.prototype, "noSpinButtons", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ reflect: true })
 ], FlowInput.prototype, "form", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "required", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "pattern", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Number })
 ], FlowInput.prototype, "minlength", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Number })
 ], FlowInput.prototype, "maxlength", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "min", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "max", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "step", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "autocapitalize", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "autocorrect", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "autocomplete", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({ type: Boolean })
 ], FlowInput.prototype, "autofocus", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "enterkeyhint", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property({
     type: Boolean,
     converter: {
@@ -7767,22 +7768,22 @@ __decorateClass$I([
     }
   })
 ], FlowInput.prototype, "spellcheck", 2);
-__decorateClass$I([
+__decorateClass$J([
   decorators_js.property()
 ], FlowInput.prototype, "inputmode", 2);
-__decorateClass$I([
+__decorateClass$J([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowInput.prototype, "handleDisabledChange", 1);
-__decorateClass$I([
+__decorateClass$J([
   watch("step", { waitUntilFirstUpdate: true })
 ], FlowInput.prototype, "handleStepChange", 1);
-__decorateClass$I([
+__decorateClass$J([
   watch("value", { waitUntilFirstUpdate: true })
 ], FlowInput.prototype, "handleValueChange", 1);
 
 FlowInput.define("flow-ui-input");
 
-const styles$H = lit.css`
+const styles$I = lit.css`
   ${componentStyles}
 
   :host(:not(:focus-within)) {
@@ -7798,15 +7799,15 @@ const styles$H = lit.css`
   }
 `;
 
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$H(target, key, result);
+    __defProp$I(target, key, result);
   return result;
 };
 exports.FlowVisuallyHidden = class FlowVisuallyHidden extends FlowRdfElement {
@@ -7814,12 +7815,12 @@ exports.FlowVisuallyHidden = class FlowVisuallyHidden extends FlowRdfElement {
     return lit.html` <slot></slot> `;
   }
 };
-exports.FlowVisuallyHidden.styles = styles$H;
-exports.FlowVisuallyHidden = __decorateClass$H([
+exports.FlowVisuallyHidden.styles = styles$I;
+exports.FlowVisuallyHidden = __decorateClass$I([
   decorators_js.customElement("flow-ui-visually-hidden")
 ], exports.FlowVisuallyHidden);
 
-const styles$G = lit.css`
+const styles$H = lit.css`
   ${componentStyles}
 
   :host {
@@ -8152,15 +8153,15 @@ const styles$G = lit.css`
   }
 `;
 
-var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$G(target, key, result);
+    __defProp$H(target, key, result);
   return result;
 };
 const hasEyeDropper = "EyeDropper" in window;
@@ -8944,114 +8945,114 @@ exports.FlowColorPicker = class FlowColorPicker extends FlowRdfElement {
     `;
   }
 };
-exports.FlowColorPicker.styles = styles$G;
-__decorateClass$G([
+exports.FlowColorPicker.styles = styles$H;
+__decorateClass$H([
   decorators_js.query('[part~="base"]')
 ], exports.FlowColorPicker.prototype, "base", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.query('[part~="input"]')
 ], exports.FlowColorPicker.prototype, "input", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.query(".color-dropdown")
 ], exports.FlowColorPicker.prototype, "dropdown", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.query('[part~="preview"]')
 ], exports.FlowColorPicker.prototype, "previewButton", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.query('[part~="trigger"]')
 ], exports.FlowColorPicker.prototype, "trigger", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "hasFocus", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "isDraggingGridHandle", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "isEmpty", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "inputValue", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "hue", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "saturation", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "brightness", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.state()
 ], exports.FlowColorPicker.prototype, "alpha", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property()
 ], exports.FlowColorPicker.prototype, "value", 2);
-__decorateClass$G([
+__decorateClass$H([
   defaultValue()
 ], exports.FlowColorPicker.prototype, "defaultValue", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property()
 ], exports.FlowColorPicker.prototype, "label", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property()
 ], exports.FlowColorPicker.prototype, "format", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowColorPicker.prototype, "inline", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ reflect: true })
 ], exports.FlowColorPicker.prototype, "size", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ attribute: "no-format-toggle", type: Boolean })
 ], exports.FlowColorPicker.prototype, "noFormatToggle", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property()
 ], exports.FlowColorPicker.prototype, "name", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowColorPicker.prototype, "disabled", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ reflect: true })
 ], exports.FlowColorPicker.prototype, "placement", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Number })
 ], exports.FlowColorPicker.prototype, "distance", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Number })
 ], exports.FlowColorPicker.prototype, "skidding", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Boolean })
 ], exports.FlowColorPicker.prototype, "hoist", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Boolean })
 ], exports.FlowColorPicker.prototype, "opacity", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Boolean })
 ], exports.FlowColorPicker.prototype, "uppercase", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property()
 ], exports.FlowColorPicker.prototype, "swatches", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ reflect: true })
 ], exports.FlowColorPicker.prototype, "form", 2);
-__decorateClass$G([
+__decorateClass$H([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowColorPicker.prototype, "required", 2);
-__decorateClass$G([
+__decorateClass$H([
   watch("format", { waitUntilFirstUpdate: true })
 ], exports.FlowColorPicker.prototype, "handleFormatChange", 1);
-__decorateClass$G([
+__decorateClass$H([
   watch("opacity", { waitUntilFirstUpdate: true })
 ], exports.FlowColorPicker.prototype, "handleOpacityChange", 1);
-__decorateClass$G([
+__decorateClass$H([
   watch("value")
 ], exports.FlowColorPicker.prototype, "handleValueChange", 1);
-exports.FlowColorPicker = __decorateClass$G([
+exports.FlowColorPicker = __decorateClass$H([
   decorators_js.customElement("flow-ui-color-picker")
 ], exports.FlowColorPicker);
 
-const styles$F = lit.css`
+const styles$G = lit.css`
   ${componentStyles}
 
   :host {
@@ -9167,15 +9168,15 @@ const styles$F = lit.css`
   }
 `;
 
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$F(target, key, result);
+    __defProp$G(target, key, result);
   return result;
 };
 class FlowTag extends FlowRdfElement {
@@ -9230,24 +9231,24 @@ class FlowTag extends FlowRdfElement {
     `;
   }
 }
-FlowTag.styles = styles$F;
+FlowTag.styles = styles$G;
 FlowTag.dependencies = { "flow-icon-button": FlowIconButton };
-__decorateClass$F([
+__decorateClass$G([
   decorators_js.property({ reflect: true })
 ], FlowTag.prototype, "variant", 2);
-__decorateClass$F([
+__decorateClass$G([
   decorators_js.property({ reflect: true })
 ], FlowTag.prototype, "size", 2);
-__decorateClass$F([
+__decorateClass$G([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowTag.prototype, "pill", 2);
-__decorateClass$F([
+__decorateClass$G([
   decorators_js.property({ type: Boolean })
 ], FlowTag.prototype, "removable", 2);
 
 FlowTag.define("flow-ui-tag");
 
-const styles$E = lit.css`
+const styles$F = lit.css`
   ${componentStyles}
   ${formControlStyles}
 
@@ -9502,15 +9503,15 @@ const styles$E = lit.css`
   }
 `;
 
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$E(target, key, result);
+    __defProp$F(target, key, result);
   return result;
 };
 const popupOptions = {
@@ -9903,98 +9904,98 @@ class FlowDatetimePicker extends FlowRdfElement {
     `;
   }
 }
-FlowDatetimePicker.styles = styles$E;
-__decorateClass$E([
+FlowDatetimePicker.styles = styles$F;
+__decorateClass$F([
   decorators_js.query(".datepicker")
 ], FlowDatetimePicker.prototype, "popup", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.query(".datepicker__combobox")
 ], FlowDatetimePicker.prototype, "combobox", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.query(".datepicker__display-input")
 ], FlowDatetimePicker.prototype, "displayInput", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.query(".datepicker__value-input")
 ], FlowDatetimePicker.prototype, "valueInput", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.query(".datepicker__calendar-container")
 ], FlowDatetimePicker.prototype, "calendarContainer", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.state()
 ], FlowDatetimePicker.prototype, "hasFocus", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.state()
 ], FlowDatetimePicker.prototype, "displayLabel", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "name", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ reflect: true })
 ], FlowDatetimePicker.prototype, "value", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ attribute: "display-mode" })
 ], FlowDatetimePicker.prototype, "displayMode", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "format", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "timezone", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "locale", 2);
-__decorateClass$E([
+__decorateClass$F([
   defaultValue()
 ], FlowDatetimePicker.prototype, "defaultValue", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ reflect: true })
 ], FlowDatetimePicker.prototype, "size", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "placeholder", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "disabled", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ type: Boolean })
 ], FlowDatetimePicker.prototype, "clearable", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "open", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ type: Boolean })
 ], FlowDatetimePicker.prototype, "hoist", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "filled", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "pill", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property()
 ], FlowDatetimePicker.prototype, "label", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ reflect: true })
 ], FlowDatetimePicker.prototype, "placement", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ attribute: "help-text" })
 ], FlowDatetimePicker.prototype, "helpText", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ reflect: true })
 ], FlowDatetimePicker.prototype, "form", 2);
-__decorateClass$E([
+__decorateClass$F([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "required", 2);
-__decorateClass$E([
+__decorateClass$F([
   watch(["value", "format", "timezone", "locale"])
 ], FlowDatetimePicker.prototype, "updateDisplayLabel", 1);
-__decorateClass$E([
+__decorateClass$F([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowDatetimePicker.prototype, "handleDisabledChange", 1);
-__decorateClass$E([
+__decorateClass$F([
   watch("value", { waitUntilFirstUpdate: true })
 ], FlowDatetimePicker.prototype, "handleValueChange", 1);
-__decorateClass$E([
+__decorateClass$F([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDatetimePicker.prototype, "handleOpenChange", 1);
 setDefaultAnimation("datetimepicker.show", {
@@ -10014,7 +10015,7 @@ setDefaultAnimation("datetimepicker.hide", {
 
 FlowDatetimePicker.define("flow-ui-date-time-picker");
 
-const styles$D = lit.css`
+const styles$E = lit.css`
   ${componentStyles}
 
   :host {
@@ -10095,15 +10096,15 @@ const styles$D = lit.css`
   }
 `;
 
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$D(target, key, result);
+    __defProp$E(target, key, result);
   return result;
 };
 exports.FlowDetails = class FlowDetails extends FlowRdfElement {
@@ -10231,32 +10232,32 @@ exports.FlowDetails = class FlowDetails extends FlowRdfElement {
     `;
   }
 };
-exports.FlowDetails.styles = styles$D;
-__decorateClass$D([
+exports.FlowDetails.styles = styles$E;
+__decorateClass$E([
   decorators_js.query(".details")
 ], exports.FlowDetails.prototype, "details", 2);
-__decorateClass$D([
+__decorateClass$E([
   decorators_js.query(".details__header")
 ], exports.FlowDetails.prototype, "header", 2);
-__decorateClass$D([
+__decorateClass$E([
   decorators_js.query(".details__body")
 ], exports.FlowDetails.prototype, "body", 2);
-__decorateClass$D([
+__decorateClass$E([
   decorators_js.query(".details__expand-icon-slot")
 ], exports.FlowDetails.prototype, "expandIconSlot", 2);
-__decorateClass$D([
+__decorateClass$E([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowDetails.prototype, "open", 2);
-__decorateClass$D([
+__decorateClass$E([
   decorators_js.property()
 ], exports.FlowDetails.prototype, "summary", 2);
-__decorateClass$D([
+__decorateClass$E([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowDetails.prototype, "disabled", 2);
-__decorateClass$D([
+__decorateClass$E([
   watch("open", { waitUntilFirstUpdate: true })
 ], exports.FlowDetails.prototype, "handleOpenChange", 1);
-exports.FlowDetails = __decorateClass$D([
+exports.FlowDetails = __decorateClass$E([
   decorators_js.customElement("flow-ui-details")
 ], exports.FlowDetails);
 setDefaultAnimation("details.show", {
@@ -10374,7 +10375,7 @@ function scrollIntoView(element, container, direction = "vertical", behavior = "
   }
 }
 
-const styles$C = lit.css`
+const styles$D = lit.css`
   ${componentStyles}
 
   :host {
@@ -10495,15 +10496,15 @@ const styles$C = lit.css`
   }
 `;
 
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$C(target, key, result);
+    __defProp$D(target, key, result);
   return result;
 };
 exports.FlowDialog = class FlowDialog extends FlowRdfElement {
@@ -10683,29 +10684,29 @@ exports.FlowDialog = class FlowDialog extends FlowRdfElement {
     `;
   }
 };
-exports.FlowDialog.styles = styles$C;
-__decorateClass$C([
+exports.FlowDialog.styles = styles$D;
+__decorateClass$D([
   decorators_js.query(".dialog")
 ], exports.FlowDialog.prototype, "dialog", 2);
-__decorateClass$C([
+__decorateClass$D([
   decorators_js.query(".dialog__panel")
 ], exports.FlowDialog.prototype, "panel", 2);
-__decorateClass$C([
+__decorateClass$D([
   decorators_js.query(".dialog__overlay")
 ], exports.FlowDialog.prototype, "overlay", 2);
-__decorateClass$C([
+__decorateClass$D([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowDialog.prototype, "open", 2);
-__decorateClass$C([
+__decorateClass$D([
   decorators_js.property({ reflect: true })
 ], exports.FlowDialog.prototype, "label", 2);
-__decorateClass$C([
+__decorateClass$D([
   decorators_js.property({ attribute: "no-header", type: Boolean, reflect: true })
 ], exports.FlowDialog.prototype, "noHeader", 2);
-__decorateClass$C([
+__decorateClass$D([
   watch("open", { waitUntilFirstUpdate: true })
 ], exports.FlowDialog.prototype, "handleOpenChange", 1);
-exports.FlowDialog = __decorateClass$C([
+exports.FlowDialog = __decorateClass$D([
   decorators_js.customElement("flow-ui-dialog")
 ], exports.FlowDialog);
 setDefaultAnimation("dialog.show", {
@@ -10735,7 +10736,7 @@ setDefaultAnimation("dialog.overlay.hide", {
   options: { duration: 250 }
 });
 
-const styles$B = lit.css`
+const styles$C = lit.css`
   ${componentStyles}
 
   :host {
@@ -10765,15 +10766,15 @@ const styles$B = lit.css`
   }
 `;
 
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$B(target, key, result);
+    __defProp$C(target, key, result);
   return result;
 };
 exports.FlowDivider = class FlowDivider extends FlowRdfElement {
@@ -10794,14 +10795,14 @@ exports.FlowDivider = class FlowDivider extends FlowRdfElement {
     }
   */
 };
-exports.FlowDivider.styles = styles$B;
-__decorateClass$B([
+exports.FlowDivider.styles = styles$C;
+__decorateClass$C([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowDivider.prototype, "vertical", 2);
-__decorateClass$B([
+__decorateClass$C([
   watch("vertical")
 ], exports.FlowDivider.prototype, "handleVerticalChange", 1);
-exports.FlowDivider = __decorateClass$B([
+exports.FlowDivider = __decorateClass$C([
   decorators_js.customElement("flow-ui-divider")
 ], exports.FlowDivider);
 
@@ -10809,7 +10810,7 @@ function uppercaseFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-const styles$A = lit.css`
+const styles$B = lit.css`
   ${componentStyles}
 
   :host {
@@ -10966,15 +10967,15 @@ const styles$A = lit.css`
   }
 `;
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$A(target, key, result);
+    __defProp$B(target, key, result);
   return result;
 };
 exports.FlowDrawer = class FlowDrawer extends FlowRdfElement {
@@ -11184,38 +11185,38 @@ exports.FlowDrawer = class FlowDrawer extends FlowRdfElement {
     `;
   }
 };
-exports.FlowDrawer.styles = styles$A;
-__decorateClass$A([
+exports.FlowDrawer.styles = styles$B;
+__decorateClass$B([
   decorators_js.query(".drawer")
 ], exports.FlowDrawer.prototype, "drawer", 2);
-__decorateClass$A([
+__decorateClass$B([
   decorators_js.query(".drawer__panel")
 ], exports.FlowDrawer.prototype, "panel", 2);
-__decorateClass$A([
+__decorateClass$B([
   decorators_js.query(".drawer__overlay")
 ], exports.FlowDrawer.prototype, "overlay", 2);
-__decorateClass$A([
+__decorateClass$B([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowDrawer.prototype, "open", 2);
-__decorateClass$A([
+__decorateClass$B([
   decorators_js.property({ reflect: true })
 ], exports.FlowDrawer.prototype, "label", 2);
-__decorateClass$A([
+__decorateClass$B([
   decorators_js.property({ reflect: true })
 ], exports.FlowDrawer.prototype, "placement", 2);
-__decorateClass$A([
+__decorateClass$B([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.FlowDrawer.prototype, "contained", 2);
-__decorateClass$A([
+__decorateClass$B([
   decorators_js.property({ attribute: "no-header", type: Boolean, reflect: true })
 ], exports.FlowDrawer.prototype, "noHeader", 2);
-__decorateClass$A([
+__decorateClass$B([
   watch("open", { waitUntilFirstUpdate: true })
 ], exports.FlowDrawer.prototype, "handleOpenChange", 1);
-__decorateClass$A([
+__decorateClass$B([
   watch("contained", { waitUntilFirstUpdate: true })
 ], exports.FlowDrawer.prototype, "handleNoModalChange", 1);
-exports.FlowDrawer = __decorateClass$A([
+exports.FlowDrawer = __decorateClass$B([
   decorators_js.customElement("flow-ui-drawer")
 ], exports.FlowDrawer);
 setDefaultAnimation("drawer.showTop", {
@@ -11303,7 +11304,7 @@ setDefaultAnimation("drawer.overlay.hide", {
   options: { duration: 250 }
 });
 
-const styles$z = lit.css`
+const styles$A = lit.css`
   ${componentStyles}
 
   :host {
@@ -11425,15 +11426,15 @@ const styles$z = lit.css`
   }
 `;
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$z(target, key, result);
+    __defProp$A(target, key, result);
   return result;
 };
 const DEFAULT_FORMATTER$1 = (val) => isNil(val) ? "--" : val.toString();
@@ -11537,29 +11538,29 @@ class FlowGauge extends FlowRdfElement {
     `;
   }
 }
-FlowGauge.styles = styles$z;
-__decorateClass$z([
+FlowGauge.styles = styles$A;
+__decorateClass$A([
   decorators_js.query(".gauge__info-dialog")
 ], FlowGauge.prototype, "_infoDialog", 2);
-__decorateClass$z([
+__decorateClass$A([
   decorators_js.property()
 ], FlowGauge.prototype, "heading", 2);
-__decorateClass$z([
+__decorateClass$A([
   decorators_js.property()
 ], FlowGauge.prototype, "units", 2);
-__decorateClass$z([
+__decorateClass$A([
   decorators_js.property()
 ], FlowGauge.prototype, "value", 2);
-__decorateClass$z([
+__decorateClass$A([
   decorators_js.property()
 ], FlowGauge.prototype, "icon", 2);
-__decorateClass$z([
+__decorateClass$A([
   decorators_js.property({ attribute: "icon-library" })
 ], FlowGauge.prototype, "iconLibrary", 2);
-__decorateClass$z([
+__decorateClass$A([
   decorators_js.property()
 ], FlowGauge.prototype, "format", 2);
-__decorateClass$z([
+__decorateClass$A([
   watch("format")
 ], FlowGauge.prototype, "handleFormatChange", 1);
 
@@ -11569,6 +11570,262 @@ FlowIconButton.define("flow-ui-icon-button");
 
 FlowIcon.define("flow-ui-icon");
 
+const styles$z = lit.css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    min-height: 100px;
+  }
+
+  .map {
+    background-color: var(--flow-ui-map-background-color);
+    position: relative;
+    height: 100%;
+  }
+
+  .map__container {
+    height: 100%;
+  }
+
+  .map__container ::slotted(div) {
+    height: 100%;
+  }
+
+  .map__overlay {
+    position: absolute;
+    inset: 0;
+
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .map__control-containers {
+    flex: 1;
+    position: relative;
+  }
+
+  .map__control-container {
+    position: absolute;
+  }
+
+  .map__control-container--top-left {
+    top: var(--flow-ui-spacing-small);
+    left: var(--flow-ui-spacing-small);
+  }
+
+  .map__control-container--top-right {
+    top: var(--flow-ui-spacing-small);
+    right: var(--flow-ui-spacing-small);
+  }
+
+  .map__control-container--bottom-left {
+    bottom: var(--flow-ui-spacing-small);
+    left: var(--flow-ui-spacing-small);
+  }
+
+  .map__control-container--bottom-right {
+    bottom: var(--flow-ui-spacing-small);
+    right: var(--flow-ui-spacing-small);
+  }
+
+  .map__busy-indicator {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    display: none;
+
+    --height: var(--flow-ui-map-busy-track-size);
+    --track-color: var(--flow-ui-map-busy-track-color);
+    --indicator-color: var(--flow-ui-map-busy-indicator-color);
+
+    &::part(base) {
+      border-radius: 0;
+    }
+  }
+
+  .map__busy-indicator--busy {
+    display: unset;
+  }
+`;
+
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$z(target, key, result);
+  return result;
+};
+let mapIdCounter = 0;
+class FlowUiMap extends FlowRdfElement {
+  constructor() {
+    super();
+    this._mapLoading = false;
+    this.baseStyle = "fjord";
+    this.center = [-0.1, 51.5];
+    this.zoom = 9;
+    this.busy = false;
+    this._initialized = new Promise((resolve) => {
+      this._resolveInitialized = resolve;
+    });
+  }
+  /**
+   * The underlying core FlowMap instance. Note that this is
+   * `undefined` until the map has been initialized.
+   */
+  get map() {
+    return this._map;
+  }
+  /**
+   * A promise that resolves to a map instance when the map has been initialized.
+   *
+   * This is the safest way to retrieve the underlying core FlowMap instance before
+   * using its API.
+   */
+  get initialized() {
+    return this._initialized;
+  }
+  handleCenterChange() {
+    if (this._map) {
+      this._map.setCenter({
+        lng: this.center[0],
+        lat: this.center[1],
+        bearing: this.bearing,
+        pitch: this.pitch,
+        zoom: this.zoom
+      });
+    }
+  }
+  handleBaseStyleChange() {
+    if (this._map) {
+      this._map.setBaseStyle(this.baseStyle);
+    }
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this._map = await this.initializeMap();
+    this._resolveInitialized(this._map);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._map) {
+      this._map.destroy();
+      this._map = void 0;
+    }
+  }
+  async initializeMap() {
+    const mapContainer = document.createElement("div");
+    mapContainer.slot = "map";
+    this.appendChild(mapContainer);
+    const map = new flowRdfCore.FlowMap({
+      id: this.mapId ?? `flow-map-${mapIdCounter++}`,
+      container: mapContainer,
+      baseStyle: this.baseStyle,
+      center: this.center,
+      zoom: this.zoom
+    });
+    await map.initialized;
+    map.on("loading", (ev) => {
+      this._mapLoading = ev.loading;
+    });
+    this.emit("flow-ui-load");
+    return map;
+  }
+  render() {
+    const showBusyIndicator = this.busy || this._mapLoading;
+    return lit.html`
+      <div
+        part="base"
+        class=${classMap_js.classMap({
+      map: true
+    })}
+      >
+        <div class="map__container">
+          <slot name="map"></slot>
+        </div>
+
+        <div class="map__overlay">
+          <flow-ui-progress-bar
+            part="busy-indicator"
+            class=${classMap_js.classMap({ "map__busy-indicator": true, "map__busy-indicator--busy": showBusyIndicator })}
+            indeterminate
+          ></flow-ui-progress-bar>
+          <div class="map__control-containers">
+            <div
+              part="control-container control-container--top-left"
+              class="map__control-container map__control-container--top-left"
+            >
+              <slot name="top-left"></slot>
+            </div>
+            <div
+              part="control-container control-container--top-right"
+              class="map__control-container map__control-container--top-right"
+            >
+              <slot name="top-right"></slot>
+            </div>
+            <div
+              part="control-container control-container--bottom-left"
+              class="map__control-container map__control-container--bottom-left"
+            >
+              <slot name="bottom-left"></slot>
+            </div>
+            <div
+              part="control-container control-container--bottom-right"
+              class="map__control-container map__control-container--bottom-right"
+            >
+              <slot name="bottom-right"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowUiMap.styles = styles$z;
+__decorateClass$z([
+  decorators_js.state()
+], FlowUiMap.prototype, "_mapLoading", 2);
+__decorateClass$z([
+  decorators_js.property({ attribute: "map-id" })
+], FlowUiMap.prototype, "mapId", 2);
+__decorateClass$z([
+  decorators_js.property({ attribute: "base-style" })
+], FlowUiMap.prototype, "baseStyle", 2);
+__decorateClass$z([
+  decorators_js.property({
+    converter: {
+      fromAttribute: (value) => value.split(",").map((n) => parseFloat(n)),
+      toAttribute: (value) => value.map((n) => n.toString()).join(",")
+    }
+  })
+], FlowUiMap.prototype, "center", 2);
+__decorateClass$z([
+  decorators_js.property({ type: Number })
+], FlowUiMap.prototype, "zoom", 2);
+__decorateClass$z([
+  decorators_js.property({ type: Number })
+], FlowUiMap.prototype, "bearing", 2);
+__decorateClass$z([
+  decorators_js.property({ type: Number })
+], FlowUiMap.prototype, "pitch", 2);
+__decorateClass$z([
+  decorators_js.property({ type: Boolean })
+], FlowUiMap.prototype, "busy", 2);
+__decorateClass$z([
+  watch(["center", "zoom", "bearing", "pitch"])
+], FlowUiMap.prototype, "handleCenterChange", 1);
+__decorateClass$z([
+  watch(["baseStyle"])
+], FlowUiMap.prototype, "handleBaseStyleChange", 1);
+
+FlowUiMap.define("flow-ui-map");
+
 const styles$y = lit.css`
   ${componentStyles}
 
@@ -23422,7 +23679,7 @@ const translation = {
 };
 localize.registerTranslation(translation);
 
-const version = "0.0.38";
+const version = "0.0.40";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
@@ -23447,6 +23704,7 @@ exports.FlowGauge = FlowGauge;
 exports.FlowIcon = FlowIcon;
 exports.FlowIconButton = FlowIconButton;
 exports.FlowInput = FlowInput;
+exports.FlowMap = FlowUiMap;
 exports.FlowNumberStepper = FlowNumberStepper;
 exports.FlowOption = FlowOption;
 exports.FlowPanel = FlowPanel;