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

package/dist/index.js

@@ -9,7 +9,7 @@ var X = (t, e, r) => (Br(t, e, "read from private field"), r ? r.call(t) : e.get
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
 };
-import { html as m, css as se } from "lit";
+import { html as m, css as se, nothing as Pr } from "lit";
 import q from "@warp-ds/elements-core";
 import { ifDefined as I } from "lit/directives/if-defined.js";
 import { classMap as Yt } from "lit/directives/class-map.js";
@@ -87,7 +87,7 @@ const Te = {
   iconLoading: "animate-bounce",
   content: "self-center mr-8 py-4 last-child:mb-0",
   close: "bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active"
-}, Pr = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block", W = {
+}, Ar = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block", W = {
   expandable: "will-change-height",
   expandableTitle: "font-bold i-text-$color-expandable-title-text",
   expandableBox: "i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 " + oe.box,
@@ -100,7 +100,7 @@ const Te = {
   chevronCollapse: "rotate-180",
   expansion: "overflow-hidden",
   expansionNotExpanded: "h-0 invisible",
-  button: Pr + " hover:underline focus:underline",
+  button: Ar + " hover:underline focus:underline",
   buttonBox: "w-full text-left relative inline-flex items-center " + oe.box,
   paddingTop: "pt-0",
   title: "flex justify-between items-center",
@@ -254,12 +254,12 @@ const Te = {
   helpText: "text-xs mt-4 block i-text-$color-helptext-text",
   helpTextValid: "i-text-$color-helptext-text-positive",
   helpTextInvalid: "i-text-$color-helptext-text-negative"
-}, tr = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ", Ar = {
+}, tr = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ", Rr = {
   wrapper: tr + "right-0",
   wrapperWithLabel: "w-max pr-12",
   wrapperWithIcon: "w-40",
   label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
