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

package/dist/packages/toast/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 = (a, b) => {
   for (var prop in b || (b = {}))
@@ -52,10 +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 __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({
@@ -228,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("|");
@@ -239,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);
@@ -295,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;
       }
@@ -439,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 };
       }
@@ -461,8 +456,7 @@ var require_moo = __commonJS({
         var all = states.$all ? toRules(states.$all) : [];
         delete states.$all;
         var keys = Object.getOwnPropertyNames(states);
-        if (!start)
-          start = keys[0];
+        if (!start) start = keys[0];
         var ruleMap = /* @__PURE__ */ Object.create(null);
         for (var i = 0; i < keys.length; i++) {
           var key = keys[i];
@@ -474,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;
@@ -485,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);
               }
             }
@@ -567,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;
@@ -672,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) {
@@ -1030,10 +1018,20 @@ var require_parser = __commonJS({
 // packages/toast/toast.js
 import { css, html as html5 } from "lit";
 
-// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js
+var r = function() {
+  for (var t = [], n = arguments.length; n--; ) t[n] = arguments[n];
+  return t.reduce(function(t2, n2) {
+    return t2.concat("string" == typeof n2 ? n2 : Array.isArray(n2) ? r.apply(void 0, n2) : "object" == typeof n2 && n2 ? Object.keys(n2).map(function(r2) {
+      return n2[r2] ? r2 : "";
+    }) : "");
+  }, []).join(" ");
+};
+
+// 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) {
@@ -1057,11 +1055,9 @@ function processTokens(tokens, mapText) {
     }
     const offset = 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,
@@ -1083,7 +1079,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 = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1169,11 +1165,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)) {
@@ -1184,7 +1180,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 {
@@ -1352,6 +1351,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;
@@ -1392,28 +1394,19 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// 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
-var box = {
-  box: "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
-  info: "s-bg-info-subtle",
-  neutral: "s-surface-sunken",
-  bordered: "border-2 s-border s-bg"
-};
+// 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 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",
@@ -1421,31 +1414,6 @@ 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,
-  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",
-  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",
-  title: "flex w-full justify-between items-center",
-  titleType: "h4"
-};
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
   primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
@@ -1563,7 +1531,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",
@@ -1577,19 +1545,15 @@ var modal = {
   titleButtonIcon: "h-16 w-16 sm:h-24 sm:w-24",
   titleButtonIconRotated: "transform rotate-90"
 };
-var label = {
-  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
-  optional: "pl-8 font-normal text-s s-text-subtle"
-};
-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"
@@ -1646,15 +1610,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",
@@ -1693,8 +1651,7 @@ var prefersMotion = true;
 if (windowExists) {
   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) => {
@@ -1711,19 +1668,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((r) => {
-        done = r;
-      });
+    if (!done) return new Promise((r2) => {
+      done = r2;
+    });
   })();
   const afterExpandCallback = getAfterExpandCallback(el, done);
   removeTransition(el);
@@ -1736,15 +1690,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((r) => {
-        done = r;
-      });
+    if (!done) return new Promise((r2) => {
+      done = r2;
+    });
   })();
   const afterCollapseCallback = getAfterCollapseCallback(done);
   removeTransition(el);
@@ -1756,15 +1708,13 @@ 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 } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
-// 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 } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 var messages = JSON.parse('{"icon.title.warning":"Varseltrekant med utropstegn"}');
@@ -1855,7 +1805,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 LitElement2 } from "lit";
 import { unsafeStatic as unsafeStatic2, html as html2 } from "lit/static-html.js";
 var messages4 = JSON.parse('{"icon.title.error":"\xC5ttekant med utropstegn"}');
@@ -1946,7 +1896,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 LitElement3 } from "lit";
 import { unsafeStatic as unsafeStatic3, html as html3 } from "lit/static-html.js";
 var messages5 = JSON.parse('{"icon.title.success":"Sirkel med sjekkmerke"}');
@@ -2037,7 +1987,7 @@ if (!customElements.get("w-icon-success-16")) {
   customElements.define("w-icon-success-16", IconSuccess16);
 }
 
-// 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 LitElement4 } from "lit";
 import { unsafeStatic as unsafeStatic4, html as html4 } from "lit/static-html.js";
 var messages6 = JSON.parse('{"icon.title.close":"Kryss"}');
