@aquera/nile-elements 1.8.7 → 1.8.9

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 (60) hide show
  1. package/README.md +6 -0
  2. package/dist/index.js +56 -21
  3. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js +1 -1
  4. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map +1 -1
  5. package/dist/nile-button-toggle/nile-button-toggle.css.esm.js +5 -5
  6. package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js +1 -1
  7. package/dist/nile-filter-chip/nile-filter-chip.css.cjs.js.map +1 -1
  8. package/dist/nile-filter-chip/nile-filter-chip.css.esm.js +5 -5
  9. package/dist/nile-list-item/nile-list-item.css.cjs.js +1 -1
  10. package/dist/nile-list-item/nile-list-item.css.cjs.js.map +1 -1
  11. package/dist/nile-list-item/nile-list-item.css.esm.js +9 -3
  12. package/dist/nile-menu-item/nile-menu-item.css.cjs.js +1 -1
  13. package/dist/nile-menu-item/nile-menu-item.css.cjs.js.map +1 -1
  14. package/dist/nile-menu-item/nile-menu-item.css.esm.js +5 -5
  15. package/dist/nile-option/nile-option.css.cjs.js +1 -1
  16. package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
  17. package/dist/nile-option/nile-option.css.esm.js +3 -3
  18. package/dist/nile-side-bar/nile-side-bar.cjs.js +1 -1
  19. package/dist/nile-side-bar/nile-side-bar.cjs.js.map +1 -1
  20. package/dist/nile-side-bar/nile-side-bar.css.cjs.js +1 -1
  21. package/dist/nile-side-bar/nile-side-bar.css.cjs.js.map +1 -1
  22. package/dist/nile-side-bar/nile-side-bar.css.esm.js +31 -2
  23. package/dist/nile-side-bar/nile-side-bar.esm.js +2 -2
  24. package/dist/nile-side-bar-expand/nile-side-bar-expand.cjs.js +1 -1
  25. package/dist/nile-side-bar-expand/nile-side-bar-expand.cjs.js.map +1 -1
  26. package/dist/nile-side-bar-expand/nile-side-bar-expand.esm.js +2 -2
  27. package/dist/src/nile-button-toggle/nile-button-toggle.css.js +5 -5
  28. package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
  29. package/dist/src/nile-filter-chip/nile-filter-chip.css.js +3 -3
  30. package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map +1 -1
  31. package/dist/src/nile-list-item/nile-list-item.css.js +7 -1
  32. package/dist/src/nile-list-item/nile-list-item.css.js.map +1 -1
  33. package/dist/src/nile-menu-item/nile-menu-item.css.js +5 -5
  34. package/dist/src/nile-menu-item/nile-menu-item.css.js.map +1 -1
  35. package/dist/src/nile-option/nile-option.css.js +3 -3
  36. package/dist/src/nile-option/nile-option.css.js.map +1 -1
  37. package/dist/src/nile-side-bar/nile-side-bar.css.js +29 -0
  38. package/dist/src/nile-side-bar/nile-side-bar.css.js.map +1 -1
  39. package/dist/src/nile-side-bar/nile-side-bar.d.ts +16 -0
  40. package/dist/src/nile-side-bar/nile-side-bar.js +30 -0
  41. package/dist/src/nile-side-bar/nile-side-bar.js.map +1 -1
  42. package/dist/src/nile-side-bar/nile-side-bar.test.d.ts +2 -0
  43. package/dist/src/nile-side-bar/nile-side-bar.test.js +96 -0
  44. package/dist/src/nile-side-bar/nile-side-bar.test.js.map +1 -0
  45. package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js +4 -6
  46. package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js.map +1 -1
  47. package/dist/src/version.js +1 -1
  48. package/dist/src/version.js.map +1 -1
  49. package/dist/tsconfig.tsbuildinfo +1 -1
  50. package/package.json +1 -1
  51. package/src/nile-button-toggle/nile-button-toggle.css.ts +5 -5
  52. package/src/nile-filter-chip/nile-filter-chip.css.ts +3 -3
  53. package/src/nile-list-item/nile-list-item.css.ts +7 -1
  54. package/src/nile-menu-item/nile-menu-item.css.ts +5 -5
  55. package/src/nile-option/nile-option.css.ts +3 -3
  56. package/src/nile-side-bar/nile-side-bar.css.ts +29 -0
  57. package/src/nile-side-bar/nile-side-bar.test.ts +109 -0
  58. package/src/nile-side-bar/nile-side-bar.ts +29 -0
  59. package/src/nile-side-bar-expand/nile-side-bar-expand.ts +7 -8
  60. package/vscode-html-custom-data.json +10 -1
