@nova-design-system/nova-webcomponents 3.5.0 → 3.7.0

package/dist/collection/components/nv-accordion-item/nv-accordion-item.js

@@ -0,0 +1,353 @@
+import { Host, h, } from "@stencil/core";
+import { useCollapse } from "../../animations";
+/**
+ * Accordion item element for nv-accordion.
+ *
+ * @slot header - Custom header (replaces itemTitle/subtitle)
+ * @slot content - Main content (expandable area)
+ */
+export class NvAccordionItem {
+    constructor() {
+        /** Open or closed */
+        this.open = false;
+        /** Disables the item */
+        this.disabled = false;
+        /** Parent expansion mode (accordion or multi) */
+        this.mode = 'accordion';
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region STATE
+        /** Internal state for open/close rendering */
+        this.currentOpenState = false;
+        /**
+         * Controls if the panel has been initialized for animations
+         */
+        this.isInitialized = false;
+        /**
+         * Animation in progress
+         */
+        this.isAnimating = false;
+        /**
+         * Handler for header click
+         */
+        this.handleHeaderClick = () => {
+            this.toggle();
+        };
+        /**
+         * Handler for iconbutton click
+         * @param {Event} e - Click event
+         */
+        this.handleIconClick = (e) => {
+            e.stopPropagation(); // Prevent header click from triggering
+            this.toggle();
+        };
+        /**
+         * Handler for keyboard events on iconbutton
+         * @param {KeyboardEvent} e - Keyboard event
+         */
+        this.handleHeaderKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            switch (e.key) {
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    this.toggle();
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open) {
+                        this.open = true;
+                        this.itemToggle.emit(this.open);
+                        this.updateVisibility(this.open);
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (this.open) {
+                        this.open = false;
+                        this.itemToggle.emit(this.open);
+                        this.updateVisibility(this.open);
+                    }
+                    break;
+            }
+        };
+    }
+    //#endregion STATE
+    /****************************************************************************/
+    //#region WATCHERS
+    async onOpenChanged(newValue, oldValue) {
+        this.currentOpenState = newValue; // Synchronize internal state
+        // Skip initial render
+        if (oldValue === undefined) {
+            return;
+        }
+        await this.updateVisibility(newValue);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region ANIMATIONS
+    /**
+     * Updates the visibility state with Nova animation system
+     * @param {boolean} open - Whether the accordion item should be open
+     */
+    async updateVisibility(open) {
+        if (!this.contentRef)
+            return;
+        this.isAnimating = true;
+        const { collapse, expand } = useCollapse(this.contentRef, {
+            duration: 200,
+        });
+        if (open) {
+            // Expand with animation
+            await expand();
+        }
+        else {
+            // Collapse with animation
+            await collapse();
+        }
+        this.isAnimating = false;
+    }
+    //#endregion ANIMATIONS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.currentOpenState = this.open; // Initial synchronization
+    }
+    componentDidLoad() {
+        if (this.contentRef) {
+            const { setExpanded, setCollapsed } = useCollapse(this.contentRef);
+            if (this.open) {
+                // If open by default on initial load, set expanded state without animation
+                setExpanded();
+            }
+            else {
+                // If closed by default, set collapsed state without animation
+                setCollapsed();
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Toggle open/close (Public API)
+     */
+    async toggle() {
+        if (!this.disabled && !this.isAnimating) {
+            this.open = !this.open;
+            this.itemToggle.emit(this.open);
+            // Force animation update directly instead of relying on watcher
+            await this.updateVisibility(this.open);
+        }
+    }
+    /**
+     * Get the chevron icon name based on open state
+     * @returns {string} The icon name to display in the chevron button
+     */
+    get chevronIconName() {
+        return this.open ? 'chevron-top' : 'chevron-down';
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'dfb8ca76f8ac40c938323be1ccba4353ea33a616', class: {
+                'nv-accordion-item': true,
+                'is-open': this.open,
+                'is-disabled': this.disabled,
+                'is-animating': this.isAnimating,
+            }, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, h("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, h("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (h("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (h("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), h("nv-iconbutton", { key: '8d90711a96f5ce2e7d6f5ebcf3922cd0fedd69bd', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "content", "aria-label": this.open ? 'Fermer la section' : 'Ouvrir la section' })), h("div", { key: '171b5165f3663fa5f0fa28ef84145dfc998e9f10', id: "content", class: "nv-accordion-item__content", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.contentRef = el) }, h("div", { key: 'dcf753f23cec073a036d8137f1299dcf4ca4af78', class: "nv-accordion-item__content-inner" }, h("slot", { key: '3dc85def21aace19f3d211262b6cf66ccb9438fa', name: "content" })))));
+    }
+    static get is() { return "nv-accordion-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-accordion-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "itemTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Item title (displayed if header slot is absent)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "item-title",
+                "reflect": true
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Item subtitle (displayed if header slot is absent)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "subtitle",
+                "reflect": true
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open or closed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the item"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "maxContentHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum content height (in px, optional). If not defined, auto height."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-content-height",
+                "reflect": true
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accordion' | 'multi'",
+                    "resolved": "\"accordion\" | \"multi\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Parent expansion mode (accordion or multi)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "'accordion'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentOpenState": {},
+            "isInitialized": {},
+            "isAnimating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemToggle",
+                "name": "itemToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on toggle (header click)"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle open/close (Public API)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChanged"
+            }];
+    }
+}
+//# sourceMappingURL=nv-accordion-item.js.map

