@emuanalytics/flow-rdf-ui 0.0.38 → 0.0.40

package/dist/index.mjs

@@ -21,6 +21,7 @@ import { live } from 'lit/directives/live.js';
 import { TinyColor } from '@ctrl/tinycolor';
 import { styleMap } from 'lit/directives/style-map.js';
 import { format, formatLocale } from 'd3-format';
+import { FlowMap } from '@emuanalytics/flow-rdf-core';
 import cloneDeep from 'clone-deep';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -85,15 +86,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 LitElement {
@@ -117,10 +118,10 @@ class FlowRdfElement extends LitElement {
     }
   }
 }
-__decorateClass$12([
+__decorateClass$13([
   property()
 ], FlowRdfElement.prototype, "dir", 2);
-__decorateClass$12([
+__decorateClass$13([
   property()
 ], FlowRdfElement.prototype, "lang", 2);
 
@@ -259,7 +260,7 @@ const componentStyles = css`
   }
 `;
 
-const styles$$ = css`
+const styles$10 = css`
   ${componentStyles}
 
   :host {
@@ -514,15 +515,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();
@@ -629,31 +630,31 @@ const _FlowIcon = class _FlowIcon extends FlowRdfElement {
     return this.svg;
   }
 };
-_FlowIcon.styles = styles$$;
-__decorateClass$11([
+_FlowIcon.styles = styles$10;
+__decorateClass$12([
   state()
 ], _FlowIcon.prototype, "svg", 2);
-__decorateClass$11([
+__decorateClass$12([
   property({ reflect: true })
 ], _FlowIcon.prototype, "name", 2);
-__decorateClass$11([
+__decorateClass$12([
   property()
 ], _FlowIcon.prototype, "src", 2);
-__decorateClass$11([
+__decorateClass$12([
   property()
 ], _FlowIcon.prototype, "label", 2);
-__decorateClass$11([
+__decorateClass$12([
   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$_ = css`
+const styles$$ = css`
   :host {
     --arrow-color: var(--sl-color-neutral-1000);
     --arrow-size: 6px;
@@ -713,15 +714,15 @@ const styles$_ = 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) {
@@ -1032,44 +1033,44 @@ class SlPopup extends FlowRdfElement {
     `;
   }
 }
-SlPopup.styles = [componentStyles, styles$_];
-__decorateClass$10([
+SlPopup.styles = [componentStyles, styles$$];
+__decorateClass$11([
   query(".popup")
 ], SlPopup.prototype, "popup", 2);
-__decorateClass$10([
+__decorateClass$11([
   query(".popup__arrow")
 ], SlPopup.prototype, "arrowEl", 2);
-__decorateClass$10([
+__decorateClass$11([
   property()
 ], SlPopup.prototype, "anchor", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Boolean, reflect: true })
 ], SlPopup.prototype, "active", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ reflect: true })
 ], SlPopup.prototype, "placement", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ reflect: true })
 ], SlPopup.prototype, "strategy", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Number })
 ], SlPopup.prototype, "distance", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Number })
 ], SlPopup.prototype, "skidding", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Boolean })
 ], SlPopup.prototype, "arrow", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "arrow-placement" })
 ], SlPopup.prototype, "arrowPlacement", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "arrow-padding", type: Number })
 ], SlPopup.prototype, "arrowPadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Boolean })
 ], SlPopup.prototype, "flip", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({
     attribute: "flip-fallback-placements",
     converter: {
@@ -1082,43 +1083,43 @@ __decorateClass$10([
     }
   })
 ], SlPopup.prototype, "flipFallbackPlacements", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "flip-fallback-strategy" })
 ], SlPopup.prototype, "flipFallbackStrategy", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Object })
 ], SlPopup.prototype, "flipBoundary", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "flip-padding", type: Number })
 ], SlPopup.prototype, "flipPadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Boolean })
 ], SlPopup.prototype, "shift", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Object })
 ], SlPopup.prototype, "shiftBoundary", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "shift-padding", type: Number })
 ], SlPopup.prototype, "shiftPadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "auto-size" })
 ], SlPopup.prototype, "autoSize", 2);
-__decorateClass$10([
+__decorateClass$11([
   property()
 ], SlPopup.prototype, "sync", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ type: Object })
 ], SlPopup.prototype, "autoSizeBoundary", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "auto-size-padding", type: Number })
 ], SlPopup.prototype, "autoSizePadding", 2);
-__decorateClass$10([
+__decorateClass$11([
   property({ attribute: "hover-bridge", type: Boolean })
 ], SlPopup.prototype, "hoverBridge", 2);
 
 SlPopup.define("flow-ui-popup");
 
-const styles$Z = css`
+const styles$_ = css`
   ${componentStyles}
 
   :host {
@@ -1171,15 +1172,15 @@ const styles$Z = 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;
 };
 let FlowTooltip = class extends FlowRdfElement {
@@ -1356,50 +1357,50 @@ let FlowTooltip = class extends FlowRdfElement {
     `;
   }
 };
-FlowTooltip.styles = styles$Z;
-__decorateClass$$([
+FlowTooltip.styles = styles$_;
+__decorateClass$10([
   query("slot:not([name])")
 ], FlowTooltip.prototype, "defaultSlot", 2);
-__decorateClass$$([
+__decorateClass$10([
   query(".tooltip__body")
 ], FlowTooltip.prototype, "body", 2);
-__decorateClass$$([
+__decorateClass$10([
   query("flow-ui-popup")
 ], FlowTooltip.prototype, "popup", 2);
-__decorateClass$$([
+__decorateClass$10([
   property()
 ], FlowTooltip.prototype, "content", 2);
-__decorateClass$$([
+__decorateClass$10([
   property()
 ], FlowTooltip.prototype, "placement", 2);
-__decorateClass$$([
+__decorateClass$10([
   property({ type: Boolean, reflect: true })
 ], FlowTooltip.prototype, "disabled", 2);
-__decorateClass$$([
+__decorateClass$10([
   property({ type: Number })
 ], FlowTooltip.prototype, "distance", 2);
-__decorateClass$$([
+__decorateClass$10([
   property({ type: Boolean, reflect: true })
 ], FlowTooltip.prototype, "open", 2);
-__decorateClass$$([
+__decorateClass$10([
   property({ type: Number })
 ], FlowTooltip.prototype, "skidding", 2);
-__decorateClass$$([
+__decorateClass$10([
   property()
 ], FlowTooltip.prototype, "trigger", 2);
-__decorateClass$$([
+__decorateClass$10([
   property({ type: Boolean })
 ], FlowTooltip.prototype, "hoist", 2);
-__decorateClass$$([
+__decorateClass$10([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowTooltip.prototype, "handleOpenChange", 1);
-__decorateClass$$([
+__decorateClass$10([
   watch(["content", "distance", "hoist", "placement", "skidding"])
 ], FlowTooltip.prototype, "handleOptionsChange", 1);
-__decorateClass$$([
+__decorateClass$10([
   watch("disabled")
 ], FlowTooltip.prototype, "handleDisabledChange", 1);
-FlowTooltip = __decorateClass$$([
+FlowTooltip = __decorateClass$10([
   customElement("flow-ui-tooltip")
 ], FlowTooltip);
 setDefaultAnimation("tooltip.show", {
@@ -1417,7 +1418,7 @@ setDefaultAnimation("tooltip.hide", {
   options: { duration: 150, easing: "ease" }
 });
 
-const styles$Y = css`
+const styles$Z = css`
   ${componentStyles}
 
   :host {
@@ -1493,15 +1494,15 @@ const styles$Y = 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 {
@@ -1664,60 +1665,60 @@ class FlowIconButton extends FlowRdfElement {
     }
   }
 }
-FlowIconButton.styles = styles$Y;
-__decorateClass$_([
+FlowIconButton.styles = styles$Z;
+__decorateClass$$([
   query(".icon-button")
 ], FlowIconButton.prototype, "button", 2);
-__decorateClass$_([
+__decorateClass$$([
   query(".icon-button__tooltip")
 ], FlowIconButton.prototype, "tooltipElem", 2);
-__decorateClass$_([
+__decorateClass$$([
   query(".icon-button__confirm_button")
 ], FlowIconButton.prototype, "confirmButton", 2);
-__decorateClass$_([
+__decorateClass$$([
   state()
 ], FlowIconButton.prototype, "hasFocus", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "name", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "library", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "src", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "href", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "target", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "download", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "label", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "tooltip", 2);
-__decorateClass$_([
+__decorateClass$$([
   property({ attribute: "tooltip-placement" })
 ], FlowIconButton.prototype, "tooltipPlacement", 2);
-__decorateClass$_([
+__decorateClass$$([
   property({ attribute: "tooltip-distance", type: Number })
 ], FlowIconButton.prototype, "tooltipDistance", 2);
-__decorateClass$_([
+__decorateClass$$([
   property({ attribute: "tooltip-skidding", type: Number })
 ], FlowIconButton.prototype, "tooltipSkidding", 2);
-__decorateClass$_([
+__decorateClass$$([
   property({ type: Boolean, reflect: true })
 ], FlowIconButton.prototype, "disabled", 2);
-__decorateClass$_([
+__decorateClass$$([
   property()
 ], FlowIconButton.prototype, "confirm", 2);
 
-const styles$X = css`
+const styles$Y = css`
   ${componentStyles}
 
   :host {
@@ -1812,15 +1813,15 @@ const styles$X = 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" });
@@ -1955,26 +1956,26 @@ class FlowAlert extends FlowRdfElement {
     `;
   }
 }
-FlowAlert.styles = styles$X;
-__decorateClass$Z([
+FlowAlert.styles = styles$Y;
+__decorateClass$_([
   query('[part~="base"]')
 ], FlowAlert.prototype, "base", 2);
-__decorateClass$Z([
+__decorateClass$_([
   property({ type: Boolean, reflect: true })
 ], FlowAlert.prototype, "open", 2);
-__decorateClass$Z([
+__decorateClass$_([
   property({ type: Boolean, reflect: true })
 ], FlowAlert.prototype, "closable", 2);
-__decorateClass$Z([
+__decorateClass$_([
   property({ reflect: true })
 ], FlowAlert.prototype, "variant", 2);
-__decorateClass$Z([
+__decorateClass$_([
   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", {
@@ -1994,7 +1995,7 @@ setDefaultAnimation("alert.hide", {
 
 FlowAlert.define("flow-ui-alert");
 
-const styles$W = css`
+const styles$X = css`
   ${componentStyles}
 
   :host {
@@ -2009,15 +2010,15 @@ function getEasingNames() {
   return Object.entries(animations.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 {
@@ -2145,47 +2146,47 @@ class SlAnimation extends FlowRdfElement {
     `;
   }
 }
-SlAnimation.styles = [componentStyles, styles$W];
-__decorateClass$Y([
+SlAnimation.styles = [componentStyles, styles$X];
+__decorateClass$Z([
   queryAsync("slot")
 ], SlAnimation.prototype, "defaultSlot", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property()
 ], SlAnimation.prototype, "name", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: Boolean, reflect: true })
 ], SlAnimation.prototype, "play", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: Number })
 ], SlAnimation.prototype, "delay", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property()
 ], SlAnimation.prototype, "direction", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: Number })
 ], SlAnimation.prototype, "duration", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property()
 ], SlAnimation.prototype, "easing", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ attribute: "end-delay", type: Number })
 ], SlAnimation.prototype, "endDelay", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property()
 ], SlAnimation.prototype, "fill", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ type: Number })
 ], SlAnimation.prototype, "iterations", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ attribute: "iteration-start", type: Number })
 ], SlAnimation.prototype, "iterationStart", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ attribute: false })
 ], SlAnimation.prototype, "keyframes", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   property({ attribute: "playback-rate", type: Number })
 ], SlAnimation.prototype, "playbackRate", 2);
-__decorateClass$Y([
+__decorateClass$Z([
   watch([
     "name",
     "delay",
@@ -2199,16 +2200,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 = css`
+const styles$W = css`
   ${componentStyles}
 
   :host {
@@ -2274,15 +2275,15 @@ const styles$V = 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;
 };
 let FlowAvatar = class extends FlowRdfElement {
@@ -2338,33 +2339,33 @@ let FlowAvatar = class extends FlowRdfElement {
     `;
   }
 };
-FlowAvatar.styles = styles$V;
-__decorateClass$X([
+FlowAvatar.styles = styles$W;
+__decorateClass$Y([
   state()
 ], FlowAvatar.prototype, "hasError", 2);
-__decorateClass$X([
+__decorateClass$Y([
   property()
 ], FlowAvatar.prototype, "image", 2);
-__decorateClass$X([
+__decorateClass$Y([
   property()
 ], FlowAvatar.prototype, "label", 2);
-__decorateClass$X([
+__decorateClass$Y([
   property()
 ], FlowAvatar.prototype, "initials", 2);
-__decorateClass$X([
+__decorateClass$Y([
   property()
 ], FlowAvatar.prototype, "loading", 2);
-__decorateClass$X([
+__decorateClass$Y([
   property({ reflect: true, type: String })
 ], FlowAvatar.prototype, "shape", 2);
-__decorateClass$X([
+__decorateClass$Y([
   watch("image")
 ], FlowAvatar.prototype, "handleImageChange", 1);
-FlowAvatar = __decorateClass$X([
+FlowAvatar = __decorateClass$Y([
   customElement("flow-ui-avatar")
 ], FlowAvatar);
 
-const styles$U = css`
+const styles$V = css`
   ${componentStyles}
 
   :host {
@@ -2456,15 +2457,15 @@ const styles$U = 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;
 };
 let FlowBadge = class extends FlowRdfElement {
@@ -2493,21 +2494,21 @@ let FlowBadge = class extends FlowRdfElement {
     `;
   }
 };
-FlowBadge.styles = styles$U;
-__decorateClass$W([
+FlowBadge.styles = styles$V;
+__decorateClass$X([
   property({ reflect: true })
 ], FlowBadge.prototype, "variant", 2);
-__decorateClass$W([
+__decorateClass$X([
   property({ type: Boolean, reflect: true })
 ], FlowBadge.prototype, "pill", 2);
-__decorateClass$W([
+__decorateClass$X([
   property({ type: Boolean, reflect: true })
 ], FlowBadge.prototype, "pulse", 2);
-FlowBadge = __decorateClass$W([
+FlowBadge = __decorateClass$X([
   customElement("flow-ui-badge")
 ], FlowBadge);
 
-const styles$T = css`
+const styles$U = css`
   ${componentStyles}
 
   :host {
@@ -2593,15 +2594,15 @@ const styles$T = 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;
 };
 let FlowBreadcrumbItem = class extends FlowRdfElement {
@@ -2646,21 +2647,21 @@ let FlowBreadcrumbItem = class extends FlowRdfElement {
     `;
   }
 };
-FlowBreadcrumbItem.styles = styles$T;
-__decorateClass$V([
+FlowBreadcrumbItem.styles = styles$U;
+__decorateClass$W([
   property()
 ], FlowBreadcrumbItem.prototype, "href", 2);
-__decorateClass$V([
+__decorateClass$W([
   property()
 ], FlowBreadcrumbItem.prototype, "target", 2);
-__decorateClass$V([
+__decorateClass$W([
   property()
 ], FlowBreadcrumbItem.prototype, "rel", 2);
-FlowBreadcrumbItem = __decorateClass$V([
+FlowBreadcrumbItem = __decorateClass$W([
   customElement("flow-ui-breadcrumb-item")
 ], FlowBreadcrumbItem);
 
-const styles$S = css`
+const styles$T = css`
   ${componentStyles}
 
   .breadcrumb {
@@ -2670,15 +2671,15 @@ const styles$S = 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;
 };
 let FlowBreadcrumb = class extends FlowRdfElement {
@@ -2734,21 +2735,21 @@ let FlowBreadcrumb = class extends FlowRdfElement {
     `;
   }
 };
-FlowBreadcrumb.styles = styles$S;
-__decorateClass$U([
+FlowBreadcrumb.styles = styles$T;
+__decorateClass$V([
   query("slot")
 ], FlowBreadcrumb.prototype, "defaultSlot", 2);
-__decorateClass$U([
+__decorateClass$V([
   query('slot[name="separator"]')
 ], FlowBreadcrumb.prototype, "separatorSlot", 2);
-__decorateClass$U([
+__decorateClass$V([
   property()
 ], FlowBreadcrumb.prototype, "label", 2);
-FlowBreadcrumb = __decorateClass$U([
+FlowBreadcrumb = __decorateClass$V([
   customElement("flow-ui-breadcrumb")
 ], FlowBreadcrumb);
 
-const styles$R = css`
+const styles$S = css`
   ${componentStyles}
 
   :host {
@@ -2765,15 +2766,15 @@ const styles$R = 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;
 };
 let FlowButtonGroup = class extends FlowRdfElement {
@@ -2836,23 +2837,23 @@ let FlowButtonGroup = class extends FlowRdfElement {
     `;
   }
 };
-FlowButtonGroup.styles = styles$R;
-__decorateClass$T([
+FlowButtonGroup.styles = styles$S;
+__decorateClass$U([
   query("slot")
 ], FlowButtonGroup.prototype, "defaultSlot", 2);
-__decorateClass$T([
+__decorateClass$U([
   state()
 ], FlowButtonGroup.prototype, "disableRole", 2);
-__decorateClass$T([
+__decorateClass$U([
   property()
 ], FlowButtonGroup.prototype, "label", 2);
-__decorateClass$T([
+__decorateClass$U([
   property({ type: Boolean, reflect: true })
 ], FlowButtonGroup.prototype, "vertical", 2);
-__decorateClass$T([
+__decorateClass$U([
   watch("vertical", { waitUntilFirstUpdate: true })
 ], FlowButtonGroup.prototype, "handleVerticalChange", 1);
-FlowButtonGroup = __decorateClass$T([
+FlowButtonGroup = __decorateClass$U([
   customElement("flow-ui-button-group")
 ], FlowButtonGroup);
 function findButton(el) {
@@ -3123,7 +3124,7 @@ const customErrorValidityState = Object.freeze({
   customError: true
 });
 
-const styles$Q = css`
+const styles$R = css`
   ${componentStyles}
 
   :host {
@@ -3183,15 +3184,15 @@ const styles$Q = 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;
 };
 let FlowSpinner = class extends FlowRdfElement {
@@ -3208,8 +3209,8 @@ let FlowSpinner = class extends FlowRdfElement {
     `;
   }
 };
-FlowSpinner.styles = styles$Q;
-FlowSpinner = __decorateClass$S([
+FlowSpinner.styles = styles$R;
+FlowSpinner = __decorateClass$T([
   customElement("flow-ui-spinner")
 ], FlowSpinner);
 
@@ -3890,15 +3891,15 @@ const buttonStyles = 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 {
@@ -4102,88 +4103,88 @@ let FlowButton$1 = class FlowButton extends FlowRdfElement {
   }
 };
 FlowButton$1.styles = buttonStyles;
-__decorateClass$R([
+__decorateClass$S([
   query(".button")
 ], FlowButton$1.prototype, "button", 2);
-__decorateClass$R([
+__decorateClass$S([
   state()
 ], FlowButton$1.prototype, "hasFocus", 2);
-__decorateClass$R([
+__decorateClass$S([
   state()
 ], FlowButton$1.prototype, "invalid", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "title", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ reflect: true })
 ], FlowButton$1.prototype, "variant", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ reflect: true })
 ], FlowButton$1.prototype, "size", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "caret", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "disabled", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "loading", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "outline", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ type: Boolean, reflect: true })
 ], FlowButton$1.prototype, "pill", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ type: Boolean, reflect: true, attribute: "fab-circle" })
 ], FlowButton$1.prototype, "fabCircle", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ type: Boolean, reflect: true, attribute: "fab-square" })
 ], FlowButton$1.prototype, "fabSquare", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "type", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "name", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "value", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "href", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "target", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "rel", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "download", 2);
-__decorateClass$R([
+__decorateClass$S([
   property()
 ], FlowButton$1.prototype, "form", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ attribute: "formaction" })
 ], FlowButton$1.prototype, "formAction", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ attribute: "formenctype" })
 ], FlowButton$1.prototype, "formEnctype", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ attribute: "formmethod" })
 ], FlowButton$1.prototype, "formMethod", 2);
-__decorateClass$R([
+__decorateClass$S([
   property({ attribute: "formnovalidate", type: Boolean })
 ], FlowButton$1.prototype, "formNoValidate", 2);
-__decorateClass$R([
+__decorateClass$S([
   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([
   customElement("flow-ui-button")
 ], FlowButton$1);
 
@@ -4204,7 +4205,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 = css`
+const styles$Q = css`
   ${componentStyles}
 
   :host {
@@ -4341,15 +4342,15 @@ const styles$P = 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 {
@@ -4613,44 +4614,44 @@ class FlowCalendar extends FlowRdfElement {
     `;
   }
 }
-FlowCalendar.styles = styles$P;
-__decorateClass$Q([
+FlowCalendar.styles = styles$Q;
+__decorateClass$R([
   query(".calendar__month-select")
 ], FlowCalendar.prototype, "_monthSelect", 2);
-__decorateClass$Q([
+__decorateClass$R([
   query(".calendar__year-select")
 ], FlowCalendar.prototype, "_yearSelect", 2);
-__decorateClass$Q([
+__decorateClass$R([
   state()
 ], FlowCalendar.prototype, "_displayDate", 2);
-__decorateClass$Q([
+__decorateClass$R([
   state()
 ], FlowCalendar.prototype, "_selectedDate", 2);
-__decorateClass$Q([
+__decorateClass$R([
   property({ reflect: true })
 ], FlowCalendar.prototype, "value", 2);
-__decorateClass$Q([
+__decorateClass$R([
   property({ attribute: "display-mode" })
 ], FlowCalendar.prototype, "displayMode", 2);
-__decorateClass$Q([
+__decorateClass$R([
   property()
 ], FlowCalendar.prototype, "timezone", 2);
-__decorateClass$Q([
+__decorateClass$R([
   property()
 ], FlowCalendar.prototype, "locale", 2);
-__decorateClass$Q([
+__decorateClass$R([
   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 = css`
+const styles$P = css`
   ${componentStyles}
 
   :host {
@@ -4719,15 +4720,15 @@ const styles$O = 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;
 };
 let FlowCard = class extends FlowRdfElement {
@@ -4754,12 +4755,12 @@ let FlowCard = class extends FlowRdfElement {
     `;
   }
 };
-FlowCard.styles = styles$O;
-FlowCard = __decorateClass$P([
+FlowCard.styles = styles$P;
+FlowCard = __decorateClass$Q([
   customElement("flow-ui-card")
 ], FlowCard);
 
-const styles$N = css`
+const styles$O = css`
   ${componentStyles}
 
   :host {
@@ -4783,15 +4784,15 @@ const styles$N = 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;
 };
 let FlowCarouselItem = class extends FlowRdfElement {
@@ -4806,8 +4807,8 @@ let FlowCarouselItem = class extends FlowRdfElement {
     return html` <slot></slot> `;
   }
 };
-FlowCarouselItem.styles = styles$N;
-FlowCarouselItem = __decorateClass$O([
+FlowCarouselItem.styles = styles$O;
+FlowCarouselItem = __decorateClass$P([
   customElement("flow-ui-carousel-item")
 ], FlowCarouselItem);
 
@@ -4877,7 +4878,7 @@ class AutoplayController {
   }
 }
 
-const styles$M = css`
+const styles$N = css`
   ${componentStyles}
 
   :host {
@@ -5048,15 +5049,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 {
@@ -5187,19 +5188,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;
 };
 let FlowCarousel = class extends FlowRdfElement {
@@ -5518,67 +5519,67 @@ let FlowCarousel = class extends FlowRdfElement {
     `;
   }
 };
-FlowCarousel.styles = styles$M;
-__decorateClass$M([
+FlowCarousel.styles = styles$N;
+__decorateClass$N([
   property({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "loop", 2);
-__decorateClass$M([
+__decorateClass$N([
   property({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "navigation", 2);
-__decorateClass$M([
+__decorateClass$N([
   property({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "pagination", 2);
-__decorateClass$M([
+__decorateClass$N([
   property({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "autoplay", 2);
-__decorateClass$M([
+__decorateClass$N([
   property({ type: Number, attribute: "autoplay-interval" })
 ], FlowCarousel.prototype, "autoplayInterval", 2);
-__decorateClass$M([
+__decorateClass$N([
   property({ type: Number, attribute: "slides-per-page" })
 ], FlowCarousel.prototype, "slidesPerPage", 2);
-__decorateClass$M([
+__decorateClass$N([
   property({ type: Number, attribute: "slides-per-move" })
 ], FlowCarousel.prototype, "slidesPerMove", 2);
-__decorateClass$M([
+__decorateClass$N([
   property()
 ], FlowCarousel.prototype, "orientation", 2);
-__decorateClass$M([
+__decorateClass$N([
   property({ type: Boolean, reflect: true, attribute: "mouse-dragging" })
 ], FlowCarousel.prototype, "mouseDragging", 2);
-__decorateClass$M([
+__decorateClass$N([
   query("slot:not([name])")
 ], FlowCarousel.prototype, "defaultSlot", 2);
-__decorateClass$M([
+__decorateClass$N([
   query(".carousel__slides")
 ], FlowCarousel.prototype, "scrollContainer", 2);
-__decorateClass$M([
+__decorateClass$N([
   query(".carousel__pagination")
 ], FlowCarousel.prototype, "paginationContainer", 2);
-__decorateClass$M([
+__decorateClass$N([
   state()
 ], FlowCarousel.prototype, "activeSlide", 2);
-__decorateClass$M([
+__decorateClass$N([
   watch("loop", { waitUntilFirstUpdate: true }),
   watch("slidesPerPage", { waitUntilFirstUpdate: true })
 ], FlowCarousel.prototype, "initializeSlides", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("activeSlide")
 ], FlowCarousel.prototype, "handelSlideChange", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("slidesPerMove")
 ], FlowCarousel.prototype, "handleSlidesPerMoveChange", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("autoplay")
 ], FlowCarousel.prototype, "handleAutoplayChange", 1);
-__decorateClass$M([
+__decorateClass$N([
   watch("mouseDragging")
 ], FlowCarousel.prototype, "handleMouseDraggingChange", 1);
-FlowCarousel = __decorateClass$M([
+FlowCarousel = __decorateClass$N([
   customElement("flow-ui-carousel")
 ], FlowCarousel);
 
-const styles$L = css`
+const styles$M = css`
   ${componentStyles}
 
   :host {
@@ -6033,15 +6034,15 @@ function registerChartComponent(...components) {
   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 {
@@ -6088,20 +6089,20 @@ class FlowChart extends FlowRdfElement {
     `;
   }
 }
-FlowChart.styles = styles$L;
-__decorateClass$L([
+FlowChart.styles = styles$M;
+__decorateClass$M([
   property()
 ], FlowChart.prototype, "type", 2);
-__decorateClass$L([
+__decorateClass$M([
   property({ type: Object })
 ], FlowChart.prototype, "options", 2);
-__decorateClass$L([
+__decorateClass$M([
   property({ type: Object })
 ], FlowChart.prototype, "data", 2);
-__decorateClass$L([
+__decorateClass$M([
   property({ type: Array })
 ], FlowChart.prototype, "plugins", 2);
-__decorateClass$L([
+__decorateClass$M([
   watch(["options", "data"], { waitUntilFirstUpdate: true })
 ], FlowChart.prototype, "repaint", 1);
 
@@ -6125,7 +6126,7 @@ const defaultValue = (propertyName = "value") => (proto, key) => {
   };
 };
 
-const styles$K = css`
+const styles$L = css`
   ${componentStyles}
 
   :host {
@@ -6242,15 +6243,15 @@ const styles$K = 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;
 };
 let FlowCheckbox = class extends FlowRdfElement {
@@ -6408,50 +6409,50 @@ let FlowCheckbox = class extends FlowRdfElement {
     `;
   }
 };
-FlowCheckbox.styles = styles$K;
-__decorateClass$K([
+FlowCheckbox.styles = styles$L;
+__decorateClass$L([
   query('input[type="checkbox"]')
 ], FlowCheckbox.prototype, "input", 2);
-__decorateClass$K([
+__decorateClass$L([
   state()
 ], FlowCheckbox.prototype, "hasFocus", 2);
-__decorateClass$K([
+__decorateClass$L([
   property()
 ], FlowCheckbox.prototype, "title", 2);
-__decorateClass$K([
+__decorateClass$L([
   property()
 ], FlowCheckbox.prototype, "name", 2);
-__decorateClass$K([
+__decorateClass$L([
   property()
 ], FlowCheckbox.prototype, "value", 2);
-__decorateClass$K([
+__decorateClass$L([
   property({ reflect: true })
 ], FlowCheckbox.prototype, "size", 2);
-__decorateClass$K([
+__decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "disabled", 2);
-__decorateClass$K([
+__decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "checked", 2);
-__decorateClass$K([
+__decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "indeterminate", 2);
-__decorateClass$K([
+__decorateClass$L([
   defaultValue("checked")
 ], FlowCheckbox.prototype, "defaultChecked", 2);
-__decorateClass$K([
+__decorateClass$L([
   property({ reflect: true })
 ], FlowCheckbox.prototype, "form", 2);
-__decorateClass$K([
+__decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "required", 2);
-__decorateClass$K([
+__decorateClass$L([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowCheckbox.prototype, "handleDisabledChange", 1);
-__decorateClass$K([
+__decorateClass$L([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], FlowCheckbox.prototype, "handleStateChange", 1);
-FlowCheckbox = __decorateClass$K([
+FlowCheckbox = __decorateClass$L([
   customElement("flow-ui-checkbox")
 ], FlowCheckbox);
 
@@ -6532,7 +6533,7 @@ function getTabbableBoundary(root) {
   return { start, end };
 }
 
-const styles$J = css`
+const styles$K = css`
   ${componentStyles}
 
   :host {
@@ -6584,15 +6585,15 @@ const styles$J = 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 {
@@ -6863,45 +6864,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([
   query(".dropdown")
 ], SlDropdown.prototype, "popup", 2);
-__decorateClass$J([
+__decorateClass$K([
   query(".dropdown__trigger")
 ], SlDropdown.prototype, "trigger", 2);
-__decorateClass$J([
+__decorateClass$K([
   query(".dropdown__panel")
 ], SlDropdown.prototype, "panel", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ type: Boolean, reflect: true })
 ], SlDropdown.prototype, "open", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ reflect: true })
 ], SlDropdown.prototype, "placement", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ type: Boolean, reflect: true })
 ], SlDropdown.prototype, "disabled", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
 ], SlDropdown.prototype, "stayOpenOnSelect", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ attribute: false })
 ], SlDropdown.prototype, "containingElement", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ type: Number })
 ], SlDropdown.prototype, "distance", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ type: Number })
 ], SlDropdown.prototype, "skidding", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ type: Boolean })
 ], SlDropdown.prototype, "hoist", 2);
-__decorateClass$J([
+__decorateClass$K([
   property({ reflect: true })
 ], SlDropdown.prototype, "sync", 2);
-__decorateClass$J([
+__decorateClass$K([
   watch("open", { waitUntilFirstUpdate: true })
 ], SlDropdown.prototype, "handleOpenChange", 1);
 setDefaultAnimation("dropdown.show", {
@@ -6981,7 +6982,7 @@ const formControlStyles = css`
   }
 `;
 
-const styles$I = css`
+const styles$J = css`
   ${componentStyles}
   ${formControlStyles}
 
@@ -7286,15 +7287,15 @@ const styles$I = 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 {
@@ -7641,104 +7642,104 @@ class FlowInput extends FlowRdfElement {
     `;
   }
 }
-FlowInput.styles = styles$I;
-__decorateClass$I([
+FlowInput.styles = styles$J;
+__decorateClass$J([
   query(".input__control")
 ], FlowInput.prototype, "input", 2);
-__decorateClass$I([
+__decorateClass$J([
   state()
 ], FlowInput.prototype, "hasFocus", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "title", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ reflect: true })
 ], FlowInput.prototype, "type", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "name", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "value", 2);
-__decorateClass$I([
+__decorateClass$J([
   defaultValue()
 ], FlowInput.prototype, "defaultValue", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ reflect: true })
 ], FlowInput.prototype, "size", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "filled", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "pill", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "label", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ attribute: "help-text" })
 ], FlowInput.prototype, "helpText", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Boolean })
 ], FlowInput.prototype, "clearable", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "disabled", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "placeholder", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "readonly", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ attribute: "password-toggle", type: Boolean })
 ], FlowInput.prototype, "passwordToggle", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ attribute: "password-visible", type: Boolean })
 ], FlowInput.prototype, "passwordVisible", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ attribute: "no-spin-buttons", type: Boolean })
 ], FlowInput.prototype, "noSpinButtons", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ reflect: true })
 ], FlowInput.prototype, "form", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "required", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "pattern", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Number })
 ], FlowInput.prototype, "minlength", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Number })
 ], FlowInput.prototype, "maxlength", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "min", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "max", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "step", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "autocapitalize", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "autocorrect", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "autocomplete", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({ type: Boolean })
 ], FlowInput.prototype, "autofocus", 2);
-__decorateClass$I([
+__decorateClass$J([
   property()
 ], FlowInput.prototype, "enterkeyhint", 2);
-__decorateClass$I([
+__decorateClass$J([
   property({
     type: Boolean,
     converter: {
@@ -7748,22 +7749,22 @@ __decorateClass$I([
     }
   })
 ], FlowInput.prototype, "spellcheck", 2);
-__decorateClass$I([
+__decorateClass$J([
   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 = css`
+const styles$I = css`
   ${componentStyles}
 
   :host(:not(:focus-within)) {
@@ -7779,15 +7780,15 @@ const styles$H = 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;
 };
 let FlowVisuallyHidden = class extends FlowRdfElement {
@@ -7795,12 +7796,12 @@ let FlowVisuallyHidden = class extends FlowRdfElement {
     return html` <slot></slot> `;
   }
 };
-FlowVisuallyHidden.styles = styles$H;
-FlowVisuallyHidden = __decorateClass$H([
+FlowVisuallyHidden.styles = styles$I;
+FlowVisuallyHidden = __decorateClass$I([
   customElement("flow-ui-visually-hidden")
 ], FlowVisuallyHidden);
 
-const styles$G = css`
+const styles$H = css`
   ${componentStyles}
 
   :host {
@@ -8133,15 +8134,15 @@ const styles$G = 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;
@@ -8925,114 +8926,114 @@ let FlowColorPicker = class extends FlowRdfElement {
     `;
   }
 };
-FlowColorPicker.styles = styles$G;
-__decorateClass$G([
+FlowColorPicker.styles = styles$H;
+__decorateClass$H([
   query('[part~="base"]')
 ], FlowColorPicker.prototype, "base", 2);
-__decorateClass$G([
+__decorateClass$H([
   query('[part~="input"]')
 ], FlowColorPicker.prototype, "input", 2);
-__decorateClass$G([
+__decorateClass$H([
   query(".color-dropdown")
 ], FlowColorPicker.prototype, "dropdown", 2);
-__decorateClass$G([
+__decorateClass$H([
   query('[part~="preview"]')
 ], FlowColorPicker.prototype, "previewButton", 2);
-__decorateClass$G([
+__decorateClass$H([
   query('[part~="trigger"]')
 ], FlowColorPicker.prototype, "trigger", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "hasFocus", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "isDraggingGridHandle", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "isEmpty", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "inputValue", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "hue", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "saturation", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "brightness", 2);
-__decorateClass$G([
+__decorateClass$H([
   state()
 ], FlowColorPicker.prototype, "alpha", 2);
-__decorateClass$G([
+__decorateClass$H([
   property()
 ], FlowColorPicker.prototype, "value", 2);
-__decorateClass$G([
+__decorateClass$H([
   defaultValue()
 ], FlowColorPicker.prototype, "defaultValue", 2);
-__decorateClass$G([
+__decorateClass$H([
   property()
 ], FlowColorPicker.prototype, "label", 2);
-__decorateClass$G([
+__decorateClass$H([
   property()
 ], FlowColorPicker.prototype, "format", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Boolean, reflect: true })
 ], FlowColorPicker.prototype, "inline", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ reflect: true })
 ], FlowColorPicker.prototype, "size", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ attribute: "no-format-toggle", type: Boolean })
 ], FlowColorPicker.prototype, "noFormatToggle", 2);
-__decorateClass$G([
+__decorateClass$H([
   property()
 ], FlowColorPicker.prototype, "name", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Boolean, reflect: true })
 ], FlowColorPicker.prototype, "disabled", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ reflect: true })
 ], FlowColorPicker.prototype, "placement", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Number })
 ], FlowColorPicker.prototype, "distance", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Number })
 ], FlowColorPicker.prototype, "skidding", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Boolean })
 ], FlowColorPicker.prototype, "hoist", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Boolean })
 ], FlowColorPicker.prototype, "opacity", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Boolean })
 ], FlowColorPicker.prototype, "uppercase", 2);
-__decorateClass$G([
+__decorateClass$H([
   property()
 ], FlowColorPicker.prototype, "swatches", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ reflect: true })
 ], FlowColorPicker.prototype, "form", 2);
-__decorateClass$G([
+__decorateClass$H([
   property({ type: Boolean, reflect: true })
 ], FlowColorPicker.prototype, "required", 2);
-__decorateClass$G([
+__decorateClass$H([
   watch("format", { waitUntilFirstUpdate: true })
 ], FlowColorPicker.prototype, "handleFormatChange", 1);
-__decorateClass$G([
+__decorateClass$H([
   watch("opacity", { waitUntilFirstUpdate: true })
 ], FlowColorPicker.prototype, "handleOpacityChange", 1);
-__decorateClass$G([
+__decorateClass$H([
   watch("value")
 ], FlowColorPicker.prototype, "handleValueChange", 1);
-FlowColorPicker = __decorateClass$G([
+FlowColorPicker = __decorateClass$H([
   customElement("flow-ui-color-picker")
 ], FlowColorPicker);
 
-const styles$F = css`
+const styles$G = css`
   ${componentStyles}
 
   :host {
@@ -9148,15 +9149,15 @@ const styles$F = 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 {
@@ -9211,24 +9212,24 @@ class FlowTag extends FlowRdfElement {
     `;
   }
 }
-FlowTag.styles = styles$F;
+FlowTag.styles = styles$G;
 FlowTag.dependencies = { "flow-icon-button": FlowIconButton };
-__decorateClass$F([
+__decorateClass$G([
   property({ reflect: true })
 ], FlowTag.prototype, "variant", 2);
-__decorateClass$F([
+__decorateClass$G([
   property({ reflect: true })
 ], FlowTag.prototype, "size", 2);
-__decorateClass$F([
+__decorateClass$G([
   property({ type: Boolean, reflect: true })
 ], FlowTag.prototype, "pill", 2);
-__decorateClass$F([
+__decorateClass$G([
   property({ type: Boolean })
 ], FlowTag.prototype, "removable", 2);
 
 FlowTag.define("flow-ui-tag");
 
-const styles$E = css`
+const styles$F = css`
   ${componentStyles}
   ${formControlStyles}
 
@@ -9483,15 +9484,15 @@ const styles$E = 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 = {
@@ -9884,98 +9885,98 @@ class FlowDatetimePicker extends FlowRdfElement {
     `;
   }
 }
-FlowDatetimePicker.styles = styles$E;
-__decorateClass$E([
+FlowDatetimePicker.styles = styles$F;
+__decorateClass$F([
   query(".datepicker")
 ], FlowDatetimePicker.prototype, "popup", 2);
-__decorateClass$E([
+__decorateClass$F([
   query(".datepicker__combobox")
 ], FlowDatetimePicker.prototype, "combobox", 2);
-__decorateClass$E([
+__decorateClass$F([
   query(".datepicker__display-input")
 ], FlowDatetimePicker.prototype, "displayInput", 2);
-__decorateClass$E([
+__decorateClass$F([
   query(".datepicker__value-input")
 ], FlowDatetimePicker.prototype, "valueInput", 2);
-__decorateClass$E([
+__decorateClass$F([
   query(".datepicker__calendar-container")
 ], FlowDatetimePicker.prototype, "calendarContainer", 2);
-__decorateClass$E([
+__decorateClass$F([
   state()
 ], FlowDatetimePicker.prototype, "hasFocus", 2);
-__decorateClass$E([
+__decorateClass$F([
   state()
 ], FlowDatetimePicker.prototype, "displayLabel", 2);
-__decorateClass$E([
+__decorateClass$F([
   property()
 ], FlowDatetimePicker.prototype, "name", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ reflect: true })
 ], FlowDatetimePicker.prototype, "value", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ attribute: "display-mode" })
 ], FlowDatetimePicker.prototype, "displayMode", 2);
-__decorateClass$E([
+__decorateClass$F([
   property()
 ], FlowDatetimePicker.prototype, "format", 2);
-__decorateClass$E([
+__decorateClass$F([
   property()
 ], FlowDatetimePicker.prototype, "timezone", 2);
-__decorateClass$E([
+__decorateClass$F([
   property()
 ], FlowDatetimePicker.prototype, "locale", 2);
-__decorateClass$E([
+__decorateClass$F([
   defaultValue()
 ], FlowDatetimePicker.prototype, "defaultValue", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ reflect: true })
 ], FlowDatetimePicker.prototype, "size", 2);
-__decorateClass$E([
+__decorateClass$F([
   property()
 ], FlowDatetimePicker.prototype, "placeholder", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "disabled", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ type: Boolean })
 ], FlowDatetimePicker.prototype, "clearable", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "open", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ type: Boolean })
 ], FlowDatetimePicker.prototype, "hoist", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "filled", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ type: Boolean, reflect: true })
 ], FlowDatetimePicker.prototype, "pill", 2);
-__decorateClass$E([
+__decorateClass$F([
   property()
 ], FlowDatetimePicker.prototype, "label", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ reflect: true })
 ], FlowDatetimePicker.prototype, "placement", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ attribute: "help-text" })
 ], FlowDatetimePicker.prototype, "helpText", 2);
-__decorateClass$E([
+__decorateClass$F([
   property({ reflect: true })
 ], FlowDatetimePicker.prototype, "form", 2);
-__decorateClass$E([
+__decorateClass$F([
   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", {
@@ -9995,7 +9996,7 @@ setDefaultAnimation("datetimepicker.hide", {
 
 FlowDatetimePicker.define("flow-ui-date-time-picker");
 
-const styles$D = css`
+const styles$E = css`
   ${componentStyles}
 
   :host {
@@ -10076,15 +10077,15 @@ const styles$D = 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;
 };
 let FlowDetails = class extends FlowRdfElement {
@@ -10212,32 +10213,32 @@ let FlowDetails = class extends FlowRdfElement {
     `;
   }
 };
-FlowDetails.styles = styles$D;
-__decorateClass$D([
+FlowDetails.styles = styles$E;
+__decorateClass$E([
   query(".details")
 ], FlowDetails.prototype, "details", 2);
-__decorateClass$D([
+__decorateClass$E([
   query(".details__header")
 ], FlowDetails.prototype, "header", 2);
-__decorateClass$D([
+__decorateClass$E([
   query(".details__body")
 ], FlowDetails.prototype, "body", 2);
-__decorateClass$D([
+__decorateClass$E([
   query(".details__expand-icon-slot")
 ], FlowDetails.prototype, "expandIconSlot", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ type: Boolean, reflect: true })
 ], FlowDetails.prototype, "open", 2);
-__decorateClass$D([
+__decorateClass$E([
   property()
 ], FlowDetails.prototype, "summary", 2);
-__decorateClass$D([
+__decorateClass$E([
   property({ type: Boolean, reflect: true })
 ], FlowDetails.prototype, "disabled", 2);
-__decorateClass$D([
+__decorateClass$E([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDetails.prototype, "handleOpenChange", 1);
-FlowDetails = __decorateClass$D([
+FlowDetails = __decorateClass$E([
   customElement("flow-ui-details")
 ], FlowDetails);
 setDefaultAnimation("details.show", {
@@ -10355,7 +10356,7 @@ function scrollIntoView(element, container, direction = "vertical", behavior = "
   }
 }
 
-const styles$C = css`
+const styles$D = css`
   ${componentStyles}
 
   :host {
@@ -10476,15 +10477,15 @@ const styles$C = 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;
 };
 let FlowDialog = class extends FlowRdfElement {
@@ -10664,29 +10665,29 @@ let FlowDialog = class extends FlowRdfElement {
     `;
   }
 };
-FlowDialog.styles = styles$C;
-__decorateClass$C([
+FlowDialog.styles = styles$D;
+__decorateClass$D([
   query(".dialog")
 ], FlowDialog.prototype, "dialog", 2);
-__decorateClass$C([
+__decorateClass$D([
   query(".dialog__panel")
 ], FlowDialog.prototype, "panel", 2);
-__decorateClass$C([
+__decorateClass$D([
   query(".dialog__overlay")
 ], FlowDialog.prototype, "overlay", 2);
-__decorateClass$C([
+__decorateClass$D([
   property({ type: Boolean, reflect: true })
 ], FlowDialog.prototype, "open", 2);
-__decorateClass$C([
+__decorateClass$D([
   property({ reflect: true })
 ], FlowDialog.prototype, "label", 2);
-__decorateClass$C([
+__decorateClass$D([
   property({ attribute: "no-header", type: Boolean, reflect: true })
 ], FlowDialog.prototype, "noHeader", 2);
-__decorateClass$C([
+__decorateClass$D([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDialog.prototype, "handleOpenChange", 1);
-FlowDialog = __decorateClass$C([
+FlowDialog = __decorateClass$D([
   customElement("flow-ui-dialog")
 ], FlowDialog);
 setDefaultAnimation("dialog.show", {
@@ -10716,7 +10717,7 @@ setDefaultAnimation("dialog.overlay.hide", {
   options: { duration: 250 }
 });
 
-const styles$B = css`
+const styles$C = css`
   ${componentStyles}
 
   :host {
@@ -10746,15 +10747,15 @@ const styles$B = 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;
 };
 let FlowDivider = class extends FlowRdfElement {
@@ -10775,14 +10776,14 @@ let FlowDivider = class extends FlowRdfElement {
     }
   */
 };
-FlowDivider.styles = styles$B;
-__decorateClass$B([
+FlowDivider.styles = styles$C;
+__decorateClass$C([
   property({ type: Boolean, reflect: true })
 ], FlowDivider.prototype, "vertical", 2);
-__decorateClass$B([
+__decorateClass$C([
   watch("vertical")
 ], FlowDivider.prototype, "handleVerticalChange", 1);
-FlowDivider = __decorateClass$B([
+FlowDivider = __decorateClass$C([
   customElement("flow-ui-divider")
 ], FlowDivider);
 
@@ -10790,7 +10791,7 @@ function uppercaseFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-const styles$A = css`
+const styles$B = css`
   ${componentStyles}
 
   :host {
@@ -10947,15 +10948,15 @@ const styles$A = 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;
 };
 let FlowDrawer = class extends FlowRdfElement {
@@ -11165,38 +11166,38 @@ let FlowDrawer = class extends FlowRdfElement {
     `;
   }
 };
-FlowDrawer.styles = styles$A;
-__decorateClass$A([
+FlowDrawer.styles = styles$B;
+__decorateClass$B([
   query(".drawer")
 ], FlowDrawer.prototype, "drawer", 2);
-__decorateClass$A([
+__decorateClass$B([
   query(".drawer__panel")
 ], FlowDrawer.prototype, "panel", 2);
-__decorateClass$A([
+__decorateClass$B([
   query(".drawer__overlay")
 ], FlowDrawer.prototype, "overlay", 2);
-__decorateClass$A([
+__decorateClass$B([
   property({ type: Boolean, reflect: true })
 ], FlowDrawer.prototype, "open", 2);
-__decorateClass$A([
+__decorateClass$B([
   property({ reflect: true })
 ], FlowDrawer.prototype, "label", 2);
-__decorateClass$A([
+__decorateClass$B([
   property({ reflect: true })
 ], FlowDrawer.prototype, "placement", 2);
-__decorateClass$A([
+__decorateClass$B([
   property({ type: Boolean, reflect: true })
 ], FlowDrawer.prototype, "contained", 2);
-__decorateClass$A([
+__decorateClass$B([
   property({ attribute: "no-header", type: Boolean, reflect: true })
 ], FlowDrawer.prototype, "noHeader", 2);
-__decorateClass$A([
+__decorateClass$B([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDrawer.prototype, "handleOpenChange", 1);
-__decorateClass$A([
+__decorateClass$B([
   watch("contained", { waitUntilFirstUpdate: true })
 ], FlowDrawer.prototype, "handleNoModalChange", 1);
-FlowDrawer = __decorateClass$A([
+FlowDrawer = __decorateClass$B([
   customElement("flow-ui-drawer")
 ], FlowDrawer);
 setDefaultAnimation("drawer.showTop", {
@@ -11284,7 +11285,7 @@ setDefaultAnimation("drawer.overlay.hide", {
   options: { duration: 250 }
 });
 
-const styles$z = css`
+const styles$A = css`
   ${componentStyles}
 
   :host {
@@ -11406,15 +11407,15 @@ const styles$z = 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();
@@ -11518,29 +11519,29 @@ class FlowGauge extends FlowRdfElement {
     `;
   }
 }
-FlowGauge.styles = styles$z;
-__decorateClass$z([
+FlowGauge.styles = styles$A;
+__decorateClass$A([
   query(".gauge__info-dialog")
 ], FlowGauge.prototype, "_infoDialog", 2);
-__decorateClass$z([
+__decorateClass$A([
   property()
 ], FlowGauge.prototype, "heading", 2);
-__decorateClass$z([
+__decorateClass$A([
   property()
 ], FlowGauge.prototype, "units", 2);
-__decorateClass$z([
+__decorateClass$A([
   property()
 ], FlowGauge.prototype, "value", 2);
-__decorateClass$z([
+__decorateClass$A([
   property()
 ], FlowGauge.prototype, "icon", 2);
-__decorateClass$z([
+__decorateClass$A([
   property({ attribute: "icon-library" })
 ], FlowGauge.prototype, "iconLibrary", 2);
-__decorateClass$z([
+__decorateClass$A([
   property()
 ], FlowGauge.prototype, "format", 2);
-__decorateClass$z([
+__decorateClass$A([
   watch("format")
 ], FlowGauge.prototype, "handleFormatChange", 1);
 
@@ -11550,6 +11551,262 @@ FlowIconButton.define("flow-ui-icon-button");
 
 FlowIcon.define("flow-ui-icon");
 
+const styles$z = 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 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 html`
+      <div
+        part="base"
+        class=${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({ "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([
+  state()
+], FlowUiMap.prototype, "_mapLoading", 2);
+__decorateClass$z([
+  property({ attribute: "map-id" })
+], FlowUiMap.prototype, "mapId", 2);
+__decorateClass$z([
+  property({ attribute: "base-style" })
+], FlowUiMap.prototype, "baseStyle", 2);
+__decorateClass$z([
+  property({
+    converter: {
+      fromAttribute: (value) => value.split(",").map((n) => parseFloat(n)),
+      toAttribute: (value) => value.map((n) => n.toString()).join(",")
+    }
+  })
+], FlowUiMap.prototype, "center", 2);
+__decorateClass$z([
+  property({ type: Number })
+], FlowUiMap.prototype, "zoom", 2);
+__decorateClass$z([
+  property({ type: Number })
+], FlowUiMap.prototype, "bearing", 2);
+__decorateClass$z([
+  property({ type: Number })
+], FlowUiMap.prototype, "pitch", 2);
+__decorateClass$z([
+  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 = css`
   ${componentStyles}
 
@@ -23403,7 +23660,7 @@ const translation = {
 };
 registerTranslation(translation);
 
-const version = "0.0.38";
+const version = "0.0.40";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
@@ -23416,4 +23673,4 @@ function announce() {
 
 announce();
 
-export { FlowAlert, SlAnimation as FlowAnimation, FlowAvatar, FlowBadge, FlowBreadcrumb, FlowBreadcrumbItem, FlowButton, FlowButtonGroup, FlowCalendar, FlowCard, FlowCarousel, FlowCarouselItem, FlowChart, FlowCheckbox, FlowColorMapper, FlowColorPicker, FlowColorStopComponent as FlowColorStop, FlowDatetimePicker as FlowDateTimePicker, FlowDetails, FlowDialog, FlowDivider, FlowDrawer, SlDropdown as FlowDropdown, FlowGauge, FlowIcon, FlowIconButton, FlowInput, FlowMenu, FlowMenuItem, FlowMenuLabel, FlowMutationObserver, FlowNumberStepper, FlowOption, FlowPanel, FlowPanelHeader, SlPopup as FlowPopup, FlowProgressBar, FlowProgressRing, FlowQueryBuilder, FlowRadio, FlowRadioGroup, FlowRange, FlowResizeObserver, FlowScrollView, FlowSelect, FlowSpinner, FlowSplitView, FlowPanelDivider as FlowSplitViewDivider, FlowSplitViewPane, FlowSplitViewToggleButton, FlowStepper, FlowStepperPanel, FlowSwitch, FlowTab, FlowTabGroup, FlowTabPanel, FlowTag, FlowTextarea, FlowTimer, FlowToolButton, FlowToolButtonGroup, FlowTooltip, FlowTree, FlowTreeItem, FlowVisuallyHidden, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, getAnimationNames, getBasePath, getEasingNames, initializeChartJs, registerChartComponent, registerIconLibrary, setBasePath, setDefaultLocale, setDefaultTimeZone, unregisterIconLibrary };
+export { FlowAlert, SlAnimation as FlowAnimation, FlowAvatar, FlowBadge, FlowBreadcrumb, FlowBreadcrumbItem, FlowButton, FlowButtonGroup, FlowCalendar, FlowCard, FlowCarousel, FlowCarouselItem, FlowChart, FlowCheckbox, FlowColorMapper, FlowColorPicker, FlowColorStopComponent as FlowColorStop, FlowDatetimePicker as FlowDateTimePicker, FlowDetails, FlowDialog, FlowDivider, FlowDrawer, SlDropdown as FlowDropdown, FlowGauge, FlowIcon, FlowIconButton, FlowInput, FlowUiMap as FlowMap, FlowMenu, FlowMenuItem, FlowMenuLabel, FlowMutationObserver, FlowNumberStepper, FlowOption, FlowPanel, FlowPanelHeader, SlPopup as FlowPopup, FlowProgressBar, FlowProgressRing, FlowQueryBuilder, FlowRadio, FlowRadioGroup, FlowRange, FlowResizeObserver, FlowScrollView, FlowSelect, FlowSpinner, FlowSplitView, FlowPanelDivider as FlowSplitViewDivider, FlowSplitViewPane, FlowSplitViewToggleButton, FlowStepper, FlowStepperPanel, FlowSwitch, FlowTab, FlowTabGroup, FlowTabPanel, FlowTag, FlowTextarea, FlowTimer, FlowToolButton, FlowToolButtonGroup, FlowTooltip, FlowTree, FlowTreeItem, FlowVisuallyHidden, addIcons, colorMapperValueToMaplibreExpression, escapeMaplibreString, getAnimationNames, getBasePath, getEasingNames, initializeChartJs, registerChartComponent, registerIconLibrary, setBasePath, setDefaultLocale, setDefaultTimeZone, unregisterIconLibrary };