package/README.md CHANGED
@@ -79,6 +79,12 @@ To run a local development server that serves the basic demo located in `demo/in
79
79
 
80
80
  In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
81
81
 
82
+ #### Version 1.8.9 (June 15, 2026)
83
+ - NxtGen Updates: Updated color contrast implementation across Nile Menu, Button Toggle, Nile Select, Nile Auto Complete, Nile Chip, Nile Dropdown, Filter Chip, Inline Edit, and Nile List to align with new NxtGen guidelines and standardized design tokens for hover and selection states. (UIF-1267)
84
+
85
+ #### Version 1.8.8 (June 12, 2026)
86
+ - Nile Sidebar: Added Overlay Variant (UIF-1266)
87
+
82
88
  #### Version 1.8.7 (June 11, 2026)
83
89
  - Nile Select: Fixed the multi-select checkboxes and show selected filter issue in NxtGen (UIF-1262)
84
90
  - Nile Virtual Select: Fixed the multi-select checkboxes issue in NxtGen (UIF-1262)
package/dist/index.js CHANGED
@@ -6358,15 +6358,15 @@ class no{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
6358
6358
  }
6359
6359
 
6360
6360
  .option--hover:not(.option--current):not(.option--disabled) {
6361
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
6361
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
6362
6362
  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
6363
6363
  border-radius: var(--nile-radius-none, var(--ng-radius-sm));
6364
6364
  }
6365
6365
 
6366
6366
  .option--current,
6367
6367
  .option--current.option--disabled {
6368
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
6369
- color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
6368
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
6369
+ color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
6370
6370
  opacity: 1;
6371
6371
  border-radius: var(--nile-radius-none, var(--ng-radius-sm));
6372
6372
  }
@@ -6570,8 +6570,8 @@ class no{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
6570
6570
  }
6571
6571
 
6572
6572
  .menu-item.menu-item--active {
6573
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
6574
- color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
6573
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
6574
+ color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
6575
6575
  }
6576
6576
 
6577
6577
  .menu-item.menu-item--disabled {
@@ -6610,13 +6610,13 @@ class no{constructor(e){this._element=null;const t=e??window;this._node=t,e&&(th
6610
6610
  }
6611
6611
 
6612
6612
  :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
6613
- background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
6613
+ background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));
6614
6614
  color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
6615
6615
  }
6616
6616
 
6617
6617
  :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
6618
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
6619
- color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
6618
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
6619
+ color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
6620
6620
  }
6621
6621
 
6622
6622
  :host(:focus-visible) .menu-item {
@@ -9833,7 +9833,7 @@ ${this.showMonthDropdown||this.showYearDropdown?_`
9833
9833
  }
9834
9834
 
9835
9835
  .nile-button-toggle:hover {
9836
- background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
9836
+ background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
9837
9837
  }
9838
9838
 
