@nova-design-system/nova-webcomponents 3.14.0 → 3.15.0

package/dist/components/{p-c59eccf1.js → p-0c42fafb.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { d as defineCustomElement$3 } from './p-e0cd7e3a.js';
-import { d as defineCustomElement$2 } from './p-8439219d.js';
+import { d as defineCustomElement$3 } from './p-5d14ba3f.js';
+import { d as defineCustomElement$2 } from './p-4fc01a78.js';
 import { d as defineCustomElement$1 } from './p-fda58a76.js';
 import { v as v4 } from './p-f5ff676c.js';
 
@@ -181,4 +181,4 @@ defineCustomElement();
 
 export { NvFieldnumber as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-c59eccf1.js.map
+//# sourceMappingURL=p-0c42fafb.js.map

package/dist/components/{p-c59eccf1.js.map → p-0c42fafb.js.map}

@@ -1 +1 @@
-{"file":"p-c59eccf1.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      container-type: inline-size;\n      container-name: field-number-input-container;\n      overflow: hidden;\n      position: relative;\n\n      input {\n        @include form-field-input();\n\n        width: 100%;\n        appearance: textfield;\n\n        &::-webkit-inner-spin-button,\n        &::-webkit-outer-spin-button {\n          appearance: none;\n          margin: 0;\n        }\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n        margin-right: var(--form-field-gap);\n      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      .stepper {\n        display: flex;\n        border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n        > nv-iconbutton {\n          @include form-field-action();\n          border-radius: 0px;\n        }\n      }\n\n      // container query to remove .stepper and and the spacer when the container is less than 150px\n      // .. this needs to be an absolute value because container queries do not accept variables\n      // .. using relative width (cqw) compared to a parent container would not work\n      // .. because the parent container follows the child's width\n      @container field-number-input-container (width < 150px) {\n        .stepper-spacer {\n          display: none;\n        }\n\n        .stepper {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\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 * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<number>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.valueAsNumber;\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  // prevents text selection when clicking the buttons multiple times\n  private preventSelection = (event: Event) => {\n    event.preventDefault();\n  };\n\n  private isMinValueReached = (): boolean => {\n    return this.min !== undefined && this.value <= this.min;\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return this.max !== undefined && this.value >= this.max;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              autofocus={this.autofocus}\n              required={this.required}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            <slot name=\"trailing-input\"></slot>\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n\n            <div class=\"stepper\">\n              <nv-iconbutton\n                size=\"md\"\n                name=\"minus\"\n                emphasis=\"lower\"\n                onClick={this.handleMinus}\n                disabled={this.isMinValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"md\"\n                name=\"plus\"\n                emphasis=\"lower\"\n                onClick={this.handlePlus}\n                disabled={this.isMaxValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              />\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-0c42fafb.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldnumber {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      container-type: inline-size;\n      container-name: field-number-input-container;\n      overflow: hidden;\n      position: relative;\n\n      input {\n        @include form-field-input();\n\n        width: 100%;\n        appearance: textfield;\n\n        &::-webkit-inner-spin-button,\n        &::-webkit-outer-spin-button {\n          appearance: none;\n          margin: 0;\n        }\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n        margin-right: var(--form-field-gap);\n      }\n\n      > nv-iconbutton {\n        @include form-field-action();\n      }\n\n      .stepper {\n        display: flex;\n        border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n        > nv-iconbutton {\n          @include form-field-action();\n          border-radius: 0px;\n        }\n      }\n\n      // container query to remove .stepper and and the spacer when the container is less than 150px\n      // .. this needs to be an absolute value because container queries do not accept variables\n      // .. using relative width (cqw) compared to a parent container would not work\n      // .. because the parent container follows the child's width\n      @container field-number-input-container (width < 150px) {\n        .stepper-spacer {\n          display: none;\n        }\n\n        .stepper {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\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 * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<number>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.valueAsNumber;\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  // prevents text selection when clicking the buttons multiple times\n  private preventSelection = (event: Event) => {\n    event.preventDefault();\n  };\n\n  private isMinValueReached = (): boolean => {\n    return this.min !== undefined && this.value <= this.min;\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return this.max !== undefined && this.value >= this.max;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              autofocus={this.autofocus}\n              required={this.required}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            <slot name=\"trailing-input\"></slot>\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n\n            <div class=\"stepper\">\n              <nv-iconbutton\n                size=\"md\"\n                name=\"minus\"\n                emphasis=\"lower\"\n                onClick={this.handleMinus}\n                disabled={this.isMinValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"md\"\n                name=\"plus\"\n                emphasis=\"lower\"\n                onClick={this.handlePlus}\n                disabled={this.isMaxValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              />\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-85825688.js → p-178fa27e.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { u as useCollapse } from './p-31591941.js';
+import { u as useCollapse } from './p-3cd7a66f.js';
 import './p-42ea6b74.js';
-import { d as defineCustomElement$3 } from './p-e0cd7e3a.js';
-import { d as defineCustomElement$2 } from './p-8439219d.js';
+import { d as defineCustomElement$3 } from './p-5d14ba3f.js';
+import { d as defineCustomElement$2 } from './p-4fc01a78.js';
 import { d as defineCustomElement$1 } from './p-fda58a76.js';
 
 const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child .nv-accordion-item__content{border-radius:0 0 calc(var(--radius-rounded-lg) - var(--spacing-px)) calc(var(--radius-rounded-lg) - var(--spacing-px))}";
@@ -254,4 +254,4 @@ defineCustomElement();
 
 export { NvAccordionItem as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-85825688.js.map
+//# sourceMappingURL=p-178fa27e.js.map

package/dist/components/{p-85825688.js.map → p-178fa27e.js.map}

@@ -1 +1 @@
-{"file":"p-85825688.js","mappings":"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","names":[],"sources":["src/components/nv-accordion-item/styles/nv-accordion-item.scss?tag=nv-accordion-item","src/components/nv-accordion-item/nv-accordion-item.tsx"],"sourcesContent":["@use './mixins' as *;\n\nnv-accordion-item {\n  @include accordion-item-root();\n\n  .nv-accordion-item__header {\n    @include accordion-item-header();\n\n    .nv-accordion-item__chevron {\n      @include accordion-item-chevron();\n    }\n\n    .nv-accordion-item__header-content {\n      @include accordion-item-header-content();\n    }\n\n    .nv-accordion-item__title {\n      @include accordion-item-title();\n    }\n\n    .nv-accordion-item__subtitle {\n      @include accordion-item-subtitle();\n    }\n  }\n\n  .nv-accordion-item__content {\n    @include accordion-item-content();\n\n    .nv-accordion-item__content-inner {\n      @include accordion-item-content-inner();\n    }\n  }\n\n  // Styles for disabled items\n  &.is-disabled {\n    @include accordion-item-disabled();\n  }\n\n  // Border between header and content when item is open\n  &.is-open .nv-accordion-item__header {\n    border-bottom: var(--spacing-px) solid var(--color-content-low-border);\n  }\n\n  // ✅ Add this\n  &:last-child {\n    .nv-accordion-item__content {\n      border-radius: 0 0 calc(var(--radius-rounded-lg) - var(--spacing-px))\n        calc(var(--radius-rounded-lg) - var(--spacing-px));\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n  private isToggling: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Item title (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /**\n   * Item subtitle (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /**\n   * Open or closed\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Disables the item\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Maximum content height (in px, optional). If not defined, auto height.\n   */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /**\n   * Parent expansion mode (accordion or multi)\n   */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click or programmatic change)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /**\n   * Internal state for open/close rendering\n   */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    if (this.disabled) {\n      console.warn('[onOpenChanged] Item is disabled, forcing closed state');\n      this.currentOpenState = false;\n      this.open = false;\n      return;\n    }\n\n    this.currentOpenState = newValue;\n\n    const isInitialRender = oldValue === undefined;\n    if (!isInitialRender) {\n      if (newValue === false && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      } else if (newValue && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      }\n      await this.updateVisibility(newValue);\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) {\n      console.error('[updateVisibility] No contentRef available');\n      return;\n    }\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      await expand();\n    } else {\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open;\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      setTimeout(() => {\n        const { setExpanded, setCollapsed } = useCollapse(this.contentRef!, {\n          duration: 200,\n        });\n\n        if (this.open) {\n          setExpanded();\n          this.currentOpenState = true;\n        } else {\n          setCollapsed();\n          this.currentOpenState = false;\n        }\n        this.isInitialized = true;\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.isToggling = true;\n      const newOpen = !this.open;\n\n      this.open = newOpen;\n      this.itemToggle.emit(newOpen);\n\n      this.isToggling = false;\n    } else {\n      console.warn('[toggle] Ignored toggle (disabled or animating)');\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation();\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) {\n      console.warn('[handleHeaderKeyDown] Ignored (disabled)');\n      return;\n    }\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.isToggling = true;\n          this.open = true;\n          this.itemToggle.emit(true);\n          this.isToggling = false;\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.isToggling = true;\n          this.open = false;\n          this.itemToggle.emit(false);\n          this.isToggling = false;\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    const name = this.open ? 'chevron-top' : 'chevron-down';\n    return name;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.currentOpenState,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.currentOpenState ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-controls=\"content\"\n            aria-label={\n              this.currentOpenState ? 'Close the section' : 'Open the section'\n            }\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}
+{"file":"p-178fa27e.js","mappings":"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","names":[],"sources":["src/components/nv-accordion-item/styles/nv-accordion-item.scss?tag=nv-accordion-item","src/components/nv-accordion-item/nv-accordion-item.tsx"],"sourcesContent":["@use './mixins' as *;\n\nnv-accordion-item {\n  @include accordion-item-root();\n\n  .nv-accordion-item__header {\n    @include accordion-item-header();\n\n    .nv-accordion-item__chevron {\n      @include accordion-item-chevron();\n    }\n\n    .nv-accordion-item__header-content {\n      @include accordion-item-header-content();\n    }\n\n    .nv-accordion-item__title {\n      @include accordion-item-title();\n    }\n\n    .nv-accordion-item__subtitle {\n      @include accordion-item-subtitle();\n    }\n  }\n\n  .nv-accordion-item__content {\n    @include accordion-item-content();\n\n    .nv-accordion-item__content-inner {\n      @include accordion-item-content-inner();\n    }\n  }\n\n  // Styles for disabled items\n  &.is-disabled {\n    @include accordion-item-disabled();\n  }\n\n  // Border between header and content when item is open\n  &.is-open .nv-accordion-item__header {\n    border-bottom: var(--spacing-px) solid var(--color-content-low-border);\n  }\n\n  // ✅ Add this\n  &:last-child {\n    .nv-accordion-item__content {\n      border-radius: 0 0 calc(var(--radius-rounded-lg) - var(--spacing-px))\n        calc(var(--radius-rounded-lg) - var(--spacing-px));\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { useCollapse } from '../../animations';\n\n/**\n * Accordion item element for nv-accordion.\n *\n * @slot header - Custom header (replaces itemTitle/subtitle)\n * @slot content - Main content (expandable area)\n */\n@Component({\n  tag: 'nv-accordion-item',\n  styleUrl: 'styles/nv-accordion-item.scss',\n  shadow: false,\n})\nexport class NvAccordionItem {\n  @Element() el!: HTMLNvAccordionItemElement;\n  private contentRef?: HTMLDivElement;\n  private mutationObserver?: MutationObserver;\n  private isToggling: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Item title (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly itemTitle?: string;\n\n  /**\n   * Item subtitle (displayed if header slot is absent)\n   */\n  @Prop({ reflect: true })\n  readonly subtitle?: string;\n\n  /**\n   * Open or closed\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Disables the item\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Maximum content height (in px, optional). If not defined, auto height.\n   */\n  @Prop({ reflect: true })\n  readonly maxContentHeight?: number;\n\n  /**\n   * Parent expansion mode (accordion or multi)\n   */\n  @Prop({ reflect: true })\n  readonly mode?: 'accordion' | 'multi' = 'accordion';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted on toggle (header click or programmatic change)\n   */\n  @Event()\n  itemToggle: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region STATE\n\n  /**\n   * Internal state for open/close rendering\n   */\n  @State()\n  currentOpenState: boolean = false;\n\n  /**\n   * Controls if the panel has been initialized for animations\n   */\n  @State()\n  isInitialized: boolean = false;\n\n  /**\n   * Animation in progress\n   */\n  @State()\n  isAnimating: boolean = false;\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async onOpenChanged(newValue: boolean, oldValue: boolean) {\n    if (this.disabled) {\n      console.warn('[onOpenChanged] Item is disabled, forcing closed state');\n      this.currentOpenState = false;\n      this.open = false;\n      return;\n    }\n\n    this.currentOpenState = newValue;\n\n    const isInitialRender = oldValue === undefined;\n    if (!isInitialRender) {\n      if (newValue === false && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      } else if (newValue && !this.isToggling) {\n        this.itemToggle.emit(newValue);\n      }\n      await this.updateVisibility(newValue);\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region ANIMATIONS\n\n  /**\n   * Updates the visibility state with Nova animation system\n   * @param {boolean} open - Whether the accordion item should be open\n   */\n  private async updateVisibility(open: boolean) {\n    if (!this.contentRef) {\n      console.error('[updateVisibility] No contentRef available');\n      return;\n    }\n\n    this.isAnimating = true;\n\n    const { collapse, expand } = useCollapse(this.contentRef, {\n      duration: 200,\n    });\n\n    if (open) {\n      await expand();\n    } else {\n      await collapse();\n    }\n\n    this.isAnimating = false;\n  }\n\n  //#endregion ANIMATIONS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.currentOpenState = this.open;\n  }\n\n  componentDidLoad() {\n    if (this.contentRef) {\n      setTimeout(() => {\n        const { setExpanded, setCollapsed } = useCollapse(this.contentRef!, {\n          duration: 200,\n        });\n\n        if (this.open) {\n          setExpanded();\n          this.currentOpenState = true;\n        } else {\n          setCollapsed();\n          this.currentOpenState = false;\n        }\n        this.isInitialized = true;\n      }, 0);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Toggle open/close (Public API)\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.isAnimating) {\n      this.isToggling = true;\n      const newOpen = !this.open;\n\n      this.open = newOpen;\n      this.itemToggle.emit(newOpen);\n\n      this.isToggling = false;\n    } else {\n      console.warn('[toggle] Ignored toggle (disabled or animating)');\n    }\n  }\n\n  /**\n   * Handler for header click\n   */\n  private handleHeaderClick = () => {\n    this.toggle();\n  };\n\n  /**\n   * Handler for iconbutton click\n   * @param {Event} e - Click event\n   */\n  private handleIconClick = (e: Event) => {\n    e.stopPropagation();\n    this.toggle();\n  };\n\n  /**\n   * Handler for keyboard events on iconbutton\n   * @param {KeyboardEvent} e - Keyboard event\n   */\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) {\n      console.warn('[handleHeaderKeyDown] Ignored (disabled)');\n      return;\n    }\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.toggle();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          this.isToggling = true;\n          this.open = true;\n          this.itemToggle.emit(true);\n          this.isToggling = false;\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) {\n          this.isToggling = true;\n          this.open = false;\n          this.itemToggle.emit(false);\n          this.isToggling = false;\n        }\n        break;\n    }\n  };\n\n  /**\n   * Get the chevron icon name based on open state\n   * @returns {string} The icon name to display in the chevron button\n   */\n  private get chevronIconName(): string {\n    const name = this.open ? 'chevron-top' : 'chevron-down';\n    return name;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={{\n          'nv-accordion-item': true,\n          'is-open': this.currentOpenState,\n          'is-disabled': this.disabled,\n          'is-animating': this.isAnimating,\n        }}\n        role=\"listitem\"\n        aria-expanded={this.currentOpenState ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          class=\"nv-accordion-item__header\"\n          onClick={this.handleHeaderClick}\n          aria-controls=\"content\"\n        >\n          <slot name=\"header\">\n            <div class=\"nv-accordion-item__header-content\">\n              {this.itemTitle && (\n                <span class=\"nv-accordion-item__title\">{this.itemTitle}</span>\n              )}\n              {this.subtitle && (\n                <span class=\"nv-accordion-item__subtitle\">{this.subtitle}</span>\n              )}\n            </div>\n          </slot>\n          <nv-iconbutton\n            emphasis=\"low\"\n            size=\"sm\"\n            shape=\"square\"\n            name={this.chevronIconName}\n            tabindex={this.disabled ? -1 : 0}\n            onClick={this.handleIconClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            aria-controls=\"content\"\n            aria-label={\n              this.currentOpenState ? 'Close the section' : 'Open the section'\n            }\n          ></nv-iconbutton>\n        </div>\n\n        <div\n          id=\"content\"\n          class=\"nv-accordion-item__content\"\n          ref={el => (this.contentRef = el as HTMLDivElement)}\n        >\n          <div class=\"nv-accordion-item__content-inner\">\n            <slot name=\"content\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  // #endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-eb443b26.js → p-1af3591a.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { d as defineCustomElement$1 } from './p-60244646.js';
+import { d as defineCustomElement$1 } from './p-ee8944f3.js';
 
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
@@ -44,7 +44,7 @@ const NvTooltip = /*@__PURE__*/ proxyCustomElement(class NvTooltip extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e0b68e5ade824e2b0f9c5e5cac140349412c919d' }, h("slot", { key: 'd61a58d034818fdba87b4ab17ce903bbb13a47ff' }), h("nv-popover", { key: '408df675045f95adf270025f83285b2e125873c5', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'e4f860f09f5e5ef83b5e704c271781f41a643e59', slot: "content" }, this.message), h("slot", { key: '2e2e4dcae68651d734696e718c59389f712562df', name: "content" }))));
+        return (h(Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
     }
     get el() { return this; }
     static get style() { return NvTooltipStyle0; }
@@ -77,4 +77,4 @@ defineCustomElement();
 
 export { NvTooltip as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-eb443b26.js.map
+//# sourceMappingURL=p-1af3591a.js.map

package/dist/components/{p-eb443b26.js.map → p-1af3591a.js.map}

@@ -1 +1 @@
-{"file":"p-eb443b26.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;;;;;;;;;QAWvB,aAAQ,GAAa,UAAU,CAAC;KAkD1C;;;;IAjCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  user-select: none;\n  &:has([fluid]:not([fluid='false'])) {\n    display: block;\n  }\n}\n\n@mixin tooltip-styles() {\n  background: var(--components-tooltip-background);\n  color: var(--components-tooltip-text);\n  font-weight: var(--font-weight-medium-emphasis);\n  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n  font-size: var(--tooltip-font-size);\n  border-radius: var(--tooltip-radius);\n  border: none;\n  box-shadow:\n    0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n    var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n    0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n    var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n  background: var(--components-tooltip-background);\n  box-shadow: none;\n  border: none;\n}\n\nnv-tooltip {\n  @include root-styles();\n\n  nv-popover > [data-scope='popover'] {\n    @include tooltip-styles();\n\n    [data-scope='arrow'] {\n      @include arrow-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport type { Placement, Strategy } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ reflect: false, mutable: true })\n  triggerElement: Element;\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won't appear.\n   */\n  @Prop({ reflect: true })\n  readonly enterDelay: number = 0;\n\n  /**\n   * Sets the positioning strategy for the tooltip. Options include:\n   * - `absolute`: Positions the tooltip relative to the trigger element\n   *   (default).\n   * - `fixed`: Positions the tooltip relative to the viewport, useful when you\n   *   need the tooltip to break out of overflow hidden containers, it will not\n   *   scroll inside a scroll container due to the fixed positioning.\n   */\n  @Prop({ reflect: true })\n  readonly strategy: Strategy = 'absolute';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n   * element.\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(child => {\n        return child.getAttribute('slot') === null;\n      });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          strategy={this.strategy}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-1af3591a.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4yBAA4yB,CAAC;AACl0B,wBAAe,YAAY;;MCmBd,SAAS;IALtB;;;;;;;;;QAiCW,cAAS,GAAc,QAAQ,CAAC;;;;;;QAQhC,eAAU,GAAW,CAAC,CAAC;;;;;;;;;QAWvB,aAAQ,GAAa,UAAU,CAAC;KAkD1C;;;;IAjCC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,cAAc;YACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC3D,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;aAC5C,CAAC,CAAC;KACN;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,EAEb,mEACE,WAAW,EAAC,OAAO,EACnB,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,0DAAG,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EACpC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACjB,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-tooltip/nv-tooltip.scss?tag=nv-tooltip","src/components/nv-tooltip/nv-tooltip.tsx"],"sourcesContent":["@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n  user-select: none;\n  &:has([fluid]:not([fluid='false'])) {\n    display: block;\n  }\n}\n\n@mixin tooltip-styles() {\n  background: var(--components-tooltip-background);\n  color: var(--components-tooltip-text);\n  font-weight: var(--font-weight-medium-emphasis);\n  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);\n  font-size: var(--tooltip-font-size);\n  border-radius: var(--tooltip-radius);\n  border: none;\n  box-shadow:\n    0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1)\n    var(--shadow-spread-lg-1) var(--shadow-color-opacity-1),\n    0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2)\n    var(--shadow-spread-lg-2) var(--shadow-color-opacity-2);\n}\n\n@mixin arrow-styles() {\n  background: var(--components-tooltip-background);\n  box-shadow: none;\n  border: none;\n}\n\nnv-tooltip {\n  @include root-styles();\n\n  nv-popover > [data-scope='popover'] {\n    @include tooltip-styles();\n\n    [data-scope='arrow'] {\n      @include arrow-styles();\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport type { Placement, Strategy } from '@floating-ui/dom';\n\n/**\n * @slot default - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.\n */\n@Component({\n  tag: 'nv-tooltip',\n  styleUrl: 'nv-tooltip.scss',\n  shadow: false,\n})\nexport class NvTooltip {\n  @Element() el: HTMLNvTooltipElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ reflect: false, mutable: true })\n  triggerElement: Element;\n\n  /**\n   * A string representing the text to be displayed inside the tooltip. This\n   * content is shown when the tooltip is activated by the user, such as on\n   * hover or focus events.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Decides where the tooltip shows up next to the element it’s linked to\n   * (above, below, to the sides). If there isn’t enough room, it will adjust\n   * it's position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Controls how long (in milliseconds) the tooltip waits to show after you\n   * hover over or focus on an element. If you move away before the delay is up,\n   * the tooltip won't appear.\n   */\n  @Prop({ reflect: true })\n  readonly enterDelay: number = 0;\n\n  /**\n   * Sets the positioning strategy for the tooltip. Options include:\n   * - `absolute`: Positions the tooltip relative to the trigger element\n   *   (default).\n   * - `fixed`: Positions the tooltip relative to the viewport, useful when you\n   *   need the tooltip to break out of overflow hidden containers, it will not\n   *   scroll inside a scroll container due to the fixed positioning.\n   */\n  @Prop({ reflect: true })\n  readonly strategy: Strategy = 'absolute';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the tooltip is opened or closed. Bubbles up from the popover\n   * element.\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(child => {\n        return child.getAttribute('slot') === null;\n      });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n\n        <nv-popover\n          triggerMode=\"hover\"\n          hasArrow\n          placement={this.placement}\n          strategy={this.strategy}\n          triggerElement={this.triggerElement}\n          groupName={'tooltip'}\n          enterDelay={this.enterDelay}\n        >\n          <p slot=\"content\">{this.message}</p>\n          <slot name=\"content\"></slot>\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-930caa42.js → p-31e262bd.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-aff3ed68.js';
-import { b as ButtonType } from './p-2277cfc8.js';
-import { d as defineCustomElement$3 } from './p-2de17259.js';
-import { d as defineCustomElement$2 } from './p-e0cd7e3a.js';
+import { b as ButtonType } from './p-51602221.js';
+import { d as defineCustomElement$3 } from './p-95857e4f.js';
+import { d as defineCustomElement$2 } from './p-5d14ba3f.js';
 import { d as defineCustomElement$1 } from './p-fda58a76.js';
 
 const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
@@ -135,4 +135,4 @@ defineCustomElement();
 
 export { NvDialogfooter as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-930caa42.js.map
+//# sourceMappingURL=p-31e262bd.js.map

package/dist/components/{p-930caa42.js.map → p-31e262bd.js.map}

@@ -1 +1 @@
-{"file":"p-930caa42.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,0QAA0Q,CAAC;AACrS,6BAAe,iBAAiB;;MCqBnB,cAAc;IAN3B;;;;;;QASU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,kBAAa,GAAY,KAAK,CAAC;;;;QAM/B,gBAAW,GAAW,EAAE,CAAC;;;;QAMzB,iBAAY,GAAW,EAAE,CAAC;;;;QAM1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,gBAAW,GAAW,QAAQ,CAAC;;;;QAM/B,iBAAY,GAAW,SAAS,CAAC;;;;;;;;QA0ClC,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC,CAAC;;;;;QAMM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KAwEH;;;;IAlEC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;IAED,gBAAgB;;QAEd,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI;kBAC/B,UAAU,CAAC,MAAM;kBACjB,UAAU,CAAC,MAAM,CAAC;KACzB;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,iBACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAE3B,IAAI,CAAC,WAAW,KACf,eACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,GACT,CACH,CACS,CACH,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"sourcesContent":["nv-dialogfooter {\n  display: flex;\n  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n    var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--dialog-footer-gap-y);\n  align-self: stretch;\n}\n","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the dialog can be submitted through the dialog footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  dialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the dialog.\n   */\n  @Event()\n  dialogPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.dialogPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.dialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-31e262bd.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,0QAA0Q,CAAC;AACrS,6BAAe,iBAAiB;;MCqBnB,cAAc;IAN3B;;;;;;QASU,YAAO,GAAG,KAAK,CAAC;;;;;;QASf,aAAQ,GAAY,KAAK,CAAC;;;;;QAO1B,kBAAa,GAAY,KAAK,CAAC;;;;QAM/B,gBAAW,GAAW,EAAE,CAAC;;;;QAMzB,iBAAY,GAAW,EAAE,CAAC;;;;QAM1B,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,gBAAW,GAAW,QAAQ,CAAC;;;;QAM/B,iBAAY,GAAW,SAAS,CAAC;;;;;;;;QA0ClC,kBAAa,GAAG,CAAC,KAAY;YACnC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;SAClC,CAAC;;;;;QAMM,iBAAY,GAAG,CAAC,KAAY;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KAwEH;;;;IAlEC,iBAAiB;;QAEf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI;YACrD,QACE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;gBACnC,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,EACvC;SACH,CAAC,CAAC;KACJ;IAED,gBAAgB;;QAEd,IAAI,CAAC,iBAAiB;YACpB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI;kBAC/B,UAAU,CAAC,MAAM;kBACjB,UAAU,CAAC,MAAM,CAAC;KACzB;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,CAAC,IAAI,CAAC,OAAO,IACZ,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,KAClB,iBAAW,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,IAC5D,IAAI,CAAC,WAAW,CACP,CACb,EACD,iBACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAE3B,IAAI,CAAC,WAAW,KACf,eACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAC,IAAI,GACT,CACH,EACA,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,YAAY,KAChB,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,IAAI,EAAC,IAAI,GACT,CACH,CACS,CACH,KAEX,eAAa,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/nv-dialogfooter/nv-dialogfooter.scss?tag=nv-dialogfooter","src/components/nv-dialogfooter/nv-dialogfooter.tsx"],"sourcesContent":["nv-dialogfooter {\n  display: flex;\n  padding: var(--dialog-footer-padding-top) var(--dialog-footer-padding-x)\n    var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--dialog-footer-gap-y);\n  align-self: stretch;\n}\n","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-dialogfooter',\n  styleUrl: 'nv-dialogfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDialogfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDialogfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon: string = '';\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon: string = '';\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the dialog can be submitted through the dialog footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the dialog.\n   */\n  @Event()\n  dialogCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the dialog.\n   */\n  @Event()\n  dialogPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.dialogPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the dialog.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.dialogCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-e5dff125.js → p-3763c9c4.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { u as useCollapse } from './p-31591941.js';
-import { u as useFade } from './p-ee0df37f.js';
+import { u as useCollapse } from './p-3cd7a66f.js';
+import { u as useFade } from './p-a271e3be.js';
 import './p-42ea6b74.js';
 import { t as timeline } from './p-a52cd849.js';
-import { d as defineCustomElement$1 } from './p-e0cd7e3a.js';
+import { d as defineCustomElement$1 } from './p-5d14ba3f.js';
 
 const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.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-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge:not(.with-gap).is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge.badge-error{color:var(--color-feedback-error-low-text);background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border)}nv-badge.badge-error .close:focus,nv-badge.badge-error .close:focus-within{outline:none}nv-badge.badge-error .close:focus-visible,nv-badge.badge-error .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-badge.badge-information{color:var(--color-feedback-information-low-text);background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border)}nv-badge.badge-information .close:focus,nv-badge.badge-information .close:focus-within{outline:none}nv-badge.badge-information .close:focus-visible,nv-badge.badge-information .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-badge.badge-neutral{color:var(--color-feedback-neutral-low-text);background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border)}nv-badge.badge-neutral .close:focus,nv-badge.badge-neutral .close:focus-within{outline:none}nv-badge.badge-neutral .close:focus-visible,nv-badge.badge-neutral .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-badge.badge-success{color:var(--color-feedback-success-low-text);background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border)}nv-badge.badge-success .close:focus,nv-badge.badge-success .close:focus-within{outline:none}nv-badge.badge-success .close:focus-visible,nv-badge.badge-success .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-badge.badge-warning{color:var(--color-feedback-warning-low-text);background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border)}nv-badge.badge-warning .close:focus,nv-badge.badge-warning .close:focus-within{outline:none}nv-badge.badge-warning .close:focus-visible,nv-badge.badge-warning .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-badge.badge-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-amber .close:focus,nv-badge.badge-amber .close:focus-within{outline:none}nv-badge.badge-amber .close:focus-visible,nv-badge.badge-amber .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-orange .close:focus,nv-badge.badge-orange .close:focus-within{outline:none}nv-badge.badge-orange .close:focus-visible,nv-badge.badge-orange .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-turquoise .close:focus,nv-badge.badge-turquoise .close:focus-within{outline:none}nv-badge.badge-turquoise .close:focus-visible,nv-badge.badge-turquoise .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-crimson .close:focus,nv-badge.badge-crimson .close:focus-within{outline:none}nv-badge.badge-crimson .close:focus-visible,nv-badge.badge-crimson .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-lime .close:focus,nv-badge.badge-lime .close:focus-within{outline:none}nv-badge.badge-lime .close:focus-visible,nv-badge.badge-lime .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-petrol{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-petrol .close:focus,nv-badge.badge-petrol .close:focus-within{outline:none}nv-badge.badge-petrol .close:focus-visible,nv-badge.badge-petrol .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-petrol nv-icon{color:var(--color-rainbow-8-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important;text-align:center}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
 const NvBadgeStyle0 = nvBadgeCss;
@@ -98,8 +98,8 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
         this.hiddenChanged.emit(hidden);
         if (this._isHidden === true)
             this._isHidden = hidden;
-        const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
-        const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
+        const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });
+        const { collapse, expand } = useCollapse(this.el, { duration: 150 });
         if (hidden === true)
             await timeline(fadeOut, collapse).start();
         if (hidden === false)
@@ -123,8 +123,8 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
         }
         if (this.hidden) {
             this._isHidden = true;
-            const { setCollapsed } = useCollapse(this.ref);
-            const { setFadeOut } = useFade(this.ref);
+            const { setCollapsed } = useCollapse(this.el);
+            const { setFadeOut } = useFade(this.el);
             setCollapsed();
             setFadeOut();
         }
@@ -133,14 +133,14 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '0e8a142c25a7cb078e8b953794f199135c11b616', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
                 'is-icon-only': this.isIconOnly,
-            }) }, h("slot", { key: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), h("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (h("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: 'a3862245400e63270443b78f21dad3571eb08e5b', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: '46b69a8544e01ff2f738a050cb2502528fa42b04', name: this.leadIcon, size: "sm" })), h("span", { key: '8b17eeb60dee162baa98c14ccd4d5aa52c01fffc', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: 'e7bad18f496e001acbdae89b93b8e614f4fcc914' })), this.dismissible && (h("button", { key: '66cdb2c94b7832ea8cd4612326e6399a9ea77bb7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '399de04fb2fc7d5391c9ebf39e953b12e21fb219', name: "x", size: "sm" })))));
     }
-    get ref() { return this; }
+    get el() { return this; }
     static get watchers() { return {
         "dismissal": ["handleDismissalChange"],
         "icon": ["handleIconChange"],
@@ -186,4 +186,4 @@ defineCustomElement();
 
 export { NvBadge as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-e5dff125.js.map
+//# sourceMappingURL=p-3763c9c4.js.map

package/dist/components/{p-e5dff125.js.map → p-3763c9c4.js.map}

@@ -1 +1 @@
-{"file":"p-e5dff125.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.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"],"version":3}
+{"file":"p-3763c9c4.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.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() el: 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.el, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.el, { 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.el);\n      const { setFadeOut } = useFade(this.el);\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"],"version":3}

package/dist/components/{p-31591941.js → p-3cd7a66f.js}

@@ -162,10 +162,13 @@ const useCollapse = (node, { duration = 200, overflow = 'hidden' } = {}) => {
      * Expand: animate from 0 box to the element's natural box (height + margins),
      * then restore `height: auto` and computed margins.
      */
-    function expand() {
+    async function expand() {
         stop();
+        // Make sure any pending screen updates are done
+        await new Promise(resolve => requestAnimationFrame(resolve));
         return new Promise(resolve => {
             // Let the element size naturally to measure the target box
+            // await next animation frame
             setStyle({
                 height: '',
                 marginTop: '',
@@ -213,4 +216,4 @@ const useCollapse = (node, { duration = 200, overflow = 'hidden' } = {}) => {
 
 export { useCollapse as u };
 
-//# sourceMappingURL=p-31591941.js.map
+//# sourceMappingURL=p-3cd7a66f.js.map

package/dist/components/p-3cd7a66f.js.map

@@ -0,0 +1 @@
+{"file":"p-3cd7a66f.js","mappings":"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","names":[],"sources":["../../node_modules/popmotion/dist/es/easing/cubic-bezier.mjs","src/animations/collapse.animation.ts"],"sourcesContent":["import { linear } from './index.mjs';\n\nconst a = (a1, a2) => 1.0 - 3.0 * a2 + 3.0 * a1;\nconst b = (a1, a2) => 3.0 * a2 - 6.0 * a1;\nconst c = (a1) => 3.0 * a1;\nconst calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;\nconst getSlope = (t, a1, a2) => 3.0 * a(a1, a2) * t * t + 2.0 * b(a1, a2) * t + c(a1);\nconst subdivisionPrecision = 0.0000001;\nconst subdivisionMaxIterations = 10;\nfunction binarySubdivide(aX, aA, aB, mX1, mX2) {\n    let currentX;\n    let currentT;\n    let i = 0;\n    do {\n        currentT = aA + (aB - aA) / 2.0;\n        currentX = calcBezier(currentT, mX1, mX2) - aX;\n        if (currentX > 0.0) {\n            aB = currentT;\n        }\n        else {\n            aA = currentT;\n        }\n    } while (Math.abs(currentX) > subdivisionPrecision &&\n        ++i < subdivisionMaxIterations);\n    return currentT;\n}\nconst newtonIterations = 8;\nconst newtonMinSlope = 0.001;\nfunction newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\n    for (let i = 0; i < newtonIterations; ++i) {\n        const currentSlope = getSlope(aGuessT, mX1, mX2);\n        if (currentSlope === 0.0) {\n            return aGuessT;\n        }\n        const currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n        aGuessT -= currentX / currentSlope;\n    }\n    return aGuessT;\n}\nconst kSplineTableSize = 11;\nconst kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n    if (mX1 === mY1 && mX2 === mY2)\n        return linear;\n    const sampleValues = new Float32Array(kSplineTableSize);\n    for (let i = 0; i < kSplineTableSize; ++i) {\n        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\n    }\n    function getTForX(aX) {\n        let intervalStart = 0.0;\n        let currentSample = 1;\n        const lastSample = kSplineTableSize - 1;\n        for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\n            intervalStart += kSampleStepSize;\n        }\n        --currentSample;\n        const dist = (aX - sampleValues[currentSample]) /\n            (sampleValues[currentSample + 1] - sampleValues[currentSample]);\n        const guessForT = intervalStart + dist * kSampleStepSize;\n        const initialSlope = getSlope(guessForT, mX1, mX2);\n        if (initialSlope >= newtonMinSlope) {\n            return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\n        }\n        else if (initialSlope === 0.0) {\n            return guessForT;\n        }\n        else {\n            return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\n        }\n    }\n    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);\n}\n\nexport { cubicBezier };\n","import { animate, cubicBezier } from 'popmotion';\n\nexport type CollapseOptions = {\n  /**\n   * Duration of the expand/collapse animation in milliseconds.\n   * @default 200\n   */\n  duration?: number;\n\n  /**\n   * Set the overflow state while animating.\n   * @default \"hidden\"\n   */\n  overflow?: 'hidden' | 'visible';\n};\n\n/**\n * Read current box metrics (height + vertical margins).\n * @param {HTMLElement} node - The element to measure.\n * @returns {object} The box metrics.\n */\nfunction getBoxMetrics(node: HTMLElement) {\n  const rectHeight = node.getBoundingClientRect().height;\n  const style = getComputedStyle(node);\n  const marginTop = parseFloat(style.marginTop) || 0;\n  const marginBottom = parseFloat(style.marginBottom) || 0;\n  const total = rectHeight + marginTop + marginBottom;\n  return { height: rectHeight, marginTop, marginBottom, total };\n}\n\nconst useCollapse = (\n  node: HTMLElement,\n  { duration = 200, overflow = 'hidden' }: CollapseOptions = {},\n) => {\n  let currentAnimation: ReturnType<typeof animate> | null = null;\n\n  const stop = () => {\n    if (currentAnimation) {\n      currentAnimation.stop();\n      currentAnimation = null;\n    }\n  };\n\n  const setStyle = (styles: Partial<CSSStyleDeclaration>) => {\n    for (const [k, v] of Object.entries(styles)) {\n      node.style[k] = v as string;\n    }\n  };\n\n  /** Instantly apply collapsed styles (no animation). */\n  function setCollapsed() {\n    stop();\n    setStyle({\n      height: '0px',\n      marginTop: '0px',\n      marginBottom: '0px',\n      overflow,\n    });\n  }\n\n  /** Instantly apply expanded styles (no animation). */\n  function setExpanded() {\n    stop();\n    setStyle({\n      height: '',\n      marginTop: '',\n      marginBottom: '',\n      overflow: '',\n    });\n  }\n\n  /**\n   * Collapse: animate from current box (height + margins) down to 0.\n   */\n  function collapse() {\n    stop();\n    return new Promise<void>(resolve => {\n      const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n      // Lock current box\n      setStyle({\n        height: `${height}px`,\n        marginTop: `${marginTop}px`,\n        marginBottom: `${marginBottom}px`,\n        overflow,\n        willChange: 'height, margin',\n      });\n\n      const denom = total > 0 ? total : 0.0001; // avoid divide-by-zero\n\n      currentAnimation = animate({\n        from: total,\n        to: 0,\n        duration,\n        ease: cubicBezier(0.2, 0, 0, 1),\n        onUpdate: v => {\n          const ratio = v / denom;\n          setStyle({\n            height: `${height * ratio}px`,\n            marginTop: `${marginTop * ratio}px`,\n            marginBottom: `${marginBottom * ratio}px`,\n          });\n        },\n        onComplete: () => {\n          setStyle({\n            height: '0px',\n            marginTop: '0px',\n            marginBottom: '0px',\n            willChange: '',\n          });\n          resolve();\n        },\n      });\n    });\n  }\n\n  /**\n   * Expand: animate from 0 box to the element's natural box (height + margins),\n   * then restore `height: auto` and computed margins.\n   */\n  async function expand() {\n    stop();\n    // Make sure any pending screen updates are done\n    await new Promise(resolve => requestAnimationFrame(resolve));\n\n    return new Promise<void>(resolve => {\n      // Let the element size naturally to measure the target box\n      // await next animation frame\n      setStyle({\n        height: '',\n        marginTop: '',\n        marginBottom: '',\n        overflow,\n      });\n      const { height, marginTop, marginBottom, total } = getBoxMetrics(node);\n\n      // Start locked at zero box\n      setStyle({\n        height: '0px',\n        marginTop: '0px',\n        marginBottom: '0px',\n        willChange: 'height, margin',\n      });\n\n      const denom = total > 0 ? total : 0.0001;\n\n      currentAnimation = animate({\n        from: 0,\n        to: total,\n        duration,\n        ease: cubicBezier(0.2, 0, 0, 1),\n        onUpdate: v => {\n          const ratio = v / denom;\n          setStyle({\n            height: `${height * ratio}px`,\n            marginTop: `${marginTop * ratio}px`,\n            marginBottom: `${marginBottom * ratio}px`,\n          });\n        },\n        onComplete: () => {\n          // Restore natural layout\n          setStyle({\n            height: '',\n            marginTop: '',\n            marginBottom: '',\n            overflow: '',\n            willChange: '',\n          });\n          resolve();\n        },\n      });\n    });\n  }\n\n  return { collapse, expand, setCollapsed, setExpanded };\n};\n\nexport { useCollapse };\n"],"version":3}

package/dist/components/{p-fb560fa3.js → p-4697bd56.js}

@@ -1,4 +1,4 @@
-import { i as index } from './p-ee0df37f.js';
+import { i as index } from './p-a271e3be.js';
 import { a as animate } from './p-42ea6b74.js';
 
 const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
@@ -87,4 +87,4 @@ const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) =>
 
 export { useGrow as u };
 
-//# sourceMappingURL=p-fb560fa3.js.map
+//# sourceMappingURL=p-4697bd56.js.map

package/dist/components/{p-fb560fa3.js.map → p-4697bd56.js.map}

@@ -1 +1 @@
-{"file":"p-fb560fa3.js","mappings":";;;MAYM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,IAAI,KAAkB,EAAE;IAElE,MAAM,UAAU,GAAGA,KAAM,CAAC,IAAI,CAAC,CAAC;;;;;IAMhC,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjD,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC5B,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE;wBACX,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;qBACrC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;iBACzB;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,OAAO,EAAE;wBACX,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;qBACtC;oBACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;iBACxC;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,MAAM,GAAG,CAAC;QAC1C,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;SAC1B;KACF;;;;;IAMD,SAAS,SAAS;QAChB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC;QAClC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;SAC1B;KACF;;;;;IAMD,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC9B,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBAC/C,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE;wBACX,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;qBACrC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;iBACzB;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ;;;;","names":["styler"],"sources":["src/animations/grow.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type GrowOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n  /** The amount to scale the element by @default 0.8 */\n  amount?: number;\n  /** Whether to include a fade effect in the animation @default true */\n  hasFade?: boolean;\n};\n\nconst useGrow = (\n  node: HTMLElement,\n  { duration = 200, amount = 0.8, hasFade = true }: GrowOptions = {},\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element grow and fade in,\n   * and removes the scale and opacity style attributes once complete.\n   */\n  function growIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: hasFade ? 0 : 1, scale: amount },\n        to: { opacity: 1, scale: 1 },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n          if (hasFade) {\n            node.style.removeProperty('opacity');\n          }\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the growOut styles without animating, useful when the initial\n   * state is hidden.\n   */\n  function setGrowOut() {\n    node.style.transform = `scale(${amount})`;\n    if (hasFade) {\n      node.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Applies the growIn styles without animating, useful when the initial\n   * state is visible.\n   */\n  function setGrowIn() {\n    node.style.transform = `scale(1)`;\n    if (hasFade) {\n      node.style.opacity = '1';\n    }\n  }\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element shrink and fade out,\n   * leaving the scale and opacity styles on the element.\n   */\n  function growOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1, scale: 1 },\n        to: { opacity: hasFade ? 0 : 1, scale: amount },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    growIn,\n    growOut,\n    setGrowOut,\n    setGrowIn,\n  };\n};\n\nexport { useGrow };\n"],"version":3}
+{"file":"p-4697bd56.js","mappings":";;;MAYM,OAAO,GAAG,CACd,IAAiB,EACjB,EAAE,QAAQ,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,IAAI,KAAkB,EAAE;IAElE,MAAM,UAAU,GAAGA,KAAM,CAAC,IAAI,CAAC,CAAC;;;;;IAMhC,SAAS,MAAM;QACb,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjD,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC5B,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE;wBACX,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;qBACrC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;iBACzB;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;oBACV,IAAI,OAAO,EAAE;wBACX,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;qBACtC;oBACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;iBACxC;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;IAMD,SAAS,UAAU;QACjB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,MAAM,GAAG,CAAC;QAC1C,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;SAC1B;KACF;;;;;IAMD,SAAS,SAAS;QAChB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC;QAClC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;SAC1B;KACF;;;;;IAMD,SAAS,OAAO;QACd,OAAO,IAAI,OAAO,CAAO,OAAO;YAC9B,OAAO,CAAC;gBACN,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gBAC9B,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;gBAC/C,QAAQ;gBACR,QAAQ,CAAC,MAAM;oBACb,MAAM,OAAO,GAAG;wBACd,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAC;oBACF,IAAI,OAAO,EAAE;wBACX,OAAO,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC;qBACrC;oBACD,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;iBACzB;gBACD,UAAU;oBACR,OAAO,EAAE,CAAC;iBACX;aACF,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;IAED,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,SAAS;KACV,CAAC;AACJ;;;;","names":["styler"],"sources":["src/animations/grow.animation.ts"],"sourcesContent":["import { animate } from 'popmotion';\nimport styler from 'stylefire';\n\nexport type GrowOptions = {\n  /** How long the animation should take in ms @default 200 */\n  duration?: number;\n  /** The amount to scale the element by @default 0.8 */\n  amount?: number;\n  /** Whether to include a fade effect in the animation @default true */\n  hasFade?: boolean;\n};\n\nconst useGrow = (\n  node: HTMLElement,\n  { duration = 200, amount = 0.8, hasFade = true }: GrowOptions = {},\n) => {\n  const nodeStyler = styler(node);\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element grow and fade in,\n   * and removes the scale and opacity style attributes once complete.\n   */\n  function growIn() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: hasFade ? 0 : 1, scale: amount },\n        to: { opacity: 1, scale: 1 },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n          if (hasFade) {\n            node.style.removeProperty('opacity');\n          }\n          node.style.removeProperty('transform');\n        },\n      });\n    });\n  }\n\n  /**\n   * Applies the growOut styles without animating, useful when the initial\n   * state is hidden.\n   */\n  function setGrowOut() {\n    node.style.transform = `scale(${amount})`;\n    if (hasFade) {\n      node.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Applies the growIn styles without animating, useful when the initial\n   * state is visible.\n   */\n  function setGrowIn() {\n    node.style.transform = `scale(1)`;\n    if (hasFade) {\n      node.style.opacity = '1';\n    }\n  }\n\n  /**\n   * Will animate the scale and optionally the opacity to make the element shrink and fade out,\n   * leaving the scale and opacity styles on the element.\n   */\n  function growOut() {\n    return new Promise<void>(resolve => {\n      animate({\n        from: { opacity: 1, scale: 1 },\n        to: { opacity: hasFade ? 0 : 1, scale: amount },\n        duration,\n        onUpdate(latest) {\n          const updates = {\n            scale: latest.scale,\n          };\n          if (hasFade) {\n            updates['opacity'] = latest.opacity;\n          }\n          nodeStyler.set(updates);\n        },\n        onComplete() {\n          resolve();\n        },\n      });\n    });\n  }\n\n  return {\n    growIn,\n    growOut,\n    setGrowOut,\n    setGrowIn,\n  };\n};\n\nexport { useGrow };\n"],"version":3}