@nova-design-system/nova-webcomponents 3.0.0-beta.37 → 3.0.0-beta.39

package/dist/cjs/nv-row.cjs.entry.js

@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '6170377f7ce5502f59386f9fe6d4f5dd2b3beb0c' }, index.h("slot", { key: 'b7521e1bf517a597954fc424f2f0aa35b891ecc8' })));
+        return (index.h(index.Host, { key: '2c3b123ef4d7b9f5ad8dbf6aea7e28f193814f35' }, index.h("slot", { key: '56fa851396d284c9c38c6d05d6bafa8123e97416' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/nv-stack.cjs.entry.js

@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'a7ee9fd83a763271859de36013ab35d4f201f19f', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '93fa03fe36ffd86a7501f32cbb7869086fbcf686' })));
+        return (index.h(index.Host, { key: '4bccce6f6bebe0998262e7642a0c2f7abe9a1d16', class: clsx.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '63e31c94c88baaaaada221e1682d128f4edfa76c' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/nv-table.cjs.entry.js

@@ -127,7 +127,7 @@ const NvTable = class {
                 .querySelector('[slot="body"]')
                 .querySelectorAll('nv-tablerow'))
             : [];
-        return (index.h(index.Host, { key: 'd6a4501a88dbbb8154092051e50a981bec0167ef' }, index.h("div", { key: 'd7528316b469425004dafadf7c3e23bcfc21d88d', class: "hidden" }, index.h("slot", { key: '1a8204ea1f65d2dcd8cd98b6a4fd95b916998e0d' }), index.h("slot", { key: '6643f2f3343d513319a24c242ba541d95b81082a', name: "head" }), index.h("slot", { key: '45949baaebd97dd66b6d5b602baa41f5926643c0', name: "body" })), index.h("slot", { key: '4633c9f41ccfba69538460c18178defccac05cbe', name: "before" }), this.parsedColumns.length === 0 &&
+        return (index.h(index.Host, { key: 'b445be90862bb95df560d26215d0a175b2c5f02d' }, index.h("div", { key: 'fc50c87d2b4e9d233bc90ef16c9c6701fbca0467', class: "hidden" }, index.h("slot", { key: '03429a816585ffa3e36066bfd06d2d320714b9b5' }), index.h("slot", { key: '06d30f5c55e34f0be4212c3153874475fc93be2c', name: "head" }), index.h("slot", { key: '64d73c406a6d72187ab0cb7434ed8c5894564076', name: "body" })), index.h("slot", { key: '038d7e7f5fd6125b101c286558e61afb3b493d88', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             headerRows.length === 0 &&
             bodyRows.length === 0 ? (index.h("p", null, this.noColumnsNoDataMessage)) : (index.h("table", null, this.parsedColumns.length > 0 ? (index.h("thead", null, index.h("tr", null, this.parsedColumns.map(column => (index.h("th", null, column)))))) : headerRows.length > 0 ? (index.h("thead", null, headerRows.map(row => {
@@ -138,7 +138,7 @@ const NvTable = class {
             : Object.values(row).map(value => index.h("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
             const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
             return (index.h("tr", null, cells.map(cell => (index.h("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), index.h("slot", { key: '3947711bb7495a5c259d2324cc97a22ee4c2d673', name: "after" })));
+        })) : null))), index.h("slot", { key: 'd24abb3236e2d1019d2316da1d1cc2f19d33902b', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-table.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nv-table.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["nv-table {\n  table {\n    border-collapse: collapse;\n    border-color: inherit;\n    text-indent: 0;\n  }\n}\n\n// https://tailwindcss.com/docs/table-layout\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n */\n@Component({\n  tag: 'nv-table',\n  styleUrl: './nv-table.scss',\n  shadow: false,\n})\nexport class NvTable {\n  @Element() el: HTMLNvTableElement;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  parsedColumns: string[] = []; // Parsed array of column headers\n\n  @State()\n  parsedData: any[] = []; // Parsed array of data rows\n\n  @State()\n  hasSlotHead: boolean = false;\n\n  @State()\n  hasSlotBody: boolean = false;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the table columns.\n   * @example ['Name', 'Age', 'Email']\n   * @default []\n   */\n  @Prop()\n  readonly columns: string[] = [];\n\n  /**\n   * Defines the table columns.\n   * It can be passed directly as an array of strings or as a JSON string.\n   * @example '[\"Name\", \"Age\", \"Email\"]'\n   */\n  @Prop({ reflect: true })\n  readonly columnsJson?: string;\n\n  /**\n   * Defines the table data.\n   * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n   * @default []\n   */\n  @Prop()\n  readonly data: any[] = [];\n\n  /**\n   * Defines the table data.\n   * It can be passed directly as an array of objects or as a JSON string.\n   * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n   */\n  @Prop({ reflect: true })\n  readonly dataJson?: string;\n\n  /**\n   * The message to display when there is no data available.\n   * @default 'No data available'\n   */\n  @Prop()\n  readonly noDataMessage: string = 'No data available';\n\n  /**\n   * The message to display when there are no columns or data available.\n   * @default 'No data or columns available to display.'\n   */\n  @Prop()\n  readonly noColumnsNoDataMessage: string =\n    'No data or columns available to display.';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('columns')\n  parseColumns(newValue: string[], oldValue: string[]) {\n    this.parseColumnsArray(newValue, oldValue);\n  }\n\n  @Watch('columnsJson')\n  parseJsonColumns(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseColumnsArray(newItems, this.parsedColumns);\n    } catch (e) {\n      console.error('Invalid JSON format for columnsJson:', e.message);\n      this.parsedColumns = [];\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: any[], oldValue: any[]) {\n    this.parseDataArray(newValue, oldValue);\n  }\n\n  @Watch('dataJson')\n  parseJsonData(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseDataArray(newItems, this.parsedData);\n    } catch (e) {\n      console.error('Invalid JSON format for dataJson:', e.message);\n      this.parsedData = [];\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Parses the columns array.\n   * @param {string[]} newValue - The new value of the columns array.\n   * @param {string[]} oldValue - The old value of the columns array.\n   */\n  private parseColumnsArray(newValue: string[], oldValue: string[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n  }\n\n  /**\n   * Parses the data array.\n   * @param {any[]} newValue - The new value of the data array.\n   * @param {any[]} oldValue - The old value of the data array.\n   */\n  private parseDataArray(newValue: any[], oldValue: any[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedData = Array.isArray(newValue) ? newValue : [];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n    this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n    if (this.columnsJson) {\n      this.parseJsonColumns(this.columnsJson);\n    } else {\n      this.parseColumns(this.columns, this.parsedColumns);\n    }\n\n    if (this.dataJson) {\n      this.parseJsonData(this.dataJson);\n    } else {\n      this.parseData(this.data, this.parsedData);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const headerRows = this.hasSlotHead\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"head\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n    const bodyRows = this.hasSlotBody\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"body\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n\n    return (\n      <Host>\n        <div class=\"hidden\">\n          <slot></slot>\n          <slot name=\"head\"></slot>\n          <slot name=\"body\"></slot>\n        </div>\n\n        <slot name=\"before\"></slot>\n\n        {this.parsedColumns.length === 0 &&\n        this.parsedData.length === 0 &&\n        headerRows.length === 0 &&\n        bodyRows.length === 0 ? (\n          <p>{this.noColumnsNoDataMessage}</p>\n        ) : (\n          <table>\n            {this.parsedColumns.length > 0 ? (\n              <thead>\n                <tr>\n                  {this.parsedColumns.map(column => (\n                    <th>{column}</th>\n                  ))}\n                </tr>\n              </thead>\n            ) : headerRows.length > 0 ? (\n              <thead>\n                {headerRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tablecolumn'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <th\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          scope={cell.scope}\n                          innerHTML={cell.innerHTML}\n                        ></th>\n                      ))}\n                    </tr>\n                  );\n                })}\n              </thead>\n            ) : null}\n\n            <tbody>\n              {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n                <tr>\n                  <td colSpan={this.parsedColumns.length || 12}>\n                    {this.noDataMessage}\n                  </td>\n                </tr>\n              ) : this.parsedData.length > 0 ? (\n                this.parsedData.map(row => (\n                  <tr>\n                    {this.parsedColumns.length > 0\n                      ? this.parsedColumns.map(column => (\n                          <td>{row[column.toLowerCase()] || ''}</td>\n                        ))\n                      : Object.values(row).map(value => <td>{value}</td>)}\n                  </tr>\n                ))\n              ) : bodyRows.length > 0 ? (\n                bodyRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tabledatacell'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <td\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          innerHTML={cell.innerHTML}\n                        ></td>\n                      ))}\n                    </tr>\n                  );\n                })\n              ) : null}\n            </tbody>\n          </table>\n        )}\n\n        <slot name=\"after\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}
+{"file":"nv-table.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-table/nv-table.scss?tag=nv-table","src/components/nv-table/nv-table.tsx"],"sourcesContent":["nv-table {\n  table {\n    border-collapse: collapse;\n    border-color: inherit;\n    text-indent: 0;\n  }\n}\n\n// https://tailwindcss.com/docs/table-layout\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @slot default - Use this slot to insert HTML into the table content.\n * @slot head - Use this slot to insert HTML into the table header.\n * @slot before - Use this slot to insert HTML before the table.\n * @slot after - Use this slot to insert HTML after the table.\n * @slot body - Use this slot to insert HTML into the table body.\n *\n * @deprecated [EXPERIMENTAL]\n * @experimental - This component is still under development and is not ready for use.\n */\n@Component({\n  tag: 'nv-table',\n  styleUrl: './nv-table.scss',\n  shadow: false,\n})\nexport class NvTable {\n  @Element() el: HTMLNvTableElement;\n\n  /****************************************************************************/\n  //#region STATES\n\n  @State()\n  parsedColumns: string[] = []; // Parsed array of column headers\n\n  @State()\n  parsedData: any[] = []; // Parsed array of data rows\n\n  @State()\n  hasSlotHead: boolean = false;\n\n  @State()\n  hasSlotBody: boolean = false;\n\n  //#endregion STATES\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Defines the table columns.\n   * @example ['Name', 'Age', 'Email']\n   * @default []\n   */\n  @Prop()\n  readonly columns: string[] = [];\n\n  /**\n   * Defines the table columns.\n   * It can be passed directly as an array of strings or as a JSON string.\n   * @example '[\"Name\", \"Age\", \"Email\"]'\n   */\n  @Prop({ reflect: true })\n  readonly columnsJson?: string;\n\n  /**\n   * Defines the table data.\n   * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]\n   * @default []\n   */\n  @Prop()\n  readonly data: any[] = [];\n\n  /**\n   * Defines the table data.\n   * It can be passed directly as an array of objects or as a JSON string.\n   * @example '[{ \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },{ \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }]'\n   */\n  @Prop({ reflect: true })\n  readonly dataJson?: string;\n\n  /**\n   * The message to display when there is no data available.\n   * @default 'No data available'\n   */\n  @Prop()\n  readonly noDataMessage: string = 'No data available';\n\n  /**\n   * The message to display when there are no columns or data available.\n   * @default 'No data or columns available to display.'\n   */\n  @Prop()\n  readonly noColumnsNoDataMessage: string =\n    'No data or columns available to display.';\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('columns')\n  parseColumns(newValue: string[], oldValue: string[]) {\n    this.parseColumnsArray(newValue, oldValue);\n  }\n\n  @Watch('columnsJson')\n  parseJsonColumns(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseColumnsArray(newItems, this.parsedColumns);\n    } catch (e) {\n      console.error('Invalid JSON format for columnsJson:', e.message);\n      this.parsedColumns = [];\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: any[], oldValue: any[]) {\n    this.parseDataArray(newValue, oldValue);\n  }\n\n  @Watch('dataJson')\n  parseJsonData(newValue: string | undefined) {\n    try {\n      const newItems = newValue ? JSON.parse(newValue) : [];\n\n      this.parseDataArray(newItems, this.parsedData);\n    } catch (e) {\n      console.error('Invalid JSON format for dataJson:', e.message);\n      this.parsedData = [];\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Parses the columns array.\n   * @param {string[]} newValue - The new value of the columns array.\n   * @param {string[]} oldValue - The old value of the columns array.\n   */\n  private parseColumnsArray(newValue: string[], oldValue: string[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedColumns = Array.isArray(newValue) ? newValue : [];\n  }\n\n  /**\n   * Parses the data array.\n   * @param {any[]} newValue - The new value of the data array.\n   * @param {any[]} oldValue - The old value of the data array.\n   */\n  private parseDataArray(newValue: any[], oldValue: any[]) {\n    if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return; // Deep comparison\n    this.parsedData = Array.isArray(newValue) ? newValue : [];\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.hasSlotHead = !!this.el.querySelector('[slot=\"head\"]');\n    this.hasSlotBody = !!this.el.querySelector('[slot=\"body\"]');\n\n    if (this.columnsJson) {\n      this.parseJsonColumns(this.columnsJson);\n    } else {\n      this.parseColumns(this.columns, this.parsedColumns);\n    }\n\n    if (this.dataJson) {\n      this.parseJsonData(this.dataJson);\n    } else {\n      this.parseData(this.data, this.parsedData);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const headerRows = this.hasSlotHead\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"head\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n    const bodyRows = this.hasSlotBody\n      ? Array.from(\n          this.el\n            .querySelector('[slot=\"body\"]')\n            .querySelectorAll('nv-tablerow'),\n        )\n      : [];\n\n    return (\n      <Host>\n        <div class=\"hidden\">\n          <slot></slot>\n          <slot name=\"head\"></slot>\n          <slot name=\"body\"></slot>\n        </div>\n\n        <slot name=\"before\"></slot>\n\n        {this.parsedColumns.length === 0 &&\n        this.parsedData.length === 0 &&\n        headerRows.length === 0 &&\n        bodyRows.length === 0 ? (\n          <p>{this.noColumnsNoDataMessage}</p>\n        ) : (\n          <table>\n            {this.parsedColumns.length > 0 ? (\n              <thead>\n                <tr>\n                  {this.parsedColumns.map(column => (\n                    <th>{column}</th>\n                  ))}\n                </tr>\n              </thead>\n            ) : headerRows.length > 0 ? (\n              <thead>\n                {headerRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tablecolumn'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <th\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          scope={cell.scope}\n                          innerHTML={cell.innerHTML}\n                        ></th>\n                      ))}\n                    </tr>\n                  );\n                })}\n              </thead>\n            ) : null}\n\n            <tbody>\n              {this.parsedData.length === 0 && bodyRows.length === 0 ? (\n                <tr>\n                  <td colSpan={this.parsedColumns.length || 12}>\n                    {this.noDataMessage}\n                  </td>\n                </tr>\n              ) : this.parsedData.length > 0 ? (\n                this.parsedData.map(row => (\n                  <tr>\n                    {this.parsedColumns.length > 0\n                      ? this.parsedColumns.map(column => (\n                          <td>{row[column.toLowerCase()] || ''}</td>\n                        ))\n                      : Object.values(row).map(value => <td>{value}</td>)}\n                  </tr>\n                ))\n              ) : bodyRows.length > 0 ? (\n                bodyRows.map(row => {\n                  const cells = Array.from(\n                    row.querySelectorAll('nv-tabledatacell'),\n                  );\n                  return (\n                    <tr>\n                      {cells.map(cell => (\n                        <td\n                          colSpan={cell.colspan}\n                          rowSpan={cell.rowspan}\n                          headers={cell.headers}\n                          innerHTML={cell.innerHTML}\n                        ></td>\n                      ))}\n                    </tr>\n                  );\n                })\n              ) : null}\n            </tbody>\n          </table>\n        )}\n\n        <slot name=\"after\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"],"version":3}

package/dist/cjs/nv-tablebody.cjs.entry.js

@@ -14,7 +14,7 @@ const NvTablebody = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '3d720789ff593cefb4654979e2ba8da4f4b1cabe' }, index.h("tbody", { key: '665a9d81666f8df896054f63c6a48f8b7c6890e4' }, index.h("slot", { key: '5ee7f08d51cfc69998290a5c78f859716d7656d7' }))));
+        return (index.h(index.Host, { key: 'cdf37e086d4194bdcb941942226d17ba38ec7dc7' }, index.h("tbody", { key: '3a8f72860faed461685b8184aeb274eec59188ba' }, index.h("slot", { key: 'f7450cf4858bc7452e4cb840ac7e06e5848dc75f' }))));
     }
 };
 NvTablebody.style = NvTablebodyStyle0;

package/dist/cjs/nv-tablecolumn.cjs.entry.js

@@ -31,7 +31,7 @@ const NvTablecolumn = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '48d70635460ac6948df4c68c8e0047e9ce541746' }, index.h("th", { key: '22311aa6136e6812ab6826ee1d40c29d0488dbdf', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, index.h("slot", { key: 'ce784ed22c04dc6518a0feb76ad5f045856d0713' }))));
+        return (index.h(index.Host, { key: 'b915edf73d123698dda7b09dff8338ab6e7996bc' }, index.h("th", { key: 'dc055106d9bcd20c962515477d6d6abd570b36b6', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, index.h("slot", { key: '2b760e4a3a0a796724300cce8437d886b9c26deb' }))));
     }
 };
 NvTablecolumn.style = NvTablecolumnStyle0;

package/dist/cjs/nv-tabledatacell.cjs.entry.js

@@ -33,7 +33,7 @@ const NvTabledatacell = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '9f635d593df08dd1dfc19e8aa3b322dbed87a424' }, index.h("td", { key: '0e34944ec0afcdae29ab4f22736dd061f30e43d4', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, index.h("slot", { key: '93f888fa237c38aa92188c07cb644548fc9f98e0' }))));
+        return (index.h(index.Host, { key: 'fa4aaa160d405696e80897cb1cb0ec051468d150' }, index.h("td", { key: '9d25cf82d40c0416142b22c286445358316e1e64', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, index.h("slot", { key: 'ecc470509926b5641e39cc8b3ed6e96e247e41fc' }))));
     }
 };
 NvTabledatacell.style = NvTabledatacellStyle0;

package/dist/cjs/nv-tablehead.cjs.entry.js

@@ -14,7 +14,7 @@ const NvTablehead = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'cdf37e086d4194bdcb941942226d17ba38ec7dc7' }, index.h("thead", { key: '3a8f72860faed461685b8184aeb274eec59188ba' }, index.h("slot", { key: 'f7450cf4858bc7452e4cb840ac7e06e5848dc75f' }))));
+        return (index.h(index.Host, { key: '89e28d2e09f6c5521ed3a06cd3d4674b238a384c' }, index.h("thead", { key: 'fc9629c1d7af5e96f14d7c6b05d4e42618471f07' }, index.h("slot", { key: 'bfc72494b0f3fe32153143a9099e4917c1ab77d5' }))));
     }
 };
 NvTablehead.style = NvTableheadStyle0;

package/dist/cjs/nv-tablerow.cjs.entry.js

@@ -14,7 +14,7 @@ const NvTablerow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '065e38cdcbd56b69dba909bc2d5d6e0eb8ab51df' }, index.h("tr", { key: '0cdd81a4089dec01ed317a47353fdd0cc531e142' }, index.h("slot", { key: 'c1a734288012582482531e75e50a94556a6d809f' }))));
+        return (index.h(index.Host, { key: '5887cd3c2bda63bc177f7faf735ebade9b0bdc49' }, index.h("tr", { key: '4b5b73272bbb87683d04e5838e52bdd4ff7b441b' }, index.h("slot", { key: 'bc8d620194b9e73efefe6acdf7473e481d6bdef3' }))));
     }
 };
 NvTablerow.style = NvTablerowStyle0;

