@aquera/nile-elements 1.6.6 → 1.6.8

package/dist/src/nile-nav-tab-group/nile-nav-tab-group.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-nav-tab-group.css.js","sourceRoot":"","sources":["../../../src/nile-nav-tab-group/nile-nav-tab-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2pBxB,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';\n\n/**\n * NavTabGroup CSS\n */\nexport const styles = css`\n \n  [hidden] {\n    display: none;\n  }\n\n  :host {\n    --indicator-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    --track-color: var(--nile-colors-neutral-400, var(--ng-componentcolors-utility-gray-500));\n    --track-width: var(--nile-border-width-1, var(--ng-border-width-1));\n    --tab-gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: block;\n\n    --nile-nav-tab-padding: var(--nile-spacing-none, var(--ng-spacing-none))  var(--nile-spacing-none, var(--ng-spacing-none))  var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none)) ;  \n  }\n\n    \n  .nav-tab-group {\n    display: flex;\n    border-radius: var(--nile-radius-none, var(--ng-radius-none));\n  }\n\n  .nav-tab-group__tabs {\n    display: flex;\n    position: relative;\n    gap: var(--tab-gap);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .hide__track {\n    --track-width: 0px;\n    --tab-gap: var(--nile-spacing-3px, var(--ng-spacing-xs));\n  }\n\n  .nav-tab-group__body {\n    display: block;\n    overflow: auto;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Nav container, scroll buttons, RTL\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-group--has-scroll-controls .nav-tab-group__nav-container {\n    position: relative;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n  \n  :host([variant='toggle']) .nav-tab-group--has-scroll-controls .nav-tab-group__nav-container,\n  :host([variant='toggle-button']) .nav-tab-group--has-scroll-controls .nav-tab-group__nav-container {\n    padding: 0;\n  }\n\n  :host([variant='toggle']) .nav-tab-group--has-scroll-controls .nav-tab-group__nav,\n  :host([variant='toggle-button']) .nav-tab-group--has-scroll-controls .nav-tab-group__nav {\n    scroll-padding-inline: var(--nile-width-20px, var(--ng-width-5));\n  }\n\n  .nav-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: var(--nile-width-20px, var(--ng-width-5));\n  }\n\n  .nav-tab-group__scroll-button--start {\n    left: 0;\n  }\n\n  .nav-tab-group__scroll-button--end {\n    right: 0;\n  }\n\n  .nav-tab-group--rtl .nav-tab-group__scroll-button--start {\n    left: auto;\n    right: -20px;\n  }\n\n  .nav-tab-group--rtl .nav-tab-group__scroll-button--end {\n    left: -20px;\n    right: auto;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Indicator, path, pill, no-track\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-group__indicator {\n    position: absolute;\n    transition: 0.3s translate ease, 0.3s width ease;\n    z-index: 2;\n  }\n\n  .nav-tab-group__indicator__path {\n    position: absolute;\n    height: var(--track-width);\n    width: 100%;\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n    bottom: 0px;\n    z-index: 0;\n  }\n\n\n\n  .nav-tab-group__indicator--no-track {\n    display: none;\n  }\n\n  .nav-tab-group__pill {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 0;\n    box-sizing: border-box;\n    border-radius: var(--nile-nav-tab-radius);\n    background: var(--nile-nav-tab-bg-active);\n    box-shadow: var(--nile-nav-tab-active-box-shadow, none);\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .nav-tab-group__pill.nav-tab-group__pill--inactive {\n    opacity: 0;\n    transition: none;\n    transform: none;\n    left: 0;\n    right: auto;\n    top: 0;\n    width: auto;\n    height: auto;\n  }\n\n  /* Idle: stroke only on the active tab. While moving, .pill--transitioning matches tab border (see positionPill). */\n  :host([variant='toggle']) .nav-tab-group__pill {\n    border: none;\n    \n  }\n\n  :host([variant='toggle']) .nav-tab-group__pill.nav-tab-group__pill--transitioning {\n    border: var(--nile-nav-tab-border);\n    overflow: hidden;\n  }\n\n  /* Shadow lives on the active tab container so selection never flashes unshaded while the pill moves. */\n  :host([variant='toggle-button']) .nav-tab-group__pill {\n    box-shadow: none;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Placement: top\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-group--top {\n    flex-direction: column;\n  }\n\n  .nav-tab-group--top .nav-tab-group__nav-container {\n    order: 1;\n  }\n\n  .nav-tab-group--top .nav-tab-group__nav,\n  .nav-tab-group--bottom .nav-tab-group__nav {\n    display: flex;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-tab-group--top .nav-tab-group__nav::-webkit-scrollbar,\n  .nav-tab-group--bottom .nav-tab-group__nav::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  .nav-tab-group--top .nav-tab-group__tabs {\n    flex: 1 1 auto;\n    position: relative;\n    flex-direction: row;\n  }\n\n  .nav-tab-group--top .nav-tab-group__indicator {\n    bottom: 0px;\n    border-bottom: 2px solid var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    z-index: 0;\n  }\n\n  .nav-tab-group--top .nav-tab-group__body {\n    order: 2;\n  }\n\n  .nav-tab-group--top ::slotted(nile-nav-tab-panel) {\n    --padding: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  /* --------------------------------------------------------------------------\n   * Placement: bottom\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-group--bottom {\n    flex-direction: column;\n  }\n\n  .nav-tab-group--bottom .nav-tab-group__nav-container {\n    order: 2;\n  }\n\n  .nav-tab-group--bottom .nav-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  :host(:is([variant='filled'], [variant='neutral-filled'], [variant='toggle'], [variant='toggle-button']))\n  .nav-tab-group--bottom .nav-tab-group__tabs {\n    border-top: none;\n  }\n\n  :host(:is([variant='filled'], [variant='neutral-filled'], [variant='toggle-button'], [variant='toggle']))\n  .nav-tab-group--top .nav-tab-group__nav,\n  :host(:is([variant='filled'], [variant='neutral-filled'], [variant='toggle-button'], [variant='toggle']))\n  .nav-tab-group--bottom .nav-tab-group__nav {\n    overflow: auto;\n  }\n\n  /* Symmetric inset so box-shadow isn’t clipped and the strip stays vertically centered (end-only\n     padding made top/bottom look uneven). */\n  :host([variant='toggle-button']) .nav-tab-group--top .nav-tab-group__nav,\n  :host([variant='toggle-button']) .nav-tab-group--bottom .nav-tab-group__nav {\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    box-sizing: border-box;\n    align-items: center;\n    padding-inline: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .nav-tab-group--bottom .nav-tab-group__indicator {\n    top: calc(-1 * var(--track-width));\n    border-top: solid var(--nile-border-width-2, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  .nav-tab-group--bottom .nav-tab-group__body {\n    order: 1;\n  }\n\n  .nav-tab-group--bottom ::slotted(nile-nav-tab-panel) {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  /* --------------------------------------------------------------------------\n   * Placement: start\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-group--start {\n    flex-direction: row;\n  }\n\n  .nav-tab-group--start .nav-tab-group__nav-container {\n    order: 1;\n  }\n\n  .nav-tab-group--start .nav-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  /* Block-level tab hosts match the flex column and full row height (wrap, multi-line labels). */\n  .nav-tab-group--start slot[name='nav']::slotted(nile-nav-tab),\n  .nav-tab-group--end slot[name='nav']::slotted(nile-nav-tab) {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  :host([variant='filled']) .nav-tab-group--start .nav-tab-group__tabs {\n    border-inline-end: none;\n  }\n\n  .nav-tab-group--start .nav-tab-group__indicator {\n    top: 0;\n    right: calc(-1 * var(--track-width));\n    border-right: solid var(--nile-width-2px, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  .nav-tab-group--start .nav-tab-group__body {\n    flex: 1 1 auto;\n    order: 2;\n  }\n\n  .nav-tab-group--start .nav-tab-group__indicator__path,\n  .nav-tab-group--bottom .nav-tab-group__indicator__path,\n  .nav-tab-group--end .nav-tab-group__indicator__path {\n    display: none;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Placement: end\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-group--end {\n    flex-direction: row;\n  }\n\n  .nav-tab-group--end .nav-tab-group__nav-container {\n    order: 2;\n  }\n\n  .nav-tab-group--end .nav-tab-group__tabs {\n    flex: 0 0 auto;\n    flex-direction: column;\n    border-inline-start: solid var(--track-width) var(--track-color);\n  }\n\n  :host([variant='filled']) .nav-tab-group--end .nav-tab-group__tabs {\n    border-inline-start: none;\n  }\n\n  .nav-tab-group--end .nav-tab-group__indicator {\n    top: 0;\n    left: calc(-1 * var(--track-width));\n    border-left: solid var(--nile-width-2px, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  .nav-tab-group--end .nav-tab-group__body {\n    flex: 1 1 auto;\n    order: 1;\n  }\n\n  /* Start & end: same horizontal panel padding */\n  .nav-tab-group--start ::slotted(nile-nav-tab-panel),\n  .nav-tab-group--end ::slotted(nile-nav-tab-panel) {\n    --padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));\n  }\n\n  /* --------------------------------------------------------------------------\n   * hide__track: slotted tab tokens\n   * -------------------------------------------------------------------------- */\n\n  .hide__track slot::slotted(nile-nav-tab) {\n    --nile-nav-tab-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    --nile-nav-tab-padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --nile-nav-tab-height: auto;\n    --nile-nav-tab-bg-hover: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n    --nile-nav-tab-bg-active: var(--nile-colors-brand-50, var(--ng-colors-bg-brand-primary-alt));\n  }\n\n  /* --------------------------------------------------------------------------\n   * fullWidth\n   * -------------------------------------------------------------------------- */\n\n  :host([fullWidth]) .nav-tab-group__tabs {\n    width: 100%;\n    flex: 1 1 auto;\n  }\n\n  :host([fullWidth]) ::slotted(nile-nav-tab) {\n    flex: 1;\n    min-width: 0;\n  }\n\n  :host([fullWidth]) .nav-tab-group.nav-tab-group--top .nav-tab-group__tabs {\n    display: flex;\n  }\n\n  :host([fullWidth]) {\n    --justify-content: center;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Variants: filled, neutral-filled, toggle, toggle-button\n   * -------------------------------------------------------------------------- */\n\n  :host([variant='filled']) {\n    --nile-nav-tab-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));\n    --nile-nav-tab-padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --nile-nav-tab-active-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    --nile-nav-tab-bg-active: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary-alt));\n    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    --nile-nav-tab-bg-hover: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary-alt));\n  }\n\n  :host([variant='neutral-filled']) {\n    --nile-nav-tab-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));\n    --nile-nav-tab-padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --nile-nav-tab-color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    --nile-nav-tab-bg-active: var(--nile-colors-dark-200, var(--ng-colors-bg-active));\n\n    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    --nile-nav-tab-bg-hover: var(--nile-colors-dark-200, var(--ng-colors-bg-active));\n    --nile-nav-tab-text-color-hover: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    --nile-nav-tab-active-color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  :host([variant='toggle-button']) .nav-tab-group__nav-container {\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary-alt));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) var(--nile-border-style-solid, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));\n  }\n  :host([variant='toggle-button'][placement='start']) .nav-tab-group__nav-container,\n:host([variant='toggle-button'][placement='end']) .nav-tab-group__nav-container {\n  padding-block: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  padding-inline: var(--nile-spacing-xs, var(--ng-spacing-xs));\n}\n\n  :host([variant='toggle-button']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    --nile-nav-tab-padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --nile-nav-tab-radius: var(--nile-radius-radius-md, var(--ng-radius-sm));\n    --nile-nav-tab-transparent-border: var(--nile-border-width-1, var(--ng-border-width-1)) var(--nile-border-style-solid, var(--ng-border-style-solid)) transparent;\n    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    position: relative;\n    box-sizing: border-box;\n    --nile-nav-tab-active-box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n    --nile-nav-tab-container-overflow: visible;\n    --nile-nav-tab-bg-hover: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    --nile-nav-tab-text-color-hover: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    --nile-nav-tab-active-color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  :host([variant='toggle']) {\n    --nile-nav-tab-radius: var(--nile-radius-radius-md, var(--ng-radius-sm));\n    --nile-nav-tab-padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --tab-gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    --nile-nav-tab-border: var(--nile-border-width-1, var(--ng-border-width-1)) var(--nile-border-style-solid, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    --nile-nav-tab-active-box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n    --nile-nav-transparent-border: var(--nile-border-width-1, var(--ng-border-width-1)) var(--nile-border-style-solid, var(--ng-border-style-solid)) transparent;\n    --nile-nav-tab-bg-hover: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    --nile-nav-tab-text-color-hover: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    --nile-nav-tab-active-color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    --nile-nav-tab-bg-active: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n  }\n\n  :host([variant='toggle']) .nav-tab-group__nav-container {\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary-alt));\n    border: none;\n    border-radius: var(--nile-border-size-6, var(--ng-radius-sm));\n    box-sizing: border-box;\n    position: relative;\n    overflow: visible;\n  }\n\n  :host([variant='toggle']) .nav-tab-group__toggle-frame {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    border: var(--nile-width-1px, var(--ng-border-width-1)) var(--nile-border-style-solid, var(--ng-border-style-solid))\n      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));\n    border-radius: inherit;\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  :host([variant='toggle']) .nav-tab-group__nav {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Placement start / end: host token overrides\n   * -------------------------------------------------------------------------- */\n\n  :host([placement='start']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary-alt));\n    --nile-nav-tab-radius: var(--nile-radius-sm, var(--ng-radius-sm)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-sm, var(--ng-radius-sm));\n    --white-space: normal;\n    --nile-nav-tab-height: auto; \n    --word-break: break-word;\n    --overflow-wrap: break-word;\n    --text-align: left;\n  }\n\n  :host([placement='start'][variant='underline']),\n  :host([placement='start']:not([variant])) {\n    --nile-nav-tab-bg-hover: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n    --nile-nav-tab-text-color-hover: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    --nile-nav-tab-padding: var(--nile-spacing-lg, var(--ng-spacing-3));\n    --nile-nav-tab-active-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  :host([variant='filled'][placement='start']) .nav-tab-group__tabs,\n  :host([variant='neutral-filled'][placement='start']) .nav-tab-group__tabs,\n  :host([variant='toggle'][placement='start']) .nav-tab-group__tabs,\n  :host([variant='toggle-button'][placement='start']) .nav-tab-group__tabs {\n    border-inline-end: none;\n    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    --nile-nav-tab-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));\n  }\n\n  :host([variant='neutral-filled'][placement='start']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-dark-200, var(--ng-colors-bg-active));\n    --nile-nav-tab-active-color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  :host([variant='toggle'][placement='start']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    --nile-nav-tab-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  :host([variant='toggle-button'][placement='start']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    --nile-nav-tab-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    --nile-nav-tab-padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --nile-nav-tab-bg-hover: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    padding-block: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-inline: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  :host([placement='end']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary-alt));\n    --nile-nav-tab-radius: 0 var(--nile-radius-sm, var(--ng-radius-sm)) var(--nile-radius-sm, var(--ng-radius-sm)) 0;\n    --white-space: normal;\n    --nile-nav-tab-height: auto;\n    --word-break: break-word;\n    --overflow-wrap: break-word;\n  }\n\n  :host([placement='end'][variant='underline']),\n  :host([placement='end']:not([variant])) {\n    --nile-nav-tab-bg-hover: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n    --nile-nav-tab-text-color-hover: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));\n    --nile-nav-tab-padding: var(--nile-spacing-lg, var(--ng-spacing-3));\n    --white-space: normal;\n    --nile-nav-tab-height: auto;\n    --word-break: break-word;\n    --overflow-wrap: break-word;\n    --text-align: left;\n  }\n\n  :host([variant='filled'][placement='end']) .nav-tab-group__tabs,\n  :host([variant='neutral-filled'][placement='end']) .nav-tab-group__tabs,\n  :host([variant='toggle'][placement='end']) .nav-tab-group__tabs,\n  :host([variant='toggle-button'][placement='end']) .nav-tab-group__tabs {\n    border-inline-start: none;\n    --tab-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    --nile-nav-tab-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));\n    \n  }\n\n  :host([variant='neutral-filled'][placement='end']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-dark-200, var(--ng-colors-bg-active));\n    --nile-nav-tab-active-color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  :host([variant='toggle'][placement='end']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    --nile-nav-tab-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  :host([variant='toggle-button'][placement='end']) {\n    --nile-nav-tab-bg-active: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n    --nile-nav-tab-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    --nile-nav-tab-padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n    --nile-nav-tab-bg-hover: var(--nile-colors-white-base, var(--ng-colors-bg-primary-alt));\n  }\n\n  /* --------------------------------------------------------------------------\n   * Active tab: slotted token overrides (pill / underline variants)\n   * -------------------------------------------------------------------------- */\n\n  :host(:is([variant='filled'], [variant='neutral-filled'], [variant='toggle']))\n  slot[name='nav']::slotted(nile-nav-tab[active]) {\n    --nile-nav-tab-active-box-shadow: none;\n  }\n\n  /* Pill variants: paint fill/border only on .nav-tab-container; keep link layer transparent so a\n   * second white plane can’t extend past the border (grey stroke + white fringe). */\n  :host(:is([variant='filled'], [variant='neutral-filled'], [variant='toggle'], [variant='toggle-button']))\n  slot[name='nav']::slotted(nile-nav-tab) {\n    --tab-active-background-color: transparent;\n    --tab-hover-background-color: transparent;\n    position: relative;\n    z-index: 1;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Indicator placement: left (vertical start rail)\n   * -------------------------------------------------------------------------- */\n\n  :host([indicatorPlacement='left'][placement='start']) {\n    --nile-nav-tab-bg-active: none;\n    --nile-nav-tab-bg-hover: none;\n    --tab-gap: 8px;\n    --nile-nav-tab-active-color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n    --nile-nav-tab-text-color-hover: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n  }\n\n  :host([indicatorPlacement='left']) .nav-tab-group--start .nav-tab-group__indicator {\n    top: 0;\n    right: auto;\n    left: calc(-1 * var(--track-width));\n    border-right: none;\n    border-left: solid var(--nile-border-width-2, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  :host([indicatorPlacement='left']) .nav-tab-group--start .nav-tab-group__tabs {\n    border-inline-end: none;\n  }\n\n  /* --------------------------------------------------------------------------\n   * Hover indicator\n   * -------------------------------------------------------------------------- */\n\n  .nav-tab-group__hover-indicator {\n    position: absolute;\n    pointer-events: none;\n    opacity: 0;\n    transition: none;\n    z-index: 2;\n  }\n\n  .nav-tab-group--top .nav-tab-group__hover-indicator {\n    bottom: 0px;\n    height: 0;\n    border-bottom: 2px solid var(--indicator-color);\n  }\n\n  .nav-tab-group--bottom .nav-tab-group__hover-indicator {\n    top: calc(-1 * var(--track-width));\n    height: 0;\n    border-top: solid var(--nile-border-width-2, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  .nav-tab-group--start .nav-tab-group__hover-indicator {\n    top: 0;\n    right: calc(-1 * var(--track-width));\n    width: 0;\n    border-right: solid var(--nile-border-width-2, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  .nav-tab-group--end .nav-tab-group__hover-indicator {\n    top: 0;\n    left: calc(-1 * var(--track-width));\n    width: 0;\n    border-left: solid var(--nile-border-width-2, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  :host([indicatorPlacement='left']) .nav-tab-group--start .nav-tab-group__hover-indicator {\n    top: 0;\n    right: auto;\n    left: calc(-1 * var(--track-width));\n    border-right: none;\n    border-left: solid var(--nile-border-width-2, var(--ng-border-width-2)) var(--indicator-color);\n  }\n\n  /* --------------------------------------------------------------------------\n   * Reduced motion\n   * -------------------------------------------------------------------------- */\n\n  @media (prefers-reduced-motion: reduce) {\n    * {\n      animation: none;\n      transition: none;\n    }\n  }\n\n  :host([placement='bottom'][variant='underline']),\n:host([placement='bottom']:not([variant])) {\n  --nile-nav-tab-padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-none, var(--ng-spacing-none));\n}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-nav-tab-group/nile-nav-tab-group.d.ts

