npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.6.0 → 3.7.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (291) hide show

package/dist/cjs/nv-badge_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-badge.nv-fielddropdownitemcheck.entry.cjs.js","mappings":"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","names":["useFade","useCollapse","timeline","h","Host","clsx"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants /\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/ Define maps for color-related variables /\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus-ring(\n if(\n str-index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n and not\n str-index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/\n @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /\n When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n /\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event()\n closeClicked: EventEmitter<void>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n /\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible \|\| this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n slot-fb,\n span {\n all: unset;\n }\n\n cursor: pointer;\n display: flex;\n padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n border-radius: var(--list-dropdown-item-radius);\n\n &:hover {\n background-color: var(--components-list-dropdown-item-background-hover);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\n\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /************************************************************************/\n //#region PROPERTIES\n\n /\n * Indicates whether the checkbox is selected.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n The value associated with this item.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed alongside the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /\n The group this item belongs to, if applicable.\n /\n @Prop({ reflect: true })\n readonly group?: string;\n\n /\n Disables the item, preventing any user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n /\n @Event()\n itemChecked: EventEmitter<{\n /\n The value associated with this item\n /\n value: string \| undefined;\n /\n Whether the checkbox is currently checked\n /\n checked: boolean;\n /\n The group this item belongs to, if any\n /\n group?: string \| undefined;\n }>;\n\n /\n when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n /\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /* Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label \|\| this.value}\n label={this.label \|\| this.value}\n label-placement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n role=\"option\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n ></nv-fieldcheckbox>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nv-badge.nv-fielddropdownitemcheck.entry.cjs.js","mappings":"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","names":["useFade","useCollapse","timeline","h","Host","clsx"],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.scss?tag=nv-fielddropdownitemcheck","src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants /\n$badge-colors: (\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '10',\n 'error',\n 'information',\n 'neutral',\n 'success',\n 'warning',\n 'amber',\n 'orange',\n 'turquoise',\n 'crimson',\n 'lime',\n 'petrol',\n);\n\n/ Define maps for color-related variables /\n$color-rainbow-text: (\n '1': var(--color-rainbow-1-text),\n '2': var(--color-rainbow-2-text),\n '3': var(--color-rainbow-3-text),\n '4': var(--color-rainbow-4-text),\n '5': var(--color-rainbow-5-text),\n '6': var(--color-rainbow-6-text),\n '7': var(--color-rainbow-7-text),\n '8': var(--color-rainbow-8-text),\n '9': var(--color-rainbow-9-text),\n '10': var(--color-rainbow-10-text),\n 'error': var(--color-feedback-error-low-text),\n 'information': var(--color-feedback-information-low-text),\n 'neutral': var(--color-feedback-neutral-low-text),\n 'success': var(--color-feedback-success-low-text),\n 'warning': var(--color-feedback-warning-low-text),\n 'amber': var(--color-rainbow-1-text),\n 'orange': var(--color-rainbow-2-text),\n 'turquoise': var(--color-rainbow-5-text),\n 'crimson': var(--color-rainbow-6-text),\n 'lime': var(--color-rainbow-9-text),\n 'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n '1': var(--color-rainbow-1-icon),\n '2': var(--color-rainbow-2-icon),\n '3': var(--color-rainbow-3-icon),\n '4': var(--color-rainbow-4-icon),\n '5': var(--color-rainbow-5-icon),\n '6': var(--color-rainbow-6-icon),\n '7': var(--color-rainbow-7-icon),\n '8': var(--color-rainbow-8-icon),\n '9': var(--color-rainbow-9-icon),\n '10': var(--color-rainbow-10-icon),\n 'error': var(--color-feedback-error-low-icon),\n 'information': var(--color-feedback-information-low-icon),\n 'neutral': var(--color-feedback-neutral-low-icon),\n 'success': var(--color-feedback-success-low-icon),\n 'warning': var(--color-feedback-warning-low-icon),\n 'amber': var(--color-rainbow-1-icon),\n 'orange': var(--color-rainbow-2-icon),\n 'turquoise': var(--color-rainbow-5-icon),\n 'crimson': var(--color-rainbow-6-icon),\n 'lime': var(--color-rainbow-9-icon),\n 'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n '1': var(--color-rainbow-1-background),\n '2': var(--color-rainbow-2-background),\n '3': var(--color-rainbow-3-background),\n '4': var(--color-rainbow-4-background),\n '5': var(--color-rainbow-5-background),\n '6': var(--color-rainbow-6-background),\n '7': var(--color-rainbow-7-background),\n '8': var(--color-rainbow-8-background),\n '9': var(--color-rainbow-9-background),\n '10': var(--color-rainbow-10-background),\n 'error': var(--color-feedback-error-low-background),\n 'information': var(--color-feedback-information-low-background),\n 'neutral': var(--color-feedback-neutral-low-background),\n 'success': var(--color-feedback-success-low-background),\n 'warning': var(--color-feedback-warning-low-background),\n 'amber': var(--color-rainbow-1-background),\n 'orange': var(--color-rainbow-2-background),\n 'turquoise': var(--color-rainbow-5-background),\n 'crimson': var(--color-rainbow-6-background),\n 'lime': var(--color-rainbow-9-background),\n 'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n '1': var(--color-rainbow-1-border),\n '2': var(--color-rainbow-2-border),\n '3': var(--color-rainbow-3-border),\n '4': var(--color-rainbow-4-border),\n '5': var(--color-rainbow-5-border),\n '6': var(--color-rainbow-6-border),\n '7': var(--color-rainbow-7-border),\n '8': var(--color-rainbow-8-border),\n '9': var(--color-rainbow-9-border),\n '10': var(--color-rainbow-10-border),\n 'error': var(--color-feedback-error-low-border),\n 'information': var(--color-feedback-information-low-border),\n 'neutral': var(--color-feedback-neutral-low-border),\n 'success': var(--color-feedback-success-low-border),\n 'warning': var(--color-feedback-warning-low-border),\n 'amber': var(--color-rainbow-1-border),\n 'orange': var(--color-rainbow-2-border),\n 'turquoise': var(--color-rainbow-5-border),\n 'crimson': var(--color-rainbow-6-border),\n 'lime': var(--color-rainbow-9-border),\n 'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n padding: var(--badge-padding-y) var(--badge-padding-x);\n display: inline-flex !important; // override the display: none in [hidden] css\n gap: var(--badge-gap-x);\n vertical-align: middle;\n align-items: center;\n border-radius: var(--radius-rounded-full);\n border-style: solid;\n border-width: 0.5px;\n height: fit-content;\n width: fit-content;\n\n &.is-icon-only {\n padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n gap: var(--badge-gap-icon-only-x);\n }\n}\n\n@mixin root-styles-with-gap() {\n @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n color: map.get($color-rainbow-text, $color-key);\n background-color: map.get($color-rainbow-background, $color-key);\n border-color: map.get($color-rainbow-border, $color-key);\n .close {\n @include focus-ring(\n if(\n str-index('error information neutral success warning', $color-key),\n var(\n --color-feedback-#{$color-key}-low-content,\n map.get($color-rainbow-text, $color-key)\n ),\n if(\n type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n and not\n str-index('error information neutral success warning', $color-key),\n var(\n --color-#{$color-key}-content,\n map.get($color-rainbow-text, $color-key)\n ),\n var(--color-rainbow-#{$color-key}-content)\n )\n ),\n 0.2\n );\n }\n}\n\n@mixin icon-color($color-key) {\n color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n font-size: var(--font-size-xs);\n line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n @include root-styles();\n\n //gap styles\n &.with-gap {\n @include root-styles-with-gap();\n }\n\n &.visually-hidden {\n @include utils.visually-hidden();\n }\n\n &:not(.with-gap) {\n @include root-styles();\n }\n\n // color styles\n @each $i in $badge-colors {\n &.badge-#{$i} {\n @include badge-color($i);\n nv-icon {\n @include icon-color($i);\n }\n }\n }\n\n //label styles\n & span {\n @include type-settings(xs, xs);\n text-align: center;\n }\n\n // nv-icon styles\n & nv-icon > svg {\n @each $size, $config in icon.$size-variants {\n &.icon-#{$size} {\n @include icon.icon-size-and-stroke(\n map.get(map.get(icon.$size-variants, 'xs'), size),\n map.get(map.get(icon.$size-variants, 'xs'), stroke)\n );\n }\n }\n }\n\n .close {\n padding: 0;\n line-height: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: inherit;\n display: inline-flex;\n align-items: center;\n aspect-ratio: 1/1;\n border-radius: var(--radius-rounded-full);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Watch,\n Element,\n State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/\n @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n /\n@Component({\n tag: 'nv-badge',\n styleUrl: 'nv-badge.scss',\n shadow: false,\n})\nexport class NvBadge {\n @Element() ref: HTMLNvBadgeElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Whether the badge is dismissible.\n * @deprecated use dismissible instead.\n /\n @Prop({ reflect: true })\n readonly dismissal: boolean = false;\n\n /\n The icon to display in the badge.\n * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n The location of the icon in the badge.\n * @deprecated only leadIcon now.\n /\n @Prop({ reflect: true })\n readonly iconLocation: 'left' \| 'right';\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The color of the badge.\n * deprecated Use status values or named colors instead.\n * Use a string between 1 to 10\n * or one of the status values: error, information, neutral, success, warning\n * or one of the color names: amber, orange, turquoise, crimson, lime\n /\n @Prop({ reflect: true })\n readonly color?: string = '1';\n\n /\n Main content of the badge.\n /\n @Prop({ reflect: true })\n readonly label?: string \| null = null;\n\n /\n The lead icon of the badge.\n /\n @Prop({ reflect: true, mutable: true })\n leadIcon?: string \| null = null;\n\n /\n Whether the badge is dismissible.\n /\n @Prop({ reflect: true, mutable: true })\n dismissible: boolean = false;\n\n /\n Controls the visibility of the badge. Will animate with fade and collapse.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n @State()\n private _isHidden: boolean;\n\n /\n When true, the alert does not automatically close upon dismissing.\n * Useful for externally controlled component behavior.\n /\n @Prop({ reflect: true })\n readonly preventAutoClose: boolean = false;\n\n /\n When true, the badge will only display an icon without label.\n * The label will be visually hidden but still accessible for screen readers.\n /\n @Prop({ reflect: true })\n readonly isIconOnly?: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the badge is dismissed.\n /\n @Event()\n closeClicked: EventEmitter<void>;\n\n /\n Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n /\n @Event()\n hiddenChanged: EventEmitter<boolean>;\n\n /\n Emitted when the animations complete, detail includes the hidden value.\n /\n @Event()\n hiddenChangedComplete: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Handles the dismissal prop change.\n * @param {boolean} dismissal - The new dismissal value.\n /\n @Watch('dismissal')\n handleDismissalChange(dismissal: boolean) {\n this.dismissible = dismissal;\n }\n\n /\n Handles the icon prop change.\n * @param {string} icon - The new icon value.\n /\n @Watch('icon')\n handleIconChange(icon: string) {\n this.leadIcon = icon;\n }\n\n /\n Handles the hidden prop change.\n * @param {boolean} hidden - The new hidden value.\n /\n @Watch('hidden')\n async handleHiddenChange(hidden: boolean) {\n this.hiddenChanged.emit(hidden);\n if (this._isHidden === true) this._isHidden = hidden;\n\n const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n if (hidden === true) await timeline(fadeOut, collapse).start();\n if (hidden === false) await timeline(expand, fadeIn).start();\n\n this.hiddenChangedComplete.emit(hidden);\n\n if (this._isHidden === false) this._isHidden = hidden;\n }\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n /\n * Component will load.\n /\n componentWillLoad() {\n if (this.dismissal) {\n this.dismissible = this.dismissal;\n }\n\n if (this.icon != null && this.icon != '') {\n this.leadIcon = this.icon;\n }\n\n if (this.hidden) {\n this._isHidden = true;\n const { setCollapsed } = useCollapse(this.ref);\n const { setFadeOut } = useFade(this.ref);\n\n setCollapsed();\n setFadeOut();\n }\n }\n\n //#endregion LIFECYCLE\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the close button click.\n /\n private readonly handleClose = () => {\n if (!this.preventAutoClose) {\n this.hidden = true;\n }\n\n this.closeClicked.emit();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(`badge-${this.color}`, {\n 'has-close': this.dismissible,\n 'with-gap': this.dismissible \|\| this.label,\n 'visually-hidden': this._isHidden,\n 'is-icon-only': this.isIconOnly,\n })}\n >\n <slot name=\"leading-icon\">\n {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n </slot>\n\n <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n {this.label}\n <slot></slot>\n </span>\n\n {this.dismissible && (\n <button onClick={this.handleClose} class=\"close\" type=\"button\">\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n","nv-fielddropdownitemcheck {\n slot-fb,\n span {\n all: unset;\n }\n\n cursor: pointer;\n display: flex;\n padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);\n border-radius: var(--list-dropdown-item-radius);\n\n &:hover {\n background-color: var(--components-list-dropdown-item-background-hover);\n }\n}","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\n\n/\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n /\n@Component({\n tag: 'nv-fielddropdownitemcheck',\n styleUrl: 'nv-fielddropdownitemcheck.scss',\n shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Indicates whether the checkbox is selected.\n /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /\n The value associated with this item.\n /\n @Prop({ reflect: true })\n readonly value?: string;\n\n /\n The label displayed alongside the checkbox.\n /\n @Prop({ reflect: true })\n readonly label?: string;\n\n /\n A description providing additional context or information about the\n * checkbox.\n /\n @Prop({ reflect: true })\n readonly description?: string;\n\n /\n The group this item belongs to, if applicable.\n /\n @Prop({ reflect: true })\n readonly group?: string;\n\n /\n Disables the item, preventing any user interaction.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when the checkbox is toggled.\n * It provides details about the current state of the item.\n /\n @Event()\n itemChecked: EventEmitter<{\n /\n The value associated with this item\n /\n value: string \| undefined;\n /\n Whether the checkbox is currently checked\n /\n checked: boolean;\n /\n The group this item belongs to, if any\n /\n group?: string \| undefined;\n }>;\n\n /\n when the child <nv-fieldcheckbox> change its `checked` state,\n * update `this.checked` and emit `itemChecked`.\n * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n /\n private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n if (this.disabled) return;\n // NvFieldcheckbox has emitted checkedChanged\n this.checked = event.detail; // get the new state\n this.itemChecked.emit({\n value: this.value,\n checked: this.checked,\n group: this.group,\n });\n };\n\n /* Make sure the checkbox is checked when clicked anywhere in the item. */\n private handleClick = () => {\n if (this.disabled) return;\n if (this.el.querySelector('input').checked) {\n this.checked = false;\n } else {\n this.checked = true;\n }\n };\n\n render() {\n return (\n <Host onClick={this.handleClick}>\n <nv-fieldcheckbox\n checked={this.checked}\n name={this.label \|\| this.value}\n label={this.label \|\| this.value}\n label-placement=\"after\"\n description={this.description}\n disabled={this.disabled}\n tabindex=\"-1\"\n role=\"option\"\n onCheckedChanged={this.onFieldcheckboxChanged}\n >\n <slot></slot>\n <slot name=\"main\"></slot>\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </nv-fieldcheckbox>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/nv-calendar.cjs.entry.js CHANGED Viewed

@@ -397,6 +397,9 @@ const CalendarGrid = props => {
     return (index.h("div", { class: "days-container" },
         index.h("div", { class: "days-header" }, dayNames.map((day, index$1) => (index.h("div", { class: "day-header", key: `day-header-${index$1}` }, day)))),
         index.h("div", { class: "days-grid" }, days.map(day => {
+            if (day.isBlank) {
+                return index.h("div", { class: "day day-blank" });
+            }
             const date = day.date;
             if (!date || !day.dayOfMonth) {
                 return index.h("div", { class: "day-cell is-disabled is-empty" });
@@ -411,7 +414,7 @@ const CalendarGrid = props => {
         }))));
 };
-const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;background-color:transparent;border-color:transparent}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
+const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{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)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
 const NvCalendarStyle0 = nvCalendarCss;
 const NvCalendar = class {
@@ -469,6 +472,8 @@ const NvCalendar = class {
         this.showActions = false;
         /** Cache for parsed disabled dates */
         this.parsedDisabledDates = [];
+        /** Flag to indicate a user click for selection */
+        this.isUserClick = false;
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
@@ -504,7 +509,7 @@ const NvCalendar = class {
                     }
                     // Navigate to the date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = parsedDate;
                     }
                 }
@@ -532,7 +537,7 @@ const NvCalendar = class {
                     }
                     // Navigate to start date if not prevented
                     const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                    if (!preventNavigation) {
+                    if (!preventNavigation && !this.isUserClick) {
                         this.currentDate = startDate;
                     }
                 }
@@ -553,20 +558,14 @@ const NvCalendar = class {
          */
         this.changeMonth = (offset) => {
             const newDate = new Date(this.currentDate);
-            // Ensure we only move by one month at a time
+            newDate.setUTCDate(1); // Set to the first of the month to avoid day-of-month issues
             newDate.setUTCMonth(newDate.getUTCMonth() + offset);
-            // Add the appropriate animation class
             const containers = this.el.querySelectorAll('.calendar-grid');
             containers.forEach(container => {
-                // Remove existing animation classes
                 container.classList.remove('slide-left', 'slide-right');
-                // Add the new animation class
                 const animationClass = offset > 0 ? 'slide-left' : 'slide-right';
                 container.classList.add(animationClass);
-                // Remove the class after the animation
-                setTimeout(() => {
-                    container.classList.remove(animationClass);
-                }, 300); // 300ms corresponds to $slide-duration in the SCSS
+                setTimeout(() => container.classList.remove(animationClass), 300);
             });
             this.currentDate = newDate;
         };
@@ -578,12 +577,16 @@ const NvCalendar = class {
             if (this.isDateDisabled(date)) {
                 return;
             }
+            this.isUserClick = true;
             if (this.selectionType === 'single') {
                 this.handleSingleSelection(date);
             }
             else {
                 this.handleRangeSelection(date);
             }
+            requestAnimationFrame(() => {
+                this.isUserClick = false;
+            });
         };
         /**
          * Handles single date selection
@@ -726,12 +729,15 @@ const NvCalendar = class {
         /**
          * Generates the days of the current month
          * @param {number} offset - Month offset (0 by default)
-         * @param {number} totalCalendars - Number of calendars to display (1 by default)
          * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
          */
         this.getDaysInMonth = (offset = 0) => {
-            const year = this.currentDate.getUTCFullYear();
-            const month = this.currentDate.getUTCMonth() + offset;
+            const baseMonth = this.currentDate.getUTCMonth();
+            // Correctly calculate the year and month for the given offset
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(baseMonth + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
             const firstDay = new Date(Date.UTC(year, month, 1));
             const lastDay = new Date(Date.UTC(year, month + 1, 0));
             const days = [];
@@ -740,32 +746,18 @@ const NvCalendar = class {
             const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
             // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
             const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
-            const showPrevMonthDays = this.numberOfCalendars === 1 ||
-                (this.numberOfCalendars > 1 && offset === 0);
-            // Add the days of the previous month
-            if (offsetDays > 0) {
-                if (showPrevMonthDays) {
-                    const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
-                    for (let i = offsetDays; i > 0; i--) {
-                        const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
-                        days.push({
-                            dayOfMonth: date.getUTCDate(),
-                            date,
-                            isCurrentMonth: false,
-                            isDisabled: this.isDateDisabled(date),
-                        });
-                    }
-                }
-                else {
-                    for (let i = 0; i < offsetDays; i++) {
-                        days.push({
-                            dayOfMonth: null,
-                            date: null,
-                            isCurrentMonth: false,
-                            isDisabled: true,
-                        });
-                    }
-                }
+            // Add padding days from the previous month
+            for (let i = 0; i < offsetDays; i++) {
+                const prevMonthDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+                const date = new Date(Date.UTC(year, month - 1, prevMonthDay - offsetDays + 1 + i));
+                days.push({
+                    dayOfMonth: date.getUTCDate(),
+                    date,
+                    isCurrentMonth: false,
+                    isDisabled: this.isDateDisabled(date),
+                    // Days from previous month are blank if not the first calendar
+                    isBlank: offset > 0,
+                });
             }
             // Add the days of the current month
             for (let i = 1; i <= lastDay.getUTCDate(); i++) {
@@ -775,33 +767,22 @@ const NvCalendar = class {
                     date,
                     isCurrentMonth: true,
                     isDisabled: this.isDateDisabled(date),
+                    isBlank: false,
                 });
             }
-            const showNextMonthDays = this.numberOfCalendars === 1 ||
-                (this.numberOfCalendars > 1 && offset === this.numberOfCalendars - 1);
-            // Add the days of the next month to fill the grid
+            // Add padding days to fill the last week
             const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
             if (nextMonthDaysNeeded < 7) {
-                if (showNextMonthDays) {
-                    for (let i = 1; i <= nextMonthDaysNeeded; i++) {
-                        const date = new Date(Date.UTC(year, month + 1, i));
-                        days.push({
-                            dayOfMonth: i,
-                            date,
-                            isCurrentMonth: false,
-                            isDisabled: this.isDateDisabled(date),
-                        });
-                    }
-                }
-                else {
-                    for (let i = 0; i < nextMonthDaysNeeded; i++) {
-                        days.push({
-                            dayOfMonth: null,
-                            date: null,
-                            isCurrentMonth: false,
-                            isDisabled: true,
-                        });
-                    }
+                for (let i = 1; i <= nextMonthDaysNeeded; i++) {
+                    const date = new Date(Date.UTC(year, month + 1, i));
+                    days.push({
+                        dayOfMonth: i,
+                        date,
+                        isCurrentMonth: false,
+                        isDisabled: this.isDateDisabled(date),
+                        // Days from next month are blank if not the last calendar
+                        isBlank: offset < this.numberOfCalendars - 1,
+                    });
                 }
             }
             return days;
@@ -838,12 +819,25 @@ const NvCalendar = class {
         this.handleMonthChange = (event, calendarOffset = 0) => {
             const select = event.target;
             const selectedMonth = parseInt(select.value, 10);
-            const currentMonth = this.currentDate.getUTCMonth();
-            // Calculate the difference considering the calendar offset
-            const monthDiff = selectedMonth - ((currentMonth + calendarOffset) % 12);
             const newDate = new Date(this.currentDate);
-            newDate.setUTCMonth(newDate.getUTCMonth() + monthDiff);
-            this.currentDate = newDate;
+            // Date for the calendar being changed
+            const targetCalendarDate = new Date(newDate.toUTCString());
+            targetCalendarDate.setUTCMonth(targetCalendarDate.getUTCMonth() + calendarOffset);
+            const currentMonth = targetCalendarDate.getUTCMonth();
+            let monthDiff = selectedMonth - currentMonth;
+            // Smartly adjust for year change
+            if (monthDiff > 6) {
+                // e.g. from Jan to Dec, go back 1 month
+                monthDiff -= 12;
+            }
+            if (monthDiff < -6) {
+                // e.g. from Dec to Jan, go forward 1 month
+                monthDiff += 12;
+            }
+            // Apply the diff to the original `currentDate`
+            const finalDate = new Date(this.currentDate);
+            finalDate.setUTCMonth(finalDate.getUTCMonth() + monthDiff);
+            this.currentDate = finalDate;
         };
         /**
          * Handles year change in the numeric entry
@@ -855,9 +849,10 @@ const NvCalendar = class {
             const year = parseInt(input.value, 10);
             if (!isNaN(year) && year >= 1900 && year <= 2100) {
                 const newDate = new Date(this.currentDate);
-                newDate.setUTCFullYear(year);
                 newDate.setUTCMonth(newDate.getUTCMonth() + calendarOffset);
-                this.currentDate = newDate;
+                newDate.setUTCFullYear(year);
+                newDate.setUTCMonth(newDate.getUTCMonth() - calendarOffset);
+                this.currentDate = new Date(newDate);
             }
         };
         /**
@@ -1086,7 +1081,12 @@ const NvCalendar = class {
             for (let i = 0; i < days.length; i += 7) {
                 weeks.push(days.slice(i, i + 7));
             }
-            return (index.h("div", { class: "calendar-wrapper" }, index.h("div", { class: "calendar-container", key: `calendar-${index$1}` }, this.renderHeader(offset, index$1), index.h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index$1), index.h(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index$1 < this.numberOfCalendars - 1 && (index.h("div", { class: "calendar-separator" }))));
+            // Add year and month to the key to force re-render on date change
+            const targetDate = new Date(this.currentDate);
+            targetDate.setUTCMonth(targetDate.getUTCMonth() + offset);
+            const year = targetDate.getUTCFullYear();
+            const month = targetDate.getUTCMonth();
+            return (index.h("div", { class: "calendar-wrapper" }, index.h("div", { class: "calendar-container", key: `calendar-${index$1}-${year}-${month}` }, this.renderHeader(offset, index$1), index.h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index$1), index.h(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index$1 < this.numberOfCalendars - 1 && (index.h("div", { class: "calendar-separator" }))));
         };
         /**
          * Renders the shortcuts
@@ -1136,7 +1136,7 @@ const NvCalendar = class {
                 this.endDate = endDate;
                 // Do not navigate to the start date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = startDate;
                 }
             }
@@ -1164,7 +1164,7 @@ const NvCalendar = class {
                 this.selectedDate = parsedDate;
                 // Do not navigate to the selected date if data-prevent-navigation attribute is present
                 const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
-                if (!preventNavigation) {
+                if (!preventNavigation && !this.isUserClick) {
                     this.currentDate = parsedDate;
                 }
             }
@@ -1278,6 +1278,27 @@ const NvCalendar = class {
             throw error; // Re-throw to let the caller handle it
         }
     }
+    /**
+     * Clears the current selection and resets the calendar to its initial state.
+     * This method can be called programmatically to reset the calendar.
+     */
+    async clear() {
+        if (this.selectionType === 'single') {
+            this.selectedDate = null;
+            this.singleValue = '';
+            this.value = '';
+            this.singleDateChange.emit('');
+            this.valueChanged.emit('');
+        }
+        else {
+            this.startDate = null;
+            this.endDate = null;
+            this.rangeValue = { start: '', end: '' };
+            this.value = '';
+            this.rangeDateChange.emit({ start: '', end: '' });
+            this.valueChanged.emit('');
+        }
+    }
     /**
      * Renders the datepicker
      * @returns {JSX.Element} Datepicker
@@ -1285,8 +1306,8 @@ const NvCalendar = class {
      * @slot default - Child content of the component.
      */
     render() {
-        return (index.h(index.Host, { key: '089a80ab34e2bc3f31432437787578f6367fde7c' }, index.h("div", { key: '9537a1a20798d8ff3cf53972154a4d7fb0156daf', class: "datepicker-root" }, index.h("div", { key: '17a4630c184001b5fbea941540ee01b0bbf8b58d', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.h("div", { key: '8d56891ebb52b251a013d6a640d472900b9b62e8', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (index.h("div", { key: 'a7f53681fb23a9b80b8141de19c4decaec5e887b', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '943aca0d1a5b2db40f59dfd8973d26b52b9ed312' })));
+        return (index.h(index.Host, { key: '7abeb96312f2bcf26eed3a133ef59d5d3b5b528f' }, index.h("div", { key: 'e0b2db720853551e3b6445e92b39b418123cb83e', class: "datepicker-root" }, index.h("div", { key: '1a83c285278c440c4e33ae770a033974e4924830', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, index.h("div", { key: '3481fe780a3e1d8f0c1e22ffc82c3b7830721055', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (index.h("div", { key: '3a644bdc993142c181c45173756e362025d4a23a', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), index.h("slot", { key: '4a4290ccf63429a9a88cfd95a33b4fdc34c8ef74' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {