@warp-ds/elements 2.0.0-next.2 → 2.0.0-next.4

package/dist/index.js

@@ -8,6 +8,9 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
@@ -52,23 +55,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 
 // node_modules/.pnpm/unraw@3.0.0/node_modules/unraw/dist/errors.js
 var require_errors = __commonJS({
@@ -241,8 +231,7 @@ var require_moo = __commonJS({
         return "(" + s + ")";
       }
       function reUnion(regexps) {
-        if (!regexps.length)
-          return "(?!)";
+        if (!regexps.length) return "(?!)";
         var source = regexps.map(function(s) {
           return "(?:" + s + ")";
         }).join("|");
@@ -252,14 +241,10 @@ var require_moo = __commonJS({
         if (typeof obj === "string") {
           return "(?:" + reEscape(obj) + ")";
         } else if (isRegExp(obj)) {
-          if (obj.ignoreCase)
-            throw new Error("RegExp /i flag not allowed");
-          if (obj.global)
-            throw new Error("RegExp /g flag is implied");
-          if (obj.sticky)
-            throw new Error("RegExp /y flag is implied");
-          if (obj.multiline)
-            throw new Error("RegExp /m flag is implied");
+          if (obj.ignoreCase) throw new Error("RegExp /i flag not allowed");
+          if (obj.global) throw new Error("RegExp /g flag is implied");
+          if (obj.sticky) throw new Error("RegExp /y flag is implied");
+          if (obj.multiline) throw new Error("RegExp /m flag is implied");
           return obj.source;
         } else {
           throw new Error("Not a pattern: " + obj);
@@ -308,16 +293,14 @@ var require_moo = __commonJS({
           var match = [];
           rules.forEach(function(rule) {
             if (isObject(rule)) {
-              if (match.length)
-                result.push(ruleOptions(key, match));
+              if (match.length) result.push(ruleOptions(key, match));
               result.push(ruleOptions(key, rule));
               match = [];
             } else {
               match.push(rule);
             }
           });
-          if (match.length)
-            result.push(ruleOptions(key, match));
+          if (match.length) result.push(ruleOptions(key, match));
         }
         return result;
       }
@@ -452,8 +435,7 @@ var require_moo = __commonJS({
         var fallbackRule = errorRule && errorRule.fallback;
         var flags = hasSticky && !fallbackRule ? "ym" : "gm";
         var suffix2 = hasSticky || fallbackRule ? "" : "|";
-        if (unicodeFlag === true)
-          flags += "u";
+        if (unicodeFlag === true) flags += "u";
         var combined = new RegExp(reUnion(parts) + suffix2, flags);
         return { regexp: combined, groups, fast, error: errorRule || defaultErrorRule };
       }
@@ -474,8 +456,7 @@ var require_moo = __commonJS({
         var all = states.$all ? toRules(states.$all) : [];
         delete states.$all;
         var keys2 = Object.getOwnPropertyNames(states);
-        if (!start)
-          start = keys2[0];
+        if (!start) start = keys2[0];
         var ruleMap = /* @__PURE__ */ Object.create(null);
         for (var i2 = 0; i2 < keys2.length; i2++) {
           var key = keys2[i2];
@@ -487,8 +468,7 @@ var require_moo = __commonJS({
           var included = /* @__PURE__ */ Object.create(null);
           for (var j = 0; j < rules.length; j++) {
             var rule = rules[j];
-            if (!rule.include)
-              continue;
+            if (!rule.include) continue;
             var splice = [j, 1];
             if (rule.include !== key && !included[rule.include]) {
               included[rule.include] = true;
@@ -498,8 +478,7 @@ var require_moo = __commonJS({
               }
               for (var k = 0; k < newRules.length; k++) {
                 var newRule = newRules[k];
-                if (rules.indexOf(newRule) !== -1)
-                  continue;
+                if (rules.indexOf(newRule) !== -1) continue;
                 splice.push(newRule);
               }
             }
@@ -580,8 +559,7 @@ var require_moo = __commonJS({
         };
       };
       Lexer.prototype.setState = function(state) {
-        if (!state || this.state === state)
-          return;
+        if (!state || this.state === state) return;
         this.state = state;
         var info = this.states[state];
         this.groups = info.groups;
@@ -649,7 +627,7 @@ var require_moo = __commonJS({
         }
         return this._token(group, text, index);
       };
-      Lexer.prototype._token = function(group, text, offset2) {
+      Lexer.prototype._token = function(group, text, offset3) {
         var lineBreaks = 0;
         if (group.lineBreaks) {
           var matchNL = /\n/g;
@@ -668,7 +646,7 @@ var require_moo = __commonJS({
           value: typeof group.value === "function" ? group.value(text) : text,
           text,
           toString: tokenToString,
-          offset: offset2,
+          offset: offset3,
           lineBreaks,
           line: this.line,
           col: this.col
@@ -685,12 +663,9 @@ var require_moo = __commonJS({
           var err = new Error(this.formatError(token, "invalid syntax"));
           throw err;
         }
-        if (group.pop)
-          this.popState();
-        else if (group.push)
-          this.pushState(group.push);
-        else if (group.next)
-          this.setState(group.next);
+        if (group.pop) this.popState();
+        else if (group.push) this.pushState(group.push);
+        else if (group.next) this.setState(group.next);
         return token;
       };
       if (typeof Symbol !== "undefined" && Symbol.iterator) {
@@ -1043,7 +1018,17 @@ var require_parser = __commonJS({
 // packages/affix/index.js
 import { html as html3 } from "lit";
 
-// node_modules/.pnpm/@warp-ds+css@2.0.0-next.4_@warp-ds+uno@2.0.0_unocss@0.58.5_postcss@8.4.38_rollup@4.18.0_vite@_d2fzbudswaxjysaqn4v4imsdwy/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js
+var r = function() {
+  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(" ");
+};
+
+// node_modules/.pnpm/@warp-ds+css@2.0.0_@warp-ds+uno@2.0.0_unocss@0.62.0_postcss@8.4.41_rollup@4.20.0_vite@5.3.3_@_vyiy5vwpqfzwy5hpmfkwp3zmle/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",
@@ -1061,7 +1046,7 @@ var badge = {
   positionBL: "rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0"
 };
 var box = {
-  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
+  base: "group block relative break-words last-child:mb-0 p-16 rounded-8",
   // Relative here enables w-clickable
   bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
   // We target L and R to override the default rounded-8
@@ -1070,7 +1055,7 @@ var box = {
   bordered: "border-2 s-border s-bg"
 };
 var pill = {
-  pill: "flex items-center",
+  wrapper: "flex items-center",
   button: "inline-flex items-center focusable text-xs transition-all",
   suggestion: "bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold",
   filter: "s-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted",
@@ -1081,29 +1066,29 @@ var pill = {
   a11y: "sr-only"
 };
 var card = {
-  card: "cursor-pointer overflow-hidden relative transition-all",
-  cardShadow: "group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active",
-  cardSelected: "!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active",
-  cardOutline: "absolute border-2 rounded-8 inset-0 transition-all",
-  cardOutlineUnselected: "border-transparent group-active:s-border-active",
-  cardOutlineSelected: "s-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active",
-  cardFlat: "border-2 rounded-4",
-  cardFlatUnselected: "s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",
-  cardFlatSelected: "s-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active",
+  base: "cursor-pointer overflow-hidden relative transition-all",
+  shadow: "group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active",
+  selected: "!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active",
+  outline: "absolute border-2 rounded-8 inset-0 transition-all",
+  outlineUnselected: "border-transparent group-active:s-border-active",
+  outlineSelected: "s-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active",
+  flat: "border-2 rounded-4",
+  flatUnselected: "s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",
+  flatSelected: "s-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active",
   a11y: "sr-only"
 };
 var toaster = {
-  container: "fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none",
-  content: "w-full",
-  toaster: "grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none"
+  wrapper: "fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none",
+  base: "grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none",
+  content: "w-full"
 };
 var toast = {
   wrapper: "relative overflow-hidden w-full",
-  toast: "flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all",
+  base: "flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all",
   positive: "s-bg-positive-subtle s-border-positive-subtle s-text",
   warning: "s-bg-warning-subtle s-border-warning-subtle s-text",
   negative: "s-bg-negative-subtle s-border-negative-subtle s-text",
-  icon: "shrink-0 rounded-full w-[16px] h-[16px] m-[8px]",
+  iconBase: "shrink-0 rounded-full w-[16px] h-[16px] m-[8px]",
   iconPositive: "s-icon-positive",
   iconWarning: "s-icon-warning",
   iconNegative: "s-icon-negative",
@@ -1111,30 +1096,27 @@ var toast = {
   content: "self-center mr-8 py-4 last-child:mb-0",
   close: "bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active"
 };
-var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
 var expandable = {
-  expandable: "will-change-height",
-  expandableTitle: "font-bold s-text",
-  expandableBox: "s-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 " + box.box,
-  expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
-  expandableBleed: box.bleed,
+  wrapper: "will-change-height s-text",
+  box: "s-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8",
+  bleed: "-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8",
   chevron: "inline-block align-middle s-icon",
   chevronNonBox: "ml-8",
-  chevronBox: "",
   chevronTransform: "transform transition-transform transform-gpu ease-in-out",
   chevronExpand: "-rotate-180",
   chevronCollapse: "rotate-180",
-  elementsTransformChevronDownPart: "part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",
-  elementsChevronDownExpandPart: "part-[w-icon-chevron-down-16-part]:-rotate-180",
-  elementsTransformChevronUpPart: "part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",
-  elementsChevronUpCollapsePart: "part-[w-icon-chevron-up-16-part]:rotate-180",
+  // These are web component specific classes, using the ::part-selector:
+  elementsChevronDownTransform: "part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",
+  elementsChevronUpTransform: "part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",
+  elementsChevronExpand: "part-[w-icon-chevron-down-16-part]:-rotate-180",
+  elementsChevronCollapse: "part-[w-icon-chevron-up-16-part]:rotate-180",
   expansion: "overflow-hidden",
   expansionNotExpanded: "h-0 invisible",
-  button: buttonReset + " hover:underline focus-visible:underline",
-  buttonBox: "w-full text-left relative inline-flex items-center justify-between " + box.box,
-  paddingTop: "pt-0",
+  button: "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline",
+  buttonBox: "w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8",
+  contentWithTitle: "pt-0",
   title: "flex w-full justify-between items-center",
-  titleType: "h4"
+  titleType: "t4"
 };
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
@@ -1253,7 +1235,7 @@ var button = {
 };
 var modal = {
   backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]",
-  modal: "pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
+  base: "pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
   content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
   footer: "flex justify-end shrink-0 px-16 sm:px-32",
   transitionTitle: "transition-all duration-300",
@@ -1285,7 +1267,7 @@ var modalElement = {
   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",
+  wrapper: "flex p-16 border border-l-4 rounded-4 s-text",
   willChangeHeight: "will-change-height",
   textWrapper: "last-child:mb-0 text-s",
   title: "text-s",
@@ -1320,33 +1302,34 @@ var input = {
   textArea: "min-h-[42] sm:min-h-[45]"
 };
 var select = {
-  default: "block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current",
-  disabled: "s-bg-disabled-subtle s-border-disabled hover:s-border-disabled! active:s-border-disabled! s-text-disabled pointer-events-none",
-  invalid: "s-border-negative hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!",
-  readOnly: "pl-0 bg-transparent border-0 pointer-events-none before:hidden",
+  base: "block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current",
+  default: "s-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active",
+  disabled: "s-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none",
+  invalid: "s-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!",
+  readOnly: "s-text bg-transparent pl-0 border-0 pointer-events-none before:hidden",
   wrapper: "relative",
   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 s-icon pointer-events-none cursor-pointer",
+  chevron: "block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",
   chevronDisabled: "opacity-25"
 };
 var label = {
-  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
+  base: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
   optional: "pl-8 font-normal text-s s-text-subtle"
 };
 var helpText = {
-  helpText: "text-xs mt-4 block",
-  helpTextColor: "s-text-subtle",
-  helpTextColorInvalid: "s-text-negative"
+  base: "text-xs mt-4 block",
+  color: "s-text-subtle",
+  colorInvalid: "s-text-negative"
 };
-var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
+var prefixSuffixWrapper = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
 var suffix = {
-  wrapper: prefixSuffixWrapperBase + "right-0",
+  wrapper: prefixSuffixWrapper + "right-0",
   wrapperWithLabel: "w-max pr-12",
   wrapperWithIcon: "w-40",
   label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
 };
 var prefix = {
-  wrapper: prefixSuffixWrapperBase + "left-0",
+  wrapper: prefixSuffixWrapper + "left-0",
   wrapperWithLabel: "w-max pl-12",
   wrapperWithIcon: "w-40",
   label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
@@ -1410,15 +1393,9 @@ var deadToggle = {
   wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
   input: `${toggle.input} hidden`,
   inputVue: "hidden",
+  labelVue: "-mt-2",
   labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
-  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
-  labelVue: "-mt-2"
-};
-var clickable = {
-  toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
-  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
-  buttonOrLink: "bg-transparent focusable",
-  buttonOrLinkStretch: "inset-0 absolute"
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`
 };
 var attention = {
   base: "border-2 relative flex items-start",
@@ -1452,14 +1429,14 @@ 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.1/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/node_modules/@warp-ds/icons/dist/elements/search-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 
-// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
-// node_modules/.pnpm/@lingui+message-utils@4.7.1/node_modules/@lingui/message-utils/dist/compileMessage.mjs
+// node_modules/.pnpm/@lingui+message-utils@4.11.2/node_modules/@lingui/message-utils/dist/compileMessage.mjs
 var import_parser = __toESM(require_parser(), 1);
 function processTokens(tokens, mapText) {
   if (!tokens.filter((token) => token.type !== "content").length) {
@@ -1481,19 +1458,17 @@ function processTokens(tokens, mapText) {
         return [token.arg, token.key];
       }
     }
-    const offset2 = token.pluralOffset;
+    const offset3 = token.pluralOffset;
     const formatProps = {};
-    token.cases.forEach((item) => {
-      formatProps[item.key.replace(/^=(.)+/, "$1")] = processTokens(
-        item.tokens,
-        mapText
-      );
+    token.cases.forEach(({ key, tokens: tokens2 }) => {
+      const prop = key[0] === "=" ? key.slice(1) : key;
+      formatProps[prop] = processTokens(tokens2, mapText);
     });
     return [
       token.arg,
       token.type,
       __spreadValues({
-        offset: offset2
+        offset: offset3
       }, formatProps)
     ];
   });
@@ -1509,7 +1484,7 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
 var isFunction = (f2) => typeof f2 === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1535,7 +1510,7 @@ function number(locales, value, format) {
   return formatter.format(value);
 }
 function plural(locales, ordinal, value, _a) {
-  var _b = _a, { offset: offset2 = 0 } = _b, rules = __objRest(_b, ["offset"]);
+  var _b = _a, { offset: offset3 = 0 } = _b, rules = __objRest(_b, ["offset"]);
   var _a2, _b2;
   const _locales = normalizeLocales(locales);
   const plurals = ordinal ? getMemoized(
@@ -1545,7 +1520,7 @@ function plural(locales, ordinal, value, _a) {
     () => cacheKey("plural-cardinal", _locales),
     () => new Intl.PluralRules(_locales, { type: "cardinal" })
   );
-  return (_b2 = (_a2 = rules[value]) != null ? _a2 : rules[plurals.select(value - offset2)]) != null ? _b2 : rules.other;
+  return (_b2 = (_a2 = rules[value]) != null ? _a2 : rules[plurals.select(value - offset3)]) != null ? _b2 : rules.other;
 }
 function getMemoized(getKey, construct) {
   const key = getKey();
@@ -1574,14 +1549,14 @@ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
   };
   return {
     plural: (value, cases) => {
-      const { offset: offset2 = 0 } = cases;
+      const { offset: offset3 = 0 } = cases;
       const message = plural(locales, false, value, cases);
-      return replaceOctothorpe(value - offset2, message);
+      return replaceOctothorpe(value - offset3, message);
     },
     selectordinal: (value, cases) => {
-      const { offset: offset2 = 0 } = cases;
+      const { offset: offset3 = 0 } = cases;
       const message = plural(locales, true, value, cases);
-      return replaceOctothorpe(value - offset2, message);
+      return replaceOctothorpe(value - offset3, message);
     },
     select: selectFormatter,
     number: (value, format) => number(locales, value, style(format)),
@@ -1595,11 +1570,11 @@ var selectFormatter = (value, rules) => {
 function interpolate(translation, locale, locales) {
   return (values = {}, formats) => {
     const formatters = getDefaultFormats(locale, locales, formats);
-    const formatMessage = (tokens) => {
+    const formatMessage = (tokens, replaceOctothorpe = false) => {
       if (!Array.isArray(tokens))
         return tokens;
       return tokens.reduce((message, token) => {
-        if (token === "#") {
+        if (token === "#" && replaceOctothorpe) {
           return message + OCTOTHORPE_PH;
         }
         if (isString(token)) {
@@ -1610,7 +1585,10 @@ function interpolate(translation, locale, locales) {
         if (type === "plural" || type === "selectordinal" || type === "select") {
           Object.entries(format).forEach(
             ([key, value2]) => {
-              interpolatedFormat[key] = formatMessage(value2);
+              interpolatedFormat[key] = formatMessage(
+                value2,
+                type === "plural" || type === "selectordinal"
+              );
             }
           );
         } else {
@@ -1739,20 +1717,20 @@ var I18n = class extends EventEmitter {
     }
     this.emit("change");
   }
-  _load(locale, messages51) {
+  _load(locale, messages52) {
     const maybeMessages = this._messages[locale];
     if (!maybeMessages) {
-      this._messages[locale] = messages51;
+      this._messages[locale] = messages52;
     } else {
-      Object.assign(maybeMessages, messages51);
+      Object.assign(maybeMessages, messages52);
     }
   }
-  load(localeOrMessages, messages51) {
-    if (typeof localeOrMessages == "string" && typeof messages51 === "object") {
-      this._load(localeOrMessages, messages51);
+  load(localeOrMessages, messages52) {
+    if (typeof localeOrMessages == "string" && typeof messages52 === "object") {
+      this._load(localeOrMessages, messages52);
     } else {
       Object.entries(localeOrMessages).forEach(
-        ([locale, messages211]) => this._load(locale, messages211)
+        ([locale, messages213]) => this._load(locale, messages213)
       );
     }
     this.emit("change");
@@ -1760,10 +1738,10 @@ var I18n = class extends EventEmitter {
   /**
    * @param options {@link LoadAndActivateOptions}
    */
-  loadAndActivate({ locale, locales, messages: messages51 }) {
+  loadAndActivate({ locale, locales, messages: messages52 }) {
     this._locale = locale;
     this._locales = locales || void 0;
-    this._messages[this._locale] = messages51;
+    this._messages[this._locale] = messages52;
     this.emit("change");
   }
   activate(locale, locales) {
@@ -1778,6 +1756,9 @@ var I18n = class extends EventEmitter {
   }
   _(id, values, options) {
     let message = options == null ? void 0 : options.message;
+    if (!id) {
+      id = "";
+    }
     if (!isString(id)) {
       values = id.values || values;
       message = id.message;
@@ -1818,7 +1799,7 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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"}');
@@ -1907,7 +1888,7 @@ if (!customElements.get("w-icon-search-16")) {
   customElements.define("w-icon-search-16", IconSearch16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/close-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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"}');
@@ -2014,38 +1995,17 @@ function kebabCaseAttributes(constructor) {
     }
   };
 }
-function classes(defn) {
-  const classes3 = [];
-  for (const [key, value] of Object.entries(defn)) {
-    if (value)
-      classes3.push(key);
-  }
-  return classes3.join(" ");
-}
-function fclasses(definition) {
-  const defn = {};
-  for (const [key, value] of Object.entries(definition)) {
-    for (const className of key.split(" ")) {
-      defn[className] = value;
-    }
-  }
-  return classMap(defn);
-}
 function generateRandomId() {
   return `m${Math.random().toString(36).slice(2)}`;
 }
 
 // packages/affix/index.js
-var WarpAffix = class extends WarpElement {
+var WarpAffix = class extends kebabCaseAttributes(WarpElement) {
   get _classBase() {
     return this.slot === "suffix" ? suffix : prefix;
   }
   get _classes() {
-    return fclasses({
-      [this._classBase.wrapper]: true,
-      [this._classBase.wrapperWithLabel]: this.label,
-      [this._classBase.wrapperWithIcon]: !this.label
-    });
+    return r([this._classBase.wrapper, this.label ? this._classBase.wrapperWithLabel : this._classBase.wrapperWithIcon]);
   }
   get _searchButton() {
     return html3`
@@ -2081,35 +2041,22 @@ var WarpAffix = class extends WarpElement {
     return html3`${this._markup}`;
   }
 };
-__publicField(WarpAffix, "styles", [WarpElement.styles]);
 __publicField(WarpAffix, "properties", {
-  ariaLabel: { type: String, attribute: "aria-label" },
+  ariaLabel: { type: String },
   clear: { type: Boolean },
   search: { type: Boolean },
   label: { type: String }
 });
+__publicField(WarpAffix, "styles", [WarpElement.styles]);
 if (!customElements.get("w-affix")) {
   customElements.define("w-affix", WarpAffix);
 }
 
 // packages/alert/index.js
 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 = [], 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(" ");
-};
-
-// packages/alert/index.js
 import WarpElement2 from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/info-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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"}');
@@ -2200,7 +2147,7 @@ if (!customElements.get("w-icon-info-16")) {
   customElements.define("w-icon-info-16", IconInfo16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/warning-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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"}');
@@ -2291,7 +2238,7 @@ if (!customElements.get("w-icon-warning-16")) {
   customElements.define("w-icon-warning-16", IconWarning16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/error-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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"}');
@@ -2382,7 +2329,7 @@ if (!customElements.get("w-icon-error-16")) {
   customElements.define("w-icon-error-16", IconError16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/success-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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"}');
@@ -2493,17 +2440,11 @@ var WarpAlert = class extends WarpElement2 {
     }
   }
   get _wrapperClasses() {
-    return r({
-      [alert.alert]: true,
-      [alert[this.variant]]: true
-    });
+    return r([alert.wrapper, alert[this.variant]]);
   }
   get _iconClasses() {
     const activeIconClassNames = alert[`${this.variant}Icon`];
-    return r({
-      [alert.icon]: true,
-      [activeIconClassNames]: true
-    });
+    return r([alert.icon, activeIconClassNames]);
   }
   get _icon() {
     if (this.variant === variants.info) {
@@ -2517,8 +2458,7 @@ var WarpAlert = class extends WarpElement2 {
     }
     if (this.variant === variants.positive) {
       return html8`<w-icon-success-16></w-icon-success-16>`;
-    } else
-      return "";
+    } else return "";
   }
   render() {
     return html8`
@@ -2563,7 +2503,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.2/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.7/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
 var min = Math.min;
 var max = Math.max;
@@ -2634,8 +2574,7 @@ function getSideList(side2, isStart, rtl) {
   switch (side2) {
     case "top":
     case "bottom":
-      if (rtl)
-        return isStart ? rl : lr;
+      if (rtl) return isStart ? rl : lr;
       return isStart ? lr : rl;
     case "left":
     case "right":
@@ -2693,7 +2632,7 @@ function rectToClientRect(rect) {
   };
 }
 
-// node_modules/.pnpm/@floating-ui+core@1.6.2/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+// node_modules/.pnpm/@floating-ui+core@1.6.7/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -2930,14 +2869,14 @@ var arrow = (options) => ({
     const min$1 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset2 = clamp(min$1, center, max2);
-    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const offset3 = clamp(min$1, center, max2);
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset3 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
       data: __spreadValues({
-        [axis]: offset2,
-        centerOffset: center - offset2 - alignmentOffset
+        [axis]: offset3,
+        centerOffset: center - offset3 - alignmentOffset
       }, shouldAddOffset && {
         alignmentOffset
       }),
@@ -2981,10 +2920,12 @@ var flip = function(options) {
         return {};
       }
       const side2 = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== "none") {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
@@ -3021,8 +2962,16 @@ var flip = function(options) {
         if (!resetPlacement) {
           switch (fallbackStrategy) {
             case "bestFit": {
-              var _overflowsData$map$so;
-              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];
+              var _overflowsData$filter2;
+              const placement2 = (_overflowsData$filter2 = overflowsData.filter((d2) => {
+                if (hasFallbackAxisSideDirection) {
+                  const currentSideAxis = getSideAxis(d2.placement);
+                  return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  currentSideAxis === "y";
+                }
+                return true;
+              }).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$filter2[0];
               if (placement2) {
                 resetPlacement = placement2;
               }
@@ -3171,7 +3120,7 @@ var offset = function(options) {
   };
 };
 
-// node_modules/.pnpm/@floating-ui+utils@0.2.2/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+// node_modules/.pnpm/@floating-ui+utils@0.2.7/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || "").toLowerCase();
@@ -3213,9 +3162,18 @@ function isOverflowElement(element) {
 function isTableElement(element) {
   return ["table", "td", "th"].includes(getNodeName(element));
 }
-function isContainingBlock(element) {
+function isTopLayer(element) {
+  return [":popover-open", ":modal"].some((selector) => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css11 = getComputedStyle(element);
+  const css11 = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
   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) {
@@ -3223,14 +3181,15 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
     }
     currentNode = getParentNode(currentNode);
   }
   return null;
 }
 function isWebKit() {
-  if (typeof CSS === "undefined" || !CSS.supports)
-    return false;
+  if (typeof CSS === "undefined" || !CSS.supports) return false;
   return CSS.supports("-webkit-backdrop-filter", "none");
 }
 function isLastTraversableNode(node) {
@@ -3247,8 +3206,8 @@ function getNodeScroll(element) {
     };
   }
   return {
-    scrollLeft: element.pageXOffset,
-    scrollTop: element.pageYOffset
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
   };
 }
 function getParentNode(node) {
@@ -3286,12 +3245,16 @@ function getOverflowAncestors(node, list, traverseIframes) {
   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
   const win = getWindow(scrollableAncestor);
   if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
   }
   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
 
-// node_modules/.pnpm/@floating-ui+dom@1.6.3/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+// node_modules/.pnpm/@floating-ui+dom@1.6.10/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
   const css11 = getComputedStyle(element);
   let width = parseFloat(css11.width) || 0;
@@ -3385,7 +3348,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     const win = getWindow(domElement);
     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
     let currentWin = win;
-    let currentIFrame = currentWin.frameElement;
+    let currentIFrame = getFrameElement(currentWin);
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
@@ -3399,7 +3362,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       x += left;
       y2 += top;
       currentWin = getWindow(currentIFrame);
-      currentIFrame = currentWin.frameElement;
+      currentIFrame = getFrameElement(currentWin);
     }
   }
   return rectToClientRect({
@@ -3409,16 +3372,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     y: y2
   });
 }
-var topLayerSelectors = [":popover-open", ":modal"];
-function isTopLayer(floating) {
-  return topLayerSelectors.some((selector) => {
-    try {
-      return floating.matches(selector);
-    } catch (e) {
-      return false;
-    }
-  });
-}
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
     elements,
@@ -3578,7 +3531,7 @@ function getClippingRect(_ref) {
     rootBoundary,
     strategy
   } = _ref;
-  const elementClippingAncestors = boundary === "clippingAncestors" ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
   const firstClippingAncestor = clippingAncestors[0];
   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
@@ -3637,6 +3590,9 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     height: rect.height
   };
 }
+function isStaticPositioned(element) {
+  return getComputedStyle(element).position === "static";
+}
 function getTrueOffsetParent(element, polyfill) {
   if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
     return null;
@@ -3647,28 +3603,41 @@ function getTrueOffsetParent(element, polyfill) {
   return element.offsetParent;
 }
 function getOffsetParent(element, polyfill) {
-  const window2 = getWindow(element);
-  if (!isHTMLElement(element) || isTopLayer(element)) {
-    return window2;
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === "static") {
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
   }
-  if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle(offsetParent).position === "static" && !isContainingBlock(offsetParent))) {
-    return window2;
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
   }
-  return offsetParent || getContainingBlock(element) || window2;
+  return offsetParent || getContainingBlock(element) || win;
 }
 var getElementRects = async function(data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
   return {
     reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
-    floating: __spreadValues({
+    floating: {
       x: 0,
-      y: 0
-    }, await getDimensionsFn(data.floating))
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
   };
 };
 function isRTL(element) {
@@ -3686,6 +3655,7 @@ var platform = {
   isElement,
   isRTL
 };
+var offset2 = offset;
 var flip2 = flip;
 var hide2 = hide;
 var arrow2 = arrow;
@@ -3702,7 +3672,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// 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
+// node_modules/.pnpm/@warp-ds+core@1.1.5_@floating-ui+dom@1.6.10/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
 var TOP_START = "top-start";
 var TOP = "top";
 var TOP_END = "top-end";
@@ -3793,10 +3763,12 @@ async function useRecompute(state) {
   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 }),
+      offset2({ mainAxis: (_b = state == null ? void 0 : state.distance) != null ? _b : 8, crossAxis: (_c = state == null ? void 0 : state.skidding) != null ? _c : 0 }),
+      // offers flexibility over how to place the attentionEl towards its targetEl both on the x and y axis (horizontally and vertically).
       (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,
+        // checks overflow to trigger a flip. When disabled, it will ignore overflow
         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 }),
@@ -3878,18 +3850,15 @@ function detectLocale7() {
   }
 }
 var getMessages7 = (locale, enMsg, nbMsg, fiMsg, daMsg) => {
-  if (locale === "nb")
-    return nbMsg;
-  if (locale === "fi")
-    return fiMsg;
-  if (locale === "da")
-    return daMsg;
+  if (locale === "nb") return nbMsg;
+  if (locale === "fi") return fiMsg;
+  if (locale === "da") return daMsg;
   return enMsg;
 };
 var activateI18n7 = (enMessages, nbMessages, fiMessages, daMessages) => {
   const locale = detectLocale7();
-  const messages51 = getMessages7(locale, enMessages, nbMessages, fiMessages, daMessages);
-  i18n.load(locale, messages51);
+  const messages52 = getMessages7(locale, enMessages, nbMessages, fiMessages, daMessages);
+  i18n.load(locale, messages52);
   i18n.activate(locale);
 };
 
@@ -3983,11 +3952,11 @@ ${JSON.stringify(directions)}`
     return opposites[this._actualDirection];
   }
   get _arrowClasses() {
-    return classes({
-      [attention.arrowBase]: true,
-      [attention[`arrowDirection${arrowDirectionClassname(this._arrowDirection)}`]]: true,
-      [this._activeVariantClasses.arrow]: true
-    });
+    return r([
+      attention.arrowBase,
+      this._activeVariantClasses.arrow,
+      attention[`arrowDirection${arrowDirectionClassname(this._arrowDirection)}`]
+    ]);
   }
   get _arrowHtml() {
     return this.noArrow ? "" : html9`<div id="arrow" role="img" class="${this._arrowClasses}"></div>`;
@@ -4018,10 +3987,7 @@ ${JSON.stringify(directions)}`
     return messageSlot ? messageSlot.assignedNodes()[0] : null;
   }
   get _wrapperClasses() {
-    return classes({
-      [attention.base]: true,
-      [this._activeVariantClasses.wrapper]: true
-    });
+    return r([attention.base, this._activeVariantClasses.wrapper]);
   }
   get _ariaClose() {
     return i18n._({
@@ -4153,16 +4119,14 @@ ${JSON.stringify(directions)}`
     this.updateComplete.then(() => this.dispatchEvent(event));
   }
   keypressed(e) {
-    if (!this.canClose)
-      return;
+    if (!this.canClose) return;
     if (e.key === "Escape") {
       e.preventDefault();
       this.close();
     }
   }
   render() {
-    if (!this.callout && this._targetEl === void 0)
-      return html9``;
+    if (!this.callout && this._targetEl === void 0) return html9``;
     return html9`
       <div class=${ifDefined2(this.className ? this.className : void 0)}>
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html9`
@@ -4245,15 +4209,15 @@ var WarpBadge = class extends WarpElement4 {
     this.variant = "neutral";
   }
   get _class() {
-    return classes({
-      [badge.base]: true,
-      [badge[this.variant]]: true,
-      [badge.positionBase]: !!this.position,
-      [badge.positionTL]: this.position === "top-left",
-      [badge.positionTR]: this.position === "top-right",
-      [badge.positionBR]: this.position === "bottom-right",
-      [badge.positionBL]: this.position === "bottom-left"
-    });
+    return r([
+      badge.base,
+      badge[this.variant],
+      !!this.position && badge.positionBase,
+      this.position === "top-left" && badge.positionTL,
+      this.position === "top-right" && badge.positionTR,
+      this.position === "bottom-right" && badge.positionBR,
+      this.position === "bottom-left" && badge.positionBL
+    ]);
   }
   render() {
     return html10`
@@ -4281,13 +4245,13 @@ import { css as css3, html as html11, nothing as nothing2 } from "lit";
 import WarpElement5 from "@warp-ds/elements-core";
 var WarpBox = class extends WarpElement5 {
   get _class() {
-    return fclasses({
-      [box.box]: true,
-      [box.bleed]: this.bleed,
-      [box.info]: this.info,
-      [box.neutral]: this.neutral,
-      [box.bordered]: this.bordered
-    });
+    return r([
+      box.base,
+      this.bleed && box.bleed,
+      this.info && box.info,
+      this.neutral && box.neutral,
+      this.bordered && box.bordered
+    ]);
   }
   get _optOutRoleWithDefault() {
     var _a;
@@ -4330,7 +4294,7 @@ if (!customElements.get("w-box")) {
 // packages/breadcrumbs/index.js
 import { html as html12 } from "lit";
 
-// node_modules/.pnpm/@warp-ds+core@1.1.2_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
+// node_modules/.pnpm/@warp-ds+core@1.1.5_@floating-ui+dom@1.6.10/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
 function interleave(array, separator2) {
   return array.flatMap((el) => [el, separator2]).slice(0, -1);
 }
@@ -4435,11 +4399,11 @@ var WarpBroadcast = class extends WarpElement7 {
     this._hiddenMessageIds = [.../* @__PURE__ */ new Set([...this._hiddenMessageIds, id])];
   }
   render() {
-    const messages51 = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
+    const messages52 = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
     return html13`
-      <aside class=${`${messages51.length === 0 ? "hidden" : "mb-16"}`}>
+      <aside class=${`${messages52.length === 0 ? "hidden" : "mb-16"}`}>
         ${repeat(
-      messages51,
+      messages52,
       ({ id }) => `broadcast-${id}`,
       ({ id, message }) => html13`<w-toast id="broadcast-${id}" type="warning" text="${message}" canclose @close=${() => this._del(id)}> </w-toast>`
     )}
@@ -4451,8 +4415,7 @@ __publicField(WarpBroadcast, "properties", {
   _messages: {
     state: true,
     hasChanged(newVal, oldVal) {
-      if (!oldVal || oldVal.length === 0)
-        return true;
+      if (!oldVal || oldVal.length === 0) return true;
       const newIds = newVal.map(({ id }) => id).sort();
       const oldIds = oldVal.map(({ id }) => id).sort();
       return JSON.stringify(newIds) !== JSON.stringify(oldIds);
@@ -4514,59 +4477,66 @@ ${buttonTypes2.join(", ")}.`);
       setTimeout(() => this.focus(), 0);
     }
   }
+  get _primaryClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.primary,
+      this.small && !this.quiet && !this.loading && button.primarySmall,
+      this.small && this.quiet && !this.loading && button.primarySmallQuiet,
+      this.small && this.loading && (this.quiet ? button.primarySmallQuietLoading : button.primarySmallLoading),
+      !this.small && this.quiet && !this.loading && button.primaryQuiet,
+      !this.small && this.loading && (this.quiet ? button.primaryQuietLoading : button.primaryLoading)
+    ];
+  }
+  get _secondaryClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.secondary,
+      this.small && !this.quiet && !this.loading && button.secondarySmall,
+      this.small && this.loading && (this.quiet ? button.secondarySmallQuietLoading : button.secondarySmallLoading),
+      this.small && this.quiet && !this.loading && button.secondarySmallQuiet,
+      !this.small && this.quiet && !this.loading && button.secondaryQuiet,
+      !this.small && this.loading && (this.quiet ? button.secondaryQuietLoading : button.secondaryLoading)
+    ];
+  }
+  get _utilityClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.utility,
+      this.small && !this.quiet && !this.loading && button.utilitySmall,
+      this.small && this.quiet && !this.loading && button.utilitySmallQuiet,
+      this.small && this.loading && (this.quiet ? button.utilitySmallQuietLoading : button.utilitySmallLoading),
+      !this.small && this.quiet && !this.loading && button.utilityQuiet,
+      !this.small && this.loading && (this.quiet ? button.utilityQuietLoading : button.utilityLoading)
+    ];
+  }
+  get _negativeClasses() {
+    return [
+      !this.small && !this.quiet && !this.loading && button.negative,
+      this.small && !this.quiet && !this.loading && button.negativeSmall,
+      this.small && this.quiet && !this.loading && button.negativeSmallQuiet,
+      this.small && this.loading && (this.quiet ? button.negativeSmallQuietLoading : button.negativeSmallLoading),
+      !this.small && this.quiet && !this.loading && button.negativeQuiet,
+      !this.small && this.loading && (this.quiet ? button.negativeQuietLoading : button.negativeLoading)
+    ];
+  }
+  get _pillClasses() {
+    return [
+      !this.loading && (this.small ? button.pillSmall : button.pill),
+      this.loading && (this.small ? button.pillSmallLoading : button.pillLoading)
+    ];
+  }
+  get _linkClasses() {
+    return [this.small ? button.linkSmall : button.link];
+  }
   get _classes() {
-    const primary = this.variant === "primary";
-    const secondary = this.variant === "secondary";
-    const negative = this.variant === "negative";
-    const utility = this.variant === "utility";
-    const pill2 = this.variant === "pill";
-    const link = this.variant === "link";
-    return r(
-      {
-        [button.secondary]: secondary && !this.small && !this.quiet && !this.loading,
-        [button.secondarySmall]: secondary && this.small && !this.quiet && !this.loading,
-        [button.secondarySmallLoading]: secondary && this.small && !this.quiet && this.loading,
-        [button.secondarySmallQuiet]: secondary && this.small && this.quiet && !this.loading,
-        [button.secondarySmallQuietLoading]: secondary && this.small && this.quiet && this.loading,
-        [button.secondaryQuiet]: secondary && !this.small && this.quiet && !this.loading,
-        [button.secondaryQuietLoading]: secondary && !this.small && this.quiet && this.loading,
-        [button.secondaryLoading]: secondary && !this.small && !this.quiet && this.loading,
-        [button.primary]: primary && !this.small && !this.quiet && !this.loading,
-        [button.primarySmall]: primary && this.small && !this.quiet && !this.loading,
-        [button.primarySmallQuiet]: primary && this.small && this.quiet && !this.loading,
-        [button.primarySmallLoading]: primary && this.small && !this.quiet && this.loading,
-        [button.primarySmallQuietLoading]: primary && this.small && this.quiet && this.loading,
-        [button.primaryQuiet]: primary && !this.small && this.quiet && !this.loading,
-        [button.primaryQuietLoading]: primary && !this.small && this.quiet && this.loading,
-        [button.primaryLoading]: primary && !this.small && !this.quiet && this.loading,
-        [button.utility]: utility && !this.small && !this.quiet && !this.loading,
-        [button.utilitySmall]: utility && this.small && !this.quiet && !this.loading,
-        [button.utilitySmallQuiet]: utility && this.small && this.quiet && !this.loading,
-        [button.utilitySmallLoading]: utility && this.small && !this.quiet && this.loading,
-        [button.utilitySmallQuietLoading]: utility && this.small && this.quiet && this.loading,
-        [button.utilityQuiet]: utility && !this.small && this.quiet && !this.loading,
-        [button.utilityQuietLoading]: utility && !this.small && this.quiet && this.loading,
-        [button.utilityLoading]: utility && !this.small && !this.quiet && this.loading,
-        [button.negative]: negative && !this.small && !this.quiet && !this.loading,
-        [button.negativeSmall]: negative && this.small && !this.quiet && !this.loading,
-        [button.negativeSmallQuiet]: negative && this.small && this.quiet && !this.loading,
-        [button.negativeSmallLoading]: negative && this.small && !this.quiet && this.loading,
-        [button.negativeSmallQuietLoading]: negative && this.small && this.quiet && this.loading,
-        [button.negativeQuiet]: negative && !this.small && this.quiet && !this.loading,
-        [button.negativeQuietLoading]: negative && !this.small && this.quiet && this.loading,
-        [button.negativeLoading]: negative && !this.small && !this.quiet && this.loading,
-        [button.pill]: pill2 && !this.small && !this.loading,
-        [button.pillSmall]: pill2 && this.small && !this.loading,
-        [button.pillLoading]: pill2 && !this.small && this.loading,
-        [button.pillSmallLoading]: pill2 && this.small && this.loading,
-        [button.link]: link && !this.small,
-        [button.linkSmall]: link && this.small,
-        [button.linkAsButton]: !!this.href,
-        [button.fullWidth]: this.fullWidth,
-        [button.contentWidth]: !this.fullWidth
-      },
-      this.buttonClass
-    );
+    return r(this.buttonClass, [
+      this.variant === "primary" && this._primaryClasses,
+      this.variant === "secondary" && this._secondaryClasses,
+      this.variant === "utility" && this._utilityClasses,
+      this.variant === "negative" && this._negativeClasses,
+      this.variant === "pill" && this._pillClasses,
+      this.variant === "link" && this._linkClasses,
+      this.href && button.linkAsButton,
+      this.fullWidth ? button.fullWidth : button.contentWidth
+    ]);
   }
   render() {
     return html14` ${this.href ? html14`<a
@@ -4606,6 +4576,20 @@ if (!customElements.get("w-button")) {
 import { html as html15, css as css4 } from "lit";
 import WarpElement9 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
+
+// packages/card/locales/da/messages.mjs
+var messages21 = JSON.parse('{"card.button.text":"V\xE6lg"}');
+
+// packages/card/locales/en/messages.mjs
+var messages27 = JSON.parse('{"card.button.text":"Select"}');
+
+// packages/card/locales/fi/messages.mjs
+var messages28 = JSON.parse('{"card.button.text":"Valitse"}');
+
+// packages/card/locales/nb/messages.mjs
+var messages29 = JSON.parse('{"card.button.text":"Velg"}');
+
+// packages/card/index.js
 var keys = {
   ENTER: "Enter",
   SPACE: " "
@@ -4613,34 +4597,34 @@ var keys = {
 var WarpCard = class extends WarpElement9 {
   constructor() {
     super();
+    activateI18n7(messages27, messages29, messages28, messages21);
     this.selected = false;
     this.flat = false;
     this.clickable = false;
+    this.buttonText = i18n._({
+      id: "card.button.text",
+      message: "Select",
+      comment: "Screenreader message to indicate that the card is clickable"
+    });
   }
   get _containerClasses() {
-    return fclasses({
-      [card.card]: true,
-      [card.cardShadow]: !this.flat,
-      [card.cardSelected]: !this.flat && this.selected,
-      [card.cardFlat]: this.flat,
-      [this.selected ? card.cardFlatSelected : card.cardFlatUnselected]: this.flat
-    });
+    return r([
+      card.base,
+      this.flat ? card.flat : card.shadow,
+      this.selected && !this.flat && card.selected,
+      this.selected && this.flat ? card.flatSelected : card.flatUnselected
+    ]);
   }
   get _outlineClasses() {
-    return fclasses({
-      [card.cardOutline]: true,
-      [this.selected ? card.cardOutlineSelected : card.cardOutlineUnselected]: true
-    });
-  }
-  get uuButton() {
-    return html15`<button class="${card.a11y}" aria-pressed="${this.selected}" tabindex="-1">Velg</button>`;
+    return r([card.outline, this.selected ? card.outlineSelected : card.outlineUnselected]);
   }
-  get uuSpan() {
-    return html15`<span role="checkbox" aria-checked="true" aria-disabled="true"></span>`;
+  get _interactiveElement() {
+    const renderButton = () => html15`<button class="${card.a11y}" aria-pressed="${this.selected}" tabindex="-1">${this.buttonText}</button>`;
+    const renderSpan = () => html15`<span role="checkbox" aria-checked="true" aria-disabled="true"></span>`;
+    return this.clickable ? renderButton() : this.selected ? renderSpan() : "";
   }
   keypressed(e) {
-    if (!this.clickable || e.altKey || e.ctrlKey)
-      return;
+    if (!this.clickable || e.altKey || e.ctrlKey) return;
     if (e.key === keys.ENTER || e.key === keys.SPACE) {
       e.preventDefault();
       this.click();
@@ -4649,13 +4633,17 @@ var WarpCard = class extends WarpElement9 {
   render() {
     return html15`
       <div tabindex=${ifDefined3(this.clickable ? "0" : void 0)} class="${this._containerClasses}" @keydown=${this.keypressed}>
-        ${this.clickable ? this.uuButton : ""} ${!this.clickable && this.selected ? this.uuSpan : ""}
-        <div class="${this._outlineClasses}"></div>
+        ${this._interactiveElement} ${this.flat ? "" : html15`<div class="${this._outlineClasses}"></div>`}
         <slot></slot>
       </div>
     `;
   }
 };
+__publicField(WarpCard, "properties", {
+  selected: { type: Boolean, reflect: true },
+  flat: { type: Boolean },
+  clickable: { type: Boolean }
+});
 __publicField(WarpCard, "styles", [
   WarpElement9.styles,
   css4`
@@ -4672,11 +4660,6 @@ __publicField(WarpCard, "styles", [
       }
     `
 ]);
-__publicField(WarpCard, "properties", {
-  selected: { type: Boolean, reflect: true },
-  flat: { type: Boolean },
-  clickable: { type: Boolean }
-});
 if (!customElements.get("w-card")) {
   customElements.define("w-card", WarpCard);
 }
@@ -4686,11 +4669,11 @@ 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.1/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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 messages21 = JSON.parse('{"icon.title.chevron-down":"Nedoverpil"}');
-var messages27 = JSON.parse('{"icon.title.chevron-down":"Downward arrow"}');
+var messages30 = JSON.parse('{"icon.title.chevron-down":"Nedoverpil"}');
+var messages210 = JSON.parse('{"icon.title.chevron-down":"Downward arrow"}');
 var messages37 = JSON.parse('{"icon.title.chevron-down":"Nuoli alasp\xE4in"}');
 var supportedLocales8 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale9 = "en";
@@ -4766,7 +4749,7 @@ var activateI18n8 = (enMessages, nbMessages, fiMessages) => {
   i18n.load(locale, messages410);
   i18n.activate(locale);
 };
-activateI18n8(messages27, messages21, messages37);
+activateI18n8(messages210, messages30, messages37);
 var IconChevronDown16 = class extends LitElement7 {
   render() {
     const title = i18n.t({ message: `Downward arrow`, id: "icon.title.chevron-down", comment: "Title for chevron-down icon" });
@@ -4777,11 +4760,11 @@ if (!customElements.get("w-icon-chevron-down-16")) {
   customElements.define("w-icon-chevron-down-16", IconChevronDown16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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 messages28 = JSON.parse('{"icon.title.chevron-up":"Oppoverpil"}');
-var messages29 = JSON.parse('{"icon.title.chevron-up":"Upward arrow"}');
+var messages31 = JSON.parse('{"icon.title.chevron-up":"Oppoverpil"}');
+var messages211 = JSON.parse('{"icon.title.chevron-up":"Upward arrow"}');
 var messages38 = JSON.parse('{"icon.title.chevron-up":"Nuoli yl\xF6sp\xE4in"}');
 var supportedLocales9 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale10 = "en";
@@ -4857,7 +4840,7 @@ var activateI18n9 = (enMessages, nbMessages, fiMessages) => {
   i18n.load(locale, messages410);
   i18n.activate(locale);
 };
-activateI18n9(messages29, messages28, messages38);
+activateI18n9(messages211, messages31, messages38);
 var IconChevronUp16 = class extends LitElement8 {
   render() {
     const title = i18n.t({ message: `Upward arrow`, id: "icon.title.chevron-up", comment: "Title for chevron-up icon" });
@@ -4869,12 +4852,13 @@ if (!customElements.get("w-icon-chevron-up-16")) {
 }
 
 // packages/expandable/index.js
+var _WarpExpandable_instances, wrapperClasses_get, buttonClasses_get, chevronClasses_get, chevronIcon_get, contentClasses_get, expansionClasses_get;
 var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
   constructor() {
     super();
+    __privateAdd(this, _WarpExpandable_instances);
     this.expanded = false;
     this.animated = false;
-    this.info = false;
     this.box = false;
     this.bleed = false;
     this.noChevron = false;
@@ -4892,72 +4876,60 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
     this._hasTitle = !!this.title || this.renderRoot.querySelector("slot[name='title']").assignedNodes().length > 0;
   }
   get _expandableSlot() {
-    return html18`<div
-      class=${fclasses({
-      [this.contentClass || ""]: true,
-      [box.box]: this.box,
-      [expandable.paddingTop]: this._hasTitle && this.box
-    })}>
+    return html18`<div class="${__privateGet(this, _WarpExpandable_instances, contentClasses_get)}">
       <slot></slot>
     </div>`;
   }
-  get _chevronUpClasses() {
-    return fclasses({
-      [expandable.elementsTransformChevronUpPart]: true,
-      [expandable.elementsChevronUpCollapsePart]: !this.expanded && this._showChevronUp
-    });
-  }
-  get _chevronDownClasses() {
-    return fclasses({
-      [expandable.elementsTransformChevronDownPart]: true,
-      [expandable.elementsChevronDownExpandPart]: this.expanded && !this._showChevronUp
-    });
-  }
   render() {
-    return html18` <div
-      class=${fclasses({
-      [expandable.expandable]: true,
-      [expandable.expandableBox]: this.box,
-      [expandable.expandableBleed]: this.bleed
-    })}>
+    return html18` <div class="${__privateGet(this, _WarpExpandable_instances, wrapperClasses_get)}">
       ${this._hasTitle ? html18`<w-unstyled-heading level=${this.headingLevel}>
             <button
               type="button"
               aria-expanded="${this.expanded}"
-              class=${fclasses({
-      [this.buttonClass || ""]: true,
-      [expandable.button]: true,
-      [expandable.buttonBox]: this.box
-    })}
+              class="${__privateGet(this, _WarpExpandable_instances, buttonClasses_get)}"
               @click=${() => this.expanded = !this.expanded}>
               <div class="${expandable.title}">
                 ${this.title ? html18`<span class="${expandable.titleType}">${this.title}</span>` : html18`<slot name="title"></slot>`}
-                ${this.noChevron ? "" : html18`<div
-                      class=${fclasses({
-      [expandable.chevron]: true,
-      [expandable.chevronBox]: this.box,
-      [expandable.chevronNonBox]: !this.box
-    })}>
-                      ${this._showChevronUp ? html18`<w-icon-chevron-up-16 class="${this._chevronUpClasses}"></w-icon-chevron-up-16>` : html18`<w-icon-chevron-down-16 class="${this._chevronDownClasses}"></w-icon-chevron-down-16>`}
-                    </div>`}
+                ${this.noChevron ? "" : html18`<div class="${__privateGet(this, _WarpExpandable_instances, chevronClasses_get)}">${__privateGet(this, _WarpExpandable_instances, chevronIcon_get)}</div>`}
               </div>
             </button>
           </w-unstyled-heading>` : ""}
-      ${this.animated ? html18`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>` : html18`<div
-            class=${fclasses({
-      [expandable.expansion]: true,
-      [expandable.expansionNotExpanded]: !this.expanded
-    })}
-            aria-hidden=${ifDefined4(!this.expanded ? true : void 0)}>
+      ${this.animated ? html18`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>` : html18`<div class="${__privateGet(this, _WarpExpandable_instances, expansionClasses_get)}" aria-hidden=${ifDefined4(!this.expanded ? true : void 0)}>
             ${this._expandableSlot}
           </div>`}
     </div>`;
   }
 };
+_WarpExpandable_instances = new WeakSet();
+wrapperClasses_get = function() {
+  return r([expandable.wrapper, this.box && expandable.box, this.bleed && expandable.bleed]);
+};
+buttonClasses_get = function() {
+  return r(this.buttonClass, [expandable.button, this.box && expandable.buttonBox]);
+};
+chevronClasses_get = function() {
+  return r([expandable.chevron, !this.box && expandable.chevronNonBox]);
+};
+chevronIcon_get = function() {
+  const upClasses = r([
+    expandable.elementsChevronUpTransform,
+    !this.expanded && this._showChevronUp && expandable.elementsChevronCollapse
+  ]);
+  const downClasses = r([
+    expandable.elementsChevronDownTransform,
+    this.expanded && !this._showChevronUp && expandable.elementsChevronExpand
+  ]);
+  return this._showChevronUp ? html18`<w-icon-chevron-up-16 class="${upClasses}"></w-icon-chevron-up-16>` : html18`<w-icon-chevron-down-16 class="${downClasses}"></w-icon-chevron-down-16>`;
+};
+contentClasses_get = function() {
+  return r(this.contentClass, [this.box && box.base, this._hasTitle && this.box && expandable.contentWithTitle]);
+};
+expansionClasses_get = function() {
+  return r([expandable.expansion, !this.expanded && expandable.expansionNotExpanded]);
+};
 __publicField(WarpExpandable, "properties", {
   expanded: { type: Boolean, reflect: true },
   title: { type: String },
-  info: { type: Boolean },
   box: { type: Boolean },
   bleed: { type: Boolean },
   buttonClass: { type: String },
@@ -5049,8 +5021,7 @@ 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);
+  if (query.addEventListener) query.addEventListener("change", callback);
   callback(query);
 }
 
@@ -5081,8 +5052,7 @@ var Move = class {
   }
   async play() {
     this.last = this.el.getBoundingClientRect();
-    if (!this.el.animate)
-      return;
+    if (!this.el.animate) return;
     const animation = this.el.animate(this.keyframes, this.animationOptions);
     await animation.finished;
   }
@@ -5096,20 +5066,18 @@ var Move = class {
     return __spreadValues(__spreadValues({}, this.defaults), this.userAnimationOptions);
   }
   get animationOptions() {
-    if (!this.shouldReduceMotion)
-      return this.mergedOptions;
-    if (!reduceMotion)
-      return this.mergedOptions;
+    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
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/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 messages30 = JSON.parse('{"icon.title.arrow-left":"Pil som peker mot venstre"}');
-var messages210 = JSON.parse('{"icon.title.arrow-left":"Leftward-pointing arrow"}');
-var messages39 = JSON.parse('{"icon.title.arrow-left":"Vasemmalle osoittava nuoli"}');
+var messages39 = JSON.parse('{"icon.title.arrow-left":"Pil som peker mot venstre"}');
+var messages212 = JSON.parse('{"icon.title.arrow-left":"Leftward-pointing arrow"}');
+var messages310 = JSON.parse('{"icon.title.arrow-left":"Vasemmalle osoittava nuoli"}');
 var supportedLocales10 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale11 = "en";
 var detectByBrand9 = () => {
@@ -5184,7 +5152,7 @@ var activateI18n10 = (enMessages, nbMessages, fiMessages) => {
   i18n.load(locale, messages410);
   i18n.activate(locale);
 };
-activateI18n10(messages210, messages30, messages39);
+activateI18n10(messages212, messages39, messages310);
 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" });
@@ -5238,8 +5206,7 @@ var ModalHeader = class extends CanCloseMixin(WarpElement12) {
         </button>` : nothing3;
   }
   get closeButton() {
-    if (this[NO_CLOSE_BUTTON])
-      return nothing3;
+    if (this[NO_CLOSE_BUTTON]) return nothing3;
     return html21` <button
       type="button"
       class="${modalElement.headerButton} ${this._hasTopContent ? modalElement.headerCloseButtonOnImage : modalElement.headerCloseButton}"
@@ -5376,13 +5343,11 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
     `;
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("show"))
-      this[this.show ? "open" : "close"]();
+    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);
+    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);
@@ -5393,8 +5358,7 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
   }
   /** @param {MouseEvent} evt */
   closeOnBackdropClick(evt) {
-    if (this.dialogEl.value === evt.target)
-      this.close();
+    if (this.dialogEl.value === evt.target) this.close();
   }
   /** @param {KeyboardEvent} evt */
   interceptEscape(evt) {
@@ -5404,10 +5368,8 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
     }
   }
   modifyBorderRadius() {
-    if (this.dialogInnerEl.value.scrollHeight * 1.02 > innerHeight)
-      this.dialogInnerEl.value.style.borderRadius = "0px";
-    else
-      this.dialogInnerEl.value.style.borderRadius = null;
+    if (this.dialogInnerEl.value.scrollHeight * 1.02 > innerHeight) this.dialogInnerEl.value.style.borderRadius = "0px";
+    else this.dialogInnerEl.value.style.borderRadius = null;
   }
 };
 __publicField(ModalMain, "properties", {
@@ -5490,22 +5452,22 @@ import { html as html23 } from "lit";
 import WarpElement14 from "@warp-ds/elements-core";
 
 // packages/pill/locales/da/messages.mjs
-var messages31 = JSON.parse('{"pill.aria.openFilter":"\xC5bn filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
+var messages40 = JSON.parse('{"pill.aria.openFilter":"\xC5bn filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
 
 // packages/pill/locales/en/messages.mjs
-var messages40 = JSON.parse('{"pill.aria.openFilter":"Open filter","pill.aria.removeFilter":["Remove filter ",["label"]]}');
+var messages41 = JSON.parse('{"pill.aria.openFilter":"Open filter","pill.aria.removeFilter":["Remove filter ",["label"]]}');
 
 // packages/pill/locales/fi/messages.mjs
-var messages41 = JSON.parse('{"pill.aria.openFilter":"Avaa suodatin","pill.aria.removeFilter":["Tyhjenn\xE4 suodatin ",["label"]]}');
+var messages42 = JSON.parse('{"pill.aria.openFilter":"Avaa suodatin","pill.aria.removeFilter":["Tyhjenn\xE4 suodatin ",["label"]]}');
 
 // packages/pill/locales/nb/messages.mjs
-var messages42 = JSON.parse('{"pill.aria.openFilter":"\xC5pne filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
+var messages43 = JSON.parse('{"pill.aria.openFilter":"\xC5pne filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
 
 // packages/pill/index.js
 var WarpPill = class extends kebabCaseAttributes(WarpElement14) {
   constructor() {
     super();
-    activateI18n7(messages40, messages42, messages41, messages31);
+    activateI18n7(messages41, messages43, messages42, messages40);
     this.canClose = false;
     this.suggestion = false;
     this.openFilterSrText = i18n._({
@@ -5520,19 +5482,15 @@ var WarpPill = class extends kebabCaseAttributes(WarpElement14) {
     });
   }
   get _labelClasses() {
-    return r({
-      [pill.button]: true,
-      [this.suggestion ? pill.suggestion : pill.filter]: true,
-      [pill.label]: true,
-      [this.canClose ? pill.labelWithClose : pill.labelWithoutClose]: true
-    });
+    return r([
+      pill.button,
+      pill.label,
+      this.suggestion ? pill.suggestion : pill.filter,
+      this.canClose ? pill.labelWithClose : pill.labelWithoutClose
+    ]);
   }
   get _closeClasses() {
-    return r({
-      [pill.button]: true,
-      [this.suggestion ? pill.suggestion : pill.filter]: true,
-      [pill.close]: true
-    });
+    return r([pill.button, pill.close, this.suggestion ? pill.suggestion : pill.filter]);
   }
   _onClick() {
     this.dispatchEvent(new CustomEvent("w-pill-click", { bubbles: true, composed: true }));
@@ -5542,7 +5500,7 @@ var WarpPill = class extends kebabCaseAttributes(WarpElement14) {
   }
   render() {
     return html23`
-      <div class="${pill.pill}">
+      <div class="${pill.wrapper}">
         <button type="button" class="${this._labelClasses}" @click="${this._onClick}">
           <span class="${pill.a11y}">${this.openSrLabel ? this.openSrLabel : this.openFilterSrText}</span>
           <slot></slot>
@@ -5574,35 +5532,36 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
 
 // packages/select/locales/da/messages.mjs
-var messages43 = JSON.parse('{"select.label.optional":"(valgfrit)"}');
+var messages44 = JSON.parse('{"select.label.optional":"(valgfrit)"}');
 
 // packages/select/locales/en/messages.mjs
-var messages44 = JSON.parse('{"select.label.optional":"(optional)"}');
+var messages45 = JSON.parse('{"select.label.optional":"(optional)"}');
 
 // packages/select/locales/fi/messages.mjs
-var messages45 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
+var messages46 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
 
 // packages/select/locales/nb/messages.mjs
-var messages46 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
+var messages47 = 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_instances, classes_get, helpTextClasses_get, chevronClasses_get2, id_get, helpId_get;
 var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
   constructor() {
     super();
-    __privateAdd(this, _classes);
-    __privateAdd(this, _helpTextClasses);
-    __privateAdd(this, _chevronClasses);
-    __privateAdd(this, _id);
-    __privateAdd(this, _helpId);
-    activateI18n7(messages44, messages46, messages45, messages43);
+    __privateAdd(this, _WarpSelect_instances);
+    activateI18n7(messages45, messages47, messages46, messages44);
     this._options = this.innerHTML;
   }
+  handleKeyDown(event) {
+    if (this.readOnly && (event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+    }
+  }
   render() {
     return html24`<div class="${select.wrapper}">
       ${when(
       this.label,
-      () => html24`<label class="${label.label}" for="${__privateGet(this, _id, id_get)}">
+      () => html24`<label class="${label.base}" for="${__privateGet(this, _WarpSelect_instances, id_get)}">
             ${this.label}
             ${when(
         this.optional,
@@ -5618,51 +5577,45 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
     )}
       <div class="${select.selectWrapper}">
         <select
-          class="${__privateGet(this, _classes, classes_get)}"
-          id="${__privateGet(this, _id, id_get)}"
+          class="${__privateGet(this, _WarpSelect_instances, classes_get)}"
+          id="${__privateGet(this, _WarpSelect_instances, id_get)}"
           ?autofocus=${this.autoFocus}
-          aria-describedby="${ifDefined5(__privateGet(this, _helpId, helpId_get))}"
+          ?disabled=${this.disabled}
+          aria-describedby="${ifDefined5(__privateGet(this, _WarpSelect_instances, helpId_get))}"
           aria-invalid="${ifDefined5(this.invalid)}"
-          aria-errormessage="${ifDefined5(this.invalid && __privateGet(this, _helpId, helpId_get))}">
+          aria-errormessage="${ifDefined5(this.invalid && __privateGet(this, _WarpSelect_instances, helpId_get))}"
+          @keydown=${this.handleKeyDown}>
           ${unsafeHTML(this._options)}
         </select>
-        <div class="${__privateGet(this, _chevronClasses, chevronClasses_get)}">
+        <div class="${__privateGet(this, _WarpSelect_instances, chevronClasses_get2)}">
           <w-icon-chevron-down-16></w-icon-chevron-down-16>
         </div>
       </div>
-      ${when(this.always || this.invalid, () => html24`<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, _WarpSelect_instances, helpId_get)}" class="${__privateGet(this, _WarpSelect_instances, helpTextClasses_get)}">${this.hint}</div>`)}
     </div>`;
   }
 };
-_classes = new WeakSet();
+_WarpSelect_instances = new WeakSet();
 classes_get = function() {
-  return r({
-    [select.default]: true,
-    [select.invalid]: this.invalid
-  });
+  return r([
+    select.base,
+    !this.invalid && !this.disabled && !this.readOnly && select.default,
+    this.invalid && select.invalid,
+    this.disabled && select.disabled,
+    this.readOnly && select.readOnly
+  ]);
 };
-_helpTextClasses = new WeakSet();
 helpTextClasses_get = function() {
-  return r({
-    [helpText.helpText]: true,
-    [helpText.helpTextColor]: !this.invalid,
-    [helpText.helpTextColorInvalid]: this.invalid
-  });
+  return r([helpText.base, this.invalid ? helpText.colorInvalid : helpText.color]);
 };
-_chevronClasses = new WeakSet();
-chevronClasses_get = function() {
-  return r({
-    [select.chevron]: true,
-    [select.chevronDisabled]: this.disabled
-  });
+chevronClasses_get2 = function() {
+  return r([select.chevron, this.disabled && select.chevronDisabled]);
 };
-_id = new WeakSet();
 id_get = function() {
   return "select_id";
 };
-_helpId = new WeakSet();
 helpId_get = function() {
-  return this.hint ? `${__privateGet(this, _id, id_get)}__hint` : void 0;
+  return this.hint ? `${__privateGet(this, _WarpSelect_instances, id_get)}__hint` : void 0;
 };
 __publicField(WarpSelect, "properties", {
   // Whether the element should receive focus on render
@@ -5677,6 +5630,10 @@ __publicField(WarpSelect, "properties", {
   label: { type: String, reflect: true },
   // Whether to show optional text
   optional: { type: Boolean, reflect: true },
+  // Renders the field in a disabled state.
+  disabled: { type: Boolean, reflect: true },
+  // Renders the field in a readonly state.
+  readOnly: { type: Boolean, relfect: true },
   _options: { state: true }
 });
 __publicField(WarpSelect, "styles", [WarpElement15.styles]);
@@ -5688,44 +5645,38 @@ if (!customElements.get("w-select")) {
 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 WarpElement16 {
+var WarpTextField = class extends kebabCaseAttributes(WarpElement16) {
   constructor() {
     super();
     this.type = "text";
   }
   get _inputStyles() {
-    return classes({
-      [input.base]: true,
-      [input.default]: !this.invalid && !this.disabled && !this.readOnly,
-      [input.invalid]: this.invalid && !this.disabled && !this.readOnly,
-      [input.disabled]: !this.invalid && this.disabled && !this.readOnly,
-      [input.readOnly]: !this.invalid && !this.disabled && this.readOnly,
-      [input.suffix]: this._hasSuffix,
-      [input.prefix]: this._hasPrefix
-    });
+    return r([
+      input.base,
+      this._hasSuffix && input.suffix,
+      this._hasPrefix && input.prefix,
+      !this.invalid && !this.disabled && !this.readOnly && input.default,
+      this.invalid && !this.disabled && !this.readOnly && input.invalid,
+      !this.invalid && this.disabled && !this.readOnly && input.disabled,
+      !this.invalid && !this.disabled && this.readOnly && input.readOnly
+    ]);
   }
   get _helpTextStyles() {
-    return classes({
-      [helpText.helpText]: true,
-      [helpText.helpTextColor]: !this.invalid,
-      [helpText.helpTextColorInvalid]: this.invalid
-    });
+    return r([helpText.base, this.invalid ? helpText.colorInvalid : helpText.color]);
   }
   get _label() {
     if (this.label) {
-      return html25`<label for="${this._id}" class=${label.label}>${this.label}</label>`;
+      return html25`<label for="${this._id}" class=${label.base}>${this.label}</label>`;
     }
   }
   get _helpId() {
-    if (this.helpText)
-      return `${this._id}__hint`;
+    if (this.helpText) return `${this._id}__hint`;
   }
   get _id() {
     return "textfield";
   }
   get _error() {
-    if (this.invalid && this._helpId)
-      return this._helpId;
+    if (this.invalid && this._helpId) return this._helpId;
   }
   handler(e) {
     const { name, value } = e.target;
@@ -5741,14 +5692,12 @@ var WarpTextField = class extends WarpElement16 {
   prefixSlotChange(e) {
     const el = this.renderRoot.querySelector("slot[name=prefix]");
     const affixes = el.assignedElements();
-    if (affixes.length)
-      this._hasPrefix = true;
+    if (affixes.length) this._hasPrefix = true;
   }
   suffixSlotChange(e) {
     const el = this.renderRoot.querySelector("slot[name=suffix]");
     const affixes = el.assignedElements();
-    if (affixes.length)
-      this._hasSuffix = true;
+    if (affixes.length) this._hasSuffix = true;
   }
   render() {
     return html25`
@@ -5788,16 +5737,16 @@ __publicField(WarpTextField, "properties", {
   invalid: { type: Boolean },
   id: { type: String },
   label: { type: String },
-  helpText: { type: String, attribute: "help-text" },
+  helpText: { type: String },
   size: { type: String },
   max: { type: Number },
   min: { type: Number },
-  minLength: { type: Number, attribute: "min-length" },
-  maxLength: { type: Number, attribute: "max-length" },
+  minLength: { type: Number },
+  maxLength: { type: Number },
   name: { type: String },
   pattern: { type: String },
   placeholder: { type: String },
-  readOnly: { type: Boolean, attribute: "read-only" },
+  readOnly: { type: Boolean },
   required: { type: Boolean },
   type: { type: String },
   value: { type: String },
@@ -5825,8 +5774,7 @@ if (!customElements.get("w-textfield")) {
 
 // packages/toast/api.js
 function toast2(message, options) {
-  if (!windowExists)
-    return;
+  if (!windowExists) return;
   const toast3 = customElements.get("w-toast-container").init();
   const data = __spreadValues({
     id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
@@ -5838,14 +5786,12 @@ function toast2(message, options) {
   return data;
 }
 function removeToast(id) {
-  if (!windowExists)
-    return;
+  if (!windowExists) return;
   const toast3 = customElements.get("w-toast-container").init();
   return toast3.del(id);
 }
 function updateToast(id, options) {
-  if (!windowExists)
-    return;
+  if (!windowExists) return;
   const toast3 = customElements.get("w-toast-container").init();
   toast3.set(__spreadValues(__spreadValues({}, toast3.get(id)), options));
   return toast3.get(id);
@@ -5866,10 +5812,8 @@ var WarpToastContainer = class extends WarpElement17 {
       const keep = [];
       const remove = [];
       for (const toast3 of this._toasts) {
-        if (Date.now() <= toast3[1].duration)
-          keep.push(toast3);
-        else
-          remove.push(toast3);
+        if (Date.now() <= toast3[1].duration) keep.push(toast3);
+        else remove.push(toast3);
       }
       const collapseTasks = [];
       for (const [id] of remove) {
@@ -5877,15 +5821,13 @@ var WarpToastContainer = class extends WarpElement17 {
         collapseTasks.push(el.collapse());
       }
       Promise.all(collapseTasks).then(() => {
-        if (keep.length !== this._toasts.size)
-          this._toasts = new Map(keep);
+        if (keep.length !== this._toasts.size) this._toasts = new Map(keep);
       });
     }, 500);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this._interval)
-      clearTimeout(this._interval);
+    if (this._interval) clearTimeout(this._interval);
   }
   static init() {
     let el = document.querySelector("w-toast-container");
@@ -5907,8 +5849,7 @@ var WarpToastContainer = class extends WarpElement17 {
     if (!id) {
       throw new Error('undefined "id" given when attempting to retrieve toast');
     }
-    if (typeof id !== "string" && !Number.isInteger(id))
-      throw new Error('"id" must be number or string when attempting to retrieve toast');
+    if (typeof id !== "string" && !Number.isInteger(id)) throw new Error('"id" must be number or string when attempting to retrieve toast');
     return this._toasts.get(id);
   }
   /**
@@ -5917,8 +5858,7 @@ var WarpToastContainer = class extends WarpElement17 {
    * @returns {WarpToastContainer}
    */
   set(toast3) {
-    if (!toast3.id)
-      throw new Error('invalid or undefined "id" on toast object');
+    if (!toast3.id) throw new Error('invalid or undefined "id" on toast object');
     const result = this._toasts.set(toast3.id, __spreadProps(__spreadValues({}, toast3), {
       duration: Date.now() + (toast3.duration || 5e3)
     }));
@@ -5934,11 +5874,9 @@ var WarpToastContainer = class extends WarpElement17 {
     if (!id) {
       throw new Error('undefined "id" given when attempting to retrieve toast');
     }
-    if (typeof id !== "string" && !Number.isInteger(id))
-      throw new Error('"id" must be number or string when attempting to retrieve toast');
+    if (typeof id !== "string" && !Number.isInteger(id)) throw new Error('"id" must be number or string when attempting to retrieve toast');
     const el = this.renderRoot.querySelector(`#${id}`);
-    if (!this._toasts.has(id))
-      return false;
+    if (!this._toasts.has(id)) return false;
     await el.collapse();
     const result = this._toasts.delete(id);
     this._toasts = new Map(Array.from(this._toasts));
@@ -5946,8 +5884,8 @@ var WarpToastContainer = class extends WarpElement17 {
   }
   render() {
     return html26`
-      <aside class="${toaster.container}">
-        <div class="${toaster.toaster}" id="w-toast-container-list">
+      <aside class="${toaster.wrapper}">
+        <div class="${toaster.base}" id="w-toast-container-list">
           ${repeat2(
       this._toastsArray,
       (toast3) => toast3.id,
@@ -5990,8 +5928,7 @@ var prefersMotion = true;
 if (windowExists3) {
   const query = window.matchMedia("(prefers-reduced-motion: reduce)");
   const callback = ({ matches }) => prefersMotion = !matches;
-  if (query.addEventListener)
-    query.addEventListener("change", callback);
+  if (query.addEventListener) query.addEventListener("change", callback);
   callback(query);
 }
 var removeTransition = (el) => {
@@ -6008,19 +5945,16 @@ var addTransition = (el) => {
 var getAfterExpandCallback = (el, done) => () => {
   el.style.height = "auto";
   el.style.overflow = null;
-  if (done)
-    done();
+  if (done) done();
 };
 var getAfterCollapseCallback = (done) => () => {
-  if (done)
-    done();
+  if (done) done();
 };
 var expand = (el, done) => {
   const returnPromise = (() => {
-    if (!done)
-      return new Promise((r3) => {
-        done = r3;
-      });
+    if (!done) return new Promise((r3) => {
+      done = r3;
+    });
   })();
   const afterExpandCallback = getAfterExpandCallback(el, done);
   removeTransition(el);
@@ -6033,15 +5967,13 @@ var expand = (el, done) => {
     addTransition(el);
     requestAnimationFrame(() => el.style.height = dest + "px");
   });
-  if (returnPromise)
-    return returnPromise;
+  if (returnPromise) return returnPromise;
 };
 var collapse = (el, done) => {
   const returnPromise = (() => {
-    if (!done)
-      return new Promise((r3) => {
-        done = r3;
-      });
+    if (!done) return new Promise((r3) => {
+      done = r3;
+    });
   })();
   const afterCollapseCallback = getAfterCollapseCallback(done);
   removeTransition(el);
@@ -6053,45 +5985,36 @@ var collapse = (el, done) => {
     addTransition(el);
     requestAnimationFrame(() => el.style.height = "0px");
   });
-  if (returnPromise)
-    return returnPromise;
+  if (returnPromise) return returnPromise;
 };
 
 // packages/toast/toast.js
-import { classMap as classMap2 } from "lit/directives/class-map.js";
 import { when as when2 } from "lit/directives/when.js";
 
 // packages/toast/locales/da/messages.mjs
-var messages47 = JSON.parse('{"toast.aria.error":"Fejl","toast.aria.successful":"Fuldf\xF8rt","toast.aria.warning":"Advarsel"}');
+var messages48 = JSON.parse('{"toast.aria.error":"Fejl","toast.aria.successful":"Fuldf\xF8rt","toast.aria.warning":"Advarsel"}');
 
 // packages/toast/locales/en/messages.mjs
-var messages48 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+var messages49 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
 
 // packages/toast/locales/fi/messages.mjs
-var messages49 = JSON.parse('{"toast.aria.error":"Virhe","toast.aria.successful":"Onnistui","toast.aria.warning":"Varoitus"}');
+var messages50 = JSON.parse('{"toast.aria.error":"Virhe","toast.aria.successful":"Onnistui","toast.aria.warning":"Varoitus"}');
 
 // packages/toast/locales/nb/messages.mjs
-var messages50 = JSON.parse('{"toast.aria.error":"Feil","toast.aria.successful":"Vellykket","toast.aria.warning":"Advarsel"}');
+var messages51 = JSON.parse('{"toast.aria.error":"Feil","toast.aria.successful":"Vellykket","toast.aria.warning":"Advarsel"}');
 
 // packages/toast/toast.js
-var classes2 = (definition) => {
-  const defn = {};
-  for (const [key, value] of Object.entries(definition)) {
-    for (const className of key.split(" ")) {
-      defn[className] = value;
-    }
-  }
-  return classMap2(defn);
-};
 var toastType = {
   success: "success",
   error: "error",
   warning: "warning"
 };
+var _WarpToast_instances, primaryClasses_get, iconClasses_get;
 var WarpToast = class extends WarpElement18 {
   constructor() {
     super();
-    activateI18n7(messages48, messages50, messages49, messages47);
+    __privateAdd(this, _WarpToast_instances);
+    activateI18n7(messages49, messages51, messages50, messages48);
     this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
     this.type = "success";
     this.text = "";
@@ -6104,24 +6027,7 @@ var WarpToast = class extends WarpElement18 {
     super.disconnectedCallback();
   }
   updated() {
-    if (!this._expanded && this._wrapper)
-      expand(this._wrapper, () => this._expanded = true);
-  }
-  get _primaryClasses() {
-    return classes2({
-      [toast.toast]: true,
-      [toast.positive]: this.type === toastType.success,
-      [toast.warning]: this.type === toastType.warning,
-      [toast.negative]: this.type === toastType.error
-    });
-  }
-  get _iconClasses() {
-    return classes2({
-      [toast.icon]: true,
-      [toast.iconPositive]: this.type === toastType.success,
-      [toast.iconWarning]: this.type === toastType.warning,
-      [toast.iconNegative]: this.type === toastType.error
-    });
+    if (!this._expanded && this._wrapper) expand(this._wrapper, () => this._expanded = true);
   }
   get _wrapper() {
     var _a, _b;
@@ -6159,19 +6065,14 @@ var WarpToast = class extends WarpElement18 {
     }
   }
   get _iconMarkup() {
-    if (this._warning)
-      return html27`<w-icon-warning-16></w-icon-warning-16>`;
-    if (this._error)
-      return html27`<w-icon-error-16></w-icon-error-16>`;
-    else
-      return html27`<w-icon-success-16></w-icon-success-16>`;
+    if (this._warning) return html27`<w-icon-warning-16></w-icon-warning-16>`;
+    if (this._error) return html27`<w-icon-error-16></w-icon-error-16>`;
+    else return html27`<w-icon-success-16></w-icon-success-16>`;
   }
   async collapse() {
     return new Promise((resolve) => {
-      if (this._expanded && this._wrapper)
-        collapse(this._wrapper, resolve);
-      else
-        resolve();
+      if (this._expanded && this._wrapper) collapse(this._wrapper, resolve);
+      else resolve();
     });
   }
   close() {
@@ -6183,11 +6084,10 @@ var WarpToast = class extends WarpElement18 {
     this.updateComplete.then(() => this.dispatchEvent(event));
   }
   render() {
-    if (!this.text)
-      return html27``;
+    if (!this.text) return html27``;
     return html27` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
-      <div class="${this._primaryClasses}">
-        <div class="${this._iconClasses}">${this._iconMarkup}</div>
+      <div class="${__privateGet(this, _WarpToast_instances, primaryClasses_get)}">
+        <div class="${__privateGet(this, _WarpToast_instances, iconClasses_get)}">${this._iconMarkup}</div>
         <div role="${this._role}" class="${toast.content}">
           <p>${this.text}</p>
         </div>
@@ -6203,6 +6103,23 @@ var WarpToast = class extends WarpElement18 {
     </section>`;
   }
 };
+_WarpToast_instances = new WeakSet();
+primaryClasses_get = function() {
+  return r([
+    toast.base,
+    this.type === toastType.success && toast.positive,
+    this.type === toastType.warning && toast.warning,
+    this.type === toastType.error && toast.negative
+  ]);
+};
+iconClasses_get = function() {
+  return r([
+    toast.iconBase,
+    this.type === toastType.success && toast.iconPositive,
+    this.type === toastType.warning && toast.iconWarning,
+    this.type === toastType.error && toast.iconNegative
+  ]);
+};
 __publicField(WarpToast, "styles", [
   WarpElement18.styles,
   css9`
@@ -6241,8 +6158,7 @@ var ExpandTransition = class extends WarpElement19 {
     }
   }
   updated() {
-    if (!this._wrapper)
-      return;
+    if (!this._wrapper) return;
     if (!this._mounted) {
       this._mounted = true;
       return;