@maggioli-design-system/mds-push-notification 2.3.0 → 2.4.0

package/dist/collection/components/mds-push-notification/mds-push-notification.css

@@ -1,8 +1,6 @@
 @tailwind components;
-@tailwind utilities;
 
 :host {
-
   --mds-push-notification-duration: 200ms;
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--tone-neutral-04));
@@ -30,7 +28,6 @@
 }
 
 :host([deletable="false"]){
-
   padding-right: 1rem;
 }
 
@@ -40,9 +37,7 @@
 }
 
 .actions{
-
   gap: 0.5rem;
-
   padding-top: 0.5rem;
 
   display: flex;
@@ -56,9 +51,7 @@
 }
 
 .picture{
-
   max-width: 3rem;
-
   border-radius: 0.25rem;
 
   box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -66,13 +59,9 @@
 }
 
 .close-button{
-
   padding: 0.375rem;
-
   transition-property: opacity;
-
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
   transition-duration: 150ms;
 
   background-color: transparent;
@@ -83,7 +72,7 @@
   top: 0;
 }
 
-:host(:hover) .close-button {
+:host-context(:not(.safari)):host(:hover) .close-button {
   opacity: 1;
 }
 
@@ -94,7 +83,6 @@
 }
 
 .header{
-
   gap: 0.25rem;
 
   align-items: baseline;
@@ -111,7 +99,6 @@
 }
 
 .time{
-
   margin-right: 0.25rem;
 
   flex-shrink: 0;
@@ -119,25 +106,21 @@
 }
 
 .subject {
-
   --mds-text-line-clamp: var(--mds-push-notification-subject-line-clamp);
 
-  line-height: 0.875rem;
+  line-height: 1.25rem;
   text-overflow: ellipsis;
 }
 
 .message {
-
   --mds-text-line-clamp: var(--mds-push-notification-message-line-clamp);
 
-  line-height: 0.875rem;
+  line-height: 1.25rem;
   text-overflow: ellipsis;
 }
 
 .avatar{
-
   height: 2.25rem;
-
   width: 2.25rem;
 
   background-color: var(--mds-push-notification-icon-background-color);
@@ -146,7 +129,6 @@
 }
 
 .avatar::part(svg){
-
   width: 1.5rem;
 }
 
@@ -155,360 +137,287 @@
 }
 
 :host([icon]) .avatar::part(wrapper){
-
   padding: 0.375rem;
 }
 
-@tailwind utilities;
+:host-context(.pref-animation-reduce) {
+  transition-duration: 0s;
+}
 
-:host( [variant="primary"][tone="strong"] ) {
+@media (prefers-reduced-motion) {
+  :host-context(.pref-animation-system) {
+    transition-duration: 0s;
+  }
+}
+
+:host-context(.pref-theme-dark) {
+  --mds-push-notification-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;
 
+  background-color: rgb(var(--tone-neutral-09));
+}
+
+@media (prefers-color-scheme: dark) {
+  :host-context(.pref-theme-system) {
+    --mds-push-notification-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;
+
+    background-color: rgb(var(--tone-neutral-09));
+  }
+}
+
+:host-context(.pref-contrast-more) {
+  --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;
+
+  color: rgb(var(--tone-neutral-01));
+}
+
+@media (prefers-contrast: more) {
+  :host-context(.pref-contrast-system) {
+    --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;
+
+    color: rgb(var(--tone-neutral-01));
+  }
+}
+
+:host([variant="primary"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--variant-primary-05));
   --mds-push-notification-icon-color: rgb(var(--variant-primary-10));
 }
 
-:host( [variant="primary"] ),
-:host( [variant="primary"][tone="weak"] ) {
-
+:host([variant="primary"]),
+:host([variant="primary"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--variant-primary-09));
   --mds-push-notification-icon-color: rgb(var(--variant-primary-05));
 }
 
