@nova-design-system/nova-webcomponents 3.14.0 → 3.16.0

package/dist/collection/components/nv-notification/nv-notification.js

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { v4 as uuidv4 } from "uuid";
-import { FeedbackColors } from "../../utils/constants";
+import { FeedbackColors, NotificationPosition, } from "../../utils/constants";
 import { useCollapse, useFade, useSlide, parallel } from "../../animations";
 /**
  * @slot heading - Use this slot to insert HTML as the notification title.
@@ -35,6 +35,11 @@ export class NvNotification {
          * Controls the visibility of the notification.
          */
         this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the notification will be hidden initially, but internal changes
+         * will not be in a controlled state. Good for animating the notification in.
+         */
+        this.initiallyHidden = false;
         //#endregion EVENTS
         /****************************************************************************/
         //#region INTERNAL
@@ -56,9 +61,22 @@ export class NvNotification {
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region METHODS
+    /**
+     * Dismisses the notification with an animation, after the animation is
+     * complete, the hiddenChanged event will be emitted with the value of true,
+     * and the hidden prop will be set to true.
+     */
     async dismiss() {
         await this.dismissAnimation();
     }
+    /**
+     * Sets the hidden prop to false, and shows the notification with an
+     * animation, after the animation is complete, the hiddenChanged event will be
+     * emitted with the value of false.
+     */
+    async show() {
+        await this.showAnimation();
+    }
     getDefaultIcon() {
         var _a;
         return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
@@ -76,14 +94,55 @@ export class NvNotification {
     getMessageId() {
         return this.message ? `nv-notification-${this.uid}-message` : null;
     }
+    async showAnimation() {
+        this.hidden = false;
+        const { setFadeIn } = useFade(this.container);
+        const { expand } = useCollapse(this.el, {
+            duration: 300,
+            overflow: 'visible',
+        });
+        const { slideY, setSlideY } = useSlide(this.container, {
+            duration: 300,
+        });
+        setSlideY(-100);
+        setFadeIn();
+        await parallel(slideY({ from: -100, to: 0 }), expand).start();
+        this.hiddenChanged.emit(false);
+    }
+    getSlideDestination(pos) {
+        switch (pos) {
+            case NotificationPosition.TopRight:
+            case NotificationPosition.BottomRight:
+                return { axis: 'x', to: 100 }; // right
+            case NotificationPosition.TopLeft:
+            case NotificationPosition.BottomLeft:
+                return { axis: 'x', to: -100 }; // left
+            case NotificationPosition.TopCenter:
+                return { axis: 'y', to: -100 }; // up
+            case NotificationPosition.BottomCenter:
+                return { axis: 'y', to: 100 }; // down
+            default:
+                return { axis: 'x', to: 100 }; // fallback
+        }
+    }
     async dismissAnimation() {
+        var _a;
+        const position = (_a = this.el
+            .closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
+        const destination = this.getSlideDestination(position);
         const { fadeOut } = useFade(this.container, { duration: 300 });
-        const { slideOut } = useSlide(this.container, { duration: 800 });
+        const { slideX, slideY, setSlideReset } = useSlide(this.container, {
+            duration: 500,
+        });
         const { collapse } = useCollapse(this.el, {
-            duration: 800,
+            duration: 500,
             overflow: 'visible',
         });
-        await parallel(fadeOut, slideOut, collapse).start();
+        const slide = destination.axis === 'x'
+            ? slideX({ from: 0, to: destination.to })
+            : slideY({ from: 0, to: destination.to });
+        setSlideReset();
+        await parallel(fadeOut, slide, collapse).start();
         this.hidden = true;
         this.hiddenChanged.emit(true);
     }
@@ -94,13 +153,15 @@ export class NvNotification {
         this.headingSlot = this.el.querySelector('[slot="heading"]');
         this.messageSlot = this.el.querySelector('[slot="content"]');
         this.actionsSlot = this.el.querySelector('[slot="actions"]');
+        if (this.initiallyHidden)
+            this.hidden = true;
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '9146cea4ed72801aadf2fb4b7e44895038c98437', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, h("div", { key: 'beed9ae5f6fac1b0c6d103dd75a41e0aede84041', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '8e17f33867c2563de719dc1b0f0e2d4ae39ad1a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'cb8850135bb2383e33a16671569547611b55e434', name: "x", size: "sm" }))), h("nv-icon", { key: 'f5f58e1c3a94d854841271eb12af047322b2f0b4', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md" }), h("div", { key: '9c6f6bb0315cd25260d483472a24832031ce45da', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '1013d6b6790f75682a1db0e43293b61e614f1c07', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '844a7bccf6f365d4e59dfdec9b3c9096cbeda798', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '6688e9dc927f6164ce60f27b84fdbeb257296504', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'f0c0790faa40411970575240a081f0f0bf0e9aff', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '0ba946edf5b3a8410da3b375e589613a2674fd15', "data-scope": "actions" }, h("slot", { key: '0360ab92db66957f0290569c39307ced2be5922d', name: "actions" })))))));
+        return (h(Host, { key: '6e0b8abd9cbcb62b0b133db77520aa5aaa4173c9', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, h("div", { key: '41b2ad35bf5220333e132d61f8843d1136cb1f40', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '63116f239f7108ae945845c247c712827d8ae8a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'dc19bf166c6d2eccd3d40384d43206457f0d03f0', name: "x", size: "sm" }))), h("nv-icon", { key: 'e673ac1cc78300bc3425018a0cdfc4b90c679796', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '95cb6ec06d89cda8e5170f9ff0f863b6b0b7e32d', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'ed654c0271d2ff8538295d8f7bf58a9754abb4c9', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '00cc14a709059b9caf2117174ef7fcc310f5965f', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: 'c7c0bcbc2b54fdfdf8280af6a377929bf17fd688', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '946db5aeb667b67f52f51adbb1b8f600325f937e', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: 'd94560b658507a515a1360057121e933b95e6fe6', "data-scope": "actions" }, h("slot", { key: 'db185d3924c7d1fbeb30578992f2375e92a0d4bc', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {
@@ -283,6 +344,26 @@ export class NvNotification {
                 "attribute": "hidden",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "initiallyHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the notification will be hidden initially, but internal changes\nwill not be in a controlled state. Good for animating the notification in."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "initially-hidden",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -322,7 +403,24 @@ export class NvNotification {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "*************************************************************************",
+                    "text": "Dismisses the notification with an animation, after the animation is\ncomplete, the hiddenChanged event will be emitted with the value of true,\nand the hidden prop will be set to true.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the hidden prop to false, and shows the notification with an\nanimation, after the animation is complete, the hiddenChanged event will be\nemitted with the value of false.",
                     "tags": []
                 }
             }

package/dist/collection/components/nv-notification/nv-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-notification.js","sourceRoot":"","sources":["../../../src/components/nv-notification/nv-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { FeedbackColors, NotificationEmphasis } from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' | 'alert';\ntype AriaLive = 'polite' | 'assertive';\n\n/**\n * @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n */\n@Component({\n  tag: 'nv-notification',\n  styleUrl: 'styles/nv-notification.scss',\n  shadow: false,\n})\nexport class NvNotification {\n  @Element() el: HTMLNvNotificationElement;\n  private container: HTMLElement;\n  private headingSlot: HTMLElement;\n  private messageSlot: HTMLElement;\n  private actionsSlot: HTMLElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Set a unique ID for the notification. Used for aria attributes and managing\n   * multiple notifications.\n   */\n  @Prop({ reflect: true })\n  readonly uid: string = uuidv4();\n\n  /**\n   * Specifies the notification type which determines the color and default icon.\n   */\n  @Prop({ reflect: true })\n  readonly feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Adjusts the emphasis to make the notification more or less visually\n   * prominent to users. Use this to draw attention to important actions or\n   * reduce focus on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n  /**\n   * Short and concise text for the notification title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Main content for the notification. For more complex content, use the\n   * content slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Icon associated with the notification, defaults vary based on the feedback\n   * type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the notification to be dismissed via a close button (x). The\n   * notification is not dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the notification.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  @Method()\n  async dismiss() {\n    await this.dismissAnimation();\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region INTERNAL\n\n  private iconByFeedback: Record<FeedbackColors, IconName> = {\n    [FeedbackColors.Warning]: 'alert-circle',\n    [FeedbackColors.Information]: 'info-circle',\n    [FeedbackColors.Success]: 'circle-check',\n    [FeedbackColors.Error]: 'alert-triangle',\n    [FeedbackColors.Neutral]: 'help',\n  };\n\n  private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n    [FeedbackColors.Error]: 'alert',\n    [FeedbackColors.Warning]: 'alert',\n    [FeedbackColors.Information]: 'status',\n    [FeedbackColors.Success]: 'status',\n    [FeedbackColors.Neutral]: 'status',\n  };\n\n  private getDefaultIcon(): IconName {\n    return this.iconByFeedback[this.feedback] ?? 'info-circle';\n  }\n\n  private getAriaRole(): AriaRole {\n    return this.roleByFeedback[this.feedback] ?? 'status';\n  }\n\n  private getAriaLive(): AriaLive {\n    return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n  }\n\n  private getHeadingId(): string | null {\n    return this.heading ? `nv-notification-${this.uid}-heading` : null;\n  }\n\n  private getMessageId(): string | null {\n    return this.message ? `nv-notification-${this.uid}-message` : null;\n  }\n\n  private async dismissAnimation() {\n    const { fadeOut } = useFade(this.container, { duration: 300 });\n    const { slideOut } = useSlide(this.container, { duration: 800 });\n    const { collapse } = useCollapse(this.el, {\n      duration: 800,\n      overflow: 'visible',\n    });\n\n    await parallel(fadeOut, slideOut, collapse).start();\n    this.hidden = true;\n    this.hiddenChanged.emit(true);\n  }\n\n  //#endregion INTERNAL\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n    this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n    this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role={this.getAriaRole()}\n        aria-live={this.getAriaLive()}\n        aria-atomic\n        aria-labelledby={this.getHeadingId() ?? null}\n        aria-describedby={this.getMessageId() ?? null}\n        tabindex=\"-1\"\n      >\n        <div data-scope=\"container\" ref={el => (this.container = el)}>\n          {this.dismissible && (\n            <button\n              data-scope=\"dismiss\"\n              type=\"button\"\n              onClick={this.dismiss.bind(this)}\n            >\n              <nv-icon name=\"x\" size=\"sm\" />\n            </button>\n          )}\n\n          <nv-icon\n            name={this.icon ?? this.getDefaultIcon()}\n            size=\"md\"\n          ></nv-icon>\n\n          <div data-scope=\"content\">\n            {(this.heading || this.headingSlot) && (\n              <p id={this.getHeadingId()} data-scope=\"heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </p>\n            )}\n            {(this.message || this.messageSlot) && (\n              <p id={this.getMessageId()} data-scope=\"message\">\n                <slot name=\"content\">{this.message}</slot>\n              </p>\n            )}\n\n            {this.actionsSlot && (\n              <div data-scope=\"actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-notification.js","sourceRoot":"","sources":["../../../src/components/nv-notification/nv-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,GAEN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EACL,cAAc,EAEd,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAK5E;;;;GAIG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAYE,8EAA8E;QAC9E,oBAAoB;QAEpB;;;WAGG;QAEM,QAAG,GAAW,MAAM,EAAE,CAAC;QAEhC;;WAEG;QAEM,aAAQ,GAAwB,aAAa,CAAC;QAEvD;;;;WAIG;QAEM,aAAQ,GAA8B,QAAQ,CAAC;QAsBxD;;;WAGG;QAEM,gBAAW,GAAY,KAAK,CAAC;QAEtC;;WAEG;QAEH,WAAM,GAAY,KAAK,CAAC,CAAC,+DAA+D;QAExF;;;WAGG;QAEM,oBAAe,GAAY,KAAK,CAAC;QAsC1C,mBAAmB;QACnB,8EAA8E;QAC9E,kBAAkB;QAEV,mBAAc,GAAqC;YACzD,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,cAAc;YACxC,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,aAAa;YAC3C,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,cAAc;YACxC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,gBAAgB;YACxC,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM;SACjC,CAAC;QAEM,mBAAc,GAAqC;YACzD,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO;YAC/B,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO;YACjC,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,QAAQ;YACtC,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,QAAQ;YAClC,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,QAAQ;SACnC,CAAC;KA4JH;IAlNC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAEjB;;;;OAIG;IAEH,KAAK,CAAC,OAAO;QACX,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAChC,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAkCO,cAAc;;QACpB,OAAO,MAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,mCAAI,aAAa,CAAC;IAC7D,CAAC;IAEO,WAAW;;QACjB,OAAO,MAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,mCAAI,QAAQ,CAAC;IACxD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;IACjE,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IACrE,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IACrE,CAAC;IAEO,KAAK,CAAC,aAAa;QACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE;YACtC,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,SAAS;SACpB,CAAC,CAAC;QACH,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE;YACrD,QAAQ,EAAE,GAAG;SACd,CAAC,CAAC;QAEH,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC;QAChB,SAAS,EAAE,CAAC;QACZ,MAAM,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QAE9D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAEO,mBAAmB,CAAC,GAA0B;QAMpD,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,oBAAoB,CAAC,QAAQ,CAAC;YACnC,KAAK,oBAAoB,CAAC,WAAW;gBACnC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ;YACzC,KAAK,oBAAoB,CAAC,OAAO,CAAC;YAClC,KAAK,oBAAoB,CAAC,UAAU;gBAClC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO;YACzC,KAAK,oBAAoB,CAAC,SAAS;gBACjC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK;YACvC,KAAK,oBAAoB,CAAC,YAAY;gBACpC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO;YACxC;gBACE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,WAAW;QAC9C,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,gBAAgB;;QAC5B,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,EAAE;aACrB,OAAO,CAAC,0BAA0B,CAAC,0CAClC,YAAY,CAAC,UAAU,CAAqC,CAAC;QAEjE,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAEvD,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAC/D,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE;YACjE,QAAQ,EAAE,GAAG;SACd,CAAC,CAAC;QACH,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE;YACxC,QAAQ,EAAE,GAAG;YACb,QAAQ,EAAE,SAAS;SACpB,CAAC,CAAC;QACH,MAAM,KAAK,GACT,WAAW,CAAC,IAAI,KAAK,GAAG;YACtB,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;YACzC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC,CAAC;QAE9C,aAAa,EAAE,CAAC;QAChB,MAAM,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;QAEjD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IAEnB,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAE7D,IAAI,IAAI,CAAC,eAAe;YAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IAC/C,CAAC;IAED,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,eACb,IAAI,CAAC,WAAW,EAAE,0CAEZ,MAAA,IAAI,CAAC,YAAY,EAAE,mCAAI,IAAI,sBAC1B,MAAA,IAAI,CAAC,YAAY,EAAE,mCAAI,IAAI,EAC7C,QAAQ,EAAC,IAAI;YAEb,0EAAgB,WAAW,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBACzD,IAAI,CAAC,WAAW,IAAI,CACnB,6EACa,SAAS,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;oBAEhC,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV;gBAED,gEACE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,cAAc,EAAE,EACxC,IAAI,EAAC,IAAI,gBACE,MAAM,GACR;gBAEX,0EAAgB,SAAS;oBACtB,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACrC,0DAAG,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAa,SAAS;wBAC9C,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxC,CACL;oBACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CACrC,0DAAG,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAa,SAAS;wBAC9C,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxC,CACL;oBAEA,IAAI,CAAC,WAAW,IAAI,CACnB,0EAAgB,SAAS;wBACvB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n  FeedbackColors,\n  NotificationEmphasis,\n  NotificationPosition,\n} from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' | 'alert';\ntype AriaLive = 'polite' | 'assertive';\n\n/**\n * @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n */\n@Component({\n  tag: 'nv-notification',\n  styleUrl: 'styles/nv-notification.scss',\n  shadow: false,\n})\nexport class NvNotification {\n  @Element() el: HTMLNvNotificationElement;\n  private container: HTMLElement;\n  private headingSlot: HTMLElement;\n  private messageSlot: HTMLElement;\n  private actionsSlot: HTMLElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Set a unique ID for the notification. Used for aria attributes and managing\n   * multiple notifications.\n   */\n  @Prop({ reflect: true })\n  readonly uid: string = uuidv4();\n\n  /**\n   * Specifies the notification type which determines the color and default icon.\n   */\n  @Prop({ reflect: true })\n  readonly feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Adjusts the emphasis to make the notification more or less visually\n   * prominent to users. Use this to draw attention to important actions or\n   * reduce focus on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n  /**\n   * Short and concise text for the notification title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Main content for the notification. For more complex content, use the\n   * content slot instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Icon associated with the notification, defaults vary based on the feedback\n   * type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the notification to be dismissed via a close button (x). The\n   * notification is not dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the notification.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the notification will be hidden initially, but internal changes\n   * will not be in a controlled state. Good for animating the notification in.\n   */\n  @Prop({ reflect: true })\n  readonly initiallyHidden: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Dismisses the notification with an animation, after the animation is\n   * complete, the hiddenChanged event will be emitted with the value of true,\n   * and the hidden prop will be set to true.\n   */\n  @Method()\n  async dismiss() {\n    await this.dismissAnimation();\n  }\n\n  /**\n   * Sets the hidden prop to false, and shows the notification with an\n   * animation, after the animation is complete, the hiddenChanged event will be\n   * emitted with the value of false.\n   */\n  @Method()\n  async show() {\n    await this.showAnimation();\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region INTERNAL\n\n  private iconByFeedback: Record<FeedbackColors, IconName> = {\n    [FeedbackColors.Warning]: 'alert-circle',\n    [FeedbackColors.Information]: 'info-circle',\n    [FeedbackColors.Success]: 'circle-check',\n    [FeedbackColors.Error]: 'alert-triangle',\n    [FeedbackColors.Neutral]: 'help',\n  };\n\n  private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n    [FeedbackColors.Error]: 'alert',\n    [FeedbackColors.Warning]: 'alert',\n    [FeedbackColors.Information]: 'status',\n    [FeedbackColors.Success]: 'status',\n    [FeedbackColors.Neutral]: 'status',\n  };\n\n  private getDefaultIcon(): IconName {\n    return this.iconByFeedback[this.feedback] ?? 'info-circle';\n  }\n\n  private getAriaRole(): AriaRole {\n    return this.roleByFeedback[this.feedback] ?? 'status';\n  }\n\n  private getAriaLive(): AriaLive {\n    return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n  }\n\n  private getHeadingId(): string | null {\n    return this.heading ? `nv-notification-${this.uid}-heading` : null;\n  }\n\n  private getMessageId(): string | null {\n    return this.message ? `nv-notification-${this.uid}-message` : null;\n  }\n\n  private async showAnimation() {\n    this.hidden = false;\n\n    const { setFadeIn } = useFade(this.container);\n    const { expand } = useCollapse(this.el, {\n      duration: 300,\n      overflow: 'visible',\n    });\n    const { slideY, setSlideY } = useSlide(this.container, {\n      duration: 300,\n    });\n\n    setSlideY(-100);\n    setFadeIn();\n    await parallel(slideY({ from: -100, to: 0 }), expand).start();\n\n    this.hiddenChanged.emit(false);\n  }\n\n  private getSlideDestination(pos?: NotificationPosition): {\n    /** The axis to slide. */\n    axis: 'x' | 'y';\n    /** The destination value. */\n    to: number;\n  } {\n    switch (pos) {\n      case NotificationPosition.TopRight:\n      case NotificationPosition.BottomRight:\n        return { axis: 'x', to: 100 }; // right\n      case NotificationPosition.TopLeft:\n      case NotificationPosition.BottomLeft:\n        return { axis: 'x', to: -100 }; // left\n      case NotificationPosition.TopCenter:\n        return { axis: 'y', to: -100 }; // up\n      case NotificationPosition.BottomCenter:\n        return { axis: 'y', to: 100 }; // down\n      default:\n        return { axis: 'x', to: 100 }; // fallback\n    }\n  }\n\n  private async dismissAnimation() {\n    const position = this.el\n      .closest('nv-notificationcontainer')\n      ?.getAttribute('position') as NotificationPosition | undefined;\n\n    const destination = this.getSlideDestination(position);\n\n    const { fadeOut } = useFade(this.container, { duration: 300 });\n    const { slideX, slideY, setSlideReset } = useSlide(this.container, {\n      duration: 500,\n    });\n    const { collapse } = useCollapse(this.el, {\n      duration: 500,\n      overflow: 'visible',\n    });\n    const slide =\n      destination.axis === 'x'\n        ? slideX({ from: 0, to: destination.to })\n        : slideY({ from: 0, to: destination.to });\n\n    setSlideReset();\n    await parallel(fadeOut, slide, collapse).start();\n\n    this.hidden = true;\n    this.hiddenChanged.emit(true);\n  }\n\n  //#endregion INTERNAL\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n    this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n    this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n\n    if (this.initiallyHidden) this.hidden = true;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role={this.getAriaRole()}\n        aria-live={this.getAriaLive()}\n        aria-atomic\n        aria-labelledby={this.getHeadingId() ?? null}\n        aria-describedby={this.getMessageId() ?? null}\n        tabindex=\"-1\"\n      >\n        <div data-scope=\"container\" ref={el => (this.container = el)}>\n          {this.dismissible && (\n            <button\n              data-scope=\"dismiss\"\n              type=\"button\"\n              onClick={this.dismiss.bind(this)}\n            >\n              <nv-icon name=\"x\" size=\"sm\" />\n            </button>\n          )}\n\n          <nv-icon\n            name={this.icon ?? this.getDefaultIcon()}\n            size=\"md\"\n            data-scope=\"icon\"\n          ></nv-icon>\n\n          <div data-scope=\"content\">\n            {(this.heading || this.headingSlot) && (\n              <p id={this.getHeadingId()} data-scope=\"heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </p>\n            )}\n            {(this.message || this.messageSlot) && (\n              <p id={this.getMessageId()} data-scope=\"message\">\n                <slot name=\"content\">{this.message}</slot>\n              </p>\n            )}\n\n            {this.actionsSlot && (\n              <div data-scope=\"actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-notification/styles/nv-notification.css

@@ -17,7 +17,7 @@ nv-notification [data-scope=container] {
   /* shadow/lg */
   box-shadow: 0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1));
 }
-nv-notification [data-scope=container] > nv-icon {
+nv-notification [data-scope=container] [data-scope=icon] {
   flex-shrink: 0;
 }
 nv-notification [data-scope=container] [data-scope=dismiss] {
@@ -49,7 +49,7 @@ nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]
   color: var(--components-notification-content-title);
   font-size: var(--notification-title-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: 20px; /* 142.857% */
 }
 nv-notification [data-scope=container] [data-scope=content] [data-scope=message] {
@@ -62,7 +62,7 @@ nv-notification [data-scope=container] [data-scope=content] [data-scope=message]
   font-variant-numeric: lining-nums tabular-nums slashed-zero;
   font-size: var(--font-size-sm, 14px);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--line-height-sm, 20px);
 }
 nv-notification [data-scope=container] [data-scope=content] [data-scope=actions] {
@@ -78,7 +78,7 @@ nv-notification[feedback=information] [data-scope=container] {
   background-color: var(--components-notification-information-background);
   border-color: var(--components-notification-information-border);
 }
-nv-notification[feedback=information] [data-scope=container] > nv-icon {
+nv-notification[feedback=information] [data-scope=container] [data-scope=icon] {
   color: var(--components-notification-information-icon);
 }
 nv-notification[feedback=information] > [data-scope=close]:focus, nv-notification[feedback=information] > [data-scope=close]:focus-within {
@@ -92,7 +92,7 @@ nv-notification[feedback=warning] [data-scope=container] {
   background-color: var(--components-notification-warning-background);
   border-color: var(--components-notification-warning-border);
 }
-nv-notification[feedback=warning] [data-scope=container] > nv-icon {
+nv-notification[feedback=warning] [data-scope=container] [data-scope=icon] {
   color: var(--components-notification-warning-icon);
 }
 nv-notification[feedback=warning] > [data-scope=close]:focus, nv-notification[feedback=warning] > [data-scope=close]:focus-within {
@@ -106,7 +106,7 @@ nv-notification[feedback=error] [data-scope=container] {
   background-color: var(--components-notification-error-background);
   border-color: var(--components-notification-error-border);
 }
-nv-notification[feedback=error] [data-scope=container] > nv-icon {
+nv-notification[feedback=error] [data-scope=container] [data-scope=icon] {
   color: var(--components-notification-error-icon);
 }
 nv-notification[feedback=error] > [data-scope=close]:focus, nv-notification[feedback=error] > [data-scope=close]:focus-within {
@@ -120,7 +120,7 @@ nv-notification[feedback=success] [data-scope=container] {
   background-color: var(--components-notification-success-background);
   border-color: var(--components-notification-success-border);
 }
-nv-notification[feedback=success] [data-scope=container] > nv-icon {
+nv-notification[feedback=success] [data-scope=container] [data-scope=icon] {
   color: var(--components-notification-success-icon);
 }
 nv-notification[feedback=success] > [data-scope=close]:focus, nv-notification[feedback=success] > [data-scope=close]:focus-within {
@@ -134,7 +134,7 @@ nv-notification[feedback=neutral] [data-scope=container] {
   background-color: var(--components-notification-neutral-background);
   border-color: var(--components-notification-neutral-border);
 }
-nv-notification[feedback=neutral] [data-scope=container] > nv-icon {
+nv-notification[feedback=neutral] [data-scope=container] [data-scope=icon] {
   color: var(--components-notification-neutral-icon);
 }
 nv-notification[feedback=neutral] > [data-scope=close]:focus, nv-notification[feedback=neutral] > [data-scope=close]:focus-within {

package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.css

@@ -0,0 +1,61 @@
+nv-notificationcontainer {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-2);
+  padding-top: 0;
+  z-index: 9999;
+  pointer-events: none;
+  width: 100%;
+  max-width: 512px;
+}
+nv-notificationcontainer.position-top-right {
+  top: 0;
+  right: 0;
+}
+nv-notificationcontainer.position-top-right nv-notification {
+  margin-top: var(--spacing-2);
+}
+nv-notificationcontainer.position-top-left {
+  top: 0;
+  left: 0;
+}
+nv-notificationcontainer.position-top-left nv-notification {
+  margin-bottom: var(--spacing-2);
+}
+nv-notificationcontainer.position-top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+nv-notificationcontainer.position-top-center nv-notification {
+  margin-bottom: var(--spacing-2);
+}
+nv-notificationcontainer.position-bottom-right {
+  bottom: 0;
+  right: 0;
+  flex-direction: column-reverse;
+}
+nv-notificationcontainer.position-bottom-right nv-notification {
+  margin-top: var(--spacing-2);
+}
+nv-notificationcontainer.position-bottom-left {
+  bottom: 0;
+  left: 0;
+  flex-direction: column-reverse;
+}
+nv-notificationcontainer.position-bottom-left nv-notification {
+  margin-top: var(--spacing-2);
+}
+nv-notificationcontainer.position-bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+}
+nv-notificationcontainer.position-bottom-center nv-notification {
+  margin-top: var(--spacing-2);
+}
+nv-notificationcontainer > * {
+  pointer-events: auto;
+}

package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.docs.js

@@ -0,0 +1,7 @@
+const NvNotificationcontainerDocs = {
+    component: 'nv-notificationcontainer',
+    badge: 'beta',
+    skip: true,
+};
+export default NvNotificationcontainerDocs;
+//# sourceMappingURL=nv-notificationcontainer.docs.js.map

package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-notificationcontainer.docs.js","sourceRoot":"","sources":["../../../src/components/nv-notificationcontainer/nv-notificationcontainer.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,2BAA2B,GAC/B;IACE,SAAS,EAAE,0BAA0B;IACrC,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,IAAI;CACX,CAAC;AAEJ,eAAe,2BAA2B,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvNotificationcontainerDocs: NovaDocs<Components.NvNotificationcontainer> =\n  {\n    component: 'nv-notificationcontainer',\n    badge: 'beta',\n    skip: true,\n  };\n\nexport default NvNotificationcontainerDocs;\n"]}

package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.js

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @deprecated [EXPERIMENTAL]
+ * @experimental - Container for notifications TODO: add animations etc...
+ * @slot default - Child content of the component.
+ */
+export class NvNotificationContainer {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Position of the notification container on the screen.
+         */
+        this.position = 'top-right';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region EVENTS
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'db4005459b926bcfef55e76f61bff0b5635f2872', class: `position-${this.position}` }, h("slot", { key: '518909541ca3e9e82168436a43d5362c414c0ec3' })));
+    }
+    static get is() { return "nv-notificationcontainer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-notificationcontainer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-notificationcontainer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${NotificationPosition}`",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "NotificationPosition": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::NotificationPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the notification container on the screen."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'top-right'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=nv-notificationcontainer.js.map

package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-notificationcontainer.js","sourceRoot":"","sources":["../../../src/components/nv-notificationcontainer/nv-notificationcontainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;GAIG;AAMH,MAAM,OAAO,uBAAuB;IALpC;QAME,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEM,aAAQ,GAA8B,WAAW,CAAC;KAyB5D;IAvBC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IACjB,oBAAoB;IACpB,8EAA8E;IAC9E,kBAAkB;IAClB,qBAAqB;IACrB,8EAA8E;IAC9E,mBAAmB;IACnB,sBAAsB;IACtB,8EAA8E;IAC9E,gBAAgB;IAChB,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAChB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,EAAE;YACtC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { NotificationPosition } from '../../utils/constants';\n\n/**\n * @deprecated [EXPERIMENTAL]\n * @experimental - Container for notifications TODO: add animations etc...\n * @slot default - Child content of the component.\n */\n@Component({\n  tag: 'nv-notificationcontainer',\n  styleUrl: 'nv-notificationcontainer.scss',\n  shadow: false,\n})\nexport class NvNotificationContainer {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Position of the notification container on the screen.\n   */\n  @Prop({ reflect: true })\n  readonly position: `${NotificationPosition}` = 'top-right';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host class={`position-${this.position}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-popover/nv-popover.docs.js

@@ -4,19 +4,23 @@ const NvPopoverDocs = {
     component: 'nv-popover',
     subcomponents: ['nv-button'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a Click popover."))),
         },
+        // Open
         {
             name: nameof(x => x.open),
             args: { open: true },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a pre opened popover."))),
         },
+        // TriggerMode
         {
             name: nameof(x => x.triggerMode),
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "trigger-mode": "hover" }, h("nv-button", { slot: "trigger" }, "Hover Me"), h("p", { slot: "content" }, "This is a Hover popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a Click popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "controlled", open: true }, h("nv-button", { slot: "trigger" }, "Controlled"), h("p", { slot: "content" }, "This is a Controlled popover.")))),
         },
+        // Placement
         {
             name: nameof(x => x.placement),
             args: {
@@ -24,6 +28,7 @@ const NvPopoverDocs = {
             },
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Top"), h("p", { slot: "content" }, "This is a Top popover.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom" }, h("nv-button", { slot: "trigger" }, "Bottom"), h("p", { slot: "content" }, "This is a Bottom popover.")), h("nv-popover", { "data-storybook-args": true, placement: "left" }, h("nv-button", { slot: "trigger" }, "Left"), h("p", { slot: "content" }, "This is a Left popover.")), h("nv-popover", { "data-storybook-args": true, placement: "right" }, h("nv-button", { slot: "trigger" }, "Right"), h("p", { slot: "content" }, "This is a Right popover.")))),
         },
+        // GroupName
         {
             name: nameof(x => x.groupName),
             args: {
@@ -31,6 +36,7 @@ const NvPopoverDocs = {
             },
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Popover 1"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Popover 2"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Popover 3"), h("p", { slot: "content" }, "This is a popover.")))),
         },
+        // Offset
         {
             name: nameof(x => x.offset),
             args: {
@@ -39,6 +45,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Offset"), h("p", { slot: "content" }, "This is a popover with 30px offset."))),
         },
+        // HasArrow
         {
             name: nameof(x => x.hasArrow),
             args: {
@@ -46,6 +53,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Arrow"), h("p", { slot: "content" }, "This is a popover with an arrow."))),
         },
+        // DisableFlip
         {
             name: nameof(x => x.disableFlip),
             args: {
@@ -53,6 +61,7 @@ const NvPopoverDocs = {
             },
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "disable-flip": true, placement: "bottom", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip Off Placement Bottom"), h("p", { slot: "content" }, "This will always stay to the bottom.")), h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip On Placement Top"), h("p", { slot: "content" }, "This could flip to the bottom.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip On Placement Bottom"), h("p", { slot: "content" }, "This could flip to the top.")))),
         },
+        // ShiftPadding
         {
             name: nameof(x => x.shiftPadding),
             args: {
@@ -60,6 +69,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Shift Padding"), h("p", { slot: "content" }, "This is a popover with 40px padding."))),
         },
+        // EnterDelay
         {
             name: nameof(x => x.enterDelay),
             args: {
@@ -68,6 +78,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Hover me and wait 1s"), h("p", { slot: "content" }, "This is a popover with a 1s enter delay."))),
         },
+        // Strategy
         {
             name: nameof(x => x.strategy),
             template: (h("div", { "data-class": "flex gap-8 items-start" }, h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Absolute Strategy (Default)"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-popover", { "data-storybook-args": true, strategy: "absolute", placement: "right" }, h("nv-button", { slot: "trigger" }, "Absolute"), h("p", { slot: "content" }, "This popover uses absolute positioning and may be clipped by overflow containers.")))), h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Fixed Strategy"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-popover", { "data-storybook-args": true, strategy: "fixed", placement: "right" }, h("nv-button", { slot: "trigger" }, "Fixed"), h("p", { slot: "content" }, "This popover uses fixed positioning and breaks out of overflow containers.")))))),

package/dist/collection/components/nv-popover/nv-popover.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-popover.docs.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvPopoverDocs: NovaDocs<Components.NvPopover> = {\n  component: 'nv-popover',\n  subcomponents: ['nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a Click popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.open),\n      args: { open: true },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a pre opened popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.triggerMode),\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args trigger-mode=\"hover\">\n            <nv-button slot=\"trigger\">Hover Me</nv-button>\n            <p slot=\"content\">This is a Hover popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"click\">\n            <nv-button slot=\"trigger\">Click Me</nv-button>\n            <p slot=\"content\">This is a Click popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"controlled\" open>\n            <nv-button slot=\"trigger\">Controlled</nv-button>\n            <p slot=\"content\">This is a Controlled popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.placement),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Top</nv-button>\n            <p slot=\"content\">This is a Top popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\">\n            <nv-button slot=\"trigger\">Bottom</nv-button>\n            <p slot=\"content\">This is a Bottom popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"left\">\n            <nv-button slot=\"trigger\">Left</nv-button>\n            <p slot=\"content\">This is a Left popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"right\">\n            <nv-button slot=\"trigger\">Right</nv-button>\n            <p slot=\"content\">This is a Right popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.groupName),\n      args: {\n        groupName: 'popover-group-1',\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 1</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 2</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 3</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.offset),\n      args: {\n        offset: 30,\n        placement: 'right',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Offset</nv-button>\n          <p slot=\"content\">This is a popover with 30px offset.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.hasArrow),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Arrow</nv-button>\n          <p slot=\"content\">This is a popover with an arrow.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.disableFlip),\n      args: {\n        open: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover\n            data-storybook-args\n            disable-flip\n            placement=\"bottom\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Flip Off Placement Bottom</nv-button>\n            <p slot=\"content\">This will always stay to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Top</nv-button>\n            <p slot=\"content\">This could flip to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Bottom</nv-button>\n            <p slot=\"content\">This could flip to the top.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.shiftPadding),\n      args: {\n        shiftPadding: 40,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Shift Padding</nv-button>\n          <p slot=\"content\">This is a popover with 40px padding.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.enterDelay),\n      args: {\n        enterDelay: 1000,\n        triggerMode: 'hover',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Hover me and wait 1s</nv-button>\n          <p slot=\"content\">This is a popover with a 1s enter delay.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.strategy),\n      template: (\n        <div data-class=\"flex gap-8 items-start\">\n          <div data-class=\"relative\">\n            <h4 data-class=\"mb-2 text-sm font-medium\">\n              Absolute Strategy (Default)\n            </h4>\n            <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n              <p data-class=\"mb-2 text-xs\">\n                Scroll container with overflow hidden\n              </p>\n              <nv-popover\n                data-storybook-args\n                strategy=\"absolute\"\n                placement=\"right\"\n              >\n                <nv-button slot=\"trigger\">Absolute</nv-button>\n                <p slot=\"content\">\n                  This popover uses absolute positioning and may be clipped by\n                  overflow containers.\n                </p>\n              </nv-popover>\n            </div>\n          </div>\n          <div data-class=\"relative\">\n            <h4 data-class=\"mb-2 text-sm font-medium\">Fixed Strategy</h4>\n            <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n              <p data-class=\"mb-2 text-xs\">\n                Scroll container with overflow hidden\n              </p>\n              <nv-popover\n                data-storybook-args\n                strategy=\"fixed\"\n                placement=\"right\"\n              >\n                <nv-button slot=\"trigger\">Fixed</nv-button>\n                <p slot=\"content\">\n                  This popover uses fixed positioning and breaks out of overflow\n                  containers.\n                </p>\n              </nv-popover>\n            </div>\n          </div>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvPopoverDocs;\n"]}
+{"version":3,"file":"nv-popover.docs.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvPopoverDocs: NovaDocs<Components.NvPopover> = {\n  component: 'nv-popover',\n  subcomponents: ['nv-button'],\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a Click popover.</p>\n        </nv-popover>\n      ),\n    },\n    // Open\n    {\n      name: nameof<Components.NvPopover>(x => x.open),\n      args: { open: true },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a pre opened popover.</p>\n        </nv-popover>\n      ),\n    },\n    // TriggerMode\n    {\n      name: nameof<Components.NvPopover>(x => x.triggerMode),\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args trigger-mode=\"hover\">\n            <nv-button slot=\"trigger\">Hover Me</nv-button>\n            <p slot=\"content\">This is a Hover popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"click\">\n            <nv-button slot=\"trigger\">Click Me</nv-button>\n            <p slot=\"content\">This is a Click popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args trigger-mode=\"controlled\" open>\n            <nv-button slot=\"trigger\">Controlled</nv-button>\n            <p slot=\"content\">This is a Controlled popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    // Placement\n    {\n      name: nameof<Components.NvPopover>(x => x.placement),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Top</nv-button>\n            <p slot=\"content\">This is a Top popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\">\n            <nv-button slot=\"trigger\">Bottom</nv-button>\n            <p slot=\"content\">This is a Bottom popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"left\">\n            <nv-button slot=\"trigger\">Left</nv-button>\n            <p slot=\"content\">This is a Left popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"right\">\n            <nv-button slot=\"trigger\">Right</nv-button>\n            <p slot=\"content\">This is a Right popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    // GroupName\n    {\n      name: nameof<Components.NvPopover>(x => x.groupName),\n      args: {\n        groupName: 'popover-group-1',\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 1</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 2</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args>\n            <nv-button slot=\"trigger\">Popover 3</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    // Offset\n    {\n      name: nameof<Components.NvPopover>(x => x.offset),\n      args: {\n        offset: 30,\n        placement: 'right',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Offset</nv-button>\n          <p slot=\"content\">This is a popover with 30px offset.</p>\n        </nv-popover>\n      ),\n    },\n    // HasArrow\n    {\n      name: nameof<Components.NvPopover>(x => x.hasArrow),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Arrow</nv-button>\n          <p slot=\"content\">This is a popover with an arrow.</p>\n        </nv-popover>\n      ),\n    },\n    // DisableFlip\n    {\n      name: nameof<Components.NvPopover>(x => x.disableFlip),\n      args: {\n        open: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover\n            data-storybook-args\n            disable-flip\n            placement=\"bottom\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Flip Off Placement Bottom</nv-button>\n            <p slot=\"content\">This will always stay to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Top</nv-button>\n            <p slot=\"content\">This could flip to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Bottom</nv-button>\n            <p slot=\"content\">This could flip to the top.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    // ShiftPadding\n    {\n      name: nameof<Components.NvPopover>(x => x.shiftPadding),\n      args: {\n        shiftPadding: 40,\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Shift Padding</nv-button>\n          <p slot=\"content\">This is a popover with 40px padding.</p>\n        </nv-popover>\n      ),\n    },\n    // EnterDelay\n    {\n      name: nameof<Components.NvPopover>(x => x.enterDelay),\n      args: {\n        enterDelay: 1000,\n        triggerMode: 'hover',\n      },\n      template: (\n        <nv-popover data-storybook-args>\n          <nv-button slot=\"trigger\">Hover me and wait 1s</nv-button>\n          <p slot=\"content\">This is a popover with a 1s enter delay.</p>\n        </nv-popover>\n      ),\n    },\n    // Strategy\n    {\n      name: nameof<Components.NvPopover>(x => x.strategy),\n      template: (\n        <div data-class=\"flex gap-8 items-start\">\n          <div data-class=\"relative\">\n            <h4 data-class=\"mb-2 text-sm font-medium\">\n              Absolute Strategy (Default)\n            </h4>\n            <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n              <p data-class=\"mb-2 text-xs\">\n                Scroll container with overflow hidden\n              </p>\n              <nv-popover\n                data-storybook-args\n                strategy=\"absolute\"\n                placement=\"right\"\n              >\n                <nv-button slot=\"trigger\">Absolute</nv-button>\n                <p slot=\"content\">\n                  This popover uses absolute positioning and may be clipped by\n                  overflow containers.\n                </p>\n              </nv-popover>\n            </div>\n          </div>\n          <div data-class=\"relative\">\n            <h4 data-class=\"mb-2 text-sm font-medium\">Fixed Strategy</h4>\n            <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n              <p data-class=\"mb-2 text-xs\">\n                Scroll container with overflow hidden\n              </p>\n              <nv-popover\n                data-storybook-args\n                strategy=\"fixed\"\n                placement=\"right\"\n              >\n                <nv-button slot=\"trigger\">Fixed</nv-button>\n                <p slot=\"content\">\n                  This popover uses fixed positioning and breaks out of overflow\n                  containers.\n                </p>\n              </nv-popover>\n            </div>\n          </div>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvPopoverDocs;\n"]}