@emuanalytics/flow-rdf-ui 0.0.5 → 0.0.6

package/dist/flow-rdf-ui.js

@@ -771,15 +771,15 @@ function waitForEvent(el, eventName) {
     el.addEventListener(eventName, done);
   });
 }
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$Q(target, key, result);
+    __defProp$S(target, key, result);
   return result;
 };
 class FlowRdfElement extends s$3 {
@@ -803,10 +803,10 @@ class FlowRdfElement extends s$3 {
     }
   }
 }
-__decorateClass$Q([
+__decorateClass$S([
   n$5()
 ], FlowRdfElement.prototype, "dir", 2);
-__decorateClass$Q([
+__decorateClass$S([
   n$5()
 ], FlowRdfElement.prototype, "lang", 2);
 class HasSlotController {
@@ -1072,7 +1072,7 @@ const componentStyles = i$7`
     display: none !important;
   }
 `;
-const styles$N = i$7`
+const styles$P = i$7`
   ${componentStyles}
 
   :host {
@@ -1263,15 +1263,15 @@ function registerIconLibrary(name, options) {
 function unregisterIconLibrary(name) {
   registry = registry.filter((lib) => lib.name !== name);
 }
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$P(target, key, result);
+    __defProp$R(target, key, result);
   return result;
 };
 const CACHEABLE_ERROR = Symbol();
@@ -1380,29 +1380,29 @@ let FlowIcon = class extends FlowRdfElement {
     return this.svg;
   }
 };
-FlowIcon.styles = styles$N;
-__decorateClass$P([
+FlowIcon.styles = styles$P;
+__decorateClass$R([
   t$2()
 ], FlowIcon.prototype, "svg", 2);
-__decorateClass$P([
+__decorateClass$R([
   n$5({ reflect: true })
 ], FlowIcon.prototype, "name", 2);
-__decorateClass$P([
+__decorateClass$R([
   n$5()
 ], FlowIcon.prototype, "src", 2);
-__decorateClass$P([
+__decorateClass$R([
   n$5()
 ], FlowIcon.prototype, "label", 2);
-__decorateClass$P([
+__decorateClass$R([
   n$5({ reflect: true })
 ], FlowIcon.prototype, "library", 2);
-__decorateClass$P([
+__decorateClass$R([
   watch("label")
 ], FlowIcon.prototype, "handleLabelChange", 1);
-__decorateClass$P([
+__decorateClass$R([
   watch(["name", "src", "library"])
 ], FlowIcon.prototype, "setIcon", 1);
-FlowIcon = __decorateClass$P([
+FlowIcon = __decorateClass$R([
   e$6("flow-ui-icon")
 ], FlowIcon);
 const min = Math.min;
@@ -2328,7 +2328,7 @@ function r(t2) {
   }
   return null;
 }
-const styles$M = i$7`
+const styles$O = i$7`
   ${componentStyles}
 
   :host {
@@ -2369,15 +2369,15 @@ const styles$M = i$7`
     z-index: -1;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$O(target, key, result);
+    __defProp$Q(target, key, result);
   return result;
 };
 let FlowPopup = class extends FlowRdfElement {
@@ -2611,44 +2611,44 @@ let FlowPopup = class extends FlowRdfElement {
     `;
   }
 };
-FlowPopup.styles = styles$M;
-__decorateClass$O([
+FlowPopup.styles = styles$O;
+__decorateClass$Q([
   i$4(".popup")
 ], FlowPopup.prototype, "popup", 2);
-__decorateClass$O([
+__decorateClass$Q([
   i$4(".popup__arrow")
 ], FlowPopup.prototype, "arrowEl", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5()
 ], FlowPopup.prototype, "anchor", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Boolean, reflect: true })
 ], FlowPopup.prototype, "active", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ reflect: true })
 ], FlowPopup.prototype, "placement", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ reflect: true })
 ], FlowPopup.prototype, "strategy", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Number })
 ], FlowPopup.prototype, "distance", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Number })
 ], FlowPopup.prototype, "skidding", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Boolean })
 ], FlowPopup.prototype, "arrow", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ attribute: "arrow-placement" })
 ], FlowPopup.prototype, "arrowPlacement", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ attribute: "arrow-padding", type: Number })
 ], FlowPopup.prototype, "arrowPadding", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Boolean })
 ], FlowPopup.prototype, "flip", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({
     attribute: "flip-fallback-placements",
     converter: {
@@ -2661,40 +2661,40 @@ __decorateClass$O([
     }
   })
 ], FlowPopup.prototype, "flipFallbackPlacements", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ attribute: "flip-fallback-strategy" })
 ], FlowPopup.prototype, "flipFallbackStrategy", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Object })
 ], FlowPopup.prototype, "flipBoundary", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ attribute: "flip-padding", type: Number })
 ], FlowPopup.prototype, "flipPadding", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Boolean })
 ], FlowPopup.prototype, "shift", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Object })
 ], FlowPopup.prototype, "shiftBoundary", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ attribute: "shift-padding", type: Number })
 ], FlowPopup.prototype, "shiftPadding", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ attribute: "auto-size" })
 ], FlowPopup.prototype, "autoSize", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5()
 ], FlowPopup.prototype, "sync", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ type: Object })
 ], FlowPopup.prototype, "autoSizeBoundary", 2);