-}, Rr = {
+}, Mr = {
   wrapper: tr + "left-0",
   wrapperWithLabel: "w-max pl-12",
   wrapperWithIcon: "w-40",
@@ -270,13 +270,13 @@ const Te = {
   link: "i-text-$color-breadcrumbs-link-text",
   separator: "select-none i-text-$color-breadcrumbs-icon",
   a11y: "sr-only"
-}, Mr = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}, Nr = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 function Re(t) {
   return class extends t {
     static createProperty(e, r) {
       let i = r;
       (typeof (r == null ? void 0 : r.attribute) > "u" || (r == null ? void 0 : r.attribute) === !0) && (i = Object.assign({}, r, {
-        attribute: Mr(e.toString())
+        attribute: Nr(e.toString())
       })), super.createProperty(e, i);
     }
   };
@@ -294,12 +294,12 @@ function G(t) {
       e[o] = i;
   return Yt(e);
 }
-function Nr() {
+function Ir() {
   return `m${Math.random().toString(36).slice(2)}`;
 }
 class ht extends q {
   get _classBase() {
-    return this.slot === "suffix" ? Ar : Rr;
+    return this.slot === "suffix" ? Rr : Mr;
   }
   get _classes() {
     return G({
@@ -467,7 +467,7 @@ function Mt(t, e, r) {
   }
   return f;
 }
-const Ir = async (t, e, r) => {
+const Qr = async (t, e, r) => {
   const { placement: i = "bottom", strategy: o = "absolute", middleware: n = [], platform: a } = r, l = await (a.isRTL == null ? void 0 : a.isRTL(e));
   let d = await a.getElementRects({ reference: t, floating: e, strategy: o }), { x, y: w } = Mt(d, i, l), f = i, D = {}, h = 0;
   for (let y = 0; y < n.length; y++) {
@@ -490,11 +490,11 @@ async function ir(t, e) {
   const { x: i, y: o, platform: n, rects: a, elements: l, strategy: d } = t, { boundary: x = "clippingAncestors", rootBoundary: w = "viewport", elementContext: f = "floating", altBoundary: D = !1, padding: h = 0 } = e, y = rr(h), _ = l[D ? f === "floating" ? "reference" : "floating" : f], C = Je(await n.getClippingRect({ element: (r = await (n.isElement == null ? void 0 : n.isElement(_))) == null || r ? _ : _.contextElement || await (n.getDocumentElement == null ? void 0 : n.getDocumentElement(l.floating)), boundary: x, rootBoundary: w, strategy: d })), N = Je(n.convertOffsetParentRelativeRectToViewportRelativeRect ? await n.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: f === "floating" ? { ...a.floating, x: i, y: o } : a.reference, offsetParent: await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(l.floating)), strategy: d }) : a[f]);
   return { top: C.top - N.top + y.top, bottom: N.bottom - C.bottom + y.bottom, left: C.left - N.left + y.left, right: N.right - C.right + y.right };
 }
-const Qr = Math.min, Ur = Math.max;
+const Ur = Math.min, Fr = Math.max;
 function ft(t, e, r) {
-  return Ur(t, Qr(e, r));
+  return Fr(t, Ur(e, r));
 }
-const Fr = (t) => ({ name: "arrow", options: t, async fn(e) {
+const Hr = (t) => ({ name: "arrow", options: t, async fn(e) {
   const { element: r, padding: i = 0 } = t ?? {}, { x: o, y: n, placement: a, rects: l, platform: d } = e;
   if (r == null)
     return {};
@@ -503,23 +503,23 @@ const Fr = (t) => ({ name: "arrow", options: t, async fn(e) {
   R === 0 && (R = l.floating[h]);
   const ie = N / 2 - Q / 2, J = x[_], P = R - y[h] - x[C], F = R / 2 - y[h] / 2 + ie, V = ft(J, F, P), Z = (D === "start" ? x[_] : x[C]) > 0 && F !== V && l.reference[h] <= l.floating[h];
   return { [f]: w[f] - (Z ? F < J ? J - F : P - F : 0), data: { [f]: V, centerOffset: F - V } };
-} }), Hr = { left: "right", right: "left", bottom: "top", top: "bottom" };
+} }), jr = { left: "right", right: "left", bottom: "top", top: "bottom" };
 function Ge(t) {
-  return t.replace(/left|right|bottom|top/g, (e) => Hr[e]);
+  return t.replace(/left|right|bottom|top/g, (e) => jr[e]);
 }
-function jr(t, e, r) {
+function Wr(t, e, r) {
   r === void 0 && (r = !1);
   const i = nt(t), o = Ne(t), n = Bt(o);
   let a = o === "x" ? i === (r ? "end" : "start") ? "right" : "left" : i === "start" ? "bottom" : "top";
   return e.reference[n] > e.floating[n] && (a = Ge(a)), { main: a, cross: Ge(a) };
 }
-const Wr = { start: "end", end: "start" };
+const Vr = { start: "end", end: "start" };
 function Nt(t) {
-  return t.replace(/start|end/g, (e) => Wr[e]);
+  return t.replace(/start|end/g, (e) => Vr[e]);
 }
-const Vr = ["top", "right", "bottom", "left"];
-Vr.reduce((t, e) => t.concat(e, e + "-start", e + "-end"), []);
-const zr = function(t) {
+const zr = ["top", "right", "bottom", "left"];
+zr.reduce((t, e) => t.concat(e, e + "-start", e + "-end"), []);
+const Jr = function(t) {
   return t === void 0 && (t = {}), { name: "flip", options: t, async fn(e) {
     var r;
     const { placement: i, middlewareData: o, rects: n, initialPlacement: a, platform: l, elements: d } = e, { mainAxis: x = !0, crossAxis: w = !0, fallbackPlacements: f, fallbackStrategy: D = "bestFit", flipAlignment: h = !0, ...y } = t, _ = Me(i), C = f || (_ === a || !h ? [Ge(a)] : function(F) {
@@ -528,7 +528,7 @@ const zr = function(t) {
     }(a)), N = [a, ...C], Q = await ir(e, y), U = [];
     let R = ((r = o.flip) == null ? void 0 : r.overflows) || [];
     if (x && U.push(Q[_]), w) {
-      const { main: F, cross: V } = jr(i, n, await (l.isRTL == null ? void 0 : l.isRTL(d.floating)));
+      const { main: F, cross: V } = Wr(i, n, await (l.isRTL == null ? void 0 : l.isRTL(d.floating)));
       U.push(Q[F], Q[V]);
     }
     if (R = [...R, { placement: i, overflows: U }], !U.every((F) => F <= 0)) {
@@ -552,7 +552,7 @@ const zr = function(t) {
     }
     return {};
   } };
-}, Jr = function(t) {
+}, Gr = function(t) {
   return t === void 0 && (t = 0), { name: "offset", options: t, async fn(e) {
     const { x: r, y: i } = e, o = await async function(n, a) {
       const { placement: l, platform: d, elements: x } = n, w = await (d.isRTL == null ? void 0 : d.isRTL(x.floating)), f = Me(l), D = nt(l), h = Ne(l) === "x", y = ["left", "top"].includes(f) ? -1 : 1, _ = w && h ? -1 : 1, C = typeof a == "function" ? a(n) : a;
@@ -562,15 +562,15 @@ const zr = function(t) {
     return { x: r + o.x, y: i + o.y, data: o };
   } };
 };
-function Gr(t) {
+function Kr(t) {
   return t === "x" ? "y" : "x";
 }
-const Kr = function(t) {
+const Xr = function(t) {
   return t === void 0 && (t = {}), { name: "shift", options: t, async fn(e) {
     const { x: r, y: i, placement: o } = e, { mainAxis: n = !0, crossAxis: a = !1, limiter: l = { fn: (C) => {
       let { x: N, y: Q } = C;
       return { x: N, y: Q };
-    } }, ...d } = t, x = { x: r, y: i }, w = await ir(e, d), f = Ne(Me(o)), D = Gr(f);
+    } }, ...d } = t, x = { x: r, y: i }, w = await ir(e, d), f = Ne(Me(o)), D = Kr(f);
     let h = x[f], y = x[D];
     if (n) {
       const C = f === "y" ? "bottom" : "right";
@@ -619,7 +619,7 @@ function st(t) {
   const { overflow: e, overflowX: r, overflowY: i } = Ie(t);
   return /auto|scroll|overlay|hidden/.test(e + i + r);
 }
-function Xr(t) {
+function Yr(t) {
   return ["table", "td", "th"].includes(ne(t));
 }
 function It(t) {
@@ -649,7 +649,7 @@ function at(t) {
 function ar(t) {
   return ve(de(t)).left + at(t).scrollLeft;
 }
-function Yr(t, e, r) {
+function Zr(t, e, r) {
   const i = re(e), o = de(e), n = ve(t, i && function(d) {
     const x = ve(d);
     return Ke(x.width) !== d.offsetWidth || Ke(x.height) !== d.offsetHeight;
@@ -673,7 +673,7 @@ function Ut(t) {
 function gt(t) {
   const e = ae(t);
   let r = Ut(t);
-  for (; r && Xr(r) && getComputedStyle(r).position === "static"; )
+  for (; r && Yr(r) && getComputedStyle(r).position === "static"; )
     r = Ut(r);
   return r && (ne(r) === "html" || ne(r) === "body" && getComputedStyle(r).position === "static" && !It(r)) ? e : r || function(i) {
     let o = lr(i);
@@ -722,7 +722,7 @@ function Ht(t, e, r) {
     return Ie(l || n).direction === "rtl" && (w += Be(n.clientWidth, l ? l.clientWidth : 0) - d), { width: d, height: x, x: w, y: f };
   }(de(t)));
 }
-function Zr(t) {
+function ei(t) {
   const e = ur(t), r = ["absolute", "fixed"].includes(Ie(t).position) && re(t) ? gt(t) : t;
   return Ee(r) ? e.filter((i) => Ee(i) && function(o, n) {
     const a = n.getRootNode == null ? void 0 : n.getRootNode();
@@ -739,9 +739,9 @@ function Zr(t) {
     return !1;
   }(i, r) && ne(i) !== "body") : [];
 }
-const ei = { getClippingRect: function(t) {
+const ti = { getClippingRect: function(t) {
   let { element: e, boundary: r, rootBoundary: i, strategy: o } = t;
-  const n = [...r === "clippingAncestors" ? Zr(e) : [].concat(r), i], a = n[0], l = n.reduce((d, x) => {
+  const n = [...r === "clippingAncestors" ? ei(e) : [].concat(r), i], a = n[0], l = n.reduce((d, x) => {
     const w = Ht(e, x, o);
     return d.top = Be(w.top, d.top), d.right = Qt(w.right, d.right), d.bottom = Qt(w.bottom, d.bottom), d.left = Be(w.left, d.left), d;
   }, Ht(e, a, o));
@@ -760,40 +760,40 @@ const ei = { getClippingRect: function(t) {
   return { ...e, x: e.x - a.scrollLeft + l.x, y: e.y - a.scrollTop + l.y };
 }, isElement: Ee, getDimensions: Ft, getOffsetParent: gt, getDocumentElement: de, getElementRects: (t) => {
   let { reference: e, floating: r, strategy: i } = t;
-  return { reference: Yr(e, gt(r), i), floating: { ...Ft(r), x: 0, y: 0 } };
-}, getClientRects: (t) => Array.from(t.getClientRects()), isRTL: (t) => Ie(t).direction === "rtl" }, ti = (t, e, r) => Ir(t, e, { platform: ei, ...r }), Xe = "top", Ye = "bottom", bt = "left", mt = "right", Ue = {
+  return { reference: Zr(e, gt(r), i), floating: { ...Ft(r), x: 0, y: 0 } };
+}, getClientRects: (t) => Array.from(t.getClientRects()), isRTL: (t) => Ie(t).direction === "rtl" }, ri = (t, e, r) => Qr(t, e, { platform: ti, ...r }), Xe = "top", Ye = "bottom", bt = "left", mt = "right", Ue = {
   [Xe]: Ye,
   [Ye]: Xe,
   [bt]: mt,
   [mt]: bt
-}, ri = {
+}, ii = {
   [bt]: -45,
   [Xe]: 45,
   [mt]: 135,
   [Ye]: -135
-}, jt = "calc(50% - 7px)", ii = (t) => [Xe, Ye].includes(t);
-function oi({ actualDirection: t, directionName: e, arrowEl: r }) {
+}, jt = "calc(50% - 7px)", oi = (t) => [Xe, Ye].includes(t);
+function ni({ actualDirection: t, directionName: e, arrowEl: r }) {
   if (!r)
     return;
   t = e;
-  const i = ii(e);
+  const i = oi(e);
   r.style.left = i ? jt : "", r.style.top = i ? "" : jt;
 }
-async function ni(t) {
+async function si(t) {
   var o, n;
   if (!t.isShowing)
     return;
   if (await ((o = t == null ? void 0 : t.waitForDOM) == null ? void 0 : o.call(t)), t.isCallout)
-    return oi(t);
-  const e = await ti(t.targetEl, t.attentionEl, {
+    return ni(t);
+  const e = await ri(t.targetEl, t.attentionEl, {
     placement: t.directionName,
     middleware: [
       // Should we make this configurable, but have these as sane defaults?
-      zr(),
-      Jr(8),
-      Kr({ padding: 16 }),
+      Jr(),
+      Gr(8),
+      Xr({ padding: 16 }),
       // @ts-ignore
-      Fr({ element: t.noArrow ? void 0 : t.arrowEl })
+      Hr({ element: t.noArrow ? void 0 : t.arrowEl })
       // FIXME
     ]
   });
@@ -806,7 +806,7 @@ async function ni(t) {
   t.arrowEl && (t.arrowEl.style.left = r ? r + "px" : "", t.arrowEl.style.top = i ? i + "px" : "");
 }
 var vt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function si(t) {
+function ai(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
 var dr = {}, hr = {};
@@ -917,7 +917,7 @@ var dr = {}, hr = {};
   }
   t.unraw = D, t.default = D;
 })(dr);
-const ai = /* @__PURE__ */ si(dr);
+const li = /* @__PURE__ */ ai(dr);
 var Pe = {}, pr = {}, fr = { exports: {} };
 (function(t) {
   (function(e, r) {
@@ -1284,13 +1284,13 @@ Use (?: … ) instead`);
     };
   });
 })(fr);
-var li = fr.exports;
+var ci = fr.exports;
 (function(t) {
   var e = vt && vt.__importDefault || function(i) {
     return i && i.__esModule ? i : { default: i };
   };
   Object.defineProperty(t, "__esModule", { value: !0 }), t.lexer = t.states = void 0;
-  const r = e(li);
+  const r = e(ci);
   t.states = {
     body: {
       doubleapos: { match: "''", value: () => "'" },
@@ -1354,7 +1354,7 @@ const br = pr, Fe = (t) => ({
   text: t.text,
   lineBreaks: t.lineBreaks
 }), ut = (t) => t === "plural" || t === "select" || t === "selectordinal";
-function ci(t, e) {
+function ui(t, e) {
   let r = "", i = "";
   for (const n of e) {
     const a = n.ctx.text;
@@ -1377,7 +1377,7 @@ function ci(t, e) {
     ctx: Object.assign({}, e[0].ctx, { text: i })
   }];
 }
-const ui = [
+const di = [
   "number",
   "date",
   "time",
@@ -1392,7 +1392,7 @@ class H extends Error {
   }
 }
 Pe.ParseError = H;
-class di {
+class hi {
   constructor(e, r) {
     var i, o, n, a;
     this.lexer = br.lexer.reset(e), this.cardinalKeys = (i = r == null ? void 0 : r.cardinal) !== null && i !== void 0 ? i : Wt, this.ordinalKeys = (o = r == null ? void 0 : r.ordinal) !== null && o !== void 0 ? o : Wt, this.strict = (n = r == null ? void 0 : r.strict) !== null && n !== void 0 ? n : !1, this.strictPluralKeys = (a = r == null ? void 0 : r.strictPluralKeys) !== null && a !== void 0 ? a : !0;
@@ -1443,7 +1443,7 @@ class di {
     const i = Fe(e), o = this.lexer.next();
     if (!o)
       throw new H(null, "Unexpected message end");
-    if (i.text += o.text, i.lineBreaks += o.lineBreaks, this.strict && (o.type === "func-simple" || o.type === "func-args") && !ui.includes(o.value)) {
+    if (i.text += o.text, i.lineBreaks += o.lineBreaks, this.strict && (o.type === "func-simple" || o.type === "func-args") && !di.includes(o.value)) {
       const n = `Invalid strict mode function arg type: ${o.value}`;
       throw new H(e, n);
     }
@@ -1471,7 +1471,7 @@ class di {
           throw new H(o, a);
         }
         let n = this.parseBody(this.strict ? !1 : r);
-        return this.strict && n.length > 0 && (n = ci(e, n)), {
+        return this.strict && n.length > 0 && (n = ui(e, n)), {
           type: "function",
           arg: e.value,
           key: o.value,
@@ -1515,10 +1515,10 @@ class di {
     throw new H(null, "Unexpected message end");
   }
 }
-function hi(t, e = {}) {
-  return new di(t, e).parse();
+function pi(t, e = {}) {
+  return new hi(t, e).parse();
 }
-gr = Pe.parse = hi;
+gr = Pe.parse = pi;
 function mr(t, e) {
   return t.filter((r) => r.type !== "content").length ? t.map((r) => {
     var n;
@@ -1548,7 +1548,7 @@ function mr(t, e) {
     ];
   }) : t.map((r) => e(r.value)).join("");
 }
-function pi(t, e = (r) => r) {
+function fi(t, e = (r) => r) {
   try {
     return mr(gr(t), e);
   } catch (r) {
@@ -1557,7 +1557,7 @@ function pi(t, e = (r) => r) {
 Message: ${t}`), t;
   }
 }
-const te = (t) => typeof t == "string", fi = (t) => typeof t == "function", Vt = /* @__PURE__ */ new Map();
+const te = (t) => typeof t == "string", gi = (t) => typeof t == "function", Vt = /* @__PURE__ */ new Map();
 function At(t) {
   return [...Array.isArray(t) ? t : [t], "en"];
 }
@@ -1594,7 +1594,7 @@ function et(t, e, r) {
   const i = e.join("-");
   return `${t}-${i}-${JSON.stringify(r)}`;
 }
-const yr = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g, gi = (t, e, r = {}) => {
+const yr = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g, bi = (t, e, r = {}) => {
   e = e || t;
   const i = (n) => te(n) ? r[n] || { style: n } : n, o = (n, a) => {
     const l = Object.keys(r).length ? i("number") : {}, d = yt(e, n, l);
@@ -1615,9 +1615,9 @@ const yr = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g, gi = (t, e, r = {}) => {
     undefined: (n) => n
   };
 };
-function bi(t, e, r) {
+function mi(t, e, r) {
   return (i, o = {}) => {
-    const n = gi(e, r, o), a = (d) => Array.isArray(d) ? d.reduce((x, w) => {
+    const n = bi(e, r, o), a = (d) => Array.isArray(d) ? d.reduce((x, w) => {
       if (te(w))
         return x + w;
       const [f, D, h] = w;
@@ -1628,13 +1628,13 @@ function bi(t, e, r) {
       const _ = n[D](i[f], y);
       return _ == null ? x : x + _;
     }, "") : d, l = a(t);
-    return te(l) && yr.test(l) ? ai(l.trim()) : te(l) ? l.trim() : l;
+    return te(l) && yr.test(l) ? li(l.trim()) : te(l) ? l.trim() : l;
   };
 }
-var mi = Object.defineProperty, vi = (t, e, r) => e in t ? mi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, yi = (t, e, r) => (vi(t, typeof e != "symbol" ? e + "" : e, r), r);
-class $i {
+var vi = Object.defineProperty, yi = (t, e, r) => e in t ? vi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, $i = (t, e, r) => (yi(t, typeof e != "symbol" ? e + "" : e, r), r);
+class xi {
   constructor() {
-    yi(this, "_events", {});
+    $i(this, "_events", {});
   }
   on(e, r) {
     return this._hasEvent(e) || (this._events[e] = []), this._events[e].push(r), () => this.removeListener(e, r);
@@ -1652,8 +1652,8 @@ class $i {
     return Array.isArray(this._events[e]);
   }
 }
-var xi = Object.defineProperty, wi = (t, e, r) => e in t ? xi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, we = (t, e, r) => (wi(t, typeof e != "symbol" ? e + "" : e, r), r);
-class _i extends $i {
+var wi = Object.defineProperty, _i = (t, e, r) => e in t ? wi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, we = (t, e, r) => (_i(t, typeof e != "symbol" ? e + "" : e, r), r);
+class ki extends xi {
   constructor(e) {
     super(), we(this, "_locale"), we(this, "_locales"), we(this, "_localeData"), we(this, "_messages"), we(this, "_missing"), we(this, "t", this._.bind(this)), this._messages = {}, this._localeData = {}, e.missing != null && (this._missing = e.missing), e.messages != null && this.load(e.messages), e.localeData != null && this.loadLocaleData(e.localeData), (e.locale != null || e.locales != null) && this.activate(e.locale, e.locales);
   }
@@ -1704,10 +1704,10 @@ class _i extends $i {
     te(e) || (r = e.values || r, i = e.message, e = e.id);
     const n = !this.messages[e], a = this._missing;
     if (a && n)
-      return fi(a) ? a(this._locale, e) : a;
+      return gi(a) ? a(this._locale, e) : a;
     n && this.emit("missing", { id: e, locale: this._locale });
     let l = this.messages[e] || i || e;
-    return process.env.NODE_ENV !== "production" && (l = te(l) ? pi(l) : l), te(l) && yr.test(l) ? JSON.parse(`"${l}"`) : te(l) ? l : bi(
+    return process.env.NODE_ENV !== "production" && (l = te(l) ? fi(l) : l), te(l) && yr.test(l) ? JSON.parse(`"${l}"`) : te(l) ? l : mi(
       l,
       this._locale,
       this._locales
@@ -1720,13 +1720,13 @@ class _i extends $i {
     return yt(this._locales || this._locale, e, r);
   }
 }
-function ki(t = {}) {
-  return new _i(t);
+function Si(t = {}) {
+  return new ki(t);
 }
-const z = ki(), Si = JSON.parse('{"attention.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.pointingDown":"pointing down","attention.pointingLeft":"pointing left","attention.pointingRight":"pointing right","attention.pointingUp":"pointing up","attention.popover":"popover speech bubble","attention.tooltip":"tooltip"}'), Ei = JSON.parse('{"attention.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.pointingDown":"pointing down","attention.pointingLeft":"pointing left","attention.pointingRight":"pointing right","attention.pointingUp":"pointing up","attention.popover":"popover speech bubble","attention.tooltip":"tooltip"}'), Ci = JSON.parse('{"attention.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.pointingDown":"pointing down","attention.pointingLeft":"pointing left","attention.pointingRight":"pointing right","attention.pointingUp":"pointing up","attention.popover":"popover speech bubble","attention.tooltip":"tooltip"}'), Li = ["en", "nb", "fi"], $r = "en", Jt = (t) => Li.find(
+const z = Si(), Ei = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Ci = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Li = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}'), Ti = ["en", "nb", "fi"], $r = "en", Jt = (t) => Ti.find(
   (e) => t === e || t.toLowerCase().includes(e)
 ) || $r;
-function Ti() {
+function Di() {
   if (typeof window > "u") {
     const t = process.env.NMP_LANGUAGE || Intl.DateTimeFormat().resolvedOptions().locale;
     return Jt(t);
@@ -1738,13 +1738,13 @@ function Ti() {
     return console.warn("could not detect locale, falling back to source locale", t), $r;
   }
 }
-const Di = (t, e, r, i) => t === "nb" ? r : t === "fi" ? i : e, lt = (t, e, r) => {
-  const i = Ti(), o = Di(i, t, e, r);
+const Oi = (t, e, r, i) => t === "nb" ? r : t === "fi" ? i : e, lt = (t, e, r) => {
+  const i = Di(), o = Oi(i, t, e, r);
   z.load(i, o), z.activate(i);
 };
 class $t extends Re(q) {
   constructor() {
-    super(), lt(Si, Ei, Ci), this.show = !1, this.tooltip = !1, this.callout = !1, this.popover = !1, this.highlight = !1, this.noArrow = !1;
+    super(), lt(Ei, Ci, Li), this.show = !1, this.tooltip = !1, this.callout = !1, this.popover = !1, this.highlight = !1, this.noArrow = !1;
   }
   connectedCallback() {
     if (super.connectedCallback(), !this.placement || !Object.keys(Ue).includes(this.placement))
@@ -1781,31 +1781,31 @@ ${JSON.stringify(
       attentionEl: this._attentionEl,
       targetEl: this._targetEl,
       noArrow: this.noArrow
-    }, ni(this.attentionState);
+    }, si(this.attentionState);
   }
   pointingAtDirection() {
     switch (Ue[this._actualDirection]) {
       case "top":
         return z._({
-          id: "attention.pointingUp",
+          id: "attention.aria.pointingUp",
           message: "pointing up",
           comment: "Default screenreader message for top direction in the attention component"
         });
       case "right":
         return z._({
-          id: "attention.pointingRight",
+          id: "attention.aria.pointingRight",
           message: "pointing right",
           comment: "Default screenreader message for right direction in the attention component"
         });
       case "bottom":
         return z._({
-          id: "attention.pointingDown",
+          id: "attention.aria.pointingDown",
           message: "pointing down",
           comment: "Default screenreader message for bottom direction in the attention component"
         });
       case "left":
         return z._({
-          id: "attention.pointingLeft",
+          id: "attention.aria.pointingLeft",
           message: "pointing left",
           comment: "Default screenreader message for left direction in the attention component"
         });
@@ -1817,19 +1817,19 @@ ${JSON.stringify(
     switch (!0) {
       case this.tooltip:
         return z._({
-          id: "attention.tooltip",
+          id: "attention.aria.tooltip",
           message: "tooltip",
           comment: "Default screenreader message for tooltip in the attention component"
         });
       case this.callout:
         return z._({
-          id: "attention.callout",
+          id: "attention.aria.callout",
           message: "callout speech bubble",
           comment: "Default screenreader message for callout speech bubble in the attention component"
         });
       case this.popover:
         return z._({
-          id: "attention.popover",
+          id: "attention.aria.popover",
           message: "popover speech bubble",
           comment: "Default screenreader message for popover speech bubble in the attention component"
         });
@@ -1848,7 +1848,7 @@ ${JSON.stringify(
   }
   setAriaLabels() {
     if (this._targetEl && !this._targetEl.getAttribute("aria-details")) {
-      const e = this._messageEl.id || (this._messageEl.id = Nr());
+      const e = this._messageEl.id || (this._messageEl.id = Ir());
       this._targetEl.setAttribute("aria-details", e);
     }
   }
@@ -1894,7 +1894,7 @@ ${JSON.stringify(
           id="arrow"
           role="img"
           class="${this._arrowClasses}"
-          style="transform:rotate(${ri[this._arrowDirection]}deg);
+          style="transform:rotate(${ii[this._arrowDirection]}deg);
           margin-${// border alignment is off by a fraction of a pixel, this fixes it
     this._arrowDirection.charAt(0).toLowerCase() + this._arrowDirection.slice(1)}:-0.5px;"
         />`;
@@ -2008,9 +2008,12 @@ class wt extends q {
       [oe.bordered]: this.bordered
     });
   }
+  get _optOutRoleWithDefault() {
+    return this.role === "" ? Pr : this.role ?? "region";
+  }
   render() {
     return m`
-      <div class="${this._class}">
+      <div role="${this._optOutRoleWithDefault}" class="${this._class}">
         <slot></slot>
       </div>
     `;
@@ -2020,7 +2023,8 @@ T(wt, "properties", {
   bleed: { type: Boolean },
   bordered: { type: Boolean },
   info: { type: Boolean },
-  neutral: { type: Boolean }
+  neutral: { type: Boolean },
+  role: { type: String }
 }), // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.
 // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
@@ -2037,15 +2041,15 @@ T(wt, "styles", [
     `
 ]);
 customElements.get("w-box") || customElements.define("w-box", wt);
-function Oi(t, e) {
+function qi(t, e) {
   return t.flatMap((r) => [r, e]).slice(0, -1);
 }
-const qi = JSON.parse('{"breadcrumbs.ariaLabel":"You are here"}'), Bi = JSON.parse('{"breadcrumbs.ariaLabel":"Her er du"}'), Pi = JSON.parse('{"breadcrumbs.ariaLabel":"Olet tässä"}'), Ai = m`<span class=${_e.separator}
+const Bi = JSON.parse('{"breadcrumbs.ariaLabel":"You are here"}'), Pi = JSON.parse('{"breadcrumbs.ariaLabel":"Her er du"}'), Ai = JSON.parse('{"breadcrumbs.ariaLabel":"Olet tässä"}'), Ri = m`<span class=${_e.separator}
   >/</span
 >`;
 class _t extends Re(q) {
   constructor() {
-    super(), lt(qi, Bi, Pi), this.ariaLabel = z._({
+    super(), lt(Bi, Pi, Ai), this.ariaLabel = z._({
       id: "breadcrumbs.ariaLabel",
       message: "You are here",
       comment: "Default screenreader message for the breadcrumb component"
@@ -2066,7 +2070,7 @@ class _t extends Re(q) {
         i.tagName === "A" ? _e.link : _e.text
       ), i;
     });
-    this._children = Oi(r, Ai);
+    this._children = qi(r, Ri);
   }
   render() {
     return m`
@@ -2146,7 +2150,7 @@ T(kt, "properties", {
   api: { type: String, attribute: !0, reflect: !0 }
 }), T(kt, "styles", [q.styles]);
 customElements.get("w-broadcast") || customElements.define("w-broadcast", kt);
-const Ri = JSON.parse('{"button.aria.loading":"Loading..."}'), Mi = JSON.parse('{"button.aria.loading":"Laster..."}'), Ni = JSON.parse('{"button.aria.loading":"Ladataan..."}'), Gt = [
+const Mi = JSON.parse('{"button.aria.loading":"Loading..."}'), Ni = JSON.parse('{"button.aria.loading":"Laster..."}'), Ii = JSON.parse('{"button.aria.loading":"Ladataan..."}'), Gt = [
   "primary",
   "secondary",
   "negative",
@@ -2156,7 +2160,7 @@ const Ri = JSON.parse('{"button.aria.loading":"Loading..."}'), Mi = JSON.parse('
 ];
 class je extends Re(q) {
   constructor() {
-    super(), lt(Ri, Mi, Ni), this.variant = "secondary", this.ariaValueTextLoading = z._({
+    super(), lt(Mi, Ni, Ii), this.variant = "secondary", this.ariaValueTextLoading = z._({
       id: "button.aria.loading",
       message: "Loading...",
       comment: "Screenreader message for buttons that are loading"
@@ -2437,7 +2441,7 @@ T(Et, "styles", [
     `
 ]);
 customElements.get("w-expandable") || customElements.define("w-expandable", Et);
-const Ii = JSON.parse('{"select.label.optional":"(optional)"}'), Qi = JSON.parse('{"select.label.optional":"(valgfritt)"}'), Ui = JSON.parse('{"select.label.optional":"(valinnainen)"}');
+const Qi = JSON.parse('{"select.label.optional":"(optional)"}'), Ui = JSON.parse('{"select.label.optional":"(valgfritt)"}'), Fi = JSON.parse('{"select.label.optional":"(valinnainen)"}');
 var tt, xr, rt, wr, it, _r, ot, kr, ke, We, Se, Ve;
 class Ct extends Re(q) {
   constructor() {
@@ -2448,7 +2452,7 @@ class Ct extends Re(q) {
     ge(this, ot);
     ge(this, ke);
     ge(this, Se);
-    lt(Ii, Qi, Ui), this._options = this.innerHTML;
+    lt(Qi, Ui, Fi), this._options = this.innerHTML;
   }
   render() {
     return m`<div class="${xe.wrapper}">
@@ -2659,7 +2663,7 @@ T(Lt, "styles", [
     `
 ]);
 customElements.get("w-textfield") || customElements.define("w-textfield", Lt);
-function Yi(t, e) {
+function Zi(t, e) {
   if (!Ae)
     return;
   const r = customElements.get("w-toast-container").init(), i = {
@@ -2671,10 +2675,10 @@ function Yi(t, e) {
   };
   return r.set(i), i;
 }
-function Zi(t) {
+function eo(t) {
   return Ae ? customElements.get("w-toast-container").init().del(t) : void 0;
 }
-function eo(t, e) {
+function to(t, e) {
   if (!Ae)
     return;
   const r = customElements.get("w-toast-container").init();
@@ -2691,9 +2695,9 @@ const Er = (t) => {
 }, Cr = (t) => {
   const e = Sr ? "var(--f-expansion-duration, 0.3s)" : "0.01s";
   t.style.transition = `height ${e}`, t.style.backfaceVisibility = "hidden", t.style.overflow = "hidden";
-}, Fi = (t, e) => () => {
+}, Hi = (t, e) => () => {
   t.style.height = "auto", t.style.overflow = null, e && e();
-}, Hi = (t) => () => {
+}, ji = (t) => () => {
   t && t();
 }, Lr = (t, e) => {
   const r = (() => {
@@ -2701,7 +2705,7 @@ const Er = (t) => {
       return new Promise((n) => {
         e = n;
       });
-  })(), i = Fi(t, e);
+  })(), i = Hi(t, e);
   Er(t), t.style.height = "auto";
   let o = t.scrollHeight;
   if (Rt && requestAnimationFrame(() => {
@@ -2714,7 +2718,7 @@ const Er = (t) => {
       return new Promise((n) => {
         e = n;
       });
-  })(), i = Hi(e);
+  })(), i = ji(e);
   Er(t);
   let o = t.scrollHeight;
   if (Rt && requestAnimationFrame(() => {
@@ -3009,7 +3013,7 @@ export {
   Lt as WarpTextField,
   Tt as WarpToast,
   Dt as WarpToastContainer,
-  Zi as removeToast,
-  Yi as toast,
-  eo as updateToast
+  eo as removeToast,
+  Zi as toast,
+  to as updateToast
 };