@warp-ds/elements 1.2.3-next.2 → 1.3.0-next.1

package/dist/index.js

@@ -1045,7 +1045,7 @@ import { html as html3 } from "lit";
 import WarpElement from "@warp-ds/elements-core";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-// node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.7.0/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: "i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text",
@@ -1074,6 +1074,17 @@ var box = {
   neutralClickable: "hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",
   borderedClickable: "hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"
 };
+var pill = {
+  pill: "flex items-center",
+  button: "inline-flex items-center focusable text-xs transition-all",
+  suggestion: "i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold",
+  filter: "i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text",
+  label: "pl-12 py-8 rounded-l-full",
+  labelWithoutClose: "pr-12 rounded-r-full",
+  labelWithClose: "pr-2",
+  close: "pr-12 pl-4 py-8 rounded-r-full",
+  a11y: "sr-only"
+};
 var card = {
   card: "cursor-pointer overflow-hidden relative transition-all",
   cardShadow: "rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent",
@@ -1253,9 +1264,9 @@ var modal = {
   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",
-  transitionTitleCenter: "justify-self-center",
+  transitionTitleCenter: "justify-self-center self-center",
   transitionTitleColSpan: "col-span-2",
-  title: "-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
+  title: "py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
   titleText: "mb-0 h4 sm:h3",
   titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
   titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
@@ -1355,14 +1366,14 @@ var attention = {
   closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
 };
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 
-// node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
-// node_modules/.pnpm/@lingui+message-utils@4.5.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
+// node_modules/.pnpm/@lingui+message-utils@4.7.0/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) {
@@ -1412,13 +1423,14 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
 var isString = (s3) => typeof s3 === "string";
 var isFunction = (f3) => typeof f3 === "function";
 var cache = /* @__PURE__ */ new Map();
+var defaultLocale = "en";
 function normalizeLocales(locales) {
   const out = Array.isArray(locales) ? locales : [locales];
-  return [...out, "en"];
+  return [...out, defaultLocale];
 }
 function date(locales, value, format) {
   const _locales = normalizeLocales(locales);
@@ -1463,11 +1475,13 @@ function cacheKey(type, locales, options) {
   return `${type}-${localeKey}-${JSON.stringify(options)}`;
 }
 var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
-var getDefaultFormats = (locale, locales, formats = {}) => {
-  locales = locales || locale;
-  const style = (format) => isString(format) ? formats[format] || { style: format } : format;
+var getDefaultFormats = (locale, passedLocales, formats = {}) => {
+  const locales = passedLocales || locale;
+  const style = (format) => {
+    return typeof format === "object" ? format : formats[format] || { style: format };
+  };
   const replaceOctothorpe = (value, message) => {
-    const numberFormat = Object.keys(formats).length ? style("number") : {};
+    const numberFormat = Object.keys(formats).length ? style("number") : void 0;
     const valueStr = number(locales, value, numberFormat);
     return message.replace("#", valueStr);
   };
@@ -1482,17 +1496,19 @@ var getDefaultFormats = (locale, locales, formats = {}) => {
       const message = plural(locales, true, value, cases);
       return replaceOctothorpe(value - offset, message);
     },
-    select: (value, rules) => {
-      var _a;
-      return (_a = rules[value]) != null ? _a : rules.other;
-    },
+    select: selectFormatter,
     number: (value, format) => number(locales, value, style(format)),
     date: (value, format) => date(locales, value, style(format)),
-    undefined: (value) => value
+    undefined: undefinedFormatter
   };
 };
+var selectFormatter = (value, rules) => {
+  var _a;
+  return (_a = rules[value]) != null ? _a : rules.other;
+};
+var undefinedFormatter = (value) => value;
 function interpolate(translation, locale, locales) {
-  return (values, formats = {}) => {
+  return (values = {}, formats) => {
     const formatters = getDefaultFormats(locale, locales, formats);
     const formatMessage = (message) => {
       if (!Array.isArray(message))
@@ -1502,14 +1518,15 @@ function interpolate(translation, locale, locales) {
           return message2 + token;
         const [name, type, format] = token;
         let interpolatedFormat = {};
-        if (format != null && !isString(format)) {
-          Object.keys(format).forEach((key) => {
-            interpolatedFormat[key] = formatMessage(format[key]);
+        if (format != null && typeof format === "object") {
+          Object.entries(format).forEach(([key, value2]) => {
+            interpolatedFormat[key] = formatMessage(value2);
           });
         } else {
           interpolatedFormat = format;
         }
-        const value = formatters[type](values[name], interpolatedFormat);
+        const formatter = formatters[type];
+        const value = formatter(values[name], interpolatedFormat);
         if (value == null)
           return message2;
         return message2 + value;
@@ -1521,7 +1538,7 @@ function interpolate(translation, locale, locales) {
     }
     if (isString(result))
       return result.trim();
-    return result;
+    return result ? String(result) : "";
   };
 }
 var __defProp$1 = Object.defineProperty;
@@ -1535,25 +1552,29 @@ var EventEmitter = class {
     __publicField$1(this, "_events", {});
   }
   on(event, listener) {
-    if (!this._hasEvent(event))
-      this._events[event] = [];
+    var _a2;
+    var _a;
+    (_a2 = (_a = this._events)[event]) != null ? _a2 : _a[event] = [];
     this._events[event].push(listener);
     return () => this.removeListener(event, listener);
   }
   removeListener(event, listener) {
-    if (!this._hasEvent(event))
+    const maybeListeners = this._getListeners(event);
+    if (!maybeListeners)
       return;
-    const index = this._events[event].indexOf(listener);
+    const index = maybeListeners.indexOf(listener);
     if (~index)
-      this._events[event].splice(index, 1);
+      maybeListeners.splice(index, 1);
   }
   emit(event, ...args) {
-    if (!this._hasEvent(event))
+    const maybeListeners = this._getListeners(event);
+    if (!maybeListeners)
       return;
-    this._events[event].map((listener) => listener.apply(this, args));
+    maybeListeners.map((listener) => listener.apply(this, args));
   }
-  _hasEvent(event) {
-    return Array.isArray(this._events[event]);
+  _getListeners(event) {
+    const maybeListeners = this._events[event];
+    return Array.isArray(maybeListeners) ? maybeListeners : false;
   }
 };
 var __defProp2 = Object.defineProperty;
@@ -1564,23 +1585,22 @@ var __publicField2 = (obj, key, value) => {
 };
 var I18n = class extends EventEmitter {
   constructor(params) {
+    var _a;
     super();
-    __publicField2(this, "_locale");
+    __publicField2(this, "_locale", "");
     __publicField2(this, "_locales");
-    __publicField2(this, "_localeData");
-    __publicField2(this, "_messages");
+    __publicField2(this, "_localeData", {});
+    __publicField2(this, "_messages", {});
     __publicField2(this, "_missing");
     __publicField2(this, "t", this._.bind(this));
-    this._messages = {};
-    this._localeData = {};
     if (params.missing != null)
       this._missing = params.missing;
     if (params.messages != null)
       this.load(params.messages);
     if (params.localeData != null)
       this.loadLocaleData(params.localeData);
-    if (params.locale != null || params.locales != null) {
-      this.activate(params.locale, params.locales);
+    if (typeof params.locale === "string" || params.locales) {
+      this.activate((_a = params.locale) != null ? _a : defaultLocale, params.locales);
     }
   }
   get locale() {
@@ -1601,15 +1621,17 @@ var I18n = class extends EventEmitter {
     return (_a = this._localeData[this._locale]) != null ? _a : {};
   }
   _loadLocaleData(locale, localeData) {
-    if (this._localeData[locale] == null) {
+    const maybeLocaleData = this._localeData[locale];
+    if (!maybeLocaleData) {
       this._localeData[locale] = localeData;
     } else {
-      Object.assign(this._localeData[locale], localeData);
+      Object.assign(maybeLocaleData, localeData);
     }
   }
   /**
    * @deprecated Plurals automatically used from Intl.PluralRules you can safely remove this call. Deprecated in v4
    */
+  // @ts-ignore deprecated, so ignore the reported error
   loadLocaleData(localeOrAllData, localeData) {
     if (localeData != null) {
       this._loadLocaleData(localeOrAllData, localeData);
@@ -1620,19 +1642,20 @@ var I18n = class extends EventEmitter {
     }
     this.emit("change");
   }
-  _load(locale, messages40) {
-    if (this._messages[locale] == null) {
-      this._messages[locale] = messages40;
+  _load(locale, messages43) {
+    const maybeMessages = this._messages[locale];
+    if (!maybeMessages) {
+      this._messages[locale] = messages43;
     } else {
-      Object.assign(this._messages[locale], messages40);
+      Object.assign(maybeMessages, messages43);
     }
   }
-  load(localeOrMessages, messages40) {
-    if (messages40 != null) {
-      this._load(localeOrMessages, messages40);
+  load(localeOrMessages, messages43) {
+    if (typeof localeOrMessages == "string" && typeof messages43 === "object") {
+      this._load(localeOrMessages, messages43);
     } else {
-      Object.keys(localeOrMessages).forEach(
-        (locale) => this._load(locale, localeOrMessages[locale])
+      Object.entries(localeOrMessages).forEach(
+        ([locale, messages210]) => this._load(locale, messages210)
       );
     }
     this.emit("change");
@@ -1640,10 +1663,10 @@ var I18n = class extends EventEmitter {
   /**
    * @param options {@link LoadAndActivateOptions}
    */
-  loadAndActivate({ locale, locales, messages: messages40 }) {
+  loadAndActivate({ locale, locales, messages: messages43 }) {
     this._locale = locale;
     this._locales = locales || void 0;
-    this._messages[this._locale] = messages40;
+    this._messages[this._locale] = messages43;
     this.emit("change");
   }
   activate(locale, locales) {
@@ -1656,13 +1679,15 @@ var I18n = class extends EventEmitter {
     this._locales = locales;
     this.emit("change");
   }
-  _(id, values = {}, { message, formats } = {}) {
+  _(id, values, options) {
+    let message = options == null ? void 0 : options.message;
     if (!isString(id)) {
       values = id.values || values;
       message = id.message;
       id = id.id;
     }
-    const messageMissing = !this.messages[id];
+    const messageForId = this.messages[id];
+    const messageMissing = messageForId === void 0;
     const missing = this._missing;
     if (missing && messageMissing) {
       return isFunction(missing) ? missing(this._locale, id) : missing;
@@ -1670,7 +1695,7 @@ var I18n = class extends EventEmitter {
     if (messageMissing) {
       this.emit("missing", { id, locale: this._locale });
     }
-    let translation = this.messages[id] || message || id;
+    let translation = messageForId || message || id;
     if (true) {
       translation = isString(translation) ? compileMessage(translation) : translation;
     }
@@ -1682,7 +1707,7 @@ var I18n = class extends EventEmitter {
       translation,
       this._locale,
       this._locales
-    )(values, formats);
+    )(values, options == null ? void 0 : options.formats);
   }
   date(value, format) {
     return date(this._locales || this._locale, value, format);
@@ -1696,16 +1721,16 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
 var messages = JSON.parse('{"icon.title.search":"Forst\xF8rrelsesglass"}');
 var messages2 = JSON.parse('{"icon.title.search":"Magnifying glass"}');
 var messages3 = JSON.parse('{"icon.title.search":"Suurennuslasi"}');
 var supportedLocales = ["en", "nb", "fi"];
-var defaultLocale = "en";
+var defaultLocale2 = "en";
 var getSupportedLocale = (usedLocale) => {
   return supportedLocales.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale;
+  ) || defaultLocale2;
 };
 function detectLocale() {
   if (typeof window === "undefined") {
@@ -1717,7 +1742,7 @@ function detectLocale() {
     return getSupportedLocale(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale;
+    return defaultLocale2;
   }
 }
 var getMessages = (locale, enMsg, nbMsg, fiMsg) => {
@@ -1729,8 +1754,8 @@ var getMessages = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale();
-  const messages42 = getMessages(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n(messages2, messages, messages3);
@@ -1744,18 +1769,18 @@ if (!customElements.get("w-icon-search-16")) {
   customElements.define("w-icon-search-16", IconSearch16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
 import { LitElement as LitElement2 } from "lit";
 import { unsafeStatic as unsafeStatic2, html as html2 } from "lit/static-html.js";
 var messages4 = JSON.parse('{"icon.title.close":"Kryss"}');
 var messages22 = JSON.parse('{"icon.title.close":"Cross"}');
 var messages32 = JSON.parse('{"icon.title.close":"Rasti"}');
 var supportedLocales2 = ["en", "nb", "fi"];
-var defaultLocale2 = "en";
+var defaultLocale3 = "en";
 var getSupportedLocale2 = (usedLocale) => {
   return supportedLocales2.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale2;
+  ) || defaultLocale3;
 };
 function detectLocale2() {
   if (typeof window === "undefined") {
@@ -1767,7 +1792,7 @@ function detectLocale2() {
     return getSupportedLocale2(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale2;
+    return defaultLocale3;
   }
 }
 var getMessages2 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -1779,8 +1804,8 @@ var getMessages2 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n2 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale2();
-  const messages42 = getMessages2(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages2(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n2(messages22, messages4, messages32);
@@ -1903,18 +1928,18 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/alert-info-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/alert-info-16.js
 import { LitElement as LitElement3 } from "lit";
 import { unsafeStatic as unsafeStatic3, html as html4 } from "lit/static-html.js";
 var messages5 = JSON.parse('{"icon.title.alert-info":"Bl\xE5 sirkel med bokstaven \\"I\\""}');
 var messages23 = JSON.parse('{"icon.title.alert-info":"Blue circle with the letter I"}');
 var messages33 = JSON.parse('{"icon.title.alert-info":"Ympyr\xE4, jonka sis\xE4ll\xE4 on i-kirjain"}');
 var supportedLocales3 = ["en", "nb", "fi"];
-var defaultLocale3 = "en";
+var defaultLocale4 = "en";
 var getSupportedLocale3 = (usedLocale) => {
   return supportedLocales3.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale3;
+  ) || defaultLocale4;
 };
 function detectLocale3() {
   if (typeof window === "undefined") {
@@ -1926,7 +1951,7 @@ function detectLocale3() {
     return getSupportedLocale3(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale3;
+    return defaultLocale4;
   }
 }
 var getMessages3 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -1938,8 +1963,8 @@ var getMessages3 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n3 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale3();
-  const messages42 = getMessages3(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages3(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n3(messages23, messages5, messages33);
@@ -1953,18 +1978,18 @@ if (!customElements.get("w-icon-alert-info-16")) {
   customElements.define("w-icon-alert-info-16", IconAlertInfo16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/alert-warning-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/alert-warning-16.js
 import { LitElement as LitElement4 } from "lit";
 import { unsafeStatic as unsafeStatic4, html as html5 } from "lit/static-html.js";
 var messages6 = JSON.parse('{"icon.title.alert-warning":"Gul varseltrekant med utropstegn"}');
 var messages24 = JSON.parse('{"icon.title.alert-warning":"Yellow warning triangle with exclamation point"}');
 var messages34 = JSON.parse('{"icon.title.alert-warning":"Keltainen varoituskolmio, jonka sis\xE4ll\xE4 on huutomerkki"}');
 var supportedLocales4 = ["en", "nb", "fi"];
-var defaultLocale4 = "en";
+var defaultLocale5 = "en";
 var getSupportedLocale4 = (usedLocale) => {
   return supportedLocales4.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale4;
+  ) || defaultLocale5;
 };
 function detectLocale4() {
   if (typeof window === "undefined") {
@@ -1976,7 +2001,7 @@ function detectLocale4() {
     return getSupportedLocale4(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale4;
+    return defaultLocale5;
   }
 }
 var getMessages4 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -1988,8 +2013,8 @@ var getMessages4 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n4 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale4();
-  const messages42 = getMessages4(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages4(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n4(messages24, messages6, messages34);
@@ -2003,18 +2028,18 @@ if (!customElements.get("w-icon-alert-warning-16")) {
   customElements.define("w-icon-alert-warning-16", IconAlertWarning16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/alert-error-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/alert-error-16.js
 import { LitElement as LitElement5 } from "lit";
 import { unsafeStatic as unsafeStatic5, html as html6 } from "lit/static-html.js";
 var messages7 = JSON.parse('{"icon.title.alert-error":"R\xF8d \xE5ttekant med hvitt utropstegn"}');
 var messages25 = JSON.parse('{"icon.title.alert-error":"Red octagon with white exclamation point"}');
 var messages35 = JSON.parse('{"icon.title.alert-error":"Punainen kahdeksankulmio, jonka sis\xE4ll\xE4 on valkoinen huutomerkki"}');
 var supportedLocales5 = ["en", "nb", "fi"];
-var defaultLocale5 = "en";
+var defaultLocale6 = "en";
 var getSupportedLocale5 = (usedLocale) => {
   return supportedLocales5.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale5;
+  ) || defaultLocale6;
 };
 function detectLocale5() {
   if (typeof window === "undefined") {
@@ -2026,7 +2051,7 @@ function detectLocale5() {
     return getSupportedLocale5(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale5;
+    return defaultLocale6;
   }
 }
 var getMessages5 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -2038,8 +2063,8 @@ var getMessages5 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n5 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale5();
-  const messages42 = getMessages5(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages5(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n5(messages25, messages7, messages35);
@@ -2053,18 +2078,18 @@ if (!customElements.get("w-icon-alert-error-16")) {
   customElements.define("w-icon-alert-error-16", IconAlertError16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/alert-success-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/alert-success-16.js
 import { LitElement as LitElement6 } from "lit";
 import { unsafeStatic as unsafeStatic6, html as html7 } from "lit/static-html.js";
 var messages8 = JSON.parse('{"icon.title.alert-success":"Gr\xF8nn sirkel med sjekkmerke"}');
 var messages26 = JSON.parse('{"icon.title.alert-success":"Green circle with checkmark"}');
 var messages36 = JSON.parse('{"icon.title.alert-success":"Vihre\xE4 ympyr\xE4, jonka sis\xE4ll\xE4 on valintamerkki"}');
 var supportedLocales6 = ["en", "nb", "fi"];
-var defaultLocale6 = "en";
+var defaultLocale7 = "en";
 var getSupportedLocale6 = (usedLocale) => {
   return supportedLocales6.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale6;
+  ) || defaultLocale7;
 };
 function detectLocale6() {
   if (typeof window === "undefined") {
@@ -2076,7 +2101,7 @@ function detectLocale6() {
     return getSupportedLocale6(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale6;
+    return defaultLocale7;
   }
 }
 var getMessages6 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -2088,8 +2113,8 @@ var getMessages6 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n6 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale6();
-  const messages42 = getMessages6(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages6(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n6(messages26, messages8, messages36);
@@ -2542,7 +2567,7 @@ var D2 = { getClippingRect: function(t2) {
 }, getClientRects: (t2) => Array.from(t2.getClientRects()), isRTL: (t2) => "rtl" === i2(t2).direction };
 var z = (t2, n3, o3) => o(t2, n3, __spreadValues({ platform: D2 }, o3));
 
-// node_modules/.pnpm/@warp-ds+core@1.0.0/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// node_modules/.pnpm/@warp-ds+core@1.0.2/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
 var TOP = "top";
 var BOTTOM = "bottom";
 var LEFT = "left";
@@ -2618,11 +2643,11 @@ var messages11 = JSON.parse('{"attention.aria.callout":"callout speech bubble","
 
 // packages/i18n.ts
 var supportedLocales7 = ["en", "nb", "fi"];
-var defaultLocale7 = "en";
+var defaultLocale8 = "en";
 var getSupportedLocale7 = (usedLocale) => {
   return supportedLocales7.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale7;
+  ) || defaultLocale8;
 };
 function detectLocale7() {
   if (typeof window === "undefined") {
@@ -2634,7 +2659,7 @@ function detectLocale7() {
     return getSupportedLocale7(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale7;
+    return defaultLocale8;
   }
 }
 var getMessages7 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -2646,8 +2671,8 @@ var getMessages7 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n7 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale7();
-  const messages40 = getMessages7(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages40);
+  const messages43 = getMessages7(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 
@@ -3030,7 +3055,7 @@ if (!customElements.get("w-box")) {
 import { html as html12 } from "lit";
 import WarpElement6 from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+core@1.0.0/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
+// node_modules/.pnpm/@warp-ds+core@1.0.2/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
 function interleave(array, separator2) {
   return array.flatMap((el) => [el, separator2]).slice(0, -1);
 }
@@ -3139,11 +3164,11 @@ var WarpBroadcast = class extends WarpElement7 {
     this._hiddenMessageIds = [.../* @__PURE__ */ new Set([...this._hiddenMessageIds, id])];
   }
   render() {
-    const messages40 = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
+    const messages43 = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
     return html13`
-      <aside class=${`${messages40.length === 0 ? "hidden" : "mb-16"}`}>
+      <aside class=${`${messages43.length === 0 ? "hidden" : "mb-16"}`}>
         ${repeat(
-      messages40,
+      messages43,
       ({ id }) => `broadcast-${id}`,
       ({ id, message }) => html13`<w-toast
               id="broadcast-${id}"
@@ -3238,7 +3263,7 @@ ${buttonTypes2.join(
     const secondary = this.variant === "secondary";
     const negative = this.variant === "negative";
     const utility = this.variant === "utility";
-    const pill = this.variant === "pill";
+    const pill2 = this.variant === "pill";
     const link = this.variant === "link";
     return r(
       {
@@ -3274,10 +3299,10 @@ ${buttonTypes2.join(
         [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]: pill && !this.small && !this.loading,
-        [button.pillSmall]: pill && this.small && !this.loading,
-        [button.pillLoading]: pill && !this.small && this.loading,
-        [button.pillSmallLoading]: pill && this.small && 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,
@@ -3428,18 +3453,18 @@ if (!customElements.get("w-card")) {
 import { css as css5, html as html18 } from "lit";
 import WarpElement10 from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 import { LitElement as LitElement7 } from "lit";
 import { unsafeStatic as unsafeStatic7, html as html16 } from "lit/static-html.js";
 var messages18 = JSON.parse('{"icon.title.chevron-down":"Nedoverpil"}');
 var messages27 = JSON.parse('{"icon.title.chevron-down":"Downward arrow"}');
 var messages37 = JSON.parse('{"icon.title.chevron-down":"Nuoli alasp\xE4in"}');
 var supportedLocales8 = ["en", "nb", "fi"];
-var defaultLocale8 = "en";
+var defaultLocale9 = "en";
 var getSupportedLocale8 = (usedLocale) => {
   return supportedLocales8.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale8;
+  ) || defaultLocale9;
 };
 function detectLocale8() {
   if (typeof window === "undefined") {
@@ -3451,7 +3476,7 @@ function detectLocale8() {
     return getSupportedLocale8(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale8;
+    return defaultLocale9;
   }
 }
 var getMessages8 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -3463,8 +3488,8 @@ var getMessages8 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n8 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale8();
-  const messages42 = getMessages8(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages8(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n8(messages27, messages18, messages37);
@@ -3478,18 +3503,18 @@ if (!customElements.get("w-icon-chevron-down-16")) {
   customElements.define("w-icon-chevron-down-16", IconChevronDown16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
+// node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
 import { LitElement as LitElement8 } from "lit";
 import { unsafeStatic as unsafeStatic8, html as html17 } from "lit/static-html.js";
 var messages19 = JSON.parse('{"icon.title.chevron-up":"Oppoverpil"}');
 var messages28 = 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"];
-var defaultLocale9 = "en";
+var defaultLocale10 = "en";
 var getSupportedLocale9 = (usedLocale) => {
   return supportedLocales9.find(
     (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale9;
+  ) || defaultLocale10;
 };
 function detectLocale9() {
   if (typeof window === "undefined") {
@@ -3501,7 +3526,7 @@ function detectLocale9() {
     return getSupportedLocale9(htmlLocale);
   } catch (e2) {
     console.warn("could not detect locale, falling back to source locale", e2);
-    return defaultLocale9;
+    return defaultLocale10;
   }
 }
 var getMessages9 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -3513,8 +3538,8 @@ var getMessages9 = (locale, enMsg, nbMsg, fiMsg) => {
 };
 var activateI18n9 = (enMessages, nbMessages, fiMessages) => {
   const locale = detectLocale9();
-  const messages42 = getMessages9(locale, enMessages, nbMessages, fiMessages);
-  i18n.load(locale, messages42);
+  const messages43 = getMessages9(locale, enMessages, nbMessages, fiMessages);
+  i18n.load(locale, messages43);
   i18n.activate(locale);
 };
 activateI18n9(messages28, messages19, messages38);
@@ -3661,25 +3686,115 @@ if (!customElements.get("w-expandable")) {
   customElements.define("w-expandable", WarpExpandable);
 }
 
-// packages/select/index.js
-import { html as html19, css as css6 } from "lit";
+// packages/pill/index.js
+import { html as html19 } from "lit";
+
+// packages/pill/locales/en/messages.mjs
+var messages20 = JSON.parse('{"pill.aria.openFilter":"Open filter","pill.aria.removeFilter":["Remove filter ",["label"]]}');
+
+// packages/pill/locales/fi/messages.mjs
+var messages21 = JSON.parse('{"pill.aria.openFilter":"Avaa suodatin","pill.aria.removeFilter":["Tyhjenn\xE4 suodatin ",["label"]]}');
+
+// packages/pill/locales/nb/messages.mjs
+var messages29 = JSON.parse('{"pill.aria.openFilter":"\xC5pne filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
+
+// packages/pill/index.js
 import WarpElement11 from "@warp-ds/elements-core";
+var WarpPill = class extends kebabCaseAttributes(WarpElement11) {
+  constructor() {
+    super();
+    activateI18n7(messages20, messages29, messages21);
+    this.canClose = false;
+    this.suggestion = false;
+    this.openFilterSrText = i18n._({
+      id: "pill.aria.openFilter",
+      message: "Open filter",
+      comment: "Fallback screenreader message for open filter"
+    });
+    this.removeFilterSrText = i18n._({
+      id: "pill.aria.removeFilter",
+      message: "Remove filter {label}",
+      comment: "Fallback screenreader message for removal of the filter"
+    });
+  }
+  get _labelClasses() {
+    return r({
+      [pill.button]: true,
+      [this.suggestion ? pill.suggestion : pill.filter]: true,
+      [pill.label]: true,
+      [this.canClose ? pill.labelWithClose : pill.labelWithoutClose]: true
+    });
+  }
+  get _closeClasses() {
+    return r({
+      [pill.button]: true,
+      [this.suggestion ? pill.suggestion : pill.filter]: true,
+      [pill.close]: true
+    });
+  }
+  _onClick() {
+    this.dispatchEvent(new CustomEvent("w-pill-click", { bubbles: true, composed: true }));
+  }
+  _onClose() {
+    this.dispatchEvent(new CustomEvent("w-pill-close", { bubbles: true, composed: true }));
+  }
+  render() {
+    return html19`
+      <div class="${pill.pill}">
+        <button
+          type="button"
+          class="${this._labelClasses}"
+          @click="${this._onClick}"
+        >
+          <span class="${pill.a11y}"
+            >${this.openSrLabel ? this.openSrLabel : this.openFilterSrText}</span
+          >
+          <slot></slot>
+        </button>
+        ${this.canClose ? html19`<button
+              type="button"
+              class="${this._closeClasses}"
+              @click="${this._onClose}"
+            >
+              <span class="${pill.a11y}"
+                >${this.closeSrLabel ? this.closeSrLabel : this.removeFilterSrText}</span
+              >
+              <w-icon-close-16></w-icon-close-16>
+            </button>` : null}
+      </div>
+    `;
+  }
+};
+__publicField(WarpPill, "styles", [WarpElement11.styles]);
+__publicField(WarpPill, "properties", {
+  canClose: { type: Boolean },
+  suggestion: { type: Boolean },
+  openSrLabel: { type: String },
+  closeSrLabel: { type: String }
+});
+if (!customElements.get("w-pill")) {
+  customElements.define("w-pill", WarpPill);
+}
+
+// packages/select/index.js
+import { html as html20, css as css6 } from "lit";
+import WarpElement12 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined5 } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 // packages/select/locales/en/messages.mjs
-var messages20 = JSON.parse('{"select.label.optional":"(optional)"}');
+var messages30 = JSON.parse('{"select.label.optional":"(optional)"}');
 
 // packages/select/locales/nb/messages.mjs
-var messages21 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
+var messages31 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
 
 // packages/select/locales/fi/messages.mjs
-var messages29 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
+var messages39 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
 
 // packages/select/index.js
 var _classes, classes_get, _labelClasses, labelClasses_get, _helpTextClasses, helpTextClasses_get, _chevronClasses, chevronClasses_get, _id, id_get, _helpId, helpId_get;
-var WarpSelect = class extends kebabCaseAttributes(WarpElement11) {
+var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
   constructor() {
     super();
     __privateAdd(this, _classes);
@@ -3688,18 +3803,18 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement11) {
     __privateAdd(this, _chevronClasses);
     __privateAdd(this, _id);
     __privateAdd(this, _helpId);
-    activateI18n7(messages20, messages21, messages29);
+    activateI18n7(messages30, messages31, messages39);
     this._options = this.innerHTML;
   }
   render() {
-    return html19`<div class="${select.wrapper}">
+    return html20`<div class="${select.wrapper}">
       ${when(
       this.label,
-      () => html19`<label class="${__privateGet(this, _labelClasses, labelClasses_get)}" for="${__privateGet(this, _id, id_get)}">
+      () => html20`<label class="${__privateGet(this, _labelClasses, labelClasses_get)}" for="${__privateGet(this, _id, id_get)}">
             ${this.label}
             ${when(
         this.optional,
-        () => html19`<span class="${label.optional}"
+        () => html20`<span class="${label.optional}"
                   >${i18n._({
           id: "select.label.optional",
           message: "(optional)",
@@ -3726,7 +3841,7 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement11) {
       </div>
       ${when(
       this.always || this.invalid,
-      () => html19`<div id="${__privateGet(this, _helpId, helpId_get)}" class="${__privateGet(this, _helpTextClasses, helpTextClasses_get)}">
+      () => html20`<div id="${__privateGet(this, _helpId, helpId_get)}" class="${__privateGet(this, _helpTextClasses, helpTextClasses_get)}">
             ${this.hint}
           </div>`
     )}
@@ -3784,16 +3899,16 @@ __publicField(WarpSelect, "properties", {
   optional: { type: Boolean, reflect: true },
   _options: { state: true }
 });
-__publicField(WarpSelect, "styles", [WarpElement11.styles]);
+__publicField(WarpSelect, "styles", [WarpElement12.styles]);
 if (!customElements.get("w-select")) {
   customElements.define("w-select", WarpSelect);
 }
 
 // packages/textfield/index.js
-import { css as css7, html as html20 } from "lit";
-import WarpElement12 from "@warp-ds/elements-core";
+import { css as css7, html as html21 } from "lit";
+import WarpElement13 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined6 } from "lit/directives/if-defined.js";
-var WarpTextField = class extends WarpElement12 {
+var WarpTextField = class extends WarpElement13 {
   constructor() {
     super();
     this.type = "text";
@@ -3824,7 +3939,7 @@ var WarpTextField = class extends WarpElement12 {
   }
   get _label() {
     if (this.label) {
-      return html20`<label for="${this._id}" class=${this._labelStyles}>${this.label}</label>`;
+      return html21`<label for="${this._id}" class=${this._labelStyles}>${this.label}</label>`;
     }
   }
   get _helpId() {
@@ -3862,7 +3977,7 @@ var WarpTextField = class extends WarpElement12 {
       this._hasSuffix = true;
   }
   render() {
-    return html20`
+    return html21`
       ${this._label}
       <div class="${input.wrapper}">
         <slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
@@ -3891,7 +4006,7 @@ var WarpTextField = class extends WarpElement12 {
         />
         <slot @slotchange="${this.suffixSlotChange}" name="suffix"></slot>
       </div>
-      ${this.helpText && html20`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
+      ${this.helpText && html21`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
     `;
   }
 };
@@ -3921,7 +4036,7 @@ __publicField(WarpTextField, "properties", {
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
 __publicField(WarpTextField, "styles", [
-  WarpElement12.styles,
+  WarpElement13.styles,
   css7`
       :host {
         display: block;
@@ -3966,9 +4081,141 @@ function updateToast(id, options) {
   return toast3.get(id);
 }
 
+// packages/toast/toast-container.js
+import { css as css8, html as html22 } from "lit";
+import WarpElement14 from "@warp-ds/elements-core";
+import { repeat as repeat2 } from "lit/directives/repeat.js";
+var WarpToastContainer = class extends WarpElement14 {
+  constructor() {
+    super();
+    this._toasts = /* @__PURE__ */ new Map();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._interval = setInterval(() => {
+      const keep = [];
+      const remove = [];
+      for (const toast3 of this._toasts) {
+        if (Date.now() <= toast3[1].duration)
+          keep.push(toast3);
+        else
+          remove.push(toast3);
+      }
+      const collapseTasks = [];
+      for (const [id] of remove) {
+        const el = this.renderRoot.querySelector(`#${id}`);
+        collapseTasks.push(el.collapse());
+      }
+      Promise.all(collapseTasks).then(() => {
+        if (keep.length != this._toasts.size)
+          this._toasts = new Map(keep);
+      });
+    }, 500);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._interval)
+      clearTimeout(this._interval);
+  }
+  static init() {
+    let el = document.querySelector("w-toast-container");
+    if (!el) {
+      el = document.createElement("w-toast-container");
+      document.body.appendChild(el);
+    }
+    return el;
+  }
+  get _toastsArray() {
+    return Array.from(this._toasts).map(([, toast3]) => toast3);
+  }
+  /**
+   *
+   * @param {String|Number} id
+   * @returns {ToastOptions}
+   */
+  get(id) {
+    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'
+      );
+    return this._toasts.get(id);
+  }
+  /**
+   *
+   * @param {Object} toast
+   * @returns {WarpToastContainer}
+   */
+  set(toast3) {
+    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)
+    }));
+    this._toasts = new Map(Array.from(this._toasts));
+    return result;
+  }
+  /**
+   *
+   * @param {String|Number} id
+   * @returns {ToastOptions | false}
+   */
+  async del(id) {
+    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'
+      );
+    const el = this.renderRoot.querySelector(`#${id}`);
+    if (!this._toasts.has(id))
+      return false;
+    await el.collapse();
+    const result = this._toasts.delete(id);
+    this._toasts = new Map(Array.from(this._toasts));
+    return result;
+  }
+  render() {
+    return html22`
+      <aside class="${toaster.container}">
+        <div class="${toaster.toaster}" id="w-toast-container-list">
+          ${repeat2(
+      this._toastsArray,
+      (toast3) => toast3.id,
+      (toast3) => html22` <w-toast
+                class="${toaster.content}"
+                id="${toast3.id}"
+                type="${toast3.type}"
+                text="${toast3.text}"
+                ?canclose=${toast3.canclose}
+                @close=${() => this.del(toast3.id)}
+              >
+              </w-toast>`
+    )}
+        </div>
+      </aside>
+    `;
+  }
+};
+__publicField(WarpToastContainer, "styles", [
+  WarpElement14.styles,
+  css8`
+      :host {
+        display: block;
+      }
+    `
+]);
+__publicField(WarpToastContainer, "properties", {
+  _toasts: { state: true }
+});
+if (!customElements.get("w-toast-container")) {
+  customElements.define("w-toast-container", WarpToastContainer);
+}
+
 // packages/toast/toast.js
-import { css as css8, html as html21 } from "lit";
-import WarpElement13 from "@warp-ds/elements-core";
+import { css as css9, html as html23 } from "lit";
+import WarpElement15 from "@warp-ds/elements-core";
 import { classMap as classMap2 } from "lit/directives/class-map.js";
 import { when as when2 } from "lit/directives/when.js";
 
@@ -4046,13 +4293,13 @@ var collapse = (el, done) => {
 };
 
 // packages/toast/locales/en/messages.mjs
-var messages30 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+var messages40 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
 
 // packages/toast/locales/nb/messages.mjs
-var messages31 = JSON.parse('{"toast.aria.error":"Varsel","toast.aria.successful":"Vellykket","toast.aria.warning":"Feil"}');
+var messages41 = JSON.parse('{"toast.aria.error":"Varsel","toast.aria.successful":"Vellykket","toast.aria.warning":"Feil"}');
 
 // packages/toast/locales/fi/messages.mjs
-var messages39 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+var messages42 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
 
 // packages/toast/toast.js
 var classes2 = (definition) => {
@@ -4069,10 +4316,10 @@ var toastType = {
   error: "error",
   warning: "warning"
 };
-var WarpToast = class extends WarpElement13 {
+var WarpToast = class extends WarpElement15 {
   constructor() {
     super();
-    activateI18n7(messages30, messages31, messages39);
+    activateI18n7(messages40, messages41, messages42);
     this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
     this.type = "success";
     this.text = "";
@@ -4138,11 +4385,11 @@ var WarpToast = class extends WarpElement13 {
   }
   get _iconMarkup() {
     if (this._warning)
-      return html21`<w-icon-alert-warning-16></w-icon-alert-warning-16>`;
+      return html23`<w-icon-alert-warning-16></w-icon-alert-warning-16>`;
     if (this._error)
-      return html21`<w-icon-alert-error-16></w-icon-alert-error-16>`;
+      return html23`<w-icon-alert-error-16></w-icon-alert-error-16>`;
     else
-      return html21`<w-icon-alert-success-16></w-icon-alert-success-16>`;
+      return html23`<w-icon-alert-success-16></w-icon-alert-success-16>`;
   }
   async collapse() {
     return new Promise((resolve) => {
@@ -4162,8 +4409,8 @@ var WarpToast = class extends WarpElement13 {
   }
   render() {
     if (!this.text)
-      return html21``;
-    return html21` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
+      return html23``;
+    return html23` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
       <div class="${this._primaryClasses}">
         <div class="${this._iconClasses}">${this._iconMarkup}</div>
         <div role="${this._role}" class="${toast.content}">
@@ -4171,7 +4418,7 @@ var WarpToast = class extends WarpElement13 {
         </div>
         ${when2(
       this.canclose === true,
-      () => html21`
+      () => html23`
             <button class="${toast.close}" @click="${this.close}">
               <w-icon-close-16></w-icon-close-16>
             </button>
@@ -4182,8 +4429,8 @@ var WarpToast = class extends WarpElement13 {
   }
 };
 __publicField(WarpToast, "styles", [
-  WarpElement13.styles,
-  css8`
+  WarpElement15.styles,
+  css9`
       :host {
         display: block;
       }
@@ -4199,143 +4446,11 @@ if (!customElements.get("w-toast")) {
   customElements.define("w-toast", WarpToast);
 }
 
-// packages/toast/toast-container.js
-import { css as css9, html as html22 } from "lit";
-import WarpElement14 from "@warp-ds/elements-core";
-import { repeat as repeat2 } from "lit/directives/repeat.js";
-var WarpToastContainer = class extends WarpElement14 {
-  constructor() {
-    super();
-    this._toasts = /* @__PURE__ */ new Map();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._interval = setInterval(() => {
-      const keep = [];
-      const remove = [];
-      for (const toast3 of this._toasts) {
-        if (Date.now() <= toast3[1].duration)
-          keep.push(toast3);
-        else
-          remove.push(toast3);
-      }
-      const collapseTasks = [];
-      for (const [id] of remove) {
-        const el = this.renderRoot.querySelector(`#${id}`);
-        collapseTasks.push(el.collapse());
-      }
-      Promise.all(collapseTasks).then(() => {
-        if (keep.length != this._toasts.size)
-          this._toasts = new Map(keep);
-      });
-    }, 500);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._interval)
-      clearTimeout(this._interval);
-  }
-  static init() {
-    let el = document.querySelector("w-toast-container");
-    if (!el) {
-      el = document.createElement("w-toast-container");
-      document.body.appendChild(el);
-    }
-    return el;
-  }
-  get _toastsArray() {
-    return Array.from(this._toasts).map(([, toast3]) => toast3);
-  }
-  /**
-   *
-   * @param {String|Number} id
-   * @returns {ToastOptions}
-   */
-  get(id) {
-    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'
-      );
-    return this._toasts.get(id);
-  }
-  /**
-   *
-   * @param {Object} toast
-   * @returns {WarpToastContainer}
-   */
-  set(toast3) {
-    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)
-    }));
-    this._toasts = new Map(Array.from(this._toasts));
-    return result;
-  }
-  /**
-   *
-   * @param {String|Number} id
-   * @returns {ToastOptions | false}
-   */
-  async del(id) {
-    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'
-      );
-    const el = this.renderRoot.querySelector(`#${id}`);
-    if (!this._toasts.has(id))
-      return false;
-    await el.collapse();
-    const result = this._toasts.delete(id);
-    this._toasts = new Map(Array.from(this._toasts));
-    return result;
-  }
-  render() {
-    return html22`
-      <aside class="${toaster.container}">
-        <div class="${toaster.toaster}" id="w-toast-container-list">
-          ${repeat2(
-      this._toastsArray,
-      (toast3) => toast3.id,
-      (toast3) => html22` <w-toast
-                class="${toaster.content}"
-                id="${toast3.id}"
-                type="${toast3.type}"
-                text="${toast3.text}"
-                ?canclose=${toast3.canclose}
-                @close=${() => this.del(toast3.id)}
-              >
-              </w-toast>`
-    )}
-        </div>
-      </aside>
-    `;
-  }
-};
-__publicField(WarpToastContainer, "styles", [
-  WarpElement14.styles,
-  css9`
-      :host {
-        display: block;
-      }
-    `
-]);
-__publicField(WarpToastContainer, "properties", {
-  _toasts: { state: true }
-});
-if (!customElements.get("w-toast-container")) {
-  customElements.define("w-toast-container", WarpToastContainer);
-}
-
 // packages/utils/expand-transition.js
-import { css as css10, html as html23 } from "lit";
-import WarpElement15 from "@warp-ds/elements-core";
+import { css as css10, html as html24 } from "lit";
+import WarpElement16 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined7 } from "lit/directives/if-defined.js";
-var ExpandTransition = class extends WarpElement15 {
+var ExpandTransition = class extends WarpElement16 {
   constructor() {
     super();
     this.show = false;
@@ -4368,8 +4483,8 @@ var ExpandTransition = class extends WarpElement15 {
     return this != null ? this : null;
   }
   render() {
-    return html23`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>
-      ${this._removeElement ? html23`` : html23`<slot></slot>`}
+    return html24`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>
+      ${this._removeElement ? html24`` : html24`<slot></slot>`}
     </div>`;
   }
 };
@@ -4381,7 +4496,7 @@ __publicField(ExpandTransition, "properties", {
   _removeElement: { type: Boolean, state: true }
 });
 __publicField(ExpandTransition, "styles", [
-  WarpElement15.styles,
+  WarpElement16.styles,
   css10`
       :host {
         display: block;
@@ -4393,10 +4508,10 @@ if (!customElements.get("w-expand-transition")) {
 }
 
 // packages/utils/unstyled-heading.js
-import { html as html24 } from "lit";
-import WarpElement16 from "@warp-ds/elements-core";
+import { html as html25 } from "lit";
+import WarpElement17 from "@warp-ds/elements-core";
 import { unsafeHTML as unsafeHTML2 } from "lit/directives/unsafe-html.js";
-var UnstyledHeading = class extends WarpElement16 {
+var UnstyledHeading = class extends WarpElement17 {
   get _markup() {
     return `<h${this.level}
     style="margin: 0; font-weight: unset; font-size: unset; line-height: unset;"
@@ -4406,13 +4521,13 @@ var UnstyledHeading = class extends WarpElement16 {
 `;
   }
   render() {
-    return !this.level ? html24`<slot></slot>` : unsafeHTML2(this._markup);
+    return !this.level ? html25`<slot></slot>` : unsafeHTML2(this._markup);
   }
 };
 __publicField(UnstyledHeading, "properties", {
   level: { type: Number }
 });
-__publicField(UnstyledHeading, "styles", [WarpElement16.styles]);
+__publicField(UnstyledHeading, "styles", [WarpElement17.styles]);
 if (!customElements.get("w-unstyled-heading")) {
   customElements.define("w-unstyled-heading", UnstyledHeading);
 }
@@ -4429,6 +4544,7 @@ export {
   WarpButton,
   WarpCard,
   WarpExpandable,
+  WarpPill,
   WarpSelect,
   WarpTextField,
   WarpToast,