npm - @aquera/nile-elements - Versions diffs - 1.9.9 → 1.9.10 - Mend

@aquera/nile-elements 1.9.9 → 1.9.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-nav-tab.css.js","sourceRoot":"","sources":["../../../src/nile-nav-tab/nile-nav-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiMxB~~,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\nexport const styles = css`\n \n [hidden] {\n display: none;\n }\n\n :host {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n position: relative;\n\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 cursor: pointer;\n }\n\n :host([centered]) {\n flex: 1;\n text-align: center;\n }\n\n / --------------------------------------------------------------------------\n * Tab shell (list item)\n * -------------------------------------------------------------------------- /\n\n .nav-tab-container {\n flex: 1 1 auto;\n width: var(--nav-tab-item-width);\n padding: 0;\n box-sizing: border-box;\n border-radius: var(--nile-nav-tab-radius);\n border: var(--nile-nav-transparent-border);\n transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n position: relative;\n display: flex;\n align-items: stretch;\n list-style: none;\n overflow: var(--nile-nav-tab-container-overflow);\n margin-top: var(--nile-nav-tab-margin);\n margin-bottom: var(--nile-nav-tab-margin);\n \n }\n\n / --------------------------------------------------------------------------\n * nile-link wrapper + internal <a> (part base)\n * -------------------------------------------------------------------------- /\n\n .nav-tab {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n width: 100%;\n min-width: 0;\n min-height: 0;\n align-items: center;\n box-sizing: border-box;\n }\n\n .nav-tab::part(base) {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n width: 100%;\n min-height: 100%;\n height: 100%;\n align-items: center;\n justify-content: var(--justify-content);\n white-space: var(--white-space, nowrap);\n user-select: none;\n transition: 0.2s box-shadow, 0.2s color;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n box-sizing: border-box;\n text-decoration: none;\n font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n word-break: var(--word-break);\n overflow-wrap: var(--overflow-wrap);\n text-align: var(--text-align);\n padding: var(--nile-nav-tab-padding);\n }\n\n / --------------------------------------------------------------------------\n * Host: active / hover (container + link color)\n * -------------------------------------------------------------------------- /\n\n :host([active]) .nav-tab-container {\n background-color: var(--nile-nav-tab-bg-active);\n border-radius: var(--nile-nav-tab-radius);\n border: var(--nile-nav-tab-border);\n box-shadow: var(--nile-nav-tab-active-box-shadow);\n }\n\n :host(:hover:not([disabled]):not([active])) .nav-tab-container {\n background-color: var(--nile-nav-tab-bg-hover);\n border: var(--nile-nav-tab-border);\n box-shadow: var(--nile-nav-tab-active-box-shadow);\n }\n\n :host(:hover:not([disabled]):not([active])) .nav-tab-container ::part(base) {\n color: var(--nile-nav-tab-text-color-hover, var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700)));\n }\n\n / --------------------------------------------------------------------------\n * nile-link part: label inherits anchor\n * -------------------------------------------------------------------------- /\n\n .nav-tab::part(label) {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n }\n\n / --------------------------------------------------------------------------\n * Interaction states (::part base)\n * -------------------------------------------------------------------------- /\n\n / Default (inactive) /\n .nav-tab:not(.nav-tab--active):not(.nav-tab--disabled)::part(base) {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n }\n\n / Hover /\n .nav-tab:hover:not(.nav-tab--disabled)::part(base),\n .nav-tab:hover:not(.nav-tab--disabled)::part(label) {\n text-decoration: none;\n }\n .nav-tab:hover:not(.nav-tab--disabled)::part(base) {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-brand-secondary-700));\n background-color: var(--tab-hover-background-color);\n }\n\n / Focus — roving tabindex is on :host; inner link stays tabindex=-1 /\n :host(:focus-visible:not([disabled])) .nav-tab::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n / Active /\n .nav-tab.nav-tab--active:not(.nav-tab--disabled)::part(base) {\n color: var(--nile-nav-tab-active-color, var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)));\n background-color: var(--tab-active-background-color);\n }\n\n / --------------------------------------------------------------------------\n * Disabled\n * -------------------------------------------------------------------------- /\n\n .nav-tab.nav-tab--disabled {\n cursor: not-allowed;\n }\n\n :host([disabled]) .nav-tab-container {\n cursor: not-allowed;\n }\n\n .nav-tab.nav-tab--disabled::part(base) {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .nav-tab.nav-tab--disabled::part(label) {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n }\n\n .nav-tab.nav-tab--disabled:hover::part(base),\n :host([disabled]:focus-visible) .nav-tab::part(base) {\n background-color: transparent;\n }\n\n / --------------------------------------------------------------------------\n * Closable: close button\n * -------------------------------------------------------------------------- */\n\n .nav-tab__close-button {\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .nav-tab__close-button::part(base) {\n padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n \n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-nav-tab.css.js","sourceRoot":"","sources":["../../../src/nile-nav-tab/nile-nav-tab.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MxB,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\nexport const styles = css`\n \n [hidden] {\n display: none;\n }\n\n :host {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n position: relative;\n\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 cursor: pointer;\n }\n\n :host([data-has-label]:focus-visible) {\n outline: none;\n }\n\n :host([data-has-label]:focus-visible:not([disabled])) [part~='name'] {\n outline: var(--nile-border-width-2, var(--ng-border-width-2)) var(--nile-border-style-solid, var(--ng-border-style-solid))\n var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1, 1px));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xxs));\n }\n\n :host([centered]) {\n flex: 1;\n text-align: center;\n }\n\n / --------------------------------------------------------------------------\n * Tab shell (list item)\n * -------------------------------------------------------------------------- /\n\n .nav-tab-container {\n flex: 1 1 auto;\n width: var(--nav-tab-item-width);\n padding: 0;\n box-sizing: border-box;\n border-radius: var(--nile-nav-tab-radius);\n border: var(--nile-nav-transparent-border);\n transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n position: relative;\n display: flex;\n align-items: stretch;\n list-style: none;\n overflow: var(--nile-nav-tab-container-overflow);\n margin-top: var(--nile-nav-tab-margin);\n margin-bottom: var(--nile-nav-tab-margin);\n \n }\n\n / --------------------------------------------------------------------------\n * nile-link wrapper + internal <a> (part base)\n * -------------------------------------------------------------------------- /\n\n .nav-tab {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n width: 100%;\n min-width: 0;\n min-height: 0;\n align-items: center;\n box-sizing: border-box;\n }\n\n .nav-tab::part(base) {\n display: flex;\n flex: 1 1 auto;\n align-self: stretch;\n width: 100%;\n min-height: 100%;\n height: 100%;\n align-items: center;\n justify-content: var(--justify-content);\n white-space: var(--white-space, nowrap);\n user-select: none;\n transition: 0.2s box-shadow, 0.2s color;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n box-sizing: border-box;\n text-decoration: none;\n font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n word-break: var(--word-break);\n overflow-wrap: var(--overflow-wrap);\n text-align: var(--text-align);\n padding: var(--nile-nav-tab-padding);\n }\n\n / --------------------------------------------------------------------------\n * Host: active / hover (container + link color)\n * -------------------------------------------------------------------------- /\n\n :host([active]) .nav-tab-container {\n background-color: var(--nile-nav-tab-bg-active);\n border-radius: var(--nile-nav-tab-radius);\n border: var(--nile-nav-tab-border);\n box-shadow: var(--nile-nav-tab-active-box-shadow);\n }\n\n :host(:hover:not([disabled]):not([active])) .nav-tab-container {\n background-color: var(--nile-nav-tab-bg-hover);\n border: var(--nile-nav-tab-border);\n box-shadow: var(--nile-nav-tab-active-box-shadow);\n }\n\n :host(:hover:not([disabled]):not([active])) .nav-tab-container ::part(base) {\n color: var(--nile-nav-tab-text-color-hover, var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700)));\n }\n\n / --------------------------------------------------------------------------\n * nile-link part: label inherits anchor\n * -------------------------------------------------------------------------- /\n\n .nav-tab::part(label) {\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n }\n\n / --------------------------------------------------------------------------\n * Interaction states (::part base)\n * -------------------------------------------------------------------------- /\n\n / Default (inactive) /\n .nav-tab:not(.nav-tab--active):not(.nav-tab--disabled)::part(base) {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));\n }\n\n / Hover /\n .nav-tab:hover:not(.nav-tab--disabled)::part(base),\n .nav-tab:hover:not(.nav-tab--disabled)::part(label) {\n text-decoration: none;\n }\n .nav-tab:hover:not(.nav-tab--disabled)::part(base) {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-brand-secondary-700));\n background-color: var(--tab-hover-background-color);\n }\n\n / Focus — roving tabindex is on :host; inner link stays tabindex=-1 /\n :host(:focus-visible:not([disabled])) .nav-tab::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n / Active /\n .nav-tab.nav-tab--active:not(.nav-tab--disabled)::part(base) {\n color: var(--nile-nav-tab-active-color, var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)));\n background-color: var(--tab-active-background-color);\n }\n\n / --------------------------------------------------------------------------\n * Disabled\n * -------------------------------------------------------------------------- /\n\n .nav-tab.nav-tab--disabled {\n cursor: not-allowed;\n }\n\n :host([disabled]) .nav-tab-container {\n cursor: not-allowed;\n }\n\n .nav-tab.nav-tab--disabled::part(base) {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .nav-tab.nav-tab--disabled::part(label) {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n }\n\n .nav-tab.nav-tab--disabled:hover::part(base),\n :host([disabled]:focus-visible) .nav-tab::part(base) {\n background-color: transparent;\n }\n\n / --------------------------------------------------------------------------\n * Closable: close button\n * -------------------------------------------------------------------------- */\n\n .nav-tab__close-button {\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .nav-tab__close-button::part(base) {\n padding: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-nav-tab/nile-nav-tab.d.ts CHANGED Viewed

@@ -27,6 +27,8 @@ export declare class NileNavTab extends NileElement {
     firstUpdated(): void;
     updated(): void;
     private syncA11yState;
+    /** Whether the default slot renders text, i.e. whether `part="name"` has a box. */
+    private hasLabelText;
     /**
      * Give the host element the accessible name, since nile-link is hidden
      * from the accessibility tree.

package/dist/src/nile-nav-tab/nile-nav-tab.js CHANGED Viewed

@@ -55,6 +55,18 @@ let NileNavTab = class NileNavTab extends NileElement {
             this.removeAttribute('aria-hidden');
         }
     }
+    /** Whether the default slot renders text, i.e. whether `part="name"` has a box. */
+    hasLabelText() {
+        const defaultSlot = this.shadowRoot?.querySelector('slot:not([name])');
+        if (!defaultSlot) {
+            return false;
+        }
+        return defaultSlot
+            .assignedNodes({ flatten: true })
+            .map(node => node.textContent ?? '')
+            .join('')
+            .trim() !== '';
+    }
     /**
      * Give the host element the accessible name, since nile-link is hidden
      * from the accessibility tree.
@@ -62,6 +74,7 @@ let NileNavTab = class NileNavTab extends NileElement {
      * Auto-derived names set `data-auto-aria-label="true"` so slot/text updates can refresh them.
      */
     updateAccessibleName() {
+        this.toggleAttribute('data-has-label', this.hasLabelText());
         const userDefinedAriaLabel = this.hasAttribute('aria-label') && this.getAttribute('data-auto-aria-label') !== 'true';
         if (userDefinedAriaLabel) {
             return;

package/dist/src/nile-nav-tab/nile-nav-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-nav-tab.js","sourceRoot":"","sources":["../../../src/nile-nav-tab/nile-nav-tab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,wBAAwB,CAAC;AAChC,IAAI,EAAE,GAAG,CAAC,CAAC;AAGJ,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;QAGY,WAAM,GAAG,EAAE,EAAE,CAAC;QACd,gBAAW,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC;QAI7D,6DAA6D;QAChC,UAAK,GAAG,EAAE,CAAC;QAExC,wCAAwC;QACI,WAAM,GAAG,KAAK,CAAC;QAE3D,uDAAuD;QAC1B,aAAQ,GAAG,KAAK,CAAC;QAE9C,+CAA+C;QACH,aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;IAoJ/D,CAAC;IAhJC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1D,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACnE,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAErE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,oBAAoB;QAC1B,MAAM,oBAAoB,GACxB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,KAAK,MAAM,CAAC;QAE1F,IAAI,oBAAoB,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QAEnE,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;YACvC,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,KAAY;QACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1B,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,MAAM,eAAe,GACnB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,GAAuB,CAAC,CAAC;YACnE,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;QAErB,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,OAAsB;QAC1B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IAED,IAAI;QACF,KAAK,CAAC,IAAI,EAAE,CAAC;IACf,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC;QAEtC,OAAO,IAAI,CAAA;;;kBAGG,QAAQ,CAAC;YACf,SAAS,EAAE,IAAI;YACf,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,iBAAiB,EAAE,IAAI,CAAC,MAAM;YAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;YAClC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;SACnC,CAAC;;;iBAGK,IAAI,CAAC,IAAI,IAAI,OAAO;;;;;;;;mBAQlB,IAAI,CAAC,cAAc;;4CAEM,IAAI,CAAC,oBAAoB;gDACrB,IAAI,CAAC,oBAAoB;4CAC7B,IAAI,CAAC,oBAAoB;;YAEzD,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA;;;;;;;;8BAQY,IAAI,CAAC,QAAQ;2BAChB,IAAI,CAAC,gBAAgB;;;eAGjC;YACH,CAAC,CAAC,OAAO;;;KAGhB,CAAC;IACJ,CAAC;;AAtKM,iBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAKpB;IAAlB,KAAK,CAAC,UAAU,CAAC;0CAAsB;AAGX;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAY;AAGI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAgB;AAG9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAGF;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAEjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAe;AAiFzD;IADC,KAAK,CAAC,QAAQ,CAAC;oDAGf;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;sDAGjB;AA9GU,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAwKtB;;AAED,eAAe,UAAU,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 { html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } from 'lit';\n\nimport { styles } from './nile-nav-tab.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { MouseKey } from '../internal/enum';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport '../nile-link/nile-link';\nlet id = 0;\n\n@customElement('nile-nav-tab')\nexport class NileNavTab extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private readonly attrId = ++id;\n private readonly componentId = `nile-nav-tab-${this.attrId}`;\n\n @query('.nav-tab') navTab!: HTMLElement;\n\n /* The name of the tab panel this tab is associated with. /\n @property({ reflect: true }) panel = '';\n\n /* Draws the tab in an active state. /\n @property({ type: Boolean, reflect: true }) active = false;\n\n /* Makes the tab closable and shows a close button. /\n @property({ type: Boolean }) closable = false;\n\n /* Disables the tab and prevents selection. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: Boolean, reflect: true }) centered = false;\n\n @property({ type: String, reflect: true }) link?: string;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tab');\n this.syncA11yState();\n }\n\n firstUpdated() {\n this.syncA11yState();\n this.updateAccessibleName();\n }\n\n updated() {\n this.syncA11yState();\n this.updateAccessibleName();\n }\n\n private syncA11yState() {\n this.id = this.id \|\| this.componentId;\n this.tabIndex = this.disabled ? -1 : this.active ? 0 : -1;\n\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n if (this.disabled) {\n this.setAttribute('aria-hidden', 'true');\n } else {\n this.removeAttribute('aria-hidden');\n }\n }\n\n /\n Give the host element the accessible name, since nile-link is hidden\n * from the accessibility tree.\n * Author `aria-label` (without `data-auto-aria-label`) is never overwritten so icon-only tabs can keep explicit names.\n * Auto-derived names set `data-auto-aria-label=\"true\"` so slot/text updates can refresh them.\n */\n private updateAccessibleName() {\n const userDefinedAriaLabel =\n this.hasAttribute('aria-label') && this.getAttribute('data-auto-aria-label') !== 'true';\n\n if (userDefinedAriaLabel) {\n return;\n }\n\n const label = (this.textContent \|\| '').replace(/\\s+/g, ' ').trim();\n\n if (label) {\n this.setAttribute('aria-label', label);\n this.setAttribute('data-auto-aria-label', 'true');\n } else {\n this.removeAttribute('aria-label');\n this.removeAttribute('data-auto-aria-label');\n }\n }\n\n private handleCloseClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.emit('nile-close');\n }\n\n private handleTabClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n const isModifiedClick =\n Object.values(MouseKey).some(key => event[key as keyof MouseEvent]) \|\|\n event.button !== 0;\n\n if (isModifiedClick) {\n return;\n }\n\n event.preventDefault();\n }\n\n @watch('active')\n handleActiveChange() {\n this.syncA11yState();\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.syncA11yState();\n }\n\n focus(options?: FocusOptions) {\n super.focus(options);\n }\n\n blur() {\n super.blur();\n }\n\n render() {\n this.id = this.id \|\| this.componentId;\n\n return html`\n <li part=\"base tab\" class=\"nav-tab-container\" role=\"presentation\">\n <nile-link\n class=${classMap({\n 'nav-tab': true,\n 'tab--centered': this.centered,\n 'nav-tab--active': this.active,\n 'nav-tab--closable': this.closable,\n 'nav-tab--disabled': this.disabled\n })}\n tabindex=\"-1\"\n role=\"none\"\n href=${this.link \|\| nothing}\n aria-hidden=\"true\"\n exportparts=\"\n base:link,\n prefix:link-prefix,\n label:link-label,\n suffix:link-suffix\n \"\n @click=${this.handleTabClick}\n >\n <slot name=\"prefix\" @slotchange=${this.updateAccessibleName}></slot>\n <span part=\"name\"><slot @slotchange=${this.updateAccessibleName}></slot></span>\n <slot name=\"suffix\" @slotchange=${this.updateAccessibleName}></slot>\n\n ${this.closable\n ? html`\n <nile-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n library=\"system\"\n label=\"close\"\n class=\"nav-tab__close-button\"\n ?disabled=${this.disabled}\n @click=${this.handleCloseClick}\n tabindex=\"-1\"\n ></nile-icon-button>\n `\n : nothing}\n </nile-link>\n </li>\n `;\n }\n}\n\nexport default NileNavTab;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-nav-tab': NileNavTab;\n }\n}"]}
1	+ {"version":3,"file":"nile-nav-tab.js","sourceRoot":"","sources":["../../../src/nile-nav-tab/nile-nav-tab.ts"],"names":[],"mappings":"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","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 { html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } from 'lit';\n\nimport { styles } from './nile-nav-tab.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { MouseKey } from '../internal/enum';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport '../nile-link/nile-link';\nlet id = 0;\n\n@customElement('nile-nav-tab')\nexport class NileNavTab extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private readonly attrId = ++id;\n private readonly componentId = `nile-nav-tab-${this.attrId}`;\n\n @query('.nav-tab') navTab!: HTMLElement;\n\n /* The name of the tab panel this tab is associated with. /\n @property({ reflect: true }) panel = '';\n\n /* Draws the tab in an active state. /\n @property({ type: Boolean, reflect: true }) active = false;\n\n /* Makes the tab closable and shows a close button. /\n @property({ type: Boolean }) closable = false;\n\n /* Disables the tab and prevents selection. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: Boolean, reflect: true }) centered = false;\n\n @property({ type: String, reflect: true }) link?: string;\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'tab');\n this.syncA11yState();\n }\n\n firstUpdated() {\n this.syncA11yState();\n this.updateAccessibleName();\n }\n\n updated() {\n this.syncA11yState();\n this.updateAccessibleName();\n }\n\n private syncA11yState() {\n this.id = this.id \|\| this.componentId;\n this.tabIndex = this.disabled ? -1 : this.active ? 0 : -1;\n\n this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n if (this.disabled) {\n this.setAttribute('aria-hidden', 'true');\n } else {\n this.removeAttribute('aria-hidden');\n }\n }\n\n /* Whether the default slot renders text, i.e. whether `part=\"name\"` has a box. /\n private hasLabelText() {\n const defaultSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n if (!defaultSlot) {\n return false;\n }\n\n return defaultSlot\n .assignedNodes({ flatten: true })\n .map(node => node.textContent ?? '')\n .join('')\n .trim() !== '';\n }\n\n /\n Give the host element the accessible name, since nile-link is hidden\n * from the accessibility tree.\n * Author `aria-label` (without `data-auto-aria-label`) is never overwritten so icon-only tabs can keep explicit names.\n * Auto-derived names set `data-auto-aria-label=\"true\"` so slot/text updates can refresh them.\n */\n private updateAccessibleName() {\n this.toggleAttribute('data-has-label', this.hasLabelText());\n\n const userDefinedAriaLabel =\n this.hasAttribute('aria-label') && this.getAttribute('data-auto-aria-label') !== 'true';\n\n if (userDefinedAriaLabel) {\n return;\n }\n\n const label = (this.textContent \|\| '').replace(/\\s+/g, ' ').trim();\n\n if (label) {\n this.setAttribute('aria-label', label);\n this.setAttribute('data-auto-aria-label', 'true');\n } else {\n this.removeAttribute('aria-label');\n this.removeAttribute('data-auto-aria-label');\n }\n }\n\n private handleCloseClick(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n this.emit('nile-close');\n }\n\n private handleTabClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n const isModifiedClick =\n Object.values(MouseKey).some(key => event[key as keyof MouseEvent]) \|\|\n event.button !== 0;\n\n if (isModifiedClick) {\n return;\n }\n\n event.preventDefault();\n }\n\n @watch('active')\n handleActiveChange() {\n this.syncA11yState();\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.syncA11yState();\n }\n\n focus(options?: FocusOptions) {\n super.focus(options);\n }\n\n blur() {\n super.blur();\n }\n\n render() {\n this.id = this.id \|\| this.componentId;\n\n return html`\n <li part=\"base tab\" class=\"nav-tab-container\" role=\"presentation\">\n <nile-link\n class=${classMap({\n 'nav-tab': true,\n 'tab--centered': this.centered,\n 'nav-tab--active': this.active,\n 'nav-tab--closable': this.closable,\n 'nav-tab--disabled': this.disabled\n })}\n tabindex=\"-1\"\n role=\"none\"\n href=${this.link \|\| nothing}\n aria-hidden=\"true\"\n exportparts=\"\n base:link,\n prefix:link-prefix,\n label:link-label,\n suffix:link-suffix\n \"\n @click=${this.handleTabClick}\n >\n <slot name=\"prefix\" @slotchange=${this.updateAccessibleName}></slot>\n <span part=\"name\"><slot @slotchange=${this.updateAccessibleName}></slot></span>\n <slot name=\"suffix\" @slotchange=${this.updateAccessibleName}></slot>\n\n ${this.closable\n ? html`\n <nile-icon-button\n part=\"close-button\"\n exportparts=\"base:close-button__base\"\n name=\"var(--nile-icon-close, var(--ng-icon-x-close))\"\n library=\"system\"\n label=\"close\"\n class=\"nav-tab__close-button\"\n ?disabled=${this.disabled}\n @click=${this.handleCloseClick}\n tabindex=\"-1\"\n ></nile-icon-button>\n `\n : nothing}\n </nile-link>\n </li>\n `;\n }\n}\n\nexport default NileNavTab;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-nav-tab': NileNavTab;\n }\n}"]}

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

@@ -23,8 +23,7 @@ export const styles = css `
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
     display: block;
-    --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)) ;
+    --nile-nav-tab-padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xs, var(--ng-spacing-xs));
   }

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

	@@ -1 +1 @@
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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0pBxB,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 --nile-nav-tab-padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xs, var(--ng-spacing-xs));\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/version.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '1.9.9';
+export const NILE_ELEMENTS_VERSION = '1.9.10';
 export const NILE_VERSION = '1.2.7';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {

package/dist/src/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.9.9';\nexport const NILE_VERSION = '1.2.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process \|\| { env: { NODE_ENV: 'production' } };\n}\n"]}
1	+ {"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.9.10';\nexport const NILE_VERSION = '1.2.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process \|\| { env: { NODE_ENV: 'production' } };\n}\n"]}