@warp-ds/elements 1.3.2-next.1 → 1.3.3-next.1

package/dist/index.js

@@ -2472,9 +2472,7 @@ var WarpAlert = class extends WarpElement2 {
   connectedCallback() {
     super.connectedCallback();
     if (!this.variant || !variants[this.variant]) {
-      throw new Error(
-        'Invalid "variant" attribute. Set its value to one of the following:\nnegative, positive, warning, info.'
-      );
+      throw new Error('Invalid "variant" attribute. Set its value to one of the following:\nnegative, positive, warning, info.');
     }
   }
   get _wrapperClasses() {
@@ -2491,15 +2489,18 @@ var WarpAlert = class extends WarpElement2 {
     });
   }
   get _icon() {
-    if (this.variant === variants.info)
+    if (this.variant === variants.info) {
       return html8`<w-icon-info-16></w-icon-info-16>`;
-    if (this.variant === variants.warning)
+    }
+    if (this.variant === variants.warning) {
       return html8`<w-icon-warning-16></w-icon-warning-16>`;
-    if (this.variant === variants.negative)
+    }
+    if (this.variant === variants.negative) {
       return html8`<w-icon-error-16></w-icon-error-16>`;
-    if (this.variant === variants.positive)
+    }
+    if (this.variant === variants.positive) {
       return html8`<w-icon-success-16></w-icon-success-16>`;
-    else
+    } else
       return "";
   }
   render() {
@@ -3020,12 +3021,8 @@ var WarpAttention = class extends kebabCaseAttributes(WarpElement3) {
   connectedCallback() {
     super.connectedCallback();
     if (!this.placement || !Object.keys(opposites).includes(this.placement)) {
-      throw new Error(
-        `Invalid "placement" attribute. Set its value to one of the following:
-${JSON.stringify(
-          Object.keys(opposites)
-        )}`
-      );
+      throw new Error(`Invalid "placement" attribute. Set its value to one of the following:
+${JSON.stringify(Object.keys(opposites))}`);
     }
     setTimeout(() => this.requestUpdate(), 0);
   }
@@ -3040,16 +3037,10 @@ ${JSON.stringify(
   }
   updated() {
     if (!this.callout) {
-      this._attentionEl.style.setProperty(
-        "--attention-visibility",
-        this.show ? "" : "hidden"
-      );
+      this._attentionEl.style.setProperty("--attention-visibility", this.show ? "" : "hidden");
     }
     if (!this.tooltip) {
-      this._attentionEl.style.setProperty(
-        "--attention-display",
-        this.show ? "flex" : "none"
-      );
+      this._attentionEl.style.setProperty("--attention-display", this.show ? "flex" : "none");
     }
     this.attentionState = {
       isShowing: this.show,
@@ -3207,12 +3198,7 @@ ${JSON.stringify(
   }
   get _closeBtnHtml() {
     return html9`
-      <button 
-        aria-label="${this._ariaClose}"
-        @click="${this.close}"
-        @keydown=${this.keypressed}
-        class="${attention.closeBtn}"
-      >
+      <button aria-label="${this._ariaClose}" @click="${this.close}" @keydown=${this.keypressed} class="${attention.closeBtn}">
         <w-icon-close-16 />
       </button>
     `;
@@ -3223,12 +3209,7 @@ ${JSON.stringify(
         ${this.placement === "right" || this.placement === "bottom" ? 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}
@@ -3236,8 +3217,7 @@ ${JSON.stringify(
             ` : html9`
               <div id="attention" class="${this._wrapperClasses}">
                 <slot name="message"></slot>
-                ${this._arrowHtml}
-                ${this.canClose ? this._closeBtnHtml : nothing}
+                ${this._arrowHtml} ${this.canClose ? this._closeBtnHtml : nothing}
               </div>
               <slot name="target"></slot>
             `}
@@ -3398,9 +3378,7 @@ var messages13 = JSON.parse('{"breadcrumbs.ariaLabel":"Her er du"}');
 var messages14 = JSON.parse('{"breadcrumbs.ariaLabel":"Olet t\xE4ss\xE4"}');
 
 // packages/breadcrumbs/index.js
-var separator = html12`<span class=${breadcrumbs.separator}
-  >/</span
->`;
+var separator = html12`<span class=${breadcrumbs.separator}>/</span>`;
 var WarpBreadcrumbs = class extends kebabCaseAttributes(WarpElement6) {
   constructor() {
     super();
@@ -3417,15 +3395,9 @@ var WarpBreadcrumbs = class extends kebabCaseAttributes(WarpElement6) {
     const styledChildren = flattenedChildren.map((child, index) => {
       if (typeof child === "string") {
         const isLastEl = index === children.length - 1;
-        return html12`<span
-          class=${breadcrumbs.text}
-          aria-current=${isLastEl ? "page" : void 0}
-          >${child}</span
-        >`;
+        return html12`<span class=${breadcrumbs.text} aria-current=${isLastEl ? "page" : void 0}>${child}</span>`;
       }
-      child.classList.add(
-        child.tagName === "A" ? breadcrumbs.link : breadcrumbs.text
-      );
+      child.classList.add(child.tagName === "A" ? breadcrumbs.link : breadcrumbs.text);
       return child;
     });
     this._children = interleave(styledChildren, separator);
@@ -3433,9 +3405,7 @@ var WarpBreadcrumbs = class extends kebabCaseAttributes(WarpElement6) {
   render() {
     return html12`
       <nav aria-labelledby="breadCrumbLabel">
-        <h2 id="breadCrumbLabel" class=${breadcrumbs.a11y}>
-          ${this.ariaLabel}
-        </h2>
+        <h2 id="breadCrumbLabel" class=${breadcrumbs.a11y}>${this.ariaLabel}</h2>
         <div class=${breadcrumbs.wrapper}>${this._children}</div>
       </nav>
     `;
@@ -3498,14 +3468,7 @@ var WarpBroadcast = class extends WarpElement7 {
         ${repeat(
       messages43,
       ({ id }) => `broadcast-${id}`,
-      ({ id, message }) => html13`<w-toast
-              id="broadcast-${id}"
-              type="warning"
-              text="${message}"
-              canclose
-              @close=${() => this._del(id)}
-            >
-            </w-toast>`
+      ({ id, message }) => html13`<w-toast id="broadcast-${id}" type="warning" text="${message}" canclose @close=${() => this._del(id)}> </w-toast>`
     )}
       </aside>
     `;
@@ -3551,14 +3514,7 @@ var messages16 = JSON.parse('{"button.aria.loading":"Laster..."}');
 var messages17 = JSON.parse('{"button.aria.loading":"Ladataan..."}');
 
 // packages/button/index.js
-var buttonTypes2 = [
-  "primary",
-  "secondary",
-  "negative",
-  "utility",
-  "pill",
-  "link"
-];
+var buttonTypes2 = ["primary", "secondary", "negative", "utility", "pill", "link"];
 var WarpButton = class extends kebabCaseAttributes(WarpElement8) {
   constructor() {
     super();
@@ -3573,12 +3529,8 @@ var WarpButton = class extends kebabCaseAttributes(WarpElement8) {
   connectedCallback() {
     super.connectedCallback();
     if (!buttonTypes2.includes(this.variant)) {
-      throw new Error(
-        `Invalid "variant" attribute. Set its value to one of the following:
-${buttonTypes2.join(
-          ", "
-        )}.`
-      );
+      throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${buttonTypes2.join(", ")}.`);
     }
   }
   firstUpdated() {
@@ -3641,25 +3593,12 @@ ${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}
-        >
+        </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} />` : null}`;
   }
 };
 __publicField(WarpButton, "shadowRootOptions", __spreadProps(__spreadValues({}, WarpElement8.shadowRootOptions), {
@@ -3714,20 +3653,10 @@ var WarpCard = class extends WarpElement9 {
     });
   }
   get uuButton() {
-    return html15`<button
-      class="${card.a11y}"
-      aria-pressed="${this.selected}"
-      tabindex="-1"
-    >
-      Velg
-    </button>`;
+    return html15`<button class="${card.a11y}" aria-pressed="${this.selected}" tabindex="-1">Velg</button>`;
   }
   get uuSpan() {
-    return html15`<span
-      role="checkbox"
-      aria-checked="true"
-      aria-disabled="true"
-    ></span>`;
+    return html15`<span role="checkbox" aria-checked="true" aria-disabled="true"></span>`;
   }
   keypressed(e2) {
     if (!this.clickable || e2.altKey || e2.ctrlKey)
@@ -3739,13 +3668,8 @@ var WarpCard = class extends WarpElement9 {
   }
   render() {
     return html15`
-      <div
-        tabindex=${ifDefined3(this.clickable ? "0" : void 0)}
-        class="${this._outerClasses}"
-        @keydown=${this.keypressed}
-      >
-        ${this.clickable ? this.uuButton : ""}
-        ${!this.clickable && this.selected ? this.uuSpan : ""}
+      <div tabindex=${ifDefined3(this.clickable ? "0" : void 0)} class="${this._outerClasses}" @keydown=${this.keypressed}>
+        ${this.clickable ? this.uuButton : ""} ${!this.clickable && this.selected ? this.uuSpan : ""}
         <div class="${this._innerClasses}"></div>
         <slot></slot>
       </div>
@@ -3756,7 +3680,7 @@ __publicField(WarpCard, "styles", [
   WarpElement9.styles,
   css4`
       a::after {
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         right: 0;
@@ -4030,9 +3954,7 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
               @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.title ? html18`<span class="${expandable.titleType}">${this.title}</span>` : html18`<slot name="title"></slot>`}
                 ${this.noChevron ? "" : html18`<div
                       class=${fclasses({
       [expandable.chevron]: true,
@@ -4040,18 +3962,12 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement10) {
       [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>`}
+                      ${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>
             </button>
           </w-unstyled-heading>` : ""}
-      ${this.animated ? html18`<w-expand-transition ?show=${this.expanded}>
-            ${this._expandableSlot}
-          </w-expand-transition>` : html18`<div
+      ${this.animated ? html18`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>` : html18`<div
             class=${fclasses({
       [expandable.expansion]: true,
       [expandable.expansionNotExpanded]: !this.expanded
@@ -4090,7 +4006,7 @@ __publicField(WarpExpandable, "styles", [
       ::slotted(:last-child) {
         margin-bottom: 0px !important;
       }
-      `
+    `
 ]);
 if (!customElements.get("w-expandable")) {
   customElements.define("w-expandable", WarpExpandable);
@@ -4151,24 +4067,12 @@ var WarpPill = class extends kebabCaseAttributes(WarpElement11) {
   render() {
     return html19`
       <div class="${pill.pill}">
-        <button
-          type="button"
-          class="${this._labelClasses}"
-          @click="${this._onClick}"
-        >
-          <span class="${pill.a11y}"
-            >${this.openSrLabel ? this.openSrLabel : this.openFilterSrText}</span
-          >
+        <button type="button" class="${this._labelClasses}" @click="${this._onClick}">
+          <span class="${pill.a11y}">${this.openSrLabel ? this.openSrLabel : this.openFilterSrText}</span>
           <slot></slot>
         </button>
-        ${this.canClose ? html19`<button
-              type="button"
-              class="${this._closeClasses}"
-              @click="${this._onClose}"
-            >
-              <span class="${pill.a11y}"
-                >${this.closeSrLabel ? this.closeSrLabel : this.removeFilterSrText}</span
-              >
+        ${this.canClose ? html19`<button type="button" class="${this._closeClasses}" @click="${this._onClose}">
+              <span class="${pill.a11y}">${this.closeSrLabel ? this.closeSrLabel : this.removeFilterSrText}</span>
               <w-icon-close-16></w-icon-close-16>
             </button>` : null}
       </div>
@@ -4187,7 +4091,7 @@ if (!customElements.get("w-pill")) {
 }
 
 // packages/select/index.js
-import { html as html20, css as css6 } from "lit";
+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";
@@ -4234,26 +4138,14 @@ 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)}">
           <w-icon-chevron-down-16></w-icon-chevron-down-16>
         </div>
       </div>
-      ${when(
-      this.always || this.invalid,
-      () => html20`<div id="${__privateGet(this, _helpId, helpId_get)}" class="${__privateGet(this, _helpTextClasses, helpTextClasses_get)}">
-            ${this.hint}
-          </div>`
-    )}
+      ${when(this.always || this.invalid, () => html20`<div id="${__privateGet(this, _helpId, helpId_get)}" class="${__privateGet(this, _helpTextClasses, helpTextClasses_get)}">${this.hint}</div>`)}
     </div>`;
   }
 };
@@ -4308,7 +4200,7 @@ if (!customElements.get("w-select")) {
 }
 
 // packages/textfield/index.js
-import { css as css7, html as html21 } from "lit";
+import { css as css6, html as html21 } from "lit";
 import WarpElement13 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined6 } from "lit/directives/if-defined.js";
 var WarpTextField = class extends WarpElement13 {
@@ -4379,29 +4271,7 @@ 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>`}
@@ -4435,7 +4305,7 @@ __publicField(WarpTextField, "properties", {
 // https://stackoverflow.com/a/61631668
 __publicField(WarpTextField, "styles", [
   WarpElement13.styles,
-  css7`
+  css6`
       :host {
         display: block;
       }
@@ -4443,7 +4313,7 @@ __publicField(WarpTextField, "styles", [
         margin-bottom: 0px !important;
       }
       .warp-input-with-prefix {
-        padding-left:var(--w-prefix-width, 40px);
+        padding-left: var(--w-prefix-width, 40px);
       }
     `
 ]);
@@ -4480,7 +4350,7 @@ function updateToast(id, options) {
 }
 
 // packages/toast/toast-container.js
-import { css as css8, html as html22 } from "lit";
+import { css as css7, html as html22 } from "lit";
 import WarpElement14 from "@warp-ds/elements-core";
 import { repeat as repeat2 } from "lit/directives/repeat.js";
 var WarpToastContainer = class extends WarpElement14 {
@@ -4505,7 +4375,7 @@ var WarpToastContainer = class extends WarpElement14 {
         collapseTasks.push(el.collapse());
       }
       Promise.all(collapseTasks).then(() => {
-        if (keep.length != this._toasts.size)
+        if (keep.length !== this._toasts.size)
           this._toasts = new Map(keep);
       });
     }, 500);
@@ -4532,12 +4402,11 @@ var WarpToastContainer = class extends WarpElement14 {
    * @returns {ToastOptions}
    */
   get(id) {
-    if (!id)
+    if (!id) {
       throw new Error('undefined "id" given when attempting to retrieve toast');
+    }
     if (typeof id !== "string" && !Number.isInteger(id))
-      throw new Error(
-        '"id" must be number or string when attempting to retrieve toast'
-      );
+      throw new Error('"id" must be number or string when attempting to retrieve toast');
     return this._toasts.get(id);
   }
   /**
@@ -4560,12 +4429,11 @@ var WarpToastContainer = class extends WarpElement14 {
    * @returns {ToastOptions | false}
    */
   async del(id) {
-    if (!id)
+    if (!id) {
       throw new Error('undefined "id" given when attempting to retrieve toast');
+    }
     if (typeof id !== "string" && !Number.isInteger(id))
-      throw new Error(
-        '"id" must be number or string when attempting to retrieve toast'
-      );
+      throw new Error('"id" must be number or string when attempting to retrieve toast');
     const el = this.renderRoot.querySelector(`#${id}`);
     if (!this._toasts.has(id))
       return false;
@@ -4581,15 +4449,7 @@ 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>
@@ -4598,7 +4458,7 @@ var WarpToastContainer = class extends WarpElement14 {
 };
 __publicField(WarpToastContainer, "styles", [
   WarpElement14.styles,
-  css8`
+  css7`
       :host {
         display: block;
       }
@@ -4612,7 +4472,7 @@ if (!customElements.get("w-toast-container")) {
 }
 
 // packages/toast/toast.js
-import { css as css9, html as html23 } from "lit";
+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";
@@ -4744,7 +4604,7 @@ var WarpToast = class extends WarpElement15 {
   get _iconClasses() {
     return classes2({
       [toast.icon]: true,
-      [toast.iconPositive]: this.type == toastType.success,
+      [toast.iconPositive]: this.type === toastType.success,
       [toast.iconWarning]: this.type === toastType.warning,
       [toast.iconNegative]: this.type === toastType.error
     });
@@ -4763,23 +4623,26 @@ var WarpToast = class extends WarpElement15 {
     return this._error || this._warning ? "alert" : "status";
   }
   get _typeLabel() {
-    if (this._warning)
+    if (this._warning) {
       return i18n._({
         id: "toast.aria.warning",
         message: "Warning",
         comment: "Default screenreader message for warning in toast component"
       });
-    if (this._error)
+    }
+    if (this._error) {
       return i18n._({
         id: "toast.aria.error",
         message: "Error",
         comment: "Default screenreader message for error in toast component"
       });
-    return i18n._({
-      id: "toast.aria.successful",
-      message: "Successful",
-      comment: "Default screenreader message for successful in toast component"
-    });
+    } else {
+      return i18n._({
+        id: "toast.aria.successful",
+        message: "Successful",
+        comment: "Default screenreader message for successful in toast component"
+      });
+    }
   }
   get _iconMarkup() {
     if (this._warning)
@@ -4828,7 +4691,7 @@ var WarpToast = class extends WarpElement15 {
 };
 __publicField(WarpToast, "styles", [
   WarpElement15.styles,
-  css9`
+  css8`
       :host {
         display: block;
       }
@@ -4845,7 +4708,7 @@ if (!customElements.get("w-toast")) {
 }
 
 // packages/utils/expand-transition.js
-import { css as css10, html as html24 } from "lit";
+import { css as css9, html as html24 } from "lit";
 import WarpElement16 from "@warp-ds/elements-core";
 import { ifDefined as ifDefined7 } from "lit/directives/if-defined.js";
 var ExpandTransition = class extends WarpElement16 {
@@ -4881,9 +4744,7 @@ var ExpandTransition = class extends WarpElement16 {
     return this != null ? this : null;
   }
   render() {
-    return html24`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>
-      ${this._removeElement ? html24`` : html24`<slot></slot>`}
-    </div>`;
+    return html24`<div aria-hidden=${ifDefined7(!this.show ? "true" : void 0)}>${this._removeElement ? html24`` : html24`<slot></slot>`}</div>`;
   }
 };
 __publicField(ExpandTransition, "properties", {
@@ -4895,7 +4756,7 @@ __publicField(ExpandTransition, "properties", {
 });
 __publicField(ExpandTransition, "styles", [
   WarpElement16.styles,
-  css10`
+  css9`
       :host {
         display: block;
       }