-:host( [variant="primary"][tone="quiet"] ) {
-
+:host([variant="primary"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--variant-primary-05));
 }
 
-@tailwind utilities;
-
-:host( [variant="orange"][tone="strong"] ) {
-  
+:host([variant="orange"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-orange-05));
   --mds-push-notification-icon-color: rgb(var(--label-orange-10));
 }
 
-:host( [variant="orange"] ),
-:host( [variant="orange"][tone="weak"] ) {
-
+:host([variant="orange"]),
+:host([variant="orange"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-orange-09));
   --mds-push-notification-icon-color: rgb(var(--label-orange-05));
 }
 
-:host( [variant="orange"][tone="quiet"] ) {
-
+:host([variant="orange"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-orange-05));
 }
 
-:host( [variant="amaranth"][tone="strong"] ) {
-  
+:host([variant="amaranth"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-05));
   --mds-push-notification-icon-color: rgb(var(--label-amaranth-10));
 }
 
-:host( [variant="amaranth"] ),
-:host( [variant="amaranth"][tone="weak"] ) {
-
+:host([variant="amaranth"]),
+:host([variant="amaranth"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-09));
   --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));
 }
 
-:host( [variant="amaranth"][tone="quiet"] ) {
-
+:host([variant="amaranth"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));
 }
 
-:host( [variant="orchid"][tone="strong"] ) {
-  
+:host([variant="orchid"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-orchid-05));
   --mds-push-notification-icon-color: rgb(var(--label-orchid-10));
 }
 
-:host( [variant="orchid"] ),
-:host( [variant="orchid"][tone="weak"] ) {
-
+:host([variant="orchid"]),
+:host([variant="orchid"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-orchid-09));
   --mds-push-notification-icon-color: rgb(var(--label-orchid-05));
 }
 
-:host( [variant="orchid"][tone="quiet"] ) {
-
+:host([variant="orchid"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-orchid-05));
 }
 
-:host( [variant="violet"][tone="strong"] ) {
-  
+:host([variant="violet"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-violet-05));
   --mds-push-notification-icon-color: rgb(var(--label-violet-10));
 }
 
-:host( [variant="violet"] ),
-:host( [variant="violet"][tone="weak"] ) {
-
+:host([variant="violet"]),
+:host([variant="violet"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-violet-09));
   --mds-push-notification-icon-color: rgb(var(--label-violet-05));
 }
 
-:host( [variant="violet"][tone="quiet"] ) {
-
+:host([variant="violet"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-violet-05));
 }
 
-:host( [variant="blue"][tone="strong"] ) {
-  
+:host([variant="blue"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-blue-05));
   --mds-push-notification-icon-color: rgb(var(--label-blue-10));
 }
 
-:host( [variant="blue"] ),
-:host( [variant="blue"][tone="weak"] ) {
-
+:host([variant="blue"]),
+:host([variant="blue"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-blue-09));
   --mds-push-notification-icon-color: rgb(var(--label-blue-05));
 }
 
-:host( [variant="blue"][tone="quiet"] ) {
-
+:host([variant="blue"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-blue-05));
 }
 
-:host( [variant="sky"][tone="strong"] ) {
-  
+:host([variant="sky"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-sky-05));
   --mds-push-notification-icon-color: rgb(var(--label-sky-10));
 }
 
-:host( [variant="sky"] ),
-:host( [variant="sky"][tone="weak"] ) {
-
+:host([variant="sky"]),
+:host([variant="sky"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-sky-09));
   --mds-push-notification-icon-color: rgb(var(--label-sky-05));
 }
 
-:host( [variant="sky"][tone="quiet"] ) {
-
+:host([variant="sky"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-sky-05));
 }
 
-:host( [variant="aqua"][tone="strong"] ) {
-  
+:host([variant="aqua"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-aqua-05));
   --mds-push-notification-icon-color: rgb(var(--label-aqua-10));
 }
 
