@warp-ds/elements 1.4.0-next.3 → 1.4.1-next.1

package/dist/index.js

@@ -1042,8 +1042,6 @@ var require_parser = __commonJS({
 
 // packages/affix/index.js
 import { html as html3 } from "lit";
-import WarpElement from "@warp-ds/elements-core";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 // node_modules/.pnpm/@warp-ds+css@1.9.6/node_modules/@warp-ds/css/component-classes/index.js
 var badge = {
@@ -1450,6 +1448,10 @@ var attention = {
   closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
 };
 
+// packages/affix/index.js
+import WarpElement from "@warp-ds/elements-core";
+import { ifDefined } from "lit/directives/if-defined.js";
+
 // node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/search-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
@@ -2091,7 +2093,6 @@ if (!customElements.get("w-affix")) {
 }
 
 // packages/alert/index.js
-import WarpElement2 from "@warp-ds/elements-core";
 import { css, html as html8 } from "lit";
 
 // node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js
@@ -2105,6 +2106,9 @@ var r = function() {
   }, []).join(" ");
 };
 
+// packages/alert/index.js
+import WarpElement2 from "@warp-ds/elements-core";
+
 // node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/info-16.js
 import { LitElement as LitElement3 } from "lit";
 import { unsafeStatic as unsafeStatic3, html as html4 } from "lit/static-html.js";
@@ -2558,8 +2562,6 @@ if (!customElements.get("w-alert")) {
 
 // packages/attention/index.js
 import { css as css2, html as html9, nothing } from "lit";
-import WarpElement3 from "@warp-ds/elements-core";
-import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
 
 // node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
@@ -3851,14 +3853,9 @@ async function useRecompute(state) {
   return state;
 }
 
-// packages/attention/locales/en/messages.mjs
-var messages9 = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Close","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');
-
-// packages/attention/locales/nb/messages.mjs
-var messages10 = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Lukk","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');
-
-// packages/attention/locales/fi/messages.mjs
-var messages11 = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Sulje","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');
+// packages/attention/index.js
+import WarpElement3 from "@warp-ds/elements-core";
+import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
 
 // packages/i18n.ts
 var supportedLocales7 = ["en", "nb", "fi"];
@@ -3895,11 +3892,20 @@ var activateI18n7 = (enMessages, nbMessages, fiMessages) => {
   i18n.activate(locale);
 };
 
+// packages/attention/locales/en/messages.mjs
+var messages9 = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Close","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');
+
+// packages/attention/locales/fi/messages.mjs
+var messages10 = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Sulje","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');
+
+// packages/attention/locales/nb/messages.mjs
+var messages11 = JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Lukk","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');
+
 // packages/attention/index.js
 var WarpAttention = class extends kebabCaseAttributes(WarpElement3) {
   constructor() {
     super();
-    activateI18n7(messages9, messages10, messages11);
+    activateI18n7(messages9, messages11, messages10);
     this.handleDone = this.handleDone.bind(this);
     this.show = false;
     this.placement = "bottom";
@@ -3923,8 +3929,10 @@ var WarpAttention = class extends kebabCaseAttributes(WarpElement3) {
 ${JSON.stringify(Object.keys(opposites))}`);
     }
     if (this.fallbackPlacements && !this.fallbackPlacements.every((fallbackPlacement) => directions.includes(fallbackPlacement))) {
-      throw new Error(`Invalid "fallbackPlacements" attribute. Set its value to an array with one or more of the following:
-${JSON.stringify(directions)}`);
+      throw new Error(
+        `Invalid "fallbackPlacements" attribute. Set its value to an array with one or more of the following:
+${JSON.stringify(directions)}`
+      );
     }
     setTimeout(() => this.requestUpdate(), 0);
     if (!this.callout) {
@@ -3978,7 +3986,7 @@ ${JSON.stringify(directions)}`);
     });
   }
   get _arrowHtml() {
-    return this.noArrow ? "" : html9`<div id="arrow" role="img" class="${this._arrowClasses}" />`;
+    return this.noArrow ? "" : html9`<div id="arrow" role="img" class="${this._arrowClasses}"></div>`;
   }
   get _activeVariantClasses() {
     const variantProps = {
@@ -4021,7 +4029,7 @@ ${JSON.stringify(directions)}`);
   get _closeBtnHtml() {
     return html9`
       <button aria-label="${this._ariaClose}" @click="${this.close}" @keydown=${this.keypressed} class="${attention.closeBtn}">
-        <w-icon-close-16 />
+        <w-icon-close-16></w-icon-close-16>
       </button>
     `;
   }
@@ -4156,7 +4164,11 @@ ${JSON.stringify(directions)}`);
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html9`
               <slot name="target"></slot>
 
-              <div id="attention" role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}" class="${this._wrapperClasses}">
+              <div
+                id="attention"
+                role="${this.tooltip ? "tooltip" : "img"}"
+                aria-label="${this.defaultAriaLabel()}"
+                class="${this._wrapperClasses}">
                 ${this._arrowHtml}
                 <slot name="message"></slot>
                 ${this.canClose ? this._closeBtnHtml : nothing}
@@ -4313,28 +4325,30 @@ if (!customElements.get("w-box")) {
 
 // packages/breadcrumbs/index.js
 import { html as html12 } from "lit";
-import WarpElement6 from "@warp-ds/elements-core";
 
 // node_modules/.pnpm/@warp-ds+core@1.1.1_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/breadcrumbs/index.js
 function interleave(array, separator2) {
   return array.flatMap((el) => [el, separator2]).slice(0, -1);
 }
 
+// packages/breadcrumbs/index.js
+import WarpElement6 from "@warp-ds/elements-core";
+
 // packages/breadcrumbs/locales/en/messages.mjs
 var messages12 = JSON.parse('{"breadcrumbs.ariaLabel":"You are here"}');
 
-// packages/breadcrumbs/locales/nb/messages.mjs
-var messages13 = JSON.parse('{"breadcrumbs.ariaLabel":"Her er du"}');
-
 // packages/breadcrumbs/locales/fi/messages.mjs
-var messages14 = JSON.parse('{"breadcrumbs.ariaLabel":"Olet t\xE4ss\xE4"}');
+var messages13 = JSON.parse('{"breadcrumbs.ariaLabel":"Olet t\xE4ss\xE4"}');
+
+// packages/breadcrumbs/locales/nb/messages.mjs
+var messages14 = JSON.parse('{"breadcrumbs.ariaLabel":"Her er du"}');
 
 // packages/breadcrumbs/index.js
 var separator = html12`<span class=${breadcrumbs.separator}>/</span>`;
 var WarpBreadcrumbs = class extends kebabCaseAttributes(WarpElement6) {
   constructor() {
     super();
-    activateI18n7(messages12, messages13, messages14);
+    activateI18n7(messages12, messages14, messages13);
     this.ariaLabel = i18n._({
       id: "breadcrumbs.ariaLabel",
       message: "You are here",
@@ -4459,18 +4473,18 @@ import WarpElement8 from "@warp-ds/elements-core";
 // packages/button/locales/en/messages.mjs
 var messages15 = JSON.parse('{"button.aria.loading":"Loading..."}');
 
-// packages/button/locales/nb/messages.mjs
-var messages16 = JSON.parse('{"button.aria.loading":"Laster..."}');
-
 // packages/button/locales/fi/messages.mjs
-var messages17 = JSON.parse('{"button.aria.loading":"Ladataan..."}');
+var messages16 = JSON.parse('{"button.aria.loading":"Ladataan..."}');
+
+// packages/button/locales/nb/messages.mjs
+var messages17 = JSON.parse('{"button.aria.loading":"Laster..."}');
 
 // packages/button/index.js
 var buttonTypes2 = ["primary", "secondary", "negative", "utility", "pill", "link"];
 var WarpButton = class extends kebabCaseAttributes(WarpElement8) {
   constructor() {
     super();
-    activateI18n7(messages15, messages16, messages17);
+    activateI18n7(messages15, messages17, messages16);
     this.variant = "secondary";
     this.ariaValueTextLoading = i18n._({
       id: "button.aria.loading",
@@ -4545,12 +4559,16 @@ ${buttonTypes2.join(", ")}.`);
     );
   }
   render() {
-    return html14` ${this.href ? html14`<a href=${this.href} target=${this.target} rel=${this.target === "_blank" ? this.rel || "noopener" : void 0} class=${this._classes}>
+    return html14` ${this.href ? html14`<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}>
           <slot></slot>
         </button>`}
-    ${this.loading ? html14`<span class="sr-only" role="progressbar" aria-valuenow="{0}" aria-valuetext=${this.ariaValueTextLoading} />` : null}`;
+    ${this.loading ? html14`<span class="sr-only" role="progressbar" aria-valuenow="{0}" aria-valuetext=${this.ariaValueTextLoading}></span>` : null}`;
   }
 };
 __publicField(WarpButton, "shadowRootOptions", __spreadProps(__spreadValues({}, WarpElement8.shadowRootOptions), {
@@ -4656,6 +4674,7 @@ 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 { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 
 // node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 import { LitElement as LitElement7 } from "lit";
@@ -4840,7 +4859,6 @@ if (!customElements.get("w-icon-chevron-up-16")) {
 }
 
 // packages/expandable/index.js
-import { ifDefined as ifDefined4 } from "lit/directives/if-defined.js";
 var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
   constructor() {
     super();
@@ -4869,8 +4887,7 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
       [this.contentClass || ""]: true,
       [box.box]: this.box,
       [expandable.paddingTop]: this._hasTitle && this.box
-    })}
-    >
+    })}>
       <slot></slot>
     </div>`;
   }
