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

package/dist/cjs/mds-push-notification.cjs.entry.js

@@ -1001,7 +1001,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: 1.25rem;\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: 1.25rem;\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";
+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 MdsPushNotificationStyle0 = mdsPushNotificationCss;
 
 dayjs.extend(relativeTime);

package/dist/collection/common/floating-controller.js

@@ -143,12 +143,12 @@ export class FloatingController {
 }
 export class Backdrop {
     constructor(backdropId) {
-        this.defaultBackdropId = 'mds-backdrop';
+        this.defaultBackdropId = 'magma-backdrop';
         this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
         this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
         this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
-        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
-        this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
+        this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`;
+        this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`;
     }
     attachBackdrop() {
         if (!this.backdropEl) {

package/dist/collection/common/slot.js

@@ -16,4 +16,13 @@ const hasSlottedNodes = (el, name) => {
     }
     return false;
 };
-export { hasSlottedElements, hasSlottedNodes, };
+const hasSlotted = (el, name) => {
+    var _a;
+    const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (slot) {
+        return slot.assignedNodes().length > 0 || slot.assignedElements().length > 0;
+    }
+    return false;
+};
+export { hasSlottedElements, hasSlottedNodes, hasSlotted, };

package/dist/collection/common/string.js

@@ -0,0 +1,30 @@
+const levenshteinDistance = (a, b) => {
+    const dp = Array.from({ length: a.length + 1 }, (_, i) => 
+    // eslint-disable-next-line no-nested-ternary
+    Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)));
+    for (let i = 1; i <= a.length; i++) {
+        for (let j = 1; j <= b.length; j++) {
+            if (a[i - 1] === b[j - 1]) {
+                dp[i][j] = dp[i - 1][j - 1];
+            }
+            else {
+                dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+            }
+        }
+    }
+    return dp[a.length][b.length];
+};
+const closest = (input, validCodes) => {
+    let [closest] = validCodes;
+    let minDistance = levenshteinDistance(input, closest);
+    for (const code of validCodes) {
+        const distance = levenshteinDistance(input, code);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closest = code;
+        }
+    }
+    return closest;
+};
+const firstLetterUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+export { closest, firstLetterUppercase, levenshteinDistance, };

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

@@ -122,7 +122,7 @@
 
   --mds-text-line-clamp: var(--mds-push-notification-subject-line-clamp);
 
-  line-height: 1.25rem;
+  line-height: 0.875rem;
   text-overflow: ellipsis;
 }
 
@@ -130,7 +130,7 @@
 
   --mds-text-line-clamp: var(--mds-push-notification-message-line-clamp);
 
-  line-height: 1.25rem;
+  line-height: 0.875rem;
   text-overflow: ellipsis;
 }
 
@@ -509,3 +509,122 @@
   }
 }
 
+:host(:not(:is([hydrated], .hydrated))) {
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+
+/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
+
+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))
+{
+  animation-duration: 0s;
+  border-color: transparent;
+  box-shadow: 0 0 0 transparent;
+  opacity: 0;
+  outline-color: transparent;
+  transition-delay: 0s;
+  transition-duration: 0s;
+  visibility: hidden;
+}
+

package/dist/collection/dictionary/keyboard.js

@@ -0,0 +1,84 @@
+const keyboardKeyNameDictionary = [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    'a',
+    'alt',
+    'altleft',
+    'altright',
+    'arrowdown',
+    'arrowleft',
+    'arrowright',
+    'arrowup',
+    'b',
+    'backspace',
+    'c',
+    'capslock',
+    'command',
+    'commandleft',
+    'commandright',
+    'control',
+    'controlleft',
+    'controlright',
+    'd',
+    'delete',
+    'e',
+    'end',
+    'enter',
+    'escape',
+    'f',
+    'f1',
+    'f10',
+    'f11',
+    'f12',
+    'f2',
+    'f3',
+    'f4',
+    'f5',
+    'f6',
+    'f7',
+    'f8',
+    'f9',
+    'g',
+    'h',
+    'home',
+    'i',
+    'j',
+    'k',
+    'l',
+    'm',
+    'n',
+    'o',
+    'option',
+    'optionleft',
+    'optionright',
+    'p',
+    'pagedown',
+    'pageup',
+    'q',
+    'r',
+    's',
+    'shift',
+    'shiftleft',
+    'shiftright',
+    'space',
+    't',
+    'tab',
+    'u',
+    'v',
+    'w',
+    'windows',
+    'windowsleft',
+    'windowsright',
+    'x',
+    'y',
+    'z',
+];
+export { keyboardKeyNameDictionary, };

package/dist/collection/type/keyboard.js

@@ -0,0 +1 @@
+export {};

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: 1.25rem;\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: 1.25rem;\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";
+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 MdsPushNotificationStyle0 = mdsPushNotificationCss;
 
 dayjs.extend(relativeTime);

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-06T09:47:21",
+  "timestamp": "2025-02-25T17:13:54",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.25.1",

package/dist/esm/mds-push-notification.entry.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: 1.25rem;\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: 1.25rem;\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";
+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 MdsPushNotificationStyle0 = mdsPushNotificationCss;
 
 dayjs.extend(relativeTime);