9839
9839
  .nile-button-toggle:active {
@@ -9865,13 +9865,13 @@ ${this.showMonthDropdown||this.showYearDropdown?_`
9865
9865
  }
9866
9866
 
9867
9867
  .nile-button-toggle__active {
9868
- background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );
9869
- color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
9868
+ background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
9869
+ color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
9870
9870
  }
9871
9871
 
9872
9872
  .nile-button-toggle__active:hover {
9873
- background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
9874
- color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
9873
+ background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
9874
+ color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
9875
9875
  }
9876
9876
 
9877
9877
  .nile-button-toggle__disabled {
@@ -13732,7 +13732,13 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
13732
13732
  }
13733
13733
 
13734
13734
  :host(:hover) {
13735
- background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */
13735
+ background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary-hover)); /* Change background color on hover */
13736
+ }
13737
+
13738
+ :host([selected]),
13739
+ :host([active]) {
13740
+ background-color: var(--ng-colors-bg-brand-primary); /* Selection background */
13741
+ color: var(--ng-colors-bg-brand-solid); /* Selection text and elements */
13736
13742
  }
13737
13743
 
13738
13744
  .preffix__icon {
@@ -14316,14 +14322,14 @@ function*(e,t){if(void 0!==e){let i=0;for(const n of e)yield t(n,i++)}}
14316
14322
  }
14317
14323
 
14318
14324
  .chip:hover {
14319
- background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));
14325
+ background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-secondary-hover));
14320
14326
  }
14321
14327
  .chip:active {
14322
- background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
14328
+ background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
14323
14329
  border-color: var(--nile-filter-chip-active-border-color-stroke);
14324
14330
  }
14325
14331
  :host([active]) .chip {
14326
- background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
14332
+ background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
14327
14333
  border-color: var(--nile-filter-chip-active-border-color-stroke);
14328
14334
  }
14329
14335
 
@@ -17885,7 +17891,7 @@ nile-rich-text-editor[disabled] .editor a {
17885
17891
  </span>
17886
17892
  `:B}
17887
17893
  </button>
17888
- `}};e([ue({type:String,reflect:!0})],qS.prototype,"color",void 0),e([ue({type:Boolean,reflect:!0})],qS.prototype,"active",void 0),qS=e([ge("nile-color-swatch")],qS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.8.7"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const KS=r`
17894
+ `}};e([ue({type:String,reflect:!0})],qS.prototype,"color",void 0),e([ue({type:Boolean,reflect:!0})],qS.prototype,"active",void 0),qS=e([ge("nile-color-swatch")],qS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.8.9"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const KS=r`
17889
17895
  :host {
17890
17896
 
17891
17897
  top: 0;
@@ -17920,6 +17926,35 @@ nile-rich-text-editor[disabled] .editor a {
17920
17926
  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
17921
17927
  }
17922
17928
 
17929
+ /*
17930
+ * Overlay mode: lift the sidebar out of normal flow so expanding it floats
17931
+ * on top of adjacent content instead of pushing siblings. Anchors to the
17932
+ * nearest positioned ancestor; set --sidebar-overlay-position: fixed to pin
17933
+ * it to the viewport instead.
17934
+ */
17935
+ :host([overlay]) {
17936
+ position: var(--sidebar-overlay-position, absolute);
17937
+ top: 0;
17938
+ bottom: 0;
17939
+ height: 100%;
17940
+ }
17941
+
17942
+ :host([overlay][position='left']) {
17943
+ left: 0;
17944
+ }
17945
+
17946
+ :host([overlay][position='right']) {
17947
+ right: 0;
17948
+ }
17949
+
17950
+ /* Elevate while expanded so it reads as floating above the page. */
17951
+ :host([overlay]:not([collapsed])) {
17952
+ box-shadow: var(
17953
+ --sidebar-overlay-shadow,
17954
+ 0px 8px 24px 0px rgba(119, 125, 130, 0.25)
17955
+ );
17956
+ }
17957
+
17923
17958
  :host {
17924
17959
  scrollbar-width: thin;
17925
17960
  scrollbar-color: #64748b transparent;
@@ -17966,13 +18001,13 @@ nile-rich-text-editor[disabled] .editor a {
17966
18001
 
17967
18002
 
17968
18003
 
17969
- `;let ew=class extends Fe{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[KS]}updated(e){super.updated(e),e.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach((e=>e.toggleAttribute("collapsed",this.collapsed))),e.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),e.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}render(){return _`
18004
+ `;let ew=class extends Fe{constructor(){super(...arguments),this.position="left",this.collapsed=!1,this.overlay=!1,this.fullHeight=!1,this.width=null,this.collapsedWidth=null}static get styles(){return[KS]}updated(e){super.updated(e),e.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach((e=>e.toggleAttribute("collapsed",this.collapsed))),e.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width",`${this.width}px`),e.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width",`${this.collapsedWidth}px`)}expand(){this.setCollapsed(!1)}collapse(){this.setCollapsed(!0)}toggle(e){this.setCollapsed(e??!this.collapsed)}setCollapsed(e){this.collapsed!==e&&(this.collapsed=e,this.emit("nile-toggle",{collapsed:e}))}render(){return _`
17970
18005
  <slot name="header" part="header"></slot>
17971
18006
  <div class="scroll-container" part="scroll-container">
17972
18007
  <slot></slot>
17973
18008
  </div>
17974
18009
  <slot name="footer" part="footer"></slot>
17975
- `}};e([ue({type:String,reflect:!0,attribute:!0})],ew.prototype,"position",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"collapsed",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"fullHeight",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"width",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"collapsedWidth",void 0),ew=e([ge("nile-side-bar")],ew);const tw=r`
18010
+ `}};e([ue({type:String,reflect:!0,attribute:!0})],ew.prototype,"position",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"collapsed",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"overlay",void 0),e([ue({type:Boolean,reflect:!0,attribute:!0})],ew.prototype,"fullHeight",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"width",void 0),e([ue({type:Number,attribute:!0})],ew.prototype,"collapsedWidth",void 0),ew=e([ge("nile-side-bar")],ew);const tw=r`
17976
18011
  :host {
17977
18012
  display: flex;
17978
18013
  align-items: center;
@@ -18080,7 +18115,7 @@ nile-rich-text-editor[disabled] .editor a {
18080
18115
  transition: background-color 0.2s ease;
18081
18116
  }
18082
18117
 
18083
- `;let rw=class extends Fe{constructor(){super(...arguments),this.collapsed=!1,this.expandTooltipText="Expand Sidebar",this.collapseTooltipText="Collapse Sidebar"}static get styles(){return[Mw]}connectedCallback(){super.connectedCallback();const e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"))}toggleSidebar(){const e=this.closest("nile-side-bar");if(!e)return;e.hasAttribute("collapsed")?(e.removeAttribute("collapsed"),this.collapsed=!1):(e.setAttribute("collapsed",""),this.collapsed=!0)}render(){return _`
18118
+ `;let rw=class extends Fe{constructor(){super(...arguments),this.collapsed=!1,this.expandTooltipText="Expand Sidebar",this.collapseTooltipText="Collapse Sidebar"}static get styles(){return[Mw]}connectedCallback(){super.connectedCallback();const e=this.closest("nile-side-bar");e&&(this.collapsed=e.hasAttribute("collapsed"))}toggleSidebar(){const e=this.closest("nile-side-bar");e&&("function"==typeof e.toggle?e.toggle():e.toggleAttribute("collapsed",!e.hasAttribute("collapsed")),this.collapsed=e.hasAttribute("collapsed"))}render(){return _`
18084
18119
  <button class="expand-btn" part="expand-btn" @click=${this.toggleSidebar}>
18085
18120
  ${this.collapsed?_`
18086
18121
  <nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\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 }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\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 }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );\n color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-button-toggle.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\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 }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\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 }\n\n .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );\n color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -29,7 +29,7 @@ import{css as r}from"lit";const n=r`
29
29
  }
30
30
 
31
31
  .nile-button-toggle:hover {
32
- background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
32
+ background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
33
33
  }
34
34
 
35
35
  .nile-button-toggle:active {
@@ -61,13 +61,13 @@ import{css as r}from"lit";const n=r`
61
61
  }
62
62
 
63
63
  .nile-button-toggle__active {
64
- background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );
65
- color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
64
+ background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
65
+ color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
66
66
  }
67
67
 
68
68
  .nile-button-toggle__active:hover {
69
- background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
70
- color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
69
+ background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
70
+ color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
71
71
  }
72
72
 
73
73
  .nile-button-toggle__disabled {
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\n :host{\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 }\n\n .filter-chips {\n display: flex;\n align-items: center;\n }\n\n\n .chip {\n display: inline-flex;\n align-items: center;\n height: 30px;\n padding: 8px;\n border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: 14px;\n background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));\n color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n cursor: pointer;\n box-sizing: border-box;\n }\n\n .chip:hover {\n background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));\n }\n .chip:active {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n:host([active]) .chip {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n\n\n .icon {\n color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n position: relative;\n top: 12px;\n }\n\n .label {\n font-weight: 500;\n color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));\n }\n\n nile-badge::part(base) {\n width: auto;\n height: 14px;\n border-radius: 100px;\n padding: 6px;\n gap: 10px;\n font-size: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n\n .chip-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n .clear-all-container {\n margin-left: 18px;\n white-space: nowrap;\n cursor: pointer;\n }\n\n\n .value {\n color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 140px;\n vertical-align: bottom;\n}\n\n\n .close-icon {\n color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));\n cursor: pointer;\n display: flex;\n align-items: center;\n border-radius: 50%;\n transition: background-color 0.2s;\n }\n\n .close-icon:hover {\n background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));\n color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));\n }\n\n.label-wrapper {\n margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n margin-right: 6px;\n}\n\n.value-wrapper {\n margin-right: 4px; \n}\n\n.badge-wrapper {\n margin-right: 12px; \n}\n\n.badge{\n display: inline-flex;\n align-items: center;\n height: 20px; \n}\n\nnile-badge::part(content) {\n line-height: 20px;\n}\n\n:host([disabled]) .chip {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n cursor: not-allowed;\n opacity: var(--nile-opacity-100, var(--ng-opacity-50));\n}\n\n:host([disabled]) .label {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n font-family:colfax-regular;\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) .value {\n color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) nile-badge::part(base) {\n background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n user-select: none;\n -webkit-user-select: none;\n}\n\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\n :host{\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 }\n\n .filter-chips {\n display: flex;\n align-items: center;\n }\n\n\n .chip {\n display: inline-flex;\n align-items: center;\n height: 30px;\n padding: 8px;\n border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: 14px;\n background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));\n color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n cursor: pointer;\n box-sizing: border-box;\n }\n\n .chip:hover {\n background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-secondary-hover));\n }\n .chip:active {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n:host([active]) .chip {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n\n\n .icon {\n color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n position: relative;\n top: 12px;\n }\n\n .label {\n font-weight: 500;\n color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));\n }\n\n nile-badge::part(base) {\n width: auto;\n height: 14px;\n border-radius: 100px;\n padding: 6px;\n gap: 10px;\n font-size: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n\n .chip-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n .clear-all-container {\n margin-left: 18px;\n white-space: nowrap;\n cursor: pointer;\n }\n\n\n .value {\n color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 140px;\n vertical-align: bottom;\n}\n\n\n .close-icon {\n color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));\n cursor: pointer;\n display: flex;\n align-items: center;\n border-radius: 50%;\n transition: background-color 0.2s;\n }\n\n .close-icon:hover {\n background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));\n color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));\n }\n\n.label-wrapper {\n margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n margin-right: 6px;\n}\n\n.value-wrapper {\n margin-right: 4px; \n}\n\n.badge-wrapper {\n margin-right: 12px; \n}\n\n.badge{\n display: inline-flex;\n align-items: center;\n height: 20px; \n}\n\nnile-badge::part(content) {\n line-height: 20px;\n}\n\n:host([disabled]) .chip {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n cursor: not-allowed;\n opacity: var(--nile-opacity-100, var(--ng-opacity-50));\n}\n\n:host([disabled]) .label {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n font-family:colfax-regular;\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) .value {\n color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) nile-badge::part(base) {\n background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n user-select: none;\n -webkit-user-select: none;\n}\n\n"]))));}};});
2
2
  //# sourceMappingURL=nile-filter-chip.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-filter-chip.css.cjs.js","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FilterChip CSS\n */\n\nexport const styles = css`\n\n :host{\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 }\n\n .filter-chips {\n display: flex;\n align-items: center;\n }\n\n\n .chip {\n display: inline-flex;\n align-items: center;\n height: 30px;\n padding: 8px;\n border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: 14px;\n background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));\n color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n cursor: pointer;\n box-sizing: border-box;\n }\n\n .chip:hover {\n background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));\n }\n .chip:active {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n:host([active]) .chip {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n\n\n .icon {\n color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n position: relative;\n top: 12px;\n }\n\n .label {\n font-weight: 500;\n color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));\n }\n\n nile-badge::part(base) {\n width: auto;\n height: 14px;\n border-radius: 100px;\n padding: 6px;\n gap: 10px;\n font-size: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n\n .chip-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n .clear-all-container {\n margin-left: 18px;\n white-space: nowrap;\n cursor: pointer;\n }\n\n\n .value {\n color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 140px;\n vertical-align: bottom;\n}\n\n\n .close-icon {\n color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));\n cursor: pointer;\n display: flex;\n align-items: center;\n border-radius: 50%;\n transition: background-color 0.2s;\n }\n\n .close-icon:hover {\n background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));\n color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));\n }\n\n.label-wrapper {\n margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n margin-right: 6px;\n}\n\n.value-wrapper {\n margin-right: 4px; \n}\n\n.badge-wrapper {\n margin-right: 12px; \n}\n\n.badge{\n display: inline-flex;\n align-items: center;\n height: 20px; \n}\n\nnile-badge::part(content) {\n line-height: 20px;\n}\n\n:host([disabled]) .chip {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n cursor: not-allowed;\n opacity: var(--nile-opacity-100, var(--ng-opacity-50));\n}\n\n:host([disabled]) .label {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n font-family:colfax-regular;\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) .value {\n color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) nile-badge::part(base) {\n background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n user-select: none;\n -webkit-user-select: none;\n}\n\n`;\n\nexport default [styles];\n\n "],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAaaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-filter-chip.css.cjs.js","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FilterChip CSS\n */\n\nexport const styles = css`\n\n :host{\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 }\n\n .filter-chips {\n display: flex;\n align-items: center;\n }\n\n\n .chip {\n display: inline-flex;\n align-items: center;\n height: 30px;\n padding: 8px;\n border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: 14px;\n background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));\n color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n cursor: pointer;\n box-sizing: border-box;\n }\n\n .chip:hover {\n background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-secondary-hover));\n }\n .chip:active {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n:host([active]) .chip {\n background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));\n border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n\n\n .icon {\n color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n position: relative;\n top: 12px;\n }\n\n .label {\n font-weight: 500;\n color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));\n }\n\n nile-badge::part(base) {\n width: auto;\n height: 14px;\n border-radius: 100px;\n padding: 6px;\n gap: 10px;\n font-size: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n\n .chip-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n .clear-all-container {\n margin-left: 18px;\n white-space: nowrap;\n cursor: pointer;\n }\n\n\n .value {\n color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 140px;\n vertical-align: bottom;\n}\n\n\n .close-icon {\n color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));\n cursor: pointer;\n display: flex;\n align-items: center;\n border-radius: 50%;\n transition: background-color 0.2s;\n }\n\n .close-icon:hover {\n background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));\n color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));\n }\n\n.label-wrapper {\n margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n margin-right: 6px;\n}\n\n.value-wrapper {\n margin-right: 4px; \n}\n\n.badge-wrapper {\n margin-right: 12px; \n}\n\n.badge{\n display: inline-flex;\n align-items: center;\n height: 20px; \n}\n\nnile-badge::part(content) {\n line-height: 20px;\n}\n\n:host([disabled]) .chip {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n cursor: not-allowed;\n opacity: var(--nile-opacity-100, var(--ng-opacity-50));\n}\n\n:host([disabled]) .label {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary-700));\n font-family:colfax-regular;\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) .value {\n color: var(--nile-colors-primary-500, var(--ng-colors-text-brand-secondary-700));\n user-select: none;\n -webkit-user-select: none;\n}\n\n:host([disabled]) nile-badge::part(base) {\n background-color: var(--nile-colors-primary-500,var(--ng-colors-text-brand-secondary-700));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n user-select: none;\n -webkit-user-select: none;\n}\n\n`;\n\nexport default [styles];\n\n "],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAaaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -1,4 +1,4 @@
1
- import{css as r}from"lit";const e=r`
1
+ import{css as r}from"lit";const o=r`
2
2
 
3
3
  :host{
4
4
  -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
@@ -28,14 +28,14 @@ import{css as r}from"lit";const e=r`
28
28
  }
