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

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

@@ -1 +1 @@
-{"file":"nv-alert.js","mappings":"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","names":["NvAlert"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-right: calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\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   * Controls the visibility of the alert. 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\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.ref.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.ref.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-alert.js","mappings":"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","names":["NvAlert"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-right: calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\nimport { type IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() el: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\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   * Controls the visibility of the alert. 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\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = (): IconName => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.el, { duration: 250 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.el.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.el.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-avatar.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { S as SemanticSizes } from './p-a3ddec4c.js';
-import { d as defineCustomElement$2 } from './p-a1fe0a5d.js';
+import { S as SemanticSizes } from './p-2277cfc8.js';
+import { d as defineCustomElement$2 } from './p-ca38a8a9.js';
 
 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;

package/dist/components/nv-badge.js

@@ -1,4 +1,4 @@
-import { N as NvBadge$1, d as defineCustomElement$1 } from './p-8011513c.js';
+import { N as NvBadge$1, d as defineCustomElement$1 } from './p-e4ac8333.js';
 
 const NvBadge = NvBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-breadcrumb.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { d as defineCustomElement$3 } from './p-195f46f3.js';
-import { d as defineCustomElement$2 } from './p-f47a1e1e.js';
+import { d as defineCustomElement$3 } from './p-60244646.js';
+import { d as defineCustomElement$2 } from './p-eb443b26.js';
 
-const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
 const NvBreadcrumbStyle0 = nvBreadcrumbCss;
 
 const NvBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NvBreadcrumb extends H {

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

@@ -1 +1 @@
-{"file":"nv-breadcrumb.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,qgEAAqgE,CAAC;AAC9hE,2BAAe,eAAe;;MCUjBA,cAAY;IALzB;;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBreadcrumb"],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as focus;\n@use \"../../styles/utils\" as utils;\n\n@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  color: var(--components-breadcrumb-text);\n  font-size: var(--font-size-sm);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n  display: inline-flex;\n  align-self: center;\n  color: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  text-decoration: none;\n  @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin button-styles() {\n  height: 20px;\n  @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin separator-styles() {\n  display: inline-flex;\n  padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-1-5);\n  padding: var(--spacing-1);\n\n  a,\n  button {\n    @include link-styles();\n  }\n}\n\nnv-breadcrumb {\n  @include root-styles();\n\n  &.visually-hidden {\n    @include utils.visually-hidden();\n  }\n\n  ul {\n    @include list-styles();\n  }\n  & > a,\n  & > button {\n    @include link-styles();\n  }\n  span[data-scope=\"separator\"] {\n    @include separator-styles();\n  }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n */\n@Component({\n  tag: 'nv-breadcrumb',\n  styleUrl: 'nv-breadcrumb.scss',\n  shadow: false,\n})\nexport class NvBreadcrumb {\n  @Element() el: HTMLNvBreadcrumbElement;\n  private popoverTrigger!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n   * in a dropdown. Use default for a single item. When passing multiple items\n   * as collapsed, make sure to wrap you links in list tags\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsed' | 'default' = 'default';\n\n  /**\n   * Add an optional tooltip to provide extra information about the breadcrumb.\n   */\n  @Prop({ reflect: true })\n  readonly tooltip: string;\n\n  /**\n   * Use this to highlight the breadcrumb as the current page in your\n   * navigation. It also makes the page clearer to screen readers with\n   * aria-current=\"location\".\n   */\n  @Prop({ reflect: true })\n  readonly current: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    // Force a re-render to pass the popoverTrigger ref to the popovers\n    if (this.type === 'collapsed') forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    if (this.type === 'default' && this.tooltip) {\n      this.popoverTrigger = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === null,\n      );\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"listitem\"\n        aria-current={this.current ? 'location' : undefined}\n        class={clsx({ 'visually-hidden': this.current })}\n      >\n        {this.type === 'collapsed' ? (\n          <button ref={el => (this.popoverTrigger = el)}>...</button>\n        ) : (\n          <slot></slot>\n        )}\n        {this.tooltip && (\n          <nv-tooltip\n            message={this.tooltip}\n            triggerElement={this.popoverTrigger}\n            placement=\"top\"\n          ></nv-tooltip>\n        )}\n        {this.type === 'collapsed' && (\n          <nv-popover\n            triggerMode=\"click\"\n            groupName=\"breadcrumbs\"\n            triggerElement={this.popoverTrigger}\n          >\n            <ul slot=\"content\">\n              <slot></slot>\n            </ul>\n          </nv-popover>\n        )}\n        <span data-scope=\"separator\">/</span>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}
+{"file":"nv-breadcrumb.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,6+DAA6+D,CAAC;AACtgE,2BAAe,eAAe;;MCUjBA,cAAY;IALzB;;;;;;;;;;QAkBW,SAAI,GAA4B,SAAS,CAAC;KAyEpD;;;;IArDC,gBAAgB;;QAEd,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CACrD,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CAAC;SACH;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,EACnD,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAE/C,IAAI,CAAC,IAAI,KAAK,WAAW,IACxB,cAAQ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,UAAc,KAE3D,eAAa,CACd,EACA,IAAI,CAAC,OAAO,KACX,mEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAC,KAAK,GACH,CACf,EACA,IAAI,CAAC,IAAI,KAAK,WAAW,KACxB,mEACE,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,aAAa,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,IAEnC,2DAAI,IAAI,EAAC,SAAS,IAChB,8DAAa,CACV,CACM,CACd,EACD,2EAAiB,WAAW,QAAS,CAChC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvBreadcrumb"],"sources":["src/components/nv-breadcrumb/nv-breadcrumb.scss?tag=nv-breadcrumb","src/components/nv-breadcrumb/nv-breadcrumb.tsx"],"sourcesContent":["@use \"../../styles/focus-ring\" as focus;\n@use \"../../styles/utils\" as utils;\n\n@mixin root-styles() {\n  display: flex;\n  align-items: center;\n  color: var(--components-breadcrumb-text);\n  font-size: var(--font-size-sm);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--line-height-sm);\n}\n\n@mixin link-styles() {\n  display: inline-flex;\n  align-self: center;\n  color: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  text-decoration: none;\n  @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin button-styles() {\n  height: 20px;\n  @include focus.focus-ring(var(--components-breadcrumb-text-hover), 0.3, 0.5);\n  &:hover {\n    text-decoration: underline;\n    color: var(--components-breadcrumb-text-hover);\n  }\n}\n\n@mixin separator-styles() {\n  display: inline-flex;\n  padding-left: var(--breadcrumb-padding-y);\n}\n\n@mixin list-styles() {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-1-5);\n  padding: var(--spacing-1);\n\n  a,\n  button {\n    @include link-styles();\n  }\n}\n\nnv-breadcrumb {\n  @include root-styles();\n\n  &.visually-hidden {\n    @include utils.visually-hidden();\n  }\n\n  ul {\n    @include list-styles();\n  }\n  & > a,\n  & > button {\n    @include link-styles();\n  }\n  span[data-scope=\"separator\"] {\n    @include separator-styles();\n  }\n}\n","import { Component, Prop, Host, h, Element, forceUpdate } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @slot default - Pass an icon, a link, or text to render the breadcrumb content.\n */\n@Component({\n  tag: 'nv-breadcrumb',\n  styleUrl: 'nv-breadcrumb.scss',\n  shadow: false,\n})\nexport class NvBreadcrumb {\n  @Element() el: HTMLNvBreadcrumbElement;\n  private popoverTrigger!: Element;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\n   * in a dropdown. Use default for a single item. When passing multiple items\n   * as collapsed, make sure to wrap you links in list tags\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsed' | 'default' = 'default';\n\n  /**\n   * Add an optional tooltip to provide extra information about the breadcrumb.\n   */\n  @Prop({ reflect: true })\n  readonly tooltip: string;\n\n  /**\n   * Use this to highlight the breadcrumb as the current page in your\n   * navigation. It also makes the page clearer to screen readers with\n   * aria-current=\"location\".\n   */\n  @Prop({ reflect: true })\n  readonly current: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    // Force a re-render to pass the popoverTrigger ref to the popovers\n    if (this.type === 'collapsed') forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    if (this.type === 'default' && this.tooltip) {\n      this.popoverTrigger = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === null,\n      );\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        role=\"listitem\"\n        aria-current={this.current ? 'location' : undefined}\n        class={clsx({ 'visually-hidden': this.current })}\n      >\n        {this.type === 'collapsed' ? (\n          <button ref={el => (this.popoverTrigger = el)}>...</button>\n        ) : (\n          <slot></slot>\n        )}\n        {this.tooltip && (\n          <nv-tooltip\n            message={this.tooltip}\n            triggerElement={this.popoverTrigger}\n            placement=\"top\"\n          ></nv-tooltip>\n        )}\n        {this.type === 'collapsed' && (\n          <nv-popover\n            triggerMode=\"click\"\n            groupName=\"breadcrumbs\"\n            triggerElement={this.popoverTrigger}\n          >\n            <ul slot=\"content\">\n              <slot></slot>\n            </ul>\n          </nv-popover>\n        )}\n        <span data-scope=\"separator\">/</span>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-button.js

@@ -1,4 +1,4 @@
-import { N as NvButton$1, d as defineCustomElement$1 } from './p-cf06032d.js';
+import { N as NvButton$1, d as defineCustomElement$1 } from './p-2de17259.js';
 
 const NvButton = NvButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-calendar.js

@@ -1,4 +1,4 @@
-import { N as NvCalendar$1, d as defineCustomElement$1 } from './p-8aee1010.js';
+import { N as NvCalendar$1, d as defineCustomElement$1 } from './p-68fa3890.js';
 
 const NvCalendar = NvCalendar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-datagrid.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
 import { d as deepCopyElement, e as excludedProps } from './p-cb34aa4f.js';
-import { d as SortingPossibility } from './p-a3ddec4c.js';
-import { d as defineCustomElement$3 } from './p-0ffb4785.js';
-import { d as defineCustomElement$2 } from './p-a1fe0a5d.js';
+import { g as SortingPossibility } from './p-2277cfc8.js';
+import { d as defineCustomElement$3 } from './p-0b5816f7.js';
+import { d as defineCustomElement$2 } from './p-ca38a8a9.js';
 
 /**
    * table-core
@@ -3308,7 +3308,7 @@ function debounce(func, wait) {
     };
 }
 
-const nvDatagridCss = "nv-datagrid{--nv-datagrid-border-default:var(\n    --components-form-field-border-default\n  );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(\n    --components-form-field-background-default\n  );--nv-datagrid-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-datagrid-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-datagrid-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-datagrid-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}";
+const nvDatagridCss = "nv-datagrid{--nv-datagrid-border-default:var(\n    --components-form-field-border-default\n  );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(\n    --components-form-field-background-default\n  );--nv-datagrid-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-datagrid-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-datagrid-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-datagrid-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}";
 const NvDatagridStyle0 = nvDatagridCss;
 
 const NvDatagrid$1 = /*@__PURE__*/ proxyCustomElement(class NvDatagrid extends H {