@warp-ds/elements 1.0.0-alpha.28 → 1.0.0-alpha.29

package/dist/elements.min.js

@@ -1,4 +1,5 @@
 import {css} from 'lit';
 export const styles = css`
-@import "https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/tokens/finn-no.css";
+@import "https://assets.finn.no/pkg/@warp-ds/fonts/v1/finn-no.css";
+@import "https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.37/tokens/finn-no.css";
 `;

package/dist/index.js

@@ -277,7 +277,7 @@ ao[nr] = !0, ao.elementProperties = /* @__PURE__ */ new Map(), ao.elementStyles
 var or;
 const Lo = window, no = Lo.trustedTypes, Nr = no ? no.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, To = "$lit$", R = `lit$${(Math.random() + "").slice(9)}$`, jr = "?" + R, ot = `<${jr}>`, Q = document, wo = () => Q.createComment(""), mo = (r) => r === null || typeof r != "object" && typeof r != "function", ge = Array.isArray, ue = (r) => ge(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", rr = `[ 	
 \f\r]`, uo = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Ir = /-->/g, Or = />/g, F = RegExp(`>|${rr}(?:([^\\s"'>=/]+)(${rr}*=${rr}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Hr = /'/g, Dr = /"/g, ve = /^(?:script|style|textarea|title)$/i, pe = (r) => (o, ...e) => ({ _$litType$: r, strings: o, values: e }), u = pe(1), D = pe(2), N = Symbol.for("lit-noChange"), f = Symbol.for("lit-nothing"), Ur = /* @__PURE__ */ new WeakMap(), G = Q.createTreeWalker(Q, 129, null, !1);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Hr = /'/g, Dr = /"/g, ve = /^(?:script|style|textarea|title)$/i, pe = (r) => (o, ...e) => ({ _$litType$: r, strings: o, values: e }), u = pe(1), D = pe(2), N = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), Ur = /* @__PURE__ */ new WeakMap(), G = Q.createTreeWalker(Q, 129, null, !1);
 function he(r, o) {
   if (!Array.isArray(r) || !r.hasOwnProperty("raw"))
     throw Error("invalid template strings array");
@@ -315,7 +315,7 @@ class xo {
               const v = s[i++];
               if (b.push(g), v !== void 0) {
                 const p = a.getAttribute(v.toLowerCase() + To).split(R), h = /([.?@])?(.*)/.exec(v);
-                d.push({ type: 1, index: c, name: h[2], strings: p, ctor: h[1] === "." ? fe : h[1] === "?" ? ke : h[1] === "@" ? $e : yo });
+                d.push({ type: 1, index: c, name: h[2], strings: p, ctor: h[1] === "." ? ke : h[1] === "?" ? fe : h[1] === "@" ? $e : yo });
               } else
                 d.push({ type: 6, index: c });
             }
@@ -388,7 +388,7 @@ class me {
 let Vo = class xe {
   constructor(o, e, t, a) {
     var c;
-    this.type = 2, this._$AH = f, this._$AN = void 0, this._$AA = o, this._$AB = e, this._$AM = t, this.options = a, this._$Cp = (c = a == null ? void 0 : a.isConnected) === null || c === void 0 || c;
+    this.type = 2, this._$AH = k, this._$AN = void 0, this._$AA = o, this._$AB = e, this._$AM = t, this.options = a, this._$Cp = (c = a == null ? void 0 : a.isConnected) === null || c === void 0 || c;
   }
   get _$AU() {
     var o, e;
@@ -406,7 +406,7 @@ let Vo = class xe {
     return this._$AB;
   }
   _$AI(o, e = this) {
-    o = oo(this, o, e), mo(o) ? o === f || o == null || o === "" ? (this._$AH !== f && this._$AR(), this._$AH = f) : o !== this._$AH && o !== N && this._(o) : o._$litType$ !== void 0 ? this.g(o) : o.nodeType !== void 0 ? this.$(o) : ue(o) ? this.T(o) : this._(o);
+    o = oo(this, o, e), mo(o) ? o === k || o == null || o === "" ? (this._$AH !== k && this._$AR(), this._$AH = k) : o !== this._$AH && o !== N && this._(o) : o._$litType$ !== void 0 ? this.g(o) : o.nodeType !== void 0 ? this.$(o) : ue(o) ? this.T(o) : this._(o);
   }
   k(o) {
     return this._$AA.parentNode.insertBefore(o, this._$AB);
@@ -415,7 +415,7 @@ let Vo = class xe {
     this._$AH !== o && (this._$AR(), this._$AH = this.k(o));
   }
   _(o) {
-    this._$AH !== f && mo(this._$AH) ? this._$AA.nextSibling.data = o : this.$(Q.createTextNode(o)), this._$AH = o;
+    this._$AH !== k && mo(this._$AH) ? this._$AA.nextSibling.data = o : this.$(Q.createTextNode(o)), this._$AH = o;
   }
   g(o) {
     var e;
@@ -453,7 +453,7 @@ let Vo = class xe {
 };
 class yo {
   constructor(o, e, t, a, c) {
-    this.type = 1, this._$AH = f, this._$AN = void 0, this.element = o, this.name = e, this._$AM = a, this.options = c, t.length > 2 || t[0] !== "" || t[1] !== "" ? (this._$AH = Array(t.length - 1).fill(new String()), this.strings = t) : this._$AH = f;
+    this.type = 1, this._$AH = k, this._$AN = void 0, this.element = o, this.name = e, this._$AM = a, this.options = c, t.length > 2 || t[0] !== "" || t[1] !== "" ? (this._$AH = Array(t.length - 1).fill(new String()), this.strings = t) : this._$AH = k;
   }
   get tagName() {
     return this.element.tagName;
@@ -470,29 +470,29 @@ class yo {
       const l = o;
       let d, n;
       for (o = c[0], d = 0; d < c.length - 1; d++)
-        n = oo(this, l[t + d], e, d), n === N && (n = this._$AH[d]), i || (i = !mo(n) || n !== this._$AH[d]), n === f ? o = f : o !== f && (o += (n ?? "") + c[d + 1]), this._$AH[d] = n;
+        n = oo(this, l[t + d], e, d), n === N && (n = this._$AH[d]), i || (i = !mo(n) || n !== this._$AH[d]), n === k ? o = k : o !== k && (o += (n ?? "") + c[d + 1]), this._$AH[d] = n;
     }
     i && !a && this.j(o);
   }
   j(o) {
-    o === f ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, o ?? "");
+    o === k ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, o ?? "");
   }
 }
-let fe = class extends yo {
+let ke = class extends yo {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(o) {
-    this.element[this.name] = o === f ? void 0 : o;
+    this.element[this.name] = o === k ? void 0 : o;
   }
 };
 const rt = no ? no.emptyScript : "";
-let ke = class extends yo {
+let fe = class extends yo {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(o) {
-    o && o !== f ? this.element.setAttribute(this.name, rt) : this.element.removeAttribute(this.name);
+    o && o !== k ? this.element.setAttribute(this.name, rt) : this.element.removeAttribute(this.name);
   }
 }, $e = class extends yo {
   constructor(o, e, t, a, c) {
@@ -500,9 +500,9 @@ let ke = class extends yo {
   }
   _$AI(o, e = this) {
     var t;
-    if ((o = (t = oo(this, o, e, 0)) !== null && t !== void 0 ? t : f) === N)
+    if ((o = (t = oo(this, o, e, 0)) !== null && t !== void 0 ? t : k) === N)
       return;
-    const a = this._$AH, c = o === f && a !== f || o.capture !== a.capture || o.once !== a.once || o.passive !== a.passive, i = o !== f && (a === f || c);
+    const a = this._$AH, c = o === k && a !== k || o.capture !== a.capture || o.once !== a.once || o.passive !== a.passive, i = o !== k && (a === k || c);
     c && this.element.removeEventListener(this.name, this, a), i && this.element.addEventListener(this.name, this, o), this._$AH = o;
   }
   handleEvent(o) {
@@ -521,7 +521,7 @@ class ye {
     oo(this, o);
   }
 }
-const et = { O: To, P: R, A: jr, C: 1, M: we, L: me, D: ue, R: oo, I: Vo, V: yo, H: ke, N: $e, U: fe, F: ye }, Fr = Lo.litHtmlPolyfillSupport;
+const et = { O: To, P: R, A: jr, C: 1, M: we, L: me, D: ue, R: oo, I: Vo, V: yo, H: fe, N: $e, U: ke, F: ye }, Fr = Lo.litHtmlPolyfillSupport;
 Fr == null || Fr(xo, Vo), ((or = Lo.litHtmlVersions) !== null && or !== void 0 ? or : Lo.litHtmlVersions = []).push("2.7.5");
 const tt = (r, o, e) => {
   var t, a;
@@ -539,7 +539,7 @@ const tt = (r, o, e) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var er, tr;
-let k = class extends ao {
+let f = class extends ao {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -564,9 +564,9 @@ let k = class extends ao {
     return N;
   }
 };
-k.finalized = !0, k._$litElement$ = !0, (er = globalThis.litElementHydrateSupport) === null || er === void 0 || er.call(globalThis, { LitElement: k });
+f.finalized = !0, f._$litElement$ = !0, (er = globalThis.litElementHydrateSupport) === null || er === void 0 || er.call(globalThis, { LitElement: f });
 const Vr = globalThis.litElementPolyfillSupport;
-Vr == null || Vr({ LitElement: k });
+Vr == null || Vr({ LitElement: f });
 ((tr = globalThis.litElementVersions) !== null && tr !== void 0 ? tr : globalThis.litElementVersions = []).push("3.3.2");
 const T = {
   base: "border-2 relative",
@@ -654,8 +654,8 @@ const T = {
   // .button--utility
   buttonUtilityFlat: "py-12 px-16 bg-transparent border-0 font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover rounded-4",
   // .button--utility-flat
-  buttonPill: "font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out rounded-full! min-h-[44px] min-w-[44px] border-0! p-4 i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover acive:i-bg-$color-button-pill-background-active inline-flex items-center justify-center hover:bg-clip-padding",
-  // .button--pill   missing:  hover:background-color: rgba(var(--f-blue-600-rgb), 0.1) , and:  hover:border-color: hsla(0, 0%, 100%, 0.4);
+  buttonPill: "font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out rounded-full! min-h-[44px] min-w-[44px] border-0! p-4 i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active inline-flex items-center justify-center hover:bg-clip-padding",
+  // .button--pill
   buttonLink: "leading-[24] max-w-max bg-transparent focusable ease-in-out inline i-text-$color-button-link-text active:underline hover:underline",
   //.button--link /* Buttons pretending to be links, (Should rather inherit the actual link setup in the future?)  */
   // Size stuff
@@ -710,7 +710,7 @@ const T = {
   readOnly: "pl-0 bg-transparent border-0 pointer-events-none before:hidden",
   wrapper: "relative",
   selectWrapper: "relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ",
-  chevron: "absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon",
+  chevron: "absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer",
   chevronDisabled: "opacity-25"
 }, J = {
   label: "antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",
@@ -820,7 +820,7 @@ const Wr = {
   warning: nt(),
   info: bt()
 };
-class br extends k {
+class br extends f {
   constructor() {
     super(), this.show = !1, this.role = "alert";
   }
@@ -1024,6 +1024,7 @@ w(br, "styles", q`
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -1063,8 +1064,7 @@ w(br, "styles", q`
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -1104,6 +1104,7 @@ w(br, "styles", q`
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -1597,7 +1598,6 @@ function Gr(r) {
     t && o.push(e);
   return o.join(" ");
 }
-const fo = typeof window < "u";
 function Z(r) {
   const o = {};
   for (const [e, t] of Object.entries(r))
@@ -1616,7 +1616,7 @@ const cr = [
   "pill",
   "link"
 ];
-class Ao extends zo(k) {
+class Ao extends zo(f) {
   constructor() {
     super(), this.variant = "secondary";
   }
@@ -1675,7 +1675,7 @@ ${cr.join(
         />` : null}`;
   }
 }
-w(Ao, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Ao, "properties", {
+w(Ao, "shadowRootOptions", { ...f.shadowRootOptions, delegatesFocus: !0 }), w(Ao, "properties", {
   type: { type: "button" | "submit" | "reset", reflect: !0 },
   autofocus: { type: Boolean, reflect: !0 },
   variant: { type: String, reflect: !0 },
@@ -1842,6 +1842,7 @@ w(Ao, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Ao
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -1881,8 +1882,7 @@ w(Ao, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Ao
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -1922,6 +1922,7 @@ w(Ao, "shadowRootOptions", { ...k.shadowRootOptions, delegatesFocus: !0 }), w(Ao
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -2339,11 +2340,11 @@ customElements.get("w-button") || customElements.define("w-button", Ao);
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const x = (r) => r ?? f, Jr = {
+const x = (r) => r ?? k, Jr = {
   ENTER: "Enter",
   SPACE: " "
 };
-class sr extends k {
+class sr extends f {
   constructor() {
     super(), this.selected = !1, this.flat = !1, this.clickable = !1;
   }
@@ -2545,6 +2546,7 @@ w(sr, "styles", [
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -2584,8 +2586,7 @@ w(sr, "styles", [
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -2625,6 +2626,7 @@ w(sr, "styles", [
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -3068,11 +3070,11 @@ function Co(r, o, e) {
  */
 let gr = class extends Cr {
   constructor(o) {
-    if (super(o), this.et = f, o.type !== Zr.CHILD)
+    if (super(o), this.et = k, o.type !== Zr.CHILD)
       throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(o) {
-    if (o === f || o == null)
+    if (o === k || o == null)
       return this.ft = void 0, this.et = o;
     if (o === N)
       return o;
@@ -3088,7 +3090,7 @@ let gr = class extends Cr {
 gr.directiveName = "unsafeHTML", gr.resultType = 1;
 const qe = Ar(gr);
 var Ho, Xe, Do, Ye, Uo, je, Fo, Ze, io, So, lo, Eo;
-class ur extends zo(k) {
+class ur extends zo(f) {
   constructor() {
     super();
     U(this, Ho);
@@ -3341,6 +3343,7 @@ Ho = new WeakSet(), Xe = function() {
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -3380,8 +3383,7 @@ Ho = new WeakSet(), Xe = function() {
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -3421,6 +3423,7 @@ Ho = new WeakSet(), Xe = function() {
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -3833,7 +3836,7 @@ Ho = new WeakSet(), Xe = function() {
 }
   `);
 customElements.get("w-select") || customElements.define("w-select", ur);
-class vr extends k {
+class vr extends f {
   get _class() {
     return Z({
       [B.box]: !0,
@@ -4016,6 +4019,7 @@ w(vr, "styles", q`
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -4055,8 +4059,7 @@ w(vr, "styles", q`
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -4096,6 +4099,7 @@ w(vr, "styles", q`
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -4518,7 +4522,7 @@ function wt(r, o) {
   return r.flatMap((e) => [e, o]).slice(0, -1);
 }
 const mt = u`<span class=${co.separator} aria-hidden='true'>/</span>`;
-class pr extends zo(k) {
+class pr extends zo(f) {
   constructor() {
     super(), this.ariaLabel = "Her er du";
   }
@@ -4700,6 +4704,7 @@ w(pr, "styles", q`
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -4739,8 +4744,7 @@ w(pr, "styles", q`
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -4780,6 +4784,7 @@ w(pr, "styles", q`
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -5207,7 +5212,7 @@ const Ce = (r) => {
   r.style.transition = `height ${o}`, r.style.backfaceVisibility = "hidden", r.style.overflow = "hidden";
 }, xt = (r, o) => () => {
   r.style.height = "auto", r.style.overflow = null, o && o();
-}, ft = (r) => () => {
+}, kt = (r) => () => {
   r && r();
 }, Ee = (r, o) => {
   const e = (() => {
@@ -5228,14 +5233,14 @@ const Ce = (r) => {
       return new Promise((c) => {
         o = c;
       });
-  })(), t = ft(o);
+  })(), t = kt(o);
   Ce(r);
   let a = r.scrollHeight;
   if (Sr && requestAnimationFrame(() => {
     r.addEventListener("transitionend", t, { once: !0 }), r.style.height = a + "px", r.style.transitionTimingFunction = "ease-in", Se(r), requestAnimationFrame(() => r.style.height = "0px");
   }), e)
     return e;
-}, kt = () => u`
+}, ft = () => u`
   <svg
     role="img"
     aria-label="Lukk"
@@ -5319,7 +5324,7 @@ const Ce = (r) => {
   error: "error",
   warning: "warning"
 };
-class hr extends k {
+class hr extends f {
   constructor() {
     super(), this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5), this.type = "success", this.text = "", this.canclose = !1;
   }
@@ -5392,7 +5397,7 @@ class hr extends k {
         </div>
         ${Co(
       this.canclose === !0,
-      () => u`<button class="${S.close}" @click="${this.close}">${kt()}</button>`
+      () => u`<button class="${S.close}" @click="${this.close}">${ft()}</button>`
     )}
       </div>
     </section>` : u``;
@@ -5555,6 +5560,7 @@ w(hr, "styles", [
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -5594,8 +5600,7 @@ w(hr, "styles", [
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -5635,6 +5640,7 @@ w(hr, "styles", [
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -6163,7 +6169,7 @@ const oe = (r, o, e) => {
     return this.ht = l, At(r, n), N;
   }
 });
-class wr extends k {
+class wr extends f {
   constructor() {
     super(), this._toasts = /* @__PURE__ */ new Map();
   }
@@ -6414,6 +6420,7 @@ w(wr, "styles", [
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -6453,8 +6460,7 @@ w(wr, "styles", [
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -6494,6 +6500,7 @@ w(wr, "styles", [
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -6912,8 +6919,9 @@ w(wr, "styles", [
   _toasts: { state: !0 }
 });
 customElements.get("w-toast-container") || customElements.define("w-toast-container", wr);
+const ko = typeof window < "u";
 function ga(r, o) {
-  if (!fo)
+  if (!ko)
     return;
   const e = customElements.get("w-toast-container").init(), t = {
     id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
@@ -6925,24 +6933,24 @@ function ga(r, o) {
   return e.set(t), t;
 }
 function ua(r) {
-  return fo ? customElements.get("w-toast-container").init().del(r) : void 0;
+  return ko ? customElements.get("w-toast-container").init().del(r) : void 0;
 }
 function va(r, o) {
-  if (!fo)
+  if (!ko)
     return;
   const e = customElements.get("w-toast-container").init();
   return e.set({ ...e.get(r), ...o }), e.get(r);
 }
-class mr extends k {
+class mr extends f {
   constructor() {
-    super(), this._messages = [], this.interval = 3e4, this._hiddenMessageIds = [], this.url = fo ? window.location.href : "";
+    super(), this._messages = [], this.interval = 3e4, this._hiddenMessageIds = [], this.url = ko ? window.location.href : "";
   }
   async connectedCallback() {
     if (super.connectedCallback(), !this.api) {
       console.error('Broadcast "api" attribute invalid or undefined');
       return;
     }
-    fo && (await this._fetchMessage(), setInterval(() => this._fetchMessage(), this.interval));
+    ko && (await this._fetchMessage(), setInterval(() => this._fetchMessage(), this.interval));
   }
   async _fetchMessage() {
     const o = `${this.api}?path=${this.url}`;
@@ -7149,6 +7157,7 @@ w(mr, "properties", {
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -7188,8 +7197,7 @@ w(mr, "properties", {
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -7229,6 +7237,7 @@ w(mr, "properties", {
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -7886,7 +7895,7 @@ function Oe(r) {
 function ce(r) {
   return L(r) && getComputedStyle(r).position !== "fixed" ? r.offsetParent : null;
 }
-function fr(r) {
+function kr(r) {
   const o = I(r);
   let e = ce(r);
   for (; e && Dt(e) && getComputedStyle(e).position === "static"; )
@@ -7939,7 +7948,7 @@ function le(r, o, e) {
   }(H(r)));
 }
 function Ft(r) {
-  const o = De(r), e = ["absolute", "fixed"].includes(Xo(r).position) && L(r) ? fr(r) : r;
+  const o = De(r), e = ["absolute", "fixed"].includes(Xo(r).position) && L(r) ? kr(r) : r;
   return bo(e) ? o.filter((t) => bo(t) && function(a, c) {
     const i = c.getRootNode == null ? void 0 : c.getRootNode();
     if (a.contains(c))
@@ -7974,25 +7983,25 @@ const Vt = { getClippingRect: function(r) {
     l.x = d.x + e.clientLeft, l.y = d.y + e.clientTop;
   }
   return { ...o, x: o.x - i.scrollLeft + l.x, y: o.y - i.scrollTop + l.y };
-}, isElement: bo, getDimensions: ie, getOffsetParent: fr, getDocumentElement: H, getElementRects: (r) => {
+}, isElement: bo, getDimensions: ie, getOffsetParent: kr, getDocumentElement: H, getElementRects: (r) => {
   let { reference: o, floating: e, strategy: t } = r;
-  return { reference: Ut(o, fr(e), t), floating: { ...ie(e), x: 0, y: 0 } };
-}, getClientRects: (r) => Array.from(r.getClientRects()), isRTL: (r) => Xo(r).direction === "rtl" }, Wt = (r, o, e) => St(r, o, { platform: Vt, ...e }), ko = "top", $o = "bottom", Io = "left", Oo = "right", lr = {
-  [ko]: $o,
-  [$o]: ko,
+  return { reference: Ut(o, kr(e), t), floating: { ...ie(e), x: 0, y: 0 } };
+}, getClientRects: (r) => Array.from(r.getClientRects()), isRTL: (r) => Xo(r).direction === "rtl" }, Wt = (r, o, e) => St(r, o, { platform: Vt, ...e }), fo = "top", $o = "bottom", Io = "left", Oo = "right", lr = {
+  [fo]: $o,
+  [$o]: fo,
   [Io]: Oo,
   [Oo]: Io
 }, Gt = {
-  [ko]: "↑",
+  [fo]: "↑",
   [$o]: "↓",
   [Io]: "←",
   [Oo]: "→"
 }, Jt = {
   [Io]: -45,
-  [ko]: 45,
+  [fo]: 45,
   [Oo]: 135,
   [$o]: -135
-}, de = "calc(50% - 7px)", Kt = (r) => [ko, $o].includes(r);
+}, de = "calc(50% - 7px)", Kt = (r) => [fo, $o].includes(r);
 function Qt({ actualDirection: r, directionName: o, arrowEl: e }) {
   if (!e)
     return;
@@ -8026,7 +8035,7 @@ async function oa(r) {
   let { x: e, y: t } = o.middlewareData.arrow;
   r.arrowEl && (r.arrowEl.style.left = e ? e + "px" : "", r.arrowEl.style.top = t ? t + "px" : "");
 }
-class kr extends zo(k) {
+class fr extends zo(f) {
   constructor() {
     super(), this.show = !1, this.tooltip = !1, this.callout = !1, this.popover = !1, this.noArrow = !1;
   }
@@ -8131,7 +8140,7 @@ ${JSON.stringify(
     `;
   }
 }
-w(kr, "properties", {
+w(fr, "properties", {
   // Whether Attention element should be visible.
   show: { type: Boolean, reflect: !0 },
   // Placement according to the target element
@@ -8145,7 +8154,7 @@ w(kr, "properties", {
   popover: { type: Boolean, reflect: !0 },
   // Render Attention element without an arrow
   noArrow: { type: Boolean, reflect: !0 }
-}), w(kr, "styles", [
+}), w(fr, "styles", [
   q`
       /* layer: preflights */
 *,::before,::after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0;}
@@ -8302,6 +8311,7 @@ w(kr, "properties", {
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -8341,8 +8351,7 @@ w(kr, "properties", {
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -8382,6 +8391,7 @@ w(kr, "properties", {
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -8805,8 +8815,8 @@ w(kr, "properties", {
       }
     `
 ]);
-customElements.get("w-attention") || customElements.define("w-attention", kr);
-class $r extends k {
+customElements.get("w-attention") || customElements.define("w-attention", fr);
+class $r extends f {
   constructor() {
     super(), this.type = "text";
   }
@@ -9078,6 +9088,7 @@ w($r, "styles", [
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -9117,8 +9128,7 @@ w($r, "styles", [
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -9158,6 +9168,7 @@ w($r, "styles", [
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -9577,13 +9588,13 @@ w($r, "styles", [
     `
 ]);
 customElements.get("w-textfield") || customElements.define("w-textfield", $r);
-class ne extends k {
+class ne extends f {
   render() {
     return u`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 5.5 8 11l5.5-5.5"></path></svg>`;
   }
 }
 customElements.get("f-icon-chevron-down16", ne) || customElements.define("f-icon-chevron-down16", ne);
-class yr extends zo(k) {
+class yr extends zo(f) {
   constructor() {
     super(), this.expanded = !1, this.animated = !1, this.info = !1, this.box = !1, this.bleed = !1, this.noChevron = !1, this._hasTitle = !0;
   }
@@ -9822,6 +9833,7 @@ w(yr, "styles", [
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -9861,8 +9873,7 @@ w(yr, "styles", [
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -9902,6 +9913,7 @@ w(yr, "styles", [
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -10364,7 +10376,7 @@ const ra = u`
     </defs>
   </svg>
 `;
-class zr extends k {
+class zr extends f {
   get _classBase() {
     return this.slot === "suffix" ? ct : it;
   }
@@ -10564,6 +10576,7 @@ w(zr, "styles", q`
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -10603,8 +10616,7 @@ w(zr, "styles", q`
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -10644,6 +10656,7 @@ w(zr, "styles", q`
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -11062,9 +11075,10 @@ w(zr, "styles", q`
 });
 customElements.get("w-affix") || customElements.define("w-affix", zr);
 const Ue = q`
-@import "https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/tokens/finn-no.css";
+@import "https://assets.finn.no/pkg/@warp-ds/fonts/v1/finn-no.css";
+@import "https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.37/tokens/finn-no.css";
 `;
-class _r extends k {
+class _r extends f {
   constructor() {
     super(), this.show = !1, this._mounted = !1, this._removeElement = !1;
   }
@@ -11253,6 +11267,7 @@ w(_r, "properties", {
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -11292,8 +11307,7 @@ w(_r, "properties", {
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -11333,6 +11347,7 @@ w(_r, "properties", {
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -11749,7 +11764,7 @@ w(_r, "properties", {
     `
 ]);
 customElements.get("w-expand-transition") || customElements.define("w-expand-transition", _r);
-class qr extends k {
+class qr extends f {
   get _markup() {
     return `<h${this.level}
     style="margin: 0; font-weight: unset; font-size: unset; line-height: unset;"
@@ -11920,6 +11935,7 @@ w(qr, "properties", {
 .hover\\:i-bg-\\$color-combobox-option-background-hover:hover{background-color:var(--w-color-combobox-option-background-hover);}
 .hover\\:i-bg-\\$color-combobox-option-background-selected-hover:hover{background-color:var(--w-color-combobox-option-background-selected-hover);}
 .hover\\:i-bg-\\$color-expandable-background-hover:hover{background-color:var(--w-color-expandable-background-hover);}
+.hover\\:i-bg-\\$color-pageindicator-background-hover:hover{background-color:var(--w-color-pageindicator-background-hover);}
 .hover\\:i-bg-\\$color-pill-filter-background-hover:hover{background-color:var(--w-color-pill-filter-background-hover);}
 .hover\\:i-bg-\\$color-pill-suggestion-background-hover:hover{background-color:var(--w-color-pill-suggestion-background-hover);}
 .i-bg-\\$color-alert-info-background{background-color:var(--w-color-alert-info-background);}
@@ -11959,8 +11975,7 @@ w(qr, "properties", {
 .i-bg-\\$color-input-background-disabled{background-color:var(--w-color-input-background-disabled);}
 .i-bg-\\$color-modal-background{background-color:var(--w-color-modal-background);}
 .i-bg-\\$color-pageindicator-background{background-color:var(--w-color-pageindicator-background);}
-.i-bg-\\$color-pageindicator-background-active{background-color:var(--w-color-pageindicator-background-active);}
-.i-bg-\\$color-pageindicator-background-hover{background-color:var(--w-color-pageindicator-background-hover);}
+.i-bg-\\$color-pageindicator-background-selected{background-color:var(--w-color-pageindicator-background-selected);}
 .i-bg-\\$color-pill-filter-background{background-color:var(--w-color-pill-filter-background);}
 .i-bg-\\$color-pill-suggestion-background{background-color:var(--w-color-pill-suggestion-background);}
 .i-bg-\\$color-popover-background{background-color:var(--w-color-popover-background);}
@@ -12000,6 +12015,7 @@ w(qr, "properties", {
 .active\\:i-bg-\\$color-box-neutral-background-hover:active{background-color:var(--w-color-box-neutral-background-hover);}
 .active\\:i-bg-\\$color-button-negative-background-active\\!:active{background-color:var(--w-color-button-negative-background-active) !important;}
 .active\\:i-bg-\\$color-button-negative-quiet-background-active\\!:active{background-color:var(--w-color-button-negative-quiet-background-active) !important;}
+.active\\:i-bg-\\$color-button-pill-background-active:active{background-color:var(--w-color-button-pill-background-active);}
 .active\\:i-bg-\\$color-button-primary-background-active:active{background-color:var(--w-color-button-primary-background-active);}
 .active\\:i-bg-\\$color-button-quiet-background-active\\!:active{background-color:var(--w-color-button-quiet-background-active) !important;}
 .active\\:i-bg-\\$color-button-secondary-background-active:active{background-color:var(--w-color-button-secondary-background-active);}
@@ -12417,7 +12433,7 @@ export {
   qr as UnstyledHeading,
   zr as WarpAffix,
   br as WarpAlert,
-  kr as WarpAttention,
+  fr as WarpAttention,
   vr as WarpBox,
   pr as WarpBreadcrumbs,
   mr as WarpBroadcast,

package/dist/packages/utils/index.d.ts

@@ -8,4 +8,3 @@ export function kebabCaseAttributes(constructor: any): {
 export function classes(defn: any): string;
 export function fclasses(definition: any): import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directives/class-map").ClassMapDirective>;
 export function generateRandomId(): string;
-export const windowExists: boolean;

package/dist/packages/utils/window-exists.d.ts

@@ -0,0 +1 @@
+export const windowExists: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "1.0.0-alpha.28",
+  "version": "1.0.0-alpha.29",
   "description": "Custom elements for Warp",
   "exports": {
     ".": "./dist/index.js",
@@ -73,7 +73,7 @@
     "@open-wc/testing": "3.2.0",
     "@warp-ds/core": "1.0.0",
     "@warp-ds/uno": "^1.0.0-alpha.60",
-    "@warp-ds/css": "1.0.0-alpha.33",
+    "@warp-ds/css": "1.0.0-alpha.37",
     "glob": "8.1.0",
     "html-format": "1.1.2",
     "lit": "2.7.5"