@warp-ds/elements 1.4.1-next.1 → 1.5.0-next.1

package/dist/index.js

@@ -9,18 +9,18 @@ var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
+var __spreadValues = (a2, b2) => {
+  for (var prop in b2 || (b2 = {}))
+    if (__hasOwnProp.call(b2, prop))
+      __defNormalProp(a2, prop, b2[prop]);
   if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    for (var prop of __getOwnPropSymbols(b2)) {
+      if (__propIsEnum.call(b2, prop))
+        __defNormalProp(a2, prop, b2[prop]);
     }
-  return a;
+  return a2;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -295,8 +295,8 @@ var require_moo = __commonJS({
       function objectToRules(object) {
         var keys2 = Object.getOwnPropertyNames(object);
         var result = [];
-        for (var i = 0; i < keys2.length; i++) {
-          var key = keys2[i];
+        for (var i2 = 0; i2 < keys2.length; i2++) {
+          var key = keys2[i2];
           var thing = object[key];
           var rules = [].concat(thing);
           if (key === "include") {
@@ -323,8 +323,8 @@ var require_moo = __commonJS({
       }
       function arrayToRules(array) {
         var result = [];
-        for (var i = 0; i < array.length; i++) {
-          var obj = array[i];
+        for (var i2 = 0; i2 < array.length; i2++) {
+          var obj = array[i2];
           if (obj.include) {
             var include = [].concat(obj.include);
             for (var j = 0; j < include.length; j++) {
@@ -368,8 +368,8 @@ var require_moo = __commonJS({
         }
         var match = options.match;
         options.match = Array.isArray(match) ? match : match ? [match] : [];
-        options.match.sort(function(a, b) {
-          return isRegExp(a) && isRegExp(b) ? 0 : isRegExp(b) ? -1 : isRegExp(a) ? 1 : b.length - a.length;
+        options.match.sort(function(a2, b2) {
+          return isRegExp(a2) && isRegExp(b2) ? 0 : isRegExp(b2) ? -1 : isRegExp(a2) ? 1 : b2.length - a2.length;
         });
         return options;
       }
@@ -384,13 +384,13 @@ var require_moo = __commonJS({
         var unicodeFlag = null;
         var groups = [];
         var parts = [];
-        for (var i = 0; i < rules.length; i++) {
-          if (rules[i].fallback) {
+        for (var i2 = 0; i2 < rules.length; i2++) {
+          if (rules[i2].fallback) {
             fastAllowed = false;
           }
         }
-        for (var i = 0; i < rules.length; i++) {
-          var options = rules[i];
+        for (var i2 = 0; i2 < rules.length; i2++) {
+          var options = rules[i2];
           if (options.include) {
             throw new Error("Inheritance is not allowed in stateless lexers");
           }
@@ -461,13 +461,13 @@ var require_moo = __commonJS({
         var result = compileRules(toRules(rules));
         return new Lexer({ start: result }, "start");
       }
-      function checkStateGroup(g, name, map) {
-        var state = g && (g.push || g.next);
+      function checkStateGroup(g2, name, map) {
+        var state = g2 && (g2.push || g2.next);
         if (state && !map[state]) {
-          throw new Error("Missing state '" + state + "' (in token '" + g.defaultType + "' of state '" + name + "')");
+          throw new Error("Missing state '" + state + "' (in token '" + g2.defaultType + "' of state '" + name + "')");
         }
-        if (g && g.pop && +g.pop !== 1) {
-          throw new Error("pop must be 1 (in token '" + g.defaultType + "' of state '" + name + "')");
+        if (g2 && g2.pop && +g2.pop !== 1) {
+          throw new Error("pop must be 1 (in token '" + g2.defaultType + "' of state '" + name + "')");
         }
       }
       function compileStates(states, start) {
@@ -477,12 +477,12 @@ var require_moo = __commonJS({
         if (!start)
           start = keys2[0];
         var ruleMap = /* @__PURE__ */ Object.create(null);
-        for (var i = 0; i < keys2.length; i++) {
-          var key = keys2[i];
+        for (var i2 = 0; i2 < keys2.length; i2++) {
+          var key = keys2[i2];
           ruleMap[key] = toRules(states[key]).concat(all);
         }
-        for (var i = 0; i < keys2.length; i++) {
-          var key = keys2[i];
+        for (var i2 = 0; i2 < keys2.length; i2++) {
+          var key = keys2[i2];
           var rules = ruleMap[key];
           var included = /* @__PURE__ */ Object.create(null);
           for (var j = 0; j < rules.length; j++) {
@@ -508,12 +508,12 @@ var require_moo = __commonJS({
           }
         }
         var map = /* @__PURE__ */ Object.create(null);
-        for (var i = 0; i < keys2.length; i++) {
-          var key = keys2[i];
+        for (var i2 = 0; i2 < keys2.length; i2++) {
+          var key = keys2[i2];
           map[key] = compileRules(ruleMap[key], true);
         }
-        for (var i = 0; i < keys2.length; i++) {
-          var name = keys2[i];
+        for (var i2 = 0; i2 < keys2.length; i2++) {
+          var name = keys2[i2];
           var state = map[name];
           var groups = state.groups;
           for (var j = 0; j < groups.length; j++) {
@@ -530,8 +530,8 @@ var require_moo = __commonJS({
         var isMap = typeof Map !== "undefined";
         var reverseMap = isMap ? /* @__PURE__ */ new Map() : /* @__PURE__ */ Object.create(null);
         var types = Object.getOwnPropertyNames(map);
-        for (var i = 0; i < types.length; i++) {
-          var tokenType = types[i];
+        for (var i2 = 0; i2 < types.length; i2++) {
+          var tokenType = types[i2];
           var item = map[tokenType];
           var keywordList = Array.isArray(item) ? item : [item];
           keywordList.forEach(function(keyword) {
@@ -607,9 +607,9 @@ var require_moo = __commonJS({
       };
       Lexer.prototype._getGroup = function(match) {
         var groupCount = this.groups.length;
-        for (var i = 0; i < groupCount; i++) {
-          if (match[i + 1] !== void 0) {
-            return this.groups[i];
+        for (var i2 = 0; i2 < groupCount; i2++) {
+          if (match[i2 + 1] !== void 0) {
+            return this.groups[i2];
           }
         }
         throw new Error("Cannot find token type for matched text");
@@ -730,9 +730,9 @@ var require_moo = __commonJS({
         var errorLines = [];
         errorLines.push(message + " at line " + token.line + " col " + token.col + ":");
         errorLines.push("");
-        for (var i = 0; i < displayedLines.length; i++) {
-          var line = displayedLines[i];
-          var lineNo = firstDisplayedLine + i;
+        for (var i2 = 0; i2 < displayedLines.length; i2++) {
+          var line = displayedLines[i2];
+          var lineNo = firstDisplayedLine + i2;
           errorLines.push(pad(String(lineNo), lastLineDigits) + "  " + line);
           if (lineNo === token.line) {
             errorLines.push(pad("", lastLineDigits + token.col + 1) + "^");
@@ -842,12 +842,12 @@ var require_parser = __commonJS({
     function strictArgStyleParam(lt, param) {
       let value = "";
       let text = "";
-      for (const p of param) {
-        const pText = p.ctx.text;
+      for (const p2 of param) {
+        const pText = p2.ctx.text;
         text += pText;
-        switch (p.type) {
+        switch (p2.type) {
           case "content":
-            value += p.value;
+            value += p2.value;
             break;
           case "argument":
           case "function":
@@ -858,12 +858,12 @@ var require_parser = __commonJS({
             throw new ParseError(lt, `Unsupported part in strict mode function arg style: ${pText}`);
         }
       }
-      const c = {
+      const c2 = {
         type: "content",
         value: value.trim(),
         ctx: Object.assign({}, param[0].ctx, { text })
       };
-      return [c];
+      return [c2];
     }
     var strictArgTypes = [
       "number",
@@ -1043,7 +1043,7 @@ var require_parser = __commonJS({
 // packages/affix/index.js
 import { html as html3 } from "lit";
 
-// node_modules/.pnpm/@warp-ds+css@1.9.6/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.10.1/node_modules/@warp-ds/css/component-classes/index.js
 var badge = {
   base: "py-4 px-8 border-0 rounded-4 text-xs inline-flex",
   neutral: "bg-[--w-color-badge-neutral-background] s-text",
@@ -1279,6 +1279,23 @@ var modal = {
   titleButtonIcon: "h-16 w-16 sm:h-24 sm:w-24",
   titleButtonIconRotated: "transform rotate-90"
 };
+var modalElement = {
+  // several items in here are 'resets' for the <dialog> element
+  dialogEl: "bg-transparent backface-hidden w-unset h-unset max-w-unset max-h-unset p-0 m-auto border-0 inset-0 open:flex open:fixed sm:place-content-center sm:place-items-center items-end [--w-modal-max-height:80%] [--w-modal-width:640px]",
+  dialogInner: "transition-all relative pb-safe-[32] sm:pb-32 shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] ease-in-out backface-hidden will-change-height rounded-8 sm:mx-16 s-bg flex flex-col overflow-hidden lt-sm:rounded-b-0",
+  contentSlot: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
+  header: "relative pb-8",
+  headerTitleBar: "pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!",
+  headerButton: "sm:min-h-[32px] sm:min-w-[32px] min-h-[40px] min-w-[40px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold focusable transition-colors ease-in-out",
+  headerButtonLeft: "-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",
+  headerCloseButton: "-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",
+  headerCloseButtonOnImage: `absolute right-8 top-8 z-10 s-color-inverted bg-[var(--w-black)/70] hover:bg-[var(--w-black)/85] active:bg-[var(--w-black)] s-text-inverted`,
+  headerTitle: "mb-0 t3 self-center",
+  headerTitleWithBackButton: "justify-self-center",
+  headerTitleWithoutBackButton: "col-span-2",
+  headerTitleWithTopArea: "pt-16 px-16 sm:px-32",
+  footer: "flex justify-end shrink-0 px-16 sm:px-32 pt-24"
+};
 var alert = {
   alert: "flex p-16 border border-l-4 rounded-4 s-text",
   willChangeHeight: "will-change-height",
@@ -1452,7 +1469,7 @@ var attention = {
 import WarpElement from "@warp-ds/elements-core";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/search-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 
@@ -1511,7 +1528,7 @@ Message: ${message}`);
 
 // node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
-var isFunction = (f) => typeof f === "function";
+var isFunction = (f2) => typeof f2 === "function";
 var cache = /* @__PURE__ */ new Map();
 var defaultLocale = "en";
 function normalizeLocales(locales) {
@@ -1739,17 +1756,17 @@ var I18n = class extends EventEmitter {
     }
     this.emit("change");
   }
-  _load(locale, messages43) {
+  _load(locale, messages46) {
     const maybeMessages = this._messages[locale];
     if (!maybeMessages) {
-      this._messages[locale] = messages43;
+      this._messages[locale] = messages46;
     } else {
-      Object.assign(maybeMessages, messages43);
+      Object.assign(maybeMessages, messages46);
     }
   }
-  load(localeOrMessages, messages43) {
-    if (typeof localeOrMessages == "string" && typeof messages43 === "object") {
-      this._load(localeOrMessages, messages43);
+  load(localeOrMessages, messages46) {
+    if (typeof localeOrMessages == "string" && typeof messages46 === "object") {
+      this._load(localeOrMessages, messages46);
     } else {
       Object.entries(localeOrMessages).forEach(
         ([locale, messages210]) => this._load(locale, messages210)
@@ -1760,10 +1777,10 @@ var I18n = class extends EventEmitter {
   /**
    * @param options {@link LoadAndActivateOptions}
    */
-  loadAndActivate({ locale, locales, messages: messages43 }) {
+  loadAndActivate({ locale, locales, messages: messages46 }) {
     this._locale = locale;
     this._locales = locales || void 0;
-    this._messages[this._locale] = messages43;
+    this._messages[this._locale] = messages46;
     this.emit("change");
   }
   activate(locale, locales) {
@@ -1818,7 +1835,7 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/search-16.js
 var messages = JSON.parse('{"icon.title.search":"Forst\xF8rrelsesglass"}');
 var messages2 = JSON.parse('{"icon.title.search":"Magnifying glass"}');
 var messages3 = JSON.parse('{"icon.title.search":"Suurennuslasi"}');
@@ -1892,8 +1909,8 @@ var getMessages = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale();
-  const messages43 = getMessages(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n(messages2, messages, messages3);
@@ -1907,7 +1924,7 @@ if (!customElements.get("w-icon-search-16")) {
   customElements.define("w-icon-search-16", IconSearch16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/close-16.js
 import { LitElement as LitElement2 } from "lit";
 import { unsafeStatic as unsafeStatic2, html as html2 } from "lit/static-html.js";
 var messages4 = JSON.parse('{"icon.title.close":"Kryss"}');
@@ -1983,8 +2000,8 @@ var getMessages2 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n2 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale2();
-  const messages43 = getMessages2(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages2(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n2(messages22, messages4, messages32);
@@ -2097,11 +2114,11 @@ import { css, html as html8 } from "lit";
 
 // node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js
 var r = function() {
-  for (var t = [], n = arguments.length; n--; )
-    t[n] = arguments[n];
-  return t.reduce(function(t2, n2) {
-    return t2.concat("string" == typeof n2 ? n2 : Array.isArray(n2) ? r.apply(void 0, n2) : "object" == typeof n2 && n2 ? Object.keys(n2).map(function(r2) {
-      return n2[r2] ? r2 : "";
+  for (var t = [], n2 = arguments.length; n2--; )
+    t[n2] = arguments[n2];
+  return t.reduce(function(t2, n3) {
+    return t2.concat("string" == typeof n3 ? n3 : Array.isArray(n3) ? r.apply(void 0, n3) : "object" == typeof n3 && n3 ? Object.keys(n3).map(function(r3) {
+      return n3[r3] ? r3 : "";
     }) : "");
   }, []).join(" ");
 };
@@ -2109,7 +2126,7 @@ var r = function() {
 // packages/alert/index.js
 import WarpElement2 from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/info-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/info-16.js
 import { LitElement as LitElement3 } from "lit";
 import { unsafeStatic as unsafeStatic3, html as html4 } from "lit/static-html.js";
 var messages5 = JSON.parse('{"icon.title.info":"Informasjonssirkel"}');
@@ -2185,8 +2202,8 @@ var getMessages3 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n3 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale3();
-  const messages43 = getMessages3(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages3(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n3(messages23, messages5, messages33);
@@ -2200,7 +2217,7 @@ if (!customElements.get("w-icon-info-16")) {
   customElements.define("w-icon-info-16", IconInfo16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/warning-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/warning-16.js
 import { LitElement as LitElement4 } from "lit";
 import { unsafeStatic as unsafeStatic4, html as html5 } from "lit/static-html.js";
 var messages6 = JSON.parse('{"icon.title.warning":"Varseltrekant med utropstegn"}');
@@ -2276,8 +2293,8 @@ var getMessages4 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n4 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale4();
-  const messages43 = getMessages4(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages4(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n4(messages24, messages6, messages34);
@@ -2291,7 +2308,7 @@ if (!customElements.get("w-icon-warning-16")) {
   customElements.define("w-icon-warning-16", IconWarning16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/error-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/error-16.js
 import { LitElement as LitElement5 } from "lit";
 import { unsafeStatic as unsafeStatic5, html as html6 } from "lit/static-html.js";
 var messages7 = JSON.parse('{"icon.title.error":"\xC5ttekant med utropstegn"}');
@@ -2367,8 +2384,8 @@ var getMessages5 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n5 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale5();
-  const messages43 = getMessages5(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages5(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n5(messages25, messages7, messages35);
@@ -2382,7 +2399,7 @@ if (!customElements.get("w-icon-error-16")) {
   customElements.define("w-icon-error-16", IconError16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/success-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/success-16.js
 import { LitElement as LitElement6 } from "lit";
 import { unsafeStatic as unsafeStatic6, html as html7 } from "lit/static-html.js";
 var messages8 = JSON.parse('{"icon.title.success":"Sirkel med sjekkmerke"}');
@@ -2458,8 +2475,8 @@ var getMessages6 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n6 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale6();
-  const messages43 = getMessages6(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages6(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n6(messages26, messages8, messages36);
@@ -2563,7 +2580,7 @@ if (!customElements.get("w-alert")) {
 // packages/attention/index.js
 import { css as css2, html as html9, nothing } from "lit";
 
-// node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.2/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
 var min = Math.min;
 var max = Math.max;
@@ -2675,15 +2692,25 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
-  return __spreadProps(__spreadValues({}, rect), {
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
-  });
+  const {
+    x,
+    y: y2,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y2,
+    left: x,
+    right: x + width,
+    bottom: y2 + height,
+    x,
+    y: y2
+  };
 }
 
-// node_modules/.pnpm/@floating-ui+core@1.6.0/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+// node_modules/.pnpm/@floating-ui+core@1.6.2/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -2755,16 +2782,16 @@ var computePosition = async (reference, floating, config) => {
   });
   let {
     x,
-    y
+    y: y2
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
   let middlewareData = {};
   let resetCount = 0;
-  for (let i = 0; i < validMiddleware.length; i++) {
+  for (let i2 = 0; i2 < validMiddleware.length; i2++) {
     const {
       name,
       fn
-    } = validMiddleware[i];
+    } = validMiddleware[i2];
     const {
       x: nextX,
       y: nextY,
@@ -2772,7 +2799,7 @@ var computePosition = async (reference, floating, config) => {
       reset
     } = await fn({
       x,
-      y,
+      y: y2,
       initialPlacement: placement,
       placement: statefulPlacement,
       strategy,
@@ -2785,7 +2812,7 @@ var computePosition = async (reference, floating, config) => {
       }
     });
     x = nextX != null ? nextX : x;
-    y = nextY != null ? nextY : y;
+    y2 = nextY != null ? nextY : y2;
     middlewareData = __spreadProps(__spreadValues({}, middlewareData), {
       [name]: __spreadValues(__spreadValues({}, middlewareData[name]), data)
     });
@@ -2804,15 +2831,15 @@ var computePosition = async (reference, floating, config) => {
         }
         ({
           x,
-          y
+          y: y2
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
-      i = -1;
+      i2 = -1;
     }
   }
   return {
     x,
-    y,
+    y: y2,
     placement: statefulPlacement,
     strategy,
     middlewareData
@@ -2825,7 +2852,7 @@ async function detectOverflow(state, options) {
   }
   const {
     x,
-    y,
+    y: y2,
     platform: platform2,
     rects,
     elements,
@@ -2847,10 +2874,12 @@ async function detectOverflow(state, options) {
     rootBoundary,
     strategy
   }));
-  const rect = elementContext === "floating" ? __spreadProps(__spreadValues({}, rects.floating), {
+  const rect = elementContext === "floating" ? {
     x,
-    y
-  }) : rects.reference;
+    y: y2,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
   const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
   const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
     x: 1,
@@ -2878,7 +2907,7 @@ var arrow = (options) => ({
   async fn(state) {
     const {
       x,
-      y,
+      y: y2,
       placement,
       rects,
       platform: platform2,
@@ -2895,7 +2924,7 @@ var arrow = (options) => ({
     const paddingObject = getPaddingObject(padding);
     const coords = {
       x,
-      y
+      y: y2
     };
     const axis = getAlignmentAxis(placement);
     const length = getAxisLength(axis);
@@ -3005,12 +3034,12 @@ var flip = function(options) {
             }
           };
         }
-        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d2) => d2.overflows[0] <= 0).sort((a2, b2) => a2.overflows[1] - b2.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
         if (!resetPlacement) {
           switch (fallbackStrategy) {
             case "bestFit": {
               var _overflowsData$map$so;
-              const placement2 = (_overflowsData$map$so = overflowsData.map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+              const placement2 = (_overflowsData$map$so = overflowsData.map((d2) => [d2.placement, d2.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a2, b2) => a2[1] - b2[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
               if (placement2) {
                 resetPlacement = placement2;
               }
@@ -3140,7 +3169,7 @@ var offset = function(options) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
-        y,
+        y: y2,
         placement,
         middlewareData
       } = state;
@@ -3150,7 +3179,7 @@ var offset = function(options) {
       }
       return {
         x: x + diffCoords.x,
-        y: y + diffCoords.y,
+        y: y2 + diffCoords.y,
         data: __spreadProps(__spreadValues({}, diffCoords), {
           placement
         })
@@ -3159,7 +3188,7 @@ var offset = function(options) {
   };
 };
 
-// node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.2/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || "").toLowerCase();
@@ -3203,17 +3232,16 @@ function isTableElement(element) {
 }
 function isContainingBlock(element) {
   const webkit = isWebKit();
-  const css10 = getComputedStyle(element);
-  return css10.transform !== "none" || css10.perspective !== "none" || (css10.containerType ? css10.containerType !== "normal" : false) || !webkit && (css10.backdropFilter ? css10.backdropFilter !== "none" : false) || !webkit && (css10.filter ? css10.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css10.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css10.contain || "").includes(value));
+  const css11 = getComputedStyle(element);
+  return css11.transform !== "none" || css11.perspective !== "none" || (css11.containerType ? css11.containerType !== "normal" : false) || !webkit && (css11.backdropFilter ? css11.backdropFilter !== "none" : false) || !webkit && (css11.filter ? css11.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css11.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css11.contain || "").includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -3282,9 +3310,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
 
 // node_modules/.pnpm/@floating-ui+dom@1.6.3/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
-  const css10 = getComputedStyle(element);
-  let width = parseFloat(css10.width) || 0;
-  let height = parseFloat(css10.height) || 0;
+  const css11 = getComputedStyle(element);
+  let width = parseFloat(css11.width) || 0;
+  let height = parseFloat(css11.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -3314,16 +3342,16 @@ function getScale(element) {
     $
   } = getCssDimensions(domElement);
   let x = ($ ? round(rect.width) : rect.width) / width;
-  let y = ($ ? round(rect.height) : rect.height) / height;
+  let y2 = ($ ? round(rect.height) : rect.height) / height;
   if (!x || !Number.isFinite(x)) {
     x = 1;
   }
-  if (!y || !Number.isFinite(y)) {
-    y = 1;
+  if (!y2 || !Number.isFinite(y2)) {
+    y2 = 1;
   }
   return {
     x,
-    y
+    y: y2
   };
 }
 var noOffsets = /* @__PURE__ */ createCoords(0);
@@ -3367,7 +3395,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   }
   const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
   let x = (clientRect.left + visualOffsets.x) / scale.x;
-  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let y2 = (clientRect.top + visualOffsets.y) / scale.y;
   let width = clientRect.width / scale.x;
   let height = clientRect.height / scale.y;
   if (domElement) {
@@ -3378,15 +3406,15 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css10 = getComputedStyle(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css10.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css10.paddingTop)) * iframeScale.y;
+      const css11 = getComputedStyle(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css11.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css11.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
-      y *= iframeScale.y;
+      y2 *= iframeScale.y;
       width *= iframeScale.x;
       height *= iframeScale.y;
       x += left;
-      y += top;
+      y2 += top;
       currentWin = getWindow(currentIFrame);
       currentIFrame = currentWin.frameElement;
     }
@@ -3395,7 +3423,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     width,
     height,
     x,
-    y
+    y: y2
   });
 }
 var topLayerSelectors = [":popover-open", ":modal"];
@@ -3453,45 +3481,45 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
 }
 function getDocumentRect(element) {
-  const html26 = getDocumentElement(element);
+  const html30 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html26.scrollWidth, html26.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html26.scrollHeight, html26.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html30.scrollWidth, html30.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html30.scrollHeight, html30.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
-  const y = -scroll.scrollTop;
+  const y2 = -scroll.scrollTop;
   if (getComputedStyle(body).direction === "rtl") {
-    x += max(html26.clientWidth, body.clientWidth) - width;
+    x += max(html30.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
     height,
     x,
-    y
+    y: y2
   };
 }
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html26 = getDocumentElement(element);
+  const html30 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html26.clientWidth;
-  let height = html26.clientHeight;
+  let width = html30.clientWidth;
+  let height = html30.clientHeight;
   let x = 0;
-  let y = 0;
+  let y2 = 0;
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
     const visualViewportBased = isWebKit();
     if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
       x = visualViewport.offsetLeft;
-      y = visualViewport.offsetTop;
+      y2 = visualViewport.offsetTop;
     }
   }
   return {
     width,
     height,
     x,
-    y
+    y: y2
   };
 }
 function getInnerBoundingClientRect(element, strategy) {
@@ -3502,12 +3530,12 @@ function getInnerBoundingClientRect(element, strategy) {
   const width = element.clientWidth * scale.x;
   const height = element.clientHeight * scale.y;
   const x = left * scale.x;
-  const y = top * scale.y;
+  const y2 = top * scale.y;
   return {
     width,
     height,
     x,
-    y
+    y: y2
   };
 }
 function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
@@ -3618,10 +3646,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     }
   }
   const x = rect.left + scroll.scrollLeft - offsets.x;
-  const y = rect.top + scroll.scrollTop - offsets.y;
+  const y2 = rect.top + scroll.scrollTop - offsets.y;
   return {
     x,
-    y,
+    y: y2,
     width: rect.width,
     height: rect.height
   };
@@ -3691,7 +3719,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// node_modules/.pnpm/@warp-ds+core@1.1.1_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// node_modules/.pnpm/@warp-ds+core@1.1.2_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
 var TOP_START = "top-start";
 var TOP = "top";
 var TOP_END = "top-end";
@@ -3746,12 +3774,10 @@ var rotation = {
   [BOTTOM]: -135,
   [BOTTOM_END]: -135
 };
-var middlePosition = "calc(50% - 7px)";
-var isDirectionVertical = (name) => [TOP_START, TOP, TOP_END, BOTTOM_START, BOTTOM, BOTTOM_END].includes(name);
 var arrowDirectionClassname = (dir) => {
   let direction;
   if (/-/.test(dir)) {
-    direction = dir.split("-").map((d) => d.charAt(0).toUpperCase() + d.slice(1)).join("");
+    direction = dir.split("-").map((d2) => d2.charAt(0).toUpperCase() + d2.slice(1)).join("");
   } else {
     direction = dir.charAt(0).toUpperCase() + dir.slice(1);
   }
@@ -3770,17 +3796,6 @@ var applyArrowStyles = (arrowEl, arrowRotation2, dir) => {
     transform: `rotate(${arrowRotation2}deg)`
   });
 };
-function computeCalloutArrow({ actualDirection, directionName = BOTTOM, arrowEl }) {
-  if (!arrowEl)
-    return;
-  actualDirection = directionName;
-  const directionIsVertical = isDirectionVertical(directionName);
-  Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
-    left: directionIsVertical ? middlePosition : "",
-    top: !directionIsVertical ? middlePosition : ""
-  });
-  applyArrowStyles(arrowEl, arrowRotation(actualDirection), actualDirection);
-}
 async function useRecompute(state) {
   var _a, _b, _c;
   if (!(state == null ? void 0 : state.isShowing))
@@ -3788,33 +3803,34 @@ async function useRecompute(state) {
   if (state == null ? void 0 : state.waitForDOM) {
     await (state == null ? void 0 : state.waitForDOM());
   }
-  if (state == null ? void 0 : state.isCallout)
-    return computeCalloutArrow(state);
   if (!(state == null ? void 0 : state.targetEl) || !(state == null ? void 0 : state.attentionEl))
     return;
-  const targetEl = state == null ? void 0 : state.targetEl;
-  const attentionEl = state == null ? void 0 : state.attentionEl;
+  let targetEl = state == null ? void 0 : state.targetEl;
+  const attentionEl = state.attentionEl;
   computePosition2(targetEl, attentionEl, {
     placement: (_a = state == null ? void 0 : state.directionName) != null ? _a : BOTTOM,
     middleware: [
       offset({ mainAxis: (_b = state == null ? void 0 : state.distance) != null ? _b : 8, crossAxis: (_c = state == null ? void 0 : state.skidding) != null ? _c : 0 }),
       (state == null ? void 0 : state.flip) && flip2({
+        // when flip is set to true it will move the attentionEl's placement to its opposite side or to the preferred placements if fallbackPlacements has a value
         crossAxis: state == null ? void 0 : state.crossAxis,
         fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
       }),
       !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl }),
       hide2()
-      //will hide the attentionEl when it appears detached from the targetEl. Can be called multiple times in the middleware-array if you want to use several strategies. Default strategy is 'referenceHidden'.
+      // will hide the attentionEl when it appears detached from the targetEl. Can be called multiple times in the middleware-array if you want to use several strategies. Default strategy is 'referenceHidden'.
     ]
-  }).then(({ x, y, middlewareData, placement }) => {
+  }).then(({ x, y: y2, middlewareData, placement }) => {
     state.actualDirection = placement;
-    Object.assign(attentionEl == null ? void 0 : attentionEl.style, {
-      left: `${x}px`,
-      top: `${y}px`
-    });
+    if (!(state == null ? void 0 : state.isCallout)) {
+      Object.assign(attentionEl.style, {
+        left: `${x}px`,
+        top: `${y2}px`
+      });
+    }
     if ((middlewareData == null ? void 0 : middlewareData.hide) && !(state == null ? void 0 : state.isCallout)) {
-      const { referenceHidden } = middlewareData == null ? void 0 : middlewareData.hide;
-      Object.assign(attentionEl == null ? void 0 : attentionEl.style, {
+      const { referenceHidden } = middlewareData.hide;
+      Object.assign(attentionEl.style, {
         visibility: referenceHidden ? "hidden" : ""
       });
     }
@@ -3822,26 +3838,26 @@ async function useRecompute(state) {
     const arrowPlacement = arrowDirection(placement).split("-")[1];
     if ((middlewareData == null ? void 0 : middlewareData.arrow) && (state == null ? void 0 : state.arrowEl)) {
       const arrowEl = state == null ? void 0 : state.arrowEl;
-      const { x: x2, y: y2 } = middlewareData == null ? void 0 : middlewareData.arrow;
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
       let top = "";
       let right = "";
       let bottom = "";
       let left = "";
       if (arrowPlacement === "start") {
-        const value = typeof x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
-        top = typeof y2 === "number" ? `calc(33px -  ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
+        top = typeof arrowY === "number" ? `calc(24px -  ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? value : "";
         left = isRtl ? "" : value;
       } else if (arrowPlacement === "end") {
-        const value = typeof x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        const value = typeof arrowX === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
         right = isRtl ? "" : value;
         left = isRtl ? value : "";
-        bottom = typeof y2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        bottom = typeof arrowY === "number" ? `calc(24px - ${arrowEl.offsetWidth / 2}px)` : "";
       } else {
-        left = typeof x2 === "number" ? `${x2}px` : "";
-        top = typeof y2 === "number" ? `${y2}px` : "";
+        left = typeof arrowX === "number" ? `${arrowX}px` : "";
+        top = typeof arrowY === "number" ? `${arrowY}px` : "";
       }
-      Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
+      Object.assign(arrowEl.style, {
         top,
         right,
         bottom,
@@ -3887,8 +3903,8 @@ var getMessages7 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n7 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale7();
-  const messages43 = getMessages7(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages7(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 
@@ -3995,7 +4011,7 @@ ${JSON.stringify(directions)}`
       tooltip: this.tooltip,
       highlight: this.highlight
     };
-    const activeVariant = Object.keys(variantProps).find((b) => !!variantProps[b]) || "";
+    const activeVariant = Object.keys(variantProps).find((b2) => !!variantProps[b2]) || "";
     return {
       wrapper: attention[activeVariant],
       arrow: attention[`arrow${activeVariant.charAt(0).toUpperCase() + activeVariant.slice(1)}`]
@@ -4326,7 +4342,7 @@ if (!customElements.get("w-box")) {
 // packages/breadcrumbs/index.js
 import { html as html12 } from "lit";
 
-// node_modules/.pnpm/@warp-ds+core@1.1.1_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
+// node_modules/.pnpm/@warp-ds+core@1.1.2_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
 function interleave(array, separator2) {
   return array.flatMap((el) => [el, separator2]).slice(0, -1);
 }
@@ -4428,11 +4444,11 @@ var WarpBroadcast = class extends WarpElement7 {
     this._hiddenMessageIds = [.../* @__PURE__ */ new Set([...this._hiddenMessageIds, id])];
   }
   render() {
-    const messages43 = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
+    const messages46 = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
     return html13`
-      <aside class=${`${messages43.length === 0 ? "hidden" : "mb-16"}`}>
+      <aside class=${`${messages46.length === 0 ? "hidden" : "mb-16"}`}>
         ${repeat(
-      messages43,
+      messages46,
       ({ id }) => `broadcast-${id}`,
       ({ id, message }) => html13`<w-toast id="broadcast-${id}" type="warning" text="${message}" canclose @close=${() => this._del(id)}> </w-toast>`
     )}
@@ -4676,7 +4692,7 @@ import { css as css5, html as html18 } from "lit";
 import WarpElement10 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 import { LitElement as LitElement7 } from "lit";
 import { unsafeStatic as unsafeStatic7, html as html16 } from "lit/static-html.js";
 var messages18 = JSON.parse('{"icon.title.chevron-down":"Nedoverpil"}');
@@ -4752,8 +4768,8 @@ var getMessages8 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n8 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale8();
-  const messages43 = getMessages8(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages8(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n8(messages27, messages18, messages37);
@@ -4767,7 +4783,7 @@ if (!customElements.get("w-icon-chevron-down-16")) {
   customElements.define("w-icon-chevron-down-16", IconChevronDown16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
 import { LitElement as LitElement8 } from "lit";
 import { unsafeStatic as unsafeStatic8, html as html17 } from "lit/static-html.js";
 var messages19 = JSON.parse('{"icon.title.chevron-up":"Oppoverpil"}');
@@ -4843,8 +4859,8 @@ var getMessages9 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n9 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale9();
-  const messages43 = getMessages9(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages43);
+  const messages46 = getMessages9(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
   i18n.activate(locale);
 };
 activateI18n9(messages28, messages19, messages38);
@@ -4977,24 +4993,522 @@ if (!customElements.get("w-expandable")) {
   customElements.define("w-expandable", WarpExpandable);
 }
 
-// packages/pill/index.js
+// packages/modal/modal-footer.js
 import { html as html19 } from "lit";
 import WarpElement11 from "@warp-ds/elements-core";
 
+// packages/modal/util.js
+var CanCloseMixin = (superClass) => class extends superClass {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "patchClose", true);
+    __publicField(this, "_close", null);
+  }
+  close() {
+    this._close();
+  }
+};
+var ProvidesCanCloseToSlotsMixin = (superClass) => class extends superClass {
+  // HACK: slot-props don't seem to exist and neither does the context pattern for this
+  /** @param {Event} evt */
+  handleSlotChange(evt) {
+    const children2 = evt.target.assignedNodes({ flatten: true });
+    for (const child of children2.filter((e) => e.patchClose)) {
+      child._close = () => this.close();
+    }
+  }
+};
+
+// packages/modal/modal-footer.js
+var ModalFooter = class extends CanCloseMixin(ProvidesCanCloseToSlotsMixin(WarpElement11)) {
+  render() {
+    return html19`
+      <div class="${modalElement.footer}">
+        <slot @slotchange="${this.handleSlotChange}"></slot>
+      </div>
+    `;
+  }
+};
+__publicField(ModalFooter, "styles", [WarpElement11.styles]);
+
+// packages/modal/modal-header.js
+import { html as html21, nothing as nothing3 } from "lit";
+
+// node_modules/.pnpm/@itsy+animate@0.0.9/node_modules/@itsy/animate/src/utility.js
+var computeDeltas = (first, last) => ({
+  dx: first.left - last.left,
+  dy: first.top - last.top,
+  dw: first.width / last.width,
+  dh: first.height / last.height,
+  first,
+  last
+});
+var moveKeyframes = ({ dx, dy }) => [
+  { transform: `translate(${dx}px, ${dy}px)` },
+  { transform: "none" }
+];
+var animationDefaults = { easing: "ease", duration: 300 };
+
+// node_modules/.pnpm/@itsy+animate@0.0.9/node_modules/@itsy/animate/src/reduce-motion.js
+var reduceMotion = false;
+var windowExists2 = typeof window !== "undefined";
+if (windowExists2) {
+  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const callback = ({ matches }) => reduceMotion = matches;
+  if (query.addEventListener)
+    query.addEventListener("change", callback);
+  callback(query);
+}
+
+// node_modules/.pnpm/@itsy+animate@0.0.9/node_modules/@itsy/animate/src/move.js
+var Move = class {
+  constructor(el, { animation = {}, keyframes, respectReduceMotion = true } = {}) {
+    /** @type {DOMRect | {}} */
+    __publicField(this, "first");
+    /** @type {DOMRect | {}} */
+    __publicField(this, "last");
+    /** @type {HTMLElement} */
+    __publicField(this, "el");
+    this.el = el;
+    this.first = {};
+    this.last = {};
+    this.userAnimationOptions = animation;
+    this.keyframeGenerator = keyframes || moveKeyframes;
+    this.shouldReduceMotion = respectReduceMotion;
+  }
+  async when(cb) {
+    this.prep();
+    const v = await cb();
+    await this.play();
+    return v;
+  }
+  prep() {
+    this.first = this.el.getBoundingClientRect();
+  }
+  async play() {
+    this.last = this.el.getBoundingClientRect();
+    if (!this.el.animate)
+      return;
+    const animation = this.el.animate(this.keyframes, this.animationOptions);
+    await animation.finished;
+  }
+  get keyframes() {
+    return this.keyframeGenerator(computeDeltas(this.first, this.last));
+  }
+  get defaults() {
+    return animationDefaults;
+  }
+  get mergedOptions() {
+    return __spreadValues(__spreadValues({}, this.defaults), this.userAnimationOptions);
+  }
+  get animationOptions() {
+    if (!this.shouldReduceMotion)
+      return this.mergedOptions;
+    if (!reduceMotion)
+      return this.mergedOptions;
+    return __spreadProps(__spreadValues({}, this.mergedOptions), { duration: 0 });
+  }
+};
+
+// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/arrow-left-16.js
+import { LitElement as LitElement9 } from "lit";
+import { unsafeStatic as unsafeStatic9, html as html20 } from "lit/static-html.js";
+var messages20 = JSON.parse('{"icon.title.arrow-left":"Pil som peker mot venstre"}');
+var messages29 = JSON.parse('{"icon.title.arrow-left":"Leftward-pointing arrow"}');
+var messages39 = JSON.parse('{"icon.title.arrow-left":"Vasemmalle osoittava nuoli"}');
+var supportedLocales10 = ["en", "nb", "fi", "da", "sv"];
+var defaultLocale11 = "en";
+var detectByBrand9 = () => {
+  let value;
+  switch (process.env.NMP_BRAND) {
+    case "FINN":
+      value = "nb";
+      break;
+    case "TORI":
+      value = "fi";
+      break;
+    case "BLOCKET":
+      value = "sv";
+      break;
+    case "DBA":
+      value = "da";
+      break;
+    default:
+      value = "en";
+  }
+  return value;
+};
+var detectByHost9 = () => {
+  var _a;
+  const hostname = (_a = document == null ? void 0 : document.location) == null ? void 0 : _a.hostname;
+  if (hostname.includes("finn")) {
+    return "nb";
+  } else if (hostname.includes("tori")) {
+    return "fi";
+  } else if (hostname.includes("blocket")) {
+    return "sv";
+  } else if (hostname.includes("dba")) {
+    return "da";
+  } else {
+    return defaultLocale11;
+  }
+};
+var getSupportedLocale10 = (usedLocale) => {
+  return supportedLocales10.find(
+    (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
+  ) || detectByHost9();
+};
+function detectLocale10() {
+  var _a;
+  if (typeof window === "undefined") {
+    const serverLocale = detectByBrand9();
+    return getSupportedLocale10(serverLocale);
+  }
+  try {
+    const htmlLocale = (_a = document == null ? void 0 : document.documentElement) == null ? void 0 : _a.lang;
+    const hostLocale = detectByHost9();
+    if (!supportedLocales10.includes(htmlLocale)) {
+      console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname");
+      return getSupportedLocale10(hostLocale);
+    }
+    return getSupportedLocale10(htmlLocale != null ? htmlLocale : hostLocale);
+  } catch (e) {
+    console.warn("could not detect locale, falling back to source locale", e);
+    return defaultLocale11;
+  }
+}
+var getMessages10 = (locale, enMsg, nbMsg, fiMsg) => {
+  if (locale === "nb")
+    return nbMsg;
+  if (locale === "fi")
+    return fiMsg;
+  return enMsg;
+};
+var activateI18n10 = (enMessages, nbMessages, fiMessages) => {
+  const locale = detectLocale10();
+  const messages46 = getMessages10(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages46);
+  i18n.activate(locale);
+};
+activateI18n10(messages29, messages20, messages39);
+var IconArrowLeft16 = class extends LitElement9 {
+  render() {
+    const title = i18n.t({ message: `Leftward-pointing arrow`, id: "icon.title.arrow-left", comment: "Title for table arrow left icon" });
+    return html20`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${unsafeStatic9(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`;
+  }
+};
+if (!customElements.get("w-icon-arrow-left-16")) {
+  customElements.define("w-icon-arrow-left-16", IconArrowLeft16);
+}
+
+// packages/modal/modal-header.js
+import WarpElement12 from "@warp-ds/elements-core";
+import { createRef, ref } from "lit/directives/ref.js";
+var NO_CLOSE_BUTTON = "no-close";
+var ModalHeader = class extends CanCloseMixin(WarpElement12) {
+  constructor() {
+    super();
+    __publicField(this, "titleEl", createRef());
+    this._hasTopContent = false;
+  }
+  render() {
+    return html21`
+      <div class="${modalElement.header}">
+        <slot name="top" @slotchange=${this.handleTopSlotChange}></slot>
+        <div class="${this._hasTopContent ? "" : modalElement.headerTitleBar}">
+          ${this.backButton}
+          <h1 ${ref(this.titleEl)} class="${this.titleClasses}">${this.title}</h1>
+          ${this.closeButton}
+        </div>
+      </div>
+    `;
+  }
+  async willUpdate(changedProperties) {
+    if (changedProperties.has("back")) {
+      const move = new Move(this.titleEl.value);
+      move.when(async () => {
+        await this.updateComplete;
+      });
+    }
+  }
+  get titleClasses() {
+    return [
+      modalElement.headerTitle,
+      this.back ? modalElement.headerTitleWithBackButton : modalElement.headerTitleWithoutBackButton,
+      this._hasTopContent ? modalElement.headerTitleWithTopArea : ""
+    ].join(" ");
+  }
+  get backButton() {
+    return this.back && !this._hasTopContent ? html21` <button type="button" class="${modalElement.headerButton} ${modalElement.headerButtonLeft}" @click="${this.emitBack}">
+          <w-icon-arrow-left-16></w-icon-arrow-left-16>
+        </button>` : nothing3;
+  }
+  get closeButton() {
+    if (this[NO_CLOSE_BUTTON])
+      return nothing3;
+    return html21` <button
+      type="button"
+      class="${modalElement.headerButton} ${this._hasTopContent ? modalElement.headerCloseButtonOnImage : modalElement.headerCloseButton}"
+      @click="${this.close}">
+      <w-icon-close-16></w-icon-close-16>
+    </button>`;
+  }
+  emitBack() {
+    this.dispatchEvent(new CustomEvent("backClicked", { bubbles: true, composed: true }));
+  }
+  handleTopSlotChange(slotEvent) {
+    const topContent = slotEvent.target.assignedElements({ flatten: true });
+    this._hasTopContent = !!topContent.length;
+  }
+};
+__publicField(ModalHeader, "properties", {
+  title: { type: String },
+  back: { type: Boolean },
+  [NO_CLOSE_BUTTON]: { type: Boolean },
+  _hasTopContent: { state: true }
+});
+__publicField(ModalHeader, "styles", [WarpElement12.styles]);
+
+// packages/modal/modal-main.js
+import { css as css6, html as html22 } from "lit";
+import WarpElement13 from "@warp-ds/elements-core";
+import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
+
+// node_modules/.pnpm/scroll-doctor@2.0.2/node_modules/scroll-doctor/dist/scroll-doctor.js
+var n = [];
+var c = { documentElement: {}, body: {} };
+var i = Object.freeze({
+  // html
+  documentElement: {
+    "scrollbar-gutter": "stable"
+  },
+  body: {
+    overflow: "hidden",
+    position: "relative",
+    height: "100%"
+  }
+});
+var r2 = (t) => {
+  var _a;
+  t.touches.length > 1 || ((_a = t.preventDefault) == null ? void 0 : _a.call(t));
+};
+var h = (t) => ([e, s]) => {
+  c[t][e] = document[t].style[e], document[t].style[e] = s;
+};
+var a = () => Object.entries(i).forEach(([t, e]) => {
+  Object.entries(e).forEach(h(t));
+});
+var d = (t) => ([e, s]) => {
+  document[t].style[e] = c[t][e];
+};
+var f = () => Object.entries(c).forEach(([t, e]) => {
+  Object.entries(e).forEach(d(t));
+});
+var m = (t) => t.scrollHeight - Math.abs(t.scrollTop) === t.clientHeight;
+function y(t) {
+  let e = -1;
+  const s = (o) => {
+    if (o.targetTouches.length !== 1)
+      return;
+    const l = o.targetTouches[0].clientY - e;
+    return t.scrollTop === 0 && l > 0 || m(t) && l < 0 ? r2(o) : (o.stopPropagation(), true);
+  };
+  t.ontouchstart = (o) => {
+    o.targetTouches.length === 1 && (e = o.targetTouches[0].clientY);
+  }, t.ontouchmove = s;
+}
+function p(t) {
+  t.ontouchstart = null, t.ontouchmove = null;
+}
+var u = (t) => () => document[t ? "addEventListener" : "removeEventListener"]("touchmove", r2, { passive: false });
+var b = u(true);
+var g = u();
+function E(t) {
+  if (!t)
+    throw Error("Could not run setup, an element must be provided");
+  n.some((e) => e === t) || (n.length || (a(), b()), y(t), n.push(t));
+}
+function T() {
+  n.forEach(p), g(), f(), n = [];
+}
+
+// packages/modal/modal-main.js
+var NO_BACKDROP_CLICKS = "ignore-backdrop-clicks";
+var CONTENT_ID = "content-id";
+var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
+  constructor() {
+    super();
+    __publicField(this, "dialogEl", createRef2());
+    __publicField(this, "dialogInnerEl", createRef2());
+    __publicField(this, "contentEl", createRef2());
+    this.interceptEscape = this.interceptEscape.bind(this);
+    this.closeOnBackdropClick = this.closeOnBackdropClick.bind(this);
+    this.eventPreventer = this.eventPreventer.bind(this);
+    this.modifyBorderRadius = this.modifyBorderRadius.bind(this);
+  }
+  async open() {
+    this.dialogEl.value.showModal();
+    this.handleListeners();
+    E(this.contentEl.value);
+    await this.updateComplete;
+    this.dispatchEvent(new CustomEvent("shown", { bubbles: true, composed: true }));
+  }
+  close() {
+    this.handleListeners("removeEventListener");
+    this.dialogEl.value.classList.add("close");
+    this.dialogEl.value.addEventListener(
+      "animationend",
+      async () => {
+        this.dialogEl.value.classList.remove("close");
+        this.dialogEl.value.close();
+        T();
+        await this.updateComplete;
+        this.dispatchEvent(new CustomEvent("hidden", { bubbles: true, composed: true }));
+      },
+      { once: true }
+    );
+  }
+  render() {
+    return html22`
+      <dialog ${ref2(this.dialogEl)} class="w-modal ${modalElement.dialogEl}">
+        <div ${ref2(this.dialogInnerEl)} class="${modalElement.dialogInner}">
+          <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
+          <div ${ref2(this.contentEl)} class="${modalElement.contentSlot}" id=${this[CONTENT_ID]}>
+            <slot name="content" @slotchange="${this.handleSlotChange}"></slot>
+          </div>
+          <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
+        </div>
+      </dialog>
+    `;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("show"))
+      this[this.show ? "open" : "close"]();
+  }
+  handleListeners(verb = "addEventListener") {
+    document[verb]("keydown", this.interceptEscape);
+    if (!this[NO_BACKDROP_CLICKS])
+      this.dialogEl.value[verb]("mousedown", this.closeOnBackdropClick);
+    this.dialogEl.value[verb]("close", this.eventPreventer);
+    this.dialogEl.value[verb]("cancel", this.eventPreventer);
+    this.dialogInnerEl.value[verb]("transitionend", this.modifyBorderRadius);
+  }
+  /** @param {Event} evt */
+  eventPreventer(evt) {
+    evt.preventDefault();
+  }
+  /** @param {MouseEvent} evt */
+  closeOnBackdropClick(evt) {
+    if (this.dialogEl.value === evt.target)
+      this.close();
+  }
+  /** @param {KeyboardEvent} evt */
+  interceptEscape(evt) {
+    if (evt.key === "Escape") {
+      evt.preventDefault();
+      this.close();
+    }
+  }
+  modifyBorderRadius() {
+    if (this.dialogInnerEl.value.scrollHeight * 1.02 > innerHeight)
+      this.dialogInnerEl.value.style.borderRadius = "0px";
+    else
+      this.dialogInnerEl.value.style.borderRadius = null;
+  }
+};
+__publicField(ModalMain, "properties", {
+  show: { type: Boolean },
+  [CONTENT_ID]: { type: String },
+  [NO_BACKDROP_CLICKS]: { type: Boolean }
+});
+__publicField(ModalMain, "styles", [
+  WarpElement13.styles,
+  css6`
+      .w-modal {
+        --w-modal-translate-distance: 100%;
+      }
+      @media (min-width: 480px) {
+        .w-modal {
+          --w-modal-translate-distance: 50%;
+        }
+      }
+      .w-modal[open] {
+        animation: w-modal-in 0.3s ease-in-out forwards;
+      }
+      .w-modal.close {
+        animation: w-modal-out 0.3s ease-in-out forwards;
+      }
+      .w-modal[open]::backdrop {
+        animation: backdrop-in 0.3s ease-in-out forwards;
+      }
+      .w-modal.close::backdrop {
+        animation: backdrop-out 0.3s ease-in-out forwards;
+      }
+      /* shouldn't need two (in/out) animations declared here, but reversing is being weird */
+      @keyframes w-modal-in {
+        from {
+          transform: translateY(var(--w-modal-translate-distance));
+          opacity: 0;
+        }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+      @keyframes w-modal-out {
+        from {
+          transform: translateY(0);
+          opacity: 1;
+        }
+        to {
+          transform: translateY(var(--w-modal-translate-distance));
+          opacity: 0;
+        }
+      }
+      @keyframes backdrop-in {
+        from {
+          background: transparent;
+        }
+        to {
+          background: rgba(0, 0, 0, 0.25);
+        }
+      }
+      @keyframes backdrop-out {
+        from {
+          background: rgba(0, 0, 0, 0.25);
+        }
+        to {
+          background: transparent;
+        }
+      }
+    `
+]);
+
+// packages/modal/index.js
+if (!customElements.get("w-modal")) {
+  customElements.define("w-modal", ModalMain);
+  customElements.define("w-modal-header", ModalHeader);
+  customElements.define("w-modal-footer", ModalFooter);
+}
+
+// packages/pill/index.js
+import { html as html23 } from "lit";
+import WarpElement14 from "@warp-ds/elements-core";
+
 // packages/pill/locales/en/messages.mjs
-var messages20 = JSON.parse('{"pill.aria.openFilter":"Open filter","pill.aria.removeFilter":["Remove filter ",["label"]]}');
+var messages21 = JSON.parse('{"pill.aria.openFilter":"Open filter","pill.aria.removeFilter":["Remove filter ",["label"]]}');
 
 // packages/pill/locales/fi/messages.mjs
-var messages21 = JSON.parse('{"pill.aria.openFilter":"Avaa suodatin","pill.aria.removeFilter":["Tyhjenn\xE4 suodatin ",["label"]]}');
+var messages30 = JSON.parse('{"pill.aria.openFilter":"Avaa suodatin","pill.aria.removeFilter":["Tyhjenn\xE4 suodatin ",["label"]]}');
 
 // packages/pill/locales/nb/messages.mjs
-var messages29 = JSON.parse('{"pill.aria.openFilter":"\xC5pne filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
+var messages31 = JSON.parse('{"pill.aria.openFilter":"\xC5pne filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
 
 // packages/pill/index.js
-var WarpPill = class extends kebabCaseAttributes(WarpElement11) {
+var WarpPill = class extends kebabCaseAttributes(WarpElement14) {
   constructor() {
     super();
-    activateI18n7(messages20, messages29, messages21);
+    activateI18n7(messages21, messages31, messages30);
     this.canClose = false;
     this.suggestion = false;
     this.openFilterSrText = i18n._({
@@ -5030,13 +5544,13 @@ var WarpPill = class extends kebabCaseAttributes(WarpElement11) {
     this.dispatchEvent(new CustomEvent("w-pill-close", { bubbles: true, composed: true }));
   }
   render() {
-    return html19`
+    return html23`
       <div class="${pill.pill}">
         <button type="button" class="${this._labelClasses}" @click="${this._onClick}">
           <span class="${pill.a11y}">${this.openSrLabel ? this.openSrLabel : this.openFilterSrText}</span>
           <slot></slot>
         </button>
-        ${this.canClose ? html19`<button type="button" class="${this._closeClasses}" @click="${this._onClose}">
+        ${this.canClose ? html23`<button type="button" class="${this._closeClasses}" @click="${this._onClose}">
               <span class="${pill.a11y}">${this.closeSrLabel ? this.closeSrLabel : this.removeFilterSrText}</span>
               <w-icon-close-16></w-icon-close-16>
             </button>` : null}
@@ -5044,7 +5558,7 @@ var WarpPill = class extends kebabCaseAttributes(WarpElement11) {
     `;
   }
 };
-__publicField(WarpPill, "styles", [WarpElement11.styles]);
+__publicField(WarpPill, "styles", [WarpElement14.styles]);
 __publicField(WarpPill, "properties", {
   canClose: { type: Boolean },
   suggestion: { type: Boolean },
@@ -5056,24 +5570,24 @@ if (!customElements.get("w-pill")) {
 }
 
 // packages/select/index.js
-import { html as html20 } from "lit";
-import WarpElement12 from "@warp-ds/elements-core";
+import { html as html24 } from "lit";
+import WarpElement15 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined5 } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
 
 // packages/select/locales/en/messages.mjs
-var messages30 = JSON.parse('{"select.label.optional":"(optional)"}');
+var messages40 = JSON.parse('{"select.label.optional":"(optional)"}');
 
 // packages/select/locales/fi/messages.mjs
-var messages31 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
+var messages41 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
 
 // packages/select/locales/nb/messages.mjs
-var messages39 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
+var messages42 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
 
 // packages/select/index.js
 var _classes, classes_get, _helpTextClasses, helpTextClasses_get, _chevronClasses, chevronClasses_get, _id, id_get, _helpId, helpId_get;
-var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
+var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
   constructor() {
     super();
     __privateAdd(this, _classes);
@@ -5081,18 +5595,18 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
     __privateAdd(this, _chevronClasses);
     __privateAdd(this, _id);
     __privateAdd(this, _helpId);
-    activateI18n7(messages30, messages39, messages31);
+    activateI18n7(messages40, messages42, messages41);
     this._options = this.innerHTML;
   }
   render() {
-    return html20`<div class="${select.wrapper}">
+    return html24`<div class="${select.wrapper}">
       ${when(
       this.label,
-      () => html20`<label class="${label.label}" for="${__privateGet(this, _id, id_get)}">
+      () => html24`<label class="${label.label}" for="${__privateGet(this, _id, id_get)}">
             ${this.label}
             ${when(
         this.optional,
-        () => html20`<span class="${label.optional}"
+        () => html24`<span class="${label.optional}"
                   >${i18n._({
           id: "select.label.optional",
           message: "(optional)",
@@ -5116,7 +5630,7 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
           <w-icon-chevron-down-16></w-icon-chevron-down-16>
         </div>
       </div>
-      ${when(this.always || this.invalid, () => html20`<div id="${__privateGet(this, _helpId, helpId_get)}" class="${__privateGet(this, _helpTextClasses, helpTextClasses_get)}">${this.hint}</div>`)}
+      ${when(this.always || this.invalid, () => html24`<div id="${__privateGet(this, _helpId, helpId_get)}" class="${__privateGet(this, _helpTextClasses, helpTextClasses_get)}">${this.hint}</div>`)}
     </div>`;
   }
 };
@@ -5165,16 +5679,16 @@ __publicField(WarpSelect, "properties", {
   optional: { type: Boolean, reflect: true },
   _options: { state: true }
 });
-__publicField(WarpSelect, "styles", [WarpElement12.styles]);
+__publicField(WarpSelect, "styles", [WarpElement15.styles]);
 if (!customElements.get("w-select")) {
   customElements.define("w-select", WarpSelect);
 }
 
 // packages/textfield/index.js
-import { css as css6, html as html21 } from "lit";
-import WarpElement13 from "@warp-ds/elements-core";
+import { css as css7, html as html25 } from "lit";
+import WarpElement16 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined6 } from "lit/directives/if-defined.js";
-var WarpTextField = class extends WarpElement13 {
+var WarpTextField = class extends WarpElement16 {
   constructor() {
     super();
     this.type = "text";
@@ -5199,7 +5713,7 @@ var WarpTextField = class extends WarpElement13 {
   }
   get _label() {
     if (this.label) {
-      return html21`<label for="${this._id}" class=${label.label}>${this.label}</label>`;
+      return html25`<label for="${this._id}" class=${label.label}>${this.label}</label>`;
     }
   }
   get _helpId() {
@@ -5237,7 +5751,7 @@ var WarpTextField = class extends WarpElement13 {
       this._hasSuffix = true;
   }
   render() {
-    return html21`
+    return html25`
       ${this._label}
       <div class="${input.wrapper}">
         <slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
@@ -5265,7 +5779,7 @@ var WarpTextField = class extends WarpElement13 {
           @focus="${this.handler}" />
         <slot @slotchange="${this.suffixSlotChange}" name="suffix"></slot>
       </div>
-      ${this.helpText && html21`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
+      ${this.helpText && html25`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
     `;
   }
 };
@@ -5295,8 +5809,8 @@ __publicField(WarpTextField, "properties", {
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
 __publicField(WarpTextField, "styles", [
-  WarpElement13.styles,
-  css6`
+  WarpElement16.styles,
+  css7`
       :host {
         display: block;
       }
@@ -5338,10 +5852,10 @@ function updateToast(id, options) {
 }
 
 // packages/toast/toast-container.js
-import { css as css7, html as html22 } from "lit";
-import WarpElement14 from "@warp-ds/elements-core";
+import { css as css8, html as html26 } from "lit";
+import WarpElement17 from "@warp-ds/elements-core";
 import { repeat as repeat2 } from "lit/directives/repeat.js";
-var WarpToastContainer = class extends WarpElement14 {
+var WarpToastContainer = class extends WarpElement17 {
   constructor() {
     super();
     this._toasts = /* @__PURE__ */ new Map();
@@ -5431,13 +5945,13 @@ var WarpToastContainer = class extends WarpElement14 {
     return result;
   }
   render() {
-    return html22`
+    return html26`
       <aside class="${toaster.container}">
         <div class="${toaster.toaster}" id="w-toast-container-list">
           ${repeat2(
       this._toastsArray,
       (toast3) => toast3.id,
-      (toast3) => html22` <w-toast
+      (toast3) => html26` <w-toast
                 class="${toaster.content}"
                 id="${toast3.id}"
                 type="${toast3.type}"
@@ -5452,8 +5966,8 @@ var WarpToastContainer = class extends WarpElement14 {
   }
 };
 __publicField(WarpToastContainer, "styles", [
-  WarpElement14.styles,
-  css7`
+  WarpElement17.styles,
+  css8`
       :host {
         display: block;
       }
@@ -5467,13 +5981,13 @@ if (!customElements.get("w-toast-container")) {
 }
 
 // packages/toast/toast.js
-import { css as css8, html as html23 } from "lit";
-import WarpElement15 from "@warp-ds/elements-core";
+import { css as css9, html as html27 } from "lit";
+import WarpElement18 from "@warp-ds/elements-core";
 
 // node_modules/.pnpm/element-collapse@1.1.0/node_modules/element-collapse/index.js
-var windowExists2 = typeof window !== "undefined";
+var windowExists3 = typeof window !== "undefined";
 var prefersMotion = true;
-if (windowExists2) {
+if (windowExists3) {
   const query = window.matchMedia("(prefers-reduced-motion: reduce)");
   const callback = ({ matches }) => prefersMotion = !matches;
   if (query.addEventListener)
@@ -5504,15 +6018,15 @@ var getAfterCollapseCallback = (done) => () => {
 var expand = (el, done) => {
   const returnPromise = (() => {
     if (!done)
-      return new Promise((r2) => {
-        done = r2;
+      return new Promise((r3) => {
+        done = r3;
       });
   })();
   const afterExpandCallback = getAfterExpandCallback(el, done);
   removeTransition(el);
   el.style.height = "auto";
   let dest = el.scrollHeight;
-  windowExists2 && requestAnimationFrame(() => {
+  windowExists3 && requestAnimationFrame(() => {
     el.addEventListener("transitionend", afterExpandCallback, { once: true });
     el.style.height = "0px";
     el.style.transitionTimingFunction = "ease-out";
@@ -5525,14 +6039,14 @@ var expand = (el, done) => {
 var collapse = (el, done) => {
   const returnPromise = (() => {
     if (!done)
-      return new Promise((r2) => {
-        done = r2;
+      return new Promise((r3) => {
+        done = r3;
       });
   })();
   const afterCollapseCallback = getAfterCollapseCallback(done);
   removeTransition(el);
   let original = el.scrollHeight;
-  windowExists2 && requestAnimationFrame(() => {
+  windowExists3 && requestAnimationFrame(() => {
     el.addEventListener("transitionend", afterCollapseCallback, { once: true });
     el.style.height = original + "px";
     el.style.transitionTimingFunction = "ease-in";
@@ -5548,13 +6062,13 @@ import { classMap as classMap2 } from "lit/directives/class-map.js";
 import { when as when2 } from "lit/directives/when.js";
 
 // packages/toast/locales/en/messages.mjs
-var messages40 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+var messages43 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
 
 // packages/toast/locales/fi/messages.mjs
-var messages41 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+var messages44 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
 
 // packages/toast/locales/nb/messages.mjs
-var messages42 = JSON.parse('{"toast.aria.error":"Varsel","toast.aria.successful":"Vellykket","toast.aria.warning":"Feil"}');
+var messages45 = JSON.parse('{"toast.aria.error":"Varsel","toast.aria.successful":"Vellykket","toast.aria.warning":"Feil"}');
 
 // packages/toast/toast.js
 var classes2 = (definition) => {
@@ -5571,10 +6085,10 @@ var toastType = {
   error: "error",
   warning: "warning"
 };
-var WarpToast = class extends WarpElement15 {
+var WarpToast = class extends WarpElement18 {
   constructor() {
     super();
-    activateI18n7(messages40, messages42, messages41);
+    activateI18n7(messages43, messages45, messages44);
     this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
     this.type = "success";
     this.text = "";
@@ -5643,11 +6157,11 @@ var WarpToast = class extends WarpElement15 {
   }
   get _iconMarkup() {
     if (this._warning)
-      return html23`<w-icon-warning-16></w-icon-warning-16>`;
+      return html27`<w-icon-warning-16></w-icon-warning-16>`;
     if (this._error)
-      return html23`<w-icon-error-16></w-icon-error-16>`;
+      return html27`<w-icon-error-16></w-icon-error-16>`;
     else
-      return html23`<w-icon-success-16></w-icon-success-16>`;
+      return html27`<w-icon-success-16></w-icon-success-16>`;
   }
   async collapse() {
     return new Promise((resolve) => {
@@ -5667,8 +6181,8 @@ var WarpToast = class extends WarpElement15 {
   }
   render() {
     if (!this.text)
-      return html23``;
-    return html23` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
+      return html27``;
+    return html27` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
       <div class="${this._primaryClasses}">
         <div class="${this._iconClasses}">${this._iconMarkup}</div>
         <div role="${this._role}" class="${toast.content}">
@@ -5676,7 +6190,7 @@ var WarpToast = class extends WarpElement15 {
         </div>
         ${when2(
       this.canclose === true,
-      () => html23`
+      () => html27`
             <button class="${toast.close}" @click="${this.close}">
               <w-icon-close-16></w-icon-close-16>
             </button>
@@ -5687,8 +6201,8 @@ var WarpToast = class extends WarpElement15 {
   }
 };
 __publicField(WarpToast, "styles", [
-  WarpElement15.styles,
-  css8`
+  WarpElement18.styles,
+  css9`
       :host {
         display: block;
       }
@@ -5705,10 +6219,10 @@ if (!customElements.get("w-toast")) {
 }
 
 // packages/utils/expand-transition.js
-import { css as css9, html as html24 } from "lit";
-import WarpElement16 from "@warp-ds/elements-core";
+import { css as css10, html as html28 } from "lit";
+import WarpElement19 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined7 } from "lit/directives/if-defined.js";
-var ExpandTransition = class extends WarpElement16 {
+var ExpandTransition = class extends WarpElement19 {
   constructor() {
     super();
     this.show = false;
@@ -5741,7 +6255,7 @@ var ExpandTransition = class extends WarpElement16 {
     return this != null ? this : null;
   }
   render() {
-    return html24`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>${this._removeElement ? html24`` : html24`<slot></slot>`}</div>`;
+    return html28`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>${this._removeElement ? html28`` : html28`<slot></slot>`}</div>`;
   }
 };
 __publicField(ExpandTransition, "properties", {
@@ -5752,8 +6266,8 @@ __publicField(ExpandTransition, "properties", {
   _removeElement: { type: Boolean, state: true }
 });
 __publicField(ExpandTransition, "styles", [
-  WarpElement16.styles,
-  css9`
+  WarpElement19.styles,
+  css10`
       :host {
         display: block;
       }
@@ -5764,10 +6278,10 @@ if (!customElements.get("w-expand-transition")) {
 }
 
 // packages/utils/unstyled-heading.js
-import { html as html25 } from "lit";
-import WarpElement17 from "@warp-ds/elements-core";
+import { html as html29 } from "lit";
+import WarpElement20 from "@warp-ds/elements-core";
 import { unsafeHTML as unsafeHTML2 } from "lit/directives/unsafe-html.js";
-var UnstyledHeading = class extends WarpElement17 {
+var UnstyledHeading = class extends WarpElement20 {
   get _markup() {
     return `<h${this.level}
     style="margin: 0; font-weight: unset; font-size: unset; line-height: unset;"
@@ -5777,18 +6291,20 @@ var UnstyledHeading = class extends WarpElement17 {
 `;
   }
   render() {
-    return !this.level ? html25`<slot></slot>` : unsafeHTML2(this._markup);
+    return !this.level ? html29`<slot></slot>` : unsafeHTML2(this._markup);
   }
 };
 __publicField(UnstyledHeading, "properties", {
   level: { type: Number }
 });
-__publicField(UnstyledHeading, "styles", [WarpElement17.styles]);
+__publicField(UnstyledHeading, "styles", [WarpElement20.styles]);
 if (!customElements.get("w-unstyled-heading")) {
   customElements.define("w-unstyled-heading", UnstyledHeading);
 }
 export {
   ExpandTransition,
+  CanCloseMixin as ModalCanCloseMixin,
+  ProvidesCanCloseToSlotsMixin as ModalProvidesCanCloseToSlotsMixin,
   UnstyledHeading,
   WarpAffix,
   WarpAlert,
@@ -5800,6 +6316,9 @@ export {
   WarpButton,
   WarpCard,
   WarpExpandable,
+  ModalMain as WarpModal,
+  ModalFooter as WarpModalFooter,
+  ModalHeader as WarpModalHeader,
   WarpPill,
   WarpSelect,
   WarpTextField,