package/dist/cjs/nv-toggle.cjs.entry.js

@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'fd7d393f428febc115781037af278a63e885b050', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '438c1274a3b4232bbfc4bb85949ce8f47c53f427', class: "input-container" }, index.h("input", { key: '21e8bcb0ab978e4121865d19347200a3bb764f80', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '087fa18da2cf5e0c6a3820315849789fe78773e6', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'b675e8019b0f01d42c36c8a9531ddfc4f1d228c0', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '060b5ad24ba0425d0f528d06e268c83631b1c4b8', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c6ff377866f8811173ff06b8aad0fc86d2f4baa8', class: "description" }, index.h("slot", { key: '3fc242b00e50b5d504226cf3352859fa9e1571fa', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '75e37c699cfc3b0488dfb660ff7e1dc8bc4fcec7', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'a34755c8cfa921ffbc7e60cff93f89b2eb451007', class: "input-container" }, index.h("input", { key: 'dbfc3021614001f1fd2d2fb3dd1352fc33078fb2', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'afac6bb640ba44af0d9fc3841dae90bfb3130c89', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'eac00ea14d7181b17cc06d48f69dcd46d891d9b9', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '52f3e6ee4c7fed8218a2c782b1cdedd4230ce8ac', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '861fc6d2e9abf58e43e45e91dfdd2da7705c5e1a', class: "description" }, index.h("slot", { key: 'cb218ac2d197f84202c668621ee9e56c936ca50f', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-tooltip.cjs.entry.js

@@ -36,7 +36,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd3fe8bc3ae08011cbee7a7f7d097f310e3d45d9d' }, index.h("slot", { key: '8d54cb3574200d1a0d2e59e382e08bd50f9431a1' }), index.h("nv-popover", { key: 'abf871f80cc732fccae585c6bdb1e2cf343c1347', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'c3e8fe0ebfa1ff29d0a160dd86f80ce475b3be8a', slot: "content" }, this.message), index.h("slot", { key: '541748e092313441909d88d777ed890ff4c9a104', name: "content" }))));
+        return (index.h(index.Host, { key: '59735e979b8e88ad61ebbdf77c305377884a445e' }, index.h("slot", { key: '6002089cc748045fa836f03d2b4da9101f4f2851' }), index.h("nv-popover", { key: '34fa8dd4cb98dd9c46ad2a723153cdffb5fa9d88', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '10869c05ea2247817a571128b104f6995eff5b1a', slot: "content" }, this.message), index.h("slot", { key: '3527b66fc2aa974e243470d45a1aaab6b8453401', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/uri.utils-8523ad2b.js

@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ * Converts a Data URI to a string.
+ * @param {string} dataURI - The data URI (base64-encoded string) representing data.
+ * @returns {string} - The original string representation of the data.
+ */
+function dataURIToString(dataURI) {
+    const [header, data] = dataURI.split(',');
+    // If the header indicates base64 encoding, decode it.
+    if (header.includes('base64')) {
+        return atob(data);
+    }
+    // Otherwise, decode URI components if necessary.
+    return decodeURIComponent(data);
+}
+
+const uri_utils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    dataURIToString: dataURIToString
+});
+
+exports.dataURIToString = dataURIToString;
+exports.uri_utils = uri_utils;
+
+//# sourceMappingURL=uri.utils-8523ad2b.js.map

package/dist/cjs/uri.utils-8523ad2b.js.map

@@ -0,0 +1 @@
+{"file":"uri.utils-8523ad2b.js","mappings":";;AAAA;;;;;SAKgB,eAAe,CAAC,OAAe;IAC7C,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;;IAG1C,IAAI,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;KACnB;;IAGD,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;AAClC;;;;;;;;;;","names":[],"sources":["src/utils/uri.utils.ts"],"sourcesContent":["/**\n * Converts a Data URI to a string.\n * @param {string} dataURI - The data URI (base64-encoded string) representing data.\n * @returns {string} - The original string representation of the data.\n */\nexport function dataURIToString(dataURI: string): string {\n  const [header, data] = dataURI.split(',');\n\n  // If the header indicates base64 encoding, decode it.\n  if (header.includes('base64')) {\n    return atob(data);\n  }\n\n  // Otherwise, decode URI components if necessary.\n  return decodeURIComponent(data);\n}\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/nv-breadcrumb/nv-breadcrumb.js",
     "components/nv-breadcrumbs/nv-breadcrumbs.js",
     "components/nv-button/nv-button.js",
+    "components/nv-calendar/nv-calendar.js",
     "components/nv-col/nv-col.js",
     "components/nv-datagrid/nv-datagrid.js",
     "components/nv-datagridbody/nv-datagridbody.js",
@@ -52,6 +53,5 @@
     "typescriptVersion": "5.5.4"
   },
   "collections": [],
-  "bundles": [],
-  "global": "global.js"
+  "bundles": []
 }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvBreadcrumbsDocs = {
     component: 'nv-breadcrumbs',
+    badge: 'new',
     subcomponents: ['nv-breadcrumb', 'nv-icon'],
     composedComponents: ['nv-breadcrumb'],
     stories: [

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

@@ -1 +1 @@
-{"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb,CACS;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,+HAA+H;YACjI,QAAQ,EAAE,CACR;gBACE;oBACE;wBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;oBAChB;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;oBAChB,qBAAe,OAAO;wBACpB,SAAG,IAAI,EAAC,GAAG,oBAAkB,CACf,CACD;gBAEjB,wBAAe,MAAM,oBAAmB,CACpC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n  component: 'nv-breadcrumbs',\n  subcomponents: ['nv-breadcrumb', 'nv-icon'],\n  composedComponents: ['nv-breadcrumb'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Collapsed',\n      description:\n        'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Current page',\n      description:\n        'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',\n      template: (\n        <div>\n          <nv-breadcrumbs data-storybook-args>\n            <nv-breadcrumb>\n              <a href=\"#\">Home</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb>\n              <a href=\"#\">User account</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb current>\n              <a href=\"#\">Authorization</a>\n            </nv-breadcrumb>\n          </nv-breadcrumbs>\n\n          <h2 data-class=\"mt-2\">Authorization</h2>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}
+{"version":3,"file":"nv-breadcrumbs.docs.js","sourceRoot":"","sources":["../../../src/components/nv-breadcrumbs/nv-breadcrumbs.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,iBAAiB,GAAuC;IAC5D,SAAS,EAAE,gBAAgB;IAC3B,KAAK,EAAE,KAAK;IACZ,aAAa,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3C,kBAAkB,EAAE,CAAC,eAAe,CAAC;IACrC,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,oFAAoF;YACtF,QAAQ,EAAE,CACR,iEAA+C,YAAY;gBACzD;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,IAAI,EAAC,WAAW,EAAC,OAAO,EAAC,iBAAiB;oBACvD;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb;oBACL;wBACE;4BACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACb,CACS;gBAChB;oBACE,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ;gBAChB,qBAAe,OAAO;oBACpB,SAAG,IAAI,EAAC,GAAG,iBAAe,CACZ,CACD,CAClB;SACF;QACD;YACE,IAAI,EAAE,cAAc;YACpB,WAAW,EACT,+HAA+H;YACjI,QAAQ,EAAE,CACR;gBACE;oBACE;wBACE,SAAG,IAAI,EAAC,GAAG,WAAS,CACN;oBAChB;wBACE,SAAG,IAAI,EAAC,GAAG,mBAAiB,CACd;oBAChB,qBAAe,OAAO;wBACpB,SAAG,IAAI,EAAC,GAAG,oBAAkB,CACf,CACD;gBAEjB,wBAAe,MAAM,oBAAmB,CACpC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvBreadcrumbsDocs: NovaDocs<Components.NvBreadcrumbs> = {\n  component: 'nv-breadcrumbs',\n  badge: 'new',\n  subcomponents: ['nv-breadcrumb', 'nv-icon'],\n  composedComponents: ['nv-breadcrumb'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-breadcrumbs data-storybook-args>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Collapsed',\n      description:\n        'A breadcrumb example featuring a collapsed menu for handling long navigation paths',\n      template: (\n        <nv-breadcrumbs data-storybook-args data-class=\"mt-5 mb-20\">\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb type=\"collapsed\" tooltip=\"Click to expand\">\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n            <li>\n              <nv-breadcrumb>\n                <a href=\"#\">Breadcrumb</a>\n              </nv-breadcrumb>\n            </li>\n          </nv-breadcrumb>\n          <nv-breadcrumb>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n          <nv-breadcrumb current>\n            <a href=\"#\">Breadcrumb</a>\n          </nv-breadcrumb>\n        </nv-breadcrumbs>\n      ),\n    },\n    {\n      name: 'Current page',\n      description:\n        'Hides the breadcrumb and sets the aria-current attribute, use this on the last breadcrumb, and include a header for the page.',\n      template: (\n        <div>\n          <nv-breadcrumbs data-storybook-args>\n            <nv-breadcrumb>\n              <a href=\"#\">Home</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb>\n              <a href=\"#\">User account</a>\n            </nv-breadcrumb>\n            <nv-breadcrumb current>\n              <a href=\"#\">Authorization</a>\n            </nv-breadcrumb>\n          </nv-breadcrumbs>\n\n          <h2 data-class=\"mt-2\">Authorization</h2>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvBreadcrumbsDocs;\n"]}

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

@@ -0,0 +1,341 @@
+nv-calendar {
+  display: block;
+}
+
+.datepicker-root {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: auto;
+}
+
+.datepicker-container {
+  font-family: system-ui, sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background: var(--color-level-00-background);
+  border-radius: var(--menu-contextual-radius);
+  padding: 0.25rem;
+  box-shadow: 0 2px 6px 1px solid var(--components-button-medium-border);
+  border: 1px solid var(--components-button-medium-border);
+  width: auto;
+  max-width: 100%;
+}
+
+.datepicker-container-single {
+  width: 300px;
+}
+.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),
+.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right) {
+  width: 410px !important;
+}
+.datepicker-container-single:has(.shortcuts-placement-left), .datepicker-container-single:has(.shortcuts-placement-right) {
+  width: 410px !important;
+}
+
+.datepicker-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.5rem;
+  width: auto;
+  overflow-x: hidden;
+}
+
+.datepicker-wrapper.single {
+  justify-content: center;
+}
+
+.calendar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.25rem;
+  width: auto;
+  position: relative;
+}
+
+.calendar-separator {
+  width: 1px;
+  background: var(--components-button-medium-border);
+  height: auto;
+  min-height: 100%;
+  margin: 0 10px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+  width: 100%;
+}
+
+.nav-buttons {
+  display: flex;
+  gap: 0.15rem;
+  margin-left: auto;
+}
+
+.nav-left {
+  order: -1;
+}
+
+.date-controls {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  min-height: 34px;
+  justify-content: center;
+}
+.datepicker-container-single .date-controls {
+  justify-content: flex-start !important;
+}
+.datepicker-container:not(.datepicker-container-single) .date-controls {
+  justify-content: center !important;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem;
+  position: relative;
+}
+.calendar-grid.slide-left {
+  animation: slideLeft 0.3s ease-out;
+}
+.calendar-grid.slide-right {
+  animation: slideRight 0.3s ease-out;
+}
+
+.week-numbers {
+  display: grid;
+  grid-template-rows: 2rem repeat(6, 2rem);
+  background: var(--color-level-30-background);
+  border-radius: var(--menu-contextual-radius);
+  width: 2.5rem;
+}
+.week-numbers .clickable {
+  cursor: pointer;
+}
+.week-numbers .clickable:hover {
+  background: var(--components-button-high-background-hover);
+  color: white;
+  border-radius: var(--menu-contextual-radius);
+}
+
+.week-header,
+.week-number {
+  display: grid;
+  place-items: center;
+  font-size: 0.875rem;
+}
+
+.week-header {
+  font-weight: 600;
+  color: var(--components-form-text-label-default);
+}
+
+.week-number {
+  color: var(--components-form-text-description-default);
+}
+
+.days-container {
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.days-header {
+  display: grid;
+  grid-template-columns: repeat(7, 2rem);
+  height: 2rem;
+}
+
+.day-header {
+  display: grid;
+  place-items: center;
+  font-size: 0.875rem;
+  color: var(--components-form-text-description-default);
+}
+
+.days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 2rem);
+  grid-template-rows: repeat(6, 2rem);
+  animation: fadeIn 0.2s ease-in;
+}
+
+.day {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.875rem;
+  border-radius: var(--menu-contextual-radius);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: all 0.2s ease;
+  text-align: center;
+  animation: scaleIn 0.2s ease-out;
+}
+.day:hover:not(.disabled, .empty, .selected) {
+  background: var(--components-button-high-background-hover);
+  color: white;
+}
+.day.selected, .day.selected:hover {
+  background: var(--components-button-high-background);
+  color: white;
+}
+.day.disabled {
+  color: color-mix(in srgb, var(--components-form-shape-background-selected) 50%, transparent);
+  cursor: not-allowed;
+}
+.day.outside-month {
+  color: var(--components-form-text-description-default);
+  opacity: 0.6;
+}
+.day.outside-month.selected, .day.outside-month.in-range {
+  opacity: 1 !important;
+  color: inherit;
+}
+.day.in-range {
+  background: color-mix(in srgb, var(--components-form-shape-background-selected) 50%, transparent);
+  color: white;
+  border-radius: 0;
+  position: relative;
+}
+.day.range-start, .day.range-end {
+  background: var(--components-button-high-background);
+  color: white;
+  position: relative;
+}
+.day.range-start {
+  border-radius: var(--menu-contextual-radius) 0 0 var(--menu-contextual-radius);
+}
+.day.range-end {
+  border-radius: 0 var(--menu-contextual-radius) var(--menu-contextual-radius) 0;
+}
+.day.outside-month.range-start, .day.outside-month.range-end {
+  background: var(--components-button-high-background) !important;
+  color: white;
+  opacity: 1 !important;
+}
+.day.outside-month.in-range {
+  background: color-mix(in srgb, var(--components-form-shape-background-selected) 50%, transparent);
+  color: white;
+}
+.day.is-today {
+  font-weight: 600;
+  position: relative;
+}
+.day.is-today::after {
+  content: "";
+  position: absolute;
+  bottom: 0.15rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0.15rem;
+  height: 0.15rem;
+  background-color: currentColor;
+  border-radius: 50%;
+}
+.day.is-today.selected::after {
+  background-color: white;
+}
+
+.calendar-footer {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: flex-start;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.footer-placement-left {
+  justify-content: flex-start;
+}
+
+.footer-placement-right {
+  justify-content: flex-end;
+}
+
+.footer-placement-center {
+  justify-content: center;
+}
+
+.datepicker-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.calendar-footer + .datepicker-actions {
+  margin-top: 0;
+}
+
+.datepicker-controls {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--components-button-medium-border);
+  padding: 1rem;
+  gap: 0.25rem;
+}
+
+.shortcuts-placement-left,
+.shortcuts-placement-right {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 1rem;
+}
+
+.shortcuts-placement-left {
+  align-items: flex-end;
+}
+
+.shortcuts-placement-right {
+  align-items: flex-start;
+}
+
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}