@warp-ds/elements 2.0.0-next.3 → 2.0.0-next.5

package/dist/index.js

@@ -1018,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.61.3_postcss@8.4.39_rollup@4.18.1_vite@_fn7nbuinwdlc4yeboswpxt5lie/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",
@@ -1036,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
@@ -1045,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",
@@ -1056,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",
@@ -1086,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 = {
@@ -1228,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",
@@ -1260,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",
@@ -1295,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"
@@ -1385,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",
@@ -1715,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");
@@ -1736,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) {
@@ -1993,37 +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`
@@ -2059,31 +2041,19 @@ 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.2/node_modules/@warp-ds/icons/dist/elements/info-16.js
@@ -2470,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) {
@@ -2539,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.4/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;
@@ -2668,7 +2632,7 @@ function rectToClientRect(rect) {
   };
 }
 
-// node_modules/.pnpm/@floating-ui+core@1.6.4/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,
@@ -3156,7 +3120,7 @@ var offset = function(options) {
   };
 };
 
-// node_modules/.pnpm/@floating-ui+utils@0.2.4/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();
@@ -3207,19 +3171,18 @@ function isTopLayer(element) {
     }
   });
 }
-function isContainingBlock(element) {
+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) {
   let currentNode = getParentNode(element);
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isTopLayer(currentNode)) {
-      return null;
-    }
     if (isContainingBlock(currentNode)) {
       return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
     }
     currentNode = getParentNode(currentNode);
   }
@@ -3282,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.7/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;
@@ -3381,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();
@@ -3395,7 +3362,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
       x += left;
       y2 += top;
       currentWin = getWindow(currentIFrame);
-      currentIFrame = currentWin.frameElement;
+      currentIFrame = getFrameElement(currentWin);
     }
   }
   return rectToClientRect({
@@ -3705,7 +3672,7 @@ var computePosition2 = (reference, floating, options) => {
   }));
 };
 
-// node_modules/.pnpm/@warp-ds+core@1.1.5_@floating-ui+dom@1.6.7/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";
@@ -3890,8 +3857,8 @@ var getMessages7 = (locale, enMsg, nbMsg, fiMsg, daMsg) => {
 };
 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);
 };
 
@@ -3985,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>`;
@@ -4020,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._({
@@ -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.5_@floating-ui+dom@1.6.7/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>`
     )}
@@ -4513,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
@@ -4605,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: " "
@@ -4612,30 +4597,31 @@ 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
-    });
+    return r([card.outline, this.selected ? card.outlineSelected : card.outlineUnselected]);
   }
-  get uuButton() {
-    return html15`<button class="${card.a11y}" aria-pressed="${this.selected}" tabindex="-1">Velg</button>`;
-  }
-  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;
@@ -4647,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`
@@ -4670,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);
 }
@@ -4687,8 +4672,8 @@ import { ifDefined as ifDefined4 } from "lit/directives/if-defined.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";
@@ -4764,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" });
@@ -4778,8 +4763,8 @@ if (!customElements.get("w-icon-chevron-down-16")) {
 // 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";
@@ -4855,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" });
@@ -4867,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;
@@ -4890,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="${classes({
-      [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 classes({
-      [expandable.elementsTransformChevronUpPart]: true,
-      [expandable.elementsChevronUpCollapsePart]: !this.expanded && this._showChevronUp
-    });
-  }
-  get _chevronDownClasses() {
-    return classes({
-      [expandable.elementsTransformChevronDownPart]: true,
-      [expandable.elementsChevronDownExpandPart]: this.expanded && !this._showChevronUp
-    });
-  }
   render() {
-    return html18` <div
-      class="${classes({
-      [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="${classes({
-      [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="${classes({
-      [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="${classes({
-      [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 },
@@ -5101,9 +5075,9 @@ var Move = class {
 // 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 = () => {
@@ -5178,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" });
@@ -5478,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._({
@@ -5508,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 }));
@@ -5530,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>
@@ -5562,31 +5532,39 @@ 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 _WarpSelect_instances, classes_get, helpTextClasses_get, chevronClasses_get, id_get, 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, _WarpSelect_instances);
-    activateI18n7(messages44, messages46, messages45, messages43);
+    activateI18n7(messages45, messages47, messages46, messages44);
     this._options = this.innerHTML;
   }
+  firstUpdated() {
+    this.autoFocus && this.shadowRoot.querySelector("select").focus();
+  }
+  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, _WarpSelect_instances, id_get)}">
+      () => html24`<label class="${label.base}" for="${__privateGet(this, _WarpSelect_instances, id_get)}">
             ${this.label}
             ${when(
         this.optional,
@@ -5604,13 +5582,14 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
         <select
           class="${__privateGet(this, _WarpSelect_instances, classes_get)}"
           id="${__privateGet(this, _WarpSelect_instances, id_get)}"
-          ?autofocus=${this.autoFocus}
+          ?disabled=${this.disabled}
           aria-describedby="${ifDefined5(__privateGet(this, _WarpSelect_instances, helpId_get))}"
           aria-invalid="${ifDefined5(this.invalid)}"
-          aria-errormessage="${ifDefined5(this.invalid && __privateGet(this, _WarpSelect_instances, helpId_get))}">
+          aria-errormessage="${ifDefined5(this.invalid && __privateGet(this, _WarpSelect_instances, helpId_get))}"
+          @keydown=${this.handleKeyDown}>
           ${unsafeHTML(this._options)}
         </select>
-        <div class="${__privateGet(this, _WarpSelect_instances, chevronClasses_get)}">
+        <div class="${__privateGet(this, _WarpSelect_instances, chevronClasses_get2)}">
           <w-icon-chevron-down-16></w-icon-chevron-down-16>
         </div>
       </div>
@@ -5620,23 +5599,19 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
 };
 _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_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_get = function() {
-  return r({
-    [select.chevron]: true,
-    [select.chevronDisabled]: this.disabled
-  });
+chevronClasses_get2 = function() {
+  return r([select.chevron, this.disabled && select.chevronDisabled]);
 };
 id_get = function() {
   return "select_id";
@@ -5657,6 +5632,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]);
@@ -5668,32 +5647,28 @@ 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() {
@@ -5764,16 +5739,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 },
@@ -5911,8 +5886,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,
@@ -6016,40 +5991,32 @@ var collapse = (el, done) => {
 };
 
 // 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 = "";
@@ -6064,22 +6031,6 @@ var WarpToast = class extends WarpElement18 {
   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
-    });
-  }
   get _wrapper() {
     var _a, _b;
     return (_b = (_a = this.renderRoot) == null ? void 0 : _a.querySelector(`section`)) != null ? _b : null;
@@ -6137,8 +6088,8 @@ var WarpToast = class extends WarpElement18 {
   render() {
     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>
@@ -6154,6 +6105,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`