@@ -4892,8 +4909,7 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
       [expandable.expandable]: true,
       [expandable.expandableBox]: this.box,
       [expandable.expandableBleed]: this.bleed
-    })}
-    >
+    })}>
       ${this._hasTitle ? html18`<w-unstyled-heading level=${this.headingLevel}>
             <button
               type="button"
@@ -4903,8 +4919,7 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
       [expandable.button]: true,
       [expandable.buttonBox]: this.box
     })}
-              @click=${() => this.expanded = !this.expanded}
-            >
+              @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
@@ -4912,8 +4927,7 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
       [expandable.chevron]: true,
       [expandable.chevronBox]: this.box,
       [expandable.chevronNonBox]: !this.box
-    })}
-                    >
+    })}>
                       ${this._showChevronUp ? html18`<w-icon-chevron-up-16 class="${this._chevronUpClasses}"></w-icon-chevron-up-16>` : html18`<w-icon-chevron-down-16 class="${this._chevronDownClasses}"></w-icon-chevron-down-16>`}
                     </div>`}
               </div>
@@ -4924,8 +4938,7 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
       [expandable.expansion]: true,
       [expandable.expansionNotExpanded]: !this.expanded
     })}
-            aria-hidden=${ifDefined4(!this.expanded ? true : void 0)}
-          >
+            aria-hidden=${ifDefined4(!this.expanded ? true : void 0)}>
             ${this._expandableSlot}
           </div>`}
     </div>`;