package/dist/collection/components/nv-accordion-item/nv-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/nv-accordion-item/nv-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /** Item title (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /** Item subtitle (displayed if header slot is absent) */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /** Open or closed */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /** Disables the item */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /** Maximum content height (in px, optional). If not defined, auto height. */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /** Parent expansion mode (accordion or multi) */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /** Internal state for open/close rendering */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.currentOpenState = newValue; // Synchronize internal state\n\n    // Skip initial render\n    if (oldValue === undefined) {\n      return;\n    }\n\n    await this.updateVisibility(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) return;\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      // Expand with animation\n      await expand();\n    } else {\n      // Collapse with animation\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open; // Initial synchronization\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      const { setExpanded, setCollapsed } = useCollapse(this.contentRef);\n\n      if (this.open) {\n        // If open by default on initial load, set expanded state without animation\n        setExpanded();\n      } else {\n        // If closed by default, set collapsed state without animation\n        setCollapsed();\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.open = !this.open;\n      this.itemToggle.emit(this.open);\n\n      // Force animation update directly instead of relying on watcher\n      await this.updateVisibility(this.open);\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation(); // Prevent header click from triggering\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.open = true;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.open = false;\n          this.itemToggle.emit(this.open);\n          this.updateVisibility(this.open);\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    return this.open ? 'chevron-top' : 'chevron-down';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.open,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls=\"content\"\n            aria-label={this.open ? 'Fermer la section' : 'Ouvrir la section'}\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-accordion-item/styles/nv-accordion-item.css

@@ -0,0 +1,66 @@
+nv-accordion-item {
+  display: block;
+  border-bottom: var(--spacing-px) solid var(--color-content-low-border);
+}
+nv-accordion-item:last-child {
+  border-bottom: none;
+}
+nv-accordion-item .nv-accordion-item__header {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4);
+}
+nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron {
+  margin-left: var(--spacing-2);
+  flex-shrink: 0;
+}
+nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  flex: 1;
+  min-width: 0;
+}
+nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title {
+  color: var(--color-content-high-text);
+  /* text/lg/medium */
+  font-size: var(--font-size-lg);
+  font-style: normal;
+  font-weight: var(--font-weight-medium-emphasis);
+  line-height: var(--line-height-lg); /* 155.556% */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle {
+  color: var(--color-content-low-text);
+  /* text/md/medium */
+  font-size: var(--font-size-md);
+  font-style: normal;
+  font-weight: var(--font-weight-medium-emphasis);
+  line-height: var(--line-height-base); /* 150% */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+nv-accordion-item .nv-accordion-item__content {
+  background: var(--color-level-10-background);
+}
+nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner {
+  padding: var(--spacing-4);
+  color: var(--color-content-low-text);
+  /* text/md/medium */
+  font-size: var(--font-size-md);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--line-height-base); /* 150% */
+}
+nv-accordion-item.is-disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+nv-accordion-item.is-open .nv-accordion-item__header {
+  border-bottom: var(--spacing-px) solid var(--color-content-low-border);
+}

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

@@ -152,7 +152,7 @@ export class NvAlert {
     //#region RENDER
     render() {
         var _a;
-        return (h(Host, { key: '8c775b0d81d4f6f82421b667925e1ceafead5b2d', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: 'e42f28e360d600c9863fb7f11eab2a1c501bb6ce', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '87f7d65ea812afda0ce6ba6ace6e443dd53263da', class: "content" }, this.heading && h("p", { key: '8150784a2663d47410fd6b92ca678f756f086f28', class: "heading" }, this.heading), this.message && h("p", { key: '27f029f2ded81f82e260dc0f2087d46ba5cd7e62', class: "message" }, this.message), h("slot", { key: '3256f379c6d7ea5dab9d284b9229ceffb55e7443' })), this.dismissible && (h("button", { key: '6b7f333b26ab17c2c523a3c9933599176a9152c0', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: 'badcf4153b6add49042b91415e010f662a042e61', name: "x", size: "sm" })))));
+        return (h(Host, { key: 'f0e75ac2c38aced1dcf76cb1d5f03becefbee71d', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, h("nv-icon", { key: '19f7fcf452d62277ab436acd20c285f44fbaecd4', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), h("div", { key: '8e656ffd0bce63bd33d92b97df21389af265e182', class: "content" }, this.heading && h("p", { key: '0aa928e8ee8605d735f890bc67128563ce3ad379', class: "heading" }, this.heading), this.message && h("p", { key: '690d9928646d25a636b2bb04eb65eee40c402f52', class: "message" }, this.message), h("slot", { key: '86309f093688dbb81ff805f1c9137b200541e905' })), this.dismissible && (h("button", { key: '387695ff1e23a7e289cf58c51042ccc561d451ad', class: "close", type: "button", onClick: this.handleDismiss }, h("nv-icon", { key: '788b99b4c56fc8c936a67ac48d2db37fdcca7631', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-alert"; }
     static get originalStyleUrls() {

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

@@ -54,7 +54,7 @@ export class NvAvatar {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
+        return (h(Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (h("slot", { name: "icon" }, h("nv-icon", { name: "user" })))));
     }
     static get is() { return "nv-avatar"; }
     static get originalStyleUrls() {

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

@@ -124,12 +124,12 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'cde39aa20bdbc6529d317a1f9f0c04f7bf79112e', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
                 'is-icon-only': this.isIconOnly,
-            }) }, h("slot", { key: 'cd0ebe919619431f096fe87e6e9412cbed88e467', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'b010613a9ffe4b9ae027e128ba519c43d4211d7d', name: this.leadIcon, size: "sm" })), h("span", { key: '5035aa8d35272f716442731b9493483835e083c6', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '81a475c0081911d8b4606450ecdf085a4f7e2853' })), this.dismissible && (h("button", { key: '402fe040a11cae0974ffa911b81f781230fd0516', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '6f32fa2ae87170963c22bd35cebcf18500426570', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), h("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (h("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class NvBreadcrumb {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '50f858dc015ef2cd51f54a08fa53ec88ee42ac41', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '1df40faa4a483d4abf8895def5db87696cf0d08e', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '90174908cdcf1b3e1f8a8a82a01cfa505311c930', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: '72282abd41c80bb8edf0c6b19506be32bf5ed688', slot: "content" }, h("slot", { key: '4b9c325c0d27162c4856796f6a7d7c9b39edf993' })))), h("span", { key: '62316fc8efc09067a0a64d4e90e76d57b329ee81', "data-scope": "separator" }, "/")));
+        return (h(Host, { key: 'b0cfdee987585488bd49734900ee421b081e6df4', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '970d9552c3f81bffd86889fc2ff169f73810507b', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '1b14ce172db49aaeb199d6801978f96204ba05a1', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: 'b984309f9290bb4bcfed796200ffaad6e52a2b93', slot: "content" }, h("slot", { key: '189408f75e689b98b4cf9397074dbaefaecece9a' })))), h("span", { key: '62a4bed098620043b69f1e7dcf51db7de035f5fc', "data-scope": "separator" }, "/")));
     }
     static get is() { return "nv-breadcrumb"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 export class NvBreadcrumbs {
     //#region RENDER
     render() {
-        return (h(Host, { key: '19ad2bb41f4254a98a571cbadb50ba5ed7d29f62', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: '11b77f0f11c6b1dc2ce5ab3f4f7b23e8ec728b61' }, h("slot", { key: 'c0c683f93c6874aa5f84fb735d13c1b5eabcd951' }))));
+        return (h(Host, { key: '4337fe5161c0ce444001e1b92221f3adac26e4bf', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: '00d470eadfe879be525a4a4b7ec3368601a0697c' }, h("slot", { key: '2d012f152b49f33f399aa14dfb18a4c39265128c' }))));
     }
     static get is() { return "nv-breadcrumbs"; }
     static get originalStyleUrls() {

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

@@ -140,7 +140,7 @@ export class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f8b20f9052d71f93eaf03f98550a7237225cadf2', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: 'c1cefa72ee24dad9ce16bbfe1f51e6cec6dc7fbc', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '36a311494e45ebc23b1133923a676d58e87f3800', name: "leading-icon" }), h("slot", { key: 'f6fea826cda9a09f7152f4e30cc6981c89e73ebe' }), h("slot", { key: 'd59c23ff85ea7efc16c69c5adbeb0e91786f1f68', name: "trailing-icon" })));
+        return (h(Host, { key: '54c0b3351f4d8a180058a03e61a562882fb98498', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: '21315e4af4111bcf47c67e65a9a58a1d7121a43e', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'f37683ddaa2c11c5b7accfc99429c930f5a3dcf6', name: "leading-icon" }), h("slot", { key: 'd17ebe7505d9027c6c58f930a8ea9b097561cead' }), h("slot", { key: '2cd6c9756cc7540417041adf5830b734291b2ab5', name: "trailing-icon" })));
     }
     static get is() { return "nv-button"; }
     static get formAssociated() { return true; }

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

@@ -229,6 +229,16 @@ nv-calendar {
   opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
+.day.is-empty {
+  pointer-events: none;
+  background-color: transparent;
+  border-color: transparent;
+}
+.day.day-blank {
+  pointer-events: none;
+  background-color: transparent;
+  border-color: transparent;
+}
 .day.outside-month {
   color: var(--components-calendar-cell-text);
   opacity: var(--opacity-disabled);