@warp-ds/elements 2.1.1 → 2.2.0-next.2

package/dist/index.js

@@ -3989,15 +3989,15 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 function getDocumentRect(element) {
-  const html30 = getDocumentElement(element);
+  const html29 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html30.scrollWidth, html30.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html30.scrollHeight, html30.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html29.scrollWidth, html29.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html29.scrollHeight, html29.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y2 = -scroll.scrollTop;
   if (getComputedStyle(body).direction === "rtl") {
-    x += max(html30.clientWidth, body.clientWidth) - width;
+    x += max(html29.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -4008,10 +4008,10 @@ function getDocumentRect(element) {
 }
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html30 = getDocumentElement(element);
+  const html29 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html30.clientWidth;
-  let height = html30.clientHeight;
+  let width = html29.clientWidth;
+  let height = html29.clientHeight;
   let x = 0;
   let y2 = 0;
   if (visualViewport) {
@@ -4953,89 +4953,9 @@ if (!customElements.get("w-breadcrumbs")) {
   customElements.define("w-breadcrumbs", WarpBreadcrumbs);
 }
 
-// packages/broadcast/component.js
+// packages/button/index.js
 import { html as html13 } from "lit";
 import WarpElement7 from "@warp-ds/elements-core";
-import { repeat } from "lit/directives/repeat.js";
-
-// packages/utils/window-exists.js
-var windowExists = typeof window !== "undefined";
-
-// packages/broadcast/component.js
-var WarpBroadcast = class extends WarpElement7 {
-  constructor() {
-    super();
-    this._messages = [];
-    this.interval = 3e4;
-    this._hiddenMessageIds = [];
-    this.url = windowExists ? window.location.href : "";
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    if (!this.api) {
-      console.error('Broadcast "api" attribute invalid or undefined');
-      return;
-    }
-    if (windowExists) {
-      await this._fetchMessage();
-      setInterval(() => this._fetchMessage(), this.interval);
-    }
-  }
-  async _fetchMessage() {
-    const url = `${this.api}?path=${this.url}`;
-    try {
-      const res = await (await fetch(url)).json();
-      this._messages = res.length ? res : [];
-    } catch (err) {
-      console.error(`failed to fetch broadcasts from given url (${url})`, err);
-    }
-  }
-  async _del(id) {
-    const el = this.renderRoot.querySelector(`#broadcast-${id}`);
-    await el.collapse();
-    this._hiddenMessageIds = [.../* @__PURE__ */ new Set([...this._hiddenMessageIds, id])];
-  }
-  render() {
-    const messages79 = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));
-    return html13`
-      <aside class=${`${messages79.length === 0 ? "hidden" : "mb-16"}`}>
-        ${repeat(
-      messages79,
-      ({ id }) => `broadcast-${id}`,
-      ({ id, message }) => html13`<w-toast id="broadcast-${id}" type="warning" text="${message}" canclose @close=${() => this._del(id)}> </w-toast>`
-    )}
-      </aside>
-    `;
-  }
-};
-__publicField(WarpBroadcast, "properties", {
-  _messages: {
-    state: true,
-    hasChanged(newVal, oldVal) {
-      if (!oldVal || oldVal.length === 0) return true;
-      const newIds = newVal.map(({ id }) => id).sort();
-      const oldIds = oldVal.map(({ id }) => id).sort();
-      return JSON.stringify(newIds) !== JSON.stringify(oldIds);
-    }
-  },
-  _hiddenMessageIds: {
-    state: true,
-    type: Array
-  },
-  interval: { type: Number, attribute: true, reflect: true },
-  url: { type: String, attribute: true, reflect: true },
-  api: { type: String, attribute: true, reflect: true }
-});
-__publicField(WarpBroadcast, "styles", [WarpElement7.styles]);
-
-// packages/broadcast/index.js
-if (!customElements.get("w-broadcast")) {
-  customElements.define("w-broadcast", WarpBroadcast);
-}
-
-// packages/button/index.js
-import { html as html14 } from "lit";
-import WarpElement8 from "@warp-ds/elements-core";
 
 // packages/button/locales/da/messages.mjs
 var messages21 = JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');
@@ -5054,7 +4974,7 @@ var messages30 = JSON.parse('{"button.aria.loading":["Laddar ..."]}');
 
 // packages/button/index.js
 var buttonTypes2 = ["primary", "secondary", "negative", "utility", "pill", "link"];
-var WarpButton = class extends kebabCaseAttributes(WarpElement8) {
+var WarpButton = class extends kebabCaseAttributes(WarpElement7) {
   constructor() {
     super();
     activateI18n7(messages27, messages29, messages28, messages21, messages30);
@@ -5139,19 +5059,19 @@ ${buttonTypes2.join(", ")}.`);
     ]);
   }
   render() {
-    return html14` ${this.href ? html14`<a
+    return html13` ${this.href ? html13`<a
           href=${this.href}
           target=${this.target}
           rel=${this.target === "_blank" ? this.rel || "noopener" : void 0}
           class=${this._classes}>
           <slot></slot>
-        </a>` : html14`<button type=${this.type || "button"} class=${this._classes}>
+        </a>` : html13`<button type=${this.type || "button"} class=${this._classes}>
           <slot></slot>
         </button>`}
-    ${this.loading ? html14`<span class="sr-only" role="progressbar" aria-valuenow="{0}" aria-valuetext=${this.ariaValueTextLoading}></span>` : null}`;
+    ${this.loading ? html13`<span class="sr-only" role="progressbar" aria-valuenow="{0}" aria-valuetext=${this.ariaValueTextLoading}></span>` : null}`;
   }
 };
-__publicField(WarpButton, "shadowRootOptions", __spreadProps(__spreadValues({}, WarpElement8.shadowRootOptions), {
+__publicField(WarpButton, "shadowRootOptions", __spreadProps(__spreadValues({}, WarpElement7.shadowRootOptions), {
   delegatesFocus: true
 }));
 __publicField(WarpButton, "properties", {
@@ -5167,14 +5087,14 @@ __publicField(WarpButton, "properties", {
   fullWidth: { type: Boolean, reflect: true },
   buttonClass: { type: String, reflect: true }
 });
-__publicField(WarpButton, "styles", [WarpElement8.styles]);
+__publicField(WarpButton, "styles", [WarpElement7.styles]);
 if (!customElements.get("w-button")) {
   customElements.define("w-button", WarpButton);
 }
 
 // packages/card/index.js
-import { html as html15, css as css4 } from "lit";
-import WarpElement9 from "@warp-ds/elements-core";
+import { html as html14, css as css4 } from "lit";
+import WarpElement8 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
 
 // packages/card/locales/da/messages.mjs
@@ -5197,7 +5117,7 @@ var keys = {
   ENTER: "Enter",
   SPACE: " "
 };
-var WarpCard = class extends WarpElement9 {
+var WarpCard = class extends WarpElement8 {
   constructor() {
     super();
     activateI18n7(messages37, messages39, messages38, messages31, messages40);
@@ -5222,8 +5142,8 @@ var WarpCard = class extends WarpElement9 {
     return r([card.outline, this.selected ? card.outlineSelected : card.outlineUnselected]);
   }
   get _interactiveElement() {
-    const renderButton = () => html15`<button class="${card.a11y}" aria-pressed="${this.selected}" tabindex="-1">${this.buttonText}</button>`;
-    const renderSpan = () => html15`<span role="checkbox" aria-checked="true" aria-disabled="true"></span>`;
+    const renderButton = () => html14`<button class="${card.a11y}" aria-pressed="${this.selected}" tabindex="-1">${this.buttonText}</button>`;
+    const renderSpan = () => html14`<span role="checkbox" aria-checked="true" aria-disabled="true"></span>`;
     return this.clickable ? renderButton() : this.selected ? renderSpan() : "";
   }
   keypressed(e) {
@@ -5234,9 +5154,9 @@ var WarpCard = class extends WarpElement9 {
     }
   }
   render() {
-    return html15`
+    return html14`
       <div tabindex=${ifDefined3(this.clickable ? "0" : void 0)} class="${this._containerClasses}" @keydown=${this.keypressed}>
-        ${this._interactiveElement} ${this.flat ? "" : html15`<div class="${this._outlineClasses}"></div>`}
+        ${this._interactiveElement} ${this.flat ? "" : html14`<div class="${this._outlineClasses}"></div>`}
         <slot></slot>
       </div>
     `;
@@ -5248,7 +5168,7 @@ __publicField(WarpCard, "properties", {
   clickable: { type: Boolean }
 });
 __publicField(WarpCard, "styles", [
-  WarpElement9.styles,
+  WarpElement8.styles,
   css4`
       a::after {
         content: '';
@@ -5268,13 +5188,13 @@ if (!customElements.get("w-card")) {
 }
 
 // packages/expandable/index.js
-import { css as css5, html as html18 } from "lit";
-import WarpElement10 from "@warp-ds/elements-core";
+import { css as css5, html as html17 } from "lit";
+import WarpElement9 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 
 // node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-_hyhbgchrkasknlbocfng7geeci/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 import { LitElement as LitElement7 } from "lit";
-import { unsafeStatic as unsafeStatic7, html as html16 } from "lit/static-html.js";
+import { unsafeStatic as unsafeStatic7, html as html15 } from "lit/static-html.js";
 var messages41 = JSON.parse('{"icon.title.chevron-down":["Nedoverpil"]}');
 var messages210 = JSON.parse('{"icon.title.chevron-down":["Downward arrow"]}');
 var messages310 = JSON.parse('{"icon.title.chevron-down":["Nuoli alasp\xE4in"]}');
@@ -5359,7 +5279,7 @@ activateI18n8(messages210, messages41, messages310, messages47, messages57);
 var IconChevronDown16 = class extends LitElement7 {
   render() {
     const title = i18n.t({ message: `Downward arrow`, id: "icon.title.chevron-down", comment: "Title for chevron-down icon" });
-    return html16`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-chevron-down-16-part">${unsafeStatic7(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.667 5.333 5.5 5.5 5.5-5.5"></path></svg>`;
+    return html15`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-chevron-down-16-part">${unsafeStatic7(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.667 5.333 5.5 5.5 5.5-5.5"></path></svg>`;
   }
 };
 if (!customElements.get("w-icon-chevron-down-16")) {
@@ -5368,7 +5288,7 @@ if (!customElements.get("w-icon-chevron-down-16")) {
 
 // node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-_hyhbgchrkasknlbocfng7geeci/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
 import { LitElement as LitElement8 } from "lit";
-import { unsafeStatic as unsafeStatic8, html as html17 } from "lit/static-html.js";
+import { unsafeStatic as unsafeStatic8, html as html16 } from "lit/static-html.js";
 var messages48 = JSON.parse('{"icon.title.chevron-up":["Oppoverpil"]}');
 var messages211 = JSON.parse('{"icon.title.chevron-up":["Upward arrow"]}');
 var messages311 = JSON.parse('{"icon.title.chevron-up":["Nuoli yl\xF6sp\xE4in"]}');
@@ -5453,7 +5373,7 @@ activateI18n9(messages211, messages48, messages311, messages49, messages58);
 var IconChevronUp16 = class extends LitElement8 {
   render() {
     const title = i18n.t({ message: `Upward arrow`, id: "icon.title.chevron-up", comment: "Title for chevron-up icon" });
-    return html17`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-chevron-up-16-part">${unsafeStatic8(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 11 8 5.5l5.5 5.5"></path></svg>`;
+    return html16`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-chevron-up-16-part">${unsafeStatic8(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 11 8 5.5l5.5 5.5"></path></svg>`;
   }
 };
 if (!customElements.get("w-icon-chevron-up-16")) {
@@ -5462,7 +5382,7 @@ if (!customElements.get("w-icon-chevron-up-16")) {
 
 // packages/expandable/index.js
 var _WarpExpandable_instances, wrapperClasses_get, buttonClasses_get, chevronClasses_get, chevronIcon_get, contentClasses_get, expansionClasses_get;
-var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
+var WarpExpandable = class extends kebabCaseAttributes(WarpElement9) {
   constructor() {
     super();
     __privateAdd(this, _WarpExpandable_instances);
@@ -5485,25 +5405,25 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
     this._hasTitle = !!this.title || this.renderRoot.querySelector("slot[name='title']").assignedNodes().length > 0;
   }
   get _expandableSlot() {
-    return html18`<div class="${__privateGet(this, _WarpExpandable_instances, contentClasses_get)}">
+    return html17`<div class="${__privateGet(this, _WarpExpandable_instances, contentClasses_get)}">
       <slot></slot>
     </div>`;
   }
   render() {
-    return html18` <div class="${__privateGet(this, _WarpExpandable_instances, wrapperClasses_get)}">
-      ${this._hasTitle ? html18`<w-unstyled-heading level=${this.headingLevel}>
+    return html17` <div class="${__privateGet(this, _WarpExpandable_instances, wrapperClasses_get)}">
+      ${this._hasTitle ? html17`<w-unstyled-heading level=${this.headingLevel}>
             <button
               type="button"
               aria-expanded="${this.expanded}"
               class="${__privateGet(this, _WarpExpandable_instances, buttonClasses_get)}"
               @click=${() => this.expanded = !this.expanded}>
               <div class="${expandable.title}">
-                ${this.title ? html18`<span class="${expandable.titleType}">${this.title}</span>` : html18`<slot name="title"></slot>`}
-                ${this.noChevron ? "" : html18`<div class="${__privateGet(this, _WarpExpandable_instances, chevronClasses_get)}">${__privateGet(this, _WarpExpandable_instances, chevronIcon_get)}</div>`}
+                ${this.title ? html17`<span class="${expandable.titleType}">${this.title}</span>` : html17`<slot name="title"></slot>`}
+                ${this.noChevron ? "" : html17`<div class="${__privateGet(this, _WarpExpandable_instances, chevronClasses_get)}">${__privateGet(this, _WarpExpandable_instances, chevronIcon_get)}</div>`}
               </div>
             </button>
           </w-unstyled-heading>` : ""}
-      ${this.animated ? html18`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>` : html18`<div class="${__privateGet(this, _WarpExpandable_instances, expansionClasses_get)}" aria-hidden=${ifDefined4(!this.expanded ? true : void 0)}>
+      ${this.animated ? html17`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>` : html17`<div class="${__privateGet(this, _WarpExpandable_instances, expansionClasses_get)}" aria-hidden=${ifDefined4(!this.expanded ? true : void 0)}>
             ${this._expandableSlot}
           </div>`}
     </div>`;
@@ -5528,7 +5448,7 @@ chevronIcon_get = function() {
     expandable.elementsChevronDownTransform,
     this.expanded && !this._showChevronUp && expandable.elementsChevronExpand
   ]);
-  return this._showChevronUp ? html18`<w-icon-chevron-up-16 class="${upClasses}"></w-icon-chevron-up-16>` : html18`<w-icon-chevron-down-16 class="${downClasses}"></w-icon-chevron-down-16>`;
+  return this._showChevronUp ? html17`<w-icon-chevron-up-16 class="${upClasses}"></w-icon-chevron-up-16>` : html17`<w-icon-chevron-down-16 class="${downClasses}"></w-icon-chevron-down-16>`;
 };
 contentClasses_get = function() {
   return r(this.contentClass, [this.box && box.base, this._hasTitle && this.box && expandable.contentWithTitle]);
@@ -5554,7 +5474,7 @@ __publicField(WarpExpandable, "properties", {
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
 __publicField(WarpExpandable, "styles", [
-  WarpElement10.styles,
+  WarpElement9.styles,
   css5`
       :host {
         display: block;
@@ -5569,8 +5489,8 @@ if (!customElements.get("w-expandable")) {
 }
 
 // packages/modal/modal-footer.js
-import { html as html19 } from "lit";
-import WarpElement11 from "@warp-ds/elements-core";
+import { html as html18 } from "lit";
+import WarpElement10 from "@warp-ds/elements-core";
 
 // packages/modal/util.js
 var CanCloseMixin = (superClass) => class extends superClass {
@@ -5595,19 +5515,19 @@ var ProvidesCanCloseToSlotsMixin = (superClass) => class extends superClass {
 };
 
 // packages/modal/modal-footer.js
-var ModalFooter = class extends CanCloseMixin(ProvidesCanCloseToSlotsMixin(WarpElement11)) {
+var ModalFooter = class extends CanCloseMixin(ProvidesCanCloseToSlotsMixin(WarpElement10)) {
   render() {
-    return html19`
+    return html18`
       <div class="${modalElement.footer}">
         <slot @slotchange="${this.handleSlotChange}"></slot>
       </div>
     `;
   }
 };
-__publicField(ModalFooter, "styles", [WarpElement11.styles]);
+__publicField(ModalFooter, "styles", [WarpElement10.styles]);
 
 // packages/modal/modal-header.js
-import { html as html21, nothing as nothing3 } from "lit";
+import { html as html20, nothing as nothing3 } from "lit";
 
 // node_modules/.pnpm/@itsy+animate@0.0.9/node_modules/@itsy/animate/src/utility.js
 var computeDeltas = (first, last) => ({
@@ -5626,8 +5546,8 @@ var animationDefaults = { easing: "ease", duration: 300 };
 
 // node_modules/.pnpm/@itsy+animate@0.0.9/node_modules/@itsy/animate/src/reduce-motion.js
 var reduceMotion = false;
-var windowExists2 = typeof window !== "undefined";
-if (windowExists2) {
+var windowExists = typeof window !== "undefined";
+if (windowExists) {
   const query = window.matchMedia("(prefers-reduced-motion: reduce)");
   const callback = ({ matches }) => reduceMotion = matches;
   if (query.addEventListener) query.addEventListener("change", callback);
@@ -5683,7 +5603,7 @@ var Move = class {
 
 // node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-_hyhbgchrkasknlbocfng7geeci/node_modules/@warp-ds/icons/dist/elements/arrow-left-16.js
 import { LitElement as LitElement9 } from "lit";
-import { unsafeStatic as unsafeStatic9, html as html20 } from "lit/static-html.js";
+import { unsafeStatic as unsafeStatic9, html as html19 } from "lit/static-html.js";
 var messages50 = JSON.parse('{"icon.title.arrow-left":["Pil som peker mot venstre"]}');
 var messages212 = JSON.parse('{"icon.title.arrow-left":["Leftward-pointing arrow"]}');
 var messages312 = JSON.parse('{"icon.title.arrow-left":["Vasemmalle osoittava nuoli"]}');
@@ -5768,7 +5688,7 @@ activateI18n10(messages212, messages50, messages312, messages410, messages59);
 var IconArrowLeft16 = class extends LitElement9 {
   render() {
     const title = i18n.t({ message: `Leftward-pointing arrow`, id: "icon.title.arrow-left", comment: "Title for table arrow left icon" });
-    return html20`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${unsafeStatic9(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`;
+    return html19`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${unsafeStatic9(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`;
   }
 };
 if (!customElements.get("w-icon-arrow-left-16")) {
@@ -5776,8 +5696,7 @@ if (!customElements.get("w-icon-arrow-left-16")) {
 }
 
 // packages/modal/modal-header.js
-import WarpElement12 from "@warp-ds/elements-core";
-import { createRef, ref } from "lit/directives/ref.js";
+import WarpElement11 from "@warp-ds/elements-core";
 
 // packages/modal/locales/da/messages.mjs
 var messages51 = JSON.parse('{"modal.aria.back":["Tilbage"],"modal.aria.close":["Luk"]}');
@@ -5796,28 +5715,30 @@ var messages63 = JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":
 
 // packages/modal/modal-header.js
 var NO_CLOSE_BUTTON = "no-close";
-var ModalHeader = class extends CanCloseMixin(WarpElement12) {
+var ModalHeader = class extends CanCloseMixin(WarpElement11) {
   constructor() {
     super();
-    __publicField(this, "titleEl", createRef());
     activateI18n7(messages60, messages62, messages61, messages51, messages63);
     this._hasTopContent = false;
   }
   render() {
-    return html21`
+    return html20`
       <div class="${modalElement.header}">
         <slot name="top" @slotchange=${this.handleTopSlotChange}></slot>
         <div class="${this._hasTopContent ? "" : modalElement.headerTitleBar}">
           ${this.backButton}
-          <h1 ${ref(this.titleEl)} class="${this.titleClasses}">${this.title}</h1>
+          <h1 class="title-el ${this.titleClasses}">${this.title}</h1>
           ${this.closeButton}
         </div>
       </div>
     `;
   }
+  get titleEl() {
+    return this.shadowRoot.querySelector(".title-el");
+  }
   async willUpdate(changedProperties) {
     if (changedProperties.has("back")) {
-      const move = new Move(this.titleEl.value);
+      const move = new Move(this.titleEl);
       move.when(async () => {
         await this.updateComplete;
       });
@@ -5831,7 +5752,7 @@ var ModalHeader = class extends CanCloseMixin(WarpElement12) {
     ].join(" ");
   }
   get backButton() {
-    return this.back && !this._hasTopContent ? html21`<button
+    return this.back && !this._hasTopContent ? html20`<button
           type="button"
           aria-label="${i18n._({
       id: "modal.aria.back",
@@ -5845,7 +5766,7 @@ var ModalHeader = class extends CanCloseMixin(WarpElement12) {
   }
   get closeButton() {
     if (this[NO_CLOSE_BUTTON]) return nothing3;
-    return html21`<button
+    return html20`<button
       type="button"
       aria-label="${i18n._({
       id: "modal.aria.close",
@@ -5871,12 +5792,11 @@ __publicField(ModalHeader, "properties", {
   [NO_CLOSE_BUTTON]: { type: Boolean },
   _hasTopContent: { state: true }
 });
-__publicField(ModalHeader, "styles", [WarpElement12.styles]);
+__publicField(ModalHeader, "styles", [WarpElement11.styles]);
 
 // packages/modal/modal-main.js
-import { css as css6, html as html22 } from "lit";
-import WarpElement13 from "@warp-ds/elements-core";
-import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
+import { css as css6, html as html21 } from "lit";
+import WarpElement12 from "@warp-ds/elements-core";
 
 // node_modules/.pnpm/scroll-doctor@2.0.2/node_modules/scroll-doctor/dist/scroll-doctor.js
 var n = [];
@@ -5939,32 +5859,29 @@ function T() {
 // packages/modal/modal-main.js
 var NO_BACKDROP_CLICKS = "ignore-backdrop-clicks";
 var CONTENT_ID = "content-id";
-var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
+var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement12) {
   constructor() {
     super();
-    __publicField(this, "dialogEl", createRef2());
-    __publicField(this, "dialogInnerEl", createRef2());
-    __publicField(this, "contentEl", createRef2());
     this.interceptEscape = this.interceptEscape.bind(this);
     this.closeOnBackdropClick = this.closeOnBackdropClick.bind(this);
     this.eventPreventer = this.eventPreventer.bind(this);
     this.modifyBorderRadius = this.modifyBorderRadius.bind(this);
   }
   async open() {
-    this.dialogEl.value.showModal();
+    this.dialogEl.showModal();
     this.handleListeners();
-    E(this.contentEl.value);
+    E(this.contentEl);
     await this.updateComplete;
     this.dispatchEvent(new CustomEvent("shown", { bubbles: true, composed: true }));
   }
   close() {
     this.handleListeners("removeEventListener");
-    this.dialogEl.value.classList.add("close");
-    this.dialogEl.value.addEventListener(
+    this.dialogEl.classList.add("close");
+    this.dialogEl.addEventListener(
       "animationend",
       async () => {
-        this.dialogEl.value.classList.remove("close");
-        this.dialogEl.value.close();
+        this.dialogEl.classList.remove("close");
+        this.dialogEl.close();
         T();
         await this.updateComplete;
         this.dispatchEvent(new CustomEvent("hidden", { bubbles: true, composed: true }));
@@ -5973,11 +5890,11 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
     );
   }
   render() {
-    return html22`
-      <dialog ${ref2(this.dialogEl)} class="w-modal ${modalElement.dialogEl}">
-        <div ${ref2(this.dialogInnerEl)} class="${modalElement.dialogInner}">
+    return html21`
+      <dialog class="dialog-el w-modal ${modalElement.dialogEl}">
+        <div class="dialog-inner-el ${modalElement.dialogInner}">
           <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
-          <div ${ref2(this.contentEl)} class="${modalElement.contentSlot}" id=${this[CONTENT_ID]}>
+          <div class="content-el ${modalElement.contentSlot}" id=${this[CONTENT_ID]}>
             <slot name="content" @slotchange="${this.handleSlotChange}"></slot>
           </div>
           <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
@@ -5985,15 +5902,24 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
       </dialog>
     `;
   }
-  willUpdate(changedProperties) {
+  get dialogEl() {
+    return this.shadowRoot.querySelector(".dialog-el");
+  }
+  get dialogInnerEl() {
+    return this.shadowRoot.querySelector(".dialog-inner-el");
+  }
+  get contentEl() {
+    return this.shadowRoot.querySelector(".content-el");
+  }
+  updated(changedProperties) {
     if (changedProperties.has("show")) this[this.show ? "open" : "close"]();
   }
   handleListeners(verb = "addEventListener") {
     document[verb]("keydown", this.interceptEscape);
-    if (!this[NO_BACKDROP_CLICKS]) this.dialogEl.value[verb]("mousedown", this.closeOnBackdropClick);
-    this.dialogEl.value[verb]("close", this.eventPreventer);
-    this.dialogEl.value[verb]("cancel", this.eventPreventer);
-    this.dialogInnerEl.value[verb]("transitionend", this.modifyBorderRadius);
+    if (!this[NO_BACKDROP_CLICKS]) this.dialogEl[verb]("mousedown", this.closeOnBackdropClick);
+    this.dialogEl[verb]("close", this.eventPreventer);
+    this.dialogEl[verb]("cancel", this.eventPreventer);
+    this.dialogInnerEl[verb]("transitionend", this.modifyBorderRadius);
   }
   /** @param {Event} evt */
   eventPreventer(evt) {
@@ -6001,7 +5927,7 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
   }
   /** @param {MouseEvent} evt */
   closeOnBackdropClick(evt) {
-    if (this.dialogEl.value === evt.target) this.close();
+    if (this.dialogEl === evt.target) this.close();
   }
   /** @param {KeyboardEvent} evt */
   interceptEscape(evt) {
@@ -6011,8 +5937,8 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement13) {
     }
   }
   modifyBorderRadius() {
-    if (this.dialogInnerEl.value.scrollHeight * 1.02 > innerHeight) this.dialogInnerEl.value.style.borderRadius = "0px";
-    else this.dialogInnerEl.value.style.borderRadius = null;
+    if (this.dialogInnerEl.scrollHeight * 1.02 > innerHeight) this.dialogInnerEl.style.borderRadius = "0px";
+    else this.dialogInnerEl.style.borderRadius = null;
   }
 };
 __publicField(ModalMain, "properties", {
@@ -6021,7 +5947,7 @@ __publicField(ModalMain, "properties", {
   [NO_BACKDROP_CLICKS]: { type: Boolean }
 });
 __publicField(ModalMain, "styles", [
-  WarpElement13.styles,
+  WarpElement12.styles,
   css6`
       .w-modal {
         --w-modal-translate-distance: 100%;
@@ -6091,8 +6017,8 @@ if (!customElements.get("w-modal")) {
 }
 
 // packages/pill/index.js
-import { html as html23 } from "lit";
-import WarpElement14 from "@warp-ds/elements-core";
+import { html as html22 } from "lit";
+import WarpElement13 from "@warp-ds/elements-core";
 
 // packages/pill/locales/da/messages.mjs
 var messages64 = JSON.parse('{"pill.aria.openFilter":["\xC5bn filter"],"pill.aria.removeFilter":["Fjern filter ",["label"]]}');
@@ -6110,7 +6036,7 @@ var messages67 = JSON.parse('{"pill.aria.openFilter":["\xC5pne filter"],"pill.ar
 var messages68 = JSON.parse('{"pill.aria.openFilter":["\xD6ppna filter"],"pill.aria.removeFilter":["Ta bort filtret ",["label"]]}');
 
 // packages/pill/index.js
-var WarpPill = class extends kebabCaseAttributes(WarpElement14) {
+var WarpPill = class extends kebabCaseAttributes(WarpElement13) {
   constructor() {
     super();
     activateI18n7(messages65, messages67, messages66, messages64, messages68);
@@ -6145,13 +6071,13 @@ var WarpPill = class extends kebabCaseAttributes(WarpElement14) {
     this.dispatchEvent(new CustomEvent("w-pill-close", { bubbles: true, composed: true }));
   }
   render() {
-    return html23`
+    return html22`
       <div class="${pill.wrapper}">
         <button type="button" class="${this._labelClasses}" @click="${this._onClick}">
           <span class="${pill.a11y}">${this.openSrLabel ? this.openSrLabel : this.openFilterSrText}</span>
           <slot></slot>
         </button>
-        ${this.canClose ? html23`<button type="button" class="${this._closeClasses}" @click="${this._onClose}">
+        ${this.canClose ? html22`<button type="button" class="${this._closeClasses}" @click="${this._onClose}">
               <span class="${pill.a11y}">${this.closeSrLabel ? this.closeSrLabel : this.removeFilterSrText}</span>
               <w-icon-close-16></w-icon-close-16>
             </button>` : null}
@@ -6159,7 +6085,7 @@ var WarpPill = class extends kebabCaseAttributes(WarpElement14) {
     `;
   }
 };
-__publicField(WarpPill, "styles", [WarpElement14.styles]);
+__publicField(WarpPill, "styles", [WarpElement13.styles]);
 __publicField(WarpPill, "properties", {
   canClose: { type: Boolean },
   suggestion: { type: Boolean },
@@ -6171,8 +6097,8 @@ if (!customElements.get("w-pill")) {
 }
 
 // packages/select/index.js
-import { html as html24 } from "lit";
-import WarpElement15 from "@warp-ds/elements-core";
+import { html as html23 } from "lit";
+import WarpElement14 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined5 } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
@@ -6194,7 +6120,7 @@ var messages73 = JSON.parse('{"select.label.optional":["(valfritt)"]}');
 
 // packages/select/index.js
 var _WarpSelect_instances, classes_get, helpTextClasses_get, chevronClasses_get2, id_get, helpId_get;
-var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
+var WarpSelect = class extends kebabCaseAttributes(WarpElement14) {
   constructor() {
     super();
     __privateAdd(this, _WarpSelect_instances);
@@ -6215,14 +6141,14 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
     this.dispatchEvent(event);
   }
   render() {
-    return html24`<div class="${select.wrapper}">
+    return html23`<div class="${select.wrapper}">
       ${when(
       this.label,
-      () => html24`<label class="${label.base}" for="${__privateGet(this, _WarpSelect_instances, id_get)}">
+      () => html23`<label class="${label.base}" for="${__privateGet(this, _WarpSelect_instances, id_get)}">
             ${this.label}
             ${when(
         this.optional,
-        () => html24`<span class="${label.optional}"
+        () => html23`<span class="${label.optional}"
                   >${i18n._({
           id: "select.label.optional",
           message: "(optional)",
@@ -6248,7 +6174,7 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement15) {
           <w-icon-chevron-down-16></w-icon-chevron-down-16>
         </div>
       </div>
-      ${when(this.always || this.invalid, () => html24`<div id="${__privateGet(this, _WarpSelect_instances, helpId_get)}" class="${__privateGet(this, _WarpSelect_instances, helpTextClasses_get)}">${this.hint}</div>`)}
+      ${when(this.always || this.invalid, () => html23`<div id="${__privateGet(this, _WarpSelect_instances, helpId_get)}" class="${__privateGet(this, _WarpSelect_instances, helpTextClasses_get)}">${this.hint}</div>`)}
     </div>`;
   }
 };
@@ -6293,16 +6219,16 @@ __publicField(WarpSelect, "properties", {
   readOnly: { type: Boolean, relfect: true },
   _options: { state: true }
 });
-__publicField(WarpSelect, "styles", [WarpElement15.styles]);
+__publicField(WarpSelect, "styles", [WarpElement14.styles]);
 if (!customElements.get("w-select")) {
   customElements.define("w-select", WarpSelect);
 }
 
 // packages/textfield/index.js
-import { css as css7, html as html25 } from "lit";
-import WarpElement16 from "@warp-ds/elements-core";
+import { css as css7, html as html24 } from "lit";
+import WarpElement15 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined6 } from "lit/directives/if-defined.js";
-var WarpTextField = class extends kebabCaseAttributes(WarpElement16) {
+var WarpTextField = class extends kebabCaseAttributes(WarpElement15) {
   constructor() {
     super();
     this.type = "text";
@@ -6323,7 +6249,7 @@ var WarpTextField = class extends kebabCaseAttributes(WarpElement16) {
   }
   get _label() {
     if (this.label) {
-      return html25`<label for="${this._id}" class=${label.base}>${this.label}</label>`;
+      return html24`<label for="${this._id}" class=${label.base}>${this.label}</label>`;
     }
   }
   get _helpId() {
@@ -6357,7 +6283,7 @@ var WarpTextField = class extends kebabCaseAttributes(WarpElement16) {
     if (affixes.length) this._hasSuffix = true;
   }
   render() {
-    return html25`
+    return html24`
       ${this._label}
       <div class="${input.wrapper}">
         <slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
@@ -6385,7 +6311,7 @@ var WarpTextField = class extends kebabCaseAttributes(WarpElement16) {
           @focus="${this.handler}" />
         <slot @slotchange="${this.suffixSlotChange}" name="suffix"></slot>
       </div>
-      ${this.helpText && html25`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
+      ${this.helpText && html24`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
     `;
   }
 };
@@ -6415,7 +6341,7 @@ __publicField(WarpTextField, "properties", {
 // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
 // https://stackoverflow.com/a/61631668
 __publicField(WarpTextField, "styles", [
-  WarpElement16.styles,
+  WarpElement15.styles,
   css7`
       :host {
         display: block;
@@ -6429,9 +6355,12 @@ if (!customElements.get("w-textfield")) {
   customElements.define("w-textfield", WarpTextField);
 }
 
+// packages/utils/window-exists.js
+var windowExists2 = typeof window !== "undefined";
+
 // packages/toast/api.js
 function toast2(message, options) {
-  if (!windowExists) return;
+  if (!windowExists2) return;
   const toast3 = customElements.get("w-toast-container").init();
   const data = __spreadValues({
     id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
@@ -6443,22 +6372,22 @@ function toast2(message, options) {
   return data;
 }
 function removeToast(id) {
-  if (!windowExists) return;
+  if (!windowExists2) return;
   const toast3 = customElements.get("w-toast-container").init();
   return toast3.del(id);
 }
 function updateToast(id, options) {
-  if (!windowExists) return;
+  if (!windowExists2) return;
   const toast3 = customElements.get("w-toast-container").init();
   toast3.set(__spreadValues(__spreadValues({}, toast3.get(id)), options));
   return toast3.get(id);
 }
 
 // packages/toast/toast-container.js
-import { css as css8, html as html26 } from "lit";
-import WarpElement17 from "@warp-ds/elements-core";
-import { repeat as repeat2 } from "lit/directives/repeat.js";
-var WarpToastContainer = class extends WarpElement17 {
+import { css as css8, html as html25 } from "lit";
+import WarpElement16 from "@warp-ds/elements-core";
+import { repeat } from "lit/directives/repeat.js";
+var WarpToastContainer = class extends WarpElement16 {
   constructor() {
     super();
     this._toasts = /* @__PURE__ */ new Map();
@@ -6540,13 +6469,13 @@ var WarpToastContainer = class extends WarpElement17 {
     return result;
   }
   render() {
-    return html26`
+    return html25`
       <aside class="${toaster.wrapper}">
         <div class="${toaster.base}" id="w-toast-container-list">
-          ${repeat2(
+          ${repeat(
       this._toastsArray,
       (toast3) => toast3.id,
-      (toast3) => html26` <w-toast
+      (toast3) => html25` <w-toast
                 class="${toaster.content}"
                 id="${toast3.id}"
                 type="${toast3.type}"
@@ -6561,7 +6490,7 @@ var WarpToastContainer = class extends WarpElement17 {
   }
 };
 __publicField(WarpToastContainer, "styles", [
-  WarpElement17.styles,
+  WarpElement16.styles,
   css8`
       :host {
         display: block;
@@ -6576,8 +6505,8 @@ if (!customElements.get("w-toast-container")) {
 }
 
 // packages/toast/toast.js
-import { css as css9, html as html27 } from "lit";
-import WarpElement18 from "@warp-ds/elements-core";
+import { css as css9, html as html26 } from "lit";
+import WarpElement17 from "@warp-ds/elements-core";
 
 // node_modules/.pnpm/element-collapse@1.1.0/node_modules/element-collapse/index.js
 var windowExists3 = typeof window !== "undefined";
@@ -6670,7 +6599,7 @@ var toastType = {
   warning: "warning"
 };
 var _WarpToast_instances, primaryClasses_get, iconClasses_get;
-var WarpToast = class extends WarpElement18 {
+var WarpToast = class extends WarpElement17 {
   constructor() {
     super();
     __privateAdd(this, _WarpToast_instances);
@@ -6725,9 +6654,9 @@ var WarpToast = class extends WarpElement18 {
     }
   }
   get _iconMarkup() {
-    if (this._warning) return html27`<w-icon-warning-16></w-icon-warning-16>`;
-    if (this._error) return html27`<w-icon-error-16></w-icon-error-16>`;
-    else return html27`<w-icon-success-16></w-icon-success-16>`;
+    if (this._warning) return html26`<w-icon-warning-16></w-icon-warning-16>`;
+    if (this._error) return html26`<w-icon-error-16></w-icon-error-16>`;
+    else return html26`<w-icon-success-16></w-icon-success-16>`;
   }
   async collapse() {
     return new Promise((resolve) => {
@@ -6744,8 +6673,8 @@ var WarpToast = class extends WarpElement18 {
     this.updateComplete.then(() => this.dispatchEvent(event));
   }
   render() {
-    if (!this.text) return html27``;
-    return html27` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
+    if (!this.text) return html26``;
+    return html26` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
       <div class="${__privateGet(this, _WarpToast_instances, primaryClasses_get)}">
         <div class="${__privateGet(this, _WarpToast_instances, iconClasses_get)}">${this._iconMarkup}</div>
         <div role="${this._role}" class="${toast.content}">
@@ -6753,7 +6682,7 @@ var WarpToast = class extends WarpElement18 {
         </div>
         ${when2(
       this.canclose === true,
-      () => html27`
+      () => html26`
             <button class="${toast.close}" @click="${this.close}">
               <w-icon-close-16></w-icon-close-16>
             </button>
@@ -6781,7 +6710,7 @@ iconClasses_get = function() {
   ]);
 };
 __publicField(WarpToast, "styles", [
-  WarpElement18.styles,
+  WarpElement17.styles,
   css9`
       :host {
         display: block;
@@ -6799,10 +6728,10 @@ if (!customElements.get("w-toast")) {
 }
 
 // packages/utils/expand-transition.js
-import { css as css10, html as html28 } from "lit";
-import WarpElement19 from "@warp-ds/elements-core";
+import { css as css10, html as html27 } from "lit";
+import WarpElement18 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined7 } from "lit/directives/if-defined.js";
-var ExpandTransition = class extends WarpElement19 {
+var ExpandTransition = class extends WarpElement18 {
   constructor() {
     super();
     this.show = false;
@@ -6834,7 +6763,7 @@ var ExpandTransition = class extends WarpElement19 {
     return this != null ? this : null;
   }
   render() {
-    return html28`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>${this._removeElement ? html28`` : html28`<slot></slot>`}</div>`;
+    return html27`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>${this._removeElement ? html27`` : html27`<slot></slot>`}</div>`;
   }
 };
 __publicField(ExpandTransition, "properties", {
@@ -6845,7 +6774,7 @@ __publicField(ExpandTransition, "properties", {
   _removeElement: { type: Boolean, state: true }
 });
 __publicField(ExpandTransition, "styles", [
-  WarpElement19.styles,
+  WarpElement18.styles,
   css10`
       :host {
         display: block;
@@ -6857,10 +6786,10 @@ if (!customElements.get("w-expand-transition")) {
 }
 
 // packages/utils/unstyled-heading.js
-import { html as html29 } from "lit";
-import WarpElement20 from "@warp-ds/elements-core";
+import { html as html28 } from "lit";
+import WarpElement19 from "@warp-ds/elements-core";
 import { unsafeHTML as unsafeHTML2 } from "lit/directives/unsafe-html.js";
-var UnstyledHeading = class extends WarpElement20 {
+var UnstyledHeading = class extends WarpElement19 {
   get _markup() {
     return `<h${this.level}
     style="margin: 0; font-weight: unset; font-size: unset; line-height: unset;"
@@ -6870,13 +6799,13 @@ var UnstyledHeading = class extends WarpElement20 {
 `;
   }
   render() {
-    return !this.level ? html29`<slot></slot>` : unsafeHTML2(this._markup);
+    return !this.level ? html28`<slot></slot>` : unsafeHTML2(this._markup);
   }
 };
 __publicField(UnstyledHeading, "properties", {
   level: { type: Number }
 });
-__publicField(UnstyledHeading, "styles", [WarpElement20.styles]);
+__publicField(UnstyledHeading, "styles", [WarpElement19.styles]);
 if (!customElements.get("w-unstyled-heading")) {
   customElements.define("w-unstyled-heading", UnstyledHeading);
 }
@@ -6891,7 +6820,6 @@ export {
   WarpBadge,
   WarpBox,
   WarpBreadcrumbs,
-  WarpBroadcast,
   WarpButton,
   WarpCard,
   WarpExpandable,