@warp-ds/elements 1.0.1-next.5 → 1.0.1-next.7

package/dist/index.js

@@ -60,7 +60,7 @@ const tt = (r) => new pe(typeof r == "string" ? r : r + "", void 0, Cr), A = (r,
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var ar;
-const Bo = window, Ir = Bo.trustedTypes, ct = Ir ? Ir.emptyScript : "", Hr = Bo.reactiveElementPolyfillSupport, ur = { toAttribute(r, o) {
+const Do = window, Ir = Do.trustedTypes, ct = Ir ? Ir.emptyScript : "", Hr = Do.reactiveElementPolyfillSupport, ur = { toAttribute(r, o) {
   switch (o) {
     case Boolean:
       r = r ? ct : null;
@@ -268,7 +268,7 @@ let bo = class extends HTMLElement {
   firstUpdated(o) {
   }
 };
-bo[vr] = !0, bo.elementProperties = /* @__PURE__ */ new Map(), bo.elementStyles = [], bo.shadowRootOptions = { mode: "open" }, Hr == null || Hr({ ReactiveElement: bo }), ((ar = Bo.reactiveElementVersions) !== null && ar !== void 0 ? ar : Bo.reactiveElementVersions = []).push("1.6.2");
+bo[vr] = !0, bo.elementProperties = /* @__PURE__ */ new Map(), bo.elementStyles = [], bo.shadowRootOptions = { mode: "open" }, Hr == null || Hr({ ReactiveElement: bo }), ((ar = Do.reactiveElementVersions) !== null && ar !== void 0 ? ar : Do.reactiveElementVersions = []).push("1.6.2");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -594,7 +594,7 @@ const N = {
   infoClickable: "hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",
   neutralClickable: "hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",
   borderedClickable: "hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"
-}, D = {
+}, B = {
   card: "cursor-pointer overflow-hidden relative transition-all",
   cardShadow: "rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent",
   cardFlat: "border-2 rounded-4",
@@ -638,7 +638,7 @@ const N = {
   paddingTop: "pt-0",
   title: "flex justify-between items-center",
   titleType: "h4"
-}, V = "font-bold max-w-max focusable justify-center transition-colors ease-in-out", z = {
+}, V = "font-bold focusable justify-center transition-colors ease-in-out", z = {
   primary: "i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",
   secondary: "i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
   utility: "i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",
@@ -656,7 +656,7 @@ const N = {
   utility: `border rounded-4 ${V}`,
   negative: `border-0 rounded-8 ${V}`,
   pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${V}`,
-  link: `max-w-max bg-transparent focusable ease-in-out inline active:underline hover:underline ${z.link}`
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${z.link}`
 }, h = {
   xsmall: "py-6 px-16",
   small: "py-8 px-16",
@@ -676,7 +676,7 @@ const N = {
   quiet: `border-0 rounded-8 ${V}`,
   utilityQuiet: `border-0 rounded-4 ${V}`,
   negativeQuiet: `border-0 rounded-8 ${V}`,
-  isDisabled: `font-bold max-w-max justify-center transition-colors ease-in-out cursor-default pointer-events-none ${z.disabled}`
+  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${z.disabled}`
   // .button:disabled, .button--is-disabled
 }, k = {
   // Buttontypes
@@ -743,7 +743,9 @@ const N = {
   link: `${h.medium} ${p.medium} ${f.link}`,
   linkSmall: `${h.linkSmall} ${p.xsmall} ${f.link}`,
   linkAsButton: "inline-block hover:no-underline",
-  a11y: "sr-only"
+  a11y: "sr-only",
+  fullWidth: "w-full max-w-full",
+  contentWidth: "max-w-max"
 }, mo = {
   alert: "flex p-16 border border-l-4 rounded-4",
   willChangeHeight: "will-change-height",
@@ -952,6 +954,7 @@ $(hr, "styles", A`
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -1097,6 +1100,7 @@ $(hr, "styles", A`
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -1200,6 +1204,7 @@ $(hr, "styles", A`
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -1419,6 +1424,7 @@ $(hr, "styles", A`
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -1737,8 +1743,11 @@ ${ee.join(
         [k.pillSmallLoading]: c && this.small && this.loading,
         [k.link]: i && !this.small,
         [k.linkSmall]: i && this.small,
-        [k.linkAsButton]: !!this.href
-      }
+        [k.linkAsButton]: !!this.href,
+        [k.fullWidth]: this.fullWidth,
+        [k.contentWidth]: !this.fullWidth
+      },
+      this.buttonClass
     );
   }
   render() {
@@ -1771,6 +1780,7 @@ $(To, "shadowRootOptions", { ...X.shadowRootOptions, delegatesFocus: !0 }), $(To
   href: { type: String, reflect: !0 },
   target: { type: String, reflect: !0 },
   rel: { type: String, reflect: !0 },
+  fullWidth: { type: Boolean, reflect: !0 },
   buttonClass: { type: String, reflect: !0 }
 }), $(To, "styles", A`
     /* layer: preflights */
@@ -1791,6 +1801,7 @@ $(To, "shadowRootOptions", { ...X.shadowRootOptions, delegatesFocus: !0 }), $(To
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -1936,6 +1947,7 @@ $(To, "shadowRootOptions", { ...X.shadowRootOptions, delegatesFocus: !0 }), $(To
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -2039,6 +2051,7 @@ $(To, "shadowRootOptions", { ...X.shadowRootOptions, delegatesFocus: !0 }), $(To
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -2258,6 +2271,7 @@ $(To, "shadowRootOptions", { ...X.shadowRootOptions, delegatesFocus: !0 }), $(To
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -2434,21 +2448,21 @@ class pr extends X {
   }
   get _outerClasses() {
     return L({
-      [D.card]: !0,
-      [D.cardShadow]: !this.flat,
-      [D.cardSelected]: this.selected,
-      [D.cardFlat]: this.flat,
-      [this.selected ? D.cardFlatSelected : D.cardFlatUnselected]: this.flat
+      [B.card]: !0,
+      [B.cardShadow]: !this.flat,
+      [B.cardSelected]: this.selected,
+      [B.cardFlat]: this.flat,
+      [this.selected ? B.cardFlatSelected : B.cardFlatUnselected]: this.flat
     });
   }
   get _innerClasses() {
     return L({
-      [D.cardOutline]: !0,
-      [this.selected ? D.cardOutlineSelected : D.cardOutlineUnselected]: !0
+      [B.cardOutline]: !0,
+      [this.selected ? B.cardOutlineSelected : B.cardOutlineUnselected]: !0
     });
   }
   get uuButton() {
-    return v`<button class="${D.a11y}" aria-pressed="${this.selected}" tabindex="-1">
+    return v`<button class="${B.a11y}" aria-pressed="${this.selected}" tabindex="-1">
       Velg
     </button>`;
   }
@@ -2493,6 +2507,7 @@ $(pr, "styles", [
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -2638,6 +2653,7 @@ $(pr, "styles", [
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -2741,6 +2757,7 @@ $(pr, "styles", [
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -2960,6 +2977,7 @@ $(pr, "styles", [
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -3171,7 +3189,7 @@ let wr = class extends Tr {
 };
 wr.directiveName = "unsafeHTML", wr.resultType = 1;
 const Ae = Mr(wr);
-var Wo, Ce, Go, Ee, Jo, Le, Ko, Me, go, Po, uo, Do;
+var Wo, Ce, Go, Ee, Jo, Le, Ko, Me, go, Po, uo, Bo;
 class xr extends Zo(X) {
   constructor() {
     super();
@@ -3200,9 +3218,9 @@ class xr extends Zo(X) {
           class="${T(this, Wo, Ce)}"
           id="${T(this, go, Po)}"
           ?autofocus=${this.autoFocus}
-          aria-describedby="${_(T(this, uo, Do))}"
+          aria-describedby="${_(T(this, uo, Bo))}"
           aria-invalid="${_(this.invalid)}"
-          aria-errormessage="${_(this.invalid && T(this, uo, Do))}"
+          aria-errormessage="${_(this.invalid && T(this, uo, Bo))}"
         >
           ${Ae(this._options)}
         </select>
@@ -3226,7 +3244,7 @@ class xr extends Zo(X) {
       </div>
       ${Ro(
       this.always || this.invalid,
-      () => v`<div id="${T(this, uo, Do)}" class="${T(this, Jo, Le)}">${this.hint}</div>`
+      () => v`<div id="${T(this, uo, Bo)}" class="${T(this, Jo, Le)}">${this.hint}</div>`
     )}
     </div>`;
   }
@@ -3253,7 +3271,7 @@ Wo = new WeakSet(), Ce = function() {
   });
 }, go = new WeakSet(), Po = function() {
   return "select_id";
-}, uo = new WeakSet(), Do = function() {
+}, uo = new WeakSet(), Bo = function() {
   return this.hint ? `${T(this, go, Po)}__hint` : void 0;
 }, $(xr, "properties", {
   // Whether the element should receive focus on render
@@ -3288,6 +3306,7 @@ Wo = new WeakSet(), Ce = function() {
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -3433,6 +3452,7 @@ Wo = new WeakSet(), Ce = function() {
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -3536,6 +3556,7 @@ Wo = new WeakSet(), Ce = function() {
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -3755,6 +3776,7 @@ Wo = new WeakSet(), Ce = function() {
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -3962,6 +3984,7 @@ $(mr, "styles", A`
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -4107,6 +4130,7 @@ $(mr, "styles", A`
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -4210,6 +4234,7 @@ $(mr, "styles", A`
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -4429,6 +4454,7 @@ $(mr, "styles", A`
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -4645,6 +4671,7 @@ $(kr, "styles", A`
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -4790,6 +4817,7 @@ $(kr, "styles", A`
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -4893,6 +4921,7 @@ $(kr, "styles", A`
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -5112,6 +5141,7 @@ $(kr, "styles", A`
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -5290,7 +5320,7 @@ const Re = (r) => {
   r.style.height = "auto", r.style.overflow = null, o && o();
 }, qt = (r) => () => {
   r && r();
-}, De = (r, o) => {
+}, Be = (r, o) => {
   const e = (() => {
     if (!o)
       return new Promise((c) => {
@@ -5303,7 +5333,7 @@ const Re = (r) => {
     r.addEventListener("transitionend", t, { once: !0 }), r.style.height = "0px", r.style.transitionTimingFunction = "ease-out", Pe(r), requestAnimationFrame(() => r.style.height = a + "px");
   }), e)
     return e;
-}, Be = (r, o) => {
+}, De = (r, o) => {
   const e = (() => {
     if (!o)
       return new Promise((c) => {
@@ -5411,7 +5441,7 @@ class fr extends X {
     super.disconnectedCallback();
   }
   updated() {
-    !this._expanded && this._wrapper && De(this._wrapper, () => this._expanded = !0);
+    !this._expanded && this._wrapper && Be(this._wrapper, () => this._expanded = !0);
   }
   get _primaryClasses() {
     return ae({
@@ -5453,7 +5483,7 @@ class fr extends X {
   }
   async collapse() {
     return new Promise((o) => {
-      this._expanded && this._wrapper ? Be(this._wrapper, o) : o();
+      this._expanded && this._wrapper ? De(this._wrapper, o) : o();
     });
   }
   close() {
@@ -5499,6 +5529,7 @@ $(fr, "styles", [
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -5644,6 +5675,7 @@ $(fr, "styles", [
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -5747,6 +5779,7 @@ $(fr, "styles", [
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -5966,6 +5999,7 @@ $(fr, "styles", [
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -6357,6 +6391,7 @@ $($r, "styles", [
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -6502,6 +6537,7 @@ $($r, "styles", [
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -6605,6 +6641,7 @@ $($r, "styles", [
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -6824,6 +6861,7 @@ $($r, "styles", [
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -7092,6 +7130,7 @@ $(yr, "properties", {
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -7237,6 +7276,7 @@ $(yr, "properties", {
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -7340,6 +7380,7 @@ $(yr, "properties", {
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -7559,6 +7600,7 @@ $(yr, "properties", {
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -7785,9 +7827,9 @@ async function Ie(r, o) {
   const { x: t, y: a, platform: c, rects: i, elements: l, strategy: d } = r, { boundary: n = "clippingAncestors", rootBoundary: s = "viewport", elementContext: b = "floating", altBoundary: g = !1, padding: w = 0 } = o, x = Oe(w), m = l[g ? b === "floating" ? "reference" : "floating" : b], y = Ho(await c.getClippingRect({ element: (e = await (c.isElement == null ? void 0 : c.isElement(m))) == null || e ? m : m.contextElement || await (c.getDocumentElement == null ? void 0 : c.getDocumentElement(l.floating)), boundary: n, rootBoundary: s, strategy: d })), Y = Ho(c.convertOffsetParentRelativeRectToViewportRelativeRect ? await c.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: b === "floating" ? { ...i.floating, x: t, y: a } : i.reference, offsetParent: await (c.getOffsetParent == null ? void 0 : c.getOffsetParent(l.floating)), strategy: d }) : i[b]);
   return { top: y.top - Y.top + x.top, bottom: Y.bottom - y.bottom + x.bottom, left: y.left - Y.left + x.left, right: Y.right - y.right + x.right };
 }
-const Dt = Math.min, Bt = Math.max;
+const Bt = Math.min, Dt = Math.max;
 function zr(r, o, e) {
-  return Bt(r, Dt(o, e));
+  return Dt(r, Bt(o, e));
 }
 const Nt = (r) => ({ name: "arrow", options: r, async fn(o) {
   const { element: e, padding: t = 0 } = r ?? {}, { x: a, y: c, placement: i, rects: l, platform: d } = o;
@@ -7835,8 +7877,8 @@ const Qt = function(r) {
       switch (g) {
         case "bestFit": {
           var po;
-          const Br = (po = Z.map((Lo) => [Lo, Lo.overflows.filter((wo) => wo > 0).reduce((wo, Ke) => wo + Ke, 0)]).sort((Lo, wo) => Lo[1] - wo[1])[0]) == null ? void 0 : po[0].placement;
-          Br && (lo = Br);
+          const Dr = (po = Z.map((Lo) => [Lo, Lo.overflows.filter((wo) => wo > 0).reduce((wo, Ke) => wo + Ke, 0)]).sort((Lo, wo) => Lo[1] - wo[1])[0]) == null ? void 0 : po[0].placement;
+          Dr && (lo = Dr);
           break;
         }
         case "initialPlacement":
@@ -7901,13 +7943,13 @@ function Ue() {
   const r = navigator.userAgentData;
   return r != null && r.brands ? r.brands.map((o) => o.brand + "/" + o.version).join(" ") : navigator.userAgent;
 }
-function B(r) {
+function D(r) {
   return r instanceof Q(r).HTMLElement;
 }
 function ho(r) {
   return r instanceof Q(r).Element;
 }
-function Dr(r) {
+function Br(r) {
   return typeof ShadowRoot > "u" ? !1 : r instanceof Q(r).ShadowRoot || r instanceof ShadowRoot;
 }
 function er(r) {
@@ -7930,7 +7972,7 @@ function to(r, o, e) {
   o === void 0 && (o = !1), e === void 0 && (e = !1);
   const l = r.getBoundingClientRect();
   let d = 1, n = 1;
-  o && B(r) && (d = r.offsetWidth > 0 && Qo(l.width) / r.offsetWidth || 1, n = r.offsetHeight > 0 && Qo(l.height) / r.offsetHeight || 1);
+  o && D(r) && (d = r.offsetWidth > 0 && Qo(l.width) / r.offsetWidth || 1, n = r.offsetHeight > 0 && Qo(l.height) / r.offsetHeight || 1);
   const s = ho(r) ? Q(r) : window, b = !Qe() && e, g = (l.left + (b && (t = (a = s.visualViewport) == null ? void 0 : a.offsetLeft) != null ? t : 0)) / d, w = (l.top + (b && (c = (i = s.visualViewport) == null ? void 0 : i.offsetTop) != null ? c : 0)) / n, x = l.width / d, m = l.height / n;
   return { width: x, height: m, top: w, right: g + x, bottom: w + m, left: g, x: g, y: w };
 }
@@ -7945,14 +7987,14 @@ function Ve(r) {
   return to(W(r)).left + tr(r).scrollLeft;
 }
 function Jt(r, o, e) {
-  const t = B(o), a = W(o), c = to(r, t && function(d) {
+  const t = D(o), a = W(o), c = to(r, t && function(d) {
     const n = to(d);
     return Qo(n.width) !== d.offsetWidth || Qo(n.height) !== d.offsetHeight;
   }(o), e === "fixed");
   let i = { scrollLeft: 0, scrollTop: 0 };
   const l = { x: 0, y: 0 };
   if (t || !t && e !== "fixed")
-    if ((H(o) !== "body" || er(a)) && (i = tr(o)), B(o)) {
+    if ((H(o) !== "body" || er(a)) && (i = tr(o)), D(o)) {
       const d = to(o, !0);
       l.x = d.x + o.clientLeft, l.y = d.y + o.clientTop;
     } else
@@ -7960,10 +8002,10 @@ function Jt(r, o, e) {
   return { x: c.left + i.scrollLeft - l.x, y: c.top + i.scrollTop - l.y, width: c.width, height: c.height };
 }
 function Fe(r) {
-  return H(r) === "html" ? r : r.assignedSlot || r.parentNode || (Dr(r) ? r.host : null) || W(r);
+  return H(r) === "html" ? r : r.assignedSlot || r.parentNode || (Br(r) ? r.host : null) || W(r);
 }
 function se(r) {
-  return B(r) && getComputedStyle(r).position !== "fixed" ? r.offsetParent : null;
+  return D(r) && getComputedStyle(r).position !== "fixed" ? r.offsetParent : null;
 }
 function _r(r) {
   const o = Q(r);
@@ -7972,7 +8014,7 @@ function _r(r) {
     e = se(e);
   return e && (H(e) === "html" || H(e) === "body" && getComputedStyle(e).position === "static" && !ne(e)) ? o : e || function(t) {
     let a = Fe(t);
-    for (Dr(a) && (a = a.host); B(a) && !["html", "body"].includes(H(a)); ) {
+    for (Br(a) && (a = a.host); D(a) && !["html", "body"].includes(H(a)); ) {
       if (ne(a))
         return a;
       a = a.parentNode;
@@ -7981,14 +8023,14 @@ function _r(r) {
   }(r) || o;
 }
 function ge(r) {
-  if (B(r))
+  if (D(r))
     return { width: r.offsetWidth, height: r.offsetHeight };
   const o = to(r);
   return { width: o.width, height: o.height };
 }
 function We(r) {
   const o = Fe(r);
-  return ["html", "body", "#document"].includes(H(o)) ? r.ownerDocument.body : B(o) && er(o) ? o : We(o);
+  return ["html", "body", "#document"].includes(H(o)) ? r.ownerDocument.body : D(o) && er(o) ? o : We(o);
 }
 function Ge(r, o) {
   var e;
@@ -8018,12 +8060,12 @@ function ue(r, o, e) {
   }(W(r)));
 }
 function Kt(r) {
-  const o = Ge(r), e = ["absolute", "fixed"].includes(Co(r).position) && B(r) ? _r(r) : r;
+  const o = Ge(r), e = ["absolute", "fixed"].includes(Co(r).position) && D(r) ? _r(r) : r;
   return ho(e) ? o.filter((t) => ho(t) && function(a, c) {
     const i = c.getRootNode == null ? void 0 : c.getRootNode();
     if (a.contains(c))
       return !0;
-    if (i && Dr(i)) {
+    if (i && Br(i)) {
       let l = c;
       do {
         if (l && a === l)
@@ -8043,12 +8085,12 @@ const oa = { getClippingRect: function(r) {
   return { width: l.right - l.left, height: l.bottom - l.top, x: l.left, y: l.top };
 }, convertOffsetParentRelativeRectToViewportRelativeRect: function(r) {
   let { rect: o, offsetParent: e, strategy: t } = r;
-  const a = B(e), c = W(e);
+  const a = D(e), c = W(e);
   if (e === c)
     return o;
   let i = { scrollLeft: 0, scrollTop: 0 };
   const l = { x: 0, y: 0 };
-  if ((a || !a && t !== "fixed") && ((H(e) !== "body" || er(c)) && (i = tr(e)), B(e))) {
+  if ((a || !a && t !== "fixed") && ((H(e) !== "body" || er(c)) && (i = tr(e)), D(e))) {
     const d = to(e, !0);
     l.x = d.x + e.clientLeft, l.y = d.y + e.clientTop;
   }
@@ -8244,6 +8286,7 @@ $(qr, "properties", {
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -8389,6 +8432,7 @@ $(qr, "properties", {
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -8492,6 +8536,7 @@ $(qr, "properties", {
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -8711,6 +8756,7 @@ $(qr, "properties", {
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -9019,6 +9065,7 @@ $(Xr, "styles", [
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -9164,6 +9211,7 @@ $(Xr, "styles", [
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -9267,6 +9315,7 @@ $(Xr, "styles", [
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -9486,6 +9535,7 @@ $(Xr, "styles", [
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -9762,6 +9812,7 @@ $(Yr, "styles", [
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -9907,6 +9958,7 @@ $(Yr, "styles", [
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -10010,6 +10062,7 @@ $(Yr, "styles", [
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -10229,6 +10282,7 @@ $(Yr, "styles", [
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -10503,6 +10557,7 @@ $(jr, "styles", A`
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -10648,6 +10703,7 @@ $(jr, "styles", A`
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -10751,6 +10807,7 @@ $(jr, "styles", A`
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -10970,6 +11027,7 @@ $(jr, "styles", A`
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -11153,7 +11211,7 @@ class Zr extends X {
         this._mounted = !0;
         return;
       }
-      this.show && De(this._wrapper), !this.show && !this._removeElement && Be(this._wrapper, () => this._removeElement = !0);
+      this.show && Be(this._wrapper), !this.show && !this._removeElement && De(this._wrapper, () => this._removeElement = !0);
     }
   }
   get _wrapper() {
@@ -11192,6 +11250,7 @@ $(Zr, "properties", {
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -11337,6 +11396,7 @@ $(Zr, "properties", {
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -11440,6 +11500,7 @@ $(Zr, "properties", {
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -11659,6 +11720,7 @@ $(Zr, "properties", {
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}
@@ -11858,6 +11920,7 @@ $(Sr, "properties", {
 .\\[--w-modal-max-height\\:80\\%\\]{--w-modal-max-height:80%;}
 .\\[--w-modal-width\\:640px\\]{--w-modal-width:640px;}
 .focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px;}
+.backdrop-blur{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
 .peer:checked~.peer-checked\\:before\\:bg-center::before{background-position:center;}
 .hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box;}
 .before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}
@@ -12003,6 +12066,7 @@ $(Sr, "properties", {
 .i-bg-\\$color-badge-info-background{background-color:var(--w-color-badge-info-background);}
 .i-bg-\\$color-badge-negative-background{background-color:var(--w-color-badge-negative-background);}
 .i-bg-\\$color-badge-neutral-background{background-color:var(--w-color-badge-neutral-background);}
+.i-bg-\\$color-badge-notification-background{background-color:var(--w-color-badge-notification-background);}
 .i-bg-\\$color-badge-positive-background{background-color:var(--w-color-badge-positive-background);}
 .i-bg-\\$color-badge-price-background{background-color:var(--w-color-badge-price-background);}
 .i-bg-\\$color-badge-warning-background{background-color:var(--w-color-badge-warning-background);}
@@ -12106,6 +12170,7 @@ $(Sr, "properties", {
 .i-text-\\$color-badge-info-text{color:var(--w-color-badge-info-text);}
 .i-text-\\$color-badge-negative-text{color:var(--w-color-badge-negative-text);}
 .i-text-\\$color-badge-neutral-text{color:var(--w-color-badge-neutral-text);}
+.i-text-\\$color-badge-notification-text{color:var(--w-color-badge-notification-text);}
 .i-text-\\$color-badge-positive-text{color:var(--w-color-badge-positive-text);}
 .i-text-\\$color-badge-price-text{color:var(--w-color-badge-price-text);}
 .i-text-\\$color-badge-warning-text{color:var(--w-color-badge-warning-text);}
@@ -12325,6 +12390,7 @@ $(Sr, "properties", {
 .h-44{height:4.4rem;}
 .h-6{height:0.6rem;}
 .h-8{height:0.8rem;}
+.max-w-full{max-width:100%;}
 .max-w-max{max-width:max-content;}
 .min-h-32{min-height:3.2rem;}
 .min-w-16{min-width:1.6rem;}

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

@@ -48,6 +48,10 @@ export class WarpButton extends WarpButton_base {
             type: StringConstructor;
             reflect: boolean;
         };
+        fullWidth: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         buttonClass: {
             type: StringConstructor;
             reflect: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "1.0.1-next.5",
+  "version": "1.0.1-next.7",
   "description": "Custom elements for Warp",
   "exports": {
     ".": "./dist/index.js",
@@ -64,7 +64,7 @@
     "semantic-release-slack-bot": "^4.0.2",
     "tap": "16.3.6",
     "typescript": "5.1.3",
-    "unocss": "^0.53.1",
+    "unocss": "^0.56.0",
     "vite": "4.3.9",
     "vite-plugin-html": "3.2.0"
   },
@@ -72,8 +72,8 @@
     "@fabric-ds/icons": "0.6.7",
     "@open-wc/testing": "3.2.0",
     "@warp-ds/core": "1.0.0",
-    "@warp-ds/uno": "^1.0.0",
-    "@warp-ds/css": "^1.0.1",
+    "@warp-ds/uno": "^1.1.0",
+    "@warp-ds/css": "^1.1.0",
     "glob": "8.1.0",
     "html-format": "1.1.2",
     "lit": "2.7.5"