@@ -4966,6 +4979,7 @@ if (!customElements.get("w-expandable")) {
 
 // packages/pill/index.js
 import { html as html19 } from "lit";
+import WarpElement11 from "@warp-ds/elements-core";
 
 // packages/pill/locales/en/messages.mjs
 var messages20 = JSON.parse('{"pill.aria.openFilter":"Open filter","pill.aria.removeFilter":["Remove filter ",["label"]]}');
@@ -4977,7 +4991,6 @@ var messages21 = JSON.parse('{"pill.aria.openFilter":"Avaa suodatin","pill.aria.
 var messages29 = JSON.parse('{"pill.aria.openFilter":"\xC5pne filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
 
 // packages/pill/index.js
-import WarpElement11 from "@warp-ds/elements-core";
 var WarpPill = class extends kebabCaseAttributes(WarpElement11) {
   constructor() {
     super();
@@ -5046,17 +5059,17 @@ if (!customElements.get("w-pill")) {
 import { html as html20 } from "lit";
 import WarpElement12 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined5 } from "lit/directives/if-defined.js";
-import { when } from "lit/directives/when.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
 
 // packages/select/locales/en/messages.mjs
 var messages30 = JSON.parse('{"select.label.optional":"(optional)"}');
 
-// packages/select/locales/nb/messages.mjs
-var messages31 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
-
 // packages/select/locales/fi/messages.mjs
-var messages39 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
+var messages31 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
+
+// packages/select/locales/nb/messages.mjs
+var messages39 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
 
 // packages/select/index.js
 var _classes, classes_get, _helpTextClasses, helpTextClasses_get, _chevronClasses, chevronClasses_get, _id, id_get, _helpId, helpId_get;
@@ -5068,7 +5081,7 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
     __privateAdd(this, _chevronClasses);
     __privateAdd(this, _id);
     __privateAdd(this, _helpId);
-    activateI18n7(messages30, messages31, messages39);
+    activateI18n7(messages30, messages39, messages31);
     this._options = this.innerHTML;
   }
   render() {
@@ -5090,7 +5103,13 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
           >`
     )}
       <div class="${select.selectWrapper}">
-        <select class="${__privateGet(this, _classes, classes_get)}" id="${__privateGet(this, _id, id_get)}" ?autofocus=${this.autoFocus} aria-describedby="${ifDefined5(__privateGet(this, _helpId, helpId_get))}" aria-invalid="${ifDefined5(this.invalid)}" aria-errormessage="${ifDefined5(this.invalid && __privateGet(this, _helpId, helpId_get))}">
+        <select
+          class="${__privateGet(this, _classes, classes_get)}"
+          id="${__privateGet(this, _id, id_get)}"
+          ?autofocus=${this.autoFocus}
+          aria-describedby="${ifDefined5(__privateGet(this, _helpId, helpId_get))}"
+          aria-invalid="${ifDefined5(this.invalid)}"
+          aria-errormessage="${ifDefined5(this.invalid && __privateGet(this, _helpId, helpId_get))}">
           ${unsafeHTML(this._options)}
         </select>
         <div class="${__privateGet(this, _chevronClasses, chevronClasses_get)}">
@@ -5222,7 +5241,28 @@ var WarpTextField = class extends WarpElement13 {
       ${this._label}
       <div class="${input.wrapper}">
         <slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
-        <input class="${this._inputStyles}" type="${this.type}" min="${ifDefined6(this.min)}" max="${ifDefined6(this.max)}" size="${ifDefined6(this.size)}" minlength="${ifDefined6(this.minLength)}" maxlength="${ifDefined6(this.maxLength)}" name="${ifDefined6(this.name)}" pattern="${ifDefined6(this.pattern)}" placeholder="${ifDefined6(this.placeholder)}" value="${ifDefined6(this.value)}" aria-describedby="${ifDefined6(this._helpId)}" aria-errormessage="${ifDefined6(this._error)}" aria-invalid="${ifDefined6(this.invalid)}" id="${this._id}" ?disabled="${this.disabled}" ?readonly="${this.readOnly}" ?required="${this.required}" @blur="${this.handler}" @change="${this.handler}" @focus="${this.handler}" />
+        <input
+          class="${this._inputStyles}"
+          type="${this.type}"
+          min="${ifDefined6(this.min)}"
+          max="${ifDefined6(this.max)}"
+          size="${ifDefined6(this.size)}"
+          minlength="${ifDefined6(this.minLength)}"
+          maxlength="${ifDefined6(this.maxLength)}"
+          name="${ifDefined6(this.name)}"
+          pattern="${ifDefined6(this.pattern)}"
+          placeholder="${ifDefined6(this.placeholder)}"
+          value="${ifDefined6(this.value)}"
+          aria-describedby="${ifDefined6(this._helpId)}"
+          aria-errormessage="${ifDefined6(this._error)}"
+          aria-invalid="${ifDefined6(this.invalid)}"
+          id="${this._id}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readOnly}"
+          ?required="${this.required}"
+          @blur="${this.handler}"
+          @change="${this.handler}"
+          @focus="${this.handler}" />
         <slot @slotchange="${this.suffixSlotChange}" name="suffix"></slot>
       </div>
       ${this.helpText && html21`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
@@ -5397,7 +5437,14 @@ var WarpToastContainer = class extends WarpElement14 {
           ${repeat2(
       this._toastsArray,
       (toast3) => toast3.id,
-      (toast3) => html22` <w-toast class="${toaster.content}" id="${toast3.id}" type="${toast3.type}" text="${toast3.text}" ?canclose=${toast3.canclose} @close=${() => this.del(toast3.id)}> </w-toast>`
+      (toast3) => html22` <w-toast
+                class="${toaster.content}"
+                id="${toast3.id}"
+                type="${toast3.type}"
+                text="${toast3.text}"
+                ?canclose=${toast3.canclose}
+                @close=${() => this.del(toast3.id)}>
+              </w-toast>`
     )}
         </div>
       </aside>
@@ -5422,8 +5469,6 @@ if (!customElements.get("w-toast-container")) {
 // packages/toast/toast.js
 import { css as css8, html as html23 } from "lit";
 import WarpElement15 from "@warp-ds/elements-core";
-import { classMap as classMap2 } from "lit/directives/class-map.js";
-import { when as when2 } from "lit/directives/when.js";
 
 // node_modules/.pnpm/element-collapse@1.1.0/node_modules/element-collapse/index.js
 var windowExists2 = typeof window !== "undefined";
@@ -5498,14 +5543,18 @@ var collapse = (el, done) => {
     return returnPromise;
 };
 
+// packages/toast/toast.js
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+import { when as when2 } from "lit/directives/when.js";
+
 // packages/toast/locales/en/messages.mjs
 var messages40 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
 
-// packages/toast/locales/nb/messages.mjs
-var messages41 = JSON.parse('{"toast.aria.error":"Varsel","toast.aria.successful":"Vellykket","toast.aria.warning":"Feil"}');
-
 // packages/toast/locales/fi/messages.mjs
-var messages42 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+var messages41 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+
+// packages/toast/locales/nb/messages.mjs
+var messages42 = JSON.parse('{"toast.aria.error":"Varsel","toast.aria.successful":"Vellykket","toast.aria.warning":"Feil"}');
 
 // packages/toast/toast.js
 var classes2 = (definition) => {
@@ -5525,7 +5574,7 @@ var toastType = {
 var WarpToast = class extends WarpElement15 {
   constructor() {
     super();
-    activateI18n7(messages40, messages41, messages42);
+    activateI18n7(messages40, messages42, messages41);
     this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
     this.type = "success";
     this.text = "";