-:host( [variant="aqua"] ),
-:host( [variant="aqua"][tone="weak"] ) {
-
+:host([variant="aqua"]),
+:host([variant="aqua"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-aqua-09));
   --mds-push-notification-icon-color: rgb(var(--label-aqua-05));
 }
 
-:host( [variant="aqua"][tone="quiet"] ) {
-
+:host([variant="aqua"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-aqua-05));
 }
 
-:host( [variant="green"][tone="strong"] ) {
-  
+:host([variant="green"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-green-05));
   --mds-push-notification-icon-color: rgb(var(--label-green-10));
 }
 
-:host( [variant="green"] ),
-:host( [variant="green"][tone="weak"] ) {
-
+:host([variant="green"]),
+:host([variant="green"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-green-09));
   --mds-push-notification-icon-color: rgb(var(--label-green-05));
 }
 
-:host( [variant="green"][tone="quiet"] ) {
-
+:host([variant="green"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-green-05));
 }
 
-:host( [variant="lime"][tone="strong"] ) {
-  
+:host([variant="lime"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-lime-05));
   --mds-push-notification-icon-color: rgb(var(--label-lime-10));
 }
 
-:host( [variant="lime"] ),
-:host( [variant="lime"][tone="weak"] ) {
-
+:host([variant="lime"]),
+:host([variant="lime"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-lime-09));
   --mds-push-notification-icon-color: rgb(var(--label-lime-05));
 }
 
-:host( [variant="lime"][tone="quiet"] ) {
-
+:host([variant="lime"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-lime-05));
 }
 
-:host( [variant="yellow"][tone="strong"] ) {
-  
+:host([variant="yellow"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-yellow-05));
   --mds-push-notification-icon-color: rgb(var(--label-yellow-10));
 }
 
-:host( [variant="yellow"] ),
-:host( [variant="yellow"][tone="weak"] ) {
-
+:host([variant="yellow"]),
+:host([variant="yellow"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--label-yellow-09));
   --mds-push-notification-icon-color: rgb(var(--label-yellow-05));
 }
 
-:host( [variant="yellow"][tone="quiet"] ) {
-
+:host([variant="yellow"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--label-yellow-05));
 }
 
-@tailwind utilities;
-
-:host( [variant="error"][tone="strong"] ) {
-
+:host([variant="error"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-error-05));
   --mds-push-notification-icon-color: rgb(var(--status-error-10));
 }
 
-:host( [variant="error"] ),
-:host( [variant="error"][tone="weak"] ) {
-
+:host([variant="error"]),
+:host([variant="error"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-error-09));
   --mds-push-notification-icon-color: rgb(var(--status-error-05));
 }
 
-:host( [variant="error"][tone="quiet"] ) {
-
+:host([variant="error"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--status-error-05));
 }
 
-:host( [variant="warning"][tone="strong"] ) {
-  
+:host([variant="warning"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-warning-05));
   --mds-push-notification-icon-color: rgb(var(--status-warning-10));
 }
 
-:host( [variant="warning"] ),
-:host( [variant="warning"][tone="weak"] ) {
-
+:host([variant="warning"]),
+:host([variant="warning"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-warning-09));
   --mds-push-notification-icon-color: rgb(var(--status-warning-05));
 }
 
-:host( [variant="warning"][tone="quiet"] ) {
-
+:host([variant="warning"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--status-warning-05));
 }
 
-:host( [variant="success"][tone="strong"] ) {
-  
+:host([variant="success"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-success-05));
   --mds-push-notification-icon-color: rgb(var(--status-success-10));
 }
 
-:host( [variant="success"] ),
-:host( [variant="success"][tone="weak"] ) {
-
+:host([variant="success"]),
+:host([variant="success"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-success-09));
   --mds-push-notification-icon-color: rgb(var(--status-success-05));
 }
 
-:host( [variant="success"][tone="quiet"] ) {
-
+:host([variant="success"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--status-success-05));
 }
 
