@aquera/nile-elements 0.0.20 → 0.0.22

package/dist/nile-tab-group/nile-tab-group.css.cjs.js

@@ -0,0 +1,2 @@
+System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var t,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){t=_index001CjsJs.i;}],execute:function(){_export("s",o=t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: #e5e9eb;\n    --track-width: 1px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: 24px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: calc(-1 * var(--track-width));\n    border-bottom: solid 3px var(--indicator-color);\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n"]))));}};});
+//# sourceMappingURL=nile-tab-group.css.cjs.js.map

package/dist/nile-tab-group/nile-tab-group.css.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tab-group.css.cjs.js","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * TabGroup CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600);\n    --track-color: #e5e9eb;\n    --track-width: 1px;\n\n    display: block;\n  }\n\n  .tab-group {\n    display: flex;\n    border-radius: 0;\n  }\n\n  .tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: 24px;\n  }\n\n  .tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    position: relative;\n    padding: 0 10px;\n  }\n\n  .tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  .tab-group__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n  }\n\n  .tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--start {\n    left: auto;\n    right: 0;\n  }\n\n  .tab-group--rtl .tab-group__scroll-button--end {\n    left: 0;\n    right: auto;\n  }\n\n  /*\n   * Top\n   */\n\n  .tab-group--top {\n    flex-direction: column;\n  }\n\n  .tab-group--top .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--top .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--top .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--top .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--top .tab-group__indicator {\n    bottom: calc(-1 * var(--track-width));\n    border-bottom: solid 3px var(--indicator-color);\n  }\n\n  .tab-group--top .tab-group__body {\n    order: 2;\n  }\n\n  .tab-group--top ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Bottom\n   */\n\n  .tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .tab-group--bottom .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--bottom .tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n\n    /* Hide scrollbar in Firefox */\n    scrollbar-width: none;\n  }\n\n  /* Hide scrollbar in Chrome/Safari */\n  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .tab-group--bottom .tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n    border-top: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--bottom .tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--bottom .tab-group__body {\n    order: 1;\n  }\n\n  .tab-group--bottom ::slotted(nile-tab-panel) {\n    --padding: 10px 0;\n  }\n\n  /*\n   * Start\n   */\n\n  .tab-group--start {\n    flex-direction: row;\n  }\n\n  .tab-group--start .tab-group__nav-container {\n    order: 1;\n  }\n\n  .tab-group--start .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-end: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--start.tab-group--rtl .tab-group__indicator {\n    right: auto;\n    left: calc(-1 * var(--track-width));\n  }\n\n  .tab-group--start .tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .tab-group--start ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n\n  /*\n   * End\n   */\n\n  .tab-group--end {\n    flex-direction: row;\n  }\n\n  .tab-group--end .tab-group__nav-container {\n    order: 2;\n  }\n\n  .tab-group--end .tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-left: solid var(--track-width) var(--track-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    left: calc(-1 * var(--track-width));\n    border-inline-start: solid var(--track-width) var(--indicator-color);\n  }\n\n  .tab-group--end.tab-group--rtl .tab-group__indicator {\n    right: calc(-1 * var(--track-width));\n    left: auto;\n  }\n\n  .tab-group--end .tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  .tab-group--end ::slotted(nile-tab-panel) {\n    --padding: 0 10px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-tab-group/nile-tab-group.css.esm.js

@@ -0,0 +1,233 @@
+import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --indicator-color: var(--nile-colors-primary-600);
+    --track-color: #e5e9eb;
+    --track-width: 1px;
+
+    display: block;
+  }
+
+  .tab-group {
+    display: flex;
+    border-radius: 0;
+  }
+
+  .tab-group__tabs {
+    display: flex;
+    position: relative;
+    gap: 24px;
+  }
+
+  .tab-group__indicator {
+    position: absolute;
+    transition: 0.3s translate ease, 0.3s width ease;
+  }
+
+  .tab-group--has-scroll-controls .tab-group__nav-container {
+    position: relative;
+    padding: 0 10px;
+  }
+
+  .tab-group__body {
+    display: block;
+    overflow: auto;
+  }
+
+  .tab-group__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+  }
+
+  .tab-group__scroll-button--start {
+    left: 0;
+  }
+
+  .tab-group__scroll-button--end {
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--start {
+    left: auto;
+    right: 0;
+  }
+
+  .tab-group--rtl .tab-group__scroll-button--end {
+    left: 0;
+    right: auto;
+  }
+
+  /*
+   * Top
+   */
+
+  .tab-group--top {
+    flex-direction: column;
+  }
+
+  .tab-group--top .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--top .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--top .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--top .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-bottom: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--top .tab-group__indicator {
+    bottom: calc(-1 * var(--track-width));
+    border-bottom: solid 3px var(--indicator-color);
+  }
+
+  .tab-group--top .tab-group__body {
+    order: 2;
+  }
+
+  .tab-group--top ::slotted(nile-tab-panel) {
+    --padding: 10px 0;
+  }
+
+  /*
+   * Bottom
+   */
+
+  .tab-group--bottom {
+    flex-direction: column;
+  }
+
+  .tab-group--bottom .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--bottom .tab-group__nav {
+    display: flex;
+    overflow-x: auto;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .tab-group--bottom .tab-group__nav::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .tab-group--bottom .tab-group__tabs {
+    flex: 1 1 auto;
+    position: relative;
+    flex-direction: row;
+    border-top: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--bottom .tab-group__indicator {
+    top: calc(-1 * var(--track-width));
+    border-top: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--bottom .tab-group__body {
+    order: 1;
+  }
+
+  .tab-group--bottom ::slotted(nile-tab-panel) {
+    --padding: 10px 0;
+  }
+
+  /*
+   * Start
+   */
+
+  .tab-group--start {
+    flex-direction: row;
+  }
+
+  .tab-group--start .tab-group__nav-container {
+    order: 1;
+  }
+
+  .tab-group--start .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-inline-end: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--start .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    border-right: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--start.tab-group--rtl .tab-group__indicator {
+    right: auto;
+    left: calc(-1 * var(--track-width));
+  }
+
+  .tab-group--start .tab-group__body {
+    flex: 1 1 auto;
+    order: 2;
+  }
+
+  .tab-group--start ::slotted(nile-tab-panel) {
+    --padding: 0 10px;
+  }
+
+  /*
+   * End
+   */
+
+  .tab-group--end {
+    flex-direction: row;
+  }
+
+  .tab-group--end .tab-group__nav-container {
+    order: 2;
+  }
+
+  .tab-group--end .tab-group__tabs {
+    flex: 0 0 auto;
+    flex-direction: column;
+    border-left: solid var(--track-width) var(--track-color);
+  }
+
+  .tab-group--end .tab-group__indicator {
+    left: calc(-1 * var(--track-width));
+    border-inline-start: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--end.tab-group--rtl .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    left: auto;
+  }
+
+  .tab-group--end .tab-group__body {
+    flex: 1 1 auto;
+    order: 1;
+  }
+
+  .tab-group--end ::slotted(nile-tab-panel) {
+    --padding: 0 10px;
+  }
+`;export{o as s};

package/dist/nile-tab-group/nile-tab-group.esm.js

@@ -0,0 +1,43 @@
+import{__decorate as i}from"tslib";import{x as s}from"../index-cd2f9c12.esm.js";import{query as o,state as n,customElement as e}from"lit/decorators.js";import{s as t}from"./nile-tab-group.css.esm.js";import"../nile-icon-button/nile-icon-button.esm.js";import{classMap as c}from"lit/directives/class-map.js";import{s as m}from"../internal/scroll.esm.js";import{w as r}from"../internal/watch.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{n as p}from"../property-09139d3c.esm.js";import"../nile-icon-button/nile-icon-button.css.esm.js";import"../nile-icon/index.esm.js";import"lit";import"lit/directives/unsafe-svg.js";import"../nile-icon/icons/svg/index.esm.js";import"../nile-icon/icons/svg/accessreview.esm.js";import"../nile-icon/icons/svg/action.esm.js";import"../nile-icon/icons/svg/actionworkflow.esm.js";import"../nile-icon/icons/svg/address.esm.js";import"../nile-icon/icons/svg/agent.esm.js";import"../nile-icon/icons/svg/agents.esm.js";import"../nile-icon/icons/svg/aggregation.esm.js";import"../nile-icon/icons/svg/allapplication.esm.js";import"../nile-icon/icons/svg/allsearch.esm.js";import"../nile-icon/icons/svg/anomaly.esm.js";import"../nile-icon/icons/svg/api.esm.js";import"../nile-icon/icons/svg/application.esm.js";import"../nile-icon/icons/svg/applications.esm.js";import"../nile-icon/icons/svg/apply-filter.esm.js";import"../nile-icon/icons/svg/approve.esm.js";import"../nile-icon/icons/svg/aquera.esm.js";import"../nile-icon/icons/svg/aquerasupport.esm.js";import"../nile-icon/icons/svg/array-loop.esm.js";import"../nile-icon/icons/svg/array.esm.js";import"../nile-icon/icons/svg/arrayofobject.esm.js";import"../nile-icon/icons/svg/arrow.esm.js";import"../nile-icon/icons/svg/arrowdown.esm.js";import"../nile-icon/icons/svg/arrowdropdown.esm.js";import"../nile-icon/icons/svg/arrowdropup.esm.js";import"../nile-icon/icons/svg/arrowleft.esm.js";import"../nile-icon/icons/svg/arrowright.esm.js";import"../nile-icon/icons/svg/arrowup.esm.js";import"../nile-icon/icons/svg/attribute-map-analysis-icon.esm.js";import"../nile-icon/icons/svg/attributemap.esm.js";import"../nile-icon/icons/svg/back.esm.js";import"../nile-icon/icons/svg/bargraph.esm.js";import"../nile-icon/icons/svg/bell-icon.esm.js";import"../nile-icon/icons/svg/bell.esm.js";import"../nile-icon/icons/svg/block.esm.js";import"../nile-icon/icons/svg/bluedot.esm.js";import"../nile-icon/icons/svg/boolean.esm.js";import"../nile-icon/icons/svg/bulk-sync.esm.js";import"../nile-icon/icons/svg/button-loading-black.esm.js";import"../nile-icon/icons/svg/button-loading-blue-animated.esm.js";import"../nile-icon/icons/svg/button-loading-blue.esm.js";import"../nile-icon/icons/svg/button-loading-white.esm.js";import"../nile-icon/icons/svg/calendar.esm.js";import"../nile-icon/icons/svg/cancel.esm.js";import"../nile-icon/icons/svg/cases.esm.js";import"../nile-icon/icons/svg/caution.esm.js";import"../nile-icon/icons/svg/cell-loader.esm.js";import"../nile-icon/icons/svg/certification.esm.js";import"../nile-icon/icons/svg/chevron-down.esm.js";import"../nile-icon/icons/svg/chevron-up.esm.js";import"../nile-icon/icons/svg/close.esm.js";import"../nile-icon/icons/svg/collapse-1.esm.js";import"../nile-icon/icons/svg/collapse.esm.js";import"../nile-icon/icons/svg/color.esm.js";import"../nile-icon/icons/svg/compact.esm.js";import"../nile-icon/icons/svg/compare-tiles.esm.js";import"../nile-icon/icons/svg/component-menu.esm.js";import"../nile-icon/icons/svg/component.esm.js";import"../nile-icon/icons/svg/componentblock.esm.js";import"../nile-icon/icons/svg/components-icon.esm.js";import"../nile-icon/icons/svg/componenttext.esm.js";import"../nile-icon/icons/svg/condition.esm.js";import"../nile-icon/icons/svg/conditions.esm.js";import"../nile-icon/icons/svg/connect.esm.js";import"../nile-icon/icons/svg/connectivitymap.esm.js";import"../nile-icon/icons/svg/connectorrightarrow.esm.js";import"../nile-icon/icons/svg/continuous.esm.js";import"../nile-icon/icons/svg/copy.esm.js";import"../nile-icon/icons/svg/cor-analysis.esm.js";import"../nile-icon/icons/svg/correlation.esm.js";import"../nile-icon/icons/svg/create.esm.js";import"../nile-icon/icons/svg/createuser.esm.js";import"../nile-icon/icons/svg/custom.esm.js";import"../nile-icon/icons/svg/dashboard.esm.js";import"../nile-icon/icons/svg/data-type-array.esm.js";import"../nile-icon/icons/svg/data-type-boolean.esm.js";import"../nile-icon/icons/svg/data-type-expression.esm.js";import"../nile-icon/icons/svg/data-type-json.esm.js";import"../nile-icon/icons/svg/data-type-null.esm.js";import"../nile-icon/icons/svg/data-type-number.esm.js";import"../nile-icon/icons/svg/data-type-persistent-variable.esm.js";import"../nile-icon/icons/svg/data-type-string.esm.js";import"../nile-icon/icons/svg/data-type-unknown.esm.js";import"../nile-icon/icons/svg/data-type-variable.esm.js";import"../nile-icon/icons/svg/database.esm.js";import"../nile-icon/icons/svg/databaseview.esm.js";import"../nile-icon/icons/svg/default-1.esm.js";import"../nile-icon/icons/svg/default-cursor.esm.js";import"../nile-icon/icons/svg/default.esm.js";import"../nile-icon/icons/svg/delegate.esm.js";import"../nile-icon/icons/svg/delete.esm.js";import"../nile-icon/icons/svg/deleteuser.esm.js";import"../nile-icon/icons/svg/deligateduser.esm.js";import"../nile-icon/icons/svg/directory.esm.js";import"../nile-icon/icons/svg/disabled.esm.js";import"../nile-icon/icons/svg/document.esm.js";import"../nile-icon/icons/svg/done.esm.js";import"../nile-icon/icons/svg/dontmap.esm.js";import"../nile-icon/icons/svg/doublearrowleft.esm.js";import"../nile-icon/icons/svg/doublearrowright.esm.js";import"../nile-icon/icons/svg/dowhileloop.esm.js";import"../nile-icon/icons/svg/downarrow.esm.js";import"../nile-icon/icons/svg/downgrade.esm.js";import"../nile-icon/icons/svg/download.esm.js";import"../nile-icon/icons/svg/drag.esm.js";import"../nile-icon/icons/svg/draglist.esm.js";import"../nile-icon/icons/svg/droparrow.esm.js";import"../nile-icon/icons/svg/dropdown.esm.js";import"../nile-icon/icons/svg/edit-pencil.esm.js";import"../nile-icon/icons/svg/else.esm.js";import"../nile-icon/icons/svg/email.esm.js";import"../nile-icon/icons/svg/enable.esm.js";import"../nile-icon/icons/svg/enabled.esm.js";import"../nile-icon/icons/svg/entities.esm.js";import"../nile-icon/icons/svg/entitlement.esm.js";import"../nile-icon/icons/svg/error.esm.js";import"../nile-icon/icons/svg/escalate.esm.js";import"../nile-icon/icons/svg/event.esm.js";import"../nile-icon/icons/svg/every.esm.js";import"../nile-icon/icons/svg/exactmatch.esm.js";import"../nile-icon/icons/svg/execute.esm.js";import"../nile-icon/icons/svg/expand-1.esm.js";import"../nile-icon/icons/svg/expand.esm.js";import"../nile-icon/icons/svg/eye.esm.js";import"../nile-icon/icons/svg/eyeclosed.esm.js";import"../nile-icon/icons/svg/file.esm.js";import"../nile-icon/icons/svg/filter.esm.js";import"../nile-icon/icons/svg/firewall.esm.js";import"../nile-icon/icons/svg/firewallagent.esm.js";import"../nile-icon/icons/svg/flow-h.esm.js";import"../nile-icon/icons/svg/flow.esm.js";import"../nile-icon/icons/svg/flowmap-agent.esm.js";import"../nile-icon/icons/svg/flowmap-application.esm.js";import"../nile-icon/icons/svg/flowmap-aquera.esm.js";import"../nile-icon/icons/svg/flowmap-block.esm.js";import"../nile-icon/icons/svg/flowmap-cancel.esm.js";import"../nile-icon/icons/svg/flowmap-colorpalatte.esm.js";import"../nile-icon/icons/svg/flowmap-drag.esm.js";import"../nile-icon/icons/svg/flowmap-ellipsis.esm.js";import"../nile-icon/icons/svg/flowmap-firewall-agent.esm.js";import"../nile-icon/icons/svg/flowmap-firewall.esm.js";import"../nile-icon/icons/svg/flowmap-gateway.esm.js";import"../nile-icon/icons/svg/flowmap-hand.esm.js";import"../nile-icon/icons/svg/flowmap-orchestration.esm.js";import"../nile-icon/icons/svg/flowmap-redo.esm.js";import"../nile-icon/icons/svg/flowmap-section.esm.js";import"../nile-icon/icons/svg/flowmap-text.esm.js";import"../nile-icon/icons/svg/flowmap-undo.esm.js";import"../nile-icon/icons/svg/flowmap-workflow.esm.js";import"../nile-icon/icons/svg/flowmap.esm.js";import"../nile-icon/icons/svg/folder.esm.js";import"../nile-icon/icons/svg/foreach.esm.js";import"../nile-icon/icons/svg/form.esm.js";import"../nile-icon/icons/svg/frequency.esm.js";import"../nile-icon/icons/svg/fullscreen.esm.js";import"../nile-icon/icons/svg/fullscreenexit.esm.js";import"../nile-icon/icons/svg/fullscreenshrink.esm.js";import"../nile-icon/icons/svg/funnel.esm.js";import"../nile-icon/icons/svg/gateway.esm.js";import"../nile-icon/icons/svg/general.esm.js";import"../nile-icon/icons/svg/generationphase.esm.js";import"../nile-icon/icons/svg/global-search.esm.js";import"../nile-icon/icons/svg/globe.esm.js";import"../nile-icon/icons/svg/goto.esm.js";import"../nile-icon/icons/svg/greendot.esm.js";import"../nile-icon/icons/svg/greydot.esm.js";import"../nile-icon/icons/svg/greylightdot.esm.js";import"../nile-icon/icons/svg/group-analysis-icon.esm.js";import"../nile-icon/icons/svg/group.esm.js";import"../nile-icon/icons/svg/groupby.esm.js";import"../nile-icon/icons/svg/groups.esm.js";import"../nile-icon/icons/svg/guide.esm.js";import"../nile-icon/icons/svg/handtool.esm.js";import"../nile-icon/icons/svg/header-actions.esm.js";import"../nile-icon/icons/svg/header-child-workflow.esm.js";import"../nile-icon/icons/svg/header-flows.esm.js";import"../nile-icon/icons/svg/header-functions.esm.js";import"../nile-icon/icons/svg/header-tasks.esm.js";import"../nile-icon/icons/svg/header-variable.esm.js";import"../nile-icon/icons/svg/help-1.esm.js";import"../nile-icon/icons/svg/help.esm.js";import"../nile-icon/icons/svg/helpandsupport.esm.js";import"../nile-icon/icons/svg/helpers.esm.js";import"../nile-icon/icons/svg/helpsupport.esm.js";import"../nile-icon/icons/svg/history.esm.js";import"../nile-icon/icons/svg/identitygraph.esm.js";import"../nile-icon/icons/svg/identityledger.esm.js";import"../nile-icon/icons/svg/if.esm.js";import"../nile-icon/icons/svg/ifelse.esm.js";import"../nile-icon/icons/svg/image.esm.js";import"../nile-icon/icons/svg/immutable.esm.js";import"../nile-icon/icons/svg/info-icon.esm.js";import"../nile-icon/icons/svg/info-icon1.esm.js";import"../nile-icon/icons/svg/info.esm.js";import"../nile-icon/icons/svg/info2.esm.js";import"../nile-icon/icons/svg/inprogress.esm.js";import"../nile-icon/icons/svg/integer.esm.js";import"../nile-icon/icons/svg/itemplaceholder.esm.js";import"../nile-icon/icons/svg/js.esm.js";import"../nile-icon/icons/svg/kill.esm.js";import"../nile-icon/icons/svg/leftarrow.esm.js";import"../nile-icon/icons/svg/leftpointarrow.esm.js";import"../nile-icon/icons/svg/link.esm.js";import"../nile-icon/icons/svg/list-attribute.esm.js";import"../nile-icon/icons/svg/loader.esm.js";import"../nile-icon/icons/svg/loading.esm.js";import"../nile-icon/icons/svg/loading2.esm.js";import"../nile-icon/icons/svg/lock.esm.js";import"../nile-icon/icons/svg/log-info.esm.js";import"../nile-icon/icons/svg/log.esm.js";import"../nile-icon/icons/svg/logo-white.esm.js";import"../nile-icon/icons/svg/logout.esm.js";import"../nile-icon/icons/svg/logs.esm.js";import"../nile-icon/icons/svg/loop.esm.js";import"../nile-icon/icons/svg/manage.esm.js";import"../nile-icon/icons/svg/manageduser.esm.js";import"../nile-icon/icons/svg/map.esm.js";import"../nile-icon/icons/svg/mapcreate.esm.js";import"../nile-icon/icons/svg/mapdont.esm.js";import"../nile-icon/icons/svg/maponcreate.esm.js";import"../nile-icon/icons/svg/maponupdate.esm.js";import"../nile-icon/icons/svg/mapupdate.esm.js";import"../nile-icon/icons/svg/maximize.esm.js";import"../nile-icon/icons/svg/menu.esm.js";import"../nile-icon/icons/svg/minus.esm.js";import"../nile-icon/icons/svg/moveleft.esm.js";import"../nile-icon/icons/svg/moveright.esm.js";import"../nile-icon/icons/svg/multiple-user.esm.js";import"../nile-icon/icons/svg/mute.esm.js";import"../nile-icon/icons/svg/next-down.esm.js";import"../nile-icon/icons/svg/next.esm.js";import"../nile-icon/icons/svg/no-anomaly.esm.js";import"../nile-icon/icons/svg/nomatch.esm.js";import"../nile-icon/icons/svg/not.esm.js";import"../nile-icon/icons/svg/note.esm.js";import"../nile-icon/icons/svg/notification.esm.js";import"../nile-icon/icons/svg/notificationadd.esm.js";import"../nile-icon/icons/svg/notificationadded.esm.js";import"../nile-icon/icons/svg/notscheduled.esm.js";import"../nile-icon/icons/svg/null.esm.js";import"../nile-icon/icons/svg/number.esm.js";import"../nile-icon/icons/svg/numberinput.esm.js";import"../nile-icon/icons/svg/object.esm.js";import"../nile-icon/icons/svg/operators.esm.js";import"../nile-icon/icons/svg/options.esm.js";import"../nile-icon/icons/svg/orchestration-solid.esm.js";import"../nile-icon/icons/svg/orchestration.esm.js";import"../nile-icon/icons/svg/organization.esm.js";import"../nile-icon/icons/svg/other.esm.js";import"../nile-icon/icons/svg/otherdetails.esm.js";import"../nile-icon/icons/svg/ou-analysis-icon.esm.js";import"../nile-icon/icons/svg/override.esm.js";import"../nile-icon/icons/svg/palletemenu.esm.js";import"../nile-icon/icons/svg/partner.esm.js";import"../nile-icon/icons/svg/partners.esm.js";import"../nile-icon/icons/svg/pause.esm.js";import"../nile-icon/icons/svg/pen.esm.js";import"../nile-icon/icons/svg/pencil.esm.js";import"../nile-icon/icons/svg/peopletask.esm.js";import"../nile-icon/icons/svg/persistent-variable.esm.js";import"../nile-icon/icons/svg/persistentdata.esm.js";import"../nile-icon/icons/svg/personaldetails.esm.js";import"../nile-icon/icons/svg/phone.esm.js";import"../nile-icon/icons/svg/pin.esm.js";import"../nile-icon/icons/svg/placeholder-wf.esm.js";import"../nile-icon/icons/svg/play.esm.js";import"../nile-icon/icons/svg/plus-icon.esm.js";import"../nile-icon/icons/svg/plus.esm.js";import"../nile-icon/icons/svg/pluscircle.esm.js";import"../nile-icon/icons/svg/plussquare.esm.js";import"../nile-icon/icons/svg/policy.esm.js";import"../nile-icon/icons/svg/potentialmatch.esm.js";import"../nile-icon/icons/svg/poweron.esm.js";import"../nile-icon/icons/svg/prev-up.esm.js";import"../nile-icon/icons/svg/prev.esm.js";import"../nile-icon/icons/svg/preview.esm.js";import"../nile-icon/icons/svg/privilage.esm.js";import"../nile-icon/icons/svg/privilege.esm.js";import"../nile-icon/icons/svg/privilegeobject.esm.js";import"../nile-icon/icons/svg/process.esm.js";import"../nile-icon/icons/svg/professionaldetails.esm.js";import"../nile-icon/icons/svg/question.esm.js";import"../nile-icon/icons/svg/radio.esm.js";import"../nile-icon/icons/svg/radioactive.esm.js";import"../nile-icon/icons/svg/radiodone.esm.js";import"../nile-icon/icons/svg/read.esm.js";import"../nile-icon/icons/svg/readexpression.esm.js";import"../nile-icon/icons/svg/readonly.esm.js";import"../nile-icon/icons/svg/readonlyuser.esm.js";import"../nile-icon/icons/svg/readuser.esm.js";import"../nile-icon/icons/svg/reddot.esm.js";import"../nile-icon/icons/svg/redo.esm.js";import"../nile-icon/icons/svg/refresh.esm.js";import"../nile-icon/icons/svg/reminder.esm.js";import"../nile-icon/icons/svg/resize.esm.js";import"../nile-icon/icons/svg/resource.esm.js";import"../nile-icon/icons/svg/returnvalue.esm.js";import"../nile-icon/icons/svg/revocationcycle.esm.js";import"../nile-icon/icons/svg/revokation-cycle.esm.js";import"../nile-icon/icons/svg/rightarrow.esm.js";import"../nile-icon/icons/svg/role.esm.js";import"../nile-icon/icons/svg/rolemanager.esm.js";import"../nile-icon/icons/svg/run.esm.js";import"../nile-icon/icons/svg/save.esm.js";import"../nile-icon/icons/svg/schedule.esm.js";import"../nile-icon/icons/svg/schema.esm.js";import"../nile-icon/icons/svg/script.esm.js";import"../nile-icon/icons/svg/search-steps-icon.esm.js";import"../nile-icon/icons/svg/search.esm.js";import"../nile-icon/icons/svg/section.esm.js";import"../nile-icon/icons/svg/select.esm.js";import"../nile-icon/icons/svg/selectapplication.esm.js";import"../nile-icon/icons/svg/selectattributes.esm.js";import"../nile-icon/icons/svg/selectuser.esm.js";import"../nile-icon/icons/svg/send.esm.js";import"../nile-icon/icons/svg/sendemail.esm.js";import"../nile-icon/icons/svg/sendescalation.esm.js";import"../nile-icon/icons/svg/sendprompt.esm.js";import"../nile-icon/icons/svg/sendreminder.esm.js";import"../nile-icon/icons/svg/setting.esm.js";import"../nile-icon/icons/svg/settings.esm.js";import"../nile-icon/icons/svg/shape.esm.js";import"../nile-icon/icons/svg/share.esm.js";import"../nile-icon/icons/svg/smalltick.esm.js";import"../nile-icon/icons/svg/smartcode.esm.js";import"../nile-icon/icons/svg/sort.esm.js";import"../nile-icon/icons/svg/sortascending.esm.js";import"../nile-icon/icons/svg/sortdescending.esm.js";import"../nile-icon/icons/svg/sortdown.esm.js";import"../nile-icon/icons/svg/sortup.esm.js";import"../nile-icon/icons/svg/stop.esm.js";import"../nile-icon/icons/svg/storybook.esm.js";import"../nile-icon/icons/svg/string.esm.js";import"../nile-icon/icons/svg/stringinput.esm.js";import"../nile-icon/icons/svg/stringletters.esm.js";import"../nile-icon/icons/svg/support.esm.js";import"../nile-icon/icons/svg/swap.esm.js";import"../nile-icon/icons/svg/sync.esm.js";import"../nile-icon/icons/svg/table.esm.js";import"../nile-icon/icons/svg/tag.esm.js";import"../nile-icon/icons/svg/test.esm.js";import"../nile-icon/icons/svg/text.esm.js";import"../nile-icon/icons/svg/textarea-expander.esm.js";import"../nile-icon/icons/svg/themes.esm.js";import"../nile-icon/icons/svg/thumbsdown.esm.js";import"../nile-icon/icons/svg/thumbsup.esm.js";import"../nile-icon/icons/svg/thumsup.esm.js";import"../nile-icon/icons/svg/tick.esm.js";import"../nile-icon/icons/svg/timeupdate.esm.js";import"../nile-icon/icons/svg/timezone.esm.js";import"../nile-icon/icons/svg/trash-no-fill.esm.js";import"../nile-icon/icons/svg/trash.esm.js";import"../nile-icon/icons/svg/trigger.esm.js";import"../nile-icon/icons/svg/undo-1.esm.js";import"../nile-icon/icons/svg/undo.esm.js";import"../nile-icon/icons/svg/unmute.esm.js";import"../nile-icon/icons/svg/uparrow.esm.js";import"../nile-icon/icons/svg/update.esm.js";import"../nile-icon/icons/svg/updateuser.esm.js";import"../nile-icon/icons/svg/updown.esm.js";import"../nile-icon/icons/svg/upgrade.esm.js";import"../nile-icon/icons/svg/upload.esm.js";import"../nile-icon/icons/svg/user-analysis-icon.esm.js";import"../nile-icon/icons/svg/user-group.esm.js";import"../nile-icon/icons/svg/user-inactive.esm.js";import"../nile-icon/icons/svg/user-selection.esm.js";import"../nile-icon/icons/svg/user.esm.js";import"../nile-icon/icons/svg/useractive.esm.js";import"../nile-icon/icons/svg/useradd.esm.js";import"../nile-icon/icons/svg/useraddgroup.esm.js";import"../nile-icon/icons/svg/userfind.esm.js";import"../nile-icon/icons/svg/userimport.esm.js";import"../nile-icon/icons/svg/userimportgroup.esm.js";import"../nile-icon/icons/svg/usermixed.esm.js";import"../nile-icon/icons/svg/userremove-1.esm.js";import"../nile-icon/icons/svg/userremove-2.esm.js";import"../nile-icon/icons/svg/userremove.esm.js";import"../nile-icon/icons/svg/userremovegroup.esm.js";import"../nile-icon/icons/svg/users.esm.js";import"../nile-icon/icons/svg/userupdate.esm.js";import"../nile-icon/icons/svg/validationexpression.esm.js";import"../nile-icon/icons/svg/variable-global.esm.js";import"../nile-icon/icons/svg/variable-local-1.esm.js";import"../nile-icon/icons/svg/variable-local.esm.js";import"../nile-icon/icons/svg/variable-new-1.esm.js";import"../nile-icon/icons/svg/variable-new.esm.js";import"../nile-icon/icons/svg/variable.esm.js";import"../nile-icon/icons/svg/video.esm.js";import"../nile-icon/icons/svg/view.esm.js";import"../nile-icon/icons/svg/virtualserver.esm.js";import"../nile-icon/icons/svg/virtualservergroup.esm.js";import"../nile-icon/icons/svg/visibility.esm.js";import"../nile-icon/icons/svg/visibilityoff.esm.js";import"../nile-icon/icons/svg/wait.esm.js";import"../nile-icon/icons/svg/warning.esm.js";import"../nile-icon/icons/svg/while.esm.js";import"../nile-icon/icons/svg/whileloop.esm.js";import"../nile-icon/icons/svg/workflow-solid.esm.js";import"../nile-icon/icons/svg/workflow.esm.js";import"../nile-icon/icons/svg/writeexpression.esm.js";import"lit/static-html.js";import"lit/directives/if-defined.js";import"../internal/offset.esm.js";let g=class extends l{constructor(){super(...arguments),this.tabs=[],this.panels=[],this.hasScrollControls=!1,this.placement="top",this.activation="auto",this.noScrollControls=!1}connectedCallback(){const i=Promise.allSettled([customElements.whenDefined("nile-tab"),customElements.whenDefined("nile-tab-panel")]);super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>{this.repositionIndicator(),this.updateScrollControls()})),this.mutationObserver=new MutationObserver((i=>{i.some((i=>!["aria-labelledby","aria-controls"].includes(i.attributeName)))&&setTimeout((()=>this.setAriaLabels())),i.some((i=>"disabled"===i.attributeName))&&this.syncTabsAndPanels()})),this.updateComplete.then((()=>{this.syncTabsAndPanels(),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.resizeObserver.observe(this.nav),i.then((()=>{new IntersectionObserver(((i,s)=>{i[0].intersectionRatio>0&&(this.setAriaLabels(),this.setActiveTab(this.getActiveTab()??this.tabs[0],{emitEvents:!1}),s.unobserve(i[0].target))})).observe(this.tabGroup)}))}))}disconnectedCallback(){this.mutationObserver.disconnect(),this.resizeObserver.unobserve(this.nav)}getAllTabs(i={includeDisabled:!0}){return[...this.shadowRoot.querySelector('slot[name="nav"]').assignedElements()].filter((s=>i.includeDisabled?"nile-tab"===s.tagName.toLowerCase():"nile-tab"===s.tagName.toLowerCase()&&!s.disabled))}getAllPanels(){return[...this.body.assignedElements()].filter((i=>"nile-tab-panel"===i.tagName.toLowerCase()))}getActiveTab(){return this.tabs.find((i=>i.active))}handleClick(i){const s=i.target.closest("nile-tab"),o=s?.closest("nile-tab-group");o===this&&null!==s&&this.setActiveTab(s,{scrollBehavior:"smooth"})}handleKeyDown(i){const s=i.target.closest("nile-tab"),o=s?.closest("nile-tab-group");if(o===this&&(["Enter"," "].includes(i.key)&&null!==s&&(this.setActiveTab(s,{scrollBehavior:"smooth"}),i.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key))){const s=this.tabs.find((i=>i.matches(":focus")));if("nile-tab"===s?.tagName.toLowerCase()){let o=this.tabs.indexOf(s);"Home"===i.key?o=0:"End"===i.key?o=this.tabs.length-1:["top","bottom"].includes(this.placement)&&"ArrowLeft"===i.key||["start","end"].includes(this.placement)&&"ArrowUp"===i.key?o--:(["top","bottom"].includes(this.placement)&&"ArrowRight"===i.key||["start","end"].includes(this.placement)&&"ArrowDown"===i.key)&&o++,o<0&&(o=this.tabs.length-1),o>this.tabs.length-1&&(o=0),this.tabs[o].focus({preventScroll:!0}),"auto"===this.activation&&this.setActiveTab(this.tabs[o],{scrollBehavior:"smooth"}),["top","bottom"].includes(this.placement)&&m(this.tabs[o],this.nav,"horizontal"),i.preventDefault()}}}handleScrollToStart(){this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}handleScrollToEnd(){this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}setActiveTab(i,s){if(s={emitEvents:!0,scrollBehavior:"auto",...s},i!==this.activeTab&&!i.disabled){const o=this.activeTab;this.activeTab=i,this.tabs.map((i=>i.active=i===this.activeTab)),this.panels.map((i=>i.active=i.name===this.activeTab?.panel)),this.syncIndicator(),["top","bottom"].includes(this.placement)&&m(this.activeTab,this.nav,"horizontal",s.scrollBehavior),s.emitEvents&&(o&&this.emit("nile-tab-hide",{value:o.panel}),this.emit("nile-tab-show",{value:this.activeTab.panel}))}}setAriaLabels(){this.tabs.forEach((i=>{const s=this.panels.find((s=>s.name===i.panel));s&&(i.setAttribute("aria-controls",s.getAttribute("id")),s.setAttribute("aria-labelledby",i.getAttribute("id")))}))}repositionIndicator(){const i=this.getActiveTab();if(!i)return;const s=i.clientWidth,o=i.clientHeight,n=this.getAllTabs(),e=n.slice(0,n.indexOf(i)).reduce(((i,s)=>({left:i.left+s.clientWidth+24,top:i.top+s.clientHeight})),{left:0,top:0});switch(this.placement){case"top":case"bottom":this.indicator.style.width=`${s}px`,this.indicator.style.height="auto",this.indicator.style.translate=`${e.left}px`;break;case"start":case"end":this.indicator.style.width="auto",this.indicator.style.height=`${o}px`,this.indicator.style.translate=`0 ${e.top}px`}}syncTabsAndPanels(){this.tabs=this.getAllTabs({includeDisabled:!1}),this.panels=this.getAllPanels(),this.syncIndicator(),this.updateComplete.then((()=>this.updateScrollControls()))}updateScrollControls(){this.noScrollControls||(this.hasScrollControls=["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth),this.hasScrollControls=!1}syncIndicator(){this.getActiveTab()?(this.indicator.style.display="block",this.repositionIndicator()):this.indicator.style.display="none"}show(i){const s=this.tabs.find((s=>s.panel===i));s&&this.setActiveTab(s,{scrollBehavior:"smooth"})}render(){return s`
+      <div
+        part="base"
+        class=${c({"tab-group":!0,"tab-group--top":"top"===this.placement,"tab-group--bottom":"bottom"===this.placement,"tab-group--start":"start"===this.placement,"tab-group--end":"end"===this.placement,"tab-group--rtl":!0,"tab-group--has-scroll-controls":this.hasScrollControls})}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <div class="tab-group__nav-container" part="nav">
+          ${this.hasScrollControls?s`
+                <nile-icon-button
+                  part="scroll-button scroll-button--start"
+                  exportparts="base:scroll-button__base"
+                  class="tab-group__scroll-button tab-group__scroll-button--start"
+                  name='arrowright'
+                  library="system"
+                  label="scrollToStart"
+                  @click=${this.handleScrollToStart}
+                ></nile-icon-button>
+              `:""}
+
+          <div class="tab-group__nav">
+            <div part="tabs" class="tab-group__tabs" role="tablist">
+              <div part="active-tab-indicator" class="tab-group__indicator"></div>
+              <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
+            </div>
+          </div>
+
+          ${this.hasScrollControls?s`
+                <nile-icon-button
+                  part="scroll-button scroll-button--end"
+                  exportparts="base:scroll-button__base"
+                  class="tab-group__scroll-button tab-group__scroll-button--end"
+                  name='arrowleft'
+                  library="system"
+                  label="scrollToEnd"
+                  @click=${this.handleScrollToEnd}
+                ></nile-icon-button>
+              `:""}
+        </div>
+
+        <slot part="body" class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
+      </div>
+    `}};g.styles=t,i([o(".tab-group")],g.prototype,"tabGroup",void 0),i([o(".tab-group__body")],g.prototype,"body",void 0),i([o(".tab-group__nav")],g.prototype,"nav",void 0),i([o(".tab-group__indicator")],g.prototype,"indicator",void 0),i([n()],g.prototype,"hasScrollControls",void 0),i([p()],g.prototype,"placement",void 0),i([p()],g.prototype,"activation",void 0),i([p({attribute:"no-scroll-controls",type:Boolean})],g.prototype,"noScrollControls",void 0),i([r("noScrollControls",{waitUntilFirstUpdate:!0})],g.prototype,"updateScrollControls",null),i([r("placement",{waitUntilFirstUpdate:!0})],g.prototype,"syncIndicator",null),g=i([e("nile-tab-group")],g);export{g as N};

package/dist/nile-tab-panel/index.cjs.js

@@ -0,0 +1,2 @@
+System.register(["./nile-tab-panel.cjs.js","tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-tab-panel.css.cjs.js","lit/directives/class-map.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js","lit","../property-0f6a51ec.cjs.js"],function(_export,_context){"use strict";return{setters:[function(_nileTabPanelCjsJs){_export("NileTabPanel",_nileTabPanelCjsJs.N);},function(_tslib){},function(_index001CjsJs){},function(_litDecoratorsJs){},function(_nileTabPanelCssCjsJs){},function(_litDirectivesClassMapJs){},function(_internalWatchCjsJs){},function(_internalNileElementCjsJs){},function(_lit){},function(_property002CjsJs){}],execute:function(){}};});
+//# sourceMappingURL=index.cjs.js.map

package/dist/nile-tab-panel/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/nile-tab-panel/index.esm.js

@@ -0,0 +1 @@
+export{N as NileTabPanel}from"./nile-tab-panel.esm.js";import"tslib";import"../index-cd2f9c12.esm.js";import"lit/decorators.js";import"./nile-tab-panel.css.esm.js";import"lit/directives/class-map.js";import"../internal/watch.esm.js";import"../internal/nile-element.esm.js";import"lit";import"../property-09139d3c.esm.js";

package/dist/nile-tab-panel/nile-tab-panel.cjs.js

@@ -0,0 +1,2 @@
+System.register(["tslib","../index-cd83c5c8.cjs.js","lit/decorators.js","./nile-tab-panel.css.cjs.js","lit/directives/class-map.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js","../property-0f6a51ec.cjs.js","lit"],function(_export,_context){"use strict";var t,e,s,i,a,r,l,o,_templateObject,n,c;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_index001CjsJs){e=_index001CjsJs.x;},function(_litDecoratorsJs){s=_litDecoratorsJs.customElement;},function(_nileTabPanelCssCjsJs){i=_nileTabPanelCssCjsJs.s;},function(_litDirectivesClassMapJs){a=_litDirectivesClassMapJs.classMap;},function(_internalWatchCjsJs){r=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_property002CjsJs){o=_property002CjsJs.n;},function(_lit){}],execute:function(){n=0;_export("N",c=/*#__PURE__*/function(_l){_inherits(c,_l);var _super=_createSuper(c);function c(){var _this;_classCallCheck(this,c);_this=_super.apply(this,arguments),_this.attrId=++n,_this.componentId="nile-tab-panel-".concat(_this.attrId),_this.name="",_this.active=!1;return _this;}_createClass(c,[{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(c.prototype),"connectedCallback",this).call(this),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel");}},{key:"handleActiveChange",value:function handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true");}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <slot\n        part=\"base\"\n        class=","\n      ></slot>\n    "])),a({"tab-panel":!0,"tab-panel--active":this.active}));}}]);return c;}(l));c.styles=i,t([o({reflect:!0})],c.prototype,"name",void 0),t([o({type:Boolean,reflect:!0})],c.prototype,"active",void 0),t([r("active")],c.prototype,"handleActiveChange",null),_export("N",c=t([s("nile-tab-panel")],c));}};});
+//# sourceMappingURL=nile-tab-panel.cjs.js.map

package/dist/nile-tab-panel/nile-tab-panel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tab-panel.cjs.js","sources":["../../../src/nile-tab-panel/nile-tab-panel.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-tab-panel.css';\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * Nile icon component.\n *\n * @tag nile-tab-panel\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */\n@customElement('nile-tab-panel')\nexport class NileTabPanel extends NileElement {\n\n  static styles: CSSResultGroup = styles;\n\n  private readonly attrId = ++id;\n  private readonly componentId = `nile-tab-panel-${this.attrId}`;\n\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = '';\n\n  /** When true, the tab panel will be shown. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute('role', 'tabpanel');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-hidden', this.active ? 'false' : 'true');\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          'tab-panel': true,\n          'tab-panel--active': this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default NileTabPanel;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tab-panel': NileTabPanel;\n  }\n}\n"],"names":["id","_export","NileTabPanel","_l","_inherits","c","_super","_createSuper","this","attrId","componentId","name","active","_this","_createClass","key","value","connectedCallback","super","length","setAttribute","handleActiveChange","render","html","_templateObject","_taggedTemplateLiteral","classMap","NileElement","styles","__decorate","property","reflect","prototype","type","Boolean","watch","customElement"],"mappings":"6+IAgBIA,CAAK,CAAA,CAAA,CAAAC,OAAA,KAcIC,CAAN,uBAAAC,EAAA,EAAAC,SAAA,CAAAC,CAAA,CAAAF,EAAA,MAAAG,MAAA,CAAAC,YAAA,CAAAF,CAAA,EAAA,SAAAA,EAAA,uEAIYG,KAAAA,CAAMC,MAAAA,CAAAA,EAAKT,EACXQ,KAAAA,CAAAE,WAAAA,mBAAAA,MAAAA,CAAgCF,KAAAA,CAAKC,QAGzBD,KAAAA,CAAIG,IAAAA,CAAG,EAGQH,CAAAA,KAAAA,CAAMI,MAAG,CAAA,CAAA,CAwBtD,QAAAC,KAAA,EAtBCC,YAAA,CAAAT,CAAA,GAAAU,GAAA,qBAAAC,KAAA,UAAAC,kBAAA,EACEC,IAAAA,CAAAA,eAAAA,CAAAA,CAAAA,CAAAA,SAAAA,4BAAAA,IAAAA,OACAV,IAAKR,CAAAA,EAAAA,CAAKQ,KAAKR,EAAGmB,CAAAA,MAAAA,CAAS,CAAIX,CAAAA,IAAAA,CAAKR,GAAKQ,IAAKE,CAAAA,WAAAA,CAC9CF,IAAKY,CAAAA,YAAAA,CAAa,OAAQ,UAC3B,CAAA,EAGD,GAAAL,GAAA,sBAAAC,KAAA,UAAAK,mBAAA,CAAAA,CACEb,KAAKY,YAAa,CAAA,aAAA,CAAeZ,IAAKI,CAAAA,MAAAA,CAAS,QAAU,MAC1D,CAAA,EAED,GAAAG,GAAA,UAAAC,KAAA,UAAAM,OAAA,CAAAA,CACE,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,qFAGCC,CAAAA,CAAS,CACf,WAAA,CAAA,CAAa,CACb,CAAA,mBAAA,CAAqBlB,IAAKI,CAAAA,MAAAA,CAAAA,CAAAA,EAIjC,CAAA,WAAAP,CAAA,GAlC+BsB,CAA3B,GAEEzB,EAAM0B,MAAmBA,CAAAA,CAAAA,CAMHC,CAAA,CAAA,CAA5BC,EAAS,CAAEC,OAAAA,CAAAA,CAAS,CAAkB7B,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA8B,UAAA,MAAA,CAAA,IAAA,EAAA,CAAA,CAGKH,EAAA,CAA3CC,CAAAA,CAAS,CAAEG,IAAMC,CAAAA,OAAAA,CAASH,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAuB7B,EAAA8B,SAAA,CAAA,QAAA,CAAA,IAAA,EAS3DH,CAAAA,CAAAA,CAAAA,CAAA,CADCM,CAAM,CAAA,QAAA,CAAA,CAAA,CAGNjC,CAAA8B,CAAAA,SAAAA,CAAA,qBAAA,IAtBU9B,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAY2B,EAAA,CADxBO,CAAAA,CAAc,mBACFlC"}

package/dist/nile-tab-panel/nile-tab-panel.css.cjs.js

@@ -0,0 +1,2 @@
+System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var a,_templateObject,d;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){a=_index001CjsJs.i;}],execute:function(){_export("s",d=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --padding: 0;\n\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n"]))));}};});
+//# sourceMappingURL=nile-tab-panel.css.cjs.js.map

package/dist/nile-tab-panel/nile-tab-panel.css.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-tab-panel.css.cjs.js","sources":["../../../src/nile-tab-panel/nile-tab-panel.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * TabPanel CSS\n */\nexport const styles = css`\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --padding: 0;\n\n    display: none;\n  }\n\n  :host([active]) {\n    display: block;\n  }\n\n  .tab-panel {\n    display: block;\n    padding: var(--padding);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-tab-panel/nile-tab-panel.css.esm.js

@@ -0,0 +1,20 @@
+import{i as a}from"../index-cd2f9c12.esm.js";const d=a`
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    --padding: 0;
+
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .tab-panel {
+    display: block;
+    padding: var(--padding);
+  }
+`;export{d as s};

package/dist/nile-tab-panel/nile-tab-panel.esm.js

@@ -0,0 +1,6 @@
+import{__decorate as t}from"tslib";import{x as e}from"../index-cd2f9c12.esm.js";import{customElement as s}from"lit/decorators.js";import{s as i}from"./nile-tab-panel.css.esm.js";import{classMap as a}from"lit/directives/class-map.js";import{w as r}from"../internal/watch.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{n as o}from"../property-09139d3c.esm.js";import"lit";let n=0,m=class extends l{constructor(){super(...arguments),this.attrId=++n,this.componentId=`nile-tab-panel-${this.attrId}`,this.name="",this.active=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel")}handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true")}render(){return e`
+      <slot
+        part="base"
+        class=${a({"tab-panel":!0,"tab-panel--active":this.active})}
+      ></slot>
+    `}};m.styles=i,t([o({reflect:!0})],m.prototype,"name",void 0),t([o({type:Boolean,reflect:!0})],m.prototype,"active",void 0),t([r("active")],m.prototype,"handleActiveChange",null),m=t([s("nile-tab-panel")],m);export{m as N};

package/dist/src/index.d.ts

@@ -36,3 +36,6 @@ export { NileSwitcher } from './nile-switcher';
 export { NileContentEditor } from './nile-content-editor';
 export { NileDialog } from './nile-dialog';
 export { NileErrorNotification } from './nile-error-notification';
+export { NileTabGroup } from './nile-tab-group';
+export { NileTab } from './nile-tab';
+export { NileTabPanel } from './nile-tab-panel';

package/dist/src/index.js

@@ -36,4 +36,7 @@ export { NileSwitcher } from './nile-switcher';
 export { NileContentEditor } from './nile-content-editor';
 export { NileDialog } from './nile-dialog';
 export { NileErrorNotification } from './nile-error-notification';
+export { NileTabGroup } from './nile-tab-group';
+export { NileTab } from './nile-tab';
+export { NileTabPanel } from './nile-tab-panel';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink} from './nile-link';\nexport { NileButtonToggleGroup } from './nile-button-toggle-group';\nexport { NileButtonToggle } from './nile-button-toggle';\nexport { NileSwitcher } from './nile-switcher';\nexport { NileContentEditor } from './nile-content-editor';\nexport { NileDialog } from './nile-dialog';\nexport { NileErrorNotification } from './nile-error-notification';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink} from './nile-link';\nexport { NileButtonToggleGroup } from './nile-button-toggle-group';\nexport { NileButtonToggle } from './nile-button-toggle';\nexport { NileSwitcher } from './nile-switcher';\nexport { NileContentEditor } from './nile-content-editor';\nexport { NileDialog } from './nile-dialog';\nexport { NileErrorNotification } from './nile-error-notification';\nexport { NileTabGroup } from './nile-tab-group';\nexport { NileTab } from './nile-tab';\nexport { NileTabPanel } from './nile-tab-panel';\n"]}

package/dist/src/nile-calendar/nile-calendar.css.js

@@ -212,11 +212,8 @@ export const styles = css `
   }
 
   .calendar-switcher {
-    display: flex;
-    align-items: flex-start;
-    gap: 24px;
-    justify-content: space-between;
-    border-bottom: 1px solid #e5e9eb;
+    width: 100%;
+    margin-right: 24px;
   }
 
   .calendar-switch {

package/dist/src/nile-calendar/nile-calendar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n    margin-top: 6px;\n    margin-bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .current-date {\n    border: 1px solid #1978b8;\n  }\n\n  .day:hover {\n    background-color: #e5e9eb;\n  }\n\n  .filler {\n    color: #7f7f7f;\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .selected-date:hover {\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 365px;\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 4px;\n    width: 365px;\n  }\n\n  .base__relative {\n    width: 446px;\n  }\n\n  .base__range {\n    padding: 24px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding-bottom: 0px;\n    width: 365px;\n  }\n\n  .calender-input--relative {\n    width: 446px;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 24px 0 0 0;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n  }\n\n  .calendar-switcher {\n    display: flex;\n    align-items: flex-start;\n    gap: 24px;\n    justify-content: space-between;\n    border-bottom: 1px solid #e5e9eb;\n  }\n\n  .calendar-switch {\n    padding-bottom: 12px;\n    cursor: pointer;\n  }\n\n  .calendar-switch__active {\n    padding-bottom: 12px;\n    border-bottom: 4px solid #005ea6;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    width: 446px;\n    margin-top: 24px;\n  }\n\n  .time-unit-group {\n    display: flex;\n    align-items: center;\n    margin-bottom: 24px;\n    gap: 24px;\n  }\n\n  .time-unit-name {\n    width: 54px;\n  }\n\n  .time-unit-name span {\n    margin-right: 24px;\n    color: var(--color-text-default, #000);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .time-unit-value {\n    display: flex;\n  }\n\n  .time-value {\n    display: inline-flex;\n    width: 48px;\n    height: 32px;\n    box-sizing: border-box;\n    padding: 5px;\n    border: 1px solid #ddd;\n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n    margin-right: 16px;\n    border-radius: 4px;\n    border: 1px solid #c7ced4;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .time-value--selected {\n    background: #a5d3f3;\n  }\n\n  .time-value:last-child {\n    margin-right: 0;\n  }\n\n  .time-value:hover {\n    background: #e5e9eb;\n  }\n\n  .time-value--selected:hover {\n    background-color: #a5d3f3;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8RxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .calendar-container {\n    font-family: Colfax-regular;\n    width: 365px;\n    height: auto;\n    text-align: center;\n    background: white;\n  }\n\n  .calendar-container.with-margin {\n    margin-right: 20px;\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: 10px;\n    padding: 22px 20px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  .divider {\n    width: 100%;\n    height: 1px;\n    background: #c7ced4;\n  }\n\n  .day-names {\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    height: 50px;\n  }\n\n  .day-names,\n  .days {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    height: auto;\n    align-items: center;\n  }\n\n  .days {\n    height: auto;\n  }\n\n  .day {\n    flex-basis: calc(100% / 7);\n    box-sizing: border-box;\n    width: 48px;\n    align-items: center;\n    padding: 10px;\n    height: 32px;\n    margin-top: 6px;\n    margin-bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .current-date {\n    border: 1px solid #1978b8;\n  }\n\n  .day:hover {\n    background-color: #e5e9eb;\n  }\n\n  .filler {\n    color: #7f7f7f;\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .selected-date:hover {\n    background: #a5d3f3;\n  }\n\n  .calendar-wrapper {\n    background: white;\n    display: flex;\n    justify-content: space-between;\n    width: 365px;\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: 4px;\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .range-start {\n    background: #a5d3f3;\n    border-radius: 4px 0 0 4px;\n    color: white;\n  }\n\n  .range-end {\n    background: #a5d3f3;\n    border-radius: 0 4px 4px 0;\n    color: white;\n  }\n\n  .range-middle {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 0;\n  }\n\n  .day.selected {\n    background: #a5d3f3;\n    color: white;\n    border-radius: 4px;\n  }\n\n  .day.in-range {\n    background: #a5d3f3;\n    color: white;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: 4px;\n    background: #a5d3f3;\n  }\n\n  .base {\n    background-color: white;\n    border-radius: 4px;\n    width: 365px;\n  }\n\n  .base__relative {\n    width: 446px;\n  }\n\n  .base__range {\n    padding: 24px;\n  }\n\n  .calender-input {\n    margin-top: 6px;\n    padding-bottom: 0px;\n    width: 365px;\n  }\n\n  .calender-input--relative {\n    width: 446px;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    margin-top: 12px;\n  }\n\n  .manual-input {\n    width: 100%;\n  }\n\n  .manual-input-label {\n    color: #7f7f7f;\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .button-contaner {\n    width: 100%;\n    text-align: right;\n    padding: 24px 0 0 0;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin-right: 24px;\n  }\n\n  .calendar-switch {\n    padding-bottom: 12px;\n    cursor: pointer;\n  }\n\n  .calendar-switch__active {\n    padding-bottom: 12px;\n    border-bottom: 4px solid #005ea6;\n  }\n\n  .unit-container {\n    display: flex;\n    flex-direction: column;\n    width: 446px;\n    margin-top: 24px;\n  }\n\n  .time-unit-group {\n    display: flex;\n    align-items: center;\n    margin-bottom: 24px;\n    gap: 24px;\n  }\n\n  .time-unit-name {\n    width: 54px;\n  }\n\n  .time-unit-name span {\n    margin-right: 24px;\n    color: var(--color-text-default, #000);\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n  }\n\n  .time-unit-value {\n    display: flex;\n  }\n\n  .time-value {\n    display: inline-flex;\n    width: 48px;\n    height: 32px;\n    box-sizing: border-box;\n    padding: 5px;\n    border: 1px solid #ddd;\n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n    margin-right: 16px;\n    border-radius: 4px;\n    border: 1px solid #c7ced4;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .time-value--selected {\n    background: #a5d3f3;\n  }\n\n  .time-value:last-child {\n    margin-right: 0;\n  }\n\n  .time-value:hover {\n    background: #e5e9eb;\n  }\n\n  .time-value--selected:hover {\n    background-color: #a5d3f3;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-calendar/nile-calendar.d.ts

@@ -73,6 +73,7 @@ export declare class NileCalendar extends NileElement {
     handleDurationChange(event: any): void;
     handleUnitChange(event: any): void;
     handleTimeZoneChange(event: any): void;
+    onTypeChange(event: any): void;
     /**
      * Render method
      */

package/dist/src/nile-calendar/nile-calendar.js

@@ -482,6 +482,10 @@ let NileCalendar = class NileCalendar extends NileElement {
         this.selectedTimeZone = event.detail.value;
         this.requestUpdate();
     }
+    onTypeChange(event) {
+        console.log(event);
+        this.type = event.detail.value;
+    }
     /**
      * Render method
      */
@@ -500,22 +504,10 @@ let NileCalendar = class NileCalendar extends NileElement {
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
-            <div
-              class="calendar-switch${this.type === 'absolute'
-            ? '__active'
-            : ''}"
-              @click="${() => this.setType('absolute')}"
-            >
-              Absolute
-            </div>
-            <div
-              class="calendar-switch${this.type === 'relative'
-            ? '__active'
-            : ''}"
-              @click="${() => this.setType('relative')}"
-            >
-              Relative
-            </div>
+            <nile-tab-group @nile-tab-show="${this.onTypeChange}">
+              <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative">Relative</nile-tab>
+            </nile-tab-group>
           </div>
 
           <div class="calendar-timezone">