@nova-design-system/nova-webcomponents 3.12.0 → 3.13.0

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

@@ -0,0 +1,116 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
+import { F as FeedbackColors } from './constants-d0f19e7b.js';
+import { u as useCollapse } from './collapse.animation-acda1bf5.js';
+import { u as useFade } from './fade.animation-eb454088.js';
+import './style-value-types.es-f5d10b79.js';
+import { u as useSlide } from './slide.animation-f444aa0b.js';
+import { p as parallel } from './timeline.animation-79215cd4.js';
+import { v as v4 } from './v4-a79185f4.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 NvNotificationStyle0 = nvNotificationCss;
+
+const NvNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hiddenChanged = createEvent(this, "hiddenChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Set a unique ID for the notification. Used for aria attributes and managing
+         * multiple notifications.
+         */
+        this.uid = v4();
+        /**
+         * Specifies the notification type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Adjusts the emphasis to make the notification more or less visually
+         * prominent to users. Use this to draw attention to important actions or
+         * reduce focus on less critical ones
+         */
+        this.emphasis = 'medium';
+        /**
+         * Allows the notification to be dismissed via a close button (x). The
+         * notification is not dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the notification.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region INTERNAL
+        this.iconByFeedback = {
+            [FeedbackColors.Warning]: 'alert-circle',
+            [FeedbackColors.Information]: 'info-circle',
+            [FeedbackColors.Success]: 'circle-check',
+            [FeedbackColors.Error]: 'alert-triangle',
+            [FeedbackColors.Neutral]: 'help',
+        };
+        this.roleByFeedback = {
+            [FeedbackColors.Error]: 'alert',
+            [FeedbackColors.Warning]: 'alert',
+            [FeedbackColors.Information]: 'status',
+            [FeedbackColors.Success]: 'status',
+            [FeedbackColors.Neutral]: 'status',
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    async dismiss() {
+        await this.dismissAnimation();
+    }
+    getDefaultIcon() {
+        var _a;
+        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+    }
+    getAriaRole() {
+        var _a;
+        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+    }
+    getAriaLive() {
+        return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
+    }
+    getHeadingId() {
+        return this.heading ? `nv-notification-${this.uid}-heading` : null;
+    }
+    getMessageId() {
+        return this.message ? `nv-notification-${this.uid}-message` : null;
+    }
+    async dismissAnimation() {
+        const { fadeOut } = useFade(this.container, { duration: 300 });
+        const { slideOut } = useSlide(this.container, { duration: 800 });
+        const { collapse } = useCollapse(this.el, {
+            duration: 800,
+            overflow: 'visible',
+        });
+        await parallel(fadeOut, slideOut, collapse).start();
+        this.hidden = true;
+        this.hiddenChanged.emit(true);
+    }
+    //#endregion INTERNAL
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.headingSlot = this.el.querySelector('[slot="heading"]');
+        this.messageSlot = this.el.querySelector('[slot="content"]');
+        this.actionsSlot = this.el.querySelector('[slot="actions"]');
+    }
+    //#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" })))))));
+    }
+    get el() { return getElement(this); }
+};
+NvNotification.style = NvNotificationStyle0;
+
+export { NvNotification as nv_notification };
+
+//# sourceMappingURL=nv-notification.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-notification.entry.js","mappings":"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","names":["uuidv4"],"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}

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

@@ -1,7 +1,7 @@
 import { a as getRenderingRef, f as forceUpdate, r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
-import './stylefire.es-74da334a.js';
-import { u as useFade } from './fade.animation-71e8e34c.js';
-import { u as useGrow } from './grow.animation-f7b26024.js';
+import { u as useFade } from './fade.animation-eb454088.js';
+import { u as useGrow } from './grow.animation-5b2abb3a.js';
+import './style-value-types.es-f5d10b79.js';
 import { a as addEventListeners, r as removeEventListeners } from './events.utils-fe1d907f.js';
 
 /**
@@ -2380,7 +2380,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '290f9c76a0a4db0648061ce3778bec21b5926ae4' }, h("slot", { key: 'ca90cba5de160880308dfc12b1f82f0047c57b75', name: "trigger" }), h("div", { key: 'f9b5e11a4a6fd63fe1a640acd936cf883fc91563', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '39f7287b5614326cc5eb29be9b94c70f1574671b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '45ac045f3669f3ebe3e8200bff75b26284e609a6', name: "content" }))));
+        return (h(Host, { key: 'dc7ef1862f1a1da4b32e02bee827f81545df73d1' }, h("slot", { key: '7535c2ba2b1f600c237602c68a04c85fd9d6d98b', name: "trigger" }), h("div", { key: '8e7907e2fda20d35b00642eca0507aa20e56f7cb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '4e081e84e9597b69351253d1c1b89c115cdcfd9a', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '5bcd80588e9746db974cee69c5963b698665d105', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -10,7 +10,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '91a990d393ce32b86f66729fc69068a4a5754fe4' }, h("slot", { key: '867eaa3d6b5760f3a8763a59d36c592d56325e9e' })));
+        return (h(Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
 };
 NvRow.style = NvRowStyle0;

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

@@ -19,7 +19,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6a314d1f6679d4cbbd01fc08ce54fc0f7709e3e0', class: 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') }, h("slot", { key: 'd3c5d0fd8f44b23a3cfae00aa39de8722babca2a' })));
+        return (h(Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', class: 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') }, h("slot", { key: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
     }
 };
 NvStack.style = NvStackStyle0;

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

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

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

@@ -62,8 +62,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'caafe3f48598a1323132e20b0492070e73c95885', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '2b95ace9e3713bfeda007d8d9eb693fca688b45f', class: "input-container" }, h("input", { key: '703e41e527f018071ac7d02d8318314014568995', 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 })), h("div", { key: '54b2d88481800d6f988900ca6405a45ecad48352', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '41f04a6166fada0f522e5a6682d50b9e14d26ca1', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '6f24ee6e06ea767e04263a3451e29b24b8d8bf95', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ec177dadeadba62b9e69a6f3577a7a8166abb029', class: "description" }, h("slot", { key: 'd52e04c1aa3a607015f01fed95cb9f2300071087', name: "description" }, this.description))))));
+        return (h(Host, { key: 'db161d2edfcf7f83381b6431c8bc70a22c04fbf3', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '086d6c429b4b7bcaa23093b13d30cf6ba21912f8', class: "input-container" }, 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 })), h("div", { key: 'eb5af410d1c643c70a4364948bf8fad9d54e74df', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '54793fd81258bee7676801f23da4f5fb554242bf', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '6af650d9677d1eb0f8cfa77cbcd6318f2d6f8aaf', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '2c157429288779ad6cc18d4e318e64830a657c54', class: "description" }, h("slot", { key: 'fcfae2a0d7cdcc76d4b23c4b376c8e2496e11bb5', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

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

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

@@ -152,7 +152,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '52e2d0e1b8f0740a50a8d4d1e93af494e957b521' }, h("slot", { key: 'a82248437817b4fd7aa1c64e4d544050a71b4311' })));
+        return (h(Host, { key: 'ce185699fabd71bb5c22e5a0d73df88067acb9d6' }, h("slot", { key: 'a1e375fb1e8660f3fdb75d96f18db20735a3a64d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -42,7 +42,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '02f95c0f1f41fe11785859fc8f1bf585cbe35af5' }, h("slot", { key: '338049b6a5ce354b5ddcba1f183488e2f6b2116e' }), h("nv-popover", { key: 'f2e82343908d4e59a3ecf93f791c2756f29714ae', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'ee35eff1233d1d03accdff3260b6d71ef0815d47', slot: "content" }, this.message), h("slot", { key: '1a5cdc8a671ea9f3f84cb0414579b9a85a183630', name: "content" }))));
+        return (h(Host, { key: 'e0b68e5ade824e2b0f9c5e5cac140349412c919d' }, h("slot", { key: 'd61a58d034818fdba87b4ab17ce903bbb13a47ff' }), h("nv-popover", { key: '408df675045f95adf270025f83285b2e125873c5', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'e4f860f09f5e5ef83b5e704c271781f41a643e59', slot: "content" }, this.message), h("slot", { key: '2e2e4dcae68651d734696e718c59389f712562df', name: "content" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/slide.animation-f444aa0b.js

@@ -0,0 +1,68 @@
+import { i as index } from './fade.animation-eb454088.js';
+import { a as animate, g as easeOut } from './style-value-types.es-f5d10b79.js';
+
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = index(node);
+    /**
+     * Will animate the translateX to 100%, sliding the element to the right.
+     */
+    function slideOut() {
+        return new Promise(resolve => {
+            animate({
+                from: { x: 0 },
+                to: { x: 100 },
+                ease: easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Applies the slideOut styles without animating, useful when initial state
+     * is slid out.
+     */
+    function setSlideOut() {
+        node.style.transform = 'translateX(100%)';
+    }
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideIn() {
+        node.style.transform = '';
+    }
+    /**
+     * Will animate the translateX from 100% to 0%, sliding the element in from the right.
+     */
+    function slideIn() {
+        return new Promise(resolve => {
+            animate({
+                from: { x: 100 },
+                to: { x: 0 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                    node.style.removeProperty('transform');
+                },
+            });
+        });
+    }
+    return {
+        slideIn,
+        slideOut,
+        setSlideOut,
+        setSlideIn,
+    };
+};
+
+export { useSlide as u };
+
+//# sourceMappingURL=slide.animation-f444aa0b.js.map

package/dist/esm/slide.animation-f444aa0b.js.map

@@ -0,0 +1 @@
+{"file":"slide.animation-f444aa0b.js","mappings":";;;MAQM,QAAQ,GAAG,CACf,IAAiB,EACjB,EAAE,QAAQ,KAAmB,EAAE,QAAQ,EAAE,GAAG,EAAE;IAE9C,MAAM,UAAU,GAAGA,KAAM,CAAC,IAAI,CAAC,CAAC;;;;IAKhC,SAAS,QAAQ;QACf,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;gBACd,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE;gBACd,IAAI,EAAE,OAAO;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;;;;;IAMD,SAAS,WAAW;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;KAC3C;;;;;IAMD,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;KAC3B;;;;IAKD,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE;gBAChB,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;gBACZ,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;oBACV,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;iBACxC;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,OAAO;QACP,QAAQ;QACR,WAAW;QACX,UAAU;KACX,CAAC;AACJ;;;;","names":["styler"],"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 to 100%, sliding the element to the right.\n   */\n  function slideOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { x: 0 },\n        to: { x: 100 },\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   * Applies the slideOut styles without animating, useful when initial state\n   * is slid out.\n   */\n  function setSlideOut() {\n    node.style.transform = 'translateX(100%)';\n  }\n\n  /**\n   * Applies the slideIn styles without animating, useful when initial state\n   * is slid in.\n   */\n  function setSlideIn() {\n    node.style.transform = '';\n  }\n\n  /**\n   * Will animate the translateX from 100% to 0%, sliding the element in from the right.\n   */\n  function slideIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { x: 100 },\n        to: { x: 0 },\n        duration,\n        onUpdate(latest) {\n          nodeStyler.set({ transform: `translateX(${latest.x}%)` });\n        },\n        onComplete() {\n          resolve();\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  return {\n    slideIn,\n    slideOut,\n    setSlideOut,\n    setSlideIn,\n  };\n};\n\nexport { useSlide };\n"],"version":3}