@nova-design-system/nova-react 3.23.0 → 3.24.0

package/dist/cjs/{nv-sidebarnavitem.entry-DglvcCOD.js → nv-sidebarnavitem.entry-DVrafSMr.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -42,7 +42,7 @@ const NvSidebarnavitem = class {
             if (this.isSidebarCollapsed) {
                 // Find the first link that is NOT inside subitems
                 const link = this.el.querySelector('.nv-sidebarnavitem-content a, :scope > a');
-                if (link === null || link === void 0 ? void 0 : link.href) {
+                if (link?.href) {
                     // Check if click was directly on the link - if so, let it handle naturally
                     if (target.closest('a')) {
                         return;
@@ -119,10 +119,9 @@ const NvSidebarnavitem = class {
             }
         };
         this.checkSidebarCollapsed = () => {
-            var _a;
             const sidebar = this.el.closest('nv-sidebar');
             const wasCollapsed = this.isSidebarCollapsed;
-            this.isSidebarCollapsed = (_a = sidebar === null || sidebar === void 0 ? void 0 : sidebar.hasAttribute('collapsed')) !== null && _a !== void 0 ? _a : false;
+            this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;
             // When sidebar collapse state changes, update active state based on subitems
             if (wasCollapsed !== this.isSidebarCollapsed) {
                 this.updateActiveFromSubitems();
@@ -270,7 +269,7 @@ const NvSidebarnavitem = class {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (index.h(index.Host, { key: 'c0c9c63cb295441389b5ced9a4b0a0d5a1af99cd', role: "listitem" }, index.h("div", { key: '6673c3f4c14762bff8512ecc430febddfa74b307', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (index.h("div", { key: '25f703e9fb7375b8b562be54f080120ae037dd9f', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '1a4e345c90afcec159890db6c6b0e22d53dd673d', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '15b69d1a2325daed7d6583ed10906fe4e91809e5', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'c717c09f39eab07616de419a35b11a5b7dfce5d1', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '9f8687f151fd082a6737e7fbe6036cc3ebff3cc2' })), index.h("div", { key: 'b2c3d7a4c30ce96273731a05a1d361f5654582de', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: 'acf2dddbbbc7d2e83703c731a244237e0dc81153', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: 'adca5c7418a3b58afa5ef21ddd3fa9b2d880a56c', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'a4a4369d4ba76f567cca439d1b4c7e95ad5ba98c', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '2d4fadb0b547eb369a702bb8210b3312dde505b2', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (index.h(index.Host, { key: '7a3523c68080b90ef262a2fa3fa63f1f34baaaf1', role: "listitem" }, index.h("div", { key: '21abd8cf4e5d4a368b25db79306cb0ac747edfce', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (index.h("div", { key: '8255f2f75b751e5005b4bbb7178e553123c7c109', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '5396567c08fc46084f085b544aeee3f874b7b439', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '63dfbd2a986124a9c1ba1741e4d1079ec2b38a18', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'a4d8df28b532018d6961d6d779d77ba88bbea756', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '7394c3534de567f9230ff872b57b4211939bc142' })), index.h("div", { key: 'c8f8451e9ebc42e6ee16407a5ba9c6f6c32f4a66', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '2e901538498c62fe5a5bc21c76c66b493c215e32', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '9a7c172f0b7dbf78068135344e469d261b80d368', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'f1caa3750edb35376d8b45121ffb443b033735d4', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '4b141fd9639afd78351b01df146866d4d091381f', class: "nv-sidebarnavitem-subitems", ref: el => {
                 // Only update ref and initialize if element changed or not yet initialized
                 if (el !== this.subitemsRef) {
                     this.subitemsRef = el;
@@ -285,7 +284,7 @@ const NvSidebarnavitem = class {
                         });
                     }
                 }
-            } }, index.h("slot", { key: 'f0ffb970aa2d84580205ba110858d3f1c27875a3', name: "subitems" })))));
+            } }, index.h("slot", { key: '6a38e07d0559b6eaf2fafb4c9928047a9cfd19b4', name: "subitems" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-sidebarnavsubitem.entry-Dt1jKmC-.js → nv-sidebarnavsubitem.entry-C0XDAzma.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -27,7 +27,7 @@ const NvSidebarnavsubitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8ae8c5e2038145bd458a35d237495a06fde97294', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: '559a99d72973f7af43091c5c920e77d8cad3944c', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '204c7ad681d51310f43b618ef14a12d0ccc93ddc', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'f4717aee216fbeac4dbfe0d98b34fe7e83476701' })), index.h("div", { key: 'b5db84c75ae4e51d8a048000a49697eaf4b20f1d', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: 'b6d0afcd6b4ace60b32f531f414b70aba513a274', name: "trailing" }))));
+        return (index.h(index.Host, { key: '7e9b3aaf42bc7ca19cc3ceeed4afc74058ea48f2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'd865d9cff0e9632dd0ca5f97334e09ae3ad6ddf8', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '28bddb32eea17dbc3b33f2e1c3ef6744e6646cbe', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: '0f58fbe30b054e42ac3f431cb8cafe0374994856' })), index.h("div", { key: '3b1b74c67b1e338e158a67dab828941f40f3a147', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '98ad3fde4a5295f6835ba6b15ac832fc0426b75b', name: "trailing" }))));
     }
 };
 NvSidebarnavsubitem.style = nvSidebarnavsubitemCss;

package/dist/cjs/{nv-split.entry-mzg2F66T.js → nv-split.entry-0HTslRAX.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
+const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
 
 const NvSplit = class {
     constructor(hostRef) {
@@ -38,7 +38,7 @@ const NvSplit = class {
         this.startPos = 0;
         this.startSizes = [];
         // Handlers stored to be able to detach them
-        this.onDocMove = (ev) => this.handleMouseMove(ev);
+        this.onDocMove = (e) => this.handleMouseMove(e);
         this.onDocUp = () => this.stopDragging();
     }
     //#endregion
@@ -59,18 +59,20 @@ const NvSplit = class {
     componentDidLoad() {
         // Initialization (once)
         this.ensureGutters();
-        this.applySizes();
-        this.positionGutters();
-        // Observer: reposition gutters when resized (nested or parent split changes)
+        // Defer applySizes to ensure CSS (margins, padding) is computed
+        requestAnimationFrame(() => {
+            this.applySizes();
+            this.positionGutters();
+        });
+        // Observer: reposition gutters when resized
         this.ro = new ResizeObserver(() => this.positionGutters());
         this.ro.observe(this.el);
         window.addEventListener('resize', () => this.positionGutters());
     }
     disconnectedCallback() {
-        var _a;
         // Security cleanup (in case a drag was in progress)
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
         this.ro = undefined;
     }
     //#endregion
@@ -118,13 +120,12 @@ const NvSplit = class {
      * @returns {Promise<void>}
      */
     async destroy() {
-        var _a;
         this.sizes = [];
         this.isDragging = false;
         this.dragIndex = -1;
         this.removeOwnGutters();
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
     }
     //#endregion
     /****************************************************************************/
@@ -199,15 +200,14 @@ const NvSplit = class {
             this.sizes = Array(n).fill(100 / n);
         }
         panes.forEach((pane, i) => {
-            var _a;
-            const size = Math.max(0, (_a = this.sizes[i]) !== null && _a !== void 0 ? _a : 100 / n);
-            // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
+            const size = Math.max(0, this.sizes[i] ?? 100 / n);
             pane.style.flex = `0 0 ${size}%`;
             pane.style.minWidth = '0';
             pane.style.minHeight = '0';
-            pane.style.overflow = 'hidden'; // let a nv-split child extend
+            pane.style.overflow = 'hidden';
             pane.style.display = 'flex';
             pane.style.flexDirection = 'column';
+            pane.style.boxSizing = 'border-box';
         });
         this.positionGutters();
     }
@@ -229,7 +229,6 @@ const NvSplit = class {
      * Positions the gutters based on the current sizes of the panes.
      */
     positionGutters() {
-        var _a, _b;
         const panes = this.getPanes();
         const gutters = this.getOwnGutters();
         if (panes.length <= 1 || gutters.length === 0)
@@ -237,7 +236,7 @@ const NvSplit = class {
         const horizontal = this.direction === 'horizontal';
         let cumPct = 0;
         for (let i = 0; i < gutters.length; i++) {
-            const sizePct = (_b = (_a = this.sizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 100 / panes.length;
+            const sizePct = this.sizes?.[i] ?? 100 / panes.length;
             cumPct += sizePct;
             const g = gutters[i];
             g.style.position = 'absolute';
@@ -246,68 +245,70 @@ const NvSplit = class {
                 g.style.top = '0';
                 g.style.bottom = '0';
                 g.style.height = '100%';
+                g.style.transform = 'translateX(-50%)';
             }
             else {
                 g.style.top = `${cumPct}%`;
                 g.style.left = '0';
                 g.style.right = '0';
                 g.style.width = '100%';
+                g.style.transform = 'translateY(-50%)';
             }
         }
     }
     /**
      * Starts the dragging process.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      * @param {number} index - The index of the gutter.
      */
-    startDragging(ev, index) {
+    startDragging(e, index) {
+        e.preventDefault();
         this.isDragging = true;
         this.dragIndex = index;
-        this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
+        this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
         this.startSizes = [...this.sizes];
         this.attachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     /**
      * Handles the mouse movement during dragging.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      */
-    handleMouseMove(ev) {
-        var _a, _b, _c, _d;
+    handleMouseMove(e) {
         if (!this.isDragging || this.dragIndex < 0)
             return;
         const panes = this.getPanes();
         if (panes.length < 2)
             return;
         const rect = this.el.getBoundingClientRect();
-        // Ensure we never divide by zero if the element has zero width/height
-        const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;
-        const totalPx = Math.max(rawSize, 1);
-        const deltaPx = (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -
-            this.startPos;
+        const horizontal = this.direction === 'horizontal';
+        const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);
+        const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;
         const deltaPct = (deltaPx / totalPx) * 100;
         const i = this.dragIndex;
         const j = i + 1;
-        let left = this.startSizes[i] + deltaPct;
-        let right = this.startSizes[j] - deltaPct;
+        const startLeft = this.startSizes[i];
+        const startRight = this.startSizes[j];
         // minSizes (px) -> %
-        const minLeftPct = (((_b = (_a = this.minSizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 0) / totalPx) * 100;
-        const minRightPct = (((_d = (_c = this.minSizes) === null || _c === void 0 ? void 0 : _c[j]) !== null && _d !== void 0 ? _d : 0) / totalPx) * 100;
-        left = Math.max(left, minLeftPct);
-        right = Math.max(right, minRightPct);
-        // Keep the sum of the pair i/j constant
-        const pairSum = left + right;
-        const targetSum = this.startSizes[i] + this.startSizes[j];
-        if (Math.abs(pairSum - targetSum) > 0.0001) {
-            const k = targetSum / (pairSum || 1);
-            left *= k;
-            right *= k;
+        let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;
+        let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;
+        const minSum = minLeftPct + minRightPct;
+        const availableSum = startLeft + startRight;
+        if (minSum > availableSum) {
+            const scale = availableSum / minSum;
+            minLeftPct *= scale;
+            minRightPct *= scale;
         }
+        const minDelta = minLeftPct - startLeft;
+        const maxDelta = startRight - minRightPct;
+        const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);
+        const left = startLeft + clampedDelta;
+        const right = startRight - clampedDelta;
         const next = [...this.startSizes];
         next[i] = left;
         next[j] = right;
         this.sizes = next;
         this.applySizes();
-        this.sizesChanged.emit([...this.sizes]);
         this.positionGutters();
     }
     /**
@@ -319,12 +320,13 @@ const NvSplit = class {
         this.isDragging = false;
         this.dragIndex = -1;
         this.detachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     //#endregion
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2266f982349909b08637721e0bf5d8792fa2f3aa', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '0b0845ae2f93bb137692fd570beaa2e26816c1c9', name: "pane" }), index.h("slot", { key: 'ac322712eb7024dde9efc41dac946196fd15a786', name: "gutter" })));
+        return (index.h(index.Host, { key: '850cf8fb9d492e1da39da0037c1fd8d414960d28', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '4d2f540ca147abe4778bcc0d02be2e87ee2cf3b4', name: "pane" }), index.h("slot", { key: '1ceb2dc6375c50fe7786ba03fb2a753f852980ba', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-stack.entry-nnvjTrBy.js → nv-stack.entry-CqO7uTQf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', class: clsxChV9xqsO.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
+        return (index.h(index.Host, { key: '7b44b30e42b8df1c456f70b1f3be986e2fce1617', class: clsxChV9xqsO.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'd38b6f0c043959ed97b3e90d21309ab832713b4e' })));
     }
 };
 NvStack.style = nvStackCss;

package/dist/cjs/{nv-table.entry-DkbNgxtI.js → nv-table.entry-DH85n8Mc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -68,7 +68,7 @@ function calculateNewWidth(startWidth, delta, minWidth = TABLE_CONSTANTS.MIN_W)
  * @returns {element is HTMLTableCellElement} Type guard for table cell elements
  */
 function isValidTableCell(element) {
-    return (element === null || element === void 0 ? void 0 : element.tagName) === 'TH' || (element === null || element === void 0 ? void 0 : element.tagName) === 'TD';
+    return element?.tagName === 'TH' || element?.tagName === 'TD';
 }
 /**
  * Finds the closest table cell element from an event target
@@ -88,12 +88,11 @@ function getClosestTableCell(target) {
  * @returns {boolean} True if capture was successfully set
  */
 function setPointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.setPointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -104,12 +103,11 @@ function setPointerCapture(cell, pointerId) {
  * @returns {boolean} True if release was successful
  */
 function releasePointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.releasePointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -236,7 +234,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ec194bed7ec58642be9f6b52a737e2f9375a152e' }, index.h("slot", { key: '009ce0f20491156ca93141c85683f0be499a9938' })));
+        return (index.h(index.Host, { key: '6d13efcd059cca60b2f6bc092b75b65e36738913' }, index.h("slot", { key: '33c715acec9e561586c9059f20e77b403307c134' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{nv-tableheader.entry-CRVFTQA-.js → nv-tableheader.entry-CKfocdxD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -31,7 +31,7 @@ const NvTableheader = class {
     cycleSortDirection(e) {
         if (!this.sortable)
             return;
-        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e?.preventDefault();
         const next = {
             none: 'asc',
             asc: 'desc',
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '89ea12419a6f07d3b945a2dec3ca40a169d1bf85', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '447c9f44b779cb7003209c3965127433e33f1ea9' }), this.sortable && (index.h("span", { key: 'bb4d1545d83b5fd2ce0b6860cdabbe22fe0f8ed0', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '03b14162d5a1f2e8cccc5fa2e49af9cdd247d4e7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: 'ae56ba389e554b3b555a1f29dba6a2c434e4a0ea', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '55efe6331ebcbde6b9b37f7d8dec610e444dc4b1' }), this.sortable && (index.h("span", { key: 'ecde17447218e6d462504cb10bdc8b95266ce402', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'c6e18e4149d2805cb16d5a79ec29db85a656b42c', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/cjs/{nv-toggle.entry-oC9TVkr1.js → nv-toggle.entry-BHUl76Im.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'afeeed468bea015c59cdab86f85ee3b0145f8b11', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'fd56a2b878f063549315f5b48fe1eb7b249a3503', class: "input-container" }, index.h("input", { key: '8e0a260d2c80bb303ff9b1f1921290060ef5c92c', 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: '906d8bd545bffcc8f2e4deee3f760ae1366aa8b2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fa2e7120d3f8f0dedd7ef953a7648aa1dca80ec4', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '598eb4b920bbc37c6dba5862e65221b586714728', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'fb4769f30a05fe2e953759990ff8922ebc906452', class: "description" }, index.h("slot", { key: '1e847c839e147d3a9aff41296e5d1d84266be9f5', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'bf104d1513a3cf741c6b42ab48554c40d19263d1', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '8c7e9684887e0d454a69101fb83f290d26236841', class: "input-container" }, index.h("input", { key: '5771d8999e03247600a2b98d0eae985ff0345e28', 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: '8c95821037235c2eab053bce5bb7a0dc15173ea4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '36c1d110f4c9151e1d05c665546f01f323999b15', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '4fe3f5fab8c1a20480c9eba085221afc36caae73', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '63dc983d3b09327f57bd62feb7a25865f90390a7', class: "description" }, index.h("slot", { key: 'e85b616e8bf1301e53f62a2c4e1ea87675b1dcff', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-togglebutton.entry-D_9COjY-.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
+
+const NvTogglebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggled = index.createEvent(this, "toggled", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small the togglebutton appears, allowing for
+         * customization of the togglebutton's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Prevents all interaction, rendering the toggle in a non-interactive state.
+         */
+        this.disabled = false;
+        /**
+         * Whether the button is active or not. Will not toggle automatically but
+         * needs to be controlled externally.
+         */
+        this.active = false;
+        /**
+         * Make it more or less visually prominent to users.
+         */
+        this.emphasis = 'high';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.toggled.emit({
+                value: this.value,
+                active: this.active,
+            });
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LISTENERS
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    /* eslint-enable nova/event-bubbling */
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'af68f5f4887be35f48bb74f15f597e7fe575b3fd', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '624ab0edc86bf9b5686f3f99097adf82ea972764' })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTogglebutton.style = nvTogglebuttonCss;
+
+exports.nv_togglebutton = NvTogglebutton;

package/dist/cjs/{nv-togglebuttongroup.entry-BYXX5ejg.js → nv-togglebuttongroup.entry-C0NLbsq7.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius)}";
+const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}";
 
 const NvTogglebuttongroup = class {
     constructor(hostRef) {
@@ -38,11 +38,10 @@ const NvTogglebuttongroup = class {
          */
         this.setActiveToggleButtons = () => {
             this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                var _a;
                 const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
                 if (!btn)
                     return;
-                btn.active = ((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(btn.value);
+                btn.active = (this.value ?? []).includes(btn.value);
             });
         };
         /**
@@ -159,7 +158,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0ed4a7f3ddaaebf6747e8f0798913cca4117f2cb' }, index.h("slot", { key: '8ea87065c312f52a1f23873d19724d57147e80b2' })));
+        return (index.h(index.Host, { key: '2d4f46a06045c84018b0a5c296b2eb19c2803d7a' }, index.h("slot", { key: '4f387071fe030057df13c6b3ff5e6f480fcd339b' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-OJGxfJEh.js → nv-tooltip.entry-BfViGE_U.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '380e3306103dcf66291757972a47ba1ffaf8068c' }, index.h("slot", { key: 'ca3481b10e2ed73751c892711f8482809a274037' }), index.h("nv-popover", { key: 'e89838624b171e3d1eadf764e4ab14e003225dc9', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'c103df8cf9891fef763de2aa706dec5bb90f8346', slot: "content" }, this.message), index.h("slot", { key: '2e2dcc84b21ab1c46cf980a507f0b13e8350b4d6', name: "content" }))));
+        return (index.h(index.Host, { key: '3b0a7e6159b2e0a23af58ad0e8e3567f05373954' }, index.h("slot", { key: 'bfb982166e2f6f96c11cc745905a3c0ffd8f575e' }), index.h("nv-popover", { key: 'c14b0fa83f861ae828b14ab16cbd562dde6032ba', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: '67701f81afc4c2e36f8ab7266aee3f2e457a4755', slot: "content" }, this.message), index.h("slot", { key: 'c57c2463744e2e2afc5bbd64c4838a733a77aca9', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };