@justeattakeaway/pie-notification 0.13.4 → 0.14.1

package/custom-elements.json

@@ -82,7 +82,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    variant: 'neutral',\n    position: 'inline-content',\n    isDismissible: false,\n    isCompact: false,\n    headingLevel: 'h2',\n    hideIcon: false,\n    isOpen: true,\n    hasStackedActions: false,\n}"
+          "default": "{\r\n    variant: 'neutral',\r\n    position: 'inline-content',\r\n    isDismissible: false,\r\n    isCompact: false,\r\n    headingLevel: 'h2',\r\n    hideIcon: false,\r\n    isOpen: true,\r\n    hasStackedActions: false,\r\n}"
         }
       ],
       "exports": [
@@ -282,7 +282,7 @@
               "kind": "method",
               "name": "renderFooter",
               "privacy": "private",
-              "description": "Template for the footer area\nCalled within the main render function."
+              "description": "Template for the footer area\r\nCalled within the main render function."
             },
             {
               "kind": "method",
@@ -293,7 +293,7 @@
                   "text": "TemplateResult"
                 }
               },
-              "description": "Template for the header area\nCalled within the main render function."
+              "description": "Template for the header area\r\nCalled within the main render function."
             },
             {
               "kind": "method",
@@ -310,7 +310,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Template for the heading icon area.\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\nCalled within the main render function."
+              "description": "Template for the heading icon area.\r\nIt can return an icon provided externally via named slot or it can return a default icon according to the chosen variant if defined.\r\nCalled within the main render function."
             },
             {
               "kind": "method",
@@ -321,13 +321,13 @@
                   "text": "TemplateResult"
                 }
               },
-              "description": "Template for the close button element. Called within the\nmain render function."
+              "description": "Template for the close button element. Called within the\r\nmain render function."
             },
             {
               "kind": "method",
               "name": "handleCloseButton",
               "privacy": "private",
-              "description": "It handles the action when user clicks in the close button.\nAlso triggers an event when is executed."
+              "description": "It handles the action when user clicks in the close button.\r\nAlso triggers an event when is executed."
             },
             {
               "kind": "method",
@@ -341,7 +341,7 @@
                   }
                 }
               ],
-              "description": "It handles the action button action.\nAlso triggers an event according to its `actionType`."
+              "description": "It handles the action button action.\r\nAlso triggers an event according to its `actionType`."
             },
             {
               "kind": "method",

package/dist/index.js

@@ -1,9 +1,9 @@
-import { LitElement as _, unsafeCSS as A, nothing as l } from "lit";
-import { property as r, queryAssignedElements as w } from "lit/decorators.js";
+import { LitElement as A, unsafeCSS as k, nothing as s } from "lit";
 import { classMap as m } from "lit/directives/class-map.js";
-import { html as p, unsafeStatic as E } from "lit/static-html.js";
-import { dispatchCustomEvent as $, validPropertyValues as b, defineCustomElement as S } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as C } from "lit/directives/if-defined.js";
+import { html as p, unsafeStatic as w } from "lit/static-html.js";
+import { validPropertyValues as y, safeCustomElement as _, dispatchCustomEvent as b } from "@justeattakeaway/pie-webc-core";
+import { property as r, queryAssignedElements as z } from "lit/decorators.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -11,20 +11,14 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
-var z = Object.defineProperty, T = (u, i, n, a) => {
-  for (var t = void 0, c = u.length - 1, h; c >= 0; c--)
-    (h = u[c]) && (t = h(i, n, t) || t);
-  return t && z(i, n, t), t;
-};
-class O extends _ {
-  constructor() {
-    super(...arguments), this.v = "0.13.4";
+const u = class u extends A {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", u.v);
   }
-}
-T([
-  r({ type: String, reflect: !0 })
-], O.prototype, "v");
-const B = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], L = ["h2", "h3", "h4", "h5", "h6"], V = ["inline-content", "full-width"], o = "pie-notification", d = "c-notification", D = `${o}-close`, P = `${o}-open`, F = `${o}-leading-action-click`, j = `${o}-supporting-action-click`, f = {
+};
+u.v = "0.14.1";
+let $ = u;
+const S = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], E = ["h2", "h3", "h4", "h5", "h6"], T = ["inline-content", "full-width"], t = "pie-notification", l = "c-notification", B = `${t}-close`, L = `${t}-open`, D = `${t}-leading-action-click`, V = `${t}-supporting-action-click`, d = {
   variant: "neutral",
   position: "inline-content",
   isDismissible: !1,
@@ -33,22 +27,22 @@ const B = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
   hideIcon: !1,
   isOpen: !0,
   hasStackedActions: !1
-}, G = "*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height);color:var(--dt-color-content-default)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-02);--notification-icon-fill: var(--dt-color-content-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-support-error)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:flex-end}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;color:var(--notification-icon-fill);margin-block-start:var(--notification-icon-offset)}@media (max-width: 767px){.icon,::slotted([slot=icon]){margin-block-start:0}}";
-var H = Object.defineProperty, s = (u, i, n, a) => {
-  for (var t = void 0, c = u.length - 1, h; c >= 0; c--)
-    (h = u[c]) && (t = h(i, n, t) || t);
-  return t && H(i, n, t), t;
+}, P = "*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-close-icon-offset: var(--dt-spacing-b);--notification-icon-fill: var(--dt-color-content-default);--notification-icon-offset: 2px;--icon-size-override: 24px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height);color:var(--dt-color-content-default)}.c-notification.c-notification--compact{--notification-direction: row}.c-notification.c-notification--full-width{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification.c-notification--neutral-alternative{--notification-background-color: var(--dt-color-container-default)}.c-notification.c-notification--info{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification.c-notification--success{--notification-background-color: var(--dt-color-support-positive-02);--notification-icon-fill: var(--dt-color-content-positive)}.c-notification.c-notification--warning{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification.c-notification--error{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-support-error)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 769px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row;gap:var(--dt-spacing-c)}.c-notification-content-section.c-notification-content-section--dismissible{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer.c-notification-footer--compact{align-self:flex-end}@media (max-width: 767px){.c-notification-footer.c-notification-footer--stacked{flex-direction:column-reverse}}.icon,::slotted([slot=icon]){display:inline-flex;color:var(--notification-icon-fill);margin-block-start:var(--notification-icon-offset)}@media (max-width: 767px){.icon,::slotted([slot=icon]){margin-block-start:0}}";
+var F = Object.defineProperty, j = Object.getOwnPropertyDescriptor, a = (i, o, n, f) => {
+  for (var c = f > 1 ? void 0 : f ? j(o, n) : o, g = i.length - 1, h; g >= 0; g--)
+    (h = i[g]) && (c = (f ? h(o, n, c) : h(c)) || c);
+  return f && c && F(o, n, c), c;
 };
-const y = class y extends O {
+let e = class extends $ {
   constructor() {
-    super(...arguments), this.isOpen = f.isOpen, this.variant = f.variant, this.position = f.position, this.isDismissible = f.isDismissible, this.isCompact = f.isCompact, this.headingLevel = f.headingLevel, this.hideIcon = f.hideIcon, this.hasStackedActions = f.hasStackedActions;
+    super(...arguments), this.isOpen = d.isOpen, this.variant = d.variant, this.position = d.position, this.isDismissible = d.isDismissible, this.isCompact = d.isCompact, this.headingLevel = d.headingLevel, this.hideIcon = d.hideIcon, this.hasStackedActions = d.hasStackedActions;
   }
   /**
    * Lifecycle method executed when component is updated.
    * It dispatches an event if notification is opened.
    */
   updated(i) {
-    i.has("isOpen") && this.isOpen && $(this, P, { targetNotification: this });
+    i.has("isOpen") && this.isOpen && b(this, L, { targetNotification: this });
   }
   /**
    * Template for the footer area
@@ -59,20 +53,20 @@ const y = class y extends O {
   renderFooter() {
     const {
       leadingAction: i,
-      supportingAction: n,
-      isCompact: a,
-      hasStackedActions: t
+      supportingAction: o,
+      isCompact: n,
+      hasStackedActions: f
     } = this, c = {
-      [`${d}-footer`]: !0,
-      [`${d}-footer--compact`]: a,
-      [`${d}-footer--stacked`]: t && !a
+      [`${l}-footer`]: !0,
+      [`${l}-footer--compact`]: n,
+      [`${l}-footer--stacked`]: f && !n
     };
     return p`
             <footer
                 class="${m(c)}"
-                data-test-id="${o}-footer">
-                    ${n ? this.renderActionButton(n, "supporting") : l}
-                    ${i ? this.renderActionButton(i, "leading") : l}
+                data-test-id="${t}-footer">
+                    ${o ? this.renderActionButton(o, "supporting") : s}
+                    ${i ? this.renderActionButton(i, "leading") : s}
             </footer>
         `;
   }
@@ -83,13 +77,13 @@ const y = class y extends O {
    * @private
    */
   renderNotificationHeading() {
-    const { heading: i, headingLevel: n } = this, a = E(n);
-    return p`<${a}
-                        id="${o}-heading"
-                        class="${d}-heading"
-                        data-test-id="${o}-heading">
+    const { heading: i, headingLevel: o } = this, n = w(o);
+    return p`<${n}
+                        id="${t}-heading"
+                        class="${l}-heading"
+                        data-test-id="${t}-heading">
                             ${i}
-                    </${a}>`;
+                    </${n}>`;
   }
   /**
    * Util method that returns an icon from a variant that has default icon.
@@ -99,15 +93,15 @@ const y = class y extends O {
   getDefaultVariantIcon() {
     switch (this.variant) {
       case "info":
-        return p`<icon-info-circle class="icon" size="m" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return p`<icon-info-circle class="icon" size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return p`<icon-check-circle class="icon" size="m" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return p`<icon-check-circle class="icon" size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return p`<icon-alert-triangle class="icon" size="m" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return p`<icon-alert-triangle class="icon" size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return p`<icon-alert-circle class="icon" size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return p`<icon-alert-circle class="icon" size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
       default:
-        return l;
+        return s;
     }
   }
   /**
@@ -132,10 +126,10 @@ const y = class y extends O {
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
-                class="${d}-icon-close"
-                data-test-id="${o}-icon-close"
+                class="${l}-icon-close"
+                data-test-id="${t}-icon-close"
                 @click="${this.handleCloseButton}"
-                aria-label="${C((i = this.aria) == null ? void 0 : i.close)}">
+                aria-label="${x((i = this.aria) == null ? void 0 : i.close)}">
                 <icon-close></icon-close>
             </pie-icon-button>`;
   }
@@ -146,7 +140,7 @@ const y = class y extends O {
    * @private
    */
   handleCloseButton() {
-    this.isOpen = !1, $(this, D, { targetNotification: this });
+    this.isOpen = !1, b(this, B, { targetNotification: this });
   }
   /**
    * It handles the action button action.
@@ -157,7 +151,7 @@ const y = class y extends O {
    * @private
    */
   handleActionClick(i) {
-    $(this, i === "leading" ? F : j, { targetNotification: this });
+    b(this, i === "leading" ? D : V, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -168,121 +162,122 @@ const y = class y extends O {
    * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
    * @private
    */
-  renderActionButton(i, n) {
-    const { text: a, ariaLabel: t } = i;
-    return a ? p`
+  renderActionButton(i, o) {
+    const { text: n, ariaLabel: f } = i;
+    return n ? p`
             <pie-button
-                variant="${n === "leading" ? "primary" : "ghost"}"
+                variant="${o === "leading" ? "primary" : "ghost"}"
                 size="small-productive"
-                aria-label="${t || l}"
-                @click="${() => this.handleActionClick(n)}"
-                data-test-id="${o}-${n}-action"
+                aria-label="${f || s}"
+                @click="${() => this.handleActionClick(o)}"
+                data-test-id="${t}-${o}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 type="button">
-                ${a}
+                ${n}
             </pie-button>
-        ` : l;
+        ` : s;
   }
   render() {
     const {
       variant: i,
-      position: n,
-      heading: a,
-      isDismissible: t,
+      position: o,
+      heading: n,
+      isDismissible: f,
       isCompact: c,
-      hideIcon: h,
-      leadingAction: g,
-      isOpen: k,
+      hideIcon: g,
+      leadingAction: h,
+      isOpen: C,
       aria: v
     } = this;
-    if (!k)
-      return l;
-    const x = t && !c, I = {
-      [d]: !0,
-      [`${d}--${i}`]: !0,
-      [`${d}--${n}`]: !0,
-      [`${d}--compact`]: c
-    }, N = {
-      [`${d}-content-section`]: !0,
-      [`${d}-content-section--dismissible`]: x
+    if (!C)
+      return s;
+    const O = f && !c, N = {
+      [l]: !0,
+      [`${l}--${i}`]: !0,
+      [`${l}--${o}`]: !0,
+      [`${l}--compact`]: c
+    }, I = {
+      [`${l}-content-section`]: !0,
+      [`${l}-content-section--dismissible`]: O
     };
     return p`
             <div
-                data-test-id="${o}"
-                class="${m(I)}"
+                data-test-id="${t}"
+                class="${m(N)}"
                 role="region"
                 aria-live="${i === "error" ? "assertive" : "polite"}"
-                aria-labelledby="${a ? `${o}-heading` : l}"
-                aria-label="${!a && C(v == null ? void 0 : v.label)}">
-                ${x ? this.renderCloseButton() : l}
+                aria-labelledby="${n ? `${t}-heading` : s}"
+                aria-label="${!n && x(v == null ? void 0 : v.label)}">
+                ${O ? this.renderCloseButton() : s}
 
-                <section class="${m(N)}">
-                    ${h ? l : this.renderIcon()}
+                <section class="${m(I)}">
+                    ${g ? s : this.renderIcon()}
                     <article>
-                        ${a ? this.renderNotificationHeading() : l}
+                        ${n ? this.renderNotificationHeading() : s}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${g != null && g.text ? this.renderFooter() : l}
+                ${h != null && h.text ? this.renderFooter() : s}
             </div>`;
   }
 };
-y.styles = A(G);
-let e = y;
-s([
+e.styles = k(P);
+a([
   r({ type: Boolean })
-], e.prototype, "isOpen");
-s([
+], e.prototype, "isOpen", 2);
+a([
   r({ type: String }),
-  b(o, B, f.variant)
-], e.prototype, "variant");
-s([
+  y(t, S, d.variant)
+], e.prototype, "variant", 2);
+a([
   r({ type: String }),
-  b(o, V, f.position)
-], e.prototype, "position");
-s([
+  y(t, T, d.position)
+], e.prototype, "position", 2);
+a([
   r({ type: Boolean })
-], e.prototype, "isDismissible");
-s([
+], e.prototype, "isDismissible", 2);
+a([
   r({ type: Boolean })
-], e.prototype, "isCompact");
-s([
+], e.prototype, "isCompact", 2);
+a([
   r({ type: String })
-], e.prototype, "heading");
-s([
+], e.prototype, "heading", 2);
+a([
   r({ type: String }),
-  b(o, L, f.headingLevel)
-], e.prototype, "headingLevel");
-s([
+  y(t, E, d.headingLevel)
+], e.prototype, "headingLevel", 2);
+a([
   r({ type: Boolean })
-], e.prototype, "hideIcon");
-s([
+], e.prototype, "hideIcon", 2);
+a([
   r({ type: Object })
-], e.prototype, "leadingAction");
-s([
+], e.prototype, "leadingAction", 2);
+a([
   r({ type: Object })
-], e.prototype, "supportingAction");
-s([
+], e.prototype, "supportingAction", 2);
+a([
   r({ type: Boolean })
-], e.prototype, "hasStackedActions");
-s([
+], e.prototype, "hasStackedActions", 2);
+a([
   r({ type: Object })
-], e.prototype, "aria");
-s([
-  w({ slot: "icon" })
-], e.prototype, "_iconSlot");
-S(o, e);
+], e.prototype, "aria", 2);
+a([
+  z({ slot: "icon" })
+], e.prototype, "_iconSlot", 2);
+e = a([
+  _("pie-notification")
+], e);
 export {
-  D as ON_NOTIFICATION_CLOSE_EVENT,
-  F as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
-  P as ON_NOTIFICATION_OPEN_EVENT,
-  j as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  B as ON_NOTIFICATION_CLOSE_EVENT,
+  D as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  L as ON_NOTIFICATION_OPEN_EVENT,
+  V as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   e as PieNotification,
-  d as componentClass,
-  o as componentSelector,
-  f as defaultProps,
-  L as headingLevels,
-  V as positions,
-  B as variants
+  l as componentClass,
+  t as componentSelector,
+  d as defaultProps,
+  E as headingLevels,
+  T as positions,
+  S as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.13.4",
+  "version": "0.14.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -46,9 +46,9 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "1.4.4",
-    "@justeattakeaway/pie-icons-webc": "1.9.0",
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-icon-button": "1.5.1",
+    "@justeattakeaway/pie-icons-webc": "1.10.1",
+    "@justeattakeaway/pie-webc-core": "1.0.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -7,7 +7,7 @@ import {
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { classMap } from 'lit/directives/class-map.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
-import { defineCustomElement, validPropertyValues, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
+import { validPropertyValues, dispatchCustomEvent, safeCustomElement } from '@justeattakeaway/pie-webc-core';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import {
@@ -46,6 +46,7 @@ export * from './defs';
  * @slot - Default slot
  * @slot icon - The icon slot
  */
+@safeCustomElement('pie-notification')
 export class PieNotification extends PieElement implements NotificationProps {
     @property({ type: Boolean })
     public isOpen = defaultProps.isOpen;
@@ -305,8 +306,6 @@ export class PieNotification extends PieElement implements NotificationProps {
     }
 }
 
-defineCustomElement(componentSelector, PieNotification);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieNotification;