@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.44

package/dist/cjs/nv-alert.entry-xuY-Lvuj.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
+var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+require('react');
+
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const NvAlertStyle0 = nvAlertCss;
+
+const NvAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
+        this.closeClicked = index.createEvent(this, "closeClicked");
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Specifies the alert type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Allows the alert to be dismissed via a close button (x). The alert is not
+         * dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
+        /**
+         * Controls the visibility of the alert. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the alert will not animate when it is hidden or shown.
+         */
+        this.hasNoAnimations = false;
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the dismissal of the alert, considering the preventAutoClose prop.
+         * Passes the original event from the close button to the close event detail.
+         * @param {MouseEvent} originalEvent - The original event from the close button.
+         */
+        this.handleDismiss = (originalEvent) => {
+            if (!this.preventAutoClose) {
+                this.hidden = true;
+            }
+            this.closeClicked.emit(originalEvent);
+        };
+        /**
+         * By default an icon is linked to the feedback type
+         * @returns {string} - The default icon name.
+         */
+        this.getDefaultIcon = () => {
+            switch (this.feedback) {
+                case constants98e2dcc2.FeedbackColors.Warning:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Information:
+                    return 'info-circle';
+                case constants98e2dcc2.FeedbackColors.Success:
+                    return 'circle-check';
+                case constants98e2dcc2.FeedbackColors.Error:
+                    return 'alert-circle';
+                case constants98e2dcc2.FeedbackColors.Neutral:
+                    return 'help';
+                default:
+                    return 'info-circle';
+            }
+        };
+    }
+    componentWillRender() {
+        if (this.color) {
+            switch (this.color) {
+                case 'primary':
+                    this.feedback = 'warning';
+                    break;
+                case 'secondary':
+                    this.feedback = 'information';
+                    break;
+                case 'neutral':
+                    this.feedback = 'information';
+                    break;
+                default:
+                    this.feedback = this.color;
+            }
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Used for 2 way binding with the hidden property.
+     * Triggers open and close animations.
+     * @param {boolean} hidden - The visibility state of the alert.
+     */
+    async handleHiddenChange(hidden) {
+        this.hiddenChanged.emit(hidden);
+        await this.updateVisibility(hidden);
+        this.hiddenChangedComplete.emit(hidden);
+    }
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    async updateVisibility(hidden) {
+        if (this.hasNoAnimations) {
+            this.toggleHiddenClass(hidden);
+            return;
+        }
+        const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
+        if (hidden) {
+            await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
+            this.toggleHiddenClass(true);
+        }
+        else {
+            this.toggleHiddenClass(false);
+            await timeline_animation1b88f052.timeline(expand, fadeIn).start();
+        }
+    }
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    toggleHiddenClass(hidden) {
+        this.ref.classList.toggle('hidden', hidden);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (this.color) {
+            switch (this.color) {
+                case 'primary':
+                    this.feedback = 'warning';
+                    break;
+                case 'secondary':
+                    this.feedback = 'information';
+                    break;
+                case 'neutral':
+                    this.feedback = 'information';
+                    break;
+                default:
+                    this.feedback = this.color;
+            }
+        }
+        if (this.hidden) {
+            this.ref.classList.add('hidden');
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: '4c91e200a6eb2f11ecde0ee6bd5fbed8a7f9fe42', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '35ab5320ea3817717bd8328ab969a88a09e7bad2', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5b152a1762c2a6ac637f7fe237ebe29954aa1a00', class: "content" }, this.heading && index.h("p", { key: 'c955254210c0df22004ac3eed3b5d91a847dcb7b', class: "heading" }, this.heading), this.message && index.h("p", { key: '623ef5fb99dbdaa15255e49262994474f78efb71', class: "message" }, this.message), index.h("slot", { key: '05b862a15f47eeef8381e91665104c75a100294c' })), this.dismissible && (index.h("button", { key: '6f7cb842fca3d0ec2c2bd1201454b906821721fb', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: 'dfbc3e788b9c5d71528d7604602a9418c555e17b', name: "x", size: "sm" })))));
+    }
+    get ref() { return index.getElement(this); }
+    static get watchers() { return {
+        "hidden": ["handleHiddenChange"]
+    }; }
+};
+NvAlert.style = NvAlertStyle0;
+
+exports.nv_alert = NvAlert;

package/dist/cjs/nv-avatar.entry-CFgnor0-.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-CEWbQ5nh.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const NvAvatarStyle0 = nvAvatarCss;
+
+const NvAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = constants98e2dcc2.SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = constants98e2dcc2.SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = constants98e2dcc2.SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
+    }
+};
+NvAvatar.style = NvAvatarStyle0;
+
+exports.nv_avatar = NvAvatar;

package/dist/cjs/nv-avatar.entry-DJkpupVT.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const NvAvatarStyle0 = nvAvatarCss;
+
+const NvAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = constants98e2dcc2.SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = constants98e2dcc2.SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = constants98e2dcc2.SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
+    }
+};
+NvAvatar.style = NvAvatarStyle0;
+
+exports.nv_avatar = NvAvatar;

package/dist/cjs/nv-avatar.entry-DKXMQPOz.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-CIcUUomJ.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const NvAvatarStyle0 = nvAvatarCss;
+
+const NvAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = constants98e2dcc2.SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = constants98e2dcc2.SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = constants98e2dcc2.SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
+    }
+};
+NvAvatar.style = NvAvatarStyle0;
+
+exports.nv_avatar = NvAvatar;

package/dist/cjs/nv-avatar.entry-DWOADxdQ.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-wDACGzKb.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const NvAvatarStyle0 = nvAvatarCss;
+
+const NvAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = constants98e2dcc2.SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = constants98e2dcc2.SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = constants98e2dcc2.SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
+    }
+};
+NvAvatar.style = NvAvatarStyle0;
+
+exports.nv_avatar = NvAvatar;

package/dist/cjs/nv-avatar.entry-DjyiGt07.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-B_VOAJzk.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const NvAvatarStyle0 = nvAvatarCss;
+
+const NvAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = constants98e2dcc2.SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = constants98e2dcc2.SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = constants98e2dcc2.SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
+    }
+};
+NvAvatar.style = NvAvatarStyle0;
+
+exports.nv_avatar = NvAvatar;

package/dist/cjs/nv-avatar.entry-DuN1d3Vy.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-CtI3SivD.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+require('react');
+
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const NvAvatarStyle0 = nvAvatarCss;
+
+const NvAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = constants98e2dcc2.SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = constants98e2dcc2.SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = constants98e2dcc2.SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = constants98e2dcc2.SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'aa00ea05df513c899c6ed43fd0307178e98b6145', class: clsx297c1ffe.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
+    }
+};
+NvAvatar.style = NvAvatarStyle0;
+
+exports.nv_avatar = NvAvatar;