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

package/dist/cjs/nv-notification.cjs.entry.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c56424e5.js');
-const constants = require('./constants-52f6f8e9.js');
-const collapse_animation = require('./collapse.animation-47397763.js');
-const fade_animation = require('./fade.animation-cf6eba0d.js');
+const constants = require('./constants-f5633903.js');
+const collapse_animation = require('./collapse.animation-23b7d61b.js');
+const fade_animation = require('./fade.animation-9294e9ee.js');
 require('./style-value-types.es-eea2f16f.js');
-const slide_animation = require('./slide.animation-bedfc827.js');
+const slide_animation = require('./slide.animation-8bc27ed6.js');
 const timeline_animation = require('./timeline.animation-2878afb6.js');
 const v4 = require('./v4-7014b8b0.js');
 
-const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;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{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:500;line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}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{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
+const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;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] [data-scope=icon]{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:500;line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}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] [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{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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] [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{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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] [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{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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] [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{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}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] [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{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
 const NvNotificationStyle0 = nvNotificationCss;
 
 const NvNotification = class {
@@ -44,6 +44,11 @@ const NvNotification = class {
          * 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
@@ -65,9 +70,22 @@ const NvNotification = class {
     //#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';
@@ -85,14 +103,55 @@ const NvNotification = class {
     getMessageId() {
         return this.message ? `nv-notification-${this.uid}-message` : null;
     }
+    async showAnimation() {
+        this.hidden = false;
+        const { setFadeIn } = fade_animation.useFade(this.container);
+        const { expand } = collapse_animation.useCollapse(this.el, {
+            duration: 300,
+            overflow: 'visible',
+        });
+        const { slideY, setSlideY } = slide_animation.useSlide(this.container, {
+            duration: 300,
+        });
+        setSlideY(-100);
+        setFadeIn();
+        await timeline_animation.parallel(slideY({ from: -100, to: 0 }), expand).start();
+        this.hiddenChanged.emit(false);
+    }
+    getSlideDestination(pos) {
+        switch (pos) {
+            case constants.NotificationPosition.TopRight:
+            case constants.NotificationPosition.BottomRight:
+                return { axis: 'x', to: 100 }; // right
+            case constants.NotificationPosition.TopLeft:
+            case constants.NotificationPosition.BottomLeft:
+                return { axis: 'x', to: -100 }; // left
+            case constants.NotificationPosition.TopCenter:
+                return { axis: 'y', to: -100 }; // up
+            case constants.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 } = fade_animation.useFade(this.container, { duration: 300 });
-        const { slideOut } = slide_animation.useSlide(this.container, { duration: 800 });
+        const { slideX, slideY, setSlideReset } = slide_animation.useSlide(this.container, {
+            duration: 500,
+        });
         const { collapse } = collapse_animation.useCollapse(this.el, {
-            duration: 800,
+            duration: 500,
             overflow: 'visible',
         });
-        await timeline_animation.parallel(fadeOut, slideOut, collapse).start();
+        const slide = destination.axis === 'x'
+            ? slideX({ from: 0, to: destination.to })
+            : slideY({ from: 0, to: destination.to });
+        setSlideReset();
+        await timeline_animation.parallel(fadeOut, slide, collapse).start();
         this.hidden = true;
         this.hiddenChanged.emit(true);
     }
@@ -103,13 +162,15 @@ const NvNotification = class {
         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 (index.h(index.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" }, index.h("div", { key: 'beed9ae5f6fac1b0c6d103dd75a41e0aede84041', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '8e17f33867c2563de719dc1b0f0e2d4ae39ad1a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'cb8850135bb2383e33a16671569547611b55e434', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'f5f58e1c3a94d854841271eb12af047322b2f0b4', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md" }), index.h("div", { key: '9c6f6bb0315cd25260d483472a24832031ce45da', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '1013d6b6790f75682a1db0e43293b61e614f1c07', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '844a7bccf6f365d4e59dfdec9b3c9096cbeda798', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '6688e9dc927f6164ce60f27b84fdbeb257296504', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: 'f0c0790faa40411970575240a081f0f0bf0e9aff', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '0ba946edf5b3a8410da3b375e589613a2674fd15', "data-scope": "actions" }, index.h("slot", { key: '0360ab92db66957f0290569c39307ced2be5922d', name: "actions" })))))));
+        return (index.h(index.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" }, index.h("div", { key: '41b2ad35bf5220333e132d61f8843d1136cb1f40', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '63116f239f7108ae945845c247c712827d8ae8a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'dc19bf166c6d2eccd3d40384d43206457f0d03f0', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'e673ac1cc78300bc3425018a0cdfc4b90c679796', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '95cb6ec06d89cda8e5170f9ff0f863b6b0b7e32d', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'ed654c0271d2ff8538295d8f7bf58a9754abb4c9', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '00cc14a709059b9caf2117174ef7fcc310f5965f', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: 'c7c0bcbc2b54fdfdf8280af6a377929bf17fd688', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '946db5aeb667b67f52f51adbb1b8f600325f937e', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: 'd94560b658507a515a1360057121e933b95e6fe6', "data-scope": "actions" }, index.h("slot", { key: 'db185d3924c7d1fbeb30578992f2375e92a0d4bc', name: "actions" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-notification.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nv-notification.entry.cjs.js","mappings":"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","names":["uuidv4","FeedbackColors","useFade","useSlide","useCollapse","parallel","h","Host"],"sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as *;\n@import \"../../../styles/focus-ring\";\n\nnv-notification {\n  @include root-styles();\n\n  [data-scope=\"container\"] {\n    @include container-styles();\n    & > nv-icon {\n      @include icon-styles();\n    }\n\n    [data-scope=\"dismiss\"] {\n      @include dismiss-btn-styles();\n    }\n\n    [data-scope=\"content\"] {\n      @include content-styles();\n\n      [data-scope=\"heading\"] {\n        @include header-styles();\n      }\n\n      [data-scope=\"message\"] {\n        @include message-styles();\n      }\n\n      [data-scope=\"actions\"] {\n        @include actions-styles();\n      }\n    }\n  }\n\n  @each $feedback in $feedback-variants {\n    &[feedback=\"#{$feedback}\"] {\n      [data-scope=\"container\"] {\n        @include feedback-color($feedback);\n        & > nv-icon {\n          @include icon-color($feedback);\n        }\n      }\n\n      & > [data-scope=\"close\"] {\n        @include focus-ring(map.get($border-color-map, $feedback));\n      }\n    }\n  }\n\n  @each $emphasis in $emphasis-variants {\n    &[emphasis=\"#{$emphasis}\"] {\n      [data-scope=\"container\"] {\n        @include emphasis-styles($emphasis);\n      }\n    }\n  }\n}","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.entry.cjs.js","mappings":"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","names":["uuidv4","FeedbackColors","useFade","useCollapse","useSlide","parallel","NotificationPosition","h","Host"],"sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as *;\n@import \"../../../styles/focus-ring\";\n\nnv-notification {\n  @include root-styles();\n\n  [data-scope=\"container\"] {\n    @include container-styles();\n\n    [data-scope=\"icon\"] {\n      @include icon-styles();\n    }\n\n    [data-scope=\"dismiss\"] {\n      @include dismiss-btn-styles();\n    }\n\n    [data-scope=\"content\"] {\n      @include content-styles();\n\n      [data-scope=\"heading\"] {\n        @include header-styles();\n      }\n\n      [data-scope=\"message\"] {\n        @include message-styles();\n      }\n\n      [data-scope=\"actions\"] {\n        @include actions-styles();\n      }\n    }\n  }\n\n  @each $feedback in $feedback-variants {\n    &[feedback=\"#{$feedback}\"] {\n      [data-scope=\"container\"] {\n        @include feedback-color($feedback);\n\n        [data-scope=\"icon\"] {\n          @include icon-color($feedback);\n        }\n      }\n\n      & > [data-scope=\"close\"] {\n        @include focus-ring(map.get($border-color-map, $feedback));\n      }\n    }\n  }\n\n  @each $emphasis in $emphasis-variants {\n    &[emphasis=\"#{$emphasis}\"] {\n      [data-scope=\"container\"] {\n        @include emphasis-styles($emphasis);\n      }\n    }\n  }\n}","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"],"version":3}

package/dist/cjs/nv-notificationcontainer.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c56424e5.js');
+
+const nvNotificationcontainerCss = "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}";
+const NvNotificationcontainerStyle0 = nvNotificationcontainerCss;
+
+const NvNotificationContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#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 (index.h(index.Host, { key: 'db4005459b926bcfef55e76f61bff0b5635f2872', class: `position-${this.position}` }, index.h("slot", { key: '518909541ca3e9e82168436a43d5362c414c0ec3' })));
+    }
+};
+NvNotificationContainer.style = NvNotificationcontainerStyle0;
+
+exports.nv_notificationcontainer = NvNotificationContainer;
+
+//# sourceMappingURL=nv-notificationcontainer.cjs.entry.js.map

package/dist/cjs/nv-notificationcontainer.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-notificationcontainer.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,4vCAA4vC,CAAC;AAChyC,sCAAe,0BAA0B;;MCY5B,uBAAuB;IALpC;;;;;;;QAaW,aAAQ,GAA8B,WAAW,CAAC;KAyB5D;;;;;;;;;;;;;;;;IARC,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,EAAE,IACtCD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-notificationcontainer/nv-notificationcontainer.scss?tag=nv-notificationcontainer","src/components/nv-notificationcontainer/nv-notificationcontainer.tsx"],"sourcesContent":["@mixin base-styles() {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  padding: var(--spacing-2);\n  padding-top: 0;\n  z-index: 9999;\n  pointer-events: none;\n  width: 100%;\n  max-width: 512px;\n}\n\nnv-notificationcontainer {\n  @include base-styles();\n\n  // Default position\n  &.position-top-right {\n    top: 0;\n    right: 0;\n    nv-notification {\n      margin-top: var(--spacing-2);\n    }\n  }\n\n  &.position-top-left {\n    top: 0;\n    left: 0;\n    nv-notification {\n      margin-bottom: var(--spacing-2);\n    }\n  }\n\n  &.position-top-center {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    nv-notification {\n      margin-bottom: var(--spacing-2);\n    }\n  }\n\n  &.position-bottom-right {\n    bottom: 0;\n    right: 0;\n    flex-direction: column-reverse;\n    nv-notification {\n      margin-top: var(--spacing-2);\n    }\n  }\n\n  &.position-bottom-left {\n    bottom: 0;\n    left: 0;\n    flex-direction: column-reverse;\n    nv-notification {\n      margin-top: var(--spacing-2);\n    }\n  }\n\n  &.position-bottom-center {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    flex-direction: column-reverse;\n    nv-notification {\n      margin-top: var(--spacing-2);\n    }\n  }\n\n  // Allow pointer events on child elements\n  > * {\n    pointer-events: auto;\n  }\n}\n","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"],"version":3}

package/dist/cjs/nv-popover.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c56424e5.js');
-const fade_animation = require('./fade.animation-cf6eba0d.js');
-const grow_animation = require('./grow.animation-9258ba63.js');
+const fade_animation = require('./fade.animation-9294e9ee.js');
+const grow_animation = require('./grow.animation-f1cef0ad.js');
 require('./style-value-types.es-eea2f16f.js');
 const events_utils = require('./events.utils-52846a7d.js');
 
@@ -2384,7 +2384,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'dc7ef1862f1a1da4b32e02bee827f81545df73d1' }, index.h("slot", { key: '7535c2ba2b1f600c237602c68a04c85fd9d6d98b', name: "trigger" }), index.h("div", { key: '8e7907e2fda20d35b00642eca0507aa20e56f7cb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '4e081e84e9597b69351253d1c1b89c115cdcfd9a', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '5bcd80588e9746db974cee69c5963b698665d105', name: "content" }))));
+        return (index.h(index.Host, { key: '1af6f61d4b3d87e30d2311708fcd61979170aa96' }, index.h("slot", { key: '113813292e083fa4b188f3e5750549a08fc8c3aa', name: "trigger" }), index.h("div", { key: '7687d6ae12b24ed575843f0d171d911eb0994675', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '162f1f50be23da7fadac8f76507e6d8d058fb58b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '57ecf69ef395a045cb35e7db9f380027dfceff6e', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-row.cjs.entry.js

@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
+        return (index.h(index.Host, { key: '9623a4c73a5a2557b2ba7eb346ae0740ca7291c5' }, index.h("slot", { key: '502ea804deec9e91057bfaf6f2fa4fdb4a5822c3' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/nv-stack.cjs.entry.js

@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
+        return (index.h(index.Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/nv-table.cjs.entry.js

@@ -315,14 +315,14 @@ const NvTable = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (index.h(index.Host, { key: 'ea0b3237145fbc199d356010f1e001797afc52d6' }, index.h("div", { key: 'd3bf41bad48e549d1799b2c8e55a308a7d767973', class: "hidden" }, index.h("slot", { key: '8263220ebd266240b16228b67f8d215d7d56afd7' })), index.h("slot", { key: '36d43d6870cf9a6021521579c0507afd1fe85081', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
+        return (index.h(index.Host, { key: '08082f0800c32a59606968aa2a80cfa3c2f07960' }, index.h("div", { key: 'f55f5409f45d90ef072abb09006ef6366e7e8c95', class: "hidden" }, index.h("slot", { key: '0b5326e8c7c6f97f419819744a132335d4435bb4' })), index.h("slot", { key: '07d4538957b466ed332cd598e2c132d85a801979', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), index.h("slot", { key: '233b61e9099f58ca0eeeb7d0f7fdc7bd71bc9065', name: "after" })));
+        })))))))), index.h("slot", { key: '1f505261da2c2e05511940ec90f7375981cb0823', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-toggle.cjs.entry.js

@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'db161d2edfcf7f83381b6431c8bc70a22c04fbf3', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '086d6c429b4b7bcaa23093b13d30cf6ba21912f8', class: "input-container" }, index.h("input", { key: 'e83f407f2c3643c245198131a7991545b73dde78', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'eb5af410d1c643c70a4364948bf8fad9d54e74df', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '54793fd81258bee7676801f23da4f5fb554242bf', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '6af650d9677d1eb0f8cfa77cbcd6318f2d6f8aaf', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '2c157429288779ad6cc18d4e318e64830a657c54', class: "description" }, index.h("slot", { key: 'fcfae2a0d7cdcc76d4b23c4b376c8e2496e11bb5', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '0f440b59ac0c32d9abe9577668d7045081819b49', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4289435e34eb31a8e59e00cefcba2e17e98bd03a', class: "input-container" }, index.h("input", { key: '1b7d05f77fd32cece9eed2e6cf79c7e2e707f64c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '6d78d7e80eb790bbead21bba6108329f9ded3746', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '524a2c2542a45945bddb688c5dff6c9426d58570', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '59eda4b826602062620e7167acf3c8de0f77ebef', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e8412879ed60fc6806464432348bd52483e3567', class: "description" }, index.h("slot", { key: '85a876130569a5a4051e271eaf1cf49593a014a6', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-togglebutton.cjs.entry.js

@@ -48,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'cb15a84c7e7cc27a80773613f31b98168eee8475', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '32d6b9394088d88c4671fb7809ad6aa85b240fff' })));
+        return (index.h(index.Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/nv-togglebuttongroup.cjs.entry.js

@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ce185699fabd71bb5c22e5a0d73df88067acb9d6' }, index.h("slot", { key: 'a1e375fb1e8660f3fdb75d96f18db20735a3a64d' })));
+        return (index.h(index.Host, { key: 'edb5b3bb7651b482cd02625038e36cdb35743453' }, index.h("slot", { key: '2b0bc4891b885ecf7febdce7062fc02b120ec939' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-tooltip.cjs.entry.js

@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e0b68e5ade824e2b0f9c5e5cac140349412c919d' }, index.h("slot", { key: 'd61a58d034818fdba87b4ab17ce903bbb13a47ff' }), index.h("nv-popover", { key: '408df675045f95adf270025f83285b2e125873c5', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e4f860f09f5e5ef83b5e704c271781f41a643e59', slot: "content" }, this.message), index.h("slot", { key: '2e2e4dcae68651d734696e718c59389f712562df', name: "content" }))));
+        return (index.h(index.Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, index.h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), index.h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), index.h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/slide.animation-8bc27ed6.js

@@ -0,0 +1,92 @@
+'use strict';
+
+const fade_animation = require('./fade.animation-9294e9ee.js');
+const styleValueTypes_es = require('./style-value-types.es-eea2f16f.js');
+
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = fade_animation.index(node);
+    /**
+     * Will animate the translateX property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateX property.
+     * @param {number} options.to - The ending value for the translateX property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideX = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            styleValueTypes_es.animate({
+                from: { x: options.from },
+                to: { x: options.to },
+                ease: styleValueTypes_es.easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Will animate the translateY property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateY property.
+     * @param {number} options.to - The ending value for the translateY property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideY = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            styleValueTypes_es.animate({
+                from: { y: options.from },
+                to: { y: options.to },
+                ease: styleValueTypes_es.easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateY(${latest.y}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Applies the slideX styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideX styles.
+     */
+    const setSlideX = (amount = 100) => nodeStyler.set({ transform: `translateX(${amount}%)` });
+    /**
+     * Applies the slideY styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideY styles.
+     */
+    const setSlideY = (amount = 100) => nodeStyler.set({ transform: `translateY(${amount}%)` });
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideReset() {
+        nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });
+    }
+    return {
+        slideX,
+        slideY,
+        setSlideX,
+        setSlideY,
+        setSlideReset,
+    };
+};
+
+exports.useSlide = useSlide;
+
+//# sourceMappingURL=slide.animation-8bc27ed6.js.map

package/dist/cjs/slide.animation-8bc27ed6.js.map

@@ -0,0 +1 @@
+{"file":"slide.animation-8bc27ed6.js","mappings":";;;;;MAQM,QAAQ,GAAG,CACf,IAAiB,EACjB,EAAE,QAAQ,KAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAE9C,MAAM,UAAU,GAAGA,oBAAM,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;IAWhC,MAAM,MAAM,GACV,CACE,UAKI,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAE1B;QACE,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BC,0BAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;gBACzB,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAEC,0BAAO;gBACb,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3D;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ,CAAC;;;;;;;;;;IAWJ,MAAM,MAAM,GACV,CACE,UAKI,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAE1B;QACE,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9BD,0BAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE;gBACzB,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAEC,0BAAO;gBACb,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC3D;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ,CAAC;;;;;;;;IASJ,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,KAC7B,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,IAAI,EAAE,CAAC,CAAC;;;;;;;;IAS1D,MAAM,SAAS,GAAG,CAAC,MAAM,GAAG,GAAG,KAC7B,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,MAAM,IAAI,EAAE,CAAC,CAAC;;;;;IAM1D,SAAS,aAAa;QACpB,UAAU,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC;KACtE;IAED,OAAO;QACL,MAAM;QACN,MAAM;QACN,SAAS;QACT,SAAS;QACT,aAAa;KACd,CAAC;AACJ;;;;","names":["styler","animate","easeOut"],"sources":["src/animations/slide.animation.ts"],"sourcesContent":["import { animate, easeOut } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type SlideOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useSlide = (\n  node: HTMLElement,\n  { duration }: SlideOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the translateX property.\n   *\n   * @param {object} options - The options for the animation.\n   * @param {number} options.from - The starting value for the translateX property.\n   * @param {number} options.to - The ending value for the translateX property.\n   * @returns {Promise<void>} - A promise that resolves when the animation is\n   * complete.\n   */\n  const slideX =\n    (\n      options: {\n        /** The starting percentage for the translateX property. */\n        from: number;\n        /** The ending percentage for the translateX property. */\n        to: number;\n      } = { from: 0, to: 100 },\n    ) =>\n    () => {\n      return new Promise<void>(resolve => {\n        animate({\n          from: { x: options.from },\n          to: { x: options.to },\n          ease: easeOut,\n          duration,\n          onUpdate(latest) {\n            nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n          },\n          onComplete() {\n            resolve();\n          },\n        });\n      });\n    };\n\n  /**\n   * Will animate the translateY property.\n   *\n   * @param {object} options - The options for the animation.\n   * @param {number} options.from - The starting value for the translateY property.\n   * @param {number} options.to - The ending value for the translateY property.\n   * @returns {Promise<void>} - A promise that resolves when the animation is\n   * complete.\n   */\n  const slideY =\n    (\n      options: {\n        /** The starting percentage for the translateY property. */\n        from: number;\n        /** The ending percentage for the translateY property. */\n        to: number;\n      } = { from: 0, to: 100 },\n    ) =>\n    () => {\n      return new Promise<void>(resolve => {\n        animate({\n          from: { y: options.from },\n          to: { y: options.to },\n          ease: easeOut,\n          duration,\n          onUpdate(latest) {\n            nodeStyler.set({ transform: `translateY(${latest.y}%)` });\n          },\n          onComplete() {\n            resolve();\n          },\n        });\n      });\n    };\n\n  /**\n   * Applies the slideX styles without animating, useful when initial state\n   * is slid out.\n   *\n   * @param {number} amount - The amount to translate the element by.\n   * @returns {function} - A function that applies the slideX styles.\n   */\n  const setSlideX = (amount = 100) =>\n    nodeStyler.set({ transform: `translateX(${amount}%)` });\n\n  /**\n   * Applies the slideY styles without animating, useful when initial state\n   * is slid out.\n   *\n   * @param {number} amount - The amount to translate the element by.\n   * @returns {function} - A function that applies the slideY styles.\n   */\n  const setSlideY = (amount = 100) =>\n    nodeStyler.set({ transform: `translateY(${amount}%)` });\n\n  /**\n   * Applies the slideIn styles without animating, useful when initial state\n   * is slid in.\n   */\n  function setSlideReset() {\n    nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });\n  }\n\n  return {\n    slideX,\n    slideY,\n    setSlideX,\n    setSlideY,\n    setSlideReset,\n  };\n};\n\nexport { useSlide };\n"],"version":3}

package/dist/collection/animations/collapse.animation.js

@@ -90,10 +90,13 @@ const useCollapse = (node, { duration = 200, overflow = 'hidden' } = {}) => {
      * Expand: animate from 0 box to the element's natural box (height + margins),
      * then restore `height: auto` and computed margins.
      */
-    function expand() {
+    async function expand() {
         stop();
+        // Make sure any pending screen updates are done
+        await new Promise(resolve => requestAnimationFrame(resolve));
         return new Promise(resolve => {
             // Let the element size naturally to measure the target box
+            // await next animation frame
             setStyle({
                 height: '',
                 marginTop: '',

package/dist/collection/animations/collapse.animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.animation.js","sourceRoot":"","sources":["../../src/animations/collapse.animation.ts"],"names":[],"mappings":"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","sourcesContent":["import { animate, cubicBezier } from 'popmotion';\n\nexport type CollapseOptions = {\n  /**\n   * Duration of the expand/collapse animation in milliseconds.\n   * @default 200\n   */\n  duration?: number;\n\n  /**\n   * Set the overflow state while animating.\n   * @default \"hidden\"\n   */\n  overflow?: 'hidden' | 'visible';\n};\n\n/**\n * Read current box metrics (height + vertical margins).\n * @param {HTMLElement} node - The element to measure.\n * @returns {object} The box metrics.\n */\nfunction getBoxMetrics(node: HTMLElement) {\n  const rectHeight = node.getBoundingClientRect().height;\n  const style = getComputedStyle(node);\n  const marginTop = parseFloat(style.marginTop) || 0;\n  const marginBottom = parseFloat(style.marginBottom) || 0;\n  const total = rectHeight + marginTop + marginBottom;\n  return { height: rectHeight, marginTop, marginBottom, total };\n}\n\nconst useCollapse = (\n  node: HTMLElement,\n  { duration = 200, overflow = 'hidden' }: CollapseOptions = {},\n) => {\n  let currentAnimation: ReturnType<typeof animate> | null = null;\n\n  const stop = () => {\n    if (currentAnimation) {\n      currentAnimation.stop();\n      currentAnimation = null;\n    }\n  };\n\n  const setStyle = (styles: Partial<CSSStyleDeclaration>) => {\n    for (const [k, v] of Object.entries(styles)) {\n      node.style[k] = v as string;\n    }\n  };\n\n  /** Instantly apply collapsed styles (no animation). */\n  function setCollapsed() {\n    stop();\n    setStyle({\n      height: '0px',\n      marginTop: '0px',\n      marginBottom: '0px',\n      overflow,\n    });\n  }\n\n  /** Instantly apply expanded styles (no animation). */\n  function setExpanded() {\n    stop();\n    setStyle({\n      height: '',\n      marginTop: '',\n      marginBottom: '',\n      overflow: '',\n    });\n  }\n\n  /**\n   * Collapse: animate from current box (height + margins) down to 0.\n   */\n  function collapse() {\n    stop();\n    return new Promise<void>(resolve => {\n      const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n      // Lock current box\n      setStyle({\n        height: `${height}px`,\n        marginTop: `${marginTop}px`,\n        marginBottom: `${marginBottom}px`,\n        overflow,\n        willChange: 'height, margin',\n      });\n\n      const denom = total > 0 ? total : 0.0001; // avoid divide-by-zero\n\n      currentAnimation = animate({\n        from: total,\n        to: 0,\n        duration,\n        ease: cubicBezier(0.2, 0, 0, 1),\n        onUpdate: v => {\n          const ratio = v / denom;\n          setStyle({\n            height: `${height * ratio}px`,\n            marginTop: `${marginTop * ratio}px`,\n            marginBottom: `${marginBottom * ratio}px`,\n          });\n        },\n        onComplete: () => {\n          setStyle({\n            height: '0px',\n            marginTop: '0px',\n            marginBottom: '0px',\n            willChange: '',\n          });\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Expand: animate from 0 box to the element's natural box (height + margins),\n   * then restore `height: auto` and computed margins.\n   */\n  function expand() {\n    stop();\n    return new Promise<void>(resolve => {\n      // Let the element size naturally to measure the target box\n      setStyle({\n        height: '',\n        marginTop: '',\n        marginBottom: '',\n        overflow,\n      });\n      const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n      // Start locked at zero box\n      setStyle({\n        height: '0px',\n        marginTop: '0px',\n        marginBottom: '0px',\n        willChange: 'height, margin',\n      });\n\n      const denom = total > 0 ? total : 0.0001;\n\n      currentAnimation = animate({\n        from: 0,\n        to: total,\n        duration,\n        ease: cubicBezier(0.2, 0, 0, 1),\n        onUpdate: v => {\n          const ratio = v / denom;\n          setStyle({\n            height: `${height * ratio}px`,\n            marginTop: `${marginTop * ratio}px`,\n            marginBottom: `${marginBottom * ratio}px`,\n          });\n        },\n        onComplete: () => {\n          // Restore natural layout\n          setStyle({\n            height: '',\n            marginTop: '',\n            marginBottom: '',\n            overflow: '',\n            willChange: '',\n          });\n          resolve();\n        },\n      });\n    });\n  }\n\n  return { collapse, expand, setCollapsed, setExpanded };\n};\n\nexport { useCollapse };\n"]}
+{"version":3,"file":"collapse.animation.js","sourceRoot":"","sources":["../../src/animations/collapse.animation.ts"],"names":[],"mappings":"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","sourcesContent":["import { animate, cubicBezier } from 'popmotion';\n\nexport type CollapseOptions = {\n  /**\n   * Duration of the expand/collapse animation in milliseconds.\n   * @default 200\n   */\n  duration?: number;\n\n  /**\n   * Set the overflow state while animating.\n   * @default \"hidden\"\n   */\n  overflow?: 'hidden' | 'visible';\n};\n\n/**\n * Read current box metrics (height + vertical margins).\n * @param {HTMLElement} node - The element to measure.\n * @returns {object} The box metrics.\n */\nfunction getBoxMetrics(node: HTMLElement) {\n  const rectHeight = node.getBoundingClientRect().height;\n  const style = getComputedStyle(node);\n  const marginTop = parseFloat(style.marginTop) || 0;\n  const marginBottom = parseFloat(style.marginBottom) || 0;\n  const total = rectHeight + marginTop + marginBottom;\n  return { height: rectHeight, marginTop, marginBottom, total };\n}\n\nconst useCollapse = (\n  node: HTMLElement,\n  { duration = 200, overflow = 'hidden' }: CollapseOptions = {},\n) => {\n  let currentAnimation: ReturnType<typeof animate> | null = null;\n\n  const stop = () => {\n    if (currentAnimation) {\n      currentAnimation.stop();\n      currentAnimation = null;\n    }\n  };\n\n  const setStyle = (styles: Partial<CSSStyleDeclaration>) => {\n    for (const [k, v] of Object.entries(styles)) {\n      node.style[k] = v as string;\n    }\n  };\n\n  /** Instantly apply collapsed styles (no animation). */\n  function setCollapsed() {\n    stop();\n    setStyle({\n      height: '0px',\n      marginTop: '0px',\n      marginBottom: '0px',\n      overflow,\n    });\n  }\n\n  /** Instantly apply expanded styles (no animation). */\n  function setExpanded() {\n    stop();\n    setStyle({\n      height: '',\n      marginTop: '',\n      marginBottom: '',\n      overflow: '',\n    });\n  }\n\n  /**\n   * Collapse: animate from current box (height + margins) down to 0.\n   */\n  function collapse() {\n    stop();\n    return new Promise<void>(resolve => {\n      const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n      // Lock current box\n      setStyle({\n        height: `${height}px`,\n        marginTop: `${marginTop}px`,\n        marginBottom: `${marginBottom}px`,\n        overflow,\n        willChange: 'height, margin',\n      });\n\n      const denom = total > 0 ? total : 0.0001; // avoid divide-by-zero\n\n      currentAnimation = animate({\n        from: total,\n        to: 0,\n        duration,\n        ease: cubicBezier(0.2, 0, 0, 1),\n        onUpdate: v => {\n          const ratio = v / denom;\n          setStyle({\n            height: `${height * ratio}px`,\n            marginTop: `${marginTop * ratio}px`,\n            marginBottom: `${marginBottom * ratio}px`,\n          });\n        },\n        onComplete: () => {\n          setStyle({\n            height: '0px',\n            marginTop: '0px',\n            marginBottom: '0px',\n            willChange: '',\n          });\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Expand: animate from 0 box to the element's natural box (height + margins),\n   * then restore `height: auto` and computed margins.\n   */\n  async function expand() {\n    stop();\n    // Make sure any pending screen updates are done\n    await new Promise(resolve => requestAnimationFrame(resolve));\n\n    return new Promise<void>(resolve => {\n      // Let the element size naturally to measure the target box\n      // await next animation frame\n      setStyle({\n        height: '',\n        marginTop: '',\n        marginBottom: '',\n        overflow,\n      });\n      const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n      // Start locked at zero box\n      setStyle({\n        height: '0px',\n        marginTop: '0px',\n        marginBottom: '0px',\n        willChange: 'height, margin',\n      });\n\n      const denom = total > 0 ? total : 0.0001;\n\n      currentAnimation = animate({\n        from: 0,\n        to: total,\n        duration,\n        ease: cubicBezier(0.2, 0, 0, 1),\n        onUpdate: v => {\n          const ratio = v / denom;\n          setStyle({\n            height: `${height * ratio}px`,\n            marginTop: `${marginTop * ratio}px`,\n            marginBottom: `${marginBottom * ratio}px`,\n          });\n        },\n        onComplete: () => {\n          // Restore natural layout\n          setStyle({\n            height: '',\n            marginTop: '',\n            marginBottom: '',\n            overflow: '',\n            willChange: '',\n          });\n          resolve();\n        },\n      });\n    });\n  }\n\n  return { collapse, expand, setCollapsed, setExpanded };\n};\n\nexport { useCollapse };\n"]}

package/dist/collection/animations/fade.animation.js

@@ -27,14 +27,14 @@ const useFade = (node, { duration } = { duration: 200 }) => {
      * is hidden.
      */
     function setFadeOut() {
-        node.style.opacity = '0';
+        nodeStyler.set({ opacity: 0 });
     }
     /**
      * Applies the fadeIn styles without animating, useful when initial state
      * is visible.
      */
     function setFadeIn() {
-        node.style.opacity = '1';
+        nodeStyler.set({ opacity: 1 });
     }
     /**
      * Will animate the opacity to 0, once complete, the opacity style attribute

package/dist/collection/animations/fade.animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade.animation.js","sourceRoot":"","sources":["../../src/animations/fade.animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,MAAM,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,KAAkB,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7C,EAAE;IACF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9C,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;gBACvC,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACH,SAAS,SAAS;QAChB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACH,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9C,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type FadeOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useFade = (\n  node: HTMLElement,\n  { duration }: FadeOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the opacity to 1, and removes the opacity style attribute once\n   * complete.\n   */\n  function fadeIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n          node.style.removeProperty('opacity');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the fadeOut styles without animating, useful when initial state\n   * is hidden.\n   */\n  function setFadeOut() {\n    node.style.opacity = '0';\n  }\n\n  /**\n   * Applies the fadeIn styles without animating, useful when initial state\n   * is visible.\n   */\n  function setFadeIn() {\n    node.style.opacity = '1';\n  }\n\n  /**\n   * Will animate the opacity to 0, once complete, the opacity style attribute\n   * will stay on the element.\n   */\n  function fadeOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    fadeIn,\n    fadeOut,\n    setFadeOut,\n    setFadeIn,\n  };\n};\n\nexport { useFade };\n"]}
+{"version":3,"file":"fade.animation.js","sourceRoot":"","sources":["../../src/animations/fade.animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,MAAM,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,KAAkB,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7C,EAAE;IACF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9C,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;gBACvC,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,SAAS,UAAU;QACjB,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;IACjC,CAAC;IAED;;;OAGG;IACH,SAAS,SAAS;QAChB,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;IACjC,CAAC;IAED;;;OAGG;IACH,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;YACjC,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBACpB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;gBAClB,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC9C,CAAC;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type FadeOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n};\n\nconst useFade = (\n  node: HTMLElement,\n  { duration }: FadeOptions = { duration: 200 },\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the opacity to 1, and removes the opacity style attribute once\n   * complete.\n   */\n  function fadeIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n          node.style.removeProperty('opacity');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the fadeOut styles without animating, useful when initial state\n   * is hidden.\n   */\n  function setFadeOut() {\n    nodeStyler.set({ opacity: 0 });\n  }\n\n  /**\n   * Applies the fadeIn styles without animating, useful when initial state\n   * is visible.\n   */\n  function setFadeIn() {\n    nodeStyler.set({ opacity: 1 });\n  }\n\n  /**\n   * Will animate the opacity to 0, once complete, the opacity style attribute\n   * will stay on the element.\n   */\n  function fadeOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ opacity: latest.opacity });\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    fadeIn,\n    fadeOut,\n    setFadeOut,\n    setFadeIn,\n  };\n};\n\nexport { useFade };\n"]}