@@ -0,0 +1,119 @@
+/**
+ * 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 NileElement from '../internal/nile-element';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
+import '../nile-icon-button/nile-icon-button';
+/**
+ * Tab group navigation component.
+ *
+ * @tag nile-nav-tab-group
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be `<nile-nav-tab-panel>` elements.
+ * @slot nav - Used for grouping tabs in the tab group. Must be `<nile-nav-tab>` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tabs - The container that wraps the tabs.
+ * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+ * @csspart toggle-frame - Toggle variant: absolutely positioned ring that draws the group chrome (tabs paint above it).
+ * @csspart body - The tab group's body where tab panels are slotted in.
+ * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<nile-icon-button>`.
+ * @csspart scroll-button--start - The starting scroll button.
+ * @csspart scroll-button--end - The ending scroll button.
+ * @csspart scroll-button__base - The scroll button's exported `base` part.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --show-indicator-on-hover - Whether to show the indicator on hover.
+ *
+ * @event nile-close - Bubbled from a closable `<nile-nav-tab>`; re-emitted so parents can listen on this element.
+ */
+export declare class NileNavTabGroup extends NileElement {
+    static styles: CSSResultGroup;
+    /**
+     * Selection model (for reviewers):
+     * - `activeTabName` is the internal source of truth; clicks and keyboard update it.
+     * - `activeTabProp` / attribute `value` is the host-controlled API; changes in `updated()` copy into `activeTabName`.
+     * - `setActiveTab()` syncs each tab’s `active` flag, each panel’s `active`, `activeTabProp` / `value`, indicator/pill geometry, and optionally emits `nile-tab-change`.
+     * - `this.tabs` only includes non-disabled tabs (see `syncTabsAndPanels`); keyboard roving focus uses that list.
+     */
+    private activeTab?;
+    private mutationObserver;
+    private resizeObserver;
+    private visibilityObserver;
+    private pillRepositionTimer;
+    private pillTransitionClassTimer;
+    private pillReady;
+    private observedTabs;
+    private tabs;
+    private panels;
+    /** Tabs emit `nile-close` on the host; bubble is stopped so we re-emit from the group with `{ panel }` for consumers. */
+    private readonly handleCloseEvent;
+    /** Tracks visibility for snapping the indicator when a hidden parent (e.g. dropdown) is reopened. */
+    private tabGroupWasIntersecting;
+    /** Last measured nav width; used to detect layout resume after display:none / collapse. */
+    private lastNavClientWidth;
+    tabGroup: HTMLElement;
+    body: HTMLSlotElement;
+    nav: HTMLElement;
+    indicator: HTMLElement;
+    hoverIndicator: HTMLElement;
+    hasScrollControls: boolean;
+    /** The placement of the tabs. */
+    placement: 'top' | 'bottom' | 'start' | 'end';
+    /** The currently active tab value. */
+    activeTabProp: string;
+    /** Track for showing Indicators and Background. */
+    noTrack: boolean;
+    /** Disables the scroll arrows that appear when tabs overflow. */
+    noScrollControls: boolean;
+    /** Controls whether tabs are centered and have equal width. */
+    centered: boolean;
+    variant: 'underline' | 'filled' | 'toggle' | 'neutral-filled' | 'toggle-button';
+    indicatorPlacement: string;
+    fullWidth: boolean;
+    width: string;
+    showIndicatorOnHover: boolean;
+    activeTabName: string;
+    private get showScrollControlButtons();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    syncIndicator(): void;
+    private handleNavClick;
+    private positionPill;
+    private debouncedPositionPill;
+    private handleTabHover;
+    private handleTabHoverLeave;
+    private positionHoverIndicator;
+    render(): import("lit-html").TemplateResult<1>;
+    private getAllTabs;
+    private getAllPanels;
+    /**
+     * Resolves the tab to treat as selected for indicator/pill wiring.
+     * Prefer `activeTabName` match; if empty (before init), fall back to `.active` or first usable tab.
+     */
+    private getActiveTab;
+    /** Reflects horizontal overflow into `hasScrollControls` (top/bottom only; vertical stacks do not scroll this strip). */
+    setScrollControls(): void;
+    private handleKeyDown;
+    private handleScrollToStart;
+    private handleScrollToEnd;
+    private setActiveTab;
+    private setAriaLabels;
+    private getRelativeOffsetToAncestor;
+    private getLayoutBoxRelativeToContainer;
+    private repositionIndicator;
+    private syncTabsAndPanels;
+}
+export default NileNavTabGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-nav-tab-group': NileNavTabGroup;
+    }
+}