@warp-ds/elements 1.2.0-next.4 → 1.2.0-next.6

package/dist/index.js

@@ -1,39 +1,22 @@
-var Or = Object.defineProperty;
-var qr = (t, e, r) => e in t ? Or(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var T = (t, e, r) => (qr(t, typeof e != "symbol" ? e + "" : e, r), r), Br = (t, e, r) => {
+var Br = Object.defineProperty;
+var qr = (t, e, r) => e in t ? Br(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var T = (t, e, r) => (qr(t, typeof e != "symbol" ? e + "" : e, r), r), Ar = (t, e, r) => {
   if (!e.has(t))
     throw TypeError("Cannot " + r);
 };
-var X = (t, e, r) => (Br(t, e, "read from private field"), r ? r.call(t) : e.get(t)), ge = (t, e, r) => {
+var X = (t, e, r) => (Ar(t, e, "read from private field"), r ? r.call(t) : e.get(t)), ge = (t, e, r) => {
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
 };
-import { html as m, css as se } from "lit";
-import q from "@warp-ds/elements-core";
+import { html as m, css as se, nothing as dt } from "lit";
+import B from "@warp-ds/elements-core";
 import { ifDefined as I } from "lit/directives/if-defined.js";
-import { classMap as Yt } from "lit/directives/class-map.js";
-import { repeat as Zt } from "lit/directives/repeat.js";
+import { classMap as Zt } from "lit/directives/class-map.js";
+import { repeat as er } from "lit/directives/repeat.js";
 import { when as He } from "lit/directives/when.js";
-import { unsafeHTML as er } from "lit/directives/unsafe-html.js";
-const Te = {
-  base: "border-2 relative",
-  tooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",
-  callout: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",
-  highlight: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",
-  popover: "i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",
-  arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
-  arrowDirectionLeft: "-left-[8px]",
-  arrowDirectionRight: "-right-[8px]",
-  arrowDirectionBottom: "-bottom-[8px]",
-  arrowDirectionTop: "-top-[8px]",
-  arrowTooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background",
-  arrowCallout: "i-bg-$color-callout-background i-border-$color-callout-border",
-  arrowPopover: "i-bg-$color-popover-background i-border-$color-popover-background",
-  arrowHighlight: "i-bg-$color-callout-background i-border-$color-callout-border",
-  content: "last-child:mb-0",
-  notCallout: "absolute z-50"
-}, be = {
+import { unsafeHTML as tr } from "lit/directives/unsafe-html.js";
+const be = {
   base: "py-4 px-8 border-0 rounded-4 text-xs inline-flex",
   neutral: "i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text",
   info: "i-bg-$color-badge-info-background i-text-$color-badge-info-text",
@@ -105,7 +88,7 @@ const Te = {
   paddingTop: "pt-0",
   title: "flex justify-between items-center",
   titleType: "h4"
-}, ce = "font-bold focusable justify-center transition-colors ease-in-out", M = {
+}, ce = "font-bold focusable justify-center transition-colors ease-in-out", R = {
   primary: "i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",
   secondary: "i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
   utility: "i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",
@@ -117,14 +100,14 @@ const Te = {
   negativeQuiet: "i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",
   loading: "i-text-$color-button-loading-text i-bg-$color-button-loading-background",
   link: "i-text-$color-button-link-text"
-}, O = {
+}, D = {
   primary: `border-0 rounded-8 ${ce}`,
   secondary: `border-2 rounded-8 ${ce}`,
   utility: `border rounded-4 ${ce}`,
   negative: `border-0 rounded-8 ${ce}`,
   pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${ce}`,
-  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${M.link}`
-}, g = {
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${R.link}`
+}, b = {
   xsmall: "py-6 px-16",
   small: "py-8 px-16",
   medium: "py-10 px-14",
@@ -134,81 +117,81 @@ const Te = {
   pill: "min-h-[44px] min-w-[44px]",
   pillSmall: "min-h-32 min-w-32",
   link: "p-0"
-}, b = {
+}, f = {
   medium: "text-m leading-[24]",
   xsmall: "text-xs"
 }, p = {
-  inProgress: `border-transparent animate-inprogress pointer-events-none ${M.loading}`,
+  inProgress: `border-transparent animate-inprogress pointer-events-none ${R.loading}`,
   // .button--in-progress, a.button--in-progress:visited
   quiet: `border-0 rounded-8 ${ce}`,
   utilityQuiet: `border-0 rounded-4 ${ce}`,
   negativeQuiet: `border-0 rounded-8 ${ce}`,
-  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${M.disabled}`
+  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${R.disabled}`
   // .button:disabled, .button--is-disabled
 }, S = {
   // Buttontypes
-  secondary: `${g.medium} ${b.medium} ${O.secondary} ${M.secondary}`,
+  secondary: `${b.medium} ${f.medium} ${D.secondary} ${R.secondary}`,
   // .button--secondary, .button--default, .button
-  secondaryHref: `${g.medium} ${b.medium} ${O.secondary} ${M.secondary}`,
-  secondaryDisabled: `${g.medium} ${b.medium} ${O.secondary} ${p.isDisabled}`,
-  secondarySmall: `${b.xsmall} ${g.xsmall} ${O.secondary} ${M.secondary}`,
-  secondarySmallDisabled: `${b.xsmall} ${g.xsmall} ${O.secondary} ${p.isDisabled}`,
-  secondaryQuiet: `${g.medium} ${b.medium} ${p.quiet} ${M.quiet}`,
-  secondaryQuietDisabled: `${g.medium} ${b.medium} ${p.quiet} ${p.isDisabled}`,
-  secondarySmallQuiet: `${b.xsmall} ${g.xsmall} ${p.quiet} ${M.quiet}`,
-  secondarySmallQuietDisabled: `${b.xsmall} ${g.xsmall} ${p.quiet} ${p.isDisabled}`,
-  secondaryLoading: `${g.medium} ${b.medium} ${O.secondary} ${p.inProgress}`,
-  secondarySmallLoading: `${b.xsmall} ${g.xsmall}  ${O.secondary} ${p.inProgress}`,
-  secondarySmallQuietLoading: `${b.xsmall} ${g.xsmall} ${p.quiet} ${p.inProgress}`,
-  secondaryQuietLoading: `${g.medium} ${b.medium} ${p.quiet} ${p.inProgress}`,
-  primary: `${g.large} ${b.medium} ${O.primary} ${M.primary}`,
+  secondaryHref: `${b.medium} ${f.medium} ${D.secondary} ${R.secondary}`,
+  secondaryDisabled: `${b.medium} ${f.medium} ${D.secondary} ${p.isDisabled}`,
+  secondarySmall: `${f.xsmall} ${b.xsmall} ${D.secondary} ${R.secondary}`,
+  secondarySmallDisabled: `${f.xsmall} ${b.xsmall} ${D.secondary} ${p.isDisabled}`,
+  secondaryQuiet: `${b.medium} ${f.medium} ${p.quiet} ${R.quiet}`,
+  secondaryQuietDisabled: `${b.medium} ${f.medium} ${p.quiet} ${p.isDisabled}`,
+  secondarySmallQuiet: `${f.xsmall} ${b.xsmall} ${p.quiet} ${R.quiet}`,
+  secondarySmallQuietDisabled: `${f.xsmall} ${b.xsmall} ${p.quiet} ${p.isDisabled}`,
+  secondaryLoading: `${b.medium} ${f.medium} ${D.secondary} ${p.inProgress}`,
+  secondarySmallLoading: `${f.xsmall} ${b.xsmall}  ${D.secondary} ${p.inProgress}`,
+  secondarySmallQuietLoading: `${f.xsmall} ${b.xsmall} ${p.quiet} ${p.inProgress}`,
+  secondaryQuietLoading: `${b.medium} ${f.medium} ${p.quiet} ${p.inProgress}`,
+  primary: `${b.large} ${f.medium} ${D.primary} ${R.primary}`,
   // .button--primary, .button--cta
-  primaryDisabled: `${g.large} ${b.medium} ${p.isDisabled} ${O.primary}`,
-  primarySmall: `${g.small} ${b.xsmall} ${O.primary} ${M.primary}`,
-  primarySmallDisabled: `${g.small} ${b.xsmall} ${p.isDisabled} ${O.primary} `,
-  primaryQuiet: `${g.large} ${b.medium} ${p.quiet} ${M.quiet}`,
-  primaryQuietDisabled: `${g.large} ${b.medium} ${p.quiet} ${p.isDisabled}`,
-  primarySmallQuiet: `${g.small} ${b.xsmall} ${p.quiet} ${M.quiet}`,
-  primarySmallQuietDisabled: `${g.small} ${b.xsmall} ${p.quiet} ${p.isDisabled}`,
-  primaryLoading: `${g.large} ${b.medium} ${p.inProgress} ${O.primary}`,
-  primarySmallLoading: `${g.small} ${b.xsmall}  ${p.inProgress} ${O.primary}`,
-  primarySmallQuietLoading: `${g.small} ${b.xsmall} ${p.quiet} ${p.inProgress} ${O.primary}`,
-  primaryQuietLoading: `${g.large} ${b.medium} ${p.quiet} ${p.inProgress}`,
-  utility: `${g.utility} ${b.medium} ${O.utility} ${M.utility}`,
+  primaryDisabled: `${b.large} ${f.medium} ${p.isDisabled} ${D.primary}`,
+  primarySmall: `${b.small} ${f.xsmall} ${D.primary} ${R.primary}`,
+  primarySmallDisabled: `${b.small} ${f.xsmall} ${p.isDisabled} ${D.primary} `,
+  primaryQuiet: `${b.large} ${f.medium} ${p.quiet} ${R.quiet}`,
+  primaryQuietDisabled: `${b.large} ${f.medium} ${p.quiet} ${p.isDisabled}`,
+  primarySmallQuiet: `${b.small} ${f.xsmall} ${p.quiet} ${R.quiet}`,
+  primarySmallQuietDisabled: `${b.small} ${f.xsmall} ${p.quiet} ${p.isDisabled}`,
+  primaryLoading: `${b.large} ${f.medium} ${p.inProgress} ${D.primary}`,
+  primarySmallLoading: `${b.small} ${f.xsmall}  ${p.inProgress} ${D.primary}`,
+  primarySmallQuietLoading: `${b.small} ${f.xsmall} ${p.quiet} ${p.inProgress} ${D.primary}`,
+  primaryQuietLoading: `${b.large} ${f.medium} ${p.quiet} ${p.inProgress}`,
+  utility: `${b.utility} ${f.medium} ${D.utility} ${R.utility}`,
   // .button--utility
-  utilityDisabled: `${g.utility} ${b.medium} ${O.utility} ${p.isDisabled}`,
-  utilityQuiet: `${g.large} ${b.medium} ${p.utilityQuiet} ${M.utilityQuiet}`,
+  utilityDisabled: `${b.utility} ${f.medium} ${D.utility} ${p.isDisabled}`,
+  utilityQuiet: `${b.large} ${f.medium} ${p.utilityQuiet} ${R.utilityQuiet}`,
   // .button--utility-flat
-  utilityQuietDisabled: `${g.large} ${b.medium} ${p.utilityQuiet} ${p.isDisabled}`,
-  utilitySmall: `${g.smallUtility} ${b.xsmall} ${O.utility} ${M.utility}`,
-  utilitySmallDisabled: `${g.smallUtility} ${b.xsmall} ${O.utility} ${p.isDisabled}`,
-  utilitySmallQuiet: `${g.smallUtility} ${b.xsmall} ${p.utilityQuiet} ${M.utilityQuiet}`,
-  utilitySmallQuietDisabled: `${g.smallUtility} ${b.xsmall} ${p.utilityQuiet} ${p.isDisabled}`,
-  utilityLoading: `${g.large} ${b.medium} ${O.utility} ${p.inProgress}`,
-  utilitySmallLoading: `${g.smallUtility} ${b.xsmall} ${O.utility} ${p.inProgress}`,
-  utilityQuietLoading: `${g.large} ${b.medium} ${p.inProgress} ${p.utilityQuiet}`,
-  utilitySmallQuietLoading: `${g.smallUtility} ${b.xsmall} ${p.inProgress} ${p.utilityQuiet}`,
-  negative: `${g.large} ${b.medium} ${O.negative} ${M.destructive}`,
+  utilityQuietDisabled: `${b.large} ${f.medium} ${p.utilityQuiet} ${p.isDisabled}`,
+  utilitySmall: `${b.smallUtility} ${f.xsmall} ${D.utility} ${R.utility}`,
+  utilitySmallDisabled: `${b.smallUtility} ${f.xsmall} ${D.utility} ${p.isDisabled}`,
+  utilitySmallQuiet: `${b.smallUtility} ${f.xsmall} ${p.utilityQuiet} ${R.utilityQuiet}`,
+  utilitySmallQuietDisabled: `${b.smallUtility} ${f.xsmall} ${p.utilityQuiet} ${p.isDisabled}`,
+  utilityLoading: `${b.large} ${f.medium} ${D.utility} ${p.inProgress}`,
+  utilitySmallLoading: `${b.smallUtility} ${f.xsmall} ${D.utility} ${p.inProgress}`,
+  utilityQuietLoading: `${b.large} ${f.medium} ${p.inProgress} ${p.utilityQuiet}`,
+  utilitySmallQuietLoading: `${b.smallUtility} ${f.xsmall} ${p.inProgress} ${p.utilityQuiet}`,
+  negative: `${b.large} ${f.medium} ${D.negative} ${R.destructive}`,
   // .button--destructive
-  negativeDisabled: `${g.large} ${b.medium} ${O.negative} ${p.isDisabled}`,
-  negativeQuiet: `${g.large} ${b.medium} ${p.negativeQuiet} ${M.negativeQuiet}`,
+  negativeDisabled: `${b.large} ${f.medium} ${D.negative} ${p.isDisabled}`,
+  negativeQuiet: `${b.large} ${f.medium} ${p.negativeQuiet} ${R.negativeQuiet}`,
   // .button--destructive-flat
-  negativeQuietDisabled: `${g.large} ${b.medium} ${p.negativeQuiet}${p.isDisabled}`,
-  negativeSmall: `${g.small} ${b.xsmall} ${O.negative} ${M.destructive}`,
-  negativeSmallDisabled: `${g.small} ${b.xsmall} ${O.negative} ${p.isDisabled}`,
-  negativeSmallQuiet: `${g.small} ${b.xsmall} ${p.negativeQuiet} ${M.negativeQuiet}`,
-  negativeSmallQuietDisabled: `${g.small} ${b.xsmall} ${p.negativeQuiet} ${p.isDisabled}`,
-  negativeLoading: `${g.large} ${b.medium} ${O.negative} ${p.inProgress}`,
-  negativeSmallLoading: `${g.small} ${b.xsmall} ${p.inProgress} ${O.negative}`,
-  negativeQuietLoading: `${g.large} ${b.medium} ${p.negativeQuiet} ${O.negative} ${p.inProgress}`,
-  negativeSmallQuietLoading: `${g.small} ${b.xsmall} ${p.negativeQuiet} ${p.inProgress}`,
-  pill: `${g.pill} ${b.medium} ${O.pill} ${M.pill}`,
+  negativeQuietDisabled: `${b.large} ${f.medium} ${p.negativeQuiet}${p.isDisabled}`,
+  negativeSmall: `${b.small} ${f.xsmall} ${D.negative} ${R.destructive}`,
+  negativeSmallDisabled: `${b.small} ${f.xsmall} ${D.negative} ${p.isDisabled}`,
+  negativeSmallQuiet: `${b.small} ${f.xsmall} ${p.negativeQuiet} ${R.negativeQuiet}`,
+  negativeSmallQuietDisabled: `${b.small} ${f.xsmall} ${p.negativeQuiet} ${p.isDisabled}`,
+  negativeLoading: `${b.large} ${f.medium} ${D.negative} ${p.inProgress}`,
+  negativeSmallLoading: `${b.small} ${f.xsmall} ${p.inProgress} ${D.negative}`,
+  negativeQuietLoading: `${b.large} ${f.medium} ${p.negativeQuiet} ${D.negative} ${p.inProgress}`,
+  negativeSmallQuietLoading: `${b.small} ${f.xsmall} ${p.negativeQuiet} ${p.inProgress}`,
+  pill: `${b.pill} ${f.medium} ${D.pill} ${R.pill}`,
   // .button--pill
-  pillSmall: `${g.pillSmall} ${b.xsmall} ${O.pill} ${M.pill}`,
-  pillLoading: `${g.pill} ${b.medium} ${O.pill} ${p.inProgress}`,
-  pillSmallLoading: `${g.pillSmall} ${b.xsmall} ${O.pill} ${p.inProgress}`,
-  link: `${g.link} ${b.medium} ${O.link}`,
-  linkSmall: `${g.link} ${b.xsmall} ${O.link}`,
+  pillSmall: `${b.pillSmall} ${f.xsmall} ${D.pill} ${R.pill}`,
+  pillLoading: `${b.pill} ${f.medium} ${D.pill} ${p.inProgress}`,
+  pillSmallLoading: `${b.pillSmall} ${f.xsmall} ${D.pill} ${p.inProgress}`,
+  link: `${b.link} ${f.medium} ${D.link}`,
+  linkSmall: `${b.link} ${f.xsmall} ${D.link}`,
   linkAsButton: "inline-block hover:no-underline text-center",
   a11y: "sr-only",
   fullWidth: "w-full max-w-full",
@@ -246,7 +229,7 @@ const Te = {
   selectWrapper: "relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ",
   chevron: "absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer",
   chevronDisabled: "opacity-25"
-}, qe = {
+}, Be = {
   label: "antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",
   labelInvalid: "i-text-$color-label-text-negative",
   optional: "pl-8 font-normal text-s i-text-$color-label-optional-text"
@@ -254,34 +237,52 @@ const Te = {
   helpText: "text-xs mt-4 block i-text-$color-helptext-text",
   helpTextValid: "i-text-$color-helptext-text-positive",
   helpTextInvalid: "i-text-$color-helptext-text-negative"
-}, tr = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ", Ar = {
-  wrapper: tr + "right-0",
+}, rr = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ", Rr = {
+  wrapper: rr + "right-0",
   wrapperWithLabel: "w-max pr-12",
   wrapperWithIcon: "w-40",
   label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
-}, Rr = {
-  wrapper: tr + "left-0",
+}, Mr = {
+  wrapper: rr + "left-0",
   wrapperWithLabel: "w-max pl-12",
   wrapperWithIcon: "w-40",
   label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
-}, _e = {
+}, ke = {
   wrapper: "flex space-x-8",
   text: "i-text-$color-breadcrumbs-text",
   link: "i-text-$color-breadcrumbs-link-text",
   separator: "select-none i-text-$color-breadcrumbs-icon",
   a11y: "sr-only"
-}, Mr = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}, we = {
+  base: "border-2 relative flex items-start",
+  tooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",
+  callout: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",
+  highlight: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",
+  popover: "i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",
+  arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
+  arrowDirectionLeft: "-left-[8px]",
+  arrowDirectionRight: "-right-[8px]",
+  arrowDirectionBottom: "-bottom-[8px]",
+  arrowDirectionTop: "-top-[8px]",
+  arrowTooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background",
+  arrowCallout: "i-bg-$color-callout-background i-border-$color-callout-border",
+  arrowPopover: "i-bg-$color-popover-background i-border-$color-popover-background",
+  arrowHighlight: "i-bg-$color-callout-background i-border-$color-callout-border",
+  content: "last-child:mb-0",
+  notCallout: "absolute z-50",
+  closeBtn: `${f.medium} ${D.pill} ${R.pill} justify-self-end -mr-8 ml-8`
+}, Nr = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 function Re(t) {
   return class extends t {
     static createProperty(e, r) {
       let i = r;
       (typeof (r == null ? void 0 : r.attribute) > "u" || (r == null ? void 0 : r.attribute) === !0) && (i = Object.assign({}, r, {
-        attribute: Mr(e.toString())
+        attribute: Nr(e.toString())
       })), super.createProperty(e, i);
     }
   };
 }
-function dt(t) {
+function ht(t) {
   const e = [];
   for (const [r, i] of Object.entries(t))
     i && e.push(r);
@@ -292,14 +293,14 @@ function G(t) {
   for (const [r, i] of Object.entries(t))
     for (const o of r.split(" "))
       e[o] = i;
-  return Yt(e);
+  return Zt(e);
 }
-function Nr() {
+function Ir() {
   return `m${Math.random().toString(36).slice(2)}`;
 }
-class ht extends q {
+class pt extends B {
   get _classBase() {
-    return this.slot === "suffix" ? Ar : Rr;
+    return this.slot === "suffix" ? Rr : Mr;
   }
   get _classes() {
     return G({
@@ -341,13 +342,13 @@ class ht extends q {
     return m`${this._markup}`;
   }
 }
-T(ht, "styles", [q.styles]), T(ht, "properties", {
+T(pt, "styles", [B.styles]), T(pt, "properties", {
   ariaLabel: { type: String, attribute: "aria-label" },
   clear: { type: Boolean },
   search: { type: Boolean },
   label: { type: String }
 });
-customElements.get("w-affix") || customElements.define("w-affix", ht);
+customElements.get("w-affix") || customElements.define("w-affix", pt);
 var ue = function() {
   for (var t = [], e = arguments.length; e--; )
     t[e] = arguments[e];
@@ -363,7 +364,7 @@ const Oe = {
   warning: "warning",
   info: "info"
 };
-class pt extends q {
+class ft extends B {
   constructor() {
     super(), this.show = !1, this.role = "alert";
   }
@@ -403,7 +404,7 @@ negative, positive, warning, info.`
     `;
   }
 }
-T(pt, "properties", {
+T(ft, "properties", {
   variant: { type: String, reflect: !0 },
   show: { type: Boolean, reflect: !0 },
   role: { type: String, reflect: !0 }
@@ -411,8 +412,8 @@ T(pt, "properties", {
 // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
-T(pt, "styles", [
-  q.styles,
+T(ft, "styles", [
+  B.styles,
   se`
       :host {
         display: block;
@@ -425,7 +426,7 @@ T(pt, "styles", [
       }
     `
 ]);
-customElements.get("w-alert") || customElements.define("w-alert", pt);
+customElements.get("w-alert") || customElements.define("w-alert", ft);
 function Me(t) {
   return t.split("-")[0];
 }
@@ -435,48 +436,48 @@ function nt(t) {
 function Ne(t) {
   return ["top", "bottom"].includes(Me(t)) ? "x" : "y";
 }
-function Bt(t) {
+function At(t) {
   return t === "y" ? "height" : "width";
 }
-function Mt(t, e, r) {
+function Nt(t, e, r) {
   let { reference: i, floating: o } = t;
-  const n = i.x + i.width / 2 - o.width / 2, a = i.y + i.height / 2 - o.height / 2, l = Ne(e), d = Bt(l), x = i[d] / 2 - o[d] / 2, w = l === "x";
-  let f;
+  const n = i.x + i.width / 2 - o.width / 2, a = i.y + i.height / 2 - o.height / 2, l = Ne(e), d = At(l), x = i[d] / 2 - o[d] / 2, w = l === "x";
+  let g;
   switch (Me(e)) {
     case "top":
-      f = { x: n, y: i.y - o.height };
+      g = { x: n, y: i.y - o.height };
       break;
     case "bottom":
-      f = { x: n, y: i.y + i.height };
+      g = { x: n, y: i.y + i.height };
       break;
     case "right":
-      f = { x: i.x + i.width, y: a };
+      g = { x: i.x + i.width, y: a };
       break;
     case "left":
-      f = { x: i.x - o.width, y: a };
+      g = { x: i.x - o.width, y: a };
       break;
     default:
-      f = { x: i.x, y: i.y };
+      g = { x: i.x, y: i.y };
   }
   switch (nt(e)) {
     case "start":
-      f[l] -= x * (r && w ? -1 : 1);
+      g[l] -= x * (r && w ? -1 : 1);
       break;
     case "end":
-      f[l] += x * (r && w ? -1 : 1);
+      g[l] += x * (r && w ? -1 : 1);
   }
-  return f;
+  return g;
 }
-const Ir = async (t, e, r) => {
+const Qr = async (t, e, r) => {
   const { placement: i = "bottom", strategy: o = "absolute", middleware: n = [], platform: a } = r, l = await (a.isRTL == null ? void 0 : a.isRTL(e));
-  let d = await a.getElementRects({ reference: t, floating: e, strategy: o }), { x, y: w } = Mt(d, i, l), f = i, D = {}, h = 0;
+  let d = await a.getElementRects({ reference: t, floating: e, strategy: o }), { x, y: w } = Nt(d, i, l), g = i, O = {}, h = 0;
   for (let y = 0; y < n.length; y++) {
-    const { name: _, fn: C } = n[y], { x: N, y: Q, data: U, reset: R } = await C({ x, y: w, initialPlacement: i, placement: f, strategy: o, middlewareData: D, rects: d, platform: a, elements: { reference: t, floating: e } });
-    x = N ?? x, w = Q ?? w, D = { ...D, [_]: { ...D[_], ...U } }, R && h <= 50 && (h++, typeof R == "object" && (R.placement && (f = R.placement), R.rects && (d = R.rects === !0 ? await a.getElementRects({ reference: t, floating: e, strategy: o }) : R.rects), { x, y: w } = Mt(d, f, l)), y = -1);
+    const { name: _, fn: C } = n[y], { x: N, y: Q, data: U, reset: M } = await C({ x, y: w, initialPlacement: i, placement: g, strategy: o, middlewareData: O, rects: d, platform: a, elements: { reference: t, floating: e } });
+    x = N ?? x, w = Q ?? w, O = { ...O, [_]: { ...O[_], ...U } }, M && h <= 50 && (h++, typeof M == "object" && (M.placement && (g = M.placement), M.rects && (d = M.rects === !0 ? await a.getElementRects({ reference: t, floating: e, strategy: o }) : M.rects), { x, y: w } = Nt(d, g, l)), y = -1);
   }
-  return { x, y: w, placement: f, strategy: o, middlewareData: D };
+  return { x, y: w, placement: g, strategy: o, middlewareData: O };
 };
-function rr(t) {
+function ir(t) {
   return typeof t != "number" ? function(e) {
     return { top: 0, right: 0, bottom: 0, left: 0, ...e };
   }(t) : { top: t, right: t, bottom: t, left: t };
@@ -484,63 +485,63 @@ function rr(t) {
 function Je(t) {
   return { ...t, top: t.y, left: t.x, right: t.x + t.width, bottom: t.y + t.height };
 }
-async function ir(t, e) {
+async function or(t, e) {
   var r;
   e === void 0 && (e = {});
-  const { x: i, y: o, platform: n, rects: a, elements: l, strategy: d } = t, { boundary: x = "clippingAncestors", rootBoundary: w = "viewport", elementContext: f = "floating", altBoundary: D = !1, padding: h = 0 } = e, y = rr(h), _ = l[D ? f === "floating" ? "reference" : "floating" : f], C = Je(await n.getClippingRect({ element: (r = await (n.isElement == null ? void 0 : n.isElement(_))) == null || r ? _ : _.contextElement || await (n.getDocumentElement == null ? void 0 : n.getDocumentElement(l.floating)), boundary: x, rootBoundary: w, strategy: d })), N = Je(n.convertOffsetParentRelativeRectToViewportRelativeRect ? await n.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: f === "floating" ? { ...a.floating, x: i, y: o } : a.reference, offsetParent: await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(l.floating)), strategy: d }) : a[f]);
+  const { x: i, y: o, platform: n, rects: a, elements: l, strategy: d } = t, { boundary: x = "clippingAncestors", rootBoundary: w = "viewport", elementContext: g = "floating", altBoundary: O = !1, padding: h = 0 } = e, y = ir(h), _ = l[O ? g === "floating" ? "reference" : "floating" : g], C = Je(await n.getClippingRect({ element: (r = await (n.isElement == null ? void 0 : n.isElement(_))) == null || r ? _ : _.contextElement || await (n.getDocumentElement == null ? void 0 : n.getDocumentElement(l.floating)), boundary: x, rootBoundary: w, strategy: d })), N = Je(n.convertOffsetParentRelativeRectToViewportRelativeRect ? await n.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: g === "floating" ? { ...a.floating, x: i, y: o } : a.reference, offsetParent: await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(l.floating)), strategy: d }) : a[g]);
   return { top: C.top - N.top + y.top, bottom: N.bottom - C.bottom + y.bottom, left: C.left - N.left + y.left, right: N.right - C.right + y.right };
 }
-const Qr = Math.min, Ur = Math.max;
-function ft(t, e, r) {
-  return Ur(t, Qr(e, r));
+const Ur = Math.min, Fr = Math.max;
+function gt(t, e, r) {
+  return Fr(t, Ur(e, r));
 }
-const Fr = (t) => ({ name: "arrow", options: t, async fn(e) {
+const Hr = (t) => ({ name: "arrow", options: t, async fn(e) {
   const { element: r, padding: i = 0 } = t ?? {}, { x: o, y: n, placement: a, rects: l, platform: d } = e;
   if (r == null)
     return {};
-  const x = rr(i), w = { x: o, y: n }, f = Ne(a), D = nt(a), h = Bt(f), y = await d.getDimensions(r), _ = f === "y" ? "top" : "left", C = f === "y" ? "bottom" : "right", N = l.reference[h] + l.reference[f] - w[f] - l.floating[h], Q = w[f] - l.reference[f], U = await (d.getOffsetParent == null ? void 0 : d.getOffsetParent(r));
-  let R = U ? f === "y" ? U.clientHeight || 0 : U.clientWidth || 0 : 0;
-  R === 0 && (R = l.floating[h]);
-  const ie = N / 2 - Q / 2, J = x[_], P = R - y[h] - x[C], F = R / 2 - y[h] / 2 + ie, V = ft(J, F, P), Z = (D === "start" ? x[_] : x[C]) > 0 && F !== V && l.reference[h] <= l.floating[h];
-  return { [f]: w[f] - (Z ? F < J ? J - F : P - F : 0), data: { [f]: V, centerOffset: F - V } };
-} }), Hr = { left: "right", right: "left", bottom: "top", top: "bottom" };
+  const x = ir(i), w = { x: o, y: n }, g = Ne(a), O = nt(a), h = At(g), y = await d.getDimensions(r), _ = g === "y" ? "top" : "left", C = g === "y" ? "bottom" : "right", N = l.reference[h] + l.reference[g] - w[g] - l.floating[h], Q = w[g] - l.reference[g], U = await (d.getOffsetParent == null ? void 0 : d.getOffsetParent(r));
+  let M = U ? g === "y" ? U.clientHeight || 0 : U.clientWidth || 0 : 0;
+  M === 0 && (M = l.floating[h]);
+  const ie = N / 2 - Q / 2, J = x[_], A = M - y[h] - x[C], F = M / 2 - y[h] / 2 + ie, z = gt(J, F, A), Z = (O === "start" ? x[_] : x[C]) > 0 && F !== z && l.reference[h] <= l.floating[h];
+  return { [g]: w[g] - (Z ? F < J ? J - F : A - F : 0), data: { [g]: z, centerOffset: F - z } };
+} }), jr = { left: "right", right: "left", bottom: "top", top: "bottom" };
 function Ge(t) {
-  return t.replace(/left|right|bottom|top/g, (e) => Hr[e]);
+  return t.replace(/left|right|bottom|top/g, (e) => jr[e]);
 }
-function jr(t, e, r) {
+function Wr(t, e, r) {
   r === void 0 && (r = !1);
-  const i = nt(t), o = Ne(t), n = Bt(o);
+  const i = nt(t), o = Ne(t), n = At(o);
   let a = o === "x" ? i === (r ? "end" : "start") ? "right" : "left" : i === "start" ? "bottom" : "top";
   return e.reference[n] > e.floating[n] && (a = Ge(a)), { main: a, cross: Ge(a) };
 }
-const Wr = { start: "end", end: "start" };
-function Nt(t) {
-  return t.replace(/start|end/g, (e) => Wr[e]);
+const Vr = { start: "end", end: "start" };
+function It(t) {
+  return t.replace(/start|end/g, (e) => Vr[e]);
 }
-const Vr = ["top", "right", "bottom", "left"];
-Vr.reduce((t, e) => t.concat(e, e + "-start", e + "-end"), []);
-const zr = function(t) {
+const zr = ["top", "right", "bottom", "left"];
+zr.reduce((t, e) => t.concat(e, e + "-start", e + "-end"), []);
+const Jr = function(t) {
   return t === void 0 && (t = {}), { name: "flip", options: t, async fn(e) {
     var r;
-    const { placement: i, middlewareData: o, rects: n, initialPlacement: a, platform: l, elements: d } = e, { mainAxis: x = !0, crossAxis: w = !0, fallbackPlacements: f, fallbackStrategy: D = "bestFit", flipAlignment: h = !0, ...y } = t, _ = Me(i), C = f || (_ === a || !h ? [Ge(a)] : function(F) {
-      const V = Ge(F);
-      return [Nt(F), V, Nt(V)];
-    }(a)), N = [a, ...C], Q = await ir(e, y), U = [];
-    let R = ((r = o.flip) == null ? void 0 : r.overflows) || [];
+    const { placement: i, middlewareData: o, rects: n, initialPlacement: a, platform: l, elements: d } = e, { mainAxis: x = !0, crossAxis: w = !0, fallbackPlacements: g, fallbackStrategy: O = "bestFit", flipAlignment: h = !0, ...y } = t, _ = Me(i), C = g || (_ === a || !h ? [Ge(a)] : function(F) {
+      const z = Ge(F);
+      return [It(F), z, It(z)];
+    }(a)), N = [a, ...C], Q = await or(e, y), U = [];
+    let M = ((r = o.flip) == null ? void 0 : r.overflows) || [];
     if (x && U.push(Q[_]), w) {
-      const { main: F, cross: V } = jr(i, n, await (l.isRTL == null ? void 0 : l.isRTL(d.floating)));
-      U.push(Q[F], Q[V]);
+      const { main: F, cross: z } = Wr(i, n, await (l.isRTL == null ? void 0 : l.isRTL(d.floating)));
+      U.push(Q[F], Q[z]);
     }
-    if (R = [...R, { placement: i, overflows: U }], !U.every((F) => F <= 0)) {
+    if (M = [...M, { placement: i, overflows: U }], !U.every((F) => F <= 0)) {
       var ie, J;
-      const F = ((ie = (J = o.flip) == null ? void 0 : J.index) != null ? ie : 0) + 1, V = N[F];
-      if (V)
-        return { data: { index: F, overflows: R }, reset: { placement: V } };
+      const F = ((ie = (J = o.flip) == null ? void 0 : J.index) != null ? ie : 0) + 1, z = N[F];
+      if (z)
+        return { data: { index: F, overflows: M }, reset: { placement: z } };
       let Z = "bottom";
-      switch (D) {
+      switch (O) {
         case "bestFit": {
-          var P;
-          const s = (P = R.map((c) => [c, c.overflows.filter((u) => u > 0).reduce((u, v) => u + v, 0)]).sort((c, u) => c[1] - u[1])[0]) == null ? void 0 : P[0].placement;
+          var A;
+          const s = (A = M.map((c) => [c, c.overflows.filter((u) => u > 0).reduce((u, v) => u + v, 0)]).sort((c, u) => c[1] - u[1])[0]) == null ? void 0 : A[0].placement;
           s && (Z = s);
           break;
         }
@@ -552,45 +553,45 @@ const zr = function(t) {
     }
     return {};
   } };
-}, Jr = function(t) {
+}, Gr = function(t) {
   return t === void 0 && (t = 0), { name: "offset", options: t, async fn(e) {
     const { x: r, y: i } = e, o = await async function(n, a) {
-      const { placement: l, platform: d, elements: x } = n, w = await (d.isRTL == null ? void 0 : d.isRTL(x.floating)), f = Me(l), D = nt(l), h = Ne(l) === "x", y = ["left", "top"].includes(f) ? -1 : 1, _ = w && h ? -1 : 1, C = typeof a == "function" ? a(n) : a;
+      const { placement: l, platform: d, elements: x } = n, w = await (d.isRTL == null ? void 0 : d.isRTL(x.floating)), g = Me(l), O = nt(l), h = Ne(l) === "x", y = ["left", "top"].includes(g) ? -1 : 1, _ = w && h ? -1 : 1, C = typeof a == "function" ? a(n) : a;
       let { mainAxis: N, crossAxis: Q, alignmentAxis: U } = typeof C == "number" ? { mainAxis: C, crossAxis: 0, alignmentAxis: null } : { mainAxis: 0, crossAxis: 0, alignmentAxis: null, ...C };
-      return D && typeof U == "number" && (Q = D === "end" ? -1 * U : U), h ? { x: Q * _, y: N * y } : { x: N * y, y: Q * _ };
+      return O && typeof U == "number" && (Q = O === "end" ? -1 * U : U), h ? { x: Q * _, y: N * y } : { x: N * y, y: Q * _ };
     }(e, t);
     return { x: r + o.x, y: i + o.y, data: o };
   } };
 };
-function Gr(t) {
+function Kr(t) {
   return t === "x" ? "y" : "x";
 }
-const Kr = function(t) {
+const Xr = function(t) {
   return t === void 0 && (t = {}), { name: "shift", options: t, async fn(e) {
     const { x: r, y: i, placement: o } = e, { mainAxis: n = !0, crossAxis: a = !1, limiter: l = { fn: (C) => {
       let { x: N, y: Q } = C;
       return { x: N, y: Q };
-    } }, ...d } = t, x = { x: r, y: i }, w = await ir(e, d), f = Ne(Me(o)), D = Gr(f);
-    let h = x[f], y = x[D];
+    } }, ...d } = t, x = { x: r, y: i }, w = await or(e, d), g = Ne(Me(o)), O = Kr(g);
+    let h = x[g], y = x[O];
     if (n) {
-      const C = f === "y" ? "bottom" : "right";
-      h = ft(h + w[f === "y" ? "top" : "left"], h, h - w[C]);
+      const C = g === "y" ? "bottom" : "right";
+      h = gt(h + w[g === "y" ? "top" : "left"], h, h - w[C]);
     }
     if (a) {
-      const C = D === "y" ? "bottom" : "right";
-      y = ft(y + w[D === "y" ? "top" : "left"], y, y - w[C]);
+      const C = O === "y" ? "bottom" : "right";
+      y = gt(y + w[O === "y" ? "top" : "left"], y, y - w[C]);
     }
-    const _ = l.fn({ ...e, [f]: h, [D]: y });
+    const _ = l.fn({ ...e, [g]: h, [O]: y });
     return { ..._, data: { x: _.x - r, y: _.y - i } };
   } };
 };
-function or(t) {
+function nr(t) {
   return t && t.document && t.location && t.alert && t.setInterval;
 }
 function ae(t) {
   if (t == null)
     return window;
-  if (!or(t)) {
+  if (!nr(t)) {
     const e = t.ownerDocument;
     return e && e.defaultView || window;
   }
@@ -600,16 +601,16 @@ function Ie(t) {
   return ae(t).getComputedStyle(t);
 }
 function ne(t) {
-  return or(t) ? "" : t ? (t.nodeName || "").toLowerCase() : "";
+  return nr(t) ? "" : t ? (t.nodeName || "").toLowerCase() : "";
 }
-function nr() {
+function sr() {
   const t = navigator.userAgentData;
   return t != null && t.brands ? t.brands.map((e) => e.brand + "/" + e.version).join(" ") : navigator.userAgent;
 }
 function re(t) {
   return t instanceof ae(t).HTMLElement;
 }
-function Ee(t) {
+function Ce(t) {
   return t instanceof ae(t).Element;
 }
 function Pt(t) {
@@ -619,37 +620,37 @@ function st(t) {
   const { overflow: e, overflowX: r, overflowY: i } = Ie(t);
   return /auto|scroll|overlay|hidden/.test(e + i + r);
 }
-function Xr(t) {
+function Yr(t) {
   return ["table", "td", "th"].includes(ne(t));
 }
-function It(t) {
-  const e = /firefox/i.test(nr()), r = Ie(t);
+function Qt(t) {
+  const e = /firefox/i.test(sr()), r = Ie(t);
   return r.transform !== "none" || r.perspective !== "none" || r.contain === "paint" || ["transform", "perspective"].includes(r.willChange) || e && r.willChange === "filter" || e && !!r.filter && r.filter !== "none";
 }
-function sr() {
-  return !/^((?!chrome|android).)*safari/i.test(nr());
+function ar() {
+  return !/^((?!chrome|android).)*safari/i.test(sr());
 }
-const Qt = Math.min, Be = Math.max, Ke = Math.round;
+const Ut = Math.min, qe = Math.max, Ke = Math.round;
 function ve(t, e, r) {
   var i, o, n, a;
   e === void 0 && (e = !1), r === void 0 && (r = !1);
   const l = t.getBoundingClientRect();
   let d = 1, x = 1;
   e && re(t) && (d = t.offsetWidth > 0 && Ke(l.width) / t.offsetWidth || 1, x = t.offsetHeight > 0 && Ke(l.height) / t.offsetHeight || 1);
-  const w = Ee(t) ? ae(t) : window, f = !sr() && r, D = (l.left + (f && (i = (o = w.visualViewport) == null ? void 0 : o.offsetLeft) != null ? i : 0)) / d, h = (l.top + (f && (n = (a = w.visualViewport) == null ? void 0 : a.offsetTop) != null ? n : 0)) / x, y = l.width / d, _ = l.height / x;
-  return { width: y, height: _, top: h, right: D + y, bottom: h + _, left: D, x: D, y: h };
+  const w = Ce(t) ? ae(t) : window, g = !ar() && r, O = (l.left + (g && (i = (o = w.visualViewport) == null ? void 0 : o.offsetLeft) != null ? i : 0)) / d, h = (l.top + (g && (n = (a = w.visualViewport) == null ? void 0 : a.offsetTop) != null ? n : 0)) / x, y = l.width / d, _ = l.height / x;
+  return { width: y, height: _, top: h, right: O + y, bottom: h + _, left: O, x: O, y: h };
 }
 function de(t) {
   return (e = t, (e instanceof ae(e).Node ? t.ownerDocument : t.document) || window.document).documentElement;
   var e;
 }
 function at(t) {
-  return Ee(t) ? { scrollLeft: t.scrollLeft, scrollTop: t.scrollTop } : { scrollLeft: t.pageXOffset, scrollTop: t.pageYOffset };
+  return Ce(t) ? { scrollLeft: t.scrollLeft, scrollTop: t.scrollTop } : { scrollLeft: t.pageXOffset, scrollTop: t.pageYOffset };
 }
-function ar(t) {
+function lr(t) {
   return ve(de(t)).left + at(t).scrollLeft;
 }
-function Yr(t, e, r) {
+function Zr(t, e, r) {
   const i = re(e), o = de(e), n = ve(t, i && function(d) {
     const x = ve(d);
     return Ke(x.width) !== d.offsetWidth || Ke(x.height) !== d.offsetHeight;
@@ -661,70 +662,70 @@ function Yr(t, e, r) {
       const d = ve(e, !0);
       l.x = d.x + e.clientLeft, l.y = d.y + e.clientTop;
     } else
-      o && (l.x = ar(o));
+      o && (l.x = lr(o));
   return { x: n.left + a.scrollLeft - l.x, y: n.top + a.scrollTop - l.y, width: n.width, height: n.height };
 }
-function lr(t) {
+function cr(t) {
   return ne(t) === "html" ? t : t.assignedSlot || t.parentNode || (Pt(t) ? t.host : null) || de(t);
 }
-function Ut(t) {
+function Ft(t) {
   return re(t) && getComputedStyle(t).position !== "fixed" ? t.offsetParent : null;
 }
-function gt(t) {
+function bt(t) {
   const e = ae(t);
-  let r = Ut(t);
-  for (; r && Xr(r) && getComputedStyle(r).position === "static"; )
-    r = Ut(r);
-  return r && (ne(r) === "html" || ne(r) === "body" && getComputedStyle(r).position === "static" && !It(r)) ? e : r || function(i) {
-    let o = lr(i);
+  let r = Ft(t);
+  for (; r && Yr(r) && getComputedStyle(r).position === "static"; )
+    r = Ft(r);
+  return r && (ne(r) === "html" || ne(r) === "body" && getComputedStyle(r).position === "static" && !Qt(r)) ? e : r || function(i) {
+    let o = cr(i);
     for (Pt(o) && (o = o.host); re(o) && !["html", "body"].includes(ne(o)); ) {
-      if (It(o))
+      if (Qt(o))
         return o;
       o = o.parentNode;
     }
     return null;
   }(t) || e;
 }
-function Ft(t) {
+function Ht(t) {
   if (re(t))
     return { width: t.offsetWidth, height: t.offsetHeight };
   const e = ve(t);
   return { width: e.width, height: e.height };
 }
-function cr(t) {
-  const e = lr(t);
-  return ["html", "body", "#document"].includes(ne(e)) ? t.ownerDocument.body : re(e) && st(e) ? e : cr(e);
+function ur(t) {
+  const e = cr(t);
+  return ["html", "body", "#document"].includes(ne(e)) ? t.ownerDocument.body : re(e) && st(e) ? e : ur(e);
 }
-function ur(t, e) {
+function dr(t, e) {
   var r;
   e === void 0 && (e = []);
-  const i = cr(t), o = i === ((r = t.ownerDocument) == null ? void 0 : r.body), n = ae(i), a = o ? [n].concat(n.visualViewport || [], st(i) ? i : []) : i, l = e.concat(a);
-  return o ? l : l.concat(ur(a));
+  const i = ur(t), o = i === ((r = t.ownerDocument) == null ? void 0 : r.body), n = ae(i), a = o ? [n].concat(n.visualViewport || [], st(i) ? i : []) : i, l = e.concat(a);
+  return o ? l : l.concat(dr(a));
 }
-function Ht(t, e, r) {
+function jt(t, e, r) {
   return e === "viewport" ? Je(function(i, o) {
     const n = ae(i), a = de(i), l = n.visualViewport;
-    let d = a.clientWidth, x = a.clientHeight, w = 0, f = 0;
+    let d = a.clientWidth, x = a.clientHeight, w = 0, g = 0;
     if (l) {
       d = l.width, x = l.height;
-      const D = sr();
-      (D || !D && o === "fixed") && (w = l.offsetLeft, f = l.offsetTop);
+      const O = ar();
+      (O || !O && o === "fixed") && (w = l.offsetLeft, g = l.offsetTop);
     }
-    return { width: d, height: x, x: w, y: f };
-  }(t, r)) : Ee(e) ? function(i, o) {
+    return { width: d, height: x, x: w, y: g };
+  }(t, r)) : Ce(e) ? function(i, o) {
     const n = ve(i, !1, o === "fixed"), a = n.top + i.clientTop, l = n.left + i.clientLeft;
     return { top: a, left: l, x: l, y: a, right: l + i.clientWidth, bottom: a + i.clientHeight, width: i.clientWidth, height: i.clientHeight };
   }(e, r) : Je(function(i) {
     var o;
-    const n = de(i), a = at(i), l = (o = i.ownerDocument) == null ? void 0 : o.body, d = Be(n.scrollWidth, n.clientWidth, l ? l.scrollWidth : 0, l ? l.clientWidth : 0), x = Be(n.scrollHeight, n.clientHeight, l ? l.scrollHeight : 0, l ? l.clientHeight : 0);
-    let w = -a.scrollLeft + ar(i);
-    const f = -a.scrollTop;
-    return Ie(l || n).direction === "rtl" && (w += Be(n.clientWidth, l ? l.clientWidth : 0) - d), { width: d, height: x, x: w, y: f };
+    const n = de(i), a = at(i), l = (o = i.ownerDocument) == null ? void 0 : o.body, d = qe(n.scrollWidth, n.clientWidth, l ? l.scrollWidth : 0, l ? l.clientWidth : 0), x = qe(n.scrollHeight, n.clientHeight, l ? l.scrollHeight : 0, l ? l.clientHeight : 0);
+    let w = -a.scrollLeft + lr(i);
+    const g = -a.scrollTop;
+    return Ie(l || n).direction === "rtl" && (w += qe(n.clientWidth, l ? l.clientWidth : 0) - d), { width: d, height: x, x: w, y: g };
   }(de(t)));
 }
-function Zr(t) {
-  const e = ur(t), r = ["absolute", "fixed"].includes(Ie(t).position) && re(t) ? gt(t) : t;
-  return Ee(r) ? e.filter((i) => Ee(i) && function(o, n) {
+function ei(t) {
+  const e = dr(t), r = ["absolute", "fixed"].includes(Ie(t).position) && re(t) ? bt(t) : t;
+  return Ce(r) ? e.filter((i) => Ce(i) && function(o, n) {
     const a = n.getRootNode == null ? void 0 : n.getRootNode();
     if (o.contains(n))
       return !0;
@@ -739,12 +740,12 @@ function Zr(t) {
     return !1;
   }(i, r) && ne(i) !== "body") : [];
 }
-const ei = { getClippingRect: function(t) {
+const ti = { getClippingRect: function(t) {
   let { element: e, boundary: r, rootBoundary: i, strategy: o } = t;
-  const n = [...r === "clippingAncestors" ? Zr(e) : [].concat(r), i], a = n[0], l = n.reduce((d, x) => {
-    const w = Ht(e, x, o);
-    return d.top = Be(w.top, d.top), d.right = Qt(w.right, d.right), d.bottom = Qt(w.bottom, d.bottom), d.left = Be(w.left, d.left), d;
-  }, Ht(e, a, o));
+  const n = [...r === "clippingAncestors" ? ei(e) : [].concat(r), i], a = n[0], l = n.reduce((d, x) => {
+    const w = jt(e, x, o);
+    return d.top = qe(w.top, d.top), d.right = Ut(w.right, d.right), d.bottom = Ut(w.bottom, d.bottom), d.left = qe(w.left, d.left), d;
+  }, jt(e, a, o));
   return { width: l.right - l.left, height: l.bottom - l.top, x: l.left, y: l.top };
 }, convertOffsetParentRelativeRectToViewportRelativeRect: function(t) {
   let { rect: e, offsetParent: r, strategy: i } = t;
@@ -758,42 +759,42 @@ const ei = { getClippingRect: function(t) {
     l.x = d.x + r.clientLeft, l.y = d.y + r.clientTop;
   }
   return { ...e, x: e.x - a.scrollLeft + l.x, y: e.y - a.scrollTop + l.y };
-}, isElement: Ee, getDimensions: Ft, getOffsetParent: gt, getDocumentElement: de, getElementRects: (t) => {
+}, isElement: Ce, getDimensions: Ht, getOffsetParent: bt, getDocumentElement: de, getElementRects: (t) => {
   let { reference: e, floating: r, strategy: i } = t;
-  return { reference: Yr(e, gt(r), i), floating: { ...Ft(r), x: 0, y: 0 } };
-}, getClientRects: (t) => Array.from(t.getClientRects()), isRTL: (t) => Ie(t).direction === "rtl" }, ti = (t, e, r) => Ir(t, e, { platform: ei, ...r }), Xe = "top", Ye = "bottom", bt = "left", mt = "right", Ue = {
+  return { reference: Zr(e, bt(r), i), floating: { ...Ht(r), x: 0, y: 0 } };
+}, getClientRects: (t) => Array.from(t.getClientRects()), isRTL: (t) => Ie(t).direction === "rtl" }, ri = (t, e, r) => Qr(t, e, { platform: ti, ...r }), Xe = "top", Ye = "bottom", mt = "left", vt = "right", Ue = {
   [Xe]: Ye,
   [Ye]: Xe,
-  [bt]: mt,
-  [mt]: bt
-}, ri = {
-  [bt]: -45,
+  [mt]: vt,
+  [vt]: mt
+}, ii = {
+  [mt]: -45,
   [Xe]: 45,
-  [mt]: 135,
+  [vt]: 135,
   [Ye]: -135
-}, jt = "calc(50% - 7px)", ii = (t) => [Xe, Ye].includes(t);
-function oi({ actualDirection: t, directionName: e, arrowEl: r }) {
+}, Wt = "calc(50% - 7px)", oi = (t) => [Xe, Ye].includes(t);
+function ni({ actualDirection: t, directionName: e, arrowEl: r }) {
   if (!r)
     return;
   t = e;
-  const i = ii(e);
-  r.style.left = i ? jt : "", r.style.top = i ? "" : jt;
+  const i = oi(e);
+  r.style.left = i ? Wt : "", r.style.top = i ? "" : Wt;
 }
-async function ni(t) {
+async function si(t) {
   var o, n;
   if (!t.isShowing)
     return;
   if (await ((o = t == null ? void 0 : t.waitForDOM) == null ? void 0 : o.call(t)), t.isCallout)
-    return oi(t);
-  const e = await ti(t.targetEl, t.attentionEl, {
+    return ni(t);
+  const e = await ri(t.targetEl, t.attentionEl, {
     placement: t.directionName,
     middleware: [
       // Should we make this configurable, but have these as sane defaults?
-      zr(),
-      Jr(8),
-      Kr({ padding: 16 }),
+      Jr(),
+      Gr(8),
+      Xr({ padding: 16 }),
       // @ts-ignore
-      Fr({ element: t.noArrow ? void 0 : t.arrowEl })
+      Hr({ element: t.noArrow ? void 0 : t.arrowEl })
       // FIXME
     ]
   });
@@ -805,11 +806,11 @@ async function ni(t) {
   let { x: r, y: i } = e.middlewareData.arrow;
   t.arrowEl && (t.arrowEl.style.left = r ? r + "px" : "", t.arrowEl.style.top = i ? i + "px" : "");
 }
-var vt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function si(t) {
+var yt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function ai(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var dr = {}, hr = {};
+var hr = {}, pr = {};
 (function(t) {
   Object.defineProperty(t, "__esModule", { value: !0 }), t.errorMessages = t.ErrorType = void 0;
   var e;
@@ -831,10 +832,10 @@ var dr = {}, hr = {};
     ],
     [e.EndOfString, "malformed escape sequence at end of string"]
   ]);
-})(hr);
+})(pr);
 (function(t) {
   Object.defineProperty(t, "__esModule", { value: !0 }), t.unraw = t.errorMessages = t.ErrorType = void 0;
-  const e = hr;
+  const e = pr;
   Object.defineProperty(t, "ErrorType", { enumerable: !0, get: function() {
     return e.ErrorType;
   } }), Object.defineProperty(t, "errorMessages", { enumerable: !0, get: function() {
@@ -893,9 +894,9 @@ var dr = {}, hr = {};
   function w(h) {
     return x.get(h) || h;
   }
-  const f = /\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;
-  function D(h, y = !1) {
-    return h.replace(f, function(_, C, N, Q, U, R, ie, J, P) {
+  const g = /\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;
+  function O(h, y = !1) {
+    return h.replace(g, function(_, C, N, Q, U, M, ie, J, A) {
       if (C !== void 0)
         return "\\";
       if (N !== void 0)
@@ -903,26 +904,26 @@ var dr = {}, hr = {};
       if (Q !== void 0)
         return l(Q);
       if (U !== void 0)
-        return n(U, R);
+        return n(U, M);
       if (ie !== void 0)
         return n(ie);
       if (J === "0")
         return "\0";
       if (J !== void 0)
         return d(J, !y);
-      if (P !== void 0)
-        return w(P);
+      if (A !== void 0)
+        return w(A);
       throw new SyntaxError(e.errorMessages.get(e.ErrorType.EndOfString));
     });
   }
-  t.unraw = D, t.default = D;
-})(dr);
-const ai = /* @__PURE__ */ si(dr);
-var Pe = {}, pr = {}, fr = { exports: {} };
+  t.unraw = O, t.default = O;
+})(hr);
+const li = /* @__PURE__ */ ai(hr);
+var Ae = {}, fr = {}, gr = { exports: {} };
 (function(t) {
   (function(e, r) {
     t.exports ? t.exports = r() : e.moo = r();
-  })(vt, function() {
+  })(yt, function() {
     var e = Object.prototype.hasOwnProperty, r = Object.prototype.toString, i = typeof new RegExp().sticky == "boolean";
     function o(s) {
       return s && r.call(s) === "[object RegExp]";
@@ -964,10 +965,10 @@ var Pe = {}, pr = {}, fr = { exports: {} };
       } else
         throw new Error("Not a pattern: " + s);
     }
-    function f(s, c) {
+    function g(s, c) {
       return s.length > c ? s : Array(c - s.length + 1).join(" ") + s;
     }
-    function D(s, c) {
+    function O(s, c) {
       for (var u = s.length, v = 0; ; ) {
         var E = s.lastIndexOf(`
 `, u - 1);
@@ -982,14 +983,14 @@ var Pe = {}, pr = {}, fr = { exports: {} };
       for (var c = Object.getOwnPropertyNames(s), u = [], v = 0; v < c.length; v++) {
         var E = c[v], $ = s[E], L = [].concat($);
         if (E === "include") {
-          for (var A = 0; A < L.length; A++)
-            u.push({ include: L[A] });
+          for (var P = 0; P < L.length; P++)
+            u.push({ include: L[P] });
           continue;
         }
-        var B = [];
+        var q = [];
         L.forEach(function(k) {
-          n(k) ? (B.length && u.push(_(E, B)), u.push(_(E, k)), B = []) : B.push(k);
-        }), B.length && u.push(_(E, B));
+          n(k) ? (q.length && u.push(_(E, q)), u.push(_(E, k)), q = []) : q.push(k);
+        }), q.length && u.push(_(E, q));
       }
       return u;
     }
@@ -1036,10 +1037,10 @@ var Pe = {}, pr = {}, fr = { exports: {} };
     }
     var N = _("error", { lineBreaks: !0, shouldThrow: !0 });
     function Q(s, c) {
-      for (var u = null, v = /* @__PURE__ */ Object.create(null), E = !0, $ = null, L = [], A = [], B = 0; B < s.length; B++)
-        s[B].fallback && (E = !1);
-      for (var B = 0; B < s.length; B++) {
-        var k = s[B];
+      for (var u = null, v = /* @__PURE__ */ Object.create(null), E = !0, $ = null, L = [], P = [], q = 0; q < s.length; q++)
+        s[q].fallback && (E = !1);
+      for (var q = 0; q < s.length; q++) {
+        var k = s[q];
         if (k.include)
           throw new Error("Inheritance is not allowed in stateless lexers");
         if (k.error || k.fallback) {
@@ -1073,26 +1074,26 @@ var Pe = {}, pr = {}, fr = { exports: {} };
           var ye = x(j.map(w)), K = new RegExp(ye);
           if (K.test(""))
             throw new Error("RegExp matches empty string: " + K);
-          var Ce = l(ye);
-          if (Ce > 0)
+          var Le = l(ye);
+          if (Le > 0)
             throw new Error("RegExp has capture groups: " + K + `
 Use (?: … ) instead`);
           if (!k.lineBreaks && K.test(`
 `))
             throw new Error("Rule should declare lineBreaks: " + K);
-          A.push(d(ye));
+          P.push(d(ye));
         }
       }
-      var $e = u && u.fallback, Le = i && !$e ? "ym" : "gm", Qe = i || $e ? "" : "|";
-      $ === !0 && (Le += "u");
-      var Dr = new RegExp(x(A) + Qe, Le);
-      return { regexp: Dr, groups: L, fast: v, error: u || N };
+      var $e = u && u.fallback, Te = i && !$e ? "ym" : "gm", Qe = i || $e ? "" : "|";
+      $ === !0 && (Te += "u");
+      var Or = new RegExp(x(P) + Qe, Te);
+      return { regexp: Or, groups: L, fast: v, error: u || N };
     }
     function U(s) {
       var c = Q(C(s));
-      return new P({ start: c }, "start");
+      return new A({ start: c }, "start");
     }
-    function R(s, c, u) {
+    function M(s, c, u) {
       var v = s && (s.push || s.next);
       if (v && !u[v])
         throw new Error("Missing state '" + v + "' (in token '" + s.defaultType + "' of state '" + c + "')");
@@ -1109,21 +1110,21 @@ Use (?: … ) instead`);
         E[L] = C(s[L]).concat(u);
       }
       for (var $ = 0; $ < v.length; $++)
-        for (var L = v[$], A = E[L], B = /* @__PURE__ */ Object.create(null), k = 0; k < A.length; k++) {
-          var j = A[k];
+        for (var L = v[$], P = E[L], q = /* @__PURE__ */ Object.create(null), k = 0; k < P.length; k++) {
+          var j = P[k];
           if (j.include) {
             var he = [k, 1];
-            if (j.include !== L && !B[j.include]) {
-              B[j.include] = !0;
+            if (j.include !== L && !q[j.include]) {
+              q[j.include] = !0;
               var pe = E[j.include];
               if (!pe)
                 throw new Error("Cannot include nonexistent state '" + j.include + "' (in state '" + L + "')");
               for (var fe = 0; fe < pe.length; fe++) {
                 var ye = pe[fe];
-                A.indexOf(ye) === -1 && he.push(ye);
+                P.indexOf(ye) === -1 && he.push(ye);
               }
             }
-            A.splice.apply(A, he), k--;
+            P.splice.apply(P, he), k--;
           }
         }
       for (var K = /* @__PURE__ */ Object.create(null), $ = 0; $ < v.length; $++) {
@@ -1131,32 +1132,32 @@ Use (?: … ) instead`);
         K[L] = Q(E[L], !0);
       }
       for (var $ = 0; $ < v.length; $++) {
-        for (var Ce = v[$], $e = K[Ce], Le = $e.groups, k = 0; k < Le.length; k++)
-          R(Le[k], Ce, K);
+        for (var Le = v[$], $e = K[Le], Te = $e.groups, k = 0; k < Te.length; k++)
+          M(Te[k], Le, K);
         for (var Qe = Object.getOwnPropertyNames($e.fast), k = 0; k < Qe.length; k++)
-          R($e.fast[Qe[k]], Ce, K);
+          M($e.fast[Qe[k]], Le, K);
       }
-      return new P(K, c);
+      return new A(K, c);
     }
     function J(s) {
       for (var c = typeof Map < "u", u = c ? /* @__PURE__ */ new Map() : /* @__PURE__ */ Object.create(null), v = Object.getOwnPropertyNames(s), E = 0; E < v.length; E++) {
-        var $ = v[E], L = s[$], A = Array.isArray(L) ? L : [L];
-        A.forEach(function(B) {
-          if (typeof B != "string")
+        var $ = v[E], L = s[$], P = Array.isArray(L) ? L : [L];
+        P.forEach(function(q) {
+          if (typeof q != "string")
             throw new Error("keyword must be string (in keyword '" + $ + "')");
-          c ? u.set(B, $) : u[B] = $;
+          c ? u.set(q, $) : u[q] = $;
         });
       }
-      return function(B) {
-        return c ? u.get(B) : u[B];
+      return function(q) {
+        return c ? u.get(q) : u[q];
       };
     }
-    var P = function(s, c) {
+    var A = function(s, c) {
       this.startState = c, this.states = s, this.buffer = "", this.stack = [], this.reset();
     };
-    P.prototype.reset = function(s, c) {
+    A.prototype.reset = function(s, c) {
       return this.buffer = s || "", this.index = 0, this.line = c ? c.line : 1, this.col = c ? c.col : 1, this.queuedToken = c ? c.queuedToken : null, this.queuedText = c ? c.queuedText : "", this.queuedThrow = c ? c.queuedThrow : null, this.setState(c ? c.state : this.startState), this.stack = c && c.stack ? c.stack.slice() : [], this;
-    }, P.prototype.save = function() {
+    }, A.prototype.save = function() {
       return {
         line: this.line,
         col: this.col,
@@ -1166,15 +1167,15 @@ Use (?: … ) instead`);
         queuedText: this.queuedText,
         queuedThrow: this.queuedThrow
       };
-    }, P.prototype.setState = function(s) {
+    }, A.prototype.setState = function(s) {
       if (!(!s || this.state === s)) {
         this.state = s;
         var c = this.states[s];
         this.groups = c.groups, this.error = c.error, this.re = c.regexp, this.fast = c.fast;
       }
-    }, P.prototype.popState = function() {
+    }, A.prototype.popState = function() {
       this.setState(this.stack.pop());
-    }, P.prototype.pushState = function(s) {
+    }, A.prototype.pushState = function(s) {
       this.stack.push(this.state), this.setState(s);
     };
     var F = i ? function(s, c) {
@@ -1183,16 +1184,16 @@ Use (?: … ) instead`);
       var u = s.exec(c);
       return u[0].length === 0 ? null : u;
     };
-    P.prototype._getGroup = function(s) {
+    A.prototype._getGroup = function(s) {
       for (var c = this.groups.length, u = 0; u < c; u++)
         if (s[u + 1] !== void 0)
           return this.groups[u];
       throw new Error("Cannot find token type for matched text");
     };
-    function V() {
+    function z() {
       return this.value;
     }
-    if (P.prototype.next = function() {
+    if (A.prototype.next = function() {
       var s = this.index;
       if (this.queuedGroup) {
         var c = this._token(this.queuedGroup, this.queuedText, s);
@@ -1208,10 +1209,10 @@ Use (?: … ) instead`);
         var E = F(v, u), $ = this.error;
         if (E == null)
           return this._token($, u.slice(s, u.length), s);
-        var L = this._getGroup(E), A = E[0];
-        return $.fallback && E.index !== s ? (this.queuedGroup = L, this.queuedText = A, this._token($, u.slice(s, E.index), s)) : this._token(L, A, s);
+        var L = this._getGroup(E), P = E[0];
+        return $.fallback && E.index !== s ? (this.queuedGroup = L, this.queuedText = P, this._token($, u.slice(s, E.index), s)) : this._token(L, P, s);
       }
-    }, P.prototype._token = function(s, c, u) {
+    }, A.prototype._token = function(s, c, u) {
       var v = 0;
       if (s.lineBreaks) {
         var E = /\n/g, $ = 1;
@@ -1226,15 +1227,15 @@ Use (?: … ) instead`);
         type: typeof s.type == "function" && s.type(c) || s.defaultType,
         value: typeof s.value == "function" ? s.value(c) : c,
         text: c,
-        toString: V,
+        toString: z,
         offset: u,
         lineBreaks: v,
         line: this.line,
         col: this.col
-      }, A = c.length;
-      if (this.index += A, this.line += v, v !== 0 ? this.col = A - $ + 1 : this.col += A, s.shouldThrow) {
-        var B = new Error(this.formatError(L, "invalid syntax"));
-        throw B;
+      }, P = c.length;
+      if (this.index += P, this.line += v, v !== 0 ? this.col = P - $ + 1 : this.col += P, s.shouldThrow) {
+        var q = new Error(this.formatError(L, "invalid syntax"));
+        throw q;
       }
       return s.pop ? this.popState() : s.push ? this.pushState(s.push) : s.next && this.setState(s.next), L;
     }, typeof Symbol < "u" && Symbol.iterator) {
@@ -1246,11 +1247,11 @@ Use (?: … ) instead`);
         return { value: s, done: !s };
       }, Z.prototype[Symbol.iterator] = function() {
         return this;
-      }, P.prototype[Symbol.iterator] = function() {
+      }, A.prototype[Symbol.iterator] = function() {
         return new Z(this);
       };
     }
-    return P.prototype.formatError = function(s, c) {
+    return A.prototype.formatError = function(s, c) {
       if (s == null)
         var u = this.buffer.slice(this.index), s = {
           text: u,
@@ -1260,20 +1261,20 @@ Use (?: … ) instead`);
           line: this.line,
           col: this.col
         };
-      var v = 2, E = Math.max(s.line - v, 1), $ = s.line + v, L = String($).length, A = D(
+      var v = 2, E = Math.max(s.line - v, 1), $ = s.line + v, L = String($).length, P = O(
         this.buffer,
         this.line - s.line + v + 1
-      ).slice(0, 5), B = [];
-      B.push(c + " at line " + s.line + " col " + s.col + ":"), B.push("");
-      for (var k = 0; k < A.length; k++) {
-        var j = A[k], he = E + k;
-        B.push(f(String(he), L) + "  " + j), he === s.line && B.push(f("", L + s.col + 1) + "^");
+      ).slice(0, 5), q = [];
+      q.push(c + " at line " + s.line + " col " + s.col + ":"), q.push("");
+      for (var k = 0; k < P.length; k++) {
+        var j = P[k], he = E + k;
+        q.push(g(String(he), L) + "  " + j), he === s.line && q.push(g("", L + s.col + 1) + "^");
       }
-      return B.join(`
+      return q.join(`
 `);
-    }, P.prototype.clone = function() {
-      return new P(this.states, this.state);
-    }, P.prototype.has = function(s) {
+    }, A.prototype.clone = function() {
+      return new A(this.states, this.state);
+    }, A.prototype.has = function(s) {
       return !0;
     }, {
       compile: U,
@@ -1283,14 +1284,14 @@ Use (?: … ) instead`);
       keywords: J
     };
   });
-})(fr);
-var li = fr.exports;
+})(gr);
+var ci = gr.exports;
 (function(t) {
-  var e = vt && vt.__importDefault || function(i) {
+  var e = yt && yt.__importDefault || function(i) {
     return i && i.__esModule ? i : { default: i };
   };
   Object.defineProperty(t, "__esModule", { value: !0 }), t.lexer = t.states = void 0;
-  const r = e(li);
+  const r = e(ci);
   t.states = {
     body: {
       doubleapos: { match: "''", value: () => "'" },
@@ -1344,17 +1345,17 @@ var li = fr.exports;
       end: { match: /\s*\}/u, pop: 1 }
     }
   }, t.lexer = r.default.states(t.states);
-})(pr);
-Object.defineProperty(Pe, "__esModule", { value: !0 });
-var gr = Pe.parse = Pe.ParseError = void 0;
-const br = pr, Fe = (t) => ({
+})(fr);
+Object.defineProperty(Ae, "__esModule", { value: !0 });
+var br = Ae.parse = Ae.ParseError = void 0;
+const mr = fr, Fe = (t) => ({
   offset: t.offset,
   line: t.line,
   col: t.col,
   text: t.text,
   lineBreaks: t.lineBreaks
 }), ut = (t) => t === "plural" || t === "select" || t === "selectordinal";
-function ci(t, e) {
+function ui(t, e) {
   let r = "", i = "";
   for (const n of e) {
     const a = n.ctx.text;
@@ -1377,25 +1378,25 @@ function ci(t, e) {
     ctx: Object.assign({}, e[0].ctx, { text: i })
   }];
 }
-const ui = [
+const di = [
   "number",
   "date",
   "time",
   "spellout",
   "ordinal",
   "duration"
-], Wt = ["zero", "one", "two", "few", "many", "other"];
+], Vt = ["zero", "one", "two", "few", "many", "other"];
 class H extends Error {
   /** @internal */
   constructor(e, r) {
-    super(br.lexer.formatError(e, r));
+    super(mr.lexer.formatError(e, r));
   }
 }
-Pe.ParseError = H;
-class di {
+Ae.ParseError = H;
+class hi {
   constructor(e, r) {
     var i, o, n, a;
-    this.lexer = br.lexer.reset(e), this.cardinalKeys = (i = r == null ? void 0 : r.cardinal) !== null && i !== void 0 ? i : Wt, this.ordinalKeys = (o = r == null ? void 0 : r.ordinal) !== null && o !== void 0 ? o : Wt, this.strict = (n = r == null ? void 0 : r.strict) !== null && n !== void 0 ? n : !1, this.strictPluralKeys = (a = r == null ? void 0 : r.strictPluralKeys) !== null && a !== void 0 ? a : !0;
+    this.lexer = mr.lexer.reset(e), this.cardinalKeys = (i = r == null ? void 0 : r.cardinal) !== null && i !== void 0 ? i : Vt, this.ordinalKeys = (o = r == null ? void 0 : r.ordinal) !== null && o !== void 0 ? o : Vt, this.strict = (n = r == null ? void 0 : r.strict) !== null && n !== void 0 ? n : !1, this.strictPluralKeys = (a = r == null ? void 0 : r.strictPluralKeys) !== null && a !== void 0 ? a : !0;
   }
   parse() {
     return this.parseBody(!1, !0);
@@ -1443,7 +1444,7 @@ class di {
     const i = Fe(e), o = this.lexer.next();
     if (!o)
       throw new H(null, "Unexpected message end");
-    if (i.text += o.text, i.lineBreaks += o.lineBreaks, this.strict && (o.type === "func-simple" || o.type === "func-args") && !ui.includes(o.value)) {
+    if (i.text += o.text, i.lineBreaks += o.lineBreaks, this.strict && (o.type === "func-simple" || o.type === "func-args") && !di.includes(o.value)) {
       const n = `Invalid strict mode function arg type: ${o.value}`;
       throw new H(e, n);
     }
@@ -1471,7 +1472,7 @@ class di {
           throw new H(o, a);
         }
         let n = this.parseBody(this.strict ? !1 : r);
-        return this.strict && n.length > 0 && (n = ci(e, n)), {
+        return this.strict && n.length > 0 && (n = ui(e, n)), {
           type: "function",
           arg: e.value,
           key: o.value,
@@ -1515,11 +1516,11 @@ class di {
     throw new H(null, "Unexpected message end");
   }
 }
-function hi(t, e = {}) {
-  return new di(t, e).parse();
+function pi(t, e = {}) {
+  return new hi(t, e).parse();
 }
-gr = Pe.parse = hi;
-function mr(t, e) {
+br = Ae.parse = pi;
+function vr(t, e) {
   return t.filter((r) => r.type !== "content").length ? t.map((r) => {
     var n;
     if (r.type === "content")
@@ -1534,7 +1535,7 @@ function mr(t, e) {
     }
     const i = r.pluralOffset, o = {};
     return r.cases.forEach((a) => {
-      o[a.key.replace(/^=(.)+/, "$1")] = mr(
+      o[a.key.replace(/^=(.)+/, "$1")] = vr(
         a.tokens,
         e
       );
@@ -1548,35 +1549,35 @@ function mr(t, e) {
     ];
   }) : t.map((r) => e(r.value)).join("");
 }
-function pi(t, e = (r) => r) {
+function fi(t, e = (r) => r) {
   try {
-    return mr(gr(t), e);
+    return vr(br(t), e);
   } catch (r) {
     return console.error(`${r.message} 
 
 Message: ${t}`), t;
   }
 }
-const te = (t) => typeof t == "string", fi = (t) => typeof t == "function", Vt = /* @__PURE__ */ new Map();
-function At(t) {
+const te = (t) => typeof t == "string", gi = (t) => typeof t == "function", zt = /* @__PURE__ */ new Map();
+function Rt(t) {
   return [...Array.isArray(t) ? t : [t], "en"];
 }
-function vr(t, e, r) {
-  const i = At(t);
+function yr(t, e, r) {
+  const i = Rt(t);
   return Ze(
     () => et("date", i, r),
     () => new Intl.DateTimeFormat(i, r)
   ).format(te(e) ? new Date(e) : e);
 }
-function yt(t, e, r) {
-  const i = At(t);
+function $t(t, e, r) {
+  const i = Rt(t);
   return Ze(
     () => et("number", i, r),
     () => new Intl.NumberFormat(i, r)
   ).format(e);
 }
-function zt(t, e, r, { offset: i = 0, ...o }) {
-  const n = At(t), a = e ? Ze(
+function Jt(t, e, r, { offset: i = 0, ...o }) {
+  const n = Rt(t), a = e ? Ze(
     () => et("plural-ordinal", n),
     () => new Intl.PluralRules(n, { type: "ordinal" })
   ) : Ze(
@@ -1587,54 +1588,54 @@ function zt(t, e, r, { offset: i = 0, ...o }) {
 }
 function Ze(t, e) {
   const r = t();
-  let i = Vt.get(r);
-  return i || (i = e(), Vt.set(r, i)), i;
+  let i = zt.get(r);
+  return i || (i = e(), zt.set(r, i)), i;
 }
 function et(t, e, r) {
   const i = e.join("-");
   return `${t}-${i}-${JSON.stringify(r)}`;
 }
-const yr = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g, gi = (t, e, r = {}) => {
+const $r = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g, bi = (t, e, r = {}) => {
   e = e || t;
   const i = (n) => te(n) ? r[n] || { style: n } : n, o = (n, a) => {
-    const l = Object.keys(r).length ? i("number") : {}, d = yt(e, n, l);
+    const l = Object.keys(r).length ? i("number") : {}, d = $t(e, n, l);
     return a.replace("#", d);
   };
   return {
     plural: (n, a) => {
-      const { offset: l = 0 } = a, d = zt(e, !1, n, a);
+      const { offset: l = 0 } = a, d = Jt(e, !1, n, a);
       return o(n - l, d);
     },
     selectordinal: (n, a) => {
-      const { offset: l = 0 } = a, d = zt(e, !0, n, a);
+      const { offset: l = 0 } = a, d = Jt(e, !0, n, a);
       return o(n - l, d);
     },
     select: (n, a) => a[n] ?? a.other,
-    number: (n, a) => yt(e, n, i(a)),
-    date: (n, a) => vr(e, n, i(a)),
+    number: (n, a) => $t(e, n, i(a)),
+    date: (n, a) => yr(e, n, i(a)),
     undefined: (n) => n
   };
 };
-function bi(t, e, r) {
+function mi(t, e, r) {
   return (i, o = {}) => {
-    const n = gi(e, r, o), a = (d) => Array.isArray(d) ? d.reduce((x, w) => {
+    const n = bi(e, r, o), a = (d) => Array.isArray(d) ? d.reduce((x, w) => {
       if (te(w))
         return x + w;
-      const [f, D, h] = w;
+      const [g, O, h] = w;
       let y = {};
       h != null && !te(h) ? Object.keys(h).forEach((C) => {
         y[C] = a(h[C]);
       }) : y = h;
-      const _ = n[D](i[f], y);
+      const _ = n[O](i[g], y);
       return _ == null ? x : x + _;
     }, "") : d, l = a(t);
-    return te(l) && yr.test(l) ? ai(l.trim()) : te(l) ? l.trim() : l;
+    return te(l) && $r.test(l) ? li(l.trim()) : te(l) ? l.trim() : l;
   };
 }
-var mi = Object.defineProperty, vi = (t, e, r) => e in t ? mi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, yi = (t, e, r) => (vi(t, typeof e != "symbol" ? e + "" : e, r), r);
-class $i {
+var vi = Object.defineProperty, yi = (t, e, r) => e in t ? vi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, $i = (t, e, r) => (yi(t, typeof e != "symbol" ? e + "" : e, r), r);
+class xi {
   constructor() {
-    yi(this, "_events", {});
+    $i(this, "_events", {});
   }
   on(e, r) {
     return this._hasEvent(e) || (this._events[e] = []), this._events[e].push(r), () => this.removeListener(e, r);
@@ -1652,10 +1653,10 @@ class $i {
     return Array.isArray(this._events[e]);
   }
 }
-var xi = Object.defineProperty, wi = (t, e, r) => e in t ? xi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, we = (t, e, r) => (wi(t, typeof e != "symbol" ? e + "" : e, r), r);
-class _i extends $i {
+var wi = Object.defineProperty, _i = (t, e, r) => e in t ? wi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, _e = (t, e, r) => (_i(t, typeof e != "symbol" ? e + "" : e, r), r);
+class ki extends xi {
   constructor(e) {
-    super(), we(this, "_locale"), we(this, "_locales"), we(this, "_localeData"), we(this, "_messages"), we(this, "_missing"), we(this, "t", this._.bind(this)), this._messages = {}, this._localeData = {}, e.missing != null && (this._missing = e.missing), e.messages != null && this.load(e.messages), e.localeData != null && this.loadLocaleData(e.localeData), (e.locale != null || e.locales != null) && this.activate(e.locale, e.locales);
+    super(), _e(this, "_locale"), _e(this, "_locales"), _e(this, "_localeData"), _e(this, "_messages"), _e(this, "_missing"), _e(this, "t", this._.bind(this)), this._messages = {}, this._localeData = {}, e.missing != null && (this._missing = e.missing), e.messages != null && this.load(e.messages), e.localeData != null && this.loadLocaleData(e.localeData), (e.locale != null || e.locales != null) && this.activate(e.locale, e.locales);
   }
   get locale() {
     return this._locale;
@@ -1704,47 +1705,47 @@ class _i extends $i {
     te(e) || (r = e.values || r, i = e.message, e = e.id);
     const n = !this.messages[e], a = this._missing;
     if (a && n)
-      return fi(a) ? a(this._locale, e) : a;
+      return gi(a) ? a(this._locale, e) : a;
     n && this.emit("missing", { id: e, locale: this._locale });
     let l = this.messages[e] || i || e;
-    return process.env.NODE_ENV !== "production" && (l = te(l) ? pi(l) : l), te(l) && yr.test(l) ? JSON.parse(`"${l}"`) : te(l) ? l : bi(
+    return process.env.NODE_ENV !== "production" && (l = te(l) ? fi(l) : l), te(l) && $r.test(l) ? JSON.parse(`"${l}"`) : te(l) ? l : mi(
       l,
       this._locale,
       this._locales
     )(r, o);
   }
   date(e, r) {
-    return vr(this._locales || this._locale, e, r);
+    return yr(this._locales || this._locale, e, r);
   }
   number(e, r) {
-    return yt(this._locales || this._locale, e, r);
+    return $t(this._locales || this._locale, e, r);
   }
 }
-function ki(t = {}) {
-  return new _i(t);
+function Si(t = {}) {
+  return new ki(t);
 }
-const z = ki(), Si = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Ei = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Ci = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Li = ["en", "nb", "fi"], $r = "en", Jt = (t) => Li.find(
+const V = Si(), Ei = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Close","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Ci = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Lukk","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Li = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Sulje","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Ti = ["en", "nb", "fi"], xr = "en", Gt = (t) => Ti.find(
   (e) => t === e || t.toLowerCase().includes(e)
-) || $r;
-function Ti() {
+) || xr;
+function Di() {
   if (typeof window > "u") {
     const t = process.env.NMP_LANGUAGE || Intl.DateTimeFormat().resolvedOptions().locale;
-    return Jt(t);
+    return Gt(t);
   }
   try {
     const t = document.documentElement.lang;
-    return Jt(t);
+    return Gt(t);
   } catch (t) {
-    return console.warn("could not detect locale, falling back to source locale", t), $r;
+    return console.warn("could not detect locale, falling back to source locale", t), xr;
   }
 }
-const Di = (t, e, r, i) => t === "nb" ? r : t === "fi" ? i : e, lt = (t, e, r) => {
-  const i = Ti(), o = Di(i, t, e, r);
-  z.load(i, o), z.activate(i);
+const Oi = (t, e, r, i) => t === "nb" ? r : t === "fi" ? i : e, lt = (t, e, r) => {
+  const i = Di(), o = Oi(i, t, e, r);
+  V.load(i, o), V.activate(i);
 };
-class $t extends Re(q) {
+class xt extends Re(B) {
   constructor() {
-    super(), lt(Si, Ei, Ci), this.show = !1, this.tooltip = !1, this.callout = !1, this.popover = !1, this.highlight = !1, this.noArrow = !1;
+    super(), lt(Ei, Ci, Li), this.show = !1, this.tooltip = !1, this.callout = !1, this.popover = !1, this.highlight = !1, this.canClose = !1, this.noArrow = !1;
   }
   connectedCallback() {
     if (super.connectedCallback(), !this.placement || !Object.keys(Ue).includes(this.placement))
@@ -1771,7 +1772,7 @@ ${JSON.stringify(
       this.show ? "" : "hidden"
     ), this.tooltip || this._attentionEl.style.setProperty(
       "--attention-display",
-      this.show ? "block" : "none"
+      this.show ? "flex" : "none"
     ), this.attentionState = {
       isShowing: this.show,
       isCallout: this.callout,
@@ -1781,30 +1782,30 @@ ${JSON.stringify(
       attentionEl: this._attentionEl,
       targetEl: this._targetEl,
       noArrow: this.noArrow
-    }, ni(this.attentionState);
+    }, si(this.attentionState);
   }
   pointingAtDirection() {
     switch (Ue[this._actualDirection]) {
       case "top":
-        return z._({
+        return V._({
           id: "attention.aria.pointingUp",
           message: "pointing up",
           comment: "Default screenreader message for top direction in the attention component"
         });
       case "right":
-        return z._({
+        return V._({
           id: "attention.aria.pointingRight",
           message: "pointing right",
           comment: "Default screenreader message for right direction in the attention component"
         });
       case "bottom":
-        return z._({
+        return V._({
           id: "attention.aria.pointingDown",
           message: "pointing down",
           comment: "Default screenreader message for bottom direction in the attention component"
         });
       case "left":
-        return z._({
+        return V._({
           id: "attention.aria.pointingLeft",
           message: "pointing left",
           comment: "Default screenreader message for left direction in the attention component"
@@ -1816,25 +1817,25 @@ ${JSON.stringify(
   activeAttentionType() {
     switch (!0) {
       case this.tooltip:
-        return z._({
+        return V._({
           id: "attention.aria.tooltip",
           message: "tooltip",
           comment: "Default screenreader message for tooltip in the attention component"
         });
       case this.callout:
-        return z._({
+        return V._({
           id: "attention.aria.callout",
           message: "callout speech bubble",
           comment: "Default screenreader message for callout speech bubble in the attention component"
         });
       case this.popover:
-        return z._({
+        return V._({
           id: "attention.aria.popover",
           message: "popover speech bubble",
           comment: "Default screenreader message for popover speech bubble in the attention component"
         });
       case this.highlight:
-        return z._({
+        return V._({
           id: "attention.aria.highlight",
           message: "highlighted speech bubble",
           comment: "Default screenreader message for highlighted speech bubble in the attention component"
@@ -1848,7 +1849,7 @@ ${JSON.stringify(
   }
   setAriaLabels() {
     if (this._targetEl && !this._targetEl.getAttribute("aria-details")) {
-      const e = this._messageEl.id || (this._messageEl.id = Nr());
+      const e = this._messageEl.id || (this._messageEl.id = Ir());
       this._targetEl.setAttribute("aria-details", e);
     }
   }
@@ -1860,10 +1861,17 @@ ${JSON.stringify(
       highlight: this.highlight
     }, r = Object.keys(e).find((i) => !!e[i]) || "";
     return {
-      wrapper: Te[r],
-      arrow: Te[`arrow${r.charAt(0).toUpperCase() + r.slice(1)}`]
+      wrapper: we[r],
+      arrow: we[`arrow${r.charAt(0).toUpperCase() + r.slice(1)}`]
     };
   }
+  get _ariaClose() {
+    return V._({
+      id: "attention.aria.close",
+      message: "Close",
+      comment: "Aria label for the close button in attention"
+    });
+  }
   firstUpdated() {
     this.setAriaLabels(), this.callout && (this._attentionEl.style.position = "relative");
   }
@@ -1877,15 +1885,15 @@ ${JSON.stringify(
     return this.renderRoot.querySelector("slot[name='message']").assignedNodes()[0];
   }
   get _wrapperClasses() {
-    return dt({
-      [Te.base]: !0,
+    return ht({
+      [we.base]: !0,
       [this._activeVariantClasses.wrapper]: !0
     });
   }
   get _arrowClasses() {
-    return dt({
-      [Te.arrowBase]: !0,
-      [Te[`arrowDirection${this._arrowDirection.charAt(0).toUpperCase() + this._arrowDirection.slice(1)}`]]: !0,
+    return ht({
+      [we.arrowBase]: !0,
+      [we[`arrowDirection${this._arrowDirection.charAt(0).toUpperCase() + this._arrowDirection.slice(1)}`]]: !0,
       [this._activeVariantClasses.arrow]: !0
     });
   }
@@ -1894,11 +1902,33 @@ ${JSON.stringify(
           id="arrow"
           role="img"
           class="${this._arrowClasses}"
-          style="transform:rotate(${ri[this._arrowDirection]}deg);
+          style="transform:rotate(${ii[this._arrowDirection]}deg);
           margin-${// border alignment is off by a fraction of a pixel, this fixes it
     this._arrowDirection.charAt(0).toLowerCase() + this._arrowDirection.slice(1)}:-0.5px;"
         />`;
   }
+  close() {
+    const e = new CustomEvent("close", {
+      bubbles: !0,
+      composed: !0
+    });
+    this.updateComplete.then(() => this.dispatchEvent(e));
+  }
+  keypressed(e) {
+    this.canClose && e.key === "Escape" && (e.preventDefault(), this.close());
+  }
+  get _closeBtnHtml() {
+    return m`
+      <button 
+        aria-label="${this._ariaClose}"
+        @click="${this.close}"
+        @keydown=${this.keypressed}
+        class="${we.closeBtn}"
+      >
+        <w-icon-close-16 />
+      </button>
+    `;
+  }
   render() {
     return m`
       <div class=${I(this.className ? this.className : void 0)}>
@@ -1911,17 +1941,15 @@ ${JSON.stringify(
                 aria-label="${this.defaultAriaLabel()}"
                 class="${this._wrapperClasses}"
               >
-                <div>
-                  ${this._arrowHtml}
-                  <slot name="message"></slot>
-                </div>
+                ${this._arrowHtml}
+                <slot name="message"></slot>
+                ${this.canClose ? this._closeBtnHtml : dt}
               </div>
             ` : m`
               <div id="attention" class="${this._wrapperClasses}">
-                <div>
-                  <slot name="message"></slot>
-                  ${this._arrowHtml}
-                </div>
+                <slot name="message"></slot>
+                ${this._arrowHtml}
+                ${this.canClose ? this._closeBtnHtml : dt}
               </div>
               <slot name="target"></slot>
             `}
@@ -1929,7 +1957,7 @@ ${JSON.stringify(
     `;
   }
 }
-T($t, "properties", {
+T(xt, "properties", {
   // Whether Attention element should be visible.
   show: { type: Boolean, reflect: !0 },
   // Placement according to the target element
@@ -1943,10 +1971,12 @@ T($t, "properties", {
   popover: { type: Boolean, reflect: !0 },
   // Whether Attention element is rendered as a highlight
   highlight: { type: Boolean, reflect: !0 },
+  // Render Attention element with a close button
+  canClose: { type: Boolean, reflect: !0 },
   // Render Attention element without an arrow
   noArrow: { type: Boolean, reflect: !0 }
-}), T($t, "styles", [
-  q.styles,
+}), T(xt, "styles", [
+  B.styles,
   se`
       #attention {
         position: absolute;
@@ -1965,13 +1995,13 @@ T($t, "properties", {
       }
     `
 ]);
-customElements.get("w-attention") || customElements.define("w-attention", $t);
-class xt extends q {
+customElements.get("w-attention") || customElements.define("w-attention", xt);
+class wt extends B {
   constructor() {
     super(), this.variant = "neutral";
   }
   get _class() {
-    return dt({
+    return ht({
       [be.base]: !0,
       [be[this.variant]]: !0,
       [be.positionBase]: !!this.position,
@@ -1989,16 +2019,16 @@ class xt extends q {
     `;
   }
 }
-T(xt, "properties", {
+T(wt, "properties", {
   variant: {
     type: "neutral" | "info" | "positive" | "warning" | "negative" | "disabled" | "notification" | "price"
   },
   position: {
     type: "top-left" | "top-right" | "bottom-right" | "bottom-left"
   }
-}), T(xt, "styles", [q.styles]);
-customElements.get("w-badge") || customElements.define("w-badge", xt);
-class wt extends q {
+}), T(wt, "styles", [B.styles]);
+customElements.get("w-badge") || customElements.define("w-badge", wt);
+class _t extends B {
   get _class() {
     return G({
       [oe.box]: !0,
@@ -2008,25 +2038,29 @@ class wt extends q {
       [oe.bordered]: this.bordered
     });
   }
+  get _optOutRoleWithDefault() {
+    return this.role === "" ? dt : this.role ?? "region";
+  }
   render() {
     return m`
-      <div class="${this._class}">
+      <div role="${this._optOutRoleWithDefault}" class="${this._class}">
         <slot></slot>
       </div>
     `;
   }
 }
-T(wt, "properties", {
+T(_t, "properties", {
   bleed: { type: Boolean },
   bordered: { type: Boolean },
   info: { type: Boolean },
-  neutral: { type: Boolean }
+  neutral: { type: Boolean },
+  role: { type: String }
 }), // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.
 // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
-T(wt, "styles", [
-  q.styles,
+T(_t, "styles", [
+  B.styles,
   se`
       :host {
         display: block;
@@ -2036,16 +2070,16 @@ T(wt, "styles", [
       }
     `
 ]);
-customElements.get("w-box") || customElements.define("w-box", wt);
-function Oi(t, e) {
+customElements.get("w-box") || customElements.define("w-box", _t);
+function Bi(t, e) {
   return t.flatMap((r) => [r, e]).slice(0, -1);
 }
-const qi = JSON.parse('{"breadcrumbs.ariaLabel":"You are here"}'), Bi = JSON.parse('{"breadcrumbs.ariaLabel":"Her er du"}'), Pi = JSON.parse('{"breadcrumbs.ariaLabel":"Olet tässä"}'), Ai = m`<span class=${_e.separator}
+const qi = JSON.parse('{"breadcrumbs.ariaLabel":"You are here"}'), Ai = JSON.parse('{"breadcrumbs.ariaLabel":"Her er du"}'), Pi = JSON.parse('{"breadcrumbs.ariaLabel":"Olet tässä"}'), Ri = m`<span class=${ke.separator}
   >/</span
 >`;
-class _t extends Re(q) {
+class kt extends Re(B) {
   constructor() {
-    super(), lt(qi, Bi, Pi), this.ariaLabel = z._({
+    super(), lt(qi, Ai, Pi), this.ariaLabel = V._({
       id: "breadcrumbs.ariaLabel",
       message: "You are here",
       comment: "Default screenreader message for the breadcrumb component"
@@ -2057,43 +2091,43 @@ class _t extends Re(q) {
       if (typeof i == "string") {
         const n = o === children.length - 1;
         return m`<span
-          class=${_e.text}
+          class=${ke.text}
           aria-current=${n ? "page" : void 0}
           >${i}</span
         >`;
       }
       return i.classList.add(
-        i.tagName === "A" ? _e.link : _e.text
+        i.tagName === "A" ? ke.link : ke.text
       ), i;
     });
-    this._children = Oi(r, Ai);
+    this._children = Bi(r, Ri);
   }
   render() {
     return m`
       <nav aria-labelledby="breadCrumbLabel">
-        <h2 id="breadCrumbLabel" class=${_e.a11y}>
+        <h2 id="breadCrumbLabel" class=${ke.a11y}>
           ${this.ariaLabel}
         </h2>
-        <div class=${_e.wrapper}>${this._children}</div>
+        <div class=${ke.wrapper}>${this._children}</div>
       </nav>
     `;
   }
 }
-T(_t, "styles", [q.styles]), T(_t, "properties", {
+T(kt, "styles", [B.styles]), T(kt, "properties", {
   ariaLabel: { type: String }
 });
-customElements.get("w-breadcrumbs") || customElements.define("w-breadcrumbs", _t);
-const Ae = typeof window < "u";
-class kt extends q {
+customElements.get("w-breadcrumbs") || customElements.define("w-breadcrumbs", kt);
+const Pe = typeof window < "u";
+class St extends B {
   constructor() {
-    super(), this._messages = [], this.interval = 3e4, this._hiddenMessageIds = [], this.url = Ae ? window.location.href : "";
+    super(), this._messages = [], this.interval = 3e4, this._hiddenMessageIds = [], this.url = Pe ? window.location.href : "";
   }
   async connectedCallback() {
     if (super.connectedCallback(), !this.api) {
       console.error('Broadcast "api" attribute invalid or undefined');
       return;
     }
-    Ae && (await this._fetchMessage(), setInterval(() => this._fetchMessage(), this.interval));
+    Pe && (await this._fetchMessage(), setInterval(() => this._fetchMessage(), this.interval));
   }
   async _fetchMessage() {
     const e = `${this.api}?path=${this.url}`;
@@ -2111,7 +2145,7 @@ class kt extends q {
     const e = this._messages.filter((r) => !this._hiddenMessageIds.includes(r.id));
     return m`
       <aside class=${`${e.length === 0 ? "hidden" : "mb-16"}`}>
-        ${Zt(
+        ${er(
       e,
       ({ id: r }) => `broadcast-${r}`,
       ({ id: r, message: i }) => m`<w-toast
@@ -2127,7 +2161,7 @@ class kt extends q {
     `;
   }
 }
-T(kt, "properties", {
+T(St, "properties", {
   _messages: {
     state: !0,
     hasChanged(e, r) {
@@ -2144,9 +2178,9 @@ T(kt, "properties", {
   interval: { type: Number, attribute: !0, reflect: !0 },
   url: { type: String, attribute: !0, reflect: !0 },
   api: { type: String, attribute: !0, reflect: !0 }
-}), T(kt, "styles", [q.styles]);
-customElements.get("w-broadcast") || customElements.define("w-broadcast", kt);
-const Ri = JSON.parse('{"button.aria.loading":"Loading..."}'), Mi = JSON.parse('{"button.aria.loading":"Laster..."}'), Ni = JSON.parse('{"button.aria.loading":"Ladataan..."}'), Gt = [
+}), T(St, "styles", [B.styles]);
+customElements.get("w-broadcast") || customElements.define("w-broadcast", St);
+const Mi = JSON.parse('{"button.aria.loading":"Loading..."}'), Ni = JSON.parse('{"button.aria.loading":"Laster..."}'), Ii = JSON.parse('{"button.aria.loading":"Ladataan..."}'), Kt = [
   "primary",
   "secondary",
   "negative",
@@ -2154,19 +2188,19 @@ const Ri = JSON.parse('{"button.aria.loading":"Loading..."}'), Mi = JSON.parse('
   "pill",
   "link"
 ];
-class je extends Re(q) {
+class je extends Re(B) {
   constructor() {
-    super(), lt(Ri, Mi, Ni), this.variant = "secondary", this.ariaValueTextLoading = z._({
+    super(), lt(Mi, Ni, Ii), this.variant = "secondary", this.ariaValueTextLoading = V._({
       id: "button.aria.loading",
       message: "Loading...",
       comment: "Screenreader message for buttons that are loading"
     });
   }
   connectedCallback() {
-    if (super.connectedCallback(), !Gt.includes(this.variant))
+    if (super.connectedCallback(), !Kt.includes(this.variant))
       throw new Error(
         `Invalid "variant" attribute. Set its value to one of the following:
-${Gt.join(
+${Kt.join(
           ", "
         )}.`
       );
@@ -2246,7 +2280,7 @@ ${Gt.join(
   }
 }
 T(je, "shadowRootOptions", {
-  ...q.shadowRootOptions,
+  ...B.shadowRootOptions,
   delegatesFocus: !0
 }), T(je, "properties", {
   type: { type: "button" | "submit" | "reset", reflect: !0 },
@@ -2260,13 +2294,13 @@ T(je, "shadowRootOptions", {
   rel: { type: String, reflect: !0 },
   fullWidth: { type: Boolean, reflect: !0 },
   buttonClass: { type: String, reflect: !0 }
-}), T(je, "styles", [q.styles]);
+}), T(je, "styles", [B.styles]);
 customElements.get("w-button") || customElements.define("w-button", je);
-const Kt = {
+const Xt = {
   ENTER: "Enter",
   SPACE: " "
 };
-class St extends q {
+class Et extends B {
   constructor() {
     super(), this.selected = !1, this.flat = !1, this.clickable = !1;
   }
@@ -2302,7 +2336,7 @@ class St extends q {
     ></span>`;
   }
   keypressed(e) {
-    !this.clickable || e.altKey || e.ctrlKey || (e.key === Kt.ENTER || e.key === Kt.SPACE) && (e.preventDefault(), this.click());
+    !this.clickable || e.altKey || e.ctrlKey || (e.key === Xt.ENTER || e.key === Xt.SPACE) && (e.preventDefault(), this.click());
   }
   render() {
     return m`
@@ -2319,8 +2353,8 @@ class St extends q {
     `;
   }
 }
-T(St, "styles", [
-  q.styles,
+T(Et, "styles", [
+  B.styles,
   se`
       a::after {
         content: "";
@@ -2334,13 +2368,13 @@ T(St, "styles", [
         display: block;
       }
     `
-]), T(St, "properties", {
+]), T(Et, "properties", {
   selected: { type: Boolean, reflect: !0 },
   flat: { type: Boolean },
   clickable: { type: Boolean }
 });
-customElements.get("w-card") || customElements.define("w-card", St);
-class Et extends Re(q) {
+customElements.get("w-card") || customElements.define("w-card", Et);
+class Ct extends Re(B) {
   constructor() {
     super(), this.expanded = !1, this.animated = !1, this.info = !1, this.box = !1, this.bleed = !1, this.noChevron = !1, this._hasTitle = !0;
   }
@@ -2409,7 +2443,7 @@ class Et extends Re(q) {
     </div>`;
   }
 }
-T(Et, "properties", {
+T(Ct, "properties", {
   expanded: { type: Boolean, reflect: !0 },
   title: { type: String },
   info: { type: Boolean },
@@ -2425,8 +2459,8 @@ T(Et, "properties", {
 // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
-T(Et, "styles", [
-  q.styles,
+T(Ct, "styles", [
+  B.styles,
   se`
       :host {
         display: block;
@@ -2436,30 +2470,30 @@ T(Et, "styles", [
       }
     `
 ]);
-customElements.get("w-expandable") || customElements.define("w-expandable", Et);
-const Ii = JSON.parse('{"select.label.optional":"(optional)"}'), Qi = JSON.parse('{"select.label.optional":"(valgfritt)"}'), Ui = JSON.parse('{"select.label.optional":"(valinnainen)"}');
-var tt, xr, rt, wr, it, _r, ot, kr, ke, We, Se, Ve;
-class Ct extends Re(q) {
+customElements.get("w-expandable") || customElements.define("w-expandable", Ct);
+const Qi = JSON.parse('{"select.label.optional":"(optional)"}'), Ui = JSON.parse('{"select.label.optional":"(valgfritt)"}'), Fi = JSON.parse('{"select.label.optional":"(valinnainen)"}');
+var tt, wr, rt, _r, it, kr, ot, Sr, Se, We, Ee, Ve;
+class Lt extends Re(B) {
   constructor() {
     super();
     ge(this, tt);
     ge(this, rt);
     ge(this, it);
     ge(this, ot);
-    ge(this, ke);
     ge(this, Se);
-    lt(Ii, Qi, Ui), this._options = this.innerHTML;
+    ge(this, Ee);
+    lt(Qi, Ui, Fi), this._options = this.innerHTML;
   }
   render() {
     return m`<div class="${xe.wrapper}">
       ${He(
       this.label,
-      () => m`<label class="${X(this, rt, wr)}" for="${X(this, ke, We)}">
+      () => m`<label class="${X(this, rt, _r)}" for="${X(this, Se, We)}">
             ${this.label}
             ${He(
         this.optional,
-        () => m`<span class="${qe.optional}"
-                  >${z._({
+        () => m`<span class="${Be.optional}"
+                  >${V._({
           id: "select.label.optional",
           message: "(optional)",
           comment: "Shown behind label when marked as optional"
@@ -2470,53 +2504,53 @@ class Ct extends Re(q) {
     )}
       <div class="${xe.selectWrapper}">
         <select
-          class="${X(this, tt, xr)}"
-          id="${X(this, ke, We)}"
+          class="${X(this, tt, wr)}"
+          id="${X(this, Se, We)}"
           ?autofocus=${this.autoFocus}
-          aria-describedby="${I(X(this, Se, Ve))}"
+          aria-describedby="${I(X(this, Ee, Ve))}"
           aria-invalid="${I(this.invalid)}"
-          aria-errormessage="${I(this.invalid && X(this, Se, Ve))}"
+          aria-errormessage="${I(this.invalid && X(this, Ee, Ve))}"
         >
-          ${er(this._options)}
+          ${tr(this._options)}
         </select>
-        <div class="${X(this, ot, kr)}">
+        <div class="${X(this, ot, Sr)}">
           <w-icon-chevron-down-16></w-icon-chevron-down-16>
         </div>
       </div>
       ${He(
       this.always || this.invalid,
-      () => m`<div id="${X(this, Se, Ve)}" class="${X(this, it, _r)}">
+      () => m`<div id="${X(this, Ee, Ve)}" class="${X(this, it, kr)}">
             ${this.hint}
           </div>`
     )}
     </div>`;
   }
 }
-tt = new WeakSet(), xr = function() {
+tt = new WeakSet(), wr = function() {
   return ue({
     [xe.default]: !0,
     [xe.invalid]: this.invalid
   });
-}, rt = new WeakSet(), wr = function() {
+}, rt = new WeakSet(), _r = function() {
   return ue({
-    [qe.label]: !0,
-    [qe.labelInvalid]: this.invalid
+    [Be.label]: !0,
+    [Be.labelInvalid]: this.invalid
   });
-}, it = new WeakSet(), _r = function() {
+}, it = new WeakSet(), kr = function() {
   return ue({
     [ze.helpText]: !0,
     [ze.helpTextInvalid]: this.invalid
   });
-}, ot = new WeakSet(), kr = function() {
+}, ot = new WeakSet(), Sr = function() {
   return ue({
     [xe.chevron]: !0,
     [xe.chevronDisabled]: this.disabled
   });
-}, ke = new WeakSet(), We = function() {
+}, Se = new WeakSet(), We = function() {
   return "select_id";
-}, Se = new WeakSet(), Ve = function() {
-  return this.hint ? `${X(this, ke, We)}__hint` : void 0;
-}, T(Ct, "properties", {
+}, Ee = new WeakSet(), Ve = function() {
+  return this.hint ? `${X(this, Se, We)}__hint` : void 0;
+}, T(Lt, "properties", {
   // Whether the element should receive focus on render
   autoFocus: { type: Boolean, reflect: !0 },
   // Renders the field in an invalid state. Often paired with `hint` to provide feedback about the error
@@ -2530,9 +2564,9 @@ tt = new WeakSet(), xr = function() {
   // Whether to show optional text
   optional: { type: Boolean, reflect: !0 },
   _options: { state: !0 }
-}), T(Ct, "styles", [q.styles]);
-customElements.get("w-select") || customElements.define("w-select", Ct);
-class Lt extends q {
+}), T(Lt, "styles", [B.styles]);
+customElements.get("w-select") || customElements.define("w-select", Lt);
+class Tt extends B {
   constructor() {
     super(), this.type = "text";
   }
@@ -2554,8 +2588,8 @@ class Lt extends q {
   }
   get _labelStyles() {
     return G({
-      [qe.label]: !0,
-      [qe.labelInvalid]: this.invalid
+      [Be.label]: !0,
+      [Be.labelInvalid]: this.invalid
     });
   }
   get _label() {
@@ -2623,7 +2657,7 @@ class Lt extends q {
     `;
   }
 }
-T(Lt, "properties", {
+T(Tt, "properties", {
   disabled: { type: Boolean },
   invalid: { type: Boolean },
   id: { type: String },
@@ -2647,8 +2681,8 @@ T(Lt, "properties", {
 // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
-T(Lt, "styles", [
-  q.styles,
+T(Tt, "styles", [
+  B.styles,
   se`
       :host {
         display: block;
@@ -2658,9 +2692,9 @@ T(Lt, "styles", [
       }
     `
 ]);
-customElements.get("w-textfield") || customElements.define("w-textfield", Lt);
-function Yi(t, e) {
-  if (!Ae)
+customElements.get("w-textfield") || customElements.define("w-textfield", Tt);
+function Zi(t, e) {
+  if (!Pe)
     return;
   const r = customElements.get("w-toast-container").init(), i = {
     id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
@@ -2671,68 +2705,68 @@ function Yi(t, e) {
   };
   return r.set(i), i;
 }
-function Zi(t) {
-  return Ae ? customElements.get("w-toast-container").init().del(t) : void 0;
+function eo(t) {
+  return Pe ? customElements.get("w-toast-container").init().del(t) : void 0;
 }
-function eo(t, e) {
-  if (!Ae)
+function to(t, e) {
+  if (!Pe)
     return;
   const r = customElements.get("w-toast-container").init();
   return r.set({ ...r.get(t), ...e }), r.get(t);
 }
-const Rt = typeof window < "u";
-let Sr = !0;
-if (Rt) {
-  const t = window.matchMedia("(prefers-reduced-motion: reduce)"), e = ({ matches: r }) => Sr = !r;
+const Mt = typeof window < "u";
+let Er = !0;
+if (Mt) {
+  const t = window.matchMedia("(prefers-reduced-motion: reduce)"), e = ({ matches: r }) => Er = !r;
   t.addEventListener && t.addEventListener("change", e), e(t);
 }
-const Er = (t) => {
+const Cr = (t) => {
   t.style.transition = null, t.style.backfaceVisibility = null, t.style.overflow = null;
-}, Cr = (t) => {
-  const e = Sr ? "var(--f-expansion-duration, 0.3s)" : "0.01s";
+}, Lr = (t) => {
+  const e = Er ? "var(--f-expansion-duration, 0.3s)" : "0.01s";
   t.style.transition = `height ${e}`, t.style.backfaceVisibility = "hidden", t.style.overflow = "hidden";
-}, Fi = (t, e) => () => {
+}, Hi = (t, e) => () => {
   t.style.height = "auto", t.style.overflow = null, e && e();
-}, Hi = (t) => () => {
+}, ji = (t) => () => {
   t && t();
-}, Lr = (t, e) => {
+}, Tr = (t, e) => {
   const r = (() => {
     if (!e)
       return new Promise((n) => {
         e = n;
       });
-  })(), i = Fi(t, e);
-  Er(t), t.style.height = "auto";
+  })(), i = Hi(t, e);
+  Cr(t), t.style.height = "auto";
   let o = t.scrollHeight;
-  if (Rt && requestAnimationFrame(() => {
-    t.addEventListener("transitionend", i, { once: !0 }), t.style.height = "0px", t.style.transitionTimingFunction = "ease-out", Cr(t), requestAnimationFrame(() => t.style.height = o + "px");
+  if (Mt && requestAnimationFrame(() => {
+    t.addEventListener("transitionend", i, { once: !0 }), t.style.height = "0px", t.style.transitionTimingFunction = "ease-out", Lr(t), requestAnimationFrame(() => t.style.height = o + "px");
   }), r)
     return r;
-}, Tr = (t, e) => {
+}, Dr = (t, e) => {
   const r = (() => {
     if (!e)
       return new Promise((n) => {
         e = n;
       });
-  })(), i = Hi(e);
-  Er(t);
+  })(), i = ji(e);
+  Cr(t);
   let o = t.scrollHeight;
-  if (Rt && requestAnimationFrame(() => {
-    t.addEventListener("transitionend", i, { once: !0 }), t.style.height = o + "px", t.style.transitionTimingFunction = "ease-in", Cr(t), requestAnimationFrame(() => t.style.height = "0px");
+  if (Mt && requestAnimationFrame(() => {
+    t.addEventListener("transitionend", i, { once: !0 }), t.style.height = o + "px", t.style.transitionTimingFunction = "ease-in", Lr(t), requestAnimationFrame(() => t.style.height = "0px");
   }), r)
     return r;
-}, Xt = (t) => {
+}, Yt = (t) => {
   const e = {};
   for (const [r, i] of Object.entries(t))
     for (const o of r.split(" "))
       e[o] = i;
-  return Yt(e);
+  return Zt(e);
 }, le = {
   success: "success",
   error: "error",
   warning: "warning"
 };
-class Tt extends q {
+class Dt extends B {
   constructor() {
     super(), this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5), this.type = "success", this.text = "", this.canclose = !1;
   }
@@ -2743,10 +2777,10 @@ class Tt extends q {
     super.disconnectedCallback();
   }
   updated() {
-    !this._expanded && this._wrapper && Lr(this._wrapper, () => this._expanded = !0);
+    !this._expanded && this._wrapper && Tr(this._wrapper, () => this._expanded = !0);
   }
   get _primaryClasses() {
-    return Xt({
+    return Yt({
       [Y.toast]: !0,
       [Y.positive]: this.type === le.success,
       [Y.warning]: this.type === le.warning,
@@ -2754,7 +2788,7 @@ class Tt extends q {
     });
   }
   get _iconClasses() {
-    return Xt({
+    return Yt({
       [Y.icon]: !0,
       [Y.iconPositive]: this.type == le.success,
       [Y.iconWarning]: this.type === le.warning,
@@ -2782,7 +2816,7 @@ class Tt extends q {
   }
   async collapse() {
     return new Promise((e) => {
-      this._expanded && this._wrapper ? Tr(this._wrapper, e) : e();
+      this._expanded && this._wrapper ? Dr(this._wrapper, e) : e();
     });
   }
   close() {
@@ -2812,21 +2846,21 @@ class Tt extends q {
     </section>` : m``;
   }
 }
-T(Tt, "styles", [
-  q.styles,
+T(Dt, "styles", [
+  B.styles,
   se`
       :host {
         display: block;
       }
     `
-]), T(Tt, "properties", {
+]), T(Dt, "properties", {
   id: { type: String, attribute: !0, reflect: !0 },
   type: { type: String, attribute: !0, reflect: !0 },
   text: { type: String, attribute: !0, reflect: !0 },
   canclose: { type: Boolean, attribute: !0, reflect: !0 }
 });
-customElements.get("w-toast") || customElements.define("w-toast", Tt);
-class Dt extends q {
+customElements.get("w-toast") || customElements.define("w-toast", Dt);
+class Ot extends B {
   constructor() {
     super(), this._toasts = /* @__PURE__ */ new Map();
   }
@@ -2906,7 +2940,7 @@ class Dt extends q {
     return m`
       <aside class="${ct.container}">
         <div class="${ct.toaster}" id="w-toast-container-list">
-          ${Zt(
+          ${er(
       this._toastsArray,
       (e) => e.id,
       (e) => m` <w-toast
@@ -2924,18 +2958,18 @@ class Dt extends q {
     `;
   }
 }
-T(Dt, "styles", [
-  q.styles,
+T(Ot, "styles", [
+  B.styles,
   se`
       :host {
         display: block;
       }
     `
-]), T(Dt, "properties", {
+]), T(Ot, "properties", {
   _toasts: { state: !0 }
 });
-customElements.get("w-toast-container") || customElements.define("w-toast-container", Dt);
-class Ot extends q {
+customElements.get("w-toast-container") || customElements.define("w-toast-container", Ot);
+class Bt extends B {
   constructor() {
     super(), this.show = !1, this._mounted = !1, this._removeElement = !1;
   }
@@ -2948,7 +2982,7 @@ class Ot extends q {
         this._mounted = !0;
         return;
       }
-      this.show && Lr(this._wrapper), !this.show && !this._removeElement && Tr(this._wrapper, () => this._removeElement = !0);
+      this.show && Tr(this._wrapper), !this.show && !this._removeElement && Dr(this._wrapper, () => this._removeElement = !0);
     }
   }
   get _wrapper() {
@@ -2960,22 +2994,22 @@ class Ot extends q {
     </div>`;
   }
 }
-T(Ot, "properties", {
+T(Bt, "properties", {
   show: {
     type: Boolean,
     reflect: !0
   },
   _removeElement: { type: Boolean, state: !0 }
-}), T(Ot, "styles", [
-  q.styles,
+}), T(Bt, "styles", [
+  B.styles,
   se`
       :host {
         display: block;
       }
     `
 ]);
-customElements.get("w-expand-transition") || customElements.define("w-expand-transition", Ot);
-class qt extends q {
+customElements.get("w-expand-transition") || customElements.define("w-expand-transition", Bt);
+class qt extends B {
   get _markup() {
     return `<h${this.level}
     style="margin: 0; font-weight: unset; font-size: unset; line-height: unset;"
@@ -2985,31 +3019,31 @@ class qt extends q {
 `;
   }
   render() {
-    return this.level ? er(this._markup) : m`<slot></slot>`;
+    return this.level ? tr(this._markup) : m`<slot></slot>`;
   }
 }
 T(qt, "properties", {
   level: { type: Number }
-}), T(qt, "styles", [q.styles]);
+}), T(qt, "styles", [B.styles]);
 customElements.get("w-unstyled-heading") || customElements.define("w-unstyled-heading", qt);
 export {
-  Ot as ExpandTransition,
+  Bt as ExpandTransition,
   qt as UnstyledHeading,
-  ht as WarpAffix,
-  pt as WarpAlert,
-  $t as WarpAttention,
-  xt as WarpBadge,
-  wt as WarpBox,
-  _t as WarpBreadcrumbs,
-  kt as WarpBroadcast,
+  pt as WarpAffix,
+  ft as WarpAlert,
+  xt as WarpAttention,
+  wt as WarpBadge,
+  _t as WarpBox,
+  kt as WarpBreadcrumbs,
+  St as WarpBroadcast,
   je as WarpButton,
-  St as WarpCard,
-  Et as WarpExpandable,
-  Ct as WarpSelect,
-  Lt as WarpTextField,
-  Tt as WarpToast,
-  Dt as WarpToastContainer,
-  Zi as removeToast,
-  Yi as toast,
-  eo as updateToast
+  Et as WarpCard,
+  Ct as WarpExpandable,
+  Lt as WarpSelect,
+  Tt as WarpTextField,
+  Dt as WarpToast,
+  Ot as WarpToastContainer,
+  eo as removeToast,
+  Zi as toast,
+  to as updateToast
 };