-__decorateClass$O([
+__decorateClass$Q([
   n$5({ attribute: "auto-size-padding", type: Number })
 ], FlowPopup.prototype, "autoSizePadding", 2);
-FlowPopup = __decorateClass$O([
+FlowPopup = __decorateClass$Q([
   e$6("flow-ui-popup")
 ], FlowPopup);
-const styles$L = i$7`
+const styles$N = i$7`
   ${componentStyles}
 
   :host {
@@ -2746,15 +2746,15 @@ const styles$L = i$7`
     pointer-events: none;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$N(target, key, result);
+    __defProp$P(target, key, result);
   return result;
 };
 let FlowTooltip = class extends FlowRdfElement {
@@ -2931,50 +2931,50 @@ let FlowTooltip = class extends FlowRdfElement {
     `;
   }
 };
-FlowTooltip.styles = styles$L;
-__decorateClass$N([
+FlowTooltip.styles = styles$N;
+__decorateClass$P([
   i$4("slot:not([name])")
 ], FlowTooltip.prototype, "defaultSlot", 2);
-__decorateClass$N([
+__decorateClass$P([
   i$4(".tooltip__body")
 ], FlowTooltip.prototype, "body", 2);
-__decorateClass$N([
+__decorateClass$P([
   i$4("flow-ui-popup")
 ], FlowTooltip.prototype, "popup", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5()
 ], FlowTooltip.prototype, "content", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5()
 ], FlowTooltip.prototype, "placement", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5({ type: Boolean, reflect: true })
 ], FlowTooltip.prototype, "disabled", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5({ type: Number })
 ], FlowTooltip.prototype, "distance", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5({ type: Boolean, reflect: true })
 ], FlowTooltip.prototype, "open", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5({ type: Number })
 ], FlowTooltip.prototype, "skidding", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5()
 ], FlowTooltip.prototype, "trigger", 2);
-__decorateClass$N([
+__decorateClass$P([
   n$5({ type: Boolean })
 ], FlowTooltip.prototype, "hoist", 2);
-__decorateClass$N([
+__decorateClass$P([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowTooltip.prototype, "handleOpenChange", 1);
-__decorateClass$N([
+__decorateClass$P([
   watch(["content", "distance", "hoist", "placement", "skidding"])
 ], FlowTooltip.prototype, "handleOptionsChange", 1);
-__decorateClass$N([
+__decorateClass$P([
   watch("disabled")
 ], FlowTooltip.prototype, "handleDisabledChange", 1);
-FlowTooltip = __decorateClass$N([
+FlowTooltip = __decorateClass$P([
   e$6("flow-ui-tooltip")
 ], FlowTooltip);
 setDefaultAnimation("tooltip.show", {
@@ -2991,7 +2991,7 @@ setDefaultAnimation("tooltip.hide", {
   ],
   options: { duration: 150, easing: "ease" }
 });
-const styles$K = i$7`
+const styles$M = i$7`
   ${componentStyles}
 
   :host {
@@ -3050,6 +3050,11 @@ const styles$K = i$7`
     font-size: var(--icon-size);
   }
 
+  /* Tooltip */
+  .icon-button__tooltip {
+    --show-delay: var(--flow-ui-button-tooltip-delay);
+  }
+
   /* Icon button with confirmation */
   .icon-button__tooltip--confirm::part(body) {
     padding: var(--flow-ui-spacing-2x-small);
@@ -3059,16 +3064,17 @@ const styles$K = i$7`
   .icon-button__tooltip--confirm .confirm__label {
     margin-inline: var(--flow-ui-spacing-x-small);
   }
+
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$M(target, key, result);
+    __defProp$O(target, key, result);
   return result;
 };
 class FlowIconButton extends FlowRdfElement {
@@ -3231,59 +3237,59 @@ class FlowIconButton extends FlowRdfElement {
     }
   }
 }
-FlowIconButton.styles = styles$K;
-__decorateClass$M([
+FlowIconButton.styles = styles$M;
+__decorateClass$O([
   i$4(".icon-button")
 ], FlowIconButton.prototype, "button", 2);
-__decorateClass$M([
+__decorateClass$O([
   i$4(".icon-button__tooltip")
 ], FlowIconButton.prototype, "tooltipElem", 2);
-__decorateClass$M([
+__decorateClass$O([
   i$4(".icon-button__confirm_button")
 ], FlowIconButton.prototype, "confirmButton", 2);
-__decorateClass$M([
+__decorateClass$O([
   t$2()
 ], FlowIconButton.prototype, "hasFocus", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "name", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "library", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "src", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "href", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "target", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "download", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "label", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "tooltip", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5({ attribute: "tooltip-placement" })
 ], FlowIconButton.prototype, "tooltipPlacement", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5({ attribute: "tooltip-distance", type: Number })
 ], FlowIconButton.prototype, "tooltipDistance", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5({ attribute: "tooltip-skidding", type: Number })
 ], FlowIconButton.prototype, "tooltipSkidding", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5({ type: Boolean, reflect: true })
 ], FlowIconButton.prototype, "disabled", 2);
-__decorateClass$M([
+__decorateClass$O([
   n$5()
 ], FlowIconButton.prototype, "confirm", 2);
-const styles$J = i$7`
+const styles$L = i$7`
   ${componentStyles}
 
   :host {
@@ -3377,15 +3383,15 @@ const styles$J = i$7`
     padding-inline-end: var(--flow-ui-spacing-medium);
   }
 `;
-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;
+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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$L(target, key, result);
+    __defProp$N(target, key, result);
   return result;
 };
 const toastStack = Object.assign(document.createElement("div"), { className: "flow-ui-toast-stack" });
@@ -3520,29 +3526,29 @@ let FlowAlert = class extends FlowRdfElement {
     `;
   }
 };
-FlowAlert.styles = styles$J;
-__decorateClass$L([
+FlowAlert.styles = styles$L;
+__decorateClass$N([
   i$4('[part~="base"]')
 ], FlowAlert.prototype, "base", 2);
-__decorateClass$L([
+__decorateClass$N([
   n$5({ type: Boolean, reflect: true })
 ], FlowAlert.prototype, "open", 2);
-__decorateClass$L([
+__decorateClass$N([
   n$5({ type: Boolean, reflect: true })
 ], FlowAlert.prototype, "closable", 2);
-__decorateClass$L([
+__decorateClass$N([
   n$5({ reflect: true })
 ], FlowAlert.prototype, "variant", 2);
-__decorateClass$L([
+__decorateClass$N([
   n$5({ type: Number })
 ], FlowAlert.prototype, "duration", 2);
-__decorateClass$L([
+__decorateClass$N([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowAlert.prototype, "handleOpenChange", 1);
-__decorateClass$L([
+__decorateClass$N([
   watch("duration")
 ], FlowAlert.prototype, "handleDurationChange", 1);
-FlowAlert = __decorateClass$L([
+FlowAlert = __decorateClass$N([
   e$6("flow-ui-alert")
 ], FlowAlert);
 setDefaultAnimation("alert.show", {
@@ -3559,7 +3565,7 @@ setDefaultAnimation("alert.hide", {
   ],
   options: { duration: 250, easing: "ease" }
 });
-const styles$I = i$7`
+const styles$K = i$7`
   ${componentStyles}
 
   :host {
@@ -4334,15 +4340,15 @@ function getAnimationNames() {
 function getEasingNames() {
   return Object.entries(easings).map(([name]) => name);
 }
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$K(target, key, result);
+    __defProp$M(target, key, result);
   return result;
 };
 let FlowAnimation = class extends FlowRdfElement {
@@ -4473,47 +4479,47 @@ let FlowAnimation = class extends FlowRdfElement {
     return x$1` <slot @slotchange=${this.handleSlotChange}></slot> `;
   }
 };
-FlowAnimation.styles = styles$I;
-__decorateClass$K([
+FlowAnimation.styles = styles$K;
+__decorateClass$M([
   e$3("slot")
 ], FlowAnimation.prototype, "defaultSlot", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5()
 ], FlowAnimation.prototype, "name", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ type: Boolean, reflect: true })
 ], FlowAnimation.prototype, "play", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ type: Number })
 ], FlowAnimation.prototype, "delay", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5()
 ], FlowAnimation.prototype, "direction", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ type: Number })
 ], FlowAnimation.prototype, "duration", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5()
 ], FlowAnimation.prototype, "easing", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ attribute: "end-delay", type: Number })
 ], FlowAnimation.prototype, "endDelay", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5()
 ], FlowAnimation.prototype, "fill", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ type: Number })
 ], FlowAnimation.prototype, "iterations", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ attribute: "iteration-start", type: Number })
 ], FlowAnimation.prototype, "iterationStart", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ attribute: false })
 ], FlowAnimation.prototype, "keyframes", 2);
-__decorateClass$K([
+__decorateClass$M([
   n$5({ attribute: "playback-rate", type: Number })
 ], FlowAnimation.prototype, "playbackRate", 2);
-__decorateClass$K([
+__decorateClass$M([
   watch([
     "name",
     "delay",
@@ -4527,16 +4533,16 @@ __decorateClass$K([
     "keyframes"
   ])
 ], FlowAnimation.prototype, "handleAnimationChange", 1);
-__decorateClass$K([
+__decorateClass$M([
   watch("play")
 ], FlowAnimation.prototype, "handlePlayChange", 1);
-__decorateClass$K([
+__decorateClass$M([
   watch("playbackRate")
 ], FlowAnimation.prototype, "handlePlaybackRateChange", 1);
-FlowAnimation = __decorateClass$K([
+FlowAnimation = __decorateClass$M([
   e$6("flow-ui-animation")
 ], FlowAnimation);
-const styles$H = i$7`
+const styles$J = i$7`
   ${componentStyles}
 
   :host {
@@ -4601,15 +4607,15 @@ const styles$H = i$7`
     overflow: hidden;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$J(target, key, result);
+    __defProp$L(target, key, result);
   return result;
 };
 let FlowAvatar = class extends FlowRdfElement {
@@ -4663,32 +4669,32 @@ let FlowAvatar = class extends FlowRdfElement {
     `;
   }
 };
-FlowAvatar.styles = styles$H;
-__decorateClass$J([
+FlowAvatar.styles = styles$J;
+__decorateClass$L([
   t$2()
 ], FlowAvatar.prototype, "hasError", 2);
-__decorateClass$J([
+__decorateClass$L([
   n$5()
 ], FlowAvatar.prototype, "image", 2);
-__decorateClass$J([
+__decorateClass$L([
   n$5()
 ], FlowAvatar.prototype, "label", 2);
-__decorateClass$J([
+__decorateClass$L([
   n$5()
 ], FlowAvatar.prototype, "initials", 2);
-__decorateClass$J([
+__decorateClass$L([
   n$5()
 ], FlowAvatar.prototype, "loading", 2);
-__decorateClass$J([
+__decorateClass$L([
   n$5({ reflect: true })
 ], FlowAvatar.prototype, "shape", 2);
-__decorateClass$J([
+__decorateClass$L([
   watch("image")
 ], FlowAvatar.prototype, "handleImageChange", 1);
-FlowAvatar = __decorateClass$J([
+FlowAvatar = __decorateClass$L([
   e$6("flow-ui-avatar")
 ], FlowAvatar);
-const styles$G = i$7`
+const styles$I = i$7`
   ${componentStyles}
 
   :host {
@@ -4779,15 +4785,15 @@ const styles$G = i$7`
     }
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$I(target, key, result);
+    __defProp$K(target, key, result);
   return result;
 };
 let FlowBadge = class extends FlowRdfElement {
@@ -4816,20 +4822,20 @@ let FlowBadge = class extends FlowRdfElement {
     `;
   }
 };
-FlowBadge.styles = styles$G;
-__decorateClass$I([
+FlowBadge.styles = styles$I;
+__decorateClass$K([
   n$5({ reflect: true })
 ], FlowBadge.prototype, "variant", 2);
-__decorateClass$I([
+__decorateClass$K([
   n$5({ type: Boolean, reflect: true })
 ], FlowBadge.prototype, "pill", 2);
-__decorateClass$I([
+__decorateClass$K([
   n$5({ type: Boolean, reflect: true })
 ], FlowBadge.prototype, "pulse", 2);
-FlowBadge = __decorateClass$I([
+FlowBadge = __decorateClass$K([
   e$6("flow-ui-badge")
 ], FlowBadge);
-const styles$F = i$7`
+const styles$H = i$7`
   ${componentStyles}
 
   :host {
@@ -4914,15 +4920,15 @@ const styles$F = i$7`
     user-select: none;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$H(target, key, result);
+    __defProp$J(target, key, result);
   return result;
 };
 let FlowBreadcrumbItem = class extends FlowRdfElement {
@@ -4967,20 +4973,20 @@ let FlowBreadcrumbItem = class extends FlowRdfElement {
     `;
   }
 };
-FlowBreadcrumbItem.styles = styles$F;
-__decorateClass$H([
+FlowBreadcrumbItem.styles = styles$H;
+__decorateClass$J([
   n$5()
 ], FlowBreadcrumbItem.prototype, "href", 2);
-__decorateClass$H([
+__decorateClass$J([
   n$5()
 ], FlowBreadcrumbItem.prototype, "target", 2);
-__decorateClass$H([
+__decorateClass$J([
   n$5()
 ], FlowBreadcrumbItem.prototype, "rel", 2);
-FlowBreadcrumbItem = __decorateClass$H([
+FlowBreadcrumbItem = __decorateClass$J([
   e$6("flow-ui-breadcrumb-item")
 ], FlowBreadcrumbItem);
-const styles$E = i$7`
+const styles$G = i$7`
   ${componentStyles}
 
   .breadcrumb {
@@ -4989,15 +4995,15 @@ const styles$E = i$7`
     flex-wrap: wrap;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$G(target, key, result);
+    __defProp$I(target, key, result);
   return result;
 };
 let FlowBreadcrumb = class extends FlowRdfElement {
@@ -5051,20 +5057,20 @@ let FlowBreadcrumb = class extends FlowRdfElement {
     `;
   }
 };
-FlowBreadcrumb.styles = styles$E;
-__decorateClass$G([
+FlowBreadcrumb.styles = styles$G;
+__decorateClass$I([
   i$4("slot")
 ], FlowBreadcrumb.prototype, "defaultSlot", 2);
-__decorateClass$G([
+__decorateClass$I([
   i$4('slot[name="separator"]')
 ], FlowBreadcrumb.prototype, "separatorSlot", 2);
-__decorateClass$G([
+__decorateClass$I([
   n$5()
 ], FlowBreadcrumb.prototype, "label", 2);
-FlowBreadcrumb = __decorateClass$G([
+FlowBreadcrumb = __decorateClass$I([
   e$6("flow-ui-breadcrumb")
 ], FlowBreadcrumb);
-const styles$D = i$7`
+const styles$F = i$7`
   ${componentStyles}
 
   :host {
@@ -5080,15 +5086,15 @@ const styles$D = i$7`
     flex-direction: column;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$F(target, key, result);
+    __defProp$H(target, key, result);
   return result;
 };
 let FlowButtonGroup = class extends FlowRdfElement {
@@ -5151,23 +5157,23 @@ let FlowButtonGroup = class extends FlowRdfElement {
     `;
   }
 };
-FlowButtonGroup.styles = styles$D;
-__decorateClass$F([
+FlowButtonGroup.styles = styles$F;
+__decorateClass$H([
   i$4("slot")
 ], FlowButtonGroup.prototype, "defaultSlot", 2);
-__decorateClass$F([
+__decorateClass$H([
   t$2()
 ], FlowButtonGroup.prototype, "disableRole", 2);
-__decorateClass$F([
+__decorateClass$H([
   n$5()
 ], FlowButtonGroup.prototype, "label", 2);
-__decorateClass$F([
+__decorateClass$H([
   n$5({ type: Boolean, reflect: true })
 ], FlowButtonGroup.prototype, "vertical", 2);
-__decorateClass$F([
+__decorateClass$H([
   watch("vertical", { waitUntilFirstUpdate: true })
 ], FlowButtonGroup.prototype, "handleVerticalChange", 1);
-FlowButtonGroup = __decorateClass$F([
+FlowButtonGroup = __decorateClass$H([
   e$6("flow-ui-button-group")
 ], FlowButtonGroup);
 function findButton(el) {
@@ -5438,7 +5444,7 @@ const customErrorValidityState = Object.freeze({
   valid: false,
   customError: true
 });
-const styles$C = i$7`
+const styles$E = i$7`
   ${componentStyles}
 
   :host {
@@ -5497,15 +5503,15 @@ const styles$C = i$7`
     }
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$E(target, key, result);
+    __defProp$G(target, key, result);
   return result;
 };
 let FlowSpinner = class extends FlowRdfElement {
@@ -5522,8 +5528,8 @@ let FlowSpinner = class extends FlowRdfElement {
     `;
   }
 };
-FlowSpinner.styles = styles$C;
-FlowSpinner = __decorateClass$E([
+FlowSpinner.styles = styles$E;
+FlowSpinner = __decorateClass$G([
   e$6("flow-ui-spinner")
 ], FlowSpinner);
 const buttonStyles = i$7`
@@ -6166,15 +6172,15 @@ const buttonStyles = i$7`
     z-index: 3;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$D(target, key, result);
+    __defProp$F(target, key, result);
   return result;
 };
 let FlowButton = class extends FlowRdfElement {
@@ -6371,88 +6377,88 @@ let FlowButton = class extends FlowRdfElement {
   }
 };
 FlowButton.styles = buttonStyles;
-__decorateClass$D([
+__decorateClass$F([
   i$4(".button")
 ], FlowButton.prototype, "button", 2);
-__decorateClass$D([
+__decorateClass$F([
   t$2()
 ], FlowButton.prototype, "hasFocus", 2);
-__decorateClass$D([
+__decorateClass$F([
   t$2()
 ], FlowButton.prototype, "invalid", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "title", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ reflect: true })
 ], FlowButton.prototype, "variant", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ reflect: true })
 ], FlowButton.prototype, "size", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ type: Boolean, reflect: true })
 ], FlowButton.prototype, "caret", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ type: Boolean, reflect: true })
 ], FlowButton.prototype, "disabled", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ type: Boolean, reflect: true })
 ], FlowButton.prototype, "loading", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ type: Boolean, reflect: true })
 ], FlowButton.prototype, "outline", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ type: Boolean, reflect: true })
 ], FlowButton.prototype, "pill", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ type: Boolean, reflect: true })
 ], FlowButton.prototype, "circle", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "type", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "name", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "value", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "href", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "target", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "rel", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "download", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5()
 ], FlowButton.prototype, "form", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ attribute: "formaction" })
 ], FlowButton.prototype, "formAction", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ attribute: "formenctype" })
 ], FlowButton.prototype, "formEnctype", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ attribute: "formmethod" })
 ], FlowButton.prototype, "formMethod", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ attribute: "formnovalidate", type: Boolean })
 ], FlowButton.prototype, "formNoValidate", 2);
-__decorateClass$D([
+__decorateClass$F([
   n$5({ attribute: "formtarget" })
 ], FlowButton.prototype, "formTarget", 2);
-__decorateClass$D([
+__decorateClass$F([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowButton.prototype, "handleDisabledChange", 1);
-FlowButton = __decorateClass$D([
+FlowButton = __decorateClass$F([
   e$6("flow-ui-button")
 ], FlowButton);
-const styles$B = i$7`
+const styles$D = i$7`
   ${componentStyles}
 
   :host {
@@ -6520,15 +6526,15 @@ const styles$B = i$7`
     display: none;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$C(target, key, result);
+    __defProp$E(target, key, result);
   return result;
 };
 let FlowCard = class extends FlowRdfElement {
@@ -6555,11 +6561,11 @@ let FlowCard = class extends FlowRdfElement {
     `;
   }
 };
-FlowCard.styles = styles$B;
-FlowCard = __decorateClass$C([
+FlowCard.styles = styles$D;
+FlowCard = __decorateClass$E([
   e$6("flow-ui-card")
 ], FlowCard);
-const styles$A = i$7`
+const styles$C = i$7`
   ${componentStyles}
 
   :host {
@@ -6582,15 +6588,15 @@ const styles$A = i$7`
     object-fit: cover;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$B(target, key, result);
+    __defProp$D(target, key, result);
   return result;
 };
 let FlowCarouselItem = class extends FlowRdfElement {
@@ -6605,8 +6611,8 @@ let FlowCarouselItem = class extends FlowRdfElement {
     return x$1` <slot></slot> `;
   }
 };
-FlowCarouselItem.styles = styles$A;
-FlowCarouselItem = __decorateClass$B([
+FlowCarouselItem.styles = styles$C;
+FlowCarouselItem = __decorateClass$D([
   e$6("flow-ui-carousel-item")
 ], FlowCarouselItem);
 /**
@@ -6696,7 +6702,7 @@ class AutoplayController {
     this.host.requestUpdate();
   }
 }
-const styles$z = i$7`
+const styles$B = i$7`
   ${componentStyles}
 
   :host {
@@ -6865,15 +6871,15 @@ const debounce = (delay) => {
     };
   };
 };
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$A(target, key, result);
+    __defProp$C(target, key, result);
   return result;
 };
 class ScrollController {
@@ -7004,18 +7010,18 @@ class ScrollController {
     host.requestUpdate();
   }
 }
-__decorateClass$A([
+__decorateClass$C([
   debounce(100)
 ], ScrollController.prototype, "handleScrollEnd", 1);
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$z(target, key, result);
+    __defProp$B(target, key, result);
   return result;
 };
 let FlowCarousel = class extends FlowRdfElement {
@@ -7333,63 +7339,63 @@ let FlowCarousel = class extends FlowRdfElement {
     `;
   }
 };
-FlowCarousel.styles = styles$z;
-__decorateClass$z([
+FlowCarousel.styles = styles$B;
+__decorateClass$B([
   n$5({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "loop", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "navigation", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "pagination", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5({ type: Boolean, reflect: true })
 ], FlowCarousel.prototype, "autoplay", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5({ type: Number, attribute: "autoplay-interval" })
 ], FlowCarousel.prototype, "autoplayInterval", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5({ type: Number, attribute: "slides-per-page" })
 ], FlowCarousel.prototype, "slidesPerPage", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5({ type: Number, attribute: "slides-per-move" })
 ], FlowCarousel.prototype, "slidesPerMove", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5()
 ], FlowCarousel.prototype, "orientation", 2);
-__decorateClass$z([
+__decorateClass$B([
   n$5({ type: Boolean, reflect: true, attribute: "mouse-dragging" })
 ], FlowCarousel.prototype, "mouseDragging", 2);
-__decorateClass$z([
+__decorateClass$B([
   i$4("slot:not([name])")
 ], FlowCarousel.prototype, "defaultSlot", 2);
-__decorateClass$z([
+__decorateClass$B([
   i$4(".carousel__slides")
 ], FlowCarousel.prototype, "scrollContainer", 2);
-__decorateClass$z([
+__decorateClass$B([
   i$4(".carousel__pagination")
 ], FlowCarousel.prototype, "paginationContainer", 2);
-__decorateClass$z([
+__decorateClass$B([
   t$2()
 ], FlowCarousel.prototype, "activeSlide", 2);
-__decorateClass$z([
+__decorateClass$B([
   watch("loop", { waitUntilFirstUpdate: true }),
   watch("slidesPerPage", { waitUntilFirstUpdate: true })
 ], FlowCarousel.prototype, "initializeSlides", 1);
-__decorateClass$z([
+__decorateClass$B([
   watch("activeSlide")
 ], FlowCarousel.prototype, "handelSlideChange", 1);
-__decorateClass$z([
+__decorateClass$B([
   watch("slidesPerMove")
 ], FlowCarousel.prototype, "handleSlidesPerMoveChange", 1);
-__decorateClass$z([
+__decorateClass$B([
   watch("autoplay")
 ], FlowCarousel.prototype, "handleAutoplayChange", 1);
-__decorateClass$z([
+__decorateClass$B([
   watch("mouseDragging")
 ], FlowCarousel.prototype, "handleMouseDraggingChange", 1);
-FlowCarousel = __decorateClass$z([
+FlowCarousel = __decorateClass$B([
   e$6("flow-ui-carousel")
 ], FlowCarousel);
 /**
@@ -7445,7 +7451,7 @@ const defaultValue = (propertyName = "value") => (proto, key) => {
     attributeChangedCallback.call(this, name, old, value);
   };
 };
-const styles$y = i$7`
+const styles$A = i$7`
   ${componentStyles}
 
   :host {
@@ -7561,15 +7567,15 @@ const styles$y = i$7`
     margin-inline-start: var(--flow-ui-input-required-content-offset);
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$y(target, key, result);
+    __defProp$A(target, key, result);
   return result;
 };
 let FlowCheckbox = class extends FlowRdfElement {
@@ -7719,50 +7725,50 @@ let FlowCheckbox = class extends FlowRdfElement {
     `;
   }
 };
-FlowCheckbox.styles = styles$y;
-__decorateClass$y([
+FlowCheckbox.styles = styles$A;
+__decorateClass$A([
   i$4('input[type="checkbox"]')
 ], FlowCheckbox.prototype, "input", 2);
-__decorateClass$y([
+__decorateClass$A([
   t$2()
 ], FlowCheckbox.prototype, "hasFocus", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5()
 ], FlowCheckbox.prototype, "title", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5()
 ], FlowCheckbox.prototype, "name", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5()
 ], FlowCheckbox.prototype, "value", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5({ reflect: true })
 ], FlowCheckbox.prototype, "size", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "disabled", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "checked", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "indeterminate", 2);
-__decorateClass$y([
+__decorateClass$A([
   defaultValue("checked")
 ], FlowCheckbox.prototype, "defaultChecked", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5({ reflect: true })
 ], FlowCheckbox.prototype, "form", 2);
-__decorateClass$y([
+__decorateClass$A([
   n$5({ type: Boolean, reflect: true })
 ], FlowCheckbox.prototype, "required", 2);
-__decorateClass$y([
+__decorateClass$A([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowCheckbox.prototype, "handleDisabledChange", 1);
-__decorateClass$y([
+__decorateClass$A([
   watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
 ], FlowCheckbox.prototype, "handleStateChange", 1);
-FlowCheckbox = __decorateClass$y([
+FlowCheckbox = __decorateClass$A([
   e$6("flow-ui-checkbox")
 ], FlowCheckbox);
 function bound01(n2, max2) {
@@ -8711,6 +8717,9 @@ function drag(container, options) {
   if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
     move(options.initialEvent);
   }
+  return () => {
+    stop();
+  };
 }
 function isTabbable(el) {
   const tag = el.tagName.toLowerCase();
@@ -8759,7 +8768,7 @@ function getTabbableBoundary(root) {
   const end = allElements.reverse().find((el) => isTabbable(el)) ?? null;
   return { start, end };
 }
-const styles$x = i$7`
+const styles$z = i$7`
   ${componentStyles}
 
   :host {
@@ -8810,15 +8819,15 @@ const styles$x = i$7`
     max-height: var(--auto-size-available-height) !important;
   }
 `;
-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;
+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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$x(target, key, result);
+    __defProp$z(target, key, result);
   return result;
 };
 let FlowDropdown = class extends FlowRdfElement {
@@ -9084,44 +9093,44 @@ let FlowDropdown = class extends FlowRdfElement {
     `;
   }
 };
-FlowDropdown.styles = styles$x;
-__decorateClass$x([
+FlowDropdown.styles = styles$z;
+__decorateClass$z([
   i$4(".dropdown")
 ], FlowDropdown.prototype, "popup", 2);
-__decorateClass$x([
+__decorateClass$z([
   i$4(".dropdown__trigger")
 ], FlowDropdown.prototype, "trigger", 2);
-__decorateClass$x([
+__decorateClass$z([
   i$4(".dropdown__panel")
 ], FlowDropdown.prototype, "panel", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ type: Boolean, reflect: true })
 ], FlowDropdown.prototype, "open", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ reflect: true })
 ], FlowDropdown.prototype, "placement", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ type: Boolean, reflect: true })
 ], FlowDropdown.prototype, "disabled", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
 ], FlowDropdown.prototype, "stayOpenOnSelect", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ attribute: false })
 ], FlowDropdown.prototype, "containingElement", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ type: Number })
 ], FlowDropdown.prototype, "distance", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ type: Number })
 ], FlowDropdown.prototype, "skidding", 2);
-__decorateClass$x([
+__decorateClass$z([
   n$5({ type: Boolean })
 ], FlowDropdown.prototype, "hoist", 2);
-__decorateClass$x([
+__decorateClass$z([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDropdown.prototype, "handleOpenChange", 1);
-FlowDropdown = __decorateClass$x([
+FlowDropdown = __decorateClass$z([
   e$6("flow-ui-dropdown")
 ], FlowDropdown);
 setDefaultAnimation("dropdown.show", {
@@ -9195,7 +9204,7 @@ const formControlStyles = i$7`
     margin-top: var(--flow-ui-spacing-2x-small);
   }
 `;
-const styles$w = i$7`
+const styles$y = i$7`
   ${componentStyles}
   ${formControlStyles}
 
@@ -9485,15 +9494,15 @@ const styles$w = i$7`
     -moz-appearance: textfield;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$w(target, key, result);
+    __defProp$y(target, key, result);
   return result;
 };
 let FlowInput = class extends FlowRdfElement {
@@ -9815,104 +9824,104 @@ let FlowInput = class extends FlowRdfElement {
     `;
   }
 };
-FlowInput.styles = styles$w;
-__decorateClass$w([
+FlowInput.styles = styles$y;
+__decorateClass$y([
   i$4(".input__control")
 ], FlowInput.prototype, "input", 2);
-__decorateClass$w([
+__decorateClass$y([
   t$2()
 ], FlowInput.prototype, "hasFocus", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "title", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ reflect: true })
 ], FlowInput.prototype, "type", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "name", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "value", 2);
-__decorateClass$w([
+__decorateClass$y([
   defaultValue()
 ], FlowInput.prototype, "defaultValue", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ reflect: true })
 ], FlowInput.prototype, "size", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "filled", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "pill", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "label", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ attribute: "help-text" })
 ], FlowInput.prototype, "helpText", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Boolean })
 ], FlowInput.prototype, "clearable", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "disabled", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "placeholder", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "readonly", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ attribute: "password-toggle", type: Boolean })
 ], FlowInput.prototype, "passwordToggle", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ attribute: "password-visible", type: Boolean })
 ], FlowInput.prototype, "passwordVisible", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ attribute: "no-spin-buttons", type: Boolean })
 ], FlowInput.prototype, "noSpinButtons", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ reflect: true })
 ], FlowInput.prototype, "form", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Boolean, reflect: true })
 ], FlowInput.prototype, "required", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "pattern", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Number })
 ], FlowInput.prototype, "minlength", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Number })
 ], FlowInput.prototype, "maxlength", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "min", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "max", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "step", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "autocapitalize", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "autocorrect", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "autocomplete", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({ type: Boolean })
 ], FlowInput.prototype, "autofocus", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "enterkeyhint", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5({
     type: Boolean,
     converter: {
@@ -9922,22 +9931,22 @@ __decorateClass$w([
     }
   })
 ], FlowInput.prototype, "spellcheck", 2);
-__decorateClass$w([
+__decorateClass$y([
   n$5()
 ], FlowInput.prototype, "inputmode", 2);
-__decorateClass$w([
+__decorateClass$y([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowInput.prototype, "handleDisabledChange", 1);
-__decorateClass$w([
+__decorateClass$y([
   watch("step", { waitUntilFirstUpdate: true })
 ], FlowInput.prototype, "handleStepChange", 1);
-__decorateClass$w([
+__decorateClass$y([
   watch("value", { waitUntilFirstUpdate: true })
 ], FlowInput.prototype, "handleValueChange", 1);
-FlowInput = __decorateClass$w([
+FlowInput = __decorateClass$y([
   e$6("flow-ui-input")
 ], FlowInput);
-const styles$v = i$7`
+const styles$x = i$7`
   ${componentStyles}
 
   :host(:not(:focus-within)) {
@@ -9952,15 +9961,15 @@ const styles$v = i$7`
     padding: 0 !important;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$v(target, key, result);
+    __defProp$x(target, key, result);
   return result;
 };
 let FlowVisuallyHidden = class extends FlowRdfElement {
@@ -9968,11 +9977,11 @@ let FlowVisuallyHidden = class extends FlowRdfElement {
     return x$1` <slot></slot> `;
   }
 };
-FlowVisuallyHidden.styles = styles$v;
-FlowVisuallyHidden = __decorateClass$v([
+FlowVisuallyHidden.styles = styles$x;
+FlowVisuallyHidden = __decorateClass$x([
   e$6("flow-ui-visually-hidden")
 ], FlowVisuallyHidden);
-const styles$u = i$7`
+const styles$w = i$7`
   ${componentStyles}
 
   :host {
@@ -10304,15 +10313,15 @@ const styles$u = i$7`
     cursor: not-allowed;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$u(target, key, result);
+    __defProp$w(target, key, result);
   return result;
 };
 const hasEyeDropper = "EyeDropper" in window;
@@ -11097,113 +11106,113 @@ let FlowColorPicker = class extends FlowRdfElement {
     `;
   }
 };
-FlowColorPicker.styles = styles$u;
-__decorateClass$u([
+FlowColorPicker.styles = styles$w;
+__decorateClass$w([
   i$4('[part~="base"]')
 ], FlowColorPicker.prototype, "base", 2);
-__decorateClass$u([
+__decorateClass$w([
   i$4('[part~="input"]')
 ], FlowColorPicker.prototype, "input", 2);
-__decorateClass$u([
+__decorateClass$w([
   i$4(".color-dropdown")
 ], FlowColorPicker.prototype, "dropdown", 2);
-__decorateClass$u([
+__decorateClass$w([
   i$4('[part~="preview"]')
 ], FlowColorPicker.prototype, "previewButton", 2);
-__decorateClass$u([
+__decorateClass$w([
   i$4('[part~="trigger"]')
 ], FlowColorPicker.prototype, "trigger", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "hasFocus", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "isDraggingGridHandle", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "isEmpty", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "inputValue", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "hue", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "saturation", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "brightness", 2);
-__decorateClass$u([
+__decorateClass$w([
   t$2()
 ], FlowColorPicker.prototype, "alpha", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5()
 ], FlowColorPicker.prototype, "value", 2);
-__decorateClass$u([
+__decorateClass$w([
   defaultValue()
 ], FlowColorPicker.prototype, "defaultValue", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5()
 ], FlowColorPicker.prototype, "label", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5()
 ], FlowColorPicker.prototype, "format", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Boolean, reflect: true })
 ], FlowColorPicker.prototype, "inline", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ reflect: true })
 ], FlowColorPicker.prototype, "size", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ attribute: "no-format-toggle", type: Boolean })
 ], FlowColorPicker.prototype, "noFormatToggle", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5()
 ], FlowColorPicker.prototype, "name", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Boolean, reflect: true })
 ], FlowColorPicker.prototype, "disabled", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ reflect: true })
 ], FlowColorPicker.prototype, "placement", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Number })
 ], FlowColorPicker.prototype, "distance", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Number })
 ], FlowColorPicker.prototype, "skidding", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Boolean })
 ], FlowColorPicker.prototype, "hoist", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Boolean })
 ], FlowColorPicker.prototype, "opacity", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Boolean })
 ], FlowColorPicker.prototype, "uppercase", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5()
 ], FlowColorPicker.prototype, "swatches", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ reflect: true })
 ], FlowColorPicker.prototype, "form", 2);
-__decorateClass$u([
+__decorateClass$w([
   n$5({ type: Boolean, reflect: true })
 ], FlowColorPicker.prototype, "required", 2);
-__decorateClass$u([
+__decorateClass$w([
   watch("format", { waitUntilFirstUpdate: true })
 ], FlowColorPicker.prototype, "handleFormatChange", 1);
-__decorateClass$u([
+__decorateClass$w([
   watch("opacity", { waitUntilFirstUpdate: true })
 ], FlowColorPicker.prototype, "handleOpacityChange", 1);
-__decorateClass$u([
+__decorateClass$w([
   watch("value")
 ], FlowColorPicker.prototype, "handleValueChange", 1);
-FlowColorPicker = __decorateClass$u([
+FlowColorPicker = __decorateClass$w([
   e$6("flow-ui-color-picker")
 ], FlowColorPicker);
-const styles$t = i$7`
+const styles$v = i$7`
   ${componentStyles}
 
   :host {
@@ -11283,15 +11292,15 @@ const styles$t = i$7`
     padding: var(--flow-ui-spacing-medium);
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$t(target, key, result);
+    __defProp$v(target, key, result);
   return result;
 };
 let FlowDetails = class extends FlowRdfElement {
@@ -11419,32 +11428,32 @@ let FlowDetails = class extends FlowRdfElement {
     `;
   }
 };
-FlowDetails.styles = styles$t;
-__decorateClass$t([
+FlowDetails.styles = styles$v;
+__decorateClass$v([
   i$4(".details")
 ], FlowDetails.prototype, "details", 2);
-__decorateClass$t([
+__decorateClass$v([
   i$4(".details__header")
 ], FlowDetails.prototype, "header", 2);
-__decorateClass$t([
+__decorateClass$v([
   i$4(".details__body")
 ], FlowDetails.prototype, "body", 2);
-__decorateClass$t([
+__decorateClass$v([
   i$4(".details__expand-icon-slot")
 ], FlowDetails.prototype, "expandIconSlot", 2);
-__decorateClass$t([
+__decorateClass$v([
   n$5({ type: Boolean, reflect: true })
 ], FlowDetails.prototype, "open", 2);
-__decorateClass$t([
+__decorateClass$v([
   n$5()
 ], FlowDetails.prototype, "summary", 2);
-__decorateClass$t([
+__decorateClass$v([
   n$5({ type: Boolean, reflect: true })
 ], FlowDetails.prototype, "disabled", 2);
-__decorateClass$t([
+__decorateClass$v([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDetails.prototype, "handleOpenChange", 1);
-FlowDetails = __decorateClass$t([
+FlowDetails = __decorateClass$v([
   e$6("flow-ui-details")
 ], FlowDetails);
 setDefaultAnimation("details.show", {
@@ -11558,7 +11567,7 @@ function scrollIntoView(element, container, direction = "vertical", behavior = "
     }
   }
 }
-const styles$s = i$7`
+const styles$u = i$7`
   ${componentStyles}
 
   :host {
@@ -11678,15 +11687,15 @@ const styles$s = i$7`
     }
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$s(target, key, result);
+    __defProp$u(target, key, result);
   return result;
 };
 let FlowDialog = class extends FlowRdfElement {
@@ -11866,29 +11875,29 @@ let FlowDialog = class extends FlowRdfElement {
     `;
   }
 };
-FlowDialog.styles = styles$s;
-__decorateClass$s([
+FlowDialog.styles = styles$u;
+__decorateClass$u([
   i$4(".dialog")
 ], FlowDialog.prototype, "dialog", 2);
-__decorateClass$s([
+__decorateClass$u([
   i$4(".dialog__panel")
 ], FlowDialog.prototype, "panel", 2);
-__decorateClass$s([
+__decorateClass$u([
   i$4(".dialog__overlay")
 ], FlowDialog.prototype, "overlay", 2);
-__decorateClass$s([
+__decorateClass$u([
   n$5({ type: Boolean, reflect: true })
 ], FlowDialog.prototype, "open", 2);
-__decorateClass$s([
+__decorateClass$u([
   n$5({ reflect: true })
 ], FlowDialog.prototype, "label", 2);
-__decorateClass$s([
+__decorateClass$u([
   n$5({ attribute: "no-header", type: Boolean, reflect: true })
 ], FlowDialog.prototype, "noHeader", 2);
-__decorateClass$s([
+__decorateClass$u([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDialog.prototype, "handleOpenChange", 1);
-FlowDialog = __decorateClass$s([
+FlowDialog = __decorateClass$u([
   e$6("flow-ui-dialog")
 ], FlowDialog);
 setDefaultAnimation("dialog.show", {
@@ -11917,7 +11926,7 @@ setDefaultAnimation("dialog.overlay.hide", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: 250 }
 });
-const styles$r = i$7`
+const styles$t = i$7`
   ${componentStyles}
 
   :host {
@@ -11946,15 +11955,15 @@ const styles$r = i$7`
     padding: var(--inset) 0;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$r(target, key, result);
+    __defProp$t(target, key, result);
   return result;
 };
 let FlowDivider = class extends FlowRdfElement {
@@ -11975,20 +11984,20 @@ let FlowDivider = class extends FlowRdfElement {
     }
   */
 };
-FlowDivider.styles = styles$r;
-__decorateClass$r([
+FlowDivider.styles = styles$t;
+__decorateClass$t([
   n$5({ type: Boolean, reflect: true })
 ], FlowDivider.prototype, "vertical", 2);
-__decorateClass$r([
+__decorateClass$t([
   watch("vertical")
 ], FlowDivider.prototype, "handleVerticalChange", 1);
-FlowDivider = __decorateClass$r([
+FlowDivider = __decorateClass$t([
   e$6("flow-ui-divider")
 ], FlowDivider);
 function uppercaseFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-const styles$q = i$7`
+const styles$s = i$7`
   ${componentStyles}
 
   :host {
@@ -12144,15 +12153,15 @@ const styles$q = i$7`
     }
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$q(target, key, result);
+    __defProp$s(target, key, result);
   return result;
 };
 let FlowDrawer = class extends FlowRdfElement {
@@ -12362,38 +12371,38 @@ let FlowDrawer = class extends FlowRdfElement {
     `;
   }
 };
-FlowDrawer.styles = styles$q;
-__decorateClass$q([
+FlowDrawer.styles = styles$s;
+__decorateClass$s([
   i$4(".drawer")
 ], FlowDrawer.prototype, "drawer", 2);
-__decorateClass$q([
+__decorateClass$s([
   i$4(".drawer__panel")
 ], FlowDrawer.prototype, "panel", 2);
-__decorateClass$q([
+__decorateClass$s([
   i$4(".drawer__overlay")
 ], FlowDrawer.prototype, "overlay", 2);
-__decorateClass$q([
+__decorateClass$s([
   n$5({ type: Boolean, reflect: true })
 ], FlowDrawer.prototype, "open", 2);
-__decorateClass$q([
+__decorateClass$s([
   n$5({ reflect: true })
 ], FlowDrawer.prototype, "label", 2);
-__decorateClass$q([
+__decorateClass$s([
   n$5({ reflect: true })
 ], FlowDrawer.prototype, "placement", 2);
-__decorateClass$q([
+__decorateClass$s([
   n$5({ type: Boolean, reflect: true })
 ], FlowDrawer.prototype, "contained", 2);
-__decorateClass$q([
+__decorateClass$s([
   n$5({ attribute: "no-header", type: Boolean, reflect: true })
 ], FlowDrawer.prototype, "noHeader", 2);
-__decorateClass$q([
+__decorateClass$s([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowDrawer.prototype, "handleOpenChange", 1);
-__decorateClass$q([
+__decorateClass$s([
   watch("contained", { waitUntilFirstUpdate: true })
 ], FlowDrawer.prototype, "handleNoModalChange", 1);
-FlowDrawer = __decorateClass$q([
+FlowDrawer = __decorateClass$s([
   e$6("flow-ui-drawer")
 ], FlowDrawer);
 setDefaultAnimation("drawer.showTop", {
@@ -12481,7 +12490,7 @@ setDefaultAnimation("drawer.overlay.hide", {
   options: { duration: 250 }
 });
 FlowIconButton.define("flow-ui-icon-button");
-const styles$p = i$7`
+const styles$r = i$7`
   ${componentStyles}
 
   :host {
@@ -12579,15 +12588,15 @@ const styles$p = i$7`
     }
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$p(target, key, result);
+    __defProp$r(target, key, result);
   return result;
 };
 let FlowMenuItem = class extends FlowRdfElement {
@@ -12681,38 +12690,38 @@ let FlowMenuItem = class extends FlowRdfElement {
     `;
   }
 };
-FlowMenuItem.styles = styles$p;
-__decorateClass$p([
+FlowMenuItem.styles = styles$r;
+__decorateClass$r([
   i$4("slot:not([name])")
 ], FlowMenuItem.prototype, "defaultSlot", 2);
-__decorateClass$p([
+__decorateClass$r([
   i$4(".menu-item")
 ], FlowMenuItem.prototype, "menuItem", 2);
-__decorateClass$p([
+__decorateClass$r([
   n$5()
 ], FlowMenuItem.prototype, "type", 2);
-__decorateClass$p([
+__decorateClass$r([
   n$5({ type: Boolean, reflect: true })
 ], FlowMenuItem.prototype, "checked", 2);
-__decorateClass$p([
+__decorateClass$r([
   n$5()
 ], FlowMenuItem.prototype, "value", 2);
-__decorateClass$p([
+__decorateClass$r([
   n$5({ type: Boolean, reflect: true })
 ], FlowMenuItem.prototype, "disabled", 2);
-__decorateClass$p([
+__decorateClass$r([
   watch("checked")
 ], FlowMenuItem.prototype, "handleCheckedChange", 1);
-__decorateClass$p([
+__decorateClass$r([
   watch("disabled")
 ], FlowMenuItem.prototype, "handleDisabledChange", 1);
-__decorateClass$p([
+__decorateClass$r([
   watch("type")
 ], FlowMenuItem.prototype, "handleTypeChange", 1);
-FlowMenuItem = __decorateClass$p([
+FlowMenuItem = __decorateClass$r([
   e$6("flow-ui-menu-item")
 ], FlowMenuItem);
-const styles$o = i$7`
+const styles$q = i$7`
   ${componentStyles}
 
   :host {
@@ -12731,15 +12740,15 @@ const styles$o = i$7`
     user-select: none;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$o(target, key, result);
+    __defProp$q(target, key, result);
   return result;
 };
 let FlowMenuLabel = class extends FlowRdfElement {
@@ -12747,11 +12756,11 @@ let FlowMenuLabel = class extends FlowRdfElement {
     return x$1` <slot part="base" class="menu-label"></slot> `;
   }
 };
-FlowMenuLabel.styles = styles$o;
-FlowMenuLabel = __decorateClass$o([
+FlowMenuLabel.styles = styles$q;
+FlowMenuLabel = __decorateClass$q([
   e$6("flow-ui-menu-label")
 ], FlowMenuLabel);
-const styles$n = i$7`
+const styles$p = i$7`
   ${componentStyles}
 
   :host {
@@ -12769,15 +12778,15 @@ const styles$n = i$7`
     --spacing: var(--flow-ui-spacing-x-small);
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$n(target, key, result);
+    __defProp$p(target, key, result);
   return result;
 };
 let FlowMenu = class extends FlowRdfElement {
@@ -12883,29 +12892,29 @@ let FlowMenu = class extends FlowRdfElement {
     `;
   }
 };
-FlowMenu.styles = styles$n;
-__decorateClass$n([
+FlowMenu.styles = styles$p;
+__decorateClass$p([
   i$4("slot")
 ], FlowMenu.prototype, "defaultSlot", 2);
-FlowMenu = __decorateClass$n([
+FlowMenu = __decorateClass$p([
   e$6("flow-ui-menu")
 ], FlowMenu);
-const styles$m = i$7`
+const styles$o = i$7`
   ${componentStyles}
 
   :host {
     display: contents;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$m(target, key, result);
+    __defProp$o(target, key, result);
   return result;
 };
 let FlowMutationObserver = class extends FlowRdfElement {
@@ -12967,39 +12976,39 @@ let FlowMutationObserver = class extends FlowRdfElement {
     return x$1` <slot></slot> `;
   }
 };
-FlowMutationObserver.styles = styles$m;
-__decorateClass$m([
+FlowMutationObserver.styles = styles$o;
+__decorateClass$o([
   n$5({ reflect: true })
 ], FlowMutationObserver.prototype, "attr", 2);
-__decorateClass$m([
+__decorateClass$o([
   n$5({ attribute: "attr-old-value", type: Boolean, reflect: true })
 ], FlowMutationObserver.prototype, "attrOldValue", 2);
-__decorateClass$m([
+__decorateClass$o([
   n$5({ attribute: "char-data", type: Boolean, reflect: true })
 ], FlowMutationObserver.prototype, "charData", 2);
-__decorateClass$m([
+__decorateClass$o([
   n$5({ attribute: "char-data-old-value", type: Boolean, reflect: true })
 ], FlowMutationObserver.prototype, "charDataOldValue", 2);
-__decorateClass$m([
+__decorateClass$o([
   n$5({ attribute: "child-list", type: Boolean, reflect: true })
 ], FlowMutationObserver.prototype, "childList", 2);
-__decorateClass$m([
+__decorateClass$o([
   n$5({ type: Boolean, reflect: true })
 ], FlowMutationObserver.prototype, "disabled", 2);
-__decorateClass$m([
+__decorateClass$o([
   watch("disabled")
 ], FlowMutationObserver.prototype, "handleDisabledChange", 1);
-__decorateClass$m([
+__decorateClass$o([
   watch("attr", { waitUntilFirstUpdate: true }),
   watch("attr-old-value", { waitUntilFirstUpdate: true }),
   watch("char-data", { waitUntilFirstUpdate: true }),
   watch("char-data-old-value", { waitUntilFirstUpdate: true }),
   watch("childList", { waitUntilFirstUpdate: true })
 ], FlowMutationObserver.prototype, "handleChange", 1);
-FlowMutationObserver = __decorateClass$m([
+FlowMutationObserver = __decorateClass$o([
   e$6("flow-ui-mutation-observer")
 ], FlowMutationObserver);
-const styles$l = i$7`
+const styles$n = i$7`
   ${componentStyles}
 
   :host {
@@ -13085,15 +13094,15 @@ const styles$l = i$7`
     }
   }
 `;
-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;
+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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$l(target, key, result);
+    __defProp$n(target, key, result);
   return result;
 };
 let FlowOption = class extends FlowRdfElement {
@@ -13169,38 +13178,38 @@ let FlowOption = class extends FlowRdfElement {
     `;
   }
 };
-FlowOption.styles = styles$l;
-__decorateClass$l([
+FlowOption.styles = styles$n;
+__decorateClass$n([
   i$4(".option__label")
 ], FlowOption.prototype, "defaultSlot", 2);
-__decorateClass$l([
+__decorateClass$n([
   t$2()
 ], FlowOption.prototype, "current", 2);
-__decorateClass$l([
+__decorateClass$n([
   t$2()
 ], FlowOption.prototype, "selected", 2);
-__decorateClass$l([
+__decorateClass$n([
   t$2()
 ], FlowOption.prototype, "hasHover", 2);
-__decorateClass$l([
+__decorateClass$n([
   n$5({ reflect: true })
 ], FlowOption.prototype, "value", 2);
-__decorateClass$l([
+__decorateClass$n([
   n$5({ type: Boolean, reflect: true })
 ], FlowOption.prototype, "disabled", 2);
-__decorateClass$l([
+__decorateClass$n([
   watch("disabled")
 ], FlowOption.prototype, "handleDisabledChange", 1);
-__decorateClass$l([
+__decorateClass$n([
   watch("selected")
 ], FlowOption.prototype, "handleSelectedChange", 1);
-__decorateClass$l([
+__decorateClass$n([
   watch("value")
 ], FlowOption.prototype, "handleValueChange", 1);
-FlowOption = __decorateClass$l([
+FlowOption = __decorateClass$n([
   e$6("flow-ui-option")
 ], FlowOption);
-const styles$k = i$7`
+const styles$m = i$7`
   ${componentStyles}
 
   :host {
@@ -13282,15 +13291,15 @@ const styles$k = i$7`
     }
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$k(target, key, result);
+    __defProp$m(target, key, result);
   return result;
 };
 let FlowProgressBar = class extends FlowRdfElement {
@@ -13324,20 +13333,20 @@ let FlowProgressBar = class extends FlowRdfElement {
     `;
   }
 };
-FlowProgressBar.styles = styles$k;
-__decorateClass$k([
+FlowProgressBar.styles = styles$m;
+__decorateClass$m([
   n$5({ type: Number, reflect: true })
 ], FlowProgressBar.prototype, "value", 2);
-__decorateClass$k([
+__decorateClass$m([
   n$5({ type: Boolean, reflect: true })
 ], FlowProgressBar.prototype, "indeterminate", 2);
-__decorateClass$k([
+__decorateClass$m([
   n$5()
 ], FlowProgressBar.prototype, "label", 2);
-FlowProgressBar = __decorateClass$k([
+FlowProgressBar = __decorateClass$m([
   e$6("flow-ui-progress-bar")
 ], FlowProgressBar);
-const styles$j = i$7`
+const styles$l = i$7`
   ${componentStyles}
 
   :host {
@@ -13404,15 +13413,15 @@ const styles$j = i$7`
     user-select: none;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$j(target, key, result);
+    __defProp$l(target, key, result);
   return result;
 };
 let FlowProgressRing = class extends FlowRdfElement {
@@ -13454,23 +13463,23 @@ let FlowProgressRing = class extends FlowRdfElement {
     `;
   }
 };
-FlowProgressRing.styles = styles$j;
-__decorateClass$j([
+FlowProgressRing.styles = styles$l;
+__decorateClass$l([
   i$4(".progress-ring__indicator")
 ], FlowProgressRing.prototype, "indicator", 2);
-__decorateClass$j([
+__decorateClass$l([
   t$2()
 ], FlowProgressRing.prototype, "indicatorOffset", 2);
-__decorateClass$j([
+__decorateClass$l([
   n$5({ type: Number, reflect: true })
 ], FlowProgressRing.prototype, "value", 2);
-__decorateClass$j([
+__decorateClass$l([
   n$5()
 ], FlowProgressRing.prototype, "label", 2);
-FlowProgressRing = __decorateClass$j([
+FlowProgressRing = __decorateClass$l([
   e$6("flow-ui-progress-ring")
 ], FlowProgressRing);
-const styles$i = i$7`
+const styles$k = i$7`
   ${componentStyles}
   ${formControlStyles}
 
@@ -13505,15 +13514,15 @@ const styles$i = i$7`
     border: 0;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$i(target, key, result);
+    __defProp$k(target, key, result);
   return result;
 };
 let FlowRadioGroup = class extends FlowRdfElement {
@@ -13752,53 +13761,53 @@ let FlowRadioGroup = class extends FlowRdfElement {
     `;
   }
 };
-FlowRadioGroup.styles = styles$i;
-__decorateClass$i([
+FlowRadioGroup.styles = styles$k;
+__decorateClass$k([
   i$4("slot:not([name])")
 ], FlowRadioGroup.prototype, "defaultSlot", 2);
-__decorateClass$i([
+__decorateClass$k([
   i$4(".radio-group__validation-input")
 ], FlowRadioGroup.prototype, "validationInput", 2);
-__decorateClass$i([
+__decorateClass$k([
   t$2()
 ], FlowRadioGroup.prototype, "errorMessage", 2);
-__decorateClass$i([
+__decorateClass$k([
   t$2()
 ], FlowRadioGroup.prototype, "defaultValue", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5()
 ], FlowRadioGroup.prototype, "label", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5({ attribute: "help-text" })
 ], FlowRadioGroup.prototype, "helpText", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5()
 ], FlowRadioGroup.prototype, "name", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5({ reflect: true })
 ], FlowRadioGroup.prototype, "value", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5({ reflect: true })
 ], FlowRadioGroup.prototype, "size", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5({ reflect: true })
 ], FlowRadioGroup.prototype, "form", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5({ type: Boolean, reflect: true })
 ], FlowRadioGroup.prototype, "required", 2);
-__decorateClass$i([
+__decorateClass$k([
   n$5({ type: Boolean, reflect: true })
 ], FlowRadioGroup.prototype, "vertical", 2);
-__decorateClass$i([
+__decorateClass$k([
   watch("size", { waitUntilFirstUpdate: true })
 ], FlowRadioGroup.prototype, "handleSizeChange", 1);
-__decorateClass$i([
+__decorateClass$k([
   watch("value")
 ], FlowRadioGroup.prototype, "handleValueChange", 1);
-FlowRadioGroup = __decorateClass$i([
+FlowRadioGroup = __decorateClass$k([
   e$6("flow-ui-radio-group")
 ], FlowRadioGroup);
-const styles$h = i$7`
+const styles$j = i$7`
   ${componentStyles}
 
   :host {
@@ -13909,15 +13918,15 @@ const styles$h = i$7`
     user-select: none;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$h(target, key, result);
+    __defProp$j(target, key, result);
   return result;
 };
 let FlowRadio = class extends FlowRdfElement {
@@ -13997,32 +14006,32 @@ let FlowRadio = class extends FlowRdfElement {
     `;
   }
 };
-FlowRadio.styles = styles$h;
-__decorateClass$h([
+FlowRadio.styles = styles$j;
+__decorateClass$j([
   t$2()
 ], FlowRadio.prototype, "checked", 2);
-__decorateClass$h([
+__decorateClass$j([
   t$2()
 ], FlowRadio.prototype, "hasFocus", 2);
-__decorateClass$h([
+__decorateClass$j([
   n$5()
 ], FlowRadio.prototype, "value", 2);
-__decorateClass$h([
+__decorateClass$j([
   n$5({ reflect: true })
 ], FlowRadio.prototype, "size", 2);
-__decorateClass$h([
+__decorateClass$j([
   n$5({ type: Boolean, reflect: true })
 ], FlowRadio.prototype, "disabled", 2);
-__decorateClass$h([
+__decorateClass$j([
   watch("checked")
 ], FlowRadio.prototype, "handleCheckedChange", 1);
-__decorateClass$h([
+__decorateClass$j([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowRadio.prototype, "handleDisabledChange", 1);
-FlowRadio = __decorateClass$h([
+FlowRadio = __decorateClass$j([
   e$6("flow-ui-radio")
 ], FlowRadio);
-const styles$g = i$7`
+const styles$i = i$7`
   ${componentStyles}
   ${formControlStyles}
 
@@ -14249,15 +14258,15 @@ const styles$g = i$7`
     }
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$g(target, key, result);
+    __defProp$i(target, key, result);
   return result;
 };
 let FlowRange = class extends FlowRdfElement {
@@ -14492,89 +14501,89 @@ let FlowRange = class extends FlowRdfElement {
     `;
   }
 };
-FlowRange.styles = styles$g;
-__decorateClass$g([
+FlowRange.styles = styles$i;
+__decorateClass$i([
   i$4(".range__control")
 ], FlowRange.prototype, "input", 2);
-__decorateClass$g([
+__decorateClass$i([
   i$4(".range__tooltip")
 ], FlowRange.prototype, "output", 2);
-__decorateClass$g([
+__decorateClass$i([
   t$2()
 ], FlowRange.prototype, "hasFocus", 2);
-__decorateClass$g([
+__decorateClass$i([
   t$2()
 ], FlowRange.prototype, "hasTooltip", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5()
 ], FlowRange.prototype, "title", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5()
 ], FlowRange.prototype, "name", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ type: Number })
 ], FlowRange.prototype, "value", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5()
 ], FlowRange.prototype, "label", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ attribute: "help-text" })
 ], FlowRange.prototype, "helpText", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ type: Boolean, reflect: true })
 ], FlowRange.prototype, "disabled", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ type: Number })
 ], FlowRange.prototype, "min", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ type: Number })
 ], FlowRange.prototype, "max", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ type: Number })
 ], FlowRange.prototype, "step", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5()
 ], FlowRange.prototype, "tooltip", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ attribute: false })
 ], FlowRange.prototype, "tooltipFormatter", 2);
-__decorateClass$g([
+__decorateClass$i([
   n$5({ reflect: true })
 ], FlowRange.prototype, "form", 2);
-__decorateClass$g([
+__decorateClass$i([
   defaultValue()
 ], FlowRange.prototype, "defaultValue", 2);
-__decorateClass$g([
+__decorateClass$i([
   e$4({ passive: true })
 ], FlowRange.prototype, "handleThumbDragStart", 1);
-__decorateClass$g([
+__decorateClass$i([
   watch("value", { waitUntilFirstUpdate: true })
 ], FlowRange.prototype, "handleValueChange", 1);
-__decorateClass$g([
+__decorateClass$i([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowRange.prototype, "handleDisabledChange", 1);
-__decorateClass$g([
+__decorateClass$i([
   watch("hasTooltip", { waitUntilFirstUpdate: true })
 ], FlowRange.prototype, "syncRange", 1);
-FlowRange = __decorateClass$g([
+FlowRange = __decorateClass$i([
   e$6("flow-ui-range")
 ], FlowRange);
-const styles$f = i$7`
+const styles$h = i$7`
   ${componentStyles}
 
   :host {
     display: contents;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$f(target, key, result);
+    __defProp$h(target, key, result);
   return result;
 };
 let FlowResizeObserver = class extends FlowRdfElement {
@@ -14627,17 +14636,17 @@ let FlowResizeObserver = class extends FlowRdfElement {
     return x$1` <slot @slotchange=${this.handleSlotChange}></slot> `;
   }
 };
-FlowResizeObserver.styles = styles$f;
-__decorateClass$f([
+FlowResizeObserver.styles = styles$h;
+__decorateClass$h([
   n$5({ type: Boolean, reflect: true })
 ], FlowResizeObserver.prototype, "disabled", 2);
-__decorateClass$f([
+__decorateClass$h([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowResizeObserver.prototype, "handleDisabledChange", 1);
-FlowResizeObserver = __decorateClass$f([
+FlowResizeObserver = __decorateClass$h([
   e$6("flow-ui-resize-observer")
 ], FlowResizeObserver);
-const styles$e = i$7`
+const styles$g = i$7`
   ${componentStyles}
 
   :host {
@@ -14752,15 +14761,15 @@ const styles$e = i$7`
     border-radius: var(--flow-ui-border-radius-pill);
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$e(target, key, result);
+    __defProp$g(target, key, result);
   return result;
 };
 let FlowTag = class extends FlowRdfElement {
@@ -14815,23 +14824,23 @@ let FlowTag = class extends FlowRdfElement {
     `;
   }
 };
-FlowTag.styles = styles$e;
-__decorateClass$e([
+FlowTag.styles = styles$g;
+__decorateClass$g([
   n$5({ reflect: true })
 ], FlowTag.prototype, "variant", 2);
-__decorateClass$e([
+__decorateClass$g([
   n$5({ reflect: true })
 ], FlowTag.prototype, "size", 2);
-__decorateClass$e([
+__decorateClass$g([
   n$5({ type: Boolean, reflect: true })
 ], FlowTag.prototype, "pill", 2);
-__decorateClass$e([
+__decorateClass$g([
   n$5({ type: Boolean })
 ], FlowTag.prototype, "removable", 2);
-FlowTag = __decorateClass$e([
+FlowTag = __decorateClass$g([
   e$6("flow-ui-tag")
 ], FlowTag);
-const styles$d = i$7`
+const styles$f = i$7`
   ${componentStyles}
   ${formControlStyles}
 
@@ -15152,15 +15161,15 @@ const styles$d = i$7`
     padding-inline: var(--flow-ui-spacing-x-large);
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$d(target, key, result);
+    __defProp$f(target, key, result);
   return result;
 };
 let FlowSelect = class extends FlowRdfElement {
@@ -15737,38 +15746,38 @@ let FlowSelect = class extends FlowRdfElement {
     `;
   }
 };
-FlowSelect.styles = styles$d;
-__decorateClass$d([
+FlowSelect.styles = styles$f;
+__decorateClass$f([
   i$4(".select")
 ], FlowSelect.prototype, "popup", 2);
-__decorateClass$d([
+__decorateClass$f([
   i$4(".select__combobox")
 ], FlowSelect.prototype, "combobox", 2);
-__decorateClass$d([
+__decorateClass$f([
   i$4(".select__display-input")
 ], FlowSelect.prototype, "displayInput", 2);
-__decorateClass$d([
+__decorateClass$f([
   i$4(".select__value-input")
 ], FlowSelect.prototype, "valueInput", 2);
-__decorateClass$d([
+__decorateClass$f([
   i$4(".select__listbox")
 ], FlowSelect.prototype, "listbox", 2);
-__decorateClass$d([
+__decorateClass$f([
   t$2()
 ], FlowSelect.prototype, "hasFocus", 2);
-__decorateClass$d([
+__decorateClass$f([
   t$2()
 ], FlowSelect.prototype, "displayLabel", 2);
-__decorateClass$d([
+__decorateClass$f([
   t$2()
 ], FlowSelect.prototype, "currentOption", 2);
-__decorateClass$d([
+__decorateClass$f([
   t$2()
 ], FlowSelect.prototype, "selectedOptions", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5()
 ], FlowSelect.prototype, "name", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({
     converter: {
       fromAttribute: (value) => value.split(" "),
@@ -15776,64 +15785,64 @@ __decorateClass$d([
     }
   })
 ], FlowSelect.prototype, "value", 2);
-__decorateClass$d([
+__decorateClass$f([
   defaultValue()
 ], FlowSelect.prototype, "defaultValue", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ reflect: true })
 ], FlowSelect.prototype, "size", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5()
 ], FlowSelect.prototype, "placeholder", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean, reflect: true })
 ], FlowSelect.prototype, "multiple", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ attribute: "max-options-visible", type: Number })
 ], FlowSelect.prototype, "maxOptionsVisible", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean, reflect: true })
 ], FlowSelect.prototype, "disabled", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean })
 ], FlowSelect.prototype, "clearable", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean, reflect: true })
 ], FlowSelect.prototype, "open", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean })
 ], FlowSelect.prototype, "hoist", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean, reflect: true })
 ], FlowSelect.prototype, "filled", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean, reflect: true })
 ], FlowSelect.prototype, "pill", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5()
 ], FlowSelect.prototype, "label", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ reflect: true })
 ], FlowSelect.prototype, "placement", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ attribute: "help-text" })
 ], FlowSelect.prototype, "helpText", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ reflect: true })
 ], FlowSelect.prototype, "form", 2);
-__decorateClass$d([
+__decorateClass$f([
   n$5({ type: Boolean, reflect: true })
 ], FlowSelect.prototype, "required", 2);
-__decorateClass$d([
+__decorateClass$f([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowSelect.prototype, "handleDisabledChange", 1);
-__decorateClass$d([
+__decorateClass$f([
   watch("value", { waitUntilFirstUpdate: true })
 ], FlowSelect.prototype, "handleValueChange", 1);
-__decorateClass$d([
+__decorateClass$f([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowSelect.prototype, "handleOpenChange", 1);
-FlowSelect = __decorateClass$d([
+FlowSelect = __decorateClass$f([
   e$6("flow-ui-select")
 ], FlowSelect);
 setDefaultAnimation("select.show", {
@@ -15850,15 +15859,19 @@ setDefaultAnimation("select.hide", {
   ],
   options: { duration: 100, easing: "ease" }
 });
+const isUndefined = (val) => typeof val === "undefined";
+const isNull = (val) => val === null;
+const isNil = (val) => isUndefined(val) || isNull(val);
+const isDefined = (val) => !isNil(val);
 const isString = (val) => typeof val === "string";
-const hasLength = (val) => val.length > 0;
+const hasLength = (val) => isDefined(val) && val.length > 0;
 const isStringFull = (val) => isString(val) && hasLength(val);
 const isArrayFull = (val) => Array.isArray(val) && hasLength(val);
 const isNumber = (val) => typeof val === "number" && !Number.isNaN(val) && Number.isFinite(val);
 const isBoolean = (val) => typeof val === "boolean";
 const isDate = (val) => val instanceof Date;
 const isValue = (val) => isStringFull(val) || isNumber(val) || isBoolean(val) || isDate(val);
-const styles$c = i$7`
+const styles$e = i$7`
   ${componentStyles}
 
   :host {
@@ -15977,15 +15990,15 @@ const styles$c = i$7`
     --divider-width: 0px !important;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$c(target, key, result);
+    __defProp$e(target, key, result);
   return result;
 };
 class FlowSplitPanel extends FlowRdfElement {
@@ -16181,60 +16194,60 @@ class FlowSplitPanel extends FlowRdfElement {
     `;
   }
 }
-FlowSplitPanel.styles = styles$c;
-__decorateClass$c([
+FlowSplitPanel.styles = styles$e;
+__decorateClass$e([
   i$4(".divider")
 ], FlowSplitPanel.prototype, "divider", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Number, reflect: true })
 ], FlowSplitPanel.prototype, "position", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ attribute: "position-units" })
 ], FlowSplitPanel.prototype, "positionUnits", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Number, attribute: "min-position" })
 ], FlowSplitPanel.prototype, "minPosition", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Number, attribute: "max-position" })
 ], FlowSplitPanel.prototype, "maxPosition", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Number, attribute: "closed-position" })
 ], FlowSplitPanel.prototype, "closedPosition", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Boolean, reflect: true })
 ], FlowSplitPanel.prototype, "closed", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Boolean, reflect: true })
 ], FlowSplitPanel.prototype, "hidden", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Boolean, reflect: true })
 ], FlowSplitPanel.prototype, "vertical", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Boolean, reflect: true })
 ], FlowSplitPanel.prototype, "disabled", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5()
 ], FlowSplitPanel.prototype, "primary", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5()
 ], FlowSplitPanel.prototype, "snap", 2);
-__decorateClass$c([
+__decorateClass$e([
   n$5({ type: Number, attribute: "snap-threshold" })
 ], FlowSplitPanel.prototype, "snapThreshold", 2);
-__decorateClass$c([
+__decorateClass$e([
   t$2()
 ], FlowSplitPanel.prototype, "dragging", 2);
-__decorateClass$c([
+__decorateClass$e([
   watch("closed", { waitUntilFirstUpdate: true })
 ], FlowSplitPanel.prototype, "handleCloseChange", 1);
-__decorateClass$c([
+__decorateClass$e([
   watch("position", { waitUntilFirstUpdate: true })
 ], FlowSplitPanel.prototype, "handlePositionChange", 1);
-__decorateClass$c([
+__decorateClass$e([
   watch("vertical")
 ], FlowSplitPanel.prototype, "handleVerticalChange", 1);
 FlowSplitPanel.define("flow-ui-split-panel");
-const styles$b = i$7`
+const styles$d = i$7`
   ${componentStyles}
 
   :host([closed]) .icon-button {
@@ -16245,15 +16258,15 @@ const styles$b = i$7`
     transition: transform var(--flow-ui-transition-medium) ease-in-out;
   }
 `;
-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$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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
     if (decorator = decorators[i3])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$b(target, key, result);
+    __defProp$d(target, key, result);
   return result;
 };
 class FlowSplitPanelToggleButton extends FlowIconButton {
@@ -16297,14 +16310,303 @@ class FlowSplitPanelToggleButton extends FlowIconButton {
     }
   }
 }
-FlowSplitPanelToggleButton.styles = [FlowIconButton.styles, styles$b];
-__decorateClass$b([
+FlowSplitPanelToggleButton.styles = [FlowIconButton.styles, styles$d];
+__decorateClass$d([
   n$5()
 ], FlowSplitPanelToggleButton.prototype, "name", 2);
-__decorateClass$b([
+__decorateClass$d([
   n$5({ type: Boolean, reflect: true })
 ], FlowSplitPanelToggleButton.prototype, "closed", 2);
 FlowSplitPanelToggleButton.define("flow-ui-split-panel-toggle-button");
+const styles$c = i$7`
+  ${componentStyles}
+
+  :host {
+    --padding: 0;
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .stepper-panel {
+    display: block;
+    padding: var(--padding);
+  }
+`;
+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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$c(target, key, result);
+  return result;
+};
+let id$3 = 0;
+class FlowStepperPanel extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id$3;
+    this.componentId = `flow-ui-stepper-panel-${this.attrId}`;
+    this.name = "";
+    this.title = "";
+    this.subTitle = "";
+    this.active = false;
+    this.complete = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = isStringFull(this.id) ? this.id : this.componentId;
+    this.setAttribute("role", "tabpanel");
+  }
+  handleStateChange() {
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+  render() {
+    return x$1`
+      <slot
+        part="base"
+        class=${o$6({
+      "stepper-panel": true,
+      "stepper-panel--active": this.active,
+      "stepper-panel--complete": this.complete
+    })}
+      ></slot>
+    `;
+  }
+}
+FlowStepperPanel.styles = styles$c;
+__decorateClass$c([
+  n$5({ reflect: true })
+], FlowStepperPanel.prototype, "name", 2);
+__decorateClass$c([
+  n$5({ reflect: true })
+], FlowStepperPanel.prototype, "title", 2);
+__decorateClass$c([
+  n$5({ attribute: "sub-title", reflect: true })
+], FlowStepperPanel.prototype, "subTitle", 2);
+__decorateClass$c([
+  n$5({ reflect: true, type: Boolean })
+], FlowStepperPanel.prototype, "active", 2);
+__decorateClass$c([
+  n$5({ reflect: true, type: Boolean })
+], FlowStepperPanel.prototype, "complete", 2);
+__decorateClass$c([
+  watch("state")
+], FlowStepperPanel.prototype, "handleStateChange", 1);
+FlowStepperPanel.define("flow-ui-stepper-panel");
+const styles$b = i$7`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    --header-height: 56px;
+    --header-icon-size: 24px;
+  }
+
+  .stepper_header-scroll-container {
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in webkit */
+  .stepper_header-scroll-container::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .stepper__header {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .stepper__header-item {
+    display: flex;
+    align-items: center;
+    padding-inline: var(--flow-ui-spacing-large);
+    height: var(--header-height);
+    box-sizing: content-box;
+  }
+
+  .stepper__header-item--active {
+    background-color: var(--flow-ui-color-neutral-200);
+  }
+
+  .stepper__header-item-icon {
+    position: relative;
+    width: var(--header-icon-size);
+    height: var(--header-icon-size);
+    margin-right: var(--flow-ui-spacing-x-small);
+    flex: none;
+    border-radius: var(--flow-ui-border-radius-circle);
+    color: var(--flow-ui-color-neutral-800);
+    background-color: var(--flow-ui-color-neutral-400);
+  }
+
+  .stepper__header-item--active .stepper__header-item-icon, .stepper__header-item--complete .stepper__header-item-icon {
+    color: var(--flow-ui-color-primary-contrast);
+    background-color: var(--flow-ui-color-primary-500);
+  }
+
+  .stepper__header-item-icon-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .stepper__header-item-label {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 50px;
+    vertical-align: middle;
+    line-height: var(--flow-ui-line-height-dense);
+    color: var(--flow-ui-color-neutral-700);
+  }
+
+  .stepper__header-item--active .stepper__header-item-label {
+    font-weight: var(--flow-ui-font-weight-semibold);
+    color: var(--flow-ui-color-neutral-1000);
+  }
+
+  .stepper__header-item-title {
+    font-size: var(--flow-ui-font-size-medium);
+  }
+
+  .stepper__header-item-subtitle {
+    font-size: var(--flow-ui-font-size-small);
+    color: var(--flow-ui-color-neutral-700);
+  }
+
+  .stepper__header-line {
+    border-top-width: 1px;
+    border-top-style: solid;
+    flex: auto;
+    height: 0;
+    margin: 0 calc(var(--flow-ui-spacing-large) / -2);
+    min-width: 32px;
+    border-top-color: var(--flow-ui-color-neutral-300);
+  }
+`;
+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 i3 = decorators.length - 1, decorator; i3 >= 0; i3--)
+    if (decorator = decorators[i3])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$b(target, key, result);
+  return result;
+};
+let id$2 = 0;
+class FlowStepper extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.attrId = ++id$2;
+    this.componentId = `flow-ui-stepper-${this.attrId}`;
+    this.panels = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    Promise.allSettled([
+      customElements.whenDefined("flow-ui-stepper-panel")
+    ]);
+    this.mutationObserver = new MutationObserver((mutations) => {
+      console.log("mutations", mutations);
+      this.syncPanels();
+    });
+    this.updateComplete.then(() => {
+      console.log("panels", this.getAllPanels());
+      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
+    });
+  }
+  setComplete(panelName, complete = true) {
+    const panel = this.panels.find((el) => el.name === panelName);
+    if (panel && panel.complete !== complete) {
+      panel.complete = complete;
+    }
+  }
+  show(panelName) {
+    const panel = this.panels.find((el) => el.name === panelName);
+    if (panel) {
+      this.setActivePanel(panel);
+    }
+  }
+  syncPanels() {
+    this.panels = this.getAllPanels();
+  }
+  getAllPanels() {
+    return [...this.bodySlot.assignedElements()].filter((el) => el.tagName.toLowerCase() === "flow-ui-stepper-panel");
+  }
+  setActivePanel(panel) {
+    if (panel !== this.activePanel) {
+      this.activePanel = panel;
+      this.panels.forEach((el) => el.active = el === this.activePanel);
+      const panelIndex = this.panels.indexOf(this.activePanel);
+      const panelHeaderItem = this.headerScrollContainer.getElementsByClassName("stepper__header-item").item(panelIndex);
+      scrollIntoView(panelHeaderItem, this.headerScrollContainer, "horizontal");
+    }
+  }
+  renderHeaderItem(panel, index) {
+    return x$1`
+      <div class=${o$6({
+      "stepper__header-item": true,
+      "stepper__header-item--active": panel.active,
+      "stepper__header-item--complete": panel.complete
+    })}>
+        <div class="stepper__header-item-icon">
+          <div class="stepper__header-item-icon-content">
+            ${index + 1}
+          </div>
+        </div>
+        <div class="stepper__header-item-label">
+          <div class="stepper__header-item-title">${panel.title}</div>
+          ${panel.subTitle ? x$1`<div class="stepper__header-item-subtitle">${panel.subTitle}</div>` : A}
+        </div>
+      </div>`;
+  }
+  renderHeader() {
+    return this.panels.map((panel, index) => {
+      const template = [this.renderHeaderItem(panel, index)];
+      if (index > 0) {
+        template.unshift(x$1`<div class="stepper__header-line"></div>`);
+      }
+      return template;
+    });
+  }
+  render() {
+    return x$1`
+      <div part="base" class="stepper">
+      <div class="stepper_header-scroll-container"><div part="header" class="stepper__header">${this.renderHeader()}</div></div>
+        <div part="body" class="stepper__body">
+          <slot class="stepper__body-slot" @slotchange=${this.syncPanels}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+FlowStepper.styles = styles$b;
+__decorateClass$b([
+  i$4(".stepper__body-slot")
+], FlowStepper.prototype, "bodySlot", 2);
+__decorateClass$b([
+  i$4(".stepper_header-scroll-container")
+], FlowStepper.prototype, "headerScrollContainer", 2);
+__decorateClass$b([
+  t$2()
+], FlowStepper.prototype, "panels", 2);
+FlowStepper.define("flow-ui-stepper");
 const styles$a = i$7`
   ${componentStyles}
 
@@ -20586,7 +20888,7 @@ const translation = {
   toggleColorFormat: "Toggle color format"
 };
 registerTranslation(translation);
-const version = "0.0.5";
+const version = "0.0.6";
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;
   border-radius: 2px;
@@ -20636,6 +20938,8 @@ export {
   FlowSpinner,
   FlowSplitPanel,
   FlowSplitPanelToggleButton,
+  FlowStepper,
+  FlowStepperPanel,
   FlowSwitch,
   FlowTab,
   FlowTabGroup,