@@ -2150,12 +2100,9 @@ function detectLocale5() {
   }
 }
 var getMessages5 = (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 activateI18n5 = (enMessages, nbMessages, fiMessages, daMessages) => {
@@ -2178,23 +2125,16 @@ var messages9 = JSON.parse('{"toast.aria.error":"Virhe","toast.aria.successful":
 var messages10 = JSON.parse('{"toast.aria.error":"Feil","toast.aria.successful":"Vellykket","toast.aria.warning":"Advarsel"}');
 
 // packages/toast/toast.js
-var classes = (definition) => {
-  const defn = {};
-  for (const [key, value] of Object.entries(definition)) {
-    for (const className of key.split(" ")) {
-      defn[className] = value;
-    }
-  }
-  return classMap(defn);
-};
 var toastType = {
   success: "success",
   error: "error",
   warning: "warning"
 };
+var _WarpToast_instances, primaryClasses_get, iconClasses_get;
 var WarpToast = class extends WarpElement {
   constructor() {
     super();
+    __privateAdd(this, _WarpToast_instances);
     activateI18n5(messages8, messages10, messages9, messages7);
     this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
     this.type = "success";
@@ -2208,24 +2148,7 @@ var WarpToast = class extends WarpElement {
     super.disconnectedCallback();
   }
   updated() {
-    if (!this._expanded && this._wrapper)
-      expand(this._wrapper, () => this._expanded = true);
-  }
-  get _primaryClasses() {
-    return classes({
-      [toast.toast]: true,
-      [toast.positive]: this.type === toastType.success,
-      [toast.warning]: this.type === toastType.warning,
-      [toast.negative]: this.type === toastType.error
-    });
-  }
-  get _iconClasses() {
-    return classes({
-      [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;
@@ -2263,19 +2186,14 @@ var WarpToast = class extends WarpElement {
     }
   }
   get _iconMarkup() {
-    if (this._warning)
-      return html5`<w-icon-warning-16></w-icon-warning-16>`;
-    if (this._error)
-      return html5`<w-icon-error-16></w-icon-error-16>`;
-    else
-      return html5`<w-icon-success-16></w-icon-success-16>`;
+    if (this._warning) return html5`<w-icon-warning-16></w-icon-warning-16>`;
+    if (this._error) return html5`<w-icon-error-16></w-icon-error-16>`;
+    else return html5`<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() {
@@ -2287,11 +2205,10 @@ var WarpToast = class extends WarpElement {
     this.updateComplete.then(() => this.dispatchEvent(event));
   }
   render() {
-    if (!this.text)
-      return html5``;
+    if (!this.text) return html5``;
     return html5` <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>
@@ -2307,6 +2224,23 @@ var WarpToast = class extends WarpElement {
     </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", [
   WarpElement.styles,
   css`
@@ -2340,10 +2274,8 @@ var WarpToastContainer = class extends WarpElement2 {
       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) {
@@ -2351,15 +2283,13 @@ var WarpToastContainer = class extends WarpElement2 {
         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");
@@ -2381,8 +2311,7 @@ var WarpToastContainer = class extends WarpElement2 {
     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);
   }
   /**
@@ -2391,8 +2320,7 @@ var WarpToastContainer = class extends WarpElement2 {
    * @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)
     }));
@@ -2408,11 +2336,9 @@ var WarpToastContainer = class extends WarpElement2 {
     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));
@@ -2420,8 +2346,8 @@ var WarpToastContainer = class extends WarpElement2 {
   }
   render() {
     return html6`
-      <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">
           ${repeat(
       this._toastsArray,
       (toast3) => toast3.id,
@@ -2459,8 +2385,7 @@ var windowExists2 = typeof window !== "undefined";
 
 // packages/toast/api.js
 function toast2(message, options) {
-  if (!windowExists2)
-    return;
+  if (!windowExists2) return;
   const toast3 = customElements.get("w-toast-container").init();
   const data = __spreadValues({
     id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
@@ -2472,14 +2397,12 @@ function toast2(message, options) {
   return data;
 }
 function removeToast(id) {
-  if (!windowExists2)
-    return;
+  if (!windowExists2) return;
   const toast3 = customElements.get("w-toast-container").init();
   return toast3.del(id);
 }
 function updateToast(id, options) {
-  if (!windowExists2)
-    return;
+  if (!windowExists2) return;
   const toast3 = customElements.get("w-toast-container").init();
   toast3.set(__spreadValues(__spreadValues({}, toast3.get(id)), options));
   return toast3.get(id);