@aquera/nile-elements 1.6.7 → 1.6.8

package/src/nile-nav-tab-panel/nile-nav-tab-panel.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import {styles} from './nile-nav-tab-panel.css';
+
+import { classMap } from 'lit/directives/class-map.js';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+
+let id = 0;
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-nav-tab-panel
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+@customElement('nile-nav-tab-panel')
+export class NileNavTabPanel extends NileElement {
+
+  static styles: CSSResultGroup = styles;
+
+  private readonly attrId = ++id;
+  private readonly componentId = `nile-nav-tab-panel-${this.attrId}`;
+
+  /** The tab panel's name. */
+  @property({ reflect: true }) name = '';
+
+  /** When true, the tab panel will be shown. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    this.setAttribute('role', 'tabpanel');
+    this.handleActiveChange();
+  }
+
+  @watch('active')
+  handleActiveChange() {
+    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');
+    this.setAttribute('tabindex', this.active ? '0' : '-1');
+  }
+
+  render() {
+    return html`
+     <div
+       part="base"
+       class=${classMap({
+      'nav-tab-panel': true,
+      'nav-tab-panel--active': this.active
+      })}
+>
+  <slot></slot>
+</div>
+    `;
+  }
+}
+
+export default NileNavTabPanel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-nav-tab-panel': NileNavTabPanel;
+  }
+}

package/vscode-html-custom-data.json

@@ -2796,15 +2796,77 @@
         }
       ]
     },
+    {
+      "name": "nile-inline-sidebar-item-body",
+      "description": "Nile inline-sidebar-item-body component.\n\nAttributes:\n\n  * `lines` {`number`} - Maximum number of visible lines before text is truncated with an ellipsis.\n\n  * `content` {`string`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `active` {`boolean`} - \n\nProperties:\n\n  * `lines` {`number`} - Maximum number of visible lines before text is truncated with an ellipsis.\n\n  * `content` {`string`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `isTruncated` {`boolean`} - \n\n  * `bodyContentEl` {`HTMLElement`} - \n\n  * `disabled` {`boolean`} - \n\n  * `active` {`boolean`} - \n\n  * `resizeObserver` - \n\n  * `contentTemplate` {`UncompiledTemplateResult<ResultType>`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "lines",
+          "description": "`lines` {`number`} - Maximum number of visible lines before text is truncated with an ellipsis.\n\nProperty: lines\n\nDefault: 2"
+        },
+        {
+          "name": "content",
+          "description": "`content` {`string`} - \n\nProperty: content\n\nDefault: "
+        },
+        {
+          "name": "showTooltip",
+          "description": "`showTooltip` {`boolean`} - \n\nProperty: showTooltip\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - \n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
+    {
+      "name": "nile-inline-sidebar-item-header",
+      "description": "Nile inline-sidebar-item-header component.\n\nAttributes:\n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - \n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "nile-inline-sidebar-item",
-      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `tooltip` {`boolean`} - \n\n  * `_handleHostKeyDown` - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `tooltip` {`boolean`} - \n\n  * `variant` {`\"minimal\" | \"rich\" | undefined`} - \n\n  * `panel` {`string | undefined`} - Links this item to a `nile-inline-sidebar-panel` by matching its `name` property.\n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `tooltip` {`boolean`} - \n\n  * `variant` {`\"minimal\" | \"rich\" | undefined`} - \n\n  * `panel` {`string | undefined`} - Links this item to a `nile-inline-sidebar-panel` by matching its `name` property.\n\n  * `_handleHostKeyDown` - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "tooltip",
           "description": "`tooltip` {`boolean`} - \n\nProperty: tooltip\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"minimal\" | \"rich\" | undefined`} - \n\nProperty: variant\n\nDefault: minimal",
+          "values": [
+            {
+              "name": "minimal"
+            },
+            {
+              "name": "rich"
+            }
+          ]
+        },
+        {
+          "name": "panel",
+          "description": "`panel` {`string | undefined`} - Links this item to a `nile-inline-sidebar-panel` by matching its `name` property.\n\nProperty: panel",
+          "values": []
+        },
         {
           "name": "active",
           "description": "`active` {`boolean`} - Marks the item as active (selected).\n\nProperty: active\n\nDefault: false",
@@ -2830,9 +2892,42 @@
         }
       ]
     },
+    {
+      "name": "nile-inline-sidebar-panel-group",
+      "description": "Layout container that positions a `nile-inline-sidebar` beside one or more\n`nile-inline-sidebar-panel` elements. Handles panel switching when sidebar\nitems are clicked.\n\nSlots:\n\n  * `sidebar` {} - Slot for the `nile-inline-sidebar` element.\n\n  * ` ` {} - Default slot for `nile-inline-sidebar-panel` elements.\n\nAttributes:\n\n  * `placement` {`\"left\" | \"right\"`} - Mirrors the sidebar's placement to control layout direction.\n\nProperties:\n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `panels` {`NileInlineSidebarPanel[]`} - \n\n  * `handleSidebarItemClick` - \n\n  * `placement` {`\"left\" | \"right\"`} - Mirrors the sidebar's placement to control layout direction.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "placement",
+          "description": "`placement` {`\"left\" | \"right\"`} - Mirrors the sidebar's placement to control layout direction.\n\nProperty: placement\n\nDefault: left",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "nile-inline-sidebar-panel",
+      "description": "Content panel associated with a `nile-inline-sidebar-item`.\nLinked via the item's `panel` property matching this panel's `name`.\n\nSlots:\n\n  * ` ` {} - Default slot for panel content.\n\nAttributes:\n\n  * `name` {`string`} - Identifier that links this panel to a sidebar item's `panel` property.\n\n  * `active` {`boolean`} - Whether this panel is currently visible.\n\nProperties:\n\n  * `name` {`string`} - Identifier that links this panel to a sidebar item's `panel` property.\n\n  * `active` {`boolean`} - Whether this panel is currently visible.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "`name` {`string`} - Identifier that links this panel to a sidebar item's `panel` property.\n\nProperty: name\n\nDefault: "
+        },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - Whether this panel is currently visible.\n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "nile-inline-sidebar",
-      "description": "Nile inline sidebar component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ selectedItem: HTMLElement; index: number; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ collapsed: boolean; }>`} - \n\n  * `nile-click` {`CustomEvent<{ item: HTMLElement; href: any; text: string; }>`} - \n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `placement` {`\"left\" | \"right\"`} - The side on which the sidebar is placed.\n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `placement` {`\"left\" | \"right\"`} - The side on which the sidebar is placed.\n\n  * `activeIndex` {`number`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `mutationObserver` {`MutationObserver | undefined`} - \n\n  * `sidebarItems` {`HTMLElement[]`} - \n\n  * `focusableItems` {`HTMLElement[]`} - \n\n  * `handleKeyDown` - \n\n  * `handleItemSelect` - \n\n  * `menuItemsTemplate` {`UncompiledTemplateResult<1>[] | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline sidebar component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ selectedItem: HTMLElement; index: number; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ collapsed: boolean; }>`} - \n\n  * `nile-click` {`CustomEvent<{ item: HTMLElement; href: any; text: string; }>`} - \n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `placement` {`\"left\" | \"right\"`} - The side on which the sidebar is placed.\n\n  * `resizable` {`boolean`} - Enables a draggable resize handle on the sidebar's trailing edge.\n\n  * `sidebarWidth` {`number`} - Current sidebar width in pixels when resizable is enabled.\n\n  * `minSidebarWidth` {`number`} - Minimum sidebar width in pixels.\n\n  * `showToggleBtn` {`boolean`} - \n\n  * `maxSidebarWidth` {`number`} - Maximum sidebar width in pixels.\n\n  * `variant` {`\"minimal\" | \"rich\" | undefined`} - \n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `placement` {`\"left\" | \"right\"`} - The side on which the sidebar is placed.\n\n  * `resizable` {`boolean`} - Enables a draggable resize handle on the sidebar's trailing edge.\n\n  * `sidebarWidth` {`number`} - Current sidebar width in pixels when resizable is enabled.\n\n  * `minSidebarWidth` {`number`} - Minimum sidebar width in pixels.\n\n  * `showToggleBtn` {`boolean`} - \n\n  * `maxSidebarWidth` {`number`} - Maximum sidebar width in pixels.\n\n  * `variant` {`\"minimal\" | \"rich\" | undefined`} - \n\n  * `activeIndex` {`number`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `mutationObserver` {`MutationObserver | undefined`} - \n\n  * `sidebarItems` {`HTMLElement[]`} - \n\n  * `focusableItems` {`HTMLElement[]`} - \n\n  * `handleKeyDown` - \n\n  * `handleItemSelect` - \n\n  * `separatorTemplate` {`unique symbol | UncompiledTemplateResult<1>`} - \n\n  * `menuItemsTemplate` {`UncompiledTemplateResult<1>[] | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "collapsed",
@@ -2861,6 +2956,40 @@
             }
           ]
         },
+        {
+          "name": "resizable",
+          "description": "`resizable` {`boolean`} - Enables a draggable resize handle on the sidebar's trailing edge.\n\nProperty: resizable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "sidebarWidth",
+          "description": "`sidebarWidth` {`number`} - Current sidebar width in pixels when resizable is enabled.\n\nProperty: sidebarWidth\n\nDefault: 216"
+        },
+        {
+          "name": "minSidebarWidth",
+          "description": "`minSidebarWidth` {`number`} - Minimum sidebar width in pixels.\n\nProperty: minSidebarWidth\n\nDefault: 120"
+        },
+        {
+          "name": "showToggleBtn",
+          "description": "`showToggleBtn` {`boolean`} - \n\nProperty: showToggleBtn\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "maxSidebarWidth",
+          "description": "`maxSidebarWidth` {`number`} - Maximum sidebar width in pixels.\n\nProperty: maxSidebarWidth\n\nDefault: 400"
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"minimal\" | \"rich\" | undefined`} - \n\nProperty: variant\n\nDefault: minimal",
+          "values": [
+            {
+              "name": "minimal"
+            },
+            {
+              "name": "rich"
+            }
+          ]
+        },
         {
           "name": "onnile-change",
           "description": "`nile-change` {`CustomEvent<{ selectedItem: HTMLElement; index: number; }>`} - "
@@ -3597,6 +3726,147 @@
         }
       ]
     },
+    {
+      "name": "nile-nav-tab-group",
+      "description": "Tab group navigation component.\n\nEvents:\n\n  * `nile-close` {} - Bubbled from a closable `<nile-nav-tab>`; re-emitted so parents can listen on this element.\n\nSlots:\n\n  * ` ` {} - Used for grouping tab panels in the tab group. Must be `<nile-nav-tab-panel>` elements.\n\n  * `nav` {} - Used for grouping tabs in the tab group. Must be `<nile-nav-tab>` elements.\n\nAttributes:\n\n  * `hasScrollControls` {`boolean`} - \n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The placement of the tabs.\n\n  * `value` {`string`} - The currently active tab value.\n\n  * `no-track` {`boolean`} - Track for showing Indicators and Background.\n\n  * `no-scroll-controls` {`boolean`} - Disables the scroll arrows that appear when tabs overflow.\n\n  * `centered` {`boolean`} - Controls whether tabs are centered and have equal width.\n\n  * `variant` {`\"toggle\" | \"underline\" | \"filled\" | \"neutral-filled\" | \"toggle-button\"`} - \n\n  * `indicatorPlacement` {`string`} - \n\n  * `fullWidth` {`boolean`} - \n\n  * `width` {`string`} - \n\n  * `showIndicatorOnHover` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `activeTab` - Selection model (for reviewers):\n- `activeTabName` is the internal source of truth; clicks and keyboard update it.\n- `activeTabProp` / attribute `value` is the host-controlled API; changes in `updated()` copy into `activeTabName`.\n- `setActiveTab()` syncs each tab’s `active` flag, each panel’s `active`, `activeTabProp` / `value`, indicator/pill geometry, and optionally emits `nile-tab-change`.\n- `this.tabs` only includes non-disabled tabs (see `syncTabsAndPanels`); keyboard roving focus uses that list.\n\n  * `mutationObserver` {`MutationObserver`} - \n\n  * `resizeObserver` - \n\n  * `visibilityObserver` {`IntersectionObserver`} - \n\n  * `pillRepositionTimer` - \n\n  * `pillTransitionClassTimer` - \n\n  * `pillReady` {`boolean`} - \n\n  * `observedTabs` {`Set<NileNavTab>`} - \n\n  * `tabs` {`NileNavTab[]`} - \n\n  * `panels` {`NileNavTabPanel[]`} - \n\n  * `handleCloseEvent` - Tabs emit `nile-close` on the host; bubble is stopped so we re-emit from the group with `{ panel }` for consumers.\n\n  * `tabGroupWasIntersecting` {`boolean`} - Tracks visibility for snapping the indicator when a hidden parent (e.g. dropdown) is reopened.\n\n  * `lastNavClientWidth` {`number`} - Last measured nav width; used to detect layout resume after display:none / collapse.\n\n  * `tabGroup` {`HTMLElement`} - \n\n  * `body` {`HTMLSlotElement`} - \n\n  * `nav` {`HTMLElement`} - \n\n  * `indicator` {`HTMLElement`} - \n\n  * `hoverIndicator` {`HTMLElement`} - \n\n  * `hasScrollControls` {`boolean`} - \n\n  * `placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The placement of the tabs.\n\n  * `activeTabProp` {`string`} - The currently active tab value.\n\n  * `noTrack` {`boolean`} - Track for showing Indicators and Background.\n\n  * `noScrollControls` {`boolean`} - Disables the scroll arrows that appear when tabs overflow.\n\n  * `centered` {`boolean`} - Controls whether tabs are centered and have equal width.\n\n  * `variant` {`\"toggle\" | \"underline\" | \"filled\" | \"neutral-filled\" | \"toggle-button\"`} - \n\n  * `indicatorPlacement` {`string`} - \n\n  * `fullWidth` {`boolean`} - \n\n  * `width` {`string`} - \n\n  * `showIndicatorOnHover` {`boolean`} - \n\n  * `activeTabName` {`string`} - \n\n  * `showScrollControlButtons` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "hasScrollControls",
+          "description": "`hasScrollControls` {`boolean`} - \n\nProperty: hasScrollControls\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "placement",
+          "description": "`placement` {`\"top\" | \"bottom\" | \"end\" | \"start\"`} - The placement of the tabs.\n\nProperty: placement\n\nDefault: top",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "end"
+            },
+            {
+              "name": "start"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "`value` {`string`} - The currently active tab value.\n\nProperty: activeTabProp\n\nDefault: "
+        },
+        {
+          "name": "no-track",
+          "description": "`no-track` {`boolean`} - Track for showing Indicators and Background.\n\nProperty: noTrack\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "no-scroll-controls",
+          "description": "`no-scroll-controls` {`boolean`} - Disables the scroll arrows that appear when tabs overflow.\n\nProperty: noScrollControls\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "centered",
+          "description": "`centered` {`boolean`} - Controls whether tabs are centered and have equal width.\n\nProperty: centered\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"toggle\" | \"underline\" | \"filled\" | \"neutral-filled\" | \"toggle-button\"`} - \n\nProperty: variant\n\nDefault: underline",
+          "values": [
+            {
+              "name": "toggle"
+            },
+            {
+              "name": "underline"
+            },
+            {
+              "name": "filled"
+            },
+            {
+              "name": "neutral-filled"
+            },
+            {
+              "name": "toggle-button"
+            }
+          ]
+        },
+        {
+          "name": "indicatorPlacement",
+          "description": "`indicatorPlacement` {`string`} - \n\nProperty: indicatorPlacement\n\nDefault: "
+        },
+        {
+          "name": "fullWidth",
+          "description": "`fullWidth` {`boolean`} - \n\nProperty: fullWidth\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "width",
+          "description": "`width` {`string`} - \n\nProperty: width\n\nDefault: "
+        },
+        {
+          "name": "showIndicatorOnHover",
+          "description": "`showIndicatorOnHover` {`boolean`} - \n\nProperty: showIndicatorOnHover\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onnile-close",
+          "description": "`nile-close` {} - Bubbled from a closable `<nile-nav-tab>`; re-emitted so parents can listen on this element."
+        }
+      ]
+    },
+    {
+      "name": "nile-nav-tab-panel",
+      "description": "Nile icon component.\n\nSlots:\n\n  * ` ` {} - The tab panel's content.\n\nAttributes:\n\n  * `name` {`string`} - The tab panel's name.\n\n  * `active` {`boolean`} - When true, the tab panel will be shown.\n\nProperties:\n\n  * `styles` - \n\n  * `attrId` {`number`} - \n\n  * `componentId` {`string`} - \n\n  * `name` {`string`} - The tab panel's name.\n\n  * `active` {`boolean`} - When true, the tab panel will be shown.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "`name` {`string`} - The tab panel's name.\n\nProperty: name\n\nDefault: "
+        },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - When true, the tab panel will be shown.\n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
+    {
+      "name": "nile-nav-tab",
+      "description": "Attributes:\n\n  * `panel` {`string`} - The name of the tab panel this tab is associated with.\n\n  * `active` {`boolean`} - Draws the tab in an active state.\n\n  * `closable` {`boolean`} - Makes the tab closable and shows a close button.\n\n  * `disabled` {`boolean`} - Disables the tab and prevents selection.\n\n  * `centered` {`boolean`} - \n\n  * `link` {`string | undefined`} - \n\nProperties:\n\n  * `styles` - \n\n  * `attrId` {`number`} - \n\n  * `componentId` {`string`} - \n\n  * `navTab` {`HTMLElement`} - \n\n  * `panel` {`string`} - The name of the tab panel this tab is associated with.\n\n  * `active` {`boolean`} - Draws the tab in an active state.\n\n  * `closable` {`boolean`} - Makes the tab closable and shows a close button.\n\n  * `disabled` {`boolean`} - Disables the tab and prevents selection.\n\n  * `centered` {`boolean`} - \n\n  * `link` {`string | undefined`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "`panel` {`string`} - The name of the tab panel this tab is associated with.\n\nProperty: panel\n\nDefault: "
+        },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - Draws the tab in an active state.\n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "closable",
+          "description": "`closable` {`boolean`} - Makes the tab closable and shows a close button.\n\nProperty: closable\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - Disables the tab and prevents selection.\n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "centered",
+          "description": "`centered` {`boolean`} - \n\nProperty: centered\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "link",
+          "description": "`link` {`string | undefined`} - \n\nProperty: link",
+          "values": []
+        }
+      ]
+    },
     {
       "name": "nile-option-group",
       "description": "Attributes:\n\n  * `name` {`string`} - \n\n  * `data` {`OptionGroupData | null`} - \n\n  * `sticky` {`boolean`} - \n\nProperties:\n\n  * `name` {`string`} - \n\n  * `data` {`OptionGroupData | null`} - \n\n  * `sticky` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",