-:host( [variant="info"][tone="strong"] ) {
-  
+:host([variant="info"][tone="strong"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-info-05));
   --mds-push-notification-icon-color: rgb(var(--status-info-10));
 }
 
-:host( [variant="info"] ),
-:host( [variant="info"][tone="weak"] ) {
-
+:host([variant="info"]),
+:host([variant="info"][tone="weak"]) {
   --mds-push-notification-icon-background-color: rgb(var(--status-info-09));
   --mds-push-notification-icon-color: rgb(var(--status-info-05));
 }
 
-:host( [variant="info"][tone="quiet"] ) {
-
+:host([variant="info"][tone="quiet"]) {
   --mds-push-notification-icon-background-color: transparent;
   --mds-push-notification-icon-color: rgb(var(--status-info-05));
 }
 
-@tailwind utilities;
-
-@container style(--magma-pref-animation: reduce) {
-  :host,
-  .close-button {
-    transition-duration: 0s;
-  }
-}
-
-@container style(--magma-pref-animation: system) {
-
-  @media (prefers-reduced-motion) {
-    :host,
-    .close-button {
-      transition-duration: 0s;
-    }
-  }
-}
-
-@tailwind utilities;
-
-@container style(--magma-pref-theme: dark) {
-  :host {
-
-    --mds-push-notification-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;
-  }
-}
-
-@container style(--magma-pref-theme: system) {
-
-  @media (prefers-color-scheme: dark) {
-    :host {
-
-      --mds-push-notification-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;
-    }
-  }
-}
-
-@container style(--magma-pref-contrast: more) {
-  :host {
-
-    --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;
-
-    color: rgb(var(--tone-neutral-01));
-  }
-}
-
-@container style(--magma-pref-contrast: system) {
-
-  @media (prefers-contrast: more) {
-    :host {
-
-      --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;
-
-      color: rgb(var(--tone-neutral-01));
-    }
-  }
-}
-
 :host(:not(:is([hydrated], .hydrated))) {
   animation-duration: 0s;
   border-color: transparent;

package/dist/components/mds-push-notification.js

@@ -997,7 +997,7 @@ const sanitizeISO8601Date = (dateString) => {
     return new Date(dateString).toISOString();
 };
 
-const mdsPushNotificationCss = "@tailwind components;\n@tailwind utilities;\n\n:host {\n\n  --mds-push-notification-duration: 200ms;\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--tone-neutral-04));\n  --mds-push-notification-message-line-clamp: 2;\n  --mds-push-notification-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --mds-push-notification-subject-line-clamp: 1;\n  --mds-push-notification-timing-function: cubic-bezier(1, 0, 0, 1);\n  min-width: 18rem;\n  max-width: 20rem;\n  gap: 1rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  padding-right: 2rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  background-color: rgb(var(--tone-neutral));\n  -webkit-box-shadow: var(--mds-push-notification-shadow);\n  box-shadow: var(--mds-push-notification-shadow);\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: auto;\n  position: relative;\n  -webkit-transition-duration: var(--mds-push-notification-duration);\n  transition-duration: var(--mds-push-notification-duration);\n  -webkit-transition-property: background-color, color, margin, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, color, margin, -webkit-box-shadow, -webkit-transform;\n  transition-property: background-color, box-shadow, color, margin, transform;\n  transition-property: background-color, box-shadow, color, margin, transform, -webkit-box-shadow, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-push-notification-timing-function);\n  transition-timing-function: var(--mds-push-notification-timing-function);\n}\n\n:host([deletable=\"false\"]){\n\n  padding-right: 1rem;\n}\n\n.content {\n  display: grid;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.actions{\n\n  gap: 0.5rem;\n\n  padding-top: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  min-width: 1px;\n}\n\n.avatar,\n.picture {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.picture{\n\n  max-width: 3rem;\n\n  border-radius: 0.25rem;\n\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  width: 100%;\n}\n\n.close-button{\n\n  padding: 0.375rem;\n\n  -webkit-transition-property: opacity;\n\n  transition-property: opacity;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 150ms;\n\n  transition-duration: 150ms;\n\n  background-color: transparent;\n  fill: rgb(var(--tone-neutral-06));\n  opacity: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host(:hover) .close-button {\n  opacity: 1;\n}\n\n.close-button:focus-visible,\n.close-button:hover {\n  fill: rgb(var(--tone-neutral-03));\n  opacity: 1;\n}\n\n.header{\n\n  gap: 0.25rem;\n\n  -ms-flex-align: baseline;\n\n  align-items: baseline;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.infos {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.time{\n\n  margin-right: 0.25rem;\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.subject {\n\n  --mds-text-line-clamp: var(--mds-push-notification-subject-line-clamp);\n\n  line-height: 0.875rem;\n  text-overflow: ellipsis;\n}\n\n.message {\n\n  --mds-text-line-clamp: var(--mds-push-notification-message-line-clamp);\n\n  line-height: 0.875rem;\n  text-overflow: ellipsis;\n}\n\n.avatar{\n\n  height: 2.25rem;\n\n  width: 2.25rem;\n\n  background-color: var(--mds-push-notification-icon-background-color);\n  border-radius: 1000px;\n  fill: var(--mds-push-notification-icon-color);\n}\n\n.avatar::part(svg){\n\n  width: 1.5rem;\n}\n\n:host([src]) .avatar {\n  background-color: transparent;\n}\n\n:host([icon]) .avatar::part(wrapper){\n\n  padding: 0.375rem;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"][tone=\"strong\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--variant-primary-05));\n  --mds-push-notification-icon-color: rgb(var(--variant-primary-10));\n}\n\n:host( [variant=\"primary\"] ),\n:host( [variant=\"primary\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--variant-primary-09));\n  --mds-push-notification-icon-color: rgb(var(--variant-primary-05));\n}\n\n:host( [variant=\"primary\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--variant-primary-05));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"orange\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-orange-05));\n  --mds-push-notification-icon-color: rgb(var(--label-orange-10));\n}\n\n:host( [variant=\"orange\"] ),\n:host( [variant=\"orange\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-orange-09));\n  --mds-push-notification-icon-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"orange\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-orange-05));\n}\n\n:host( [variant=\"amaranth\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-05));\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-10));\n}\n\n:host( [variant=\"amaranth\"] ),\n:host( [variant=\"amaranth\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-amaranth-09));\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"amaranth\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-amaranth-05));\n}\n\n:host( [variant=\"orchid\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-orchid-05));\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-10));\n}\n\n:host( [variant=\"orchid\"] ),\n:host( [variant=\"orchid\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-orchid-09));\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"orchid\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-orchid-05));\n}\n\n:host( [variant=\"violet\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-violet-05));\n  --mds-push-notification-icon-color: rgb(var(--label-violet-10));\n}\n\n:host( [variant=\"violet\"] ),\n:host( [variant=\"violet\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-violet-09));\n  --mds-push-notification-icon-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"violet\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-violet-05));\n}\n\n:host( [variant=\"blue\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-blue-05));\n  --mds-push-notification-icon-color: rgb(var(--label-blue-10));\n}\n\n:host( [variant=\"blue\"] ),\n:host( [variant=\"blue\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-blue-09));\n  --mds-push-notification-icon-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"blue\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-blue-05));\n}\n\n:host( [variant=\"sky\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-sky-05));\n  --mds-push-notification-icon-color: rgb(var(--label-sky-10));\n}\n\n:host( [variant=\"sky\"] ),\n:host( [variant=\"sky\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-sky-09));\n  --mds-push-notification-icon-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"sky\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-sky-05));\n}\n\n:host( [variant=\"aqua\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-aqua-05));\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-10));\n}\n\n:host( [variant=\"aqua\"] ),\n:host( [variant=\"aqua\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-aqua-09));\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"aqua\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-aqua-05));\n}\n\n:host( [variant=\"green\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-green-05));\n  --mds-push-notification-icon-color: rgb(var(--label-green-10));\n}\n\n:host( [variant=\"green\"] ),\n:host( [variant=\"green\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-green-09));\n  --mds-push-notification-icon-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"green\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-green-05));\n}\n\n:host( [variant=\"lime\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-lime-05));\n  --mds-push-notification-icon-color: rgb(var(--label-lime-10));\n}\n\n:host( [variant=\"lime\"] ),\n:host( [variant=\"lime\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-lime-09));\n  --mds-push-notification-icon-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"lime\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-lime-05));\n}\n\n:host( [variant=\"yellow\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--label-yellow-05));\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-10));\n}\n\n:host( [variant=\"yellow\"] ),\n:host( [variant=\"yellow\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--label-yellow-09));\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-05));\n}\n\n:host( [variant=\"yellow\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--label-yellow-05));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"error\"][tone=\"strong\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-error-05));\n  --mds-push-notification-icon-color: rgb(var(--status-error-10));\n}\n\n:host( [variant=\"error\"] ),\n:host( [variant=\"error\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-error-09));\n  --mds-push-notification-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"error\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-error-05));\n}\n\n:host( [variant=\"warning\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-warning-05));\n  --mds-push-notification-icon-color: rgb(var(--status-warning-10));\n}\n\n:host( [variant=\"warning\"] ),\n:host( [variant=\"warning\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-warning-09));\n  --mds-push-notification-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"warning\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-warning-05));\n}\n\n:host( [variant=\"success\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-success-05));\n  --mds-push-notification-icon-color: rgb(var(--status-success-10));\n}\n\n:host( [variant=\"success\"] ),\n:host( [variant=\"success\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-success-09));\n  --mds-push-notification-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant=\"success\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-success-05));\n}\n\n:host( [variant=\"info\"][tone=\"strong\"] ) {\n  \n  --mds-push-notification-icon-background-color: rgb(var(--status-info-05));\n  --mds-push-notification-icon-color: rgb(var(--status-info-10));\n}\n\n:host( [variant=\"info\"] ),\n:host( [variant=\"info\"][tone=\"weak\"] ) {\n\n  --mds-push-notification-icon-background-color: rgb(var(--status-info-09));\n  --mds-push-notification-icon-color: rgb(var(--status-info-05));\n}\n\n:host( [variant=\"info\"][tone=\"quiet\"] ) {\n\n  --mds-push-notification-icon-background-color: transparent;\n  --mds-push-notification-icon-color: rgb(var(--status-info-05));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .close-button {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .close-button {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-push-notification-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-push-notification-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;\n\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-push-notification-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;\n\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n";
+const mdsPushNotificationCss = "@tailwind components; :host{--mds-push-notification-duration:200ms;--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--tone-neutral-04));--mds-push-notification-message-line-clamp:2;--mds-push-notification-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--mds-push-notification-subject-line-clamp:1;--mds-push-notification-timing-function:cubic-bezier(1, 0, 0, 1);min-width:18rem;max-width:20rem;gap:1rem;border-radius:0.5rem;padding:1rem;padding-right:2rem;-ms-flex-align:start;align-items:flex-start;background-color:rgb(var(--tone-neutral));-webkit-box-shadow:var(--mds-push-notification-shadow);box-shadow:var(--mds-push-notification-shadow);color:rgb(var(--tone-neutral-02));display:-ms-flexbox;display:flex;pointer-events:auto;position:relative;-webkit-transition-duration:var(--mds-push-notification-duration);transition-duration:var(--mds-push-notification-duration);-webkit-transition-property:background-color, color, margin, -webkit-box-shadow, -webkit-transform;transition-property:background-color, color, margin, -webkit-box-shadow, -webkit-transform;transition-property:background-color, box-shadow, color, margin, transform;transition-property:background-color, box-shadow, color, margin, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:var(--mds-push-notification-timing-function);transition-timing-function:var(--mds-push-notification-timing-function)}:host([deletable=\"false\"]){padding-right:1rem}.content{display:grid;-ms-flex-positive:1;flex-grow:1}.actions{gap:0.5rem;padding-top:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:1px}.avatar,.picture{-ms-flex-negative:0;flex-shrink:0}.picture{max-width:3rem;border-radius:0.25rem;-webkit-box-shadow:0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);box-shadow:0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);width:100%}.close-button{padding:0.375rem;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;background-color:transparent;fill:rgb(var(--tone-neutral-06));opacity:0;position:absolute;right:0;top:0}:host-context(:not(.safari)):host(:hover) .close-button{opacity:1}.close-button:focus-visible,.close-button:hover{fill:rgb(var(--tone-neutral-03));opacity:1}.header{gap:0.25rem;-ms-flex-align:baseline;align-items:baseline;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-width:0;overflow:hidden;text-overflow:ellipsis}.infos{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.time{margin-right:0.25rem;-ms-flex-negative:0;flex-shrink:0;white-space:nowrap}.subject{--mds-text-line-clamp:var(--mds-push-notification-subject-line-clamp);line-height:1.25rem;text-overflow:ellipsis}.message{--mds-text-line-clamp:var(--mds-push-notification-message-line-clamp);line-height:1.25rem;text-overflow:ellipsis}.avatar{height:2.25rem;width:2.25rem;background-color:var(--mds-push-notification-icon-background-color);border-radius:1000px;fill:var(--mds-push-notification-icon-color)}.avatar::part(svg){width:1.5rem}:host([src]) .avatar{background-color:transparent}:host([icon]) .avatar::part(wrapper){padding:0.375rem}:host-context(.pref-animation-reduce){-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system){-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-push-notification-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;background-color:rgb(var(--tone-neutral-09))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-push-notification-shadow:0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;background-color:rgb(var(--tone-neutral-09))}}:host-context(.pref-contrast-more){--mds-push-notification-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;color:rgb(var(--tone-neutral-01))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){--mds-push-notification-shadow:0 0 0 2px rgb(var(--tone-neutral-01) / 0.6) inset;color:rgb(var(--tone-neutral-01))}}:host([variant=\"primary\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--variant-primary-05));--mds-push-notification-icon-color:rgb(var(--variant-primary-10))}:host([variant=\"primary\"]),:host([variant=\"primary\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--variant-primary-09));--mds-push-notification-icon-color:rgb(var(--variant-primary-05))}:host([variant=\"primary\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--variant-primary-05))}:host([variant=\"orange\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-orange-05));--mds-push-notification-icon-color:rgb(var(--label-orange-10))}:host([variant=\"orange\"]),:host([variant=\"orange\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-orange-09));--mds-push-notification-icon-color:rgb(var(--label-orange-05))}:host([variant=\"orange\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-orange-05))}:host([variant=\"amaranth\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-amaranth-05));--mds-push-notification-icon-color:rgb(var(--label-amaranth-10))}:host([variant=\"amaranth\"]),:host([variant=\"amaranth\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-amaranth-09));--mds-push-notification-icon-color:rgb(var(--label-amaranth-05))}:host([variant=\"amaranth\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-amaranth-05))}:host([variant=\"orchid\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-orchid-05));--mds-push-notification-icon-color:rgb(var(--label-orchid-10))}:host([variant=\"orchid\"]),:host([variant=\"orchid\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-orchid-09));--mds-push-notification-icon-color:rgb(var(--label-orchid-05))}:host([variant=\"orchid\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-orchid-05))}:host([variant=\"violet\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-violet-05));--mds-push-notification-icon-color:rgb(var(--label-violet-10))}:host([variant=\"violet\"]),:host([variant=\"violet\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-violet-09));--mds-push-notification-icon-color:rgb(var(--label-violet-05))}:host([variant=\"violet\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-violet-05))}:host([variant=\"blue\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-blue-05));--mds-push-notification-icon-color:rgb(var(--label-blue-10))}:host([variant=\"blue\"]),:host([variant=\"blue\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-blue-09));--mds-push-notification-icon-color:rgb(var(--label-blue-05))}:host([variant=\"blue\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-blue-05))}:host([variant=\"sky\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-sky-05));--mds-push-notification-icon-color:rgb(var(--label-sky-10))}:host([variant=\"sky\"]),:host([variant=\"sky\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-sky-09));--mds-push-notification-icon-color:rgb(var(--label-sky-05))}:host([variant=\"sky\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-sky-05))}:host([variant=\"aqua\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-aqua-05));--mds-push-notification-icon-color:rgb(var(--label-aqua-10))}:host([variant=\"aqua\"]),:host([variant=\"aqua\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-aqua-09));--mds-push-notification-icon-color:rgb(var(--label-aqua-05))}:host([variant=\"aqua\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-aqua-05))}:host([variant=\"green\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-green-05));--mds-push-notification-icon-color:rgb(var(--label-green-10))}:host([variant=\"green\"]),:host([variant=\"green\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-green-09));--mds-push-notification-icon-color:rgb(var(--label-green-05))}:host([variant=\"green\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-green-05))}:host([variant=\"lime\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-lime-05));--mds-push-notification-icon-color:rgb(var(--label-lime-10))}:host([variant=\"lime\"]),:host([variant=\"lime\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-lime-09));--mds-push-notification-icon-color:rgb(var(--label-lime-05))}:host([variant=\"lime\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-lime-05))}:host([variant=\"yellow\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--label-yellow-05));--mds-push-notification-icon-color:rgb(var(--label-yellow-10))}:host([variant=\"yellow\"]),:host([variant=\"yellow\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--label-yellow-09));--mds-push-notification-icon-color:rgb(var(--label-yellow-05))}:host([variant=\"yellow\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--label-yellow-05))}:host([variant=\"error\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--status-error-05));--mds-push-notification-icon-color:rgb(var(--status-error-10))}:host([variant=\"error\"]),:host([variant=\"error\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--status-error-09));--mds-push-notification-icon-color:rgb(var(--status-error-05))}:host([variant=\"error\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--status-error-05))}:host([variant=\"warning\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--status-warning-05));--mds-push-notification-icon-color:rgb(var(--status-warning-10))}:host([variant=\"warning\"]),:host([variant=\"warning\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--status-warning-09));--mds-push-notification-icon-color:rgb(var(--status-warning-05))}:host([variant=\"warning\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--status-warning-05))}:host([variant=\"success\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--status-success-05));--mds-push-notification-icon-color:rgb(var(--status-success-10))}:host([variant=\"success\"]),:host([variant=\"success\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--status-success-09));--mds-push-notification-icon-color:rgb(var(--status-success-05))}:host([variant=\"success\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--status-success-05))}:host([variant=\"info\"][tone=\"strong\"]){--mds-push-notification-icon-background-color:rgb(var(--status-info-05));--mds-push-notification-icon-color:rgb(var(--status-info-10))}:host([variant=\"info\"]),:host([variant=\"info\"][tone=\"weak\"]){--mds-push-notification-icon-background-color:rgb(var(--status-info-09));--mds-push-notification-icon-color:rgb(var(--status-info-05))}:host([variant=\"info\"][tone=\"quiet\"]){--mds-push-notification-icon-background-color:transparent;--mds-push-notification-icon-color:rgb(var(--status-info-05))}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsPushNotificationStyle0 = mdsPushNotificationCss;
 
 dayjs.extend(relativeTime);

package/dist/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2025-02-25T17:13:54",
+  "timestamp": "2025-03-05T17:02:20",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.25.1",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "components": [