29
29
 
30
30
  .chip:hover {
31
- background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));
31
+ background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-secondary-hover));
32
32
  }
33
33
  .chip:active {
34
- background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
34
+ background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
35
35
  border-color: var(--nile-filter-chip-active-border-color-stroke);
36
36
  }
37
37
  :host([active]) .chip {
38
- background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
38
+ background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
39
39
  border-color: var(--nile-filter-chip-active-border-color-stroke);
40
40
  }
41
41
 
@@ -161,4 +161,4 @@ nile-badge::part(content) {
161
161
  -webkit-user-select: none;
162
162
  }
163
163
 
164
- `;export{e as s};
164
+ `;export{o as s};
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: flex;\n padding: \n var(--nile-spacing-lg, var(--ng-spacing-lg)) \n var(--nile-spacing-xl, var(--ng-spacing-xl));\n flex-direction: row;\n align-items: flex-start;\n justify-content: start;\n position: relative;\n height: 100%;\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 }\n\n :host(:hover) {\n background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */\n }\n\n .preffix__icon {\n display: inline-block;\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .list__item {\n cursor: pointer;\n height: 100%;\n display: block;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n }\n\n .content__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-3px, var(--ng-spacing-xs));\n height: 100%;\n box-sizing: border-box;\n }\n\n .heading {\n display: inline-block;\n font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n }\n\n .subheading {\n display: inline-block;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .list-item__suffix {\n display: inline-block;\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: flex;\n padding: \n var(--nile-spacing-lg, var(--ng-spacing-lg)) \n var(--nile-spacing-xl, var(--ng-spacing-xl));\n flex-direction: row;\n align-items: flex-start;\n justify-content: start;\n position: relative;\n height: 100%;\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 }\n\n :host(:hover) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary-hover)); /* Change background color on hover */\n }\n\n :host([selected]),\n :host([active]) {\n background-color: var(--ng-colors-bg-brand-primary); /* Selection background */\n color: var(--ng-colors-bg-brand-solid); /* Selection text and elements */\n }\n\n .preffix__icon {\n display: inline-block;\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .list__item {\n cursor: pointer;\n height: 100%;\n display: block;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n }\n\n .content__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-3px, var(--ng-spacing-xs));\n height: 100%;\n box-sizing: border-box;\n }\n\n .heading {\n display: inline-block;\n font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n }\n\n .subheading {\n display: inline-block;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .list-item__suffix {\n display: inline-block;\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-list-item.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-list-item.css.cjs.js","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ListItem CSS\n */\nexport const styles = css`\n :host {\n display: flex;\n padding: \n var(--nile-spacing-lg, var(--ng-spacing-lg)) \n var(--nile-spacing-xl, var(--ng-spacing-xl));\n flex-direction: row;\n align-items: flex-start;\n justify-content: start;\n position: relative;\n height: 100%;\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 }\n\n :host(:hover) {\n background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */\n }\n\n .preffix__icon {\n display: inline-block;\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .list__item {\n cursor: pointer;\n height: 100%;\n display: block;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n }\n\n .content__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-3px, var(--ng-spacing-xs));\n height: 100%;\n box-sizing: border-box;\n }\n\n .heading {\n display: inline-block;\n font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n }\n\n .subheading {\n display: inline-block;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .list-item__suffix {\n display: inline-block;\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-list-item.css.cjs.js","sources":["../../../src/nile-list-item/nile-list-item.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ListItem CSS\n */\nexport const styles = css`\n :host {\n display: flex;\n padding: \n var(--nile-spacing-lg, var(--ng-spacing-lg)) \n var(--nile-spacing-xl, var(--ng-spacing-xl));\n flex-direction: row;\n align-items: flex-start;\n justify-content: start;\n position: relative;\n height: 100%;\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 }\n\n :host(:hover) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary-hover)); /* Change background color on hover */\n }\n\n :host([selected]),\n :host([active]) {\n background-color: var(--ng-colors-bg-brand-primary); /* Selection background */\n color: var(--ng-colors-bg-brand-solid); /* Selection text and elements */\n }\n\n .preffix__icon {\n display: inline-block;\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .list__item {\n cursor: pointer;\n height: 100%;\n display: block;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n }\n\n .content__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-3px, var(--ng-spacing-xs));\n height: 100%;\n box-sizing: border-box;\n }\n\n .heading {\n display: inline-block;\n font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n }\n\n .subheading {\n display: inline-block;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n }\n\n .list-item__suffix {\n display: inline-block;\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -1,4 +1,4 @@
1
- import{css as i}from"lit";const n=i`
1
+ import{css as n}from"lit";const i=n`
2
2
  :host {
3
3
  display: flex;
4
4
  padding:
@@ -15,7 +15,13 @@ import{css as i}from"lit";const n=i`
15
15
  }
16
16
 
17
17
  :host(:hover) {
18
- background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */
18
+ background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary-hover)); /* Change background color on hover */
19
+ }
20
+
21
+ :host([selected]),
22
+ :host([active]) {
23
+ background-color: var(--ng-colors-bg-brand-primary); /* Selection background */
24
+ color: var(--ng-colors-bg-brand-solid); /* Selection text and elements */
19
25
  }
20
26
 
21
27
  .preffix__icon {
@@ -56,4 +62,4 @@ import{css as i}from"lit";const n=i`
56
62
  right: 16px;
57
63
  cursor: pointer;
58
64
  }
59
- `;export{n as s};
65
+ `;export{i as s};
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",i=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\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 }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n :host([inert]) {\n display: none;\n }\n\n .menu-item {\n position: relative;\n display: flex;\n align-items: stretch;\n font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n min-height:40px;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .menu-item.menu-item--active {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n }\n\n .menu-item.menu-item--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .menu-item .menu-item__label {\n margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n display: inline-flex;\n }\n\n .menu-item .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n .menu-item .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n }\n\n :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n }\n\n :host(:focus-visible) .menu-item {\n outline: none;\n background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n opacity: 1;\n }\n\n .menu-item .menu-item__check,\n .menu-item .menu-item__chevron {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n visibility: hidden;\n }\n\n .menu-item--checked .menu-item__check,\n .menu-item--has-submenu .menu-item__chevron {\n visibility: visible;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .menu-item,\n :host(:focus-visible) .menu-item {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",i=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\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 }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n :host([inert]) {\n display: none;\n }\n\n .menu-item {\n position: relative;\n display: flex;\n align-items: stretch;\n font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n min-height:40px;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .menu-item.menu-item--active {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .menu-item.menu-item--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .menu-item .menu-item__label {\n margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n display: inline-flex;\n }\n\n .menu-item .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n .menu-item .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n }\n\n :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n :host(:focus-visible) .menu-item {\n outline: none;\n background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n opacity: 1;\n }\n\n .menu-item .menu-item__check,\n .menu-item .menu-item__chevron {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n visibility: hidden;\n }\n\n .menu-item--checked .menu-item__check,\n .menu-item--has-submenu .menu-item__chevron {\n visibility: visible;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .menu-item,\n :host(:focus-visible) .menu-item {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-menu-item.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-menu-item.css.cjs.js","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * MenuItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\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 }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n :host([inert]) {\n display: none;\n }\n\n .menu-item {\n position: relative;\n display: flex;\n align-items: stretch;\n font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n min-height:40px;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .menu-item.menu-item--active {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n }\n\n .menu-item.menu-item--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .menu-item .menu-item__label {\n margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n display: inline-flex;\n }\n\n .menu-item .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n .menu-item .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n }\n\n :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n }\n\n :host(:focus-visible) .menu-item {\n outline: none;\n background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n opacity: 1;\n }\n\n .menu-item .menu-item__check,\n .menu-item .menu-item__chevron {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n visibility: hidden;\n }\n\n .menu-item--checked .menu-item__check,\n .menu-item--has-submenu .menu-item__chevron {\n visibility: visible;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .menu-item,\n :host(:focus-visible) .menu-item {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-menu-item.css.cjs.js","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * MenuItem CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\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 }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n display: block;\n }\n\n :host([inert]) {\n display: none;\n }\n\n .menu-item {\n position: relative;\n display: flex;\n align-items: stretch;\n font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n min-height:40px;\n transition: 150ms fill;\n user-select: none;\n white-space: nowrap;\n cursor: pointer;\n padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .menu-item.menu-item--active {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .menu-item.menu-item--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .menu-item .menu-item__label {\n margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n display: inline-flex;\n }\n\n .menu-item .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n .menu-item .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .menu-item .menu-item__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));\n color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n }\n\n :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n :host(:focus-visible) .menu-item {\n outline: none;\n background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n opacity: 1;\n }\n\n .menu-item .menu-item__check,\n .menu-item .menu-item__chevron {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n visibility: hidden;\n }\n\n .menu-item--checked .menu-item__check,\n .menu-item--has-submenu .menu-item__chevron {\n visibility: visible;\n }\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .menu-item,\n :host(:focus-visible) .menu-item {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -42,8 +42,8 @@ import{css as e}from"lit";const i=e`
42
42
  }
43
43
 
44
44
  .menu-item.menu-item--active {
45
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
46
- color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
45
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
46
+ color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
47
47
  }
48
48
 
49
49
  .menu-item.menu-item--disabled {
@@ -82,13 +82,13 @@ import{css as e}from"lit";const i=e`
82
82
  }
83
83
 
84
84
  :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
85
- background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
85
+ background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));
86
86
  color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
87
87
  }
88
88
 
89
89
  :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
90
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
91
- color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
90
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
91
+ color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
92
92
  }
93
93
 
94
94
  :host(:focus-visible) .menu-item {
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n user-select: none;\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 }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n :host([tickonselect][selected]) .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n }\n :host([legacy]) .option--checkbox{\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n \n :host([tickonselect]) .option--checkbox{\n display: none;\n }\n\n :host([tickonselect]) .option{\n padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n\n .option__label-container {\n display: flex;\n flex-direction: column;\n }\n\n .option__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n\n .option__label-text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var i,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){i=_lit.css;}],execute:function execute(){_export("s",n=i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n user-select: none;\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 }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n :host([tickonselect][selected]) .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n }\n :host([legacy]) .option--checkbox{\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n \n :host([tickonselect]) .option--checkbox{\n display: none;\n }\n\n :host([tickonselect]) .option{\n padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n\n .option__label-container {\n display: flex;\n flex-direction: column;\n }\n\n .option__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n\n .option__label-text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-option.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-option.css.cjs.js","sources":["../../../src/nile-option/nile-option.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\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 }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n :host([tickonselect][selected]) .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n }\n :host([legacy]) .option--checkbox{\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n \n :host([tickonselect]) .option--checkbox{\n display: none;\n }\n\n :host([tickonselect]) .option{\n padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n\n .option__label-container {\n display: flex;\n flex-direction: column;\n }\n\n .option__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n\n .option__label-text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-option.css.cjs.js","sources":["../../../src/nile-option/nile-option.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\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 }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-none));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n :host([legacy]) .option {\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n :host([tickonselect][selected]) .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-inline-block));\n }\n :host([legacy]) .option--checkbox{\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n \n :host([tickonselect]) .option--checkbox{\n display: none;\n }\n\n :host([tickonselect]) .option{\n padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n\n .option__label-container {\n display: flex;\n flex-direction: column;\n }\n\n .option__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n\n .option__label-text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n width: 99%;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -35,15 +35,15 @@ import{css as i}from"lit";const n=i`
35
35
  }
36
36
 
37
37
  .option--hover:not(.option--current):not(.option--disabled) {
38
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
38
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
39
39
  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
40
40
  border-radius: var(--nile-radius-none, var(--ng-radius-sm));
41
41
  }
42
42
 
43
43
  .option--current,
44
44
  .option--current.option--disabled {
45
- background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
46
- color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
45
+ background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
46
+ color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
47
47
  opacity: 1;
48
48
  border-radius: var(--nile-radius-none, var(--ng-radius-sm));
49
49
  }
@@ -1,2 +1,2 @@
1
- function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,r,l,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileSideBarCssCjsJs){r=_nileSideBarCssCjsJs.s;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_l){function o(){var _this;_classCallCheck(this,o);_this=_callSuper(this,o,arguments),_this.position="left",_this.collapsed=!1,_this.fullHeight=!1,_this.width=null,_this.collapsedWidth=null;return _this;}_inherits(o,_l);return _createClass(o,[{key:"updated",value:function updated(t){var _this2=this;_superPropGet(o,"updated",this,3)([t]),t.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach(function(t){return t.toggleAttribute("collapsed",_this2.collapsed);}),t.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width","".concat(this.width,"px")),t.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width","".concat(this.collapsedWidth,"px"));}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n "])));}}],[{key:"styles",get:function get(){return[r];}}]);}(l));t([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),t([i({type:Number,attribute:!0})],o.prototype,"width",void 0),t([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),_export("N",o=t([s("nile-side-bar")],o));}};});
1
+ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-side-bar.css.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,e,i,s,l,r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){e=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.property;s=_litDecoratorsJs.customElement;},function(_nileSideBarCssCjsJs){l=_nileSideBarCssCjsJs.s;},function(_internalNileElementCjsJs){r=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",o=/*#__PURE__*/function(_r){function o(){var _this;_classCallCheck(this,o);_this=_callSuper(this,o,arguments),_this.position="left",_this.collapsed=!1,_this.overlay=!1,_this.fullHeight=!1,_this.width=null,_this.collapsedWidth=null;return _this;}_inherits(o,_r);return _createClass(o,[{key:"updated",value:function updated(t){var _this2=this;_superPropGet(o,"updated",this,3)([t]),t.has("collapsed")&&this.querySelectorAll("\n nile-side-bar-logo,\n nile-side-bar-footer-item,\n nile-side-bar-group-item,\n nile-side-bar-group,\n nile-side-bar-header,\n nile-side-bar-group-item-text,\n nile-side-bar-group-item-icon,\n nile-side-bar-expand\n ").forEach(function(t){return t.toggleAttribute("collapsed",_this2.collapsed);}),t.has("width")&&null!==this.width&&this.style.setProperty("--sidebar-width","".concat(this.width,"px")),t.has("collapsedWidth")&&null!==this.collapsedWidth&&this.style.setProperty("--sidebar-collapsed-width","".concat(this.collapsedWidth,"px"));}},{key:"expand",value:function expand(){this.setCollapsed(!1);}},{key:"collapse",value:function collapse(){this.setCollapsed(!0);}},{key:"toggle",value:function toggle(t){this.setCollapsed(t!==null&&t!==void 0?t:!this.collapsed);}},{key:"setCollapsed",value:function setCollapsed(t){this.collapsed!==t&&(this.collapsed=t,this.emit("nile-toggle",{collapsed:t}));}},{key:"render",value:function render(){return e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <slot name=\"header\" part=\"header\"></slot>\n <div class=\"scroll-container\" part=\"scroll-container\">\n <slot></slot>\n </div>\n <slot name=\"footer\" part=\"footer\"></slot>\n "])));}}],[{key:"styles",get:function get(){return[l];}}]);}(r));t([i({type:String,reflect:!0,attribute:!0})],o.prototype,"position",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"collapsed",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"overlay",void 0),t([i({type:Boolean,reflect:!0,attribute:!0})],o.prototype,"fullHeight",void 0),t([i({type:Number,attribute:!0})],o.prototype,"width",void 0),t([i({type:Number,attribute:!0})],o.prototype,"collapsedWidth",void 0),_export("N",o=t([s("nile-side-bar")],o));}};});
2
2
  //# sourceMappingURL=nile-